/* ═══════════════════════════════════════════════════════════════════════
   SNDD Web — Design System v3.0
   Mobile-first · Plus Jakarta Sans · #123751 · #D6B36A
   ═══════════════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────────── */
:root {
  --navy:        #123751;
  --navy-dark:   #0b2438;
  --navy-mid:    #0f2e45;
  --navy-light:  #1a4d6e;
  --navy-card:   #163348;
  --gold:        #D6B36A;
  --gold-light:  #e8cb90;
  --gold-dark:   #b8923f;
  --gold-dim:    rgba(214,179,106,.25);
  --gold-bg:     rgba(214,179,106,.08);
  --off:         #F5F4F1;
  --off-2:       #ECEAE6;
  --white:       #FFFFFF;
  --gray-100:    #F0EEE9;
  --gray-200:    #E2DDD6;
  --gray-400:    #9A9690;
  --gray-600:    #635E55;
  --text:        #1C1A18;
  --green:       #27AE60;
  --shadow-s:    0 2px 8px rgba(18,55,81,.08);
  --shadow-m:    0 8px 32px rgba(18,55,81,.13);
  --r:           10px;
  --r-sm:        6px;
  --r-lg:        20px;
  --font-body:   'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:   'DM Mono', monospace;
  --fs-base:     15px;
  /* Layout helpers */
  --px:          clamp(18px, 4vw, 48px);
  --py:          clamp(52px, 8vw, 88px);
  --py-sm:       clamp(40px, 6vw, 64px);
  --gap-col:     clamp(32px, 5vw, 72px);
}

/* ── RESET ───────────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  background: var(--off);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display:block; max-width:100%; }
a { text-decoration:none; color:inherit; }
button { font-family:inherit; cursor:pointer; border:none; outline:none; }
input, select, textarea { font-family:inherit; }
::-webkit-scrollbar { width:3px; }
::-webkit-scrollbar-thumb { background:var(--gold-dim); border-radius:2px; }

/* ── REVEAL ─────────────────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }
.d1{transition-delay:.08s} .d2{transition-delay:.16s} .d3{transition-delay:.24s} .d4{transition-delay:.32s}

/* ── NAV ─────────────────────────────────────────────────────────────── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:68px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--px);
  background:rgba(11,36,56,.96);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:height .3s, background .3s;
}
.nav.scrolled { height:58px; background:rgba(11,36,56,.99); }
.nav-brand { display:flex; align-items:center; flex-shrink:0; }
.nav-logo { height:36px; width:auto; }
.nav-logo-text { font-size:13px; font-weight:700; letter-spacing:3px; color:var(--white); text-transform:uppercase; display:none; align-items:center; }
.nav-links { display:flex; align-items:center; gap:2px; }
.nav-link { font-size:12px; font-weight:500; letter-spacing:.8px; text-transform:uppercase; color:rgba(255,255,255,.5); padding:8px 14px; border-radius:var(--r-sm); background:none; border:none; display:flex; align-items:center; gap:5px; transition:color .2s; white-space:nowrap; }
.nav-link:hover, .nav-link.active { color:var(--gold); }
.nav-dropdown { position:relative; }
.nav-dropdown-trigger { cursor:pointer; }
.nav-dropdown-menu { position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px); background:var(--navy-dark); border:1px solid rgba(255,255,255,.08); border-radius:var(--r); padding:8px; min-width:240px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; box-shadow:0 16px 48px rgba(0,0,0,.4); }
.nav-dropdown:hover .nav-dropdown-menu { opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.nav-dd-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:var(--r-sm); color:rgba(255,255,255,.65); transition:background .15s, color .15s; }
.nav-dd-item:hover { background:rgba(255,255,255,.06); color:var(--white); }
.nav-dd-icon { width:32px; height:32px; flex-shrink:0; border:1px solid rgba(214,179,106,.2); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; }
.nav-dd-icon svg { width:15px; height:15px; stroke:var(--gold); }
.nav-dd-title { font-size:13px; font-weight:600; color:var(--white); margin-bottom:1px; }
.nav-dd-sub { font-size:11px; color:rgba(255,255,255,.38); }
.nav-right { display:flex; align-items:center; gap:12px; }
.nav-burger { display:none; flex-direction:column; gap:5px; background:none; padding:4px; cursor:pointer; }
.nav-burger span { width:20px; height:1.5px; background:rgba(255,255,255,.7); display:block; transition:all .3s; }
.nav-burger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity:0; }
.nav-burger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }
.nav-mobile { display:none; position:fixed; top:68px; left:0; right:0; z-index:299; background:rgba(11,36,56,.98); backdrop-filter:blur(20px); padding:16px 24px 32px; flex-direction:column; gap:2px; border-bottom:1px solid rgba(255,255,255,.07); max-height:calc(100vh - 68px); overflow-y:auto; }
.nav-mobile.open { display:flex; }
.nml { font-size:13px; font-weight:500; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.6); padding:13px 0; border-bottom:1px solid rgba(255,255,255,.05); transition:color .2s; display:block; }
.nml:hover { color:var(--gold); }
.nml-sub { font-size:12px; letter-spacing:.3px; color:rgba(255,255,255,.4); padding:9px 0 9px 14px; display:block; border-bottom:1px solid rgba(255,255,255,.03); }
.nml-group-title { font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gold); padding:14px 0 4px; opacity:.6; }
.nml-cta { margin-top:14px; background:var(--gold); color:var(--navy-dark); font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; padding:15px; border-radius:var(--r); text-align:center; display:block; }

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn-gold { font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--navy-dark); background:var(--gold); padding:10px 22px; border-radius:var(--r-sm); display:inline-flex; align-items:center; gap:7px; transition:background .2s, transform .2s; white-space:nowrap; border:none; cursor:pointer; }
.btn-gold:hover { background:var(--gold-light); transform:translateY(-1px); }
.btn-gold-lg { font-size:13px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--navy-dark); background:var(--gold); padding:14px 32px; border-radius:var(--r); display:inline-flex; align-items:center; gap:8px; transition:background .2s, transform .2s, box-shadow .2s; white-space:nowrap; border:none; cursor:pointer; }
.btn-gold-lg:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 10px 28px rgba(214,179,106,.35); }
.btn-outline-lg { font-size:13px; font-weight:500; color:rgba(255,255,255,.7); background:transparent; border:1.5px solid rgba(255,255,255,.18); padding:13px 28px; border-radius:var(--r); display:inline-flex; align-items:center; gap:8px; transition:border-color .2s, color .2s; cursor:pointer; }
.btn-outline-lg:hover { border-color:var(--gold-dim); color:var(--gold); }
.btn-navy { font-size:13px; font-weight:600; color:var(--white); background:var(--navy); padding:13px 28px; border-radius:var(--r); display:inline-flex; align-items:center; gap:8px; transition:background .2s, transform .2s; border:none; cursor:pointer; }
.btn-navy:hover { background:var(--navy-light); transform:translateY(-1px); }
.btn-ghost { font-size:13px; font-weight:400; color:var(--gray-600); background:transparent; border:1.5px solid var(--gray-200); padding:12px 24px; border-radius:var(--r); display:inline-flex; align-items:center; gap:8px; transition:border-color .2s, color .2s; cursor:pointer; }
.btn-ghost:hover { border-color:var(--navy); color:var(--navy); }
.btn-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }

/* ── SECTION & LAYOUT ────────────────────────────────────────────────── */
.section { padding:var(--py) var(--px); }
.section-sm { padding:var(--py-sm) var(--px); }
.section-inner { max-width:1200px; margin:0 auto; width:100%; }
/* Two column — mobile first */
.two-col { display:grid; grid-template-columns:1fr; gap:var(--gap-col); align-items:center; }

/* ── TYPOGRAPHY ──────────────────────────────────────────────────────── */
.eyebrow { font-size:10px; font-weight:600; letter-spacing:3.5px; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.eyebrow::before { content:''; width:24px; height:1px; background:var(--gold); opacity:.7; flex-shrink:0; }
.eyebrow-center { justify-content:center; }
.eyebrow-center::before { display:none; }
.eyebrow-light { color:rgba(214,179,106,.65); }
.eyebrow-light::before { opacity:.4; }
.h1 { font-size:clamp(24px,4vw,46px); font-weight:600; line-height:1.12; letter-spacing:-.5px; }
.h2 { font-size:clamp(20px,3vw,36px); font-weight:600; line-height:1.16; letter-spacing:-.3px; }
.h3 { font-size:clamp(16px,2vw,22px); font-weight:600; line-height:1.25; }
.gold-text { color:var(--gold); }
.light-text { color:var(--white); }
.dim-text { color:rgba(255,255,255,.6); }
.muted { color:var(--gray-400); }
.lead { font-size:clamp(14px,1.1vw,16px); font-weight:300; line-height:1.8; color:var(--gray-600); }
.lead-light { color:rgba(255,255,255,.6); }

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; min-height:100svh; display:flex; align-items:flex-end; padding-top:68px; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center center; background-color:var(--navy-dark); animation:kenBurns 9s ease-out forwards; }
@keyframes kenBurns { from{transform:scale(1.05)} to{transform:scale(1)} }
.hero-overlay { position:absolute; inset:0; z-index:1; background: linear-gradient(105deg, rgba(11,36,56,.92) 0%, rgba(11,36,56,.72) 38%, rgba(11,36,56,.3) 65%, transparent 100%), linear-gradient(to top, rgba(11,36,56,.72) 0%, transparent 40%); }
.hero-logo-wrap { position:absolute; top:11%; left:0; right:0; z-index:5; display:flex; justify-content:center; pointer-events:none; opacity:0; animation:fadeUp .9s .1s forwards; }
.hero-logo-wrap img { height:clamp(100px,18vw,260px); width:auto; filter:brightness(0) invert(1); opacity:.85; }
.hero-inner { position:relative; z-index:6; max-width:1280px; margin:0 auto; width:100%; padding:0 var(--px) clamp(60px,8vw,90px); }
.hero-text { max-width:600px; }
.hero-eyebrow { font-size:10px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:12px; margin-bottom:18px; opacity:0; animation:fadeUp .5s .25s forwards; }
.hero-eyebrow::before { content:''; width:24px; height:1px; background:var(--gold); }
.hero-h1 { font-size:clamp(22px,3.5vw,46px); font-weight:600; line-height:1.1; letter-spacing:-.5px; color:var(--white); margin-bottom:16px; opacity:0; animation:fadeUp .65s .38s forwards; }
.hero-h1 .gold-text { color:var(--gold); }
.hero-desc { font-size:clamp(13px,1vw,15px); font-weight:300; line-height:1.8; color:rgba(255,255,255,.65); max-width:480px; margin-bottom:28px; opacity:0; animation:fadeUp .6s .5s forwards; }
.hero-actions { opacity:0; animation:fadeUp .5s .62s forwards; }
.hero-note { font-size:11px; font-weight:300; color:rgba(255,255,255,.28); letter-spacing:.3px; margin-top:14px; opacity:0; animation:fadeUp .5s .72s forwards; }
.hero-gold-line { position:absolute; bottom:0; left:0; right:0; height:1px; z-index:7; background:linear-gradient(90deg, var(--gold) 0%, rgba(214,179,106,.2) 40%, transparent 70%); opacity:.3; }

/* ── STAT BAR PREMIUM ────────────────────────────────────────────────── */
.stat-bar { background:var(--navy-dark); position:relative; overflow:hidden; }
.stat-bar::before { content:'SNDD'; position:absolute; right:-10px; top:50%; transform:translateY(-50%); font-family:var(--font-mono); font-size:clamp(80px,15vw,180px); font-weight:500; letter-spacing:16px; color:rgba(255,255,255,.018); pointer-events:none; white-space:nowrap; }
.stat-bar-top { padding:clamp(24px,4vw,48px) var(--px) clamp(20px,3vw,36px); display:flex; align-items:center; gap:12px; border-bottom:1px solid rgba(255,255,255,.04); opacity:0; transform:translateY(8px); transition:opacity .5s, transform .5s; }
.stat-bar.fired .stat-bar-top { opacity:1; transform:none; }
.stat-bar-top-line { width:28px; height:1px; background:var(--gold); opacity:.6; flex-shrink:0; }
.stat-bar-top-label { font-size:10px; font-weight:500; letter-spacing:3px; text-transform:uppercase; color:rgba(214,179,106,.5); }
.stat-bar-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.stat-item { padding:clamp(24px,4vw,44px) clamp(18px,3vw,36px) clamp(20px,3vw,36px); position:relative; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1), background .3s; cursor:default; }
.stat-item::after { content:''; position:absolute; top:0; bottom:0; right:0; width:1px; background:linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.07) 20%, rgba(255,255,255,.07) 80%, transparent 100%); }
.stat-item:last-child::after { display:none; }
.stat-item:hover { background:rgba(255,255,255,.025); }
.stat-item::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s cubic-bezier(.16,1,.3,1); }
.stat-item:hover::before { transform:scaleX(1); }
.stat-item.visible { opacity:1; transform:none; }
.stat-item:nth-child(1){transition-delay:0s} .stat-item:nth-child(2){transition-delay:.1s} .stat-item:nth-child(3){transition-delay:.2s} .stat-item:nth-child(4){transition-delay:.3s}
.stat-index { font-family:var(--font-mono); font-size:10px; font-weight:400; color:rgba(214,179,106,.3); letter-spacing:1px; margin-bottom:clamp(12px,2vw,20px); display:flex; align-items:center; gap:8px; }
.stat-index::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.06); max-width:36px; }
.stat-num { font-family:var(--font-mono); font-size:clamp(28px,3.5vw,50px); font-weight:500; line-height:1; letter-spacing:-1px; color:#fff; display:flex; align-items:baseline; gap:0; flex-wrap:wrap; }
.stat-num-unit { font-size:clamp(13px,1.5vw,20px); font-weight:400; letter-spacing:0; color:var(--gold); margin-left:3px; align-self:flex-end; margin-bottom:3px; }
.stat-num-sep { font-size:clamp(16px,2vw,28px); font-weight:300; color:rgba(214,179,106,.3); margin:0 3px; align-self:center; }
.stat-num-dot { width:4px; height:4px; border-radius:50%; background:var(--gold); opacity:0; transition:opacity .4s ease 1.2s; flex-shrink:0; align-self:center; margin-bottom:3px; margin-left:6px; }
.stat-item.visible .stat-num-dot { opacity:.7; }
.stat-label { font-size:clamp(11px,1vw,12px); font-weight:400; color:rgba(255,255,255,.35); line-height:1.5; margin-top:clamp(6px,1vw,12px); letter-spacing:.3px; }
.stat-accent { margin-top:clamp(14px,2vw,22px); height:1px; background:rgba(255,255,255,.05); position:relative; overflow:hidden; }
.stat-accent-fill { position:absolute; top:0; left:0; bottom:0; width:0; background:linear-gradient(90deg, var(--gold), rgba(214,179,106,.15)); transition:width 1.6s cubic-bezier(.16,1,.3,1); }
.stat-item.visible .stat-accent-fill { width:var(--fill); }

/* ── CARDS ───────────────────────────────────────────────────────────── */
.card { background:var(--white); border:1.5px solid var(--gray-200); border-radius:var(--r); padding:clamp(20px,2.5vw,28px); position:relative; overflow:hidden; transition:border-color .25s, transform .25s; }
.card:hover { border-color:var(--gold-dim); transform:translateY(-3px); }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, var(--gold), transparent 60%); opacity:0; transition:opacity .3s; }
.card:hover::before { opacity:1; }
.card-icon { width:40px; height:40px; border-radius:var(--r-sm); background:var(--navy); margin-bottom:16px; display:flex; align-items:center; justify-content:center; }
.card-icon svg { width:18px; height:18px; stroke:var(--white); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.card-title { font-size:15px; font-weight:600; color:var(--navy); margin-bottom:6px; }
.card-desc { font-size:13px; font-weight:300; color:var(--gray-600); line-height:1.7; }
.card-dark { background:var(--navy-card); border-color:rgba(255,255,255,.07); }
.card-dark:hover { border-color:var(--gold-dim); }
.card-dark::before { display:none; }
.card-dark .card-title { color:var(--white); }
.card-dark .card-desc { color:rgba(255,255,255,.5); }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* ── PERSONA CARDS ───────────────────────────────────────────────────── */
.persona-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.persona-card { position:relative; overflow:hidden; aspect-ratio:3/4; cursor:pointer; background:var(--navy); display:block; }
.persona-card-img { width:100%; height:100%; object-fit:cover; filter:brightness(.55); transition:transform .5s, filter .5s; }
.persona-card:hover .persona-card-img { transform:scale(1.05); filter:brightness(.38); }
.persona-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(11,36,56,.92) 0%, rgba(11,36,56,.3) 50%, transparent 100%); }
.persona-content { position:absolute; bottom:0; left:0; right:0; padding:clamp(16px,2.5vw,24px) clamp(14px,2vw,20px); }
.persona-eyebrow { font-size:9px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:6px; }
.persona-title { font-size:clamp(15px,2vw,18px); font-weight:600; color:var(--white); margin-bottom:6px; line-height:1.2; }
.persona-desc { font-size:12px; font-weight:300; color:rgba(255,255,255,.55); line-height:1.6; margin-bottom:12px; max-height:0; overflow:hidden; transition:max-height .4s; }
.persona-card:hover .persona-desc { max-height:80px; }
.persona-link { font-size:12px; font-weight:500; color:var(--gold); display:inline-flex; align-items:center; gap:5px; opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s; }
.persona-link svg { width:12px; height:12px; }
.persona-card:hover .persona-link { opacity:1; transform:none; }

/* ── DIFS LIST ───────────────────────────────────────────────────────── */
.dif-list { display:flex; flex-direction:column; }
.dif-item { display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid var(--gray-200); }
.dif-item:last-child { border-bottom:none; }
.dif-icon { width:32px; height:32px; flex-shrink:0; border:1px solid var(--gold-dim); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; margin-top:1px; }
.dif-icon svg { width:14px; height:14px; stroke:var(--gold); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.dif-text { font-size:14px; font-weight:300; color:var(--gray-600); line-height:1.65; }
.dif-text strong { color:var(--navy); font-weight:500; }

/* ── STEPS ───────────────────────────────────────────────────────────── */
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:2px; border-radius:var(--r); overflow:hidden; }
.step-card { background:var(--navy-card); padding:clamp(20px,3vw,28px) clamp(16px,2.5vw,22px); position:relative; overflow:hidden; transition:background .3s; }
.step-card:hover { background:var(--navy-light); }
.step-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .4s; }
.step-card:hover::before { transform:scaleX(1); }
.step-num { font-family:var(--font-mono); font-size:36px; font-weight:500; color:rgba(214,179,106,.1); line-height:.9; margin-bottom:10px; }
.step-title { font-size:15px; font-weight:600; color:var(--white); margin-bottom:8px; }
.step-desc { font-size:13px; font-weight:300; color:rgba(255,255,255,.5); line-height:1.75; }

/* ── IMAGE FRAME ─────────────────────────────────────────────────────── */
.img-frame { position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3; background:var(--navy); }
.img-frame img { width:100%; height:100%; object-fit:cover; }
.img-frame::before { content:''; position:absolute; top:12px; left:12px; width:28px; height:28px; border-top:2px solid var(--gold); border-left:2px solid var(--gold); z-index:2; opacity:.55; }
.img-frame::after  { content:''; position:absolute; bottom:12px; right:12px; width:28px; height:28px; border-bottom:2px solid var(--gold); border-right:2px solid var(--gold); z-index:2; opacity:.55; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq-list { display:flex; flex-direction:column; gap:2px; max-width:760px; width:100%; }
.faq-item { background:var(--white); border:1.5px solid var(--gray-200); border-radius:var(--r); overflow:hidden; }
.faq-q { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; cursor:pointer; transition:background .2s; }
.faq-q:hover { background:var(--off); }
.faq-q-text { font-size:14px; font-weight:500; color:var(--navy); padding-right:12px; line-height:1.4; }
.faq-icon { width:24px; height:24px; flex-shrink:0; border:1.5px solid var(--gray-200); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--gray-400); transition:transform .3s, border-color .2s, background .2s, color .2s; }
.faq-item.open .faq-icon { transform:rotate(45deg); border-color:var(--gold); background:rgba(214,179,106,.1); color:var(--gold); }
.faq-a { display:none; padding:14px 20px 18px; font-size:14px; font-weight:300; color:var(--gray-600); line-height:1.8; border-top:1px solid var(--gray-200); }
.faq-item.open .faq-a { display:block; }

/* ── FORM ────────────────────────────────────────────────────────────── */
.form-group { margin-bottom:18px; }
.form-label { display:block; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--navy); margin-bottom:8px; }
.form-input { width:100%; padding:13px 16px; border:1.5px solid var(--gray-200); border-radius:var(--r); font-family:var(--font-body); font-size:14px; color:var(--text); background:var(--off); outline:none; transition:border-color .2s, box-shadow .2s, background .2s; -webkit-appearance:none; }
.form-input:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(18,55,81,.08); background:var(--white); }
.form-input::placeholder { color:var(--gray-400); }
select.form-input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%239A9690' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:44px; cursor:pointer; }
textarea.form-input { resize:vertical; min-height:110px; }
.form-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-submit { width:100%; padding:15px; background:var(--gold); color:var(--navy-dark); font-family:var(--font-body); font-size:13px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; border:none; border-radius:var(--r); cursor:pointer; transition:background .2s, transform .2s; margin-top:6px; }
.form-submit:hover { background:var(--gold-light); transform:translateY(-1px); }

/* ── BLOG CARDS ──────────────────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.blog-card { background:var(--white); border:1.5px solid var(--gray-200); border-radius:var(--r); overflow:hidden; transition:transform .25s, border-color .25s; display:flex; flex-direction:column; }
.blog-card:hover { transform:translateY(-4px); border-color:var(--gold-dim); }
.blog-card-img { aspect-ratio:16/9; overflow:hidden; background:var(--navy); position:relative; }
.blog-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.blog-card:hover .blog-card-img img { transform:scale(1.04); }
.blog-card-cat { position:absolute; top:12px; left:12px; font-size:10px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; background:var(--navy-dark); color:var(--gold); padding:4px 10px; border-radius:20px; border:1px solid rgba(214,179,106,.2); }
.blog-card-body { padding:22px 22px 24px; flex:1; display:flex; flex-direction:column; }
.blog-card-meta { font-size:11px; color:var(--gray-400); letter-spacing:.4px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.blog-card-meta-dot { width:3px; height:3px; border-radius:50%; background:var(--gray-400); }
.blog-card-title { font-size:16px; font-weight:600; color:var(--navy); margin-bottom:10px; line-height:1.35; flex:1; }
.blog-card-desc { font-size:13px; font-weight:300; color:var(--gray-600); line-height:1.65; margin-bottom:18px; }
.blog-card-link { font-size:12px; font-weight:500; color:var(--gold); display:inline-flex; align-items:center; gap:5px; transition:gap .2s; margin-top:auto; }
.blog-card:hover .blog-card-link { gap:8px; }
.blog-featured { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; border-radius:var(--r); overflow:hidden; border:1.5px solid var(--gray-200); background:var(--white); transition:border-color .25s; }
.blog-featured:hover { border-color:var(--gold-dim); }
.blog-featured-img { background:var(--navy); min-height:280px; position:relative; overflow:hidden; }
.blog-featured-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.blog-featured:hover .blog-featured-img img { transform:scale(1.03); }
.blog-featured-body { padding:clamp(24px,4vw,44px); display:flex; flex-direction:column; justify-content:center; }

/* ── BADGE ───────────────────────────────────────────────────────────── */
.badge { display:inline-block; font-size:10px; font-weight:600; letter-spacing:.8px; text-transform:uppercase; padding:4px 12px; border-radius:20px; }
.badge-ok { background:rgba(39,174,96,.1); color:#1a7a44; border:1px solid rgba(39,174,96,.2); }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.footer { background:var(--navy-dark); border-top:1px solid rgba(255,255,255,.06); }
.footer-top { max-width:1200px; margin:0 auto; padding:clamp(36px,6vw,56px) var(--px) clamp(28px,4vw,40px); display:grid; grid-template-columns:240px 1fr; gap:clamp(32px,5vw,64px); }
.footer-logo { height:40px; width:auto; margin-bottom:16px; }
.footer-desc { font-size:13px; font-weight:300; color:rgba(255,255,255,.35); line-height:1.75; margin-bottom:16px; }
.footer-badge { display:inline-block; font-size:10px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:rgba(214,179,106,.35); border:1px solid rgba(214,179,106,.15); padding:4px 12px; border-radius:20px; }
.footer-nav { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); }
.footer-nav-title { font-size:10px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:14px; opacity:.7; }
.footer-link { display:block; font-size:13px; font-weight:300; color:rgba(255,255,255,.38); margin-bottom:8px; transition:color .2s; }
.footer-link:hover { color:rgba(255,255,255,.75); }
.footer-info { font-size:12px; font-weight:300; color:rgba(255,255,255,.2); line-height:1.7; margin-top:16px; }
.footer-bottom { max-width:1200px; margin:0 auto; padding:16px var(--px); display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.05); flex-wrap:wrap; gap:8px; }
.footer-copy { font-size:12px; color:rgba(255,255,255,.18); }
.footer-link-sm { font-size:12px; color:rgba(255,255,255,.18); transition:color .2s; }
.footer-link-sm:hover { color:rgba(255,255,255,.45); }

/* ── KEYFRAMES ───────────────────────────────────────────────────────── */
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* ── CONTACT LAYOUT ──────────────────────────────────────────────────── */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(32px,5vw,56px); align-items:start; }
.contact-form-wrap { background:var(--white); border-radius:var(--r-lg); padding:clamp(24px,4vw,36px); border:1px solid var(--gray-200); }

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — mobile-first
   ════════════════════════════════════════════════════════════════════════ */

/* ── TABLET LANDSCAPE (≤1100px) ──────────────────────────────────────── */
@media(max-width:1100px) {
  .persona-grid { grid-template-columns:repeat(2,1fr); }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .footer-top { grid-template-columns:1fr; }
  .two-col { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .blog-featured { grid-template-columns:1fr; }
  .blog-featured-img { min-height:220px; }
}

/* ── TABLET PORTRAIT (≤960px) ────────────────────────────────────────── */
@media(max-width:960px) {
  .nav-links { display:none; }
  .nav-burger { display:flex; }
  .stat-bar-grid { grid-template-columns:repeat(2,1fr); }
  .stat-item:nth-child(2)::after { display:none; }
  .stat-item:nth-child(3) { border-top:1px solid rgba(255,255,255,.04); }
  .stat-item:nth-child(4) { border-top:1px solid rgba(255,255,255,.04); }
  .steps-grid { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .footer-nav { grid-template-columns:repeat(2,1fr); }
  .blog-grid { grid-template-columns:1fr 1fr; }
}

/* ── MOBILE (≤640px) ─────────────────────────────────────────────────── */
@media(max-width:640px) {
  .btn-gold-lg { padding:13px 22px; font-size:12px; }
  .btn-outline-lg { padding:12px 20px; font-size:12px; }
  .persona-grid { grid-template-columns:1fr; }
  .persona-card { aspect-ratio:4/3; }
  .grid-2, .grid-3, .form-grid-2 { grid-template-columns:1fr; }
  .steps-grid { grid-template-columns:1fr; }
  .stat-bar-grid { grid-template-columns:1fr 1fr; }
  .stat-item:nth-child(2)::after { display:none; }
  .stat-item:nth-child(3)::after { display:none; }
  .stat-item { padding:20px 18px 18px; }
  .stat-index { margin-bottom:10px; }
  .footer-nav { grid-template-columns:1fr; gap:24px; }
  .blog-grid { grid-template-columns:1fr; }
  .blog-featured { grid-template-columns:1fr; }
  .hero-logo-wrap { top:9%; }
  .btn-row { gap:10px; }
  .btn-row .btn-gold-lg, .btn-row .btn-outline-lg { width:100%; justify-content:center; }
}

/* ── SMALL MOBILE (≤400px) ───────────────────────────────────────────── */
@media(max-width:400px) {
  .btn-gold { display:none; }
  .stat-bar-grid { grid-template-columns:1fr; }
  .stat-item::after { display:none; }
  .stat-item:nth-child(odd) { border-right:none; }
  .stat-num { font-size:clamp(24px,8vw,36px); }
}