/*
 * GBXU Salter — Design System v2
 * Original design — NOT a copy of any reference
 * Brand: Gold #d4a843 / Dark Brown #3b2314
 * Architecture: Maple-grade professional
 */

:root {
    /* ── Brand Colors (from logo) ── */
    --gold:           #d4a843;
    --gold-dark:      #b8892e;
    --gold-light:     #e6c36a;
    --gold-glow:      rgba(212, 168, 67, 0.25);
    --gold-soft:      rgba(212, 168, 67, 0.10);
    --gradient-gold:  linear-gradient(135deg, #b8892e 0%, #e6c36a 100%);

    /* ── Dark Tones ── */
    --brown:          #3b2314;
    --brown-mid:      #4a3525;
    --brown-light:    #5a4535;
    --dark:           #1a0e08;
    --gradient-dark:  linear-gradient(135deg, #1a0e08 0%, #3b2314 50%, #4a3525 100%);

    /* ── Light Surfaces ── */
    --surface:        #f7f5f2;
    --cream:          #faf9f7;
    --white:          #ffffff;

    /* ── Borders ── */
    --line:           #e8e3dc;
    --bdr-gold:       rgba(212, 168, 67, 0.30);

    /* ── Text ── */
    --txt:            #2d1a0e;
    --txt-mid:        #6b6258;
    --txt-light:      #9c9389;
    --txt-on-dark:    rgba(255, 255, 255, 0.75);

    /* Typography (Locally Hosted) */
    --ff-head:  'Manrope', sans-serif;
    --ff-body:  'Inter', sans-serif;

    /* ── Spacing (8px base) ── */
    --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
    --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;
    --s12: 96px; --s16: 128px;

    /* ── Radius ── */
    --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 32px; --r-full: 9999px;

    /* ── Shadows ── */
    --sh-sm: 0 2px 8px rgba(0,0,0,0.06);
    --sh-md: 0 8px 24px rgba(0,0,0,0.10);
    --sh-lg: 0 16px 48px rgba(0,0,0,0.14);
    --sh-xl: 0 24px 64px rgba(0,0,0,0.18);
    --sh-gold: 0 8px 32px rgba(212,168,67,0.25);

    /* ── Motion ── */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --t-fast: 200ms; --t-mid: 350ms; --t-slow: 600ms;

    /* ── Layout ── */
    --max-w: 1240px;
    --gutter: clamp(20px, 4vw, 48px);
    --header-h: 88px;
}


/* ═══ RESET ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
    font-family: var(--ff-body);
    line-height: 1.7;
    color: var(--txt);
    background: var(--cream);
    padding-top: var(--header-h);
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
select { appearance: none; }


/* ═══ LAYOUT ═══ */
.wrap {
    width: min(var(--max-w), 92vw);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.section { padding: clamp(72px, 10vw, 110px) 0; }
.section--white   { background: var(--white); }
.section--cream   { background: var(--cream); }
.section--surface { background: var(--surface); }
.section--dark    { background: var(--brown); color: var(--white); }
.section--darker  { background: var(--gradient-dark); color: var(--white); }


/* ═══ TYPOGRAPHY ═══ */
h1, h2, h3, h4, h5 {
    font-family: var(--ff-head);
    color: var(--txt);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
}
h1 { font-size: clamp(2.6rem, 5.5vw, 4.2rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { color: var(--txt-mid); margin-bottom: var(--s2); line-height: 1.75; }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--darker h1, .section--darker h2, .section--darker h3 { color: var(--white); }
.section--dark p, .section--darker p { color: var(--txt-on-dark); }

em { font-style: normal; color: var(--gold); }

/* Eyebrow */
.tag {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.20em; color: var(--gold-dark); margin-bottom: var(--s3);
}
.tag::before {
    content: ''; width: 36px; height: 3px;
    background: var(--gradient-gold); border-radius: 2px;
}
.section--dark .tag, .section--darker .tag { color: var(--gold-light); }
.section--dark .tag::before, .section--darker .tag::before { background: var(--gold-light); }


/* ═══ BUTTONS ═══ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 15px 34px; border-radius: var(--r-full); font-family: var(--ff-body);
    font-weight: 700; font-size: 0.9rem; border: none; cursor: pointer;
    position: relative; overflow: hidden; transition: all var(--t-mid) var(--ease);
}
.btn::before {
    content: ''; position: absolute; top: 0; left: -120%; width: 120%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-25deg); transition: left 0.6s var(--ease);
}
.btn:hover::before { left: 120%; }

.btn--gold {
    background: var(--gradient-gold); color: var(--white);
    box-shadow: var(--sh-gold);
}
.btn--gold:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(212,168,67,0.35); }

.btn--dark {
    background: var(--brown); color: var(--white);
}
.btn--dark:hover { background: var(--dark); transform: translateY(-3px); }

.btn--outline {
    background: transparent; border: 2px solid var(--gold); color: var(--gold);
}
.btn--outline:hover { background: var(--gold); color: var(--white); }

.btn--white {
    background: var(--white); color: var(--brown);
}
.btn--white:hover { background: var(--cream); transform: translateY(-3px); box-shadow: var(--sh-md); }


/* ═══ REVEAL ANIMATIONS ═══ */
.reveal       { opacity: 0; transform: translateY(48px);    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-left  { opacity: 0; transform: translateX(-48px);   transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-right { opacity: 0; transform: translateX(48px);    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal-scale { opacity: 0; transform: scale(0.90);         transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }

.reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible {
    opacity: 1; transform: none;
}

[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1; transform: none; transition: none; }
}

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes scroll-dot { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(10px); } }


/* ═══ GRIDS ═══ */
.g-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); align-items: center; }
.g-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.g-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }

@media (max-width: 992px) {
    .g-3 { grid-template-columns: 1fr 1fr; }
    .g-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .g-2, .g-3, .g-4 { grid-template-columns: 1fr; }
    .g-2 { gap: var(--s5); }
}