/* ═══════════════════════════════════════════════
   VIANEX v3 — Clean Corporate Design
   No gradients. Flat, professional, structured.
   Fonts: Plus Jakarta Sans + Inter
   Primary:  #1B3A6B  (Navy)
   Accent:   #C9930A  (Gold)
   Text:     #0F172A  (Near-black)
   Muted:    #64748B  (Slate)
   BG-alt:   #F8FAFC  (Off-white)
═══════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:   #1B3A6B;
  --navy-d: #0e2247;
  --navy-l: #254f94;
  --gold:   #C9930A;
  --gold-l: #e5a80c;
  --white:  #FFFFFF;
  --bg:     #F8FAFC;
  --bg2:    #EEF2F7;
  --text:   #0F172A;
  --muted:  #64748B;
  --border: #E2E8F0;
  --radius: 8px;
  --radius-l: 12px;
  --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10), 0 12px 32px rgba(0,0,0,.07);
  --font:   'Inter', sans-serif;
  --font-h: 'Plus Jakarta Sans', sans-serif;
  --trans:  .22s ease;
}
html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--text);background:var(--white);overflow-x:hidden;line-height:1.65;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
ul{list-style:none}
img{display:block;max-width:100%}
.container{max-width:1180px;margin:0 auto;padding:0 32px}

/* ── Sections ── */
.sec-white{background:var(--white);padding:96px 0}
.sec-gray {background:var(--bg);padding:96px 0}
.sec-navy {background:var(--navy);padding:96px 0}

/* ── Typography helpers ── */
.sec-label{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.sec-label.light{color:#e5a80c}
.txt-gold{color:var(--gold)}
.txt-gold-light{color:#f0c040}
.centered-hdr{text-align:center;max-width:620px;margin:0 auto 56px}
.centered-hdr h2{font-family:var(--font-h);font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.22;color:var(--text);margin-bottom:14px}
.centered-hdr h2.light{color:var(--white)}
.centered-hdr p{font-size:16px;color:var(--muted);line-height:1.65}
.sub-light{font-size:16px;color:rgba(255,255,255,.6);margin-top:8px}
.split-header{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.sh-left h2{font-family:var(--font-h);font-size:clamp(24px,2.8vw,36px);font-weight:800;line-height:1.25;color:var(--text)}
.sh-right{max-width:440px}
.sh-right p{font-size:15px;color:var(--muted);margin-bottom:16px}

/* ── Buttons ── */
.btn-navy{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:var(--white);padding:11px 24px;border-radius:var(--radius);font-family:var(--font);font-size:14px;font-weight:600;border:2px solid var(--navy);cursor:pointer;transition:all var(--trans)}
.btn-navy:hover{background:var(--navy-d);border-color:var(--navy-d)}
.btn-navy.btn-lg{padding:14px 30px;font-size:15px}
.btn-outline{display:inline-flex;align-items:center;background:transparent;color:var(--text);padding:11px 24px;border-radius:var(--radius);font-size:14px;font-weight:600;border:2px solid var(--border);cursor:pointer;transition:all var(--trans)}
.btn-outline:hover{border-color:var(--navy);color:var(--navy)}
.btn-outline.btn-lg{padding:14px 30px;font-size:15px}
.btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--white);padding:11px 24px;border-radius:var(--radius);font-size:14px;font-weight:700;border:2px solid var(--gold);cursor:pointer;transition:all var(--trans)}
.btn-gold:hover{background:var(--gold-l);border-color:var(--gold-l)}
.btn-gold.btn-lg{padding:14px 30px;font-size:15px}
.btn-outline-light{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--white);padding:11px 24px;border-radius:var(--radius);font-size:14px;font-weight:600;border:2px solid rgba(255,255,255,.4);cursor:pointer;transition:all var(--trans)}
.btn-outline-light:hover{border-color:rgba(255,255,255,.8);background:rgba(255,255,255,.08)}
.btn-outline-light.btn-lg{padding:14px 30px;font-size:15px}
.btn-navy-sm{display:inline-flex;align-items:center;background:var(--navy);color:var(--white);padding:9px 18px;border-radius:var(--radius);font-size:13px;font-weight:600;border:none;cursor:pointer;transition:all var(--trans);margin-top:4px}
.btn-navy-sm:hover{background:var(--navy-d)}
.btn-outline-card{display:block;text-align:center;background:transparent;color:var(--text);padding:12px;border-radius:var(--radius);font-size:14px;font-weight:600;border:2px solid var(--border);transition:all var(--trans);margin-top:auto}
.btn-outline-card:hover{border-color:var(--navy);color:var(--navy)}

/* ═══════ FLOATING BAR ═══════ */
.float-bar{position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:900;display:flex;flex-direction:column}
.fbar-btn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;color:var(--white);transition:width var(--trans)}
.fbar-btn:hover{width:50px}
.fbar-wa{background:#25D366}
.fbar-tg{background:#0088cc}
.fbar-em{background:var(--gold)}

/* ═══════ NAVBAR ═══════ */
#navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:var(--white);border-bottom:1px solid var(--border);transition:box-shadow var(--trans)}
#navbar.scrolled{box-shadow:0 2px 16px rgba(0,0,0,.08)}
.nav-wrap{max-width:1180px;margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;gap:32px}
.nav-logo{font-family:var(--font-h);font-size:22px;font-weight:800;flex-shrink:0;display:flex;align-items:center;gap:0}
.logo-mark{color:var(--navy)}
.logo-name{color:var(--text)}
.nav-links{display:flex;gap:28px;flex:1;list-style:none}
.nav-links li{position:relative}
.nav-links a{font-size:14px;font-weight:500;color:var(--muted);display:flex;align-items:center;gap:4px;padding:4px 0;transition:color var(--trans);position:relative}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;right:0;height:2px;background:var(--navy);transform:scaleX(0);transition:transform var(--trans)}
.nav-links a:hover,.nav-links a.active{color:var(--navy)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}
.caret{font-size:9px}
.dropdown{position:absolute;top:calc(100% + 10px);left:0;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-l);box-shadow:var(--shadow-md);min-width:200px;padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all var(--trans)}
.has-drop:hover .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown li a{display:block;padding:9px 14px;font-size:13.5px;color:var(--text);border-radius:6px;transition:background var(--trans)}
.dropdown li a::after{display:none}
.dropdown li a:hover{background:var(--bg);color:var(--navy)}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0}
.nav-signin{font-size:14px;font-weight:500;color:var(--muted);transition:color var(--trans)}
.nav-signin:hover{color:var(--text)}
.hamburger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;margin-left:auto}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all var(--trans)}
.mobile-nav{display:none;flex-direction:column;padding:16px 32px 20px;border-top:1px solid var(--border);gap:8px;background:var(--white)}
.mobile-nav a{font-size:15px;font-weight:500;color:var(--text);padding:6px 0;border-bottom:1px solid var(--border)}
.mobile-nav.open{display:flex}

/* ═══════ HERO ═══════ */
#hero{min-height:100vh;display:flex;padding-top:64px;background:var(--white)}
.hero-sidebar{width:130px;flex-shrink:0;border-right:1px solid var(--border);padding-top:40px;display:flex;flex-direction:column;background:var(--white)}
.hsl{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:13px 16px;border-left:3px solid transparent;transition:all var(--trans)}
.hsl span{font-size:14px}
.hsl:hover,.hsl.active{color:var(--navy);border-left-color:var(--navy);background:var(--bg)}
.hero-main{flex:1;display:flex;align-items:center;gap:64px;padding:64px 48px}
.hero-text{flex:1;max-width:540px}
.hero-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.5px;color:var(--navy);background:var(--bg2);border:1px solid var(--border);padding:6px 14px;border-radius:4px;margin-bottom:24px}
.hero-text h1{font-family:var(--font-h);font-size:clamp(34px,4vw,56px);font-weight:800;line-height:1.1;color:var(--text);margin-bottom:22px}
.h1-accent{color:var(--navy)}
.hero-p{font-size:17px;color:var(--muted);line-height:1.7;margin-bottom:36px;max-width:480px}
.hero-cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:44px}
.hero-kpis{display:flex;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:18px 24px;gap:0;width:fit-content}
.kpi{display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 20px}
.kpi strong{font-family:var(--font-h);font-size:19px;font-weight:800;color:var(--navy)}
.kpi span{font-size:11px;color:var(--muted);font-weight:500}
.kpi-div{width:1px;height:32px;background:var(--border)}

/* Hero card */
.hero-card-area{flex:1;max-width:440px;position:relative;min-height:460px}
.cert-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-l);padding:28px;box-shadow:var(--shadow-md);position:relative;z-index:2;margin-top:40px;animation:floatUp 5s ease-in-out infinite}
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.cc-header{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.cc-logo{width:38px;height:38px;background:var(--navy);color:var(--white);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:18px;font-weight:800;flex-shrink:0}
.cc-brand{font-size:14px;font-weight:700;color:var(--text)}
.cc-sub{font-size:11px;color:var(--muted)}
.cc-chip{margin-left:auto;font-size:11px;font-weight:700;color:var(--navy);background:var(--bg2);border:1px solid var(--border);padding:4px 10px;border-radius:4px}
.cc-skill{font-family:var(--font-h);font-size:26px;font-weight:800;color:var(--text);margin-bottom:18px}
.cc-row{display:flex;gap:20px;margin-bottom:16px}
.cc-kv{display:flex;flex-direction:column;gap:2px}
.cc-kv span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.cc-kv strong{font-size:14px;font-weight:700;color:var(--text)}
.cc-bar-bg{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:12px}
.cc-bar{height:100%;background:var(--navy);border-radius:2px}
.cc-footer{font-size:11px;color:var(--muted);text-align:center}
.hero-badge{position:absolute;background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:11px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);z-index:3;animation:floatUp 5s ease-in-out infinite}
.hero-badge span{font-size:20px}
.hero-badge div{display:flex;flex-direction:column}
.hero-badge strong{font-size:13px;font-weight:700;color:var(--text)}
.hero-badge small{font-size:11px;color:var(--muted)}
.hb1{top:0;right:0;animation-delay:1s}
.hb2{bottom:120px;left:-24px;animation-delay:2s}
.hb3{bottom:32px;right:0;animation-delay:3s}

/* ═══════ TICKER ═══════ */
.ticker-bar{overflow:hidden;background:var(--navy);padding:14px 0;border-top:1px solid var(--navy-d)}
.ticker-inner{display:flex;gap:40px;animation:tickerMove 32s linear infinite;white-space:nowrap;width:max-content}
.ticker-inner span{font-size:13px;font-weight:500;color:rgba(255,255,255,.6);flex-shrink:0}
.ticker-inner span:hover{color:rgba(255,255,255,.9)}
@keyframes tickerMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-bar:hover .ticker-inner{animation-play-state:paused}

/* ═══════ ABOUT ═══════ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.about-img-block{position:relative;margin-bottom:32px}
.aib-pattern{height:280px;border-radius:var(--radius-l);background:var(--bg2);border:2px solid var(--border);position:relative;overflow:hidden}
.aib-pattern::before{content:'';position:absolute;inset:0;background-image:radial-gradient(var(--border) 1.5px, transparent 1.5px);background-size:24px 24px}
.aib-stat-card{position:absolute;bottom:-18px;left:20px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow)}
.asc-icon{font-size:24px}
.aib-stat-card strong{display:block;font-size:17px;font-weight:800;color:var(--navy)}
.aib-stat-card small{font-size:11.5px;color:var(--muted)}
.aib-badge{position:absolute;top:16px;right:-16px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius);padding:12px 14px;text-align:center;box-shadow:var(--shadow);width:120px}
.aib-badge svg{display:block;margin:0 auto 6px}
.aib-pct{display:block;font-family:var(--font-h);font-size:17px;font-weight:800;color:var(--text);margin-bottom:4px}
.aib-badge p{font-size:10.5px;color:var(--muted);line-height:1.4}
.about-counters{display:flex;justify-content:space-around;padding:18px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius)}
.actr strong{display:block;font-family:var(--font-h);font-size:26px;font-weight:800;color:var(--navy)}
.actr span{font-size:11.5px;color:var(--muted);font-weight:500}
.about-right h2{font-family:var(--font-h);font-size:clamp(24px,2.8vw,36px);font-weight:800;line-height:1.25;color:var(--text);margin-bottom:16px}
.about-right .lead{font-size:16px;font-weight:500;color:var(--text);line-height:1.7;margin-bottom:14px}
.about-right>p{font-size:15px;color:var(--muted);line-height:1.7;margin-bottom:28px}
.about-pts{display:flex;flex-direction:column;gap:10px;margin-bottom:32px}
.apt{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text)}
.apt-dot{width:7px;height:7px;background:var(--gold);border-radius:1px;flex-shrink:0;margin-top:6px}

/* ═══════ STATS BAND ═══════ */
.stats-band{background:var(--navy);padding:56px 0}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);align-items:center}
.sbi{text-align:center;padding:0 16px}
.sbi-icon{font-size:28px;margin-bottom:8px}
.sbi strong{display:inline-block;font-family:var(--font-h);font-size:clamp(28px,3.5vw,44px);font-weight:900;color:var(--white);line-height:1}
.sbi span{font-family:var(--font-h);font-size:36px;font-weight:900;color:var(--white)}
.sbi p{font-size:13px;color:rgba(255,255,255,.5);margin-top:4px;font-weight:500}
.sbd{width:1px;height:72px;background:rgba(255,255,255,.12)}

/* ═══════ SERVICES CAROUSEL ═══════ */
.carr-controls{display:flex;gap:10px}
.carr-btn{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--border);background:var(--white);cursor:pointer;font-size:14px;transition:all var(--trans);display:flex;align-items:center;justify-content:center;color:var(--text)}
.carr-btn:hover{border-color:var(--navy);color:var(--navy)}
.svc-overflow{overflow:hidden}
.svc-track{display:flex;gap:20px;transition:transform .4s ease}
.svc-card{min-width:256px;background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-l);padding:28px;flex-shrink:0;display:flex;flex-direction:column;transition:all var(--trans)}
.svc-card:hover{border-color:var(--navy);box-shadow:var(--shadow-md);transform:translateY(-3px)}
.svc-featured{background:var(--navy);border-color:var(--navy);color:var(--white)}
.svc-featured h3,.svc-featured p{color:rgba(255,255,255,.9)}
.svc-ico{font-size:28px;width:52px;height:52px;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.svc-featured .svc-ico{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.svc-card h3{font-family:var(--font-h);font-size:17px;font-weight:700;color:var(--text);margin-bottom:9px}
.svc-card p{font-size:14px;color:var(--muted);line-height:1.6;flex:1;margin-bottom:16px}
.card-link{font-size:13px;font-weight:600;color:var(--navy);transition:color var(--trans)}
.card-link:hover{color:var(--gold)}
.card-link-light{color:rgba(255,255,255,.75)}
.card-link-light:hover{color:var(--white)}

/* ═══════ 5-GATE ═══════ */
.gates-wrap{display:grid;grid-template-columns:1fr 340px;gap:56px;align-items:start}
.gates-left{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--border);padding-left:0;position:relative}
.gate-item{display:flex;gap:20px;padding:0 0 36px 28px;position:relative}
.gate-item:last-child{padding-bottom:0}
.gi-num{position:absolute;left:-18px;width:36px;height:36px;border-radius:50%;border:2px solid var(--border);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:var(--muted);font-family:var(--font-h);flex-shrink:0;z-index:1}
.gi-done .gi-num{background:var(--navy);border-color:var(--navy);color:var(--white)}
.gi-active .gi-num{background:var(--white);border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 4px rgba(201,147,10,.15)}
.gi-body{padding-top:4px}
.gi-tag{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.gi-body h3{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px}
.gi-body p{font-size:13.5px;color:var(--muted);line-height:1.55;margin-bottom:10px}
.gi-pass{display:inline-block;font-size:12px;font-weight:600;color:var(--navy);background:var(--bg2);border:1px solid var(--border);padding:3px 12px;border-radius:4px}
.gi-pass strong{font-weight:800}

/* Gates right */
.gates-summary-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-l);padding:24px;box-shadow:var(--shadow-md);margin-bottom:20px}
.gsc-top{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.gsc-logo{width:40px;height:40px;background:var(--navy);color:var(--white);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:18px;font-weight:800;flex-shrink:0}
.gsc-title{font-size:15px;font-weight:700;color:var(--text)}
.gsc-sub{font-size:12px;color:var(--muted)}
.gsc-gates{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.gcg-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted);padding:8px 12px;border-radius:6px;border:1px solid transparent;transition:all var(--trans)}
.gcg-item span{font-size:11px;font-weight:800;width:22px;height:22px;border-radius:50%;background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gcg-done{color:var(--text);background:var(--bg2)}
.gcg-done span{background:var(--navy);border-color:var(--navy);color:var(--white)}
.gcg-active{border-color:var(--gold);background:rgba(201,147,10,.05);color:var(--gold)}
.gcg-active span{border-color:var(--gold);color:var(--gold)}
.gsc-progress{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:8px}
.gsc-bar{height:100%;background:var(--navy);border-radius:2px}
.gsc-note{font-size:12px;color:var(--muted)}
.gates-why{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-l);padding:20px}
.gates-why h4{font-family:var(--font-h);font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px}
.gates-why p{font-size:13px;color:var(--muted);line-height:1.6}

/* ═══════ PERSONAS ═══════ */
.persona-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.persona-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-l);padding:28px 28px 24px;display:flex;flex-direction:column;gap:12px;transition:all var(--trans)}
.persona-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.pc-s{border-top:3px solid var(--gold)}
.pc-e{border-top:3px solid var(--navy)}
.pc-c{border-top:3px solid var(--muted)}
.pc-head{display:flex;align-items:center;gap:12px}
.pc-ava{font-size:28px;width:48px;height:48px;background:var(--bg);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center}
.pc-role{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.persona-card h3{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--text)}
.persona-card>p{font-size:14px;color:var(--muted);line-height:1.65;flex:1}
.pc-ul{display:flex;flex-direction:column;gap:6px}
.pc-ul li{font-size:13.5px;color:var(--text);padding-left:14px;position:relative}
.pc-ul li::before{content:'→';position:absolute;left:0;color:var(--gold);font-size:11px;font-weight:700}

/* ═══════ FEATURES BENTO ═══════ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat-wide{grid-column:span 2;background:var(--navy);border-radius:var(--radius-l);padding:32px;color:var(--white)}
.feat-wide h3{font-family:var(--font-h);font-size:18px;font-weight:700;color:var(--white);margin-bottom:10px}
.feat-wide p{font-size:14px;color:rgba(255,255,255,.65);line-height:1.65;margin-bottom:16px}
.fw-icon{font-size:32px;margin-bottom:14px}
.fw-tags{display:flex;flex-wrap:wrap;gap:8px}
.fw-tags span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.75);padding:4px 12px;border-radius:4px;font-size:11.5px;font-weight:600}
.feat-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-l);padding:26px;transition:all var(--trans)}
.feat-card:hover{border-color:var(--navy);box-shadow:var(--shadow-md)}
.feat-card-tall{grid-row:span 2;background:var(--bg)}
.fc-ico{font-size:28px;margin-bottom:12px}
.feat-card h3{font-family:var(--font-h);font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px}
.feat-card p{font-size:13.5px;color:var(--muted);line-height:1.6}
.fc-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fc-stack span{background:var(--white);border:1px solid var(--border);color:var(--text);padding:4px 10px;border-radius:4px;font-size:11px;font-weight:600}

/* ═══════ VNX TOKEN ═══════ */
.token-layout{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tk-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-l);padding:22px}
.tk-card h3{font-family:var(--font-h);font-size:14px;font-weight:700;color:var(--white);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.1)}
.tkd{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.tkd span{font-size:12px;color:rgba(255,255,255,.4)}
.tkd strong{font-size:13px;color:var(--white);font-weight:700}
.tku-list{display:flex;flex-direction:column;gap:8px}
.tku{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.65);padding:7px 10px;background:rgba(255,255,255,.04);border-radius:6px}
.tke-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.tke-row>span{font-size:18px;width:28px;text-align:center;flex-shrink:0}
.tke-row div{display:flex;flex-direction:column;gap:2px}
.tke-row strong{font-size:13px;color:var(--white);font-weight:700}
.tke-row em{font-size:11.5px;color:var(--gold-l);font-style:normal;font-weight:600}
.tk-chart-card{display:flex;flex-direction:column;align-items:center}
.tk-chart-card canvas{margin:4px auto 12px}
.tpie-legend{display:flex;flex-direction:column;gap:5px;width:100%}
.tpie-item{display:flex;align-items:center;gap:7px;font-size:11px;color:rgba(255,255,255,.55)}
.tpie-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}

/* ═══════ PRICING ═══════ */
.price-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.price-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-l);padding:32px;display:flex;flex-direction:column;gap:10px;position:relative;transition:all var(--trans)}
.price-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.price-featured{border-color:var(--navy);border-width:2px}
.pr-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--navy);color:var(--white);font-size:11px;font-weight:700;padding:4px 16px;border-radius:4px;white-space:nowrap;letter-spacing:.5px}
.pr-tier{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.pr-price{font-family:var(--font-h);font-size:38px;font-weight:800;color:var(--text)}
.pr-price small{font-size:15px;font-weight:400;color:var(--muted)}
.price-card>p{font-size:13px;color:var(--muted)}
.pr-ul{display:flex;flex-direction:column;gap:8px;flex:1;margin:4px 0}
.pr-ul li{font-size:13.5px;color:var(--text);padding-left:20px;position:relative}
.pr-ul li::before{position:absolute;left:0;font-weight:700}
.pr-ul li.ok{color:var(--text)}
.pr-ul li.ok::before{content:'✓';color:var(--navy)}
.pr-ul li.no{color:var(--muted)}
.pr-ul li.no::before{content:'✕';color:var(--border)}

/* ═══════ ROADMAP ═══════ */
.rm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;padding-top:20px}
.rm-grid::before{content:'';position:absolute;top:30px;left:9%;right:9%;height:1px;background:var(--border)}
.rm-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--radius-l);padding:22px;transition:all var(--trans);position:relative}
.rm-card:hover{border-color:var(--navy);box-shadow:var(--shadow-md)}
.rm-current{border-color:var(--navy);border-width:2px}
.rmc-num{font-family:var(--font-h);font-size:22px;font-weight:900;color:var(--border);margin-bottom:12px}
.rm-done .rmc-num,.rm-current .rmc-num{color:var(--navy)}
.rmc-phase{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.rm-card h3{font-family:var(--font-h);font-size:16px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rm-card ul{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.rm-card li{font-size:13px;color:var(--muted);padding-left:12px;position:relative}
.rm-card li::before{content:'·';position:absolute;left:0;color:var(--gold);font-weight:900}
.rmc-status{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:4px;letter-spacing:.5px}
.rmc-status.done{background:rgba(13,115,119,.08);color:#0D7377;border:1px solid rgba(13,115,119,.2)}
.rmc-status.current{background:rgba(27,58,107,.08);color:var(--navy);border:1px solid rgba(27,58,107,.2)}
.rmc-status.upcoming{background:var(--bg);color:var(--muted);border:1px solid var(--border)}

/* ═══════ CTA SECTION ═══════ */
.cta-section{background:var(--navy);padding:72px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.cta-inner h2{font-family:var(--font-h);font-size:clamp(22px,3vw,36px);font-weight:800;color:var(--white);line-height:1.25;margin-bottom:8px}
.cta-inner p{font-size:16px;color:rgba(255,255,255,.55)}
.cta-btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}

/* ═══════ MODAL ═══════ */
.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:2000;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all var(--trans);padding:20px}
.modal-wrap.open{opacity:1;visibility:visible}
.modal-box{background:var(--white);border-radius:16px;max-width:820px;width:100%;max-height:90vh;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;position:relative;box-shadow:0 24px 64px rgba(0,0,0,.25)}
.modal-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--white);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;z-index:1;transition:all var(--trans);color:var(--muted)}
.modal-x:hover{background:var(--bg);color:var(--text)}
.modal-l{background:var(--navy);padding:44px 32px;border-radius:16px 0 0 16px;display:flex;flex-direction:column;gap:18px}
.modal-logo{font-family:var(--font-h);font-size:22px;font-weight:800}
.modal-logo .logo-mark{color:var(--gold)}
.modal-logo .logo-name{color:var(--white)}
.modal-l h2{font-family:var(--font-h);font-size:22px;font-weight:800;color:var(--white);line-height:1.3}
.modal-l p{font-size:14px;color:rgba(255,255,255,.55);line-height:1.65}
.modal-perks{display:flex;flex-direction:column;gap:8px}
.mpk{font-size:13.5px;color:rgba(255,255,255,.75);padding:8px 12px;background:rgba(255,255,255,.06);border-radius:6px;border-left:3px solid var(--gold)}
.modal-respond{font-size:12px;color:rgba(255,255,255,.35);padding:10px;background:rgba(255,255,255,.04);border-radius:6px;margin-top:auto}
.modal-r{padding:44px 32px;display:flex;flex-direction:column}
.modal-r form{display:flex;flex-direction:column;gap:12px}
.mf-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mf-field input,.mf-field select,.mf-field textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--radius);font-size:14px;color:var(--text);font-family:var(--font);outline:none;transition:border-color var(--trans);background:var(--white)}
.mf-field input:focus,.mf-field select:focus,.mf-field textarea:focus{border-color:var(--navy)}
.mf-field textarea{resize:vertical}
.mf-note{font-size:12px;color:var(--muted);text-align:center;margin-top:4px}
.mf-success{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px}
.mf-success h3{font-family:var(--font-h);font-size:20px;font-weight:800;color:var(--text)}
.mf-success p{font-size:14px;color:var(--muted)}

/* ═══════ FOOTER ═══════ */
footer{background:var(--text);color:var(--white);padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.07)}
.fg-brand .nav-logo{display:inline-flex;margin-bottom:12px;font-size:22px}
.fg-brand .logo-mark{color:var(--gold)}
.fg-brand .logo-name{color:var(--white)}
.fg-brand p{font-size:13px;color:rgba(255,255,255,.4);line-height:1.65;max-width:200px;margin-bottom:6px}
.fg-loc{font-size:12px;color:rgba(255,255,255,.3)!important;margin-bottom:16px}
.fg-social{display:flex;gap:10px}
.fg-social a{width:32px;height:32px;border:1px solid rgba(255,255,255,.12);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;color:rgba(255,255,255,.4);transition:all var(--trans)}
.fg-social a:hover{border-color:var(--gold);color:var(--gold)}
.fg-col h4{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.9);margin-bottom:16px}
.fg-col a{display:block;font-size:13px;color:rgba(255,255,255,.4);padding:4px 0;transition:color var(--trans)}
.fg-col a:hover{color:rgba(255,255,255,.85)}
.footer-bar{max-width:1180px;margin:0 auto;padding:18px 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.footer-bar span{font-size:12px;color:rgba(255,255,255,.25)}
.footer-bar a{color:rgba(255,255,255,.4)}
.footer-bar a:hover{color:var(--gold)}

/* ═══════ SCROLL REVEAL ═══════ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .5s ease,transform .5s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.rd1{transition-delay:.08s}.rd2{transition-delay:.16s}.rd3{transition-delay:.24s}.rd4{transition-delay:.32s}

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:1100px){
  .token-layout{grid-template-columns:1fr 1fr}
  .gates-wrap{grid-template-columns:1fr}
  .gates-right{display:grid;grid-template-columns:1fr 1fr;gap:16px}
}
@media(max-width:920px){
  .nav-links,.nav-right .nav-signin{display:none}
  .hamburger{display:flex}
  .hero-sidebar{display:none}
  .hero-main{flex-direction:column;padding:40px 24px}
  .hero-card-area{max-width:100%}
  .about-grid{grid-template-columns:1fr}
  .persona-row{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr 1fr}
  .feat-wide{grid-column:span 2}
  .feat-card-tall{grid-row:auto}
  .price-row{grid-template-columns:1fr}
  .rm-grid{grid-template-columns:1fr 1fr}
  .rm-grid::before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .fg-brand{grid-column:span 2}
  .stats-row{grid-template-columns:1fr 1fr;gap:24px}
  .sbd{display:none}
}
@media(max-width:600px){
  .sec-white,.sec-gray,.sec-navy{padding:64px 0}
  .container{padding:0 16px}
  .feat-grid{grid-template-columns:1fr}
  .feat-wide{grid-column:span 1}
  .token-layout{grid-template-columns:1fr}
  .rm-grid{grid-template-columns:1fr}
  .modal-box{grid-template-columns:1fr}
  .modal-l{border-radius:16px 16px 0 0;padding:28px 20px}
  .modal-r{padding:20px}
  .mf-2col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .fg-brand{grid-column:span 1}
  .footer-bar{flex-direction:column;text-align:center}
  .hero-kpis{flex-wrap:wrap}
  .gates-right{grid-template-columns:1fr}
}