:root{
  --navy:#0A1F44;
  --navy-2:#123368;
  --navy-3:#1D468C;
  --navy-light:#9FB8E8;
  --paper:#F6F8FC;
  --ink:#0A1220;
  --muted:#5C6478;
  --line:rgba(10,18,32,0.09);
  --line-dark:rgba(255,255,255,0.12);
  --glass:rgba(255,255,255,0.06);
  --orange:#C1611C;
  --orange-2:#E08A4E;
  --glow-orange:rgba(193,97,28,0.45);
  --glow-navy:rgba(10,31,68,0.5);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
::selection{background:var(--navy-3); color:#fff;}
a:focus-visible, button:focus-visible{ outline:2px solid var(--navy-light); outline-offset:3px; border-radius:4px; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; height:100vh; }
h1,h2,h3,.display{ font-family:'Unbounded',sans-serif; margin:0; letter-spacing:-0.01em; }
p{margin:0;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; border:none; background:none; cursor:pointer; color:inherit;}
img,svg{display:block; max-width:100%;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}

.wrap{max-width:1240px; margin:0 auto; padding:0 40px; position:relative; z-index:2;}
@media (max-width:640px){ .wrap{padding:0 22px;} }

/* ==== PRELOADER ==== */
#preloader{
  position:fixed; inset:0; z-index:999; background:var(--navy);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
#preloader.done{ transform:translateY(-100%); }
.pre-count{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:clamp(60px,12vw,150px); color:#fff; font-variant-numeric:tabular-nums; }
.pre-label{ margin-top:10px; font-size:12.5px; letter-spacing:0.25em; text-transform:uppercase; color:var(--navy-light); }
.pre-bar{ width:220px; height:2px; background:rgba(255,255,255,0.14); margin-top:26px; overflow:hidden; }
.pre-bar-fill{ height:100%; width:0%; background:var(--navy-light); }

/* ==== BACKGROUND MESH ==== */
.mesh{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.mesh span{ position:absolute; border-radius:50%; filter:blur(90px); opacity:0.5; }
.mesh .b1{ width:560px; height:560px; background:radial-gradient(circle,var(--navy-3),transparent 70%); top:-160px; left:-120px; animation:float1 16s ease-in-out infinite; }
.mesh .b2{ width:500px; height:500px; background:radial-gradient(circle,var(--navy-2),transparent 70%); bottom:-180px; right:-100px; animation:float2 19s ease-in-out infinite; }
.mesh .b3{ width:400px; height:400px; background:radial-gradient(circle,#2350C7,transparent 70%); top:32%; right:12%; animation:float3 14s ease-in-out infinite; }
.mesh::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%, transparent 45%, rgba(5,7,15,0.55) 100%); }
@keyframes float1{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(60px,80px);} }
@keyframes float2{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(-70px,-50px);} }
@keyframes float3{ 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-40px,60px) scale(1.15);} }
.noise{ position:absolute; inset:0; opacity:0.05; pointer-events:none; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* ==== MAIN CONTENT LAYOUT ==== */
.main-content{ position:relative; }
.main-content:not(:has(.hero-pin)){ padding-top:56px; }

/* ==== NAV ==== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 32px; color:var(--navy);
  background:transparent;
  transition: transform .4s cubic-bezier(.16,1,.3,1), opacity .4s ease, color .25s ease, background .25s ease;
  min-height:48px;
}
@media (max-width:640px){ .nav{padding:8px 16px; min-height:44px;} }

/* Home page navbar hide/show on scroll */
.nav.nav-home {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
.nav.nav-home.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Non-Home pages navbar permanently visible */
.nav.nav-page {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-logo{ font-family:'Unbounded',sans-serif; font-size:16px; font-weight:700; letter-spacing:-0.01em; color:inherit; text-decoration:none; transition:color .25s ease; }
.nav-links{ display:flex; gap:24px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.nav-links a{ position:relative; color:inherit; transition:color .25s ease; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:1px; background:currentColor; transition:width .3s, background .25s ease; }
.nav-links a:hover::after{ width:100%; }
@media (max-width:780px){ .nav-links{display:none;} }
.nav-cta{ font-size:11.5px; font-weight:700; text-transform:uppercase; border:1px solid currentColor; padding:6px 14px; border-radius:100px; color:inherit; transition:background .25s ease, color .25s ease, border-color .25s ease; }
.nav-cta:hover{ background:currentColor; color:var(--paper); }
.nav-auth{ display:flex; align-items:center; gap:14px; }
.nav-login{ font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; color:inherit; opacity:0.85; transition:color .25s ease, opacity .25s ease; }
.nav-login:hover{ opacity:1; }

/* Dynamic brand color on light/white backgrounds */
.nav.nav-dark-text{
  color: var(--navy) !important;
}
.nav.nav-dark-text .nav-logo,
.nav.nav-dark-text .nav-links a,
.nav.nav-dark-text .nav-login,
.nav.nav-dark-text .nav-mobile-toggle{
  color: var(--navy) !important;
}
.nav.nav-dark-text .nav-cta{
  border-color: var(--navy) !important;
  color: var(--navy) !important;
}
.nav.nav-dark-text .nav-cta:hover{
  background: var(--navy) !important;
  color: #fff !important;
}

/* White color on dark/blue backgrounds */
.nav.nav-light-text{
  color: #ffffff !important;
}
.nav.nav-light-text .nav-logo,
.nav.nav-light-text .nav-links a,
.nav.nav-light-text .nav-login,
.nav.nav-light-text .nav-mobile-toggle{
  color: #ffffff !important;
}
.nav.nav-light-text .nav-cta{
  border-color: #ffffff !important;
  color: #ffffff !important;
}
.nav.nav-light-text .nav-cta:hover{
  background: #ffffff !important;
  color: var(--navy) !important;
}

/* ==== MAGNETIC / BUTTONS ==== */
.magnetic{ display:inline-flex; position:relative; }
.btn{ position:relative; display:inline-flex; align-items:center; gap:10px; padding:18px 32px; border-radius:100px; font-size:14.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; transition:transform .18s ease, box-shadow .3s ease, background .3s ease, color .3s ease, border-color .3s ease; }
.btn-solid{ background:linear-gradient(135deg,var(--orange),#9c4c14); color:#fff; box-shadow:0 16px 34px -6px var(--glow-orange), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn-solid:hover{ box-shadow:0 22px 46px -6px var(--glow-orange), inset 0 1px 0 rgba(255,255,255,0.3); }
.btn-outline-dark{ border:1.5px solid var(--ink); color:var(--ink); }
.btn-outline-dark:hover{ background:var(--ink); color:#fff; }
.btn-outline-light{ border:1.5px solid rgba(255,255,255,0.5); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,0.12); border-color:#fff; }
.btn svg{width:15px; height:15px;}

/* ==== HERO PIN (giant zoom logo) ==== */
.hero-pin{ position:relative; height:220vh; background:var(--navy); }
.hero-pin-inner{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hero-pin-inner::before{
  content:""; position:absolute; top:50%; left:50%; width:56vw; height:56vw; max-width:820px; max-height:820px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(61,123,255,0.28), transparent 68%);
  filter:blur(40px); z-index:0; pointer-events:none;
}
.giant-word{
  position:relative; z-index:1;
  font-family:'Unbounded',sans-serif; font-weight:800; color:#fff;
  font-size:22vw; line-height:1; letter-spacing:-0.02em; will-change:transform, opacity;
  background:linear-gradient(120deg,#fff,var(--navy-light),#fff);
  background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 6s linear infinite;
}
@keyframes shine{ to{ background-position:-200% 0; } }
.hero-pin-hint{
  position:absolute; bottom:44px; left:50%; transform:translateX(-50%);
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase; color:rgba(255,255,255,0.4);
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-line{ width:1px; height:36px; background:rgba(255,255,255,0.3); position:relative; overflow:hidden; }
.scroll-line::after{ content:""; position:absolute; top:-100%; left:0; width:100%; height:100%; background:#fff; animation:scrollDown 1.8s ease-in-out infinite; }
@keyframes scrollDown{ to{ top:100%; } }

/* ==== HERO CONTENT ==== */
.hero-content{ position:relative; background:var(--navy); color:#fff; padding:40px 0 120px; overflow:hidden; }
.hero-kicker{ display:flex; align-items:center; gap:12px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--navy-light); margin-bottom:30px; }
.hero-kicker .line{ width:34px; height:1px; background:var(--navy-light); }
.hero-title .line-mask{ overflow:hidden; }
.hero-title span{ display:block; font-size:clamp(34px,6.4vw,74px); line-height:1.02; font-weight:700; transform:translateY(115%); opacity:0; transition:transform .9s cubic-bezier(.22,1,.36,1), opacity .9s ease; }
.hero-title.in-view span{ transform:translateY(0); opacity:1; }
.hero-title.in-view span:nth-child(1){ transition-delay:.05s; }
.hero-title.in-view span:nth-child(2){ transition-delay:.18s; }
.hero-title.in-view span:nth-child(3){ transition-delay:.31s; }
.hero-sub{ margin-top:34px; max-width:480px; font-size:17px; line-height:1.65; color:rgba(255,255,255,0.62); }
.hero-actions{ display:flex; gap:16px; margin-top:42px; flex-wrap:wrap; }

.marquee-strip{ position:relative; margin-top:80px; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); padding:22px 0; overflow:hidden; }
.marquee-track{ display:flex; width:max-content; gap:56px; animation:scrollLeft 26s linear infinite; }
.marquee-track span{ font-family:'Unbounded',sans-serif; font-size:16px; font-weight:600; color:rgba(255,255,255,0.5); display:flex; align-items:center; gap:20px; white-space:nowrap; }
.marquee-track span i{ font-style:normal; color:var(--navy-light); }
@keyframes scrollLeft{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-strip:hover .marquee-track{ animation-play-state:paused; }

/* ==== SECTIONS ==== */
.section{ padding:150px 0; position:relative; }
.section-dark{ background:var(--navy); color:#fff; }
.eyebrow{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--navy-3); margin-bottom:22px; }
.section-dark .eyebrow{ color:var(--navy-light); }
.section-title{ font-size:clamp(30px,4.2vw,54px); line-height:1.08; letter-spacing:-0.015em; font-weight:700; max-width:820px; }
.section-lead{ margin-top:22px; font-size:17px; line-height:1.7; color:var(--muted); max-width:480px; }
.section-dark .section-lead{ color:rgba(255,255,255,0.6); }
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in-view{ opacity:1; transform:translateY(0); }

/* ==== ROLE GLASS TILT CARDS ==== */
.roles-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:70px; }
@media (max-width:760px){ .roles-grid{grid-template-columns:1fr;} }
.role-card{
  position:relative; padding:40px; border-radius:22px; background:linear-gradient(165deg,#0D1526,var(--ink));
  color:#fff; overflow:hidden; transform-style:preserve-3d; will-change:transform;
  transition:transform .15s ease-out, box-shadow .35s ease;
  min-height:270px; display:flex; flex-direction:column; justify-content:space-between;
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:0 30px 60px -32px rgba(3,8,20,0.8);
}
.role-card:hover{ box-shadow:0 40px 80px -28px var(--glow-navy); }
.role-card::before{
  content:""; position:absolute; inset:0; opacity:0.5;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(61,123,255,0.35), transparent 60%);
  transition:opacity .3s;
}
.role-card .rn{ font-family:'Unbounded',sans-serif; font-size:14px; color:rgba(255,255,255,0.35); position:relative; }
.role-card h3{ font-size:26px; margin-top:16px; position:relative; }
.role-card p{ font-size:14.5px; color:rgba(255,255,255,0.6); line-height:1.65; margin-top:14px; max-width:340px; position:relative; }
.role-card .tag{
  position:relative; align-self:flex-start; margin-top:20px; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.05em; padding:7px 14px; border-radius:100px; border:1px solid rgba(255,255,255,0.2); color:rgba(255,255,255,0.75);
}

/* ==== PINNED PROCESS ==== */
.pin-wrap{ position:relative; }
.pin-inner{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.pin-head{ position:relative; margin-bottom:50px; }
.pin-row{ display:flex; gap:32px; will-change:transform; padding-left:40px; }
.pin-card{
  flex:none; width:min(78vw,440px); height:340px; border-radius:20px; padding:40px 36px;
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(160deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border:1px solid var(--line-dark); backdrop-filter:blur(10px);
  box-shadow:0 30px 70px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
}
.pin-card .n{ font-family:'Unbounded',sans-serif; font-size:50px; background:linear-gradient(120deg,var(--navy-light),#fff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.pin-card h3{ font-size:23px; margin-top:20px; color:#fff; }
.pin-card p{ font-size:14.5px; color:rgba(255,255,255,0.6); line-height:1.6; margin-top:12px; }
@media (max-width:900px){
  .pin-inner{ position:static; height:auto; }
  .pin-row{ flex-direction:column; transform:none !important; padding:0 22px; }
  .pin-card{ width:100%; height:auto; padding:32px 26px; }
}

/* ==== HOLOGRAPHIC PROFILE CARD ==== */
.showcase-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; margin-top:70px; }
@media (max-width:900px){ .showcase-grid{grid-template-columns:1fr;} }
.link-row{ margin-top:30px; display:flex; align-items:center; background:var(--ink); color:#fff; border-radius:100px; padding:6px 6px 6px 24px; max-width:420px; }
.link-row .txt{ flex:1; font-size:14px; font-weight:600; color:rgba(255,255,255,0.85); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.link-row button{ background:var(--navy-3); color:#fff; font-size:12.5px; font-weight:700; text-transform:uppercase; padding:12px 20px; border-radius:100px; }

.holo-wrap{ perspective:1200px; }
.holo{
  position:relative; border-radius:26px; padding:2px;
  background:linear-gradient(135deg, var(--navy-3), var(--navy-light), var(--orange-2), var(--navy-light), var(--navy-3));
  background-size:300% 300%; animation:holoShift 7s ease-in-out infinite;
  transform-style:preserve-3d; will-change:transform; transition:transform .15s ease-out;
  box-shadow:0 40px 90px -30px var(--glow-navy);
}
@keyframes holoShift{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
.holo-inner{
  position:relative; border-radius:24px; padding:38px; background:var(--ink); color:#fff; overflow:hidden;
}
.holo-inner::after{
  content:""; position:absolute; inset:-50%; pointer-events:none;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  transform:translateX(var(--sx,-100%));
  transition:transform .2s ease-out;
}
.pcard-top{ display:flex; align-items:center; gap:16px; position:relative; }
.avatar{ width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--navy-3),var(--navy-2)); display:flex; align-items:center; justify-content:center; font-family:'Unbounded',sans-serif; font-size:18px; }
.pcard-name{ font-size:17px; font-weight:700; }
.pcard-role{ font-size:13px; color:rgba(255,255,255,0.55); margin-top:2px; }
.pcard-badge{ margin-left:auto; display:flex; align-items:center; gap:7px; background:rgba(255,255,255,0.1); font-size:11px; font-weight:800; padding:6px 12px 6px 10px; border-radius:100px; }
.pcard-badge .dot{ width:6px; height:6px; border-radius:50%; background:#4ADE80; animation:pulseDot 2s ease-out infinite; }
@keyframes pulseDot{ 0%{box-shadow:0 0 0 0 rgba(74,222,128,0.55);} 70%{box-shadow:0 0 0 12px rgba(74,222,128,0);} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0);} }
.pcard-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:30px 0; position:relative; }
.pcard-stat{ background:rgba(255,255,255,0.06); border-radius:12px; padding:16px 8px; text-align:center; }
.pcard-stat .n{ font-family:'Unbounded',sans-serif; font-size:24px; }
.pcard-stat .l{ font-size:10.5px; color:rgba(255,255,255,0.5); margin-top:4px; text-transform:uppercase; letter-spacing:0.03em; }
.pcard-certs{ display:flex; position:relative; }
.pcard-cert{ width:60px; height:76px; border-radius:8px; background:linear-gradient(160deg,rgba(255,255,255,0.14),rgba(255,255,255,0.04)); border:1px solid rgba(255,255,255,0.14); margin-right:-20px; transition:transform .25s; }
.holo:hover .pcard-cert:nth-child(1){ transform:translate(-8px,-6px) rotate(-6deg); }
.holo:hover .pcard-cert:nth-child(2){ transform:translateY(-10px); }
.holo:hover .pcard-cert:nth-child(3){ transform:translate(8px,-6px) rotate(6deg); }

/* ==== TRUST / PARTNERS SHOWCASE ==== */
.trust-section{
  position:relative; background:#fff; color:var(--ink); overflow:hidden;
  padding:150px 0;
}
.trust-eyebrow-row{ display:flex; align-items:flex-end; flex-wrap:wrap; gap:20px 22px; margin-bottom:72px; position:relative; z-index:2; }
.trust-label{
  position:relative; display:inline-block;
  font-family:'Unbounded',sans-serif; font-weight:700; letter-spacing:-0.01em;
  font-size:clamp(38px,6vw,68px); line-height:1; color:var(--ink);
  padding-bottom:14px;
}
.trust-label::before{
  content:""; position:absolute; left:-24px; top:10px; width:9px; height:9px; border-radius:50%;
  background:var(--orange); box-shadow:0 0 0 0 var(--glow-orange);
  animation:pulseOrange 2.4s ease-out infinite;
}
.trust-label::after{
  content:""; position:absolute; left:0; bottom:0; height:4px; width:0; border-radius:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
  transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.trust-eyebrow-row.in-view .trust-label::after{ width:100%; }
@keyframes pulseOrange{
  0%{ box-shadow:0 0 0 0 rgba(193,97,28,0.55); }
  70%{ box-shadow:0 0 0 12px rgba(193,97,28,0); }
  100%{ box-shadow:0 0 0 0 rgba(193,97,28,0); }
}
.trust-pill{
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em;
  border:1.5px solid var(--ink); border-radius:100px; padding:9px 20px; color:var(--ink);
  margin-bottom:10px; transition:background .3s ease, color .3s ease;
}
.trust-pill:hover{ background:var(--ink); color:#fff; }
.trust-grid{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line); border-left:1px solid var(--line);
}
@media (max-width:760px){ .trust-grid{grid-template-columns:repeat(2,1fr);} }
.trust-item{
  position:relative; aspect-ratio:1.5; background:#fff;
  display:flex; align-items:center; justify-content:center; padding:24px;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .3s ease;
}
.trust-item:hover{ background:var(--paper); }
.trust-logo{
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:17px; letter-spacing:0.02em;
  color:var(--ink); opacity:0.7; text-align:center; transition:opacity .3s ease, transform .3s ease;
}
.trust-item:hover .trust-logo{ opacity:1; transform:scale(1.06); }
.trust-item .corner-mark{
  position:absolute; width:11px; height:11px; color:rgba(10,18,32,0.3);
  transition:color .3s ease;
}
.trust-item:hover .corner-mark{ color:var(--orange); }
.trust-item .corner-mark.tl{ top:-6px; left:-6px; }
.trust-item .corner-mark.tr{ top:-6px; right:-6px; }
.trust-item .corner-mark.bl{ bottom:-6px; left:-6px; }
.trust-item .corner-mark.br{ bottom:-6px; right:-6px; }

/* ==== STATS ==== */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:70px; }
@media (max-width:760px){ .stats-grid{grid-template-columns:1fr 1fr;} }
.stat .n{ font-family:'Unbounded',sans-serif; font-size:clamp(34px,4.6vw,54px); font-variant-numeric:tabular-nums; }
.stat .l{ font-size:13.5px; color:var(--muted); margin-top:10px; max-width:180px; line-height:1.4; }
.section-dark .stat .n{ text-shadow:0 0 40px rgba(29,70,140,0.5); }
.section-dark .stat .l{ color:rgba(255,255,255,0.55); }

/* ==== FINAL CTA ==== */
.final{ background:var(--navy); color:#fff; padding:170px 0 130px; text-align:center; position:relative; overflow:hidden; }
.final-title span{
  display:block; font-size:clamp(36px,8.6vw,104px); font-weight:800; line-height:1;
  background:linear-gradient(120deg,#fff,var(--navy-light),#fff);
  background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shine 8s linear infinite;
  filter:drop-shadow(0 0 50px rgba(29,70,140,0.45));
}
.final-sub{ margin:34px auto 0; max-width:440px; font-size:16px; color:rgba(255,255,255,0.6); position:relative; }
.final-actions{ display:flex; gap:16px; justify-content:center; margin-top:46px; flex-wrap:wrap; position:relative; }

/* ==== FOOTER ==== */
footer{ background:var(--navy-2); color:rgba(255,255,255,0.5); padding:50px 0; border-top:1px solid var(--line-dark); position:relative; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; font-size:13.5px; }
.footer-row .fl{ font-family:'Unbounded',sans-serif; color:#fff; font-size:16px; }

/* ==== MOBILE NAVIGATION TOGGLE & DRAWER ==== */
.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: inherit;
  padding: 4px;
  cursor: pointer;
  z-index: 102;
}
.nav-mobile-toggle svg {
  width: 22px;
  height: 22px;
  transition: transform 0.3s ease;
}
.nav-mobile-toggle .m-line-1,
.nav-mobile-toggle .m-line-2,
.nav-mobile-toggle .m-line-3 {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.nav-mobile-toggle.open .m-line-1 {
  transform: translateY(6px) rotate(45deg);
}
.nav-mobile-toggle.open .m-line-2 {
  opacity: 0;
}
.nav-mobile-toggle.open .m-line-3 {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 780px) {
  .nav-mobile-toggle { display: flex; align-items: center; justify-content: center; }
  .nav-links { display: none !important; }
  .nav-auth .nav-login,
  .nav-auth .nav-cta { display: none !important; }
}

.nav-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: rgba(10, 31, 68, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.nav-mobile-menu.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-mobile-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: 20px;
}
.nav-mobile-links a {
  font-family: 'Unbounded', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.25s ease;
}
.nav-mobile-links a:hover {
  color: var(--navy-light);
}
.nav-mobile-divider {
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 10px 0;
}
body.locked-mobile {
  overflow: hidden !important;
}

/* ==== COMPREHENSIVE PHONE OPTIMIZATIONS ==== */
@media (max-width: 768px) {
  .wrap { padding: 0 18px; }
  .section { padding: 60px 0; }
  
  /* Hero section on phones */
  .hero-pin { height: 150vh; }
  .giant-word { font-size: clamp(34px, 17vw, 90px); }
  .hero-content { padding: 24px 0 60px; }
  .hero-kicker { font-size: 11.5px; margin-bottom: 20px; }
  .hero-title span { font-size: clamp(26px, 8.5vw, 44px); }
  .hero-sub { font-size: 14.5px; line-height: 1.6; margin-top: 18px; }
  .hero-actions { flex-direction: column; gap: 12px; width: 100%; }
  .hero-actions .magnetic { width: 100%; }
  .hero-actions .btn { width: 100%; justify-content: center; padding: 14px 20px; font-size: 13.5px; }

  /* Section typography & spacing */
  .section-title { font-size: clamp(24px, 6.5vw, 36px); }
  .section-lead { font-size: 14.5px; margin-top: 14px; }
  .eyebrow { font-size: 11.5px; margin-bottom: 14px; }

  /* Roles section */
  .roles-grid { grid-template-columns: 1fr; gap: 16px; margin-top: 32px; }
  .role-card { padding: 24px 20px; min-height: auto; border-radius: 18px; }
  .role-card h3 { font-size: 20px; margin-top: 12px; }
  .role-card p { font-size: 13.5px; margin-top: 10px; }

  /* Process pin card stack on mobile */
  .pin-inner { position: static; height: auto; }
  .pin-row { flex-direction: column; transform: none !important; padding: 0 18px; gap: 16px; }
  .pin-card { width: 100%; height: auto; padding: 24px 20px; border-radius: 16px; }
  .pin-card .n { font-size: 36px; }
  .pin-card h3 { font-size: 19px; margin-top: 12px; }

  /* Showcase / Holographic Profile Card */
  .showcase-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .link-row { max-width: 100%; padding: 4px 4px 4px 16px; }
  .link-row .txt { font-size: 12px; }
  .link-row button { padding: 10px 14px; font-size: 11px; }
  .holo-inner { padding: 22px 16px; border-radius: 20px; }
  .pcard-top { gap: 12px; }
  .avatar { width: 44px; height: 44px; font-size: 15px; }
  .pcard-name { font-size: 15px; }
  .pcard-badge { padding: 4px 10px; font-size: 10px; }
  .pcard-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 20px 0; }
  .pcard-stat { padding: 10px 4px; }
  .pcard-stat .n { font-size: 18px; }
  .pcard-stat .l { font-size: 9px; }

  /* Trust Grid */
  .trust-section { padding: 60px 0; }
  .trust-eyebrow-row { margin-bottom: 32px; gap: 12px; }
  .trust-label { font-size: clamp(28px, 7.5vw, 44px); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-item { padding: 16px 12px; aspect-ratio: 1.7; }
  .trust-logo { font-size: 13.5px; }

  /* Stats grid */
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; margin-top: 32px; }
  .stat .n { font-size: clamp(26px, 7.5vw, 38px); }
  .stat .l { font-size: 12px; margin-top: 6px; }

  /* Final CTA */
  .final { padding: 70px 0 50px; }
  .final-title span { font-size: clamp(28px, 9vw, 54px); }
  .final-sub { font-size: 14px; margin-top: 18px; }
  .final-actions { flex-direction: column; width: 100%; gap: 12px; }
  .final-actions .magnetic { width: 100%; }
  .final-actions .btn { width: 100%; justify-content: center; }

  /* Footer on mobile */
  footer .wrap { grid-template-columns: 1fr 1fr !important; gap: 24px 16px !important; padding: 32px 0 20px !important; }

  /* Inner pages grid responsive helpers */
  .ev-page, .kv-page, .dash-page, .org-page, .uni-page, .prof-page {
    padding: 20px 14px !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .ev-filters {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ev-grid, .events-grid, .roster-grid, .cert-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .kv-card {
    padding: 20px 16px !important;
    border-radius: 16px !important;
  }
  .kv-roles {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .wrap { padding: 0 14px; }
  footer .wrap { grid-template-columns: 1fr !important; gap: 20px !important; }
  .trust-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; text-align: center; }
  .stat .l { margin: 6px auto 0; }
}