/* ── FONTS ── */
@font-face { font-family:'FlexaExpBold'; src:url('fonts/GT-Flexa-Expanded-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'FlexaRegular'; src:url('fonts/GT-Flexa-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'FlexaLight'; src:url('fonts/GT-Flexa-Extended-Light.woff2') format('woff2'); font-weight:300; font-display:swap; }
@font-face { font-family:'FlexaCompBold'; src:url('fonts/GT-Flexa-Compressed-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --ink:      #f2f5f0;
  --ink-2:    rgba(216,238,232,0.66);
  --ink-3:    rgba(180,214,206,0.6);
  --teal:     #2dd4bf;
  --cyan:     #5eead4;
  --lime:     #D7FD51;
  --bg:       #041a18;
  --glass:    rgba(7,32,29,0.5);
  --glass-br: rgba(120,200,185,0.12);
  --fd:'FlexaExpBold',system-ui,sans-serif;
  --fb:'FlexaRegular',system-ui,sans-serif;
  --fl:'FlexaLight',system-ui,sans-serif;
  --fc:'FlexaCompBold',system-ui,sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
::selection{ background:var(--cyan); color:#04140a; }
body{
  -webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(ellipse 90% 70% at 60% 20%, #0a3833 0%, transparent 55%),
    radial-gradient(ellipse 80% 80% at 30% 90%, #072824 0%, transparent 60%),
    linear-gradient(160deg, #052320 0%, #03110f 100%);
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--fb);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  text-wrap:pretty;
}
a{ color:inherit; text-decoration:none; }
button{ cursor:pointer; border:none; background:none; font:inherit; color:inherit; }
img,svg,canvas{ display:block; }

/* ── BLOB CANVAS ── */
#bg-canvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
  pointer-events:none;
}
/* vignette to anchor text */
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, transparent 40%, rgba(3,17,15,0.5) 100%),
    linear-gradient(180deg, transparent 60%, rgba(3,17,15,0.4) 100%);
}

/* ── CONTENT LAYER ── */
.page{ position:relative; z-index:2; }

/* ── NAV ── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 40px;
  transition:background .3s ease, backdrop-filter .3s ease, padding .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(4,17,15,0.7);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--glass-br);
  padding:14px 40px;
}
.nav-logo{ display:flex; align-items:center; gap:10px; }
.nav-mark{
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg, var(--cyan), var(--teal));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  box-shadow:0 0 18px rgba(45,212,191,0.4);
}
.nav-mark svg{ width:17px; height:17px; }
.nav-word{ font-family:var(--fd); font-size:15px; letter-spacing:-.01em; text-transform:uppercase; }
.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-link{
  font-family:var(--fc); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-2); transition:color .2s;
}
.nav-link:hover{ color:var(--ink); }
.nav-cta{
  font-family:var(--fc); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--lime); color:#04140a; padding:11px 22px; border-radius:999px;
  transition:transform .2s, box-shadow .2s;
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 0 22px rgba(215,253,81,0.35); }
@media(max-width:860px){ .nav-links .nav-link{ display:none; } }

/* ── HERO ── */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:140px 40px 80px;
  max-width:1320px; margin:0 auto;
}
.hero-badge{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--fc); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:28px;
  padding:7px 14px; border:1px solid var(--glass-br); border-radius:999px;
  background:var(--glass); backdrop-filter:blur(8px);
  width:fit-content;
}
.hero-badge .dot{ width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.hero h1{
  font-family:var(--fd);
  font-size:clamp(48px, 8vw, 116px);
  text-transform:uppercase; letter-spacing:-.04em; line-height:.9;
  max-width:14ch; margin-bottom:32px;
}
.hero h1 .grad{
  background:linear-gradient(100deg, var(--cyan), var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p{
  font-family:var(--fb); font-size:clamp(16px,1.7vw,21px); color:var(--ink-2);
  max-width:540px; line-height:1.65; margin-bottom:40px;
}
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
/* Hero content is visible by default — no opacity-gating entrance (blob supplies motion) */

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--fc); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  padding:15px 30px; border-radius:999px; transition:all .2s ease; white-space:nowrap;
}
.btn-primary{ background:var(--lime); color:#04140a; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 8px 30px rgba(215,253,81,0.3); }
.btn-primary::after{ content:'→'; font-family:var(--fb); }
.btn-glass{
  background:var(--glass); color:var(--ink); border:1px solid var(--glass-br); backdrop-filter:blur(10px);
}
.btn-glass:hover{ border-color:var(--cyan); color:var(--cyan); }

/* scroll cue */
.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.scroll-cue .ln{ width:1px; height:42px; background:linear-gradient(transparent, var(--cyan)); }
.scroll-cue .lbl{ font-family:var(--fc); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); }

/* ── SECTION SHELL ── */
.section{ padding:120px 40px; max-width:1320px; margin:0 auto; position:relative; }
.eyebrow{
  font-family:var(--fc); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan); display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.eyebrow::before{ content:''; width:26px; height:1px; background:var(--cyan); }
.section-title{
  font-family:var(--fd); font-size:clamp(32px,4.5vw,62px);
  text-transform:uppercase; letter-spacing:-.03em; line-height:.92;
}

/* ── MISSION ── */
.mission{ max-width:1000px; }
.mission-big{
  font-family:var(--fl); font-size:clamp(26px,3.4vw,48px); line-height:1.25;
  letter-spacing:-.01em; color:var(--ink);
}
.mission-big b{ font-family:var(--fd); font-weight:700; color:var(--lime); }
.mission-big .t{ color:var(--cyan); font-family:var(--fl); }

/* ── SERVICES ── */
.services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:60px; }
.svc-card{
  background:var(--glass); backdrop-filter:blur(14px);
  border:1px solid var(--glass-br); border-radius:22px; padding:32px;
  display:flex; flex-direction:column; gap:18px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  position:relative; overflow:hidden;
}
.svc-card::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 70% 0%, rgba(45,212,191,0.12), transparent 60%);
  opacity:0; transition:opacity .3s ease;
}
.svc-card:hover{ transform:translateY(-5px); border-color:rgba(94,234,212,0.35); box-shadow:0 18px 50px rgba(0,0,0,0.4); }
.svc-card:hover::before{ opacity:1; }
.svc-icon{
  width:60px; height:60px; border-radius:16px;
  background:rgba(45,212,191,0.08); border:1px solid var(--glass-br);
  display:flex; align-items:center; justify-content:center;
}
.svc-icon svg{ width:30px; height:30px; }
.svc-num{ font-family:var(--fc); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.svc-title{ font-family:var(--fd); font-size:24px; text-transform:uppercase; letter-spacing:-.02em; line-height:.95; }
.svc-desc{ font-family:var(--fb); font-size:14px; color:var(--ink-2); line-height:1.65; flex-grow:1; }
.svc-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.svc-tag{
  font-family:var(--fc); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; background:rgba(45,212,191,0.08);
  border:1px solid var(--glass-br); color:var(--cyan);
}

/* ── HOW IT WORKS ── */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:60px; }
.step{
  background:var(--glass); backdrop-filter:blur(12px);
  border:1px solid var(--glass-br); border-radius:18px; padding:28px;
  display:flex; flex-direction:column; gap:14px;
}
.step-n{
  font-family:var(--fd); font-size:42px; letter-spacing:-.04em; line-height:1;
  background:linear-gradient(120deg, var(--cyan), var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.step-t{ font-family:var(--fc); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.step-d{ font-family:var(--fb); font-size:13px; color:var(--ink-2); line-height:1.6; }

/* ── COMPATIBILITY STRIP ── */
.compat{
  margin-top:56px; padding:32px 40px;
  background:var(--glass); backdrop-filter:blur(12px);
  border:1px solid var(--glass-br); border-radius:20px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.compat-label{ font-family:var(--fc); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }
.compat-items{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.compat-item{ font-family:var(--fd); font-size:18px; letter-spacing:-.01em; color:var(--ink); opacity:.7; transition:opacity .2s; }
.compat-item:hover{ opacity:1; color:var(--cyan); }

/* ── TESTIMONIALS ── */
.tst-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:60px; margin-top:60px; align-items:center; }
.tst-card{
  background:var(--glass); backdrop-filter:blur(14px);
  border:1px solid var(--glass-br); border-radius:24px; padding:44px;
  min-height:280px; display:flex; flex-direction:column; justify-content:space-between; gap:28px;
}
.tst-item{ display:none; flex-direction:column; gap:24px; }
.tst-item.active{ display:flex; animation:fadeIn .5s ease; }
.tst-logo{ height:22px; opacity:.5; filter:brightness(3); }
.tst-quote{ font-family:var(--fl); font-size:clamp(19px,2vw,26px); line-height:1.45; color:var(--ink); }
.tst-quote::before,.tst-quote::after{ content:'"'; color:var(--cyan); font-family:var(--fd); }
.tst-meta{ display:flex; flex-direction:column; gap:3px; }
.tst-name{ font-family:var(--fb); font-weight:600; font-size:14px; }
.tst-role{ font-family:var(--fc); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.tst-dots{ display:flex; gap:2px; }
/* 8px visible dot, but a 32px transparent-padded hit area for comfortable tapping */
.tdot{ width:8px; height:8px; padding:12px; box-sizing:content-box; background-clip:content-box;
  border-radius:50%; background:var(--glass-br); cursor:pointer; transition:background .2s, transform .2s; }
.tdot:hover{ background:var(--ink-3); }
.tdot.active{ background:var(--cyan); transform:scale(1.4); }
.tst-stats{ display:flex; flex-direction:column; gap:18px; }
.tst-stat{ display:flex; align-items:baseline; gap:18px; padding-bottom:18px; border-bottom:1px solid var(--glass-br); }
.tst-stat-v{ font-family:var(--fd); font-size:54px; letter-spacing:-.04em; line-height:1; color:var(--lime); min-width:120px; }
.tst-stat-l{ font-family:var(--fb); font-size:14px; color:var(--ink-2); line-height:1.5; }

/* ── BIG CTA ── */
.cta{
  margin:60px auto 0; max-width:1320px; padding:0 40px;
}
.cta-inner{
  background:linear-gradient(135deg, rgba(45,212,191,0.1), rgba(215,253,81,0.05));
  border:1px solid var(--glass-br); border-radius:32px;
  padding:80px 60px; text-align:center; backdrop-filter:blur(16px);
  position:relative; overflow:hidden;
}
.cta-inner h2{
  font-family:var(--fd); font-size:clamp(36px,5vw,80px);
  text-transform:uppercase; letter-spacing:-.04em; line-height:.9; margin-bottom:24px;
}
.cta-inner h2 .grad{ background:linear-gradient(100deg, var(--cyan), var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cta-inner p{ font-family:var(--fb); font-size:18px; color:var(--ink-2); max-width:520px; margin:0 auto 36px; }

/* ── FOOTER ── */
.footer{
  margin-top:120px; padding:64px 40px 40px; max-width:1320px; margin-left:auto; margin-right:auto;
  border-top:1px solid var(--glass-br);
}
.footer-top{ display:flex; justify-content:space-between; gap:48px; flex-wrap:wrap; margin-bottom:56px; }
.footer-brand{ max-width:300px; }
.footer-brand .nav-logo{ margin-bottom:18px; }
.footer-brand p{ font-family:var(--fb); font-size:14px; color:var(--ink-2); line-height:1.6; }
.footer-cols{ display:flex; gap:64px; flex-wrap:wrap; }
.footer-col h4{ font-family:var(--fc); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin-bottom:16px; }
.footer-col a{ display:block; font-family:var(--fb); font-size:14px; color:var(--ink-2); padding:8px 0; transition:color .2s; }
.footer-col a:hover{ color:var(--cyan); }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid var(--glass-br);
  font-family:var(--fc); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}

/* ── REVEAL — visible by default; hidden only when JS arms it ── */
.reveal{ transition:opacity .8s ease, transform .8s ease; }
.reveal.is-hidden{ opacity:0; transform:translateY(28px); }
.rd1{ transition-delay:.1s; } .rd2{ transition-delay:.2s; } .rd3{ transition-delay:.3s; }

@keyframes fadeUp{ from{opacity:0;transform:translateY(28px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }

/* ── MODAL ── */
.overlay{ position:fixed; inset:0; background:rgba(3,15,13,0.8); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:24px; opacity:0; visibility:hidden; pointer-events:none; overflow-y:auto; transition:opacity .3s ease, visibility 0s linear .3s; backdrop-filter:blur(6px); }
.overlay.open{ opacity:1; visibility:visible; pointer-events:all; transition:opacity .3s ease, visibility 0s; }
.modal{ background:#072420; border:1px solid var(--glass-br); border-radius:24px; padding:44px; width:100%; max-width:560px; margin:auto; transform:scale(.96) translateY(12px); transition:transform .3s; position:relative; }
.overlay.open .modal{ transform:scale(1) translateY(0); }
.modal-x{ position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,0.05); display:flex; align-items:center; justify-content:center; font-size:20px; line-height:1; color:var(--ink-2); transition:color .2s, background .2s; }
.modal-x:focus-visible{ color:var(--ink); }
.modal-x:hover{ color:var(--ink); }
.modal h3{ font-family:var(--fd); font-size:30px; text-transform:uppercase; letter-spacing:-.03em; margin-bottom:30px; }
.fgrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 20px; margin-bottom:16px; }
.fg{ display:flex; flex-direction:column; gap:7px; }
.fg.s2{ grid-column:1/-1; }
.fg label{ font-family:var(--fc); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.fg input,.fg textarea{
  background:rgba(255,255,255,0.04); border:1px solid var(--glass-br); border-radius:9px;
  padding:12px 15px; font-family:var(--fb); font-size:16px; color:var(--ink); outline:none; transition:border-color .2s, box-shadow .2s; width:100%;
}
.fg input::placeholder,.fg textarea::placeholder{ color:var(--ink-3); }
.fg input:focus,.fg textarea:focus{ border-color:var(--cyan); box-shadow:0 0 0 3px rgba(45,212,191,0.12); }
.fg textarea{ resize:vertical; min-height:96px; }
.fbtn{ display:flex; justify-content:flex-end; margin-top:22px; }

@media(max-width:920px){
  .services-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr 1fr; }
  .tst-wrap{ grid-template-columns:1fr; }
  .fgrid{ grid-template-columns:1fr; }
}


/* ═══ INNER-PAGE ADDITIONS ═══ */

/* page hero (shorter than full homepage hero) */
.page-hero{
  min-height:74svh; display:flex; flex-direction:column; justify-content:center;
  padding:160px 40px 80px; max-width:1320px; margin:0 auto;
}
.breadcrumb{
  font-family:var(--fc); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:24px; display:flex; gap:10px; align-items:center;
}
.breadcrumb a{ color:var(--ink-3); transition:color .2s; }
.breadcrumb a:hover{ color:var(--cyan); }
.breadcrumb span.sep{ opacity:.5; }
.page-hero h1{
  font-family:var(--fd); font-size:clamp(46px,7vw,108px);
  text-transform:uppercase; letter-spacing:-.04em; line-height:.88; margin-bottom:28px; max-width:16ch;
}
.page-hero h1 .grad{ background:linear-gradient(100deg,var(--cyan),var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero .lede{ font-family:var(--fb); font-size:clamp(16px,1.7vw,21px); color:var(--ink-2); max-width:560px; line-height:1.65; }

/* feature row (alternating text + visual) */
.feature{
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
  padding:72px 0; border-top:1px solid var(--glass-br);
}
.feature:nth-child(even) .feature-visual{ order:-1; }
.feature-kicker{ font-family:var(--fc); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--cyan); margin-bottom:16px; }
.feature h3{ font-family:var(--fd); font-size:clamp(26px,3vw,42px); text-transform:uppercase; letter-spacing:-.03em; line-height:.95; margin-bottom:20px; }
.feature p{ font-family:var(--fb); font-size:16px; color:var(--ink-2); line-height:1.7; margin-bottom:20px; }
.feature ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.feature li{ font-family:var(--fb); font-size:14px; color:var(--ink-2); display:flex; gap:12px; align-items:flex-start; }
.feature li::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--cyan); margin-top:7px; flex-shrink:0; box-shadow:0 0 8px var(--cyan); }
.feature-visual{
  aspect-ratio:4/3; border-radius:24px; border:1px solid var(--glass-br);
  background:var(--glass); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:center; padding:40px; position:relative; overflow:hidden;
}
.feature-visual::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 60% 30%, rgba(45,212,191,0.14), transparent 60%); }
.feature-visual svg{ width:60%; height:60%; position:relative; z-index:1; }

/* spec grid */
.spec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
.spec{
  background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--glass-br);
  border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:10px;
}
.spec-v{ font-family:var(--fd); font-size:40px; letter-spacing:-.04em; line-height:1;
  background:linear-gradient(120deg,var(--cyan),var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.spec-t{ font-family:var(--fc); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.spec-d{ font-family:var(--fb); font-size:13px; color:var(--ink-2); line-height:1.6; }

/* integration logo strip (wordmarks) */
.logos-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-top:48px; }
.logo-pill{
  background:var(--glass); backdrop-filter:blur(10px); border:1px solid var(--glass-br);
  border-radius:14px; padding:24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  font-family:var(--fd); font-size:18px; letter-spacing:-.01em; color:var(--ink); opacity:.72;
  transition:opacity .2s, border-color .2s, transform .2s; text-align:center;
}
.logo-pill:hover{ opacity:1; border-color:rgba(94,234,212,0.4); transform:translateY(-3px); color:var(--cyan); }
.logo-pill small{ display:block; font-family:var(--fc); font-size:9px; letter-spacing:.1em; color:var(--ink-3); text-transform:uppercase; }

/* ── A11Y: visible focus + reduced motion ── */
:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--lime); color:#04140a; padding:12px 20px; border-radius:0 0 10px 0;
  font-family:var(--fc); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
}
.skip-link:focus{ left:0; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

@media(max-width:920px){
  .feature{ grid-template-columns:1fr; gap:32px; }
  .feature:nth-child(even) .feature-visual{ order:0; }
  .spec-grid{ grid-template-columns:1fr; }
}

/* ═══ MOBILE MENU ═══ */
.nav-burger{
  display:none; width:44px; height:44px; border-radius:50%;
  background:var(--glass); border:1px solid var(--glass-br); backdrop-filter:blur(10px);
  flex-direction:column; align-items:center; justify-content:center; gap:5px; z-index:60;
}
.nav-burger span{ display:block; width:18px; height:1.6px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .2s; }
.nav-burger.open span:nth-child(1){ transform:translateY(3.3px) rotate(45deg); }
.nav-burger.open span:nth-child(2){ opacity:0; }
.nav-burger.open span:nth-child(3){ transform:translateY(-3.3px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:55; background:rgba(4,17,15,0.96); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; gap:8px; padding:90px 32px 40px;
  overflow-y:auto; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-12px);
  transition:opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.mobile-menu.open{ opacity:1; visibility:visible; pointer-events:all; transform:translateY(0); transition:opacity .35s ease, transform .35s ease, visibility 0s; }
.mobile-menu a, .mobile-menu button{
  font-family:var(--fd); font-size:34px; text-transform:uppercase; letter-spacing:-.02em; color:var(--ink);
  text-align:left; padding:14px 0; border-bottom:1px solid var(--glass-br); transition:color .2s; width:100%;
}
.mobile-menu a:hover, .mobile-menu button:hover{ color:var(--cyan); }
.mobile-menu .mm-cta{ color:var(--lime); border-bottom:none; margin-top:12px; }
.mobile-menu .mm-foot{
  border:none; font-family:var(--fc); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding-top:28px; text-align:left; pointer-events:none; line-height:2;
}

/* ═══ COMPLIANCE / SECURITY ═══ */
.compliance-head{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:end; margin-bottom:48px; }
.compliance-lede{ font-family:var(--fb); font-size:clamp(15px,1.5vw,18px); color:var(--ink-2); line-height:1.7; }
.compliance-lede b{ color:var(--cyan); font-family:var(--fd); font-weight:700; }
.cert-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.cert{
  background:var(--glass); backdrop-filter:blur(12px); border:1px solid var(--glass-br);
  border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:12px;
  transition:transform .3s, border-color .3s, box-shadow .3s; position:relative; overflow:hidden;
}
.cert:hover{ transform:translateY(-4px); border-color:rgba(94,234,212,0.35); box-shadow:0 16px 44px rgba(0,0,0,0.4); }
.cert-badge{
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(45,212,191,0.1); border:1px solid var(--glass-br); flex-shrink:0;
}
.cert-badge svg{ width:24px; height:24px; }
.cert-name{ font-family:var(--fd); font-size:20px; text-transform:uppercase; letter-spacing:-.02em; }
.cert-tag{ font-family:var(--fc); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); }
.cert-desc{ font-family:var(--fb); font-size:13px; color:var(--ink-2); line-height:1.6; }
.sec-points{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:18px; }
.sec-point{ display:flex; flex-direction:column; gap:8px; padding:24px; border-left:2px solid var(--cyan); background:rgba(45,212,191,0.04); border-radius:0 12px 12px 0; }
.sec-point h4{ font-family:var(--fc); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); }
.sec-point p{ font-family:var(--fb); font-size:13px; color:var(--ink-2); line-height:1.6; }

/* ═══ HOW IT WORKS — expanded timeline ═══ */
.how-lede{ font-family:var(--fb); font-size:clamp(15px,1.6vw,19px); color:var(--ink-2); line-height:1.7; max-width:640px; margin-top:20px; }
.timeline{ display:flex; flex-direction:column; margin-top:56px; }
.tl-step{
  display:grid; grid-template-columns:90px 1fr; gap:32px; padding:36px 0;
  border-top:1px solid var(--glass-br); align-items:start;
}
.tl-num{ font-family:var(--fd); font-size:52px; letter-spacing:-.04em; line-height:.9;
  background:linear-gradient(140deg,var(--cyan),var(--lime)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tl-body h3{ font-family:var(--fd); font-size:26px; text-transform:uppercase; letter-spacing:-.02em; margin-bottom:12px; }
.tl-body p{ font-family:var(--fb); font-size:15px; color:var(--ink-2); line-height:1.7; max-width:620px; margin-bottom:16px; }
.tl-meta{ display:flex; gap:10px; flex-wrap:wrap; }
.tl-chip{ font-family:var(--fc); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan);
  padding:5px 11px; border-radius:999px; background:rgba(45,212,191,0.08); border:1px solid var(--glass-br); }

/* ═══ FINE RESPONSIVE PASS ═══ */
@media(max-width:860px){
  .nav-links{ display:none; }
  .nav-burger{ display:flex; }
  .nav{ padding:16px 20px; }
  .nav.scrolled{ padding:12px 20px; }
  .hero{ padding:120px 22px 70px; }
  .page-hero{ padding:130px 22px 60px; }
  .section{ padding:80px 22px; }
  .cta{ padding:0 22px; }
  .cta-inner{ padding:54px 28px; }
  .footer{ padding:54px 22px 32px; }
  .compliance-head{ grid-template-columns:1fr; gap:24px; }
  .cert-grid{ grid-template-columns:1fr; }
  .sec-points{ grid-template-columns:1fr; }
  .footer-top{ flex-direction:column; gap:36px; }
  .footer-cols{ gap:40px; }
  .tl-step{ grid-template-columns:1fr; gap:12px; padding:28px 0; }
  .tl-num{ font-size:42px; }
}
@media(max-width:520px){
  .hero h1{ font-size:clamp(40px,13vw,64px); }
  .mobile-menu a, .mobile-menu button{ font-size:28px; }
  .cta-inner{ padding:40px 20px; }
  .modal{ padding:32px 22px; }
  .modal h3{ font-size:26px; margin-bottom:22px; }
  .compat{ padding:24px 22px; gap:18px; }
  .compat-items{ gap:18px 22px; }
  .tst-card{ padding:32px 24px; }
  .tst-stat-v{ font-size:42px; min-width:84px; }
  .section-title{ font-size:clamp(30px,9vw,44px); }
}