/* ============================= FONTS ============================= */
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/poppins-300.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('../fonts/poppins-800.woff2') format('woff2');
}

/* ============================= TOKENS ============================= */
:root{
  /* Navy */
  --color-navy-900:#021826;
  --color-navy-700:#04243D;
  --color-navy-500:#0C3E5E;
  --color-navy-100:#E0EAF0;

  /* Cyan (accent) */
  --color-cyan-600:#018F8F;
  --color-cyan-500:#01C5C5;
  --color-cyan-100:#D7FAFA;
  --color-cyan-900:#013D3D;

  /* Neutrals */
  --color-gray-900:#111827;
  --color-gray-600:#4B5563;
  --color-gray-300:#D1D5DB;
  --color-gray-100:#F3F4F6;
  --color-white:#FFFFFF;

  /* Semantic */
  --color-success:#16A34A;
  --color-warning:#F59E0B;
  --color-error:#DC2626;
  --color-info:#2563EB;

  /* Type — Poppins per brand spec: headings Extra Bold, sub-headings Semi Bold, body Regular/Light */
  --font-family:'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display:var(--font-family);
  --font-body:var(--font-family);
  --font-mono:var(--font-family);
  --fw-heading:800;
  --fw-subheading:600;
  --fw-body:400;
  --fw-body-light:300;

  --fs-hero: clamp(2.4rem, 4.6vw + 1rem, 4.6rem);
  --fs-h2: clamp(1.9rem, 2.6vw + 1rem, 3rem);
  --fs-h3: clamp(1.3rem, 1vw + 1rem, 1.7rem);
  --fs-lead: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;

  --container: 1240px;
  --pad: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(.16,.84,.44,1);
}

/* ============================= RESET ============================= */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}
body{margin:0;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
h1,h2,h3,p,figure{margin:0;}
ul{margin:0;padding:0;list-style:none;}

body{
  font-family:var(--font-body);
  font-weight:var(--fw-body);
  color:var(--color-gray-900);
  background:var(--color-white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

:focus-visible{
  outline:2.5px solid var(--color-cyan-500);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--pad);
}
.container-narrow{
  max-width:960px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.11em;
  text-transform:uppercase;
  font-weight:var(--fw-subheading);
  display:inline-flex;
  align-items:center;
  gap:0.55em;
}
.eyebrow::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--color-cyan-500);
  box-shadow:0 0 0 3px rgba(1,197,197,0.25);
  flex:none;
}

.section{
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.section-tight{ padding-block: clamp(2.25rem, 5vw, 4rem); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5em;
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.98rem;
  padding:0.9em 1.7em;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .35s var(--ease), background-color .2s ease, border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0);}
.btn-primary{
  background:var(--color-cyan-500);
  color:var(--color-cyan-900);
}
.btn-primary:hover{background:var(--color-cyan-600); color:var(--color-white);}
.btn-ghost-dark{
  background:transparent;
  border-color:rgba(255,255,255,0.35);
  color:var(--color-white);
}
.btn-ghost-dark:hover{border-color:var(--color-cyan-500); color:var(--color-cyan-500);}
.btn-ghost-light{
  background:transparent;
  border-color:var(--color-navy-700);
  color:var(--color-navy-700);
}
.btn-ghost-light:hover{background:var(--color-navy-700); color:var(--color-white);}
.btn-block{width:100%;}
.btn[disabled]{opacity:0.5; cursor:not-allowed; transform:none !important;}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:0.4em;
  font-weight:600;
  font-size:0.95rem;
  border-bottom:1.5px solid currentColor;
  padding-bottom:2px;
}
.link-arrow svg{transition:transform .25s var(--ease);}
.link-arrow:hover svg{transform:translateX(4px);}

/* ============================= NAV ============================= */
.nav{
  position:sticky;
  top:0;
  z-index:220;
  background:rgba(4,36,61,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:box-shadow .3s ease;
}
.nav.is-scrolled{box-shadow:0 8px 30px rgba(2,24,38,0.35);}
.nav-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:0.9rem;
}
.nav-logo img{height:26px;width:auto;}
.nav-links{
  display:flex;
  align-items:center;
  gap:2.1rem;
  font-size:0.95rem;
  font-weight:var(--fw-body);
}
.nav-links a{
  color:rgba(255,255,255,0.78);
  position:relative;
  padding-block:0.3rem;
}
.nav-links a:hover, .nav-links a.is-active{color:var(--color-white);}
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; bottom:-2px;
  width:0; height:2px;
  background:var(--color-cyan-500);
  transition:width .25s var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-active::after{width:100%;}
.nav-cta{display:flex; align-items:center; gap:1.25rem;}
.nav-cta .btn{padding:0.7em 1.4em; font-size:0.9rem;}
.nav-toggle{
  display:none;
  position:relative;
  width:40px; height:40px;
  background:none; border:none; padding:0; cursor:pointer;
  z-index:210;
}
.nav-toggle-bars{
  position:absolute; top:50%; left:50%;
  width:22px; height:16px;
  transform:translate(-50%,-50%);
}
.nav-toggle-bars span{
  position:absolute;
  left:0; width:100%; height:2px;
  border-radius:2px;
  background:var(--color-white);
  transition:top .3s var(--ease), transform .3s var(--ease), opacity .2s ease;
}
.nav-toggle-bars span:nth-child(1){top:0;}
.nav-toggle-bars span:nth-child(2){top:7px;}
.nav-toggle-bars span:nth-child(3){top:14px;}
.nav-toggle.is-open .nav-toggle-bars span:nth-child(1){top:7px; transform:rotate(45deg);}
.nav-toggle.is-open .nav-toggle-bars span:nth-child(2){opacity:0;}
.nav-toggle.is-open .nav-toggle-bars span:nth-child(3){top:7px; transform:rotate(-45deg);}

.nav-backdrop{
  position:fixed; inset:0;
  background:rgba(2,10,18,0.6);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  opacity:0; visibility:hidden;
  transition:opacity .35s ease, visibility 0s linear .35s;
  z-index:150;
}
.nav-backdrop.is-open{
  opacity:1; visibility:visible;
  transition:opacity .35s ease;
}

@media (max-width:940px){
  /* backdrop-filter on .nav makes it a containing block for position:fixed
     descendants, which would collapse .nav-links to the height of the navbar
     itself instead of the viewport — drop it here so the drawer positions
     against the viewport as intended. */
  .nav{backdrop-filter:none; -webkit-backdrop-filter:none;}
  .nav-links{
    position:fixed;
    top:64px; right:0; bottom:0;
    width:min(84vw, 360px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0.25rem;
    background:linear-gradient(165deg, var(--color-navy-500), var(--color-navy-900) 70%);
    padding:1.5rem 1rem 2.5rem;
    font-size:1.05rem;
    border-top-left-radius:var(--radius-lg);
    border-bottom-left-radius:var(--radius-lg);
    box-shadow:-24px 0 60px rgba(2,10,18,0.5);
    transform:translateX(100%);
    transition:transform .4s var(--ease);
    overflow-y:auto;
    z-index:200;
  }
  .nav-links.is-open{transform:translateX(0);}
  .nav-links li{list-style:none;}
  .nav-links a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:1rem 1rem;
    border-radius:12px;
    opacity:0;
    transform:translateY(10px);
    transition:opacity .35s ease, transform .35s ease, background-color .2s ease, color .2s ease;
  }
  .nav-links.is-open a{opacity:1; transform:translateY(0);}
  .nav-links li:nth-child(1) a{transition-delay:.06s;}
  .nav-links li:nth-child(2) a{transition-delay:.11s;}
  .nav-links li:nth-child(3) a{transition-delay:.16s;}
  .nav-links li:nth-child(4) a{transition-delay:.21s;}
  .nav-links li:nth-child(5) a{transition-delay:.26s;}
  .nav-links a:hover{background:rgba(255,255,255,0.07);}
  .nav-links a.is-active{
    background:rgba(1,197,197,0.16);
    color:var(--color-white);
    font-weight:var(--fw-subheading);
  }
  .nav-links a::after{
    content:"";
    position:static;
    width:7px; height:7px;
    background:none;
    border-right:2px solid rgba(255,255,255,0.4);
    border-top:2px solid rgba(255,255,255,0.4);
    transform:rotate(45deg);
    transition:transform .25s var(--ease), border-color .2s ease;
    flex-shrink:0;
  }
  .nav-links a:hover::after, .nav-links a.is-active::after{
    width:7px; height:7px;
    background:none;
    transform:translate(3px,0) rotate(45deg);
    border-color:var(--color-cyan-500);
  }
  .nav-toggle{display:block;}
}

/* ============================= PAGE HERO (interior pages) ============================= */
.page-hero{
  position:relative;
  background:
    radial-gradient(ellipse 900px 500px at 82% 12%, rgba(1,197,197,0.14), transparent 60%),
    linear-gradient(180deg, var(--color-navy-900), var(--color-navy-700) 65%, var(--color-navy-700));
  color:var(--color-white);
  overflow:hidden;
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, black, transparent 75%);
  pointer-events:none;
}
.page-hero-inner{position:relative; max-width:60rem;}
.page-hero .eyebrow{color:var(--color-cyan-500);}
.page-hero h1{
  font-family:var(--font-display);
  font-weight:var(--fw-heading);
  font-size:clamp(2.1rem, 3.4vw + 1rem, 3.6rem);
  line-height:1.04;
  letter-spacing:-0.02em;
  margin-block:0.5em 0.45em;
}
.page-hero p{
  font-size:var(--fs-lead);
  font-weight:var(--fw-body-light);
  color:rgba(255,255,255,0.72);
  max-width:36rem;
}
.page-hero .hero-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem;}
.breadcrumb{
  font-size:0.85rem;
  color:rgba(255,255,255,0.5);
  margin-bottom:1.25rem;
}
.breadcrumb a:hover{color:var(--color-cyan-500);}

/* ============================= HERO (home) ============================= */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse 900px 500px at 82% 12%, rgba(1,197,197,0.16), transparent 60%),
    linear-gradient(180deg, var(--color-navy-900), var(--color-navy-700) 65%, var(--color-navy-700));
  color:var(--color-white);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:min(46rem, 78vh);
  padding-top: clamp(3rem, 6vw, 5rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, black, transparent 75%);
  pointer-events:none;
}
.hero-inner{
  position:relative;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.hero-copy .eyebrow{color:var(--color-cyan-500);}
.hero-copy h1{
  font-family:var(--font-display);
  font-weight:var(--fw-heading);
  font-size:var(--fs-hero);
  line-height:1.02;
  letter-spacing:-0.02em;
  margin-block:0.5em 0.45em;
}
.hero-copy h1 em{
  font-style:normal;
  color:var(--color-cyan-500);
}
.hero-copy p{
  font-size:var(--fs-lead);
  font-weight:var(--fw-body-light);
  color:rgba(255,255,255,0.72);
  max-width:34rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:2.1rem;
}

.floating-cta{
  position:fixed;
  right:1.5rem;
  bottom:1.5rem;
  z-index:120;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:0.75rem;
}
.floating-cta .btn{
  white-space:nowrap;
  isolation:isolate;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 12px 32px rgba(2,24,38,0.28);
}
.floating-cta .btn-primary{
  background:rgba(1,197,197,0.72);
  border-color:rgba(255,255,255,0.35);
}
.floating-cta .btn-primary:hover{background:rgba(1,143,143,0.82);}
.floating-cta .btn-ghost-dark{
  background:rgba(4,36,61,0.82);
  border-color:rgba(255,255,255,0.18);
}
.floating-cta .btn-ghost-dark:hover{background:rgba(4,36,61,0.94); border-color:var(--color-cyan-500); color:var(--color-cyan-500);}
@media (max-width:640px){
  .floating-cta{
    left:1rem;
    right:1rem;
    bottom:1rem;
  }
  .floating-cta .btn{width:100%;}
}

/* ---- unlock-profile card stack (signature element) ---- */
.stack-wrap{
  position:relative;
  height:min(400px, 58vw);
  display:flex;
  align-items:center;
  justify-content:center;
}
.stack-glow{
  position:absolute;
  width:70%; height:70%;
  background:radial-gradient(circle, rgba(1,197,197,0.30), transparent 70%);
  filter:blur(30px);
  pointer-events:none;
}
.unlock-panel{
  position:relative;
  width:min(320px, 84%);
  height:100%;
  display:flex;
  flex-direction:column;
}
.unlock-meter{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--font-mono);
  font-size:0.78rem;
  color:rgba(255,255,255,0.55);
  padding:0.6rem 0.9rem;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:999px;
  margin-bottom:1rem;
  background:rgba(255,255,255,0.03);
}
.unlock-meter strong{
  color:var(--color-cyan-500);
  font-weight:var(--fw-subheading);
}
.unlock-stack{
  position:relative;
  flex:1;
}
.unlock-card{
  position:absolute;
  inset:0 0 auto 0;
  top:calc(var(--i) * 14px);
  margin-inline:auto;
  width:100%;
  max-width:320px;
  background:var(--color-white);
  border-radius:var(--radius-md);
  box-shadow:0 24px 45px -12px rgba(2,24,38,0.55);
  padding:1.25rem;
  color:var(--color-gray-900);
  transform:scale(calc(1 - var(--i) * 0.045));
  transform-origin:top center;
  z-index:calc(10 - var(--i));
  transition:transform .6s var(--ease), opacity .6s var(--ease), top .6s var(--ease);
}
.unlock-card.is-leaving{
  transform:translateY(-18px) scale(calc(1 - var(--i) * 0.045));
  opacity:0;
}
.unlock-card-top{
  display:flex;
  align-items:center;
  gap:0.85rem;
}
.unlock-photo-wrap{
  position:relative;
  width:52px;height:52px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--color-navy-100);
}
.unlock-photo-wrap img{
  width:100%;height:100%;object-fit:cover;
  filter:blur(9px) saturate(0.7) brightness(0.95);
  transform:scale(1.15);
  transition:filter .7s var(--ease);
}
.unlock-card.is-unlocking .unlock-photo-wrap img{filter:blur(0) saturate(1) brightness(1);}
.unlock-name{position:relative; font-weight:var(--fw-subheading); font-size:1.02rem; height:1.3em; overflow:hidden;}
.unlock-name span{
  position:absolute; inset:0;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.unlock-name .locked{opacity:1; transform:translateY(0); letter-spacing:0.1em; color:var(--color-gray-300);}
.unlock-name .real{opacity:0; transform:translateY(6px);}
.unlock-card.is-unlocking .unlock-name .locked{opacity:0; transform:translateY(-6px);}
.unlock-card.is-unlocking .unlock-name .real{opacity:1; transform:translateY(0);}
.unlock-card-role{font-size:0.85rem; color:var(--color-gray-600);}
.unlock-badge{
  margin-left:auto;
  font-family:var(--font-mono);
  font-weight:var(--fw-subheading);
  font-size:0.72rem;
  padding:0.35em 0.6em;
  border-radius:8px;
  white-space:nowrap;
  background:var(--color-navy-100);
  color:var(--color-navy-700);
  transition:background-color .4s ease, color .4s ease;
}
.unlock-card.is-unlocking .unlock-badge{
  background:var(--color-cyan-100);
  color:var(--color-cyan-900);
}
.unlock-card-tags{
  display:flex; flex-wrap:wrap; gap:0.4rem;
  margin-top:1rem;
}
.unlock-card-tags span{
  font-size:0.74rem;
  font-weight:var(--fw-subheading);
  background:var(--color-navy-100);
  color:var(--color-navy-700);
  padding:0.3em 0.65em;
  border-radius:999px;
}
.unlock-card-action{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:1.1rem;
  padding-top:0.95rem;
  border-top:1px dashed var(--color-gray-300);
  font-family:var(--font-mono);
  font-size:0.76rem;
  color:var(--color-gray-600);
}
.unlock-card-action .credit{color:var(--color-cyan-600); font-weight:var(--fw-subheading);}
.unlock-card.is-unlocking .unlock-card-action .credit::before{content:"\2713 \A0";}

/* ============================= STATS BAR ============================= */
.stats{
  background:var(--color-gray-100);
  color:var(--color-gray-900);
}
.stats-inner{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  padding-block:clamp(1.75rem,4vw,2.5rem);
}
.stat{
  padding-inline:1.25rem;
  border-left:1px solid var(--color-gray-300);
  text-align:left;
}
.stat:first-child{border-left:none; padding-left:0;}
.stat-num{
  font-family:var(--font-mono);
  font-weight:var(--fw-heading);
  font-size:clamp(1.5rem, 2.6vw, 2.35rem);
  color:var(--color-navy-700);
  letter-spacing:-0.01em;
}
.stat-label{
  font-size:0.83rem;
  color:var(--color-gray-600);
  margin-top:0.35rem;
  max-width:18ch;
}
@media (max-width:880px){
  .stats-inner{grid-template-columns:repeat(2,1fr); gap:1.5rem 0;}
  .stat:nth-child(3){border-left:none;}
}

/* ============================= REVEAL ============================= */
.reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{opacity:1; transform:translateY(0);}

/* ============================= SECTION HEADS ============================= */
.section-head{
  max-width:42rem;
  margin-bottom:clamp(2.25rem, 5vw, 3.5rem);
}
.section-head .eyebrow{color:var(--color-cyan-600);}
.section-head h2{
  font-family:var(--font-display);
  font-weight:var(--fw-heading);
  font-size:var(--fs-h2);
  letter-spacing:-0.015em;
  line-height:1.05;
  color:var(--color-navy-700);
  margin-top:0.6em;
}
.section-head p{
  font-size:var(--fs-lead);
  font-weight:var(--fw-body-light);
  color:var(--color-gray-600);
  margin-top:0.9em;
}
.section-head.on-dark h2{color:var(--color-white);}
.section-head.on-dark p{color:rgba(255,255,255,0.7);}
.section-head.center{margin-inline:auto; text-align:center;}

/* ============================= TABS ============================= */
.tabs{
  display:inline-flex;
  background:var(--color-gray-100);
  padding:0.35rem;
  border-radius:999px;
  gap:0.25rem;
  margin-bottom:2.75rem;
  flex-wrap:wrap;
}
.tab-btn{
  border:none; background:none;
  padding:0.65em 1.4em;
  border-radius:999px;
  font-weight:var(--fw-subheading);
  font-size:0.92rem;
  color:var(--color-gray-600);
  cursor:pointer;
  transition:background-color .25s ease, color .25s ease;
}
.tab-btn.is-active{
  background:var(--color-navy-700);
  color:var(--color-white);
}
.tab-panel{display:none;}
.tab-panel.is-active{display:block;}

/* ============================= STEPS ============================= */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2rem;
}
.steps.steps-4{grid-template-columns:repeat(4,1fr);}
.step{
  border-top:2px solid var(--color-navy-700);
  padding-top:1.4rem;
}
.step-num{
  font-family:var(--font-mono);
  font-weight:var(--fw-subheading);
  color:var(--color-cyan-600);
  font-size:0.85rem;
  letter-spacing:0.05em;
}
.step h3{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:var(--fw-subheading);
  margin-top:0.6rem;
  color:var(--color-navy-700);
}
.step p{
  margin-top:0.6rem;
  color:var(--color-gray-600);
  font-size:0.98rem;
}
@media (max-width:820px){
  .steps, .steps.steps-4{grid-template-columns:1fr; gap:1.75rem;}
}
@media (max-width:1080px) and (min-width:821px){
  .steps.steps-4{grid-template-columns:repeat(2,1fr); gap:1.75rem 2rem;}
}

/* ============================= PHOTO BANNER ============================= */
.photo-banner{
  position:relative;
  color:var(--color-white);
  background:#0a2338;
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
.photo-banner::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(2,24,38,0.6), rgba(2,24,38,0.9)),
    linear-gradient(90deg, rgba(4,36,61,0.65), rgba(4,36,61,0.2));
  z-index:-1;
}
.photo-banner-inner{max-width:56rem;}
.chip-row{
  display:flex; flex-wrap:wrap; gap:0.7rem;
  margin-top:2.25rem;
}
.chip{
  border:1.5px solid rgba(255,255,255,0.28);
  padding:0.6em 1.15em;
  border-radius:999px;
  font-size:0.92rem;
  font-weight:var(--fw-subheading);
  transition:border-color .2s ease, background-color .2s ease;
}
.chip:hover{border-color:var(--color-cyan-500); background:rgba(1,197,197,0.1);}

/* ============================= FEATURE GRID ============================= */
.features{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1.75rem;
}
.features.features-3{grid-template-columns:repeat(3,1fr);}
.feature-card{
  border:1px solid var(--color-gray-300);
  border-radius:var(--radius-md);
  padding:2rem;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.feature-card:hover{
  border-color:var(--color-cyan-500);
  box-shadow:0 18px 40px -20px rgba(4,36,61,0.25);
  transform:translateY(-3px);
}
.feature-icon{
  width:48px;height:48px;
  border-radius:12px;
  background:var(--color-navy-100);
  color:var(--color-navy-700);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem;
}
.feature-icon svg{width:24px;height:24px;}
.feature-card h3{
  font-family:var(--font-display);
  font-weight:var(--fw-subheading);
  font-size:1.2rem;
  color:var(--color-navy-700);
}
.feature-card p{
  margin-top:0.6rem;
  color:var(--color-gray-600);
  font-size:0.97rem;
}
@media (max-width:760px){
  .features, .features.features-3{grid-template-columns:1fr;}
}
@media (max-width:1000px) and (min-width:761px){
  .features.features-3{grid-template-columns:repeat(2,1fr);}
}

/* ============================= COMPARISON (cost of status quo) ============================= */
.compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.75rem;
}
.compare-card{
  border-radius:var(--radius-lg);
  padding:2.25rem;
}
.compare-card.old{
  background:var(--color-gray-100);
  border:1px solid var(--color-gray-300);
}
.compare-card.new{
  background:var(--color-navy-700);
  color:var(--color-white);
  position:relative;
  overflow:hidden;
}
.compare-card.new::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 460px 300px at 100% 0%, rgba(1,197,197,0.22), transparent 65%);
  pointer-events:none;
}
.compare-label{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:var(--fw-subheading);
  color:var(--color-gray-600);
}
.compare-card.new .compare-label{color:var(--color-cyan-500);}
.compare-figure{
  font-family:var(--font-mono);
  font-weight:var(--fw-heading);
  font-size:clamp(2rem, 3vw, 2.75rem);
  margin-top:0.5rem;
  color:var(--color-error);
}
.compare-card.new .compare-figure{color:var(--color-cyan-500);}
.compare-card p.compare-desc{
  margin-top:0.5rem;
  font-size:0.95rem;
  color:var(--color-gray-600);
}
.compare-card.new p.compare-desc{color:rgba(255,255,255,0.7);}
.compare-list{margin-top:1.5rem; display:flex; flex-direction:column; gap:0.75rem;}
.compare-list li{
  display:flex; align-items:flex-start; gap:0.6rem;
  font-size:0.93rem;
  position:relative;
}
.compare-list svg{width:16px;height:16px; flex:none; margin-top:0.2em;}
.compare-card.old .compare-list svg{color:var(--color-error);}
.compare-card.new .compare-list svg{color:var(--color-cyan-500);}
@media (max-width:760px){
  .compare{grid-template-columns:1fr;}
}

/* ============================= PRICING ============================= */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
  align-items:stretch;
}
.price-card{
  border:1px solid var(--color-gray-300);
  border-radius:var(--radius-lg);
  padding:2rem;
  display:flex;
  flex-direction:column;
  position:relative;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.price-card:hover{transform:translateY(-4px); box-shadow:0 20px 45px -22px rgba(4,36,61,0.3);}
.price-card.is-popular{
  border-color:var(--color-cyan-500);
  border-width:2px;
  background:linear-gradient(180deg, var(--color-cyan-100), var(--color-white) 30%);
}
.price-badge{
  position:absolute; top:-13px; left:2rem;
  background:var(--color-cyan-500);
  color:var(--color-cyan-900);
  font-family:var(--font-mono);
  font-weight:var(--fw-subheading);
  font-size:0.72rem;
  padding:0.3em 0.8em;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.price-name{
  font-family:var(--font-display);
  font-weight:var(--fw-subheading);
  font-size:1.3rem;
  color:var(--color-navy-700);
}
.price-unlocks{
  font-family:var(--font-mono);
  font-weight:var(--fw-heading);
  font-size:1.6rem;
  color:var(--color-navy-700);
  margin-top:0.85rem;
}
.price-unlocks span{
  font-family:var(--font-body);
  font-weight:var(--fw-body);
  font-size:0.85rem;
  color:var(--color-gray-600);
  display:block;
  margin-top:0.15rem;
}
.price-features{
  margin-top:1.5rem;
  display:flex; flex-direction:column; gap:0.7rem;
  flex:1;
}
.price-features li{
  display:flex; align-items:flex-start; gap:0.55rem;
  font-size:0.92rem;
  color:var(--color-gray-600);
}
.price-features svg{width:15px; height:15px; color:var(--color-cyan-600); flex:none; margin-top:0.25em;}
.price-card .btn{margin-top:1.75rem;}
@media (max-width:900px){
  .pricing-grid{grid-template-columns:1fr; max-width:26rem; margin-inline:auto;}
}

.membership-card{
  margin-top:2.5rem;
  border-radius:var(--radius-lg);
  background:var(--color-navy-700);
  color:var(--color-white);
  padding:clamp(2rem, 4vw, 3rem);
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:2rem;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.membership-card::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 500px 320px at 100% 100%, rgba(1,197,197,0.2), transparent 65%);
}
.membership-card h3{
  font-family:var(--font-display);
  font-weight:var(--fw-heading);
  font-size:1.6rem;
  position:relative;
}
.membership-card p{
  margin-top:0.75rem;
  color:rgba(255,255,255,0.72);
  position:relative;
  max-width:34ch;
}
.membership-perks{
  position:relative;
  display:flex; flex-direction:column; gap:0.65rem;
}
.membership-perks li{
  display:flex; align-items:flex-start; gap:0.55rem;
  font-size:0.92rem;
  color:rgba(255,255,255,0.85);
}
.membership-perks svg{width:15px; height:15px; color:var(--color-cyan-500); flex:none; margin-top:0.25em;}
.membership-card .btn{margin-top:1.5rem; position:relative;}
@media (max-width:760px){
  .membership-card{grid-template-columns:1fr;}
}

/* ============================= FAQ ============================= */
.faq{max-width:100%;}
.faq-item{
  border-bottom:1px solid var(--color-gray-300);
}
.faq-item summary{
  padding-block:1.25rem;
  font-family:var(--font-display);
  font-weight:var(--fw-subheading);
  font-size:1.02rem;
  color:var(--color-navy-700);
  cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{
  flex:none;
  width:22px;height:22px;
  border-radius:50%;
  border:1.5px solid var(--color-gray-300);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition:transform .3s var(--ease), border-color .2s ease;
}
.faq-item summary .plus::before, .faq-item summary .plus::after{
  content:""; position:absolute; background:var(--color-navy-700);
}
.faq-item summary .plus::before{width:10px;height:1.5px;}
.faq-item summary .plus::after{width:1.5px;height:10px;}
.faq-item[open] summary .plus{transform:rotate(135deg); border-color:var(--color-cyan-500);}
.faq-item p{
  padding-bottom:1.35rem;
  color:var(--color-gray-600);
  font-size:0.96rem;
  max-width:38rem;
}
.faq-item .skill-chips{
  display:flex; flex-wrap:wrap; gap:0.55rem;
  padding-bottom:1.5rem;
}
.chip-light{
  border:1.5px solid var(--color-gray-300);
  background:var(--color-white);
  color:var(--color-navy-700);
  padding:0.5em 1em;
  border-radius:999px;
  font-size:0.86rem;
  font-weight:var(--fw-subheading);
  white-space:nowrap;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.chip-light:hover{border-color:var(--color-cyan-500); background:var(--color-cyan-100); color:var(--color-cyan-900);}

/* ============================= DASHBOARD / ENTERPRISE ============================= */
.dash{
  position:relative;
  color:var(--color-white);
  background:linear-gradient(180deg, rgba(2,24,38,0.92), rgba(2,24,38,0.97)), center/cover no-repeat;
  isolation:isolate;
}
.dash-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:center;
}
.dash-copy p{color:rgba(255,255,255,0.7); font-size:var(--fs-lead); font-weight:var(--fw-body-light); margin-top:1rem; max-width:32rem;}
.dash-copy .link-arrow{color:var(--color-cyan-500); margin-top:1.75rem;}
.dash-card{
  background:rgba(11,42,66,0.75);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  backdrop-filter:blur(8px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.5);
}
.dash-card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:1.25rem;
  border-bottom:1px solid rgba(255,255,255,0.1);
  font-size:0.85rem;
  color:rgba(255,255,255,0.6);
}
.live-dot{
  display:inline-flex; align-items:center; gap:0.45em;
  color:var(--color-cyan-500);
  font-family:var(--font-mono);
  font-size:0.75rem;
}
.live-dot::before{
  content:"";
  width:7px;height:7px;border-radius:50%;
  background:var(--color-cyan-500);
  animation:pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(1,197,197,0.5);}
  50%{box-shadow:0 0 0 6px rgba(1,197,197,0);}
}
.dash-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
  padding-top:1.4rem;
}
.dash-metric-num{
  font-family:var(--font-mono);
  font-weight:var(--fw-heading);
  font-size:1.6rem;
  color:var(--color-white);
}
.dash-metric-label{
  font-size:0.78rem;
  color:rgba(255,255,255,0.55);
  margin-top:0.3rem;
}
.dash-bars{
  display:flex; align-items:flex-end; gap:0.4rem;
  height:56px; margin-top:0.6rem;
}
.dash-bars span{
  flex:1;
  background:linear-gradient(180deg, var(--color-cyan-500), rgba(1,197,197,0.25));
  border-radius:3px 3px 0 0;
}

/* ============================= TESTIMONIAL ============================= */
.testimonial{
  background:var(--color-navy-100);
}
.testimonial-inner{
  max-width:52rem;
  margin-inline:auto;
  text-align:center;
}
.quote-mark{
  font-family:var(--font-display);
  font-size:4.5rem;
  color:var(--color-cyan-500);
  line-height:1;
}
.testimonial blockquote{
  font-family:var(--font-display);
  font-weight:var(--fw-subheading);
  font-size:clamp(1.4rem, 2.2vw, 2rem);
  color:var(--color-navy-700);
  line-height:1.35;
  letter-spacing:-0.01em;
}
.testimonial-person{
  display:flex; align-items:center; justify-content:center;
  gap:0.85rem;
  margin-top:2rem;
}
.testimonial-person img{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
}
.testimonial-person .name{font-weight:var(--fw-subheading); color:var(--color-navy-700); font-size:0.95rem;}
.testimonial-person .role{font-size:0.85rem; color:var(--color-gray-600);}

/* ============================= UPDATES / BLOG ============================= */
.updates-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.75rem;
}
.update-card{
  border:1px solid var(--color-gray-300);
  border-radius:var(--radius-md);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.update-card:hover{border-color:var(--color-cyan-500); box-shadow:0 18px 40px -20px rgba(4,36,61,0.25); transform:translateY(-3px);}
.update-card-tag{
  padding:1.5rem 1.5rem 0;
  font-family:var(--font-mono);
  font-size:0.74rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--color-cyan-600);
  font-weight:var(--fw-subheading);
}
.update-card-body{padding:0.85rem 1.5rem 1.75rem; flex:1; display:flex; flex-direction:column;}
.update-card h3{
  font-family:var(--font-display);
  font-weight:var(--fw-subheading);
  font-size:1.12rem;
  color:var(--color-navy-700);
  line-height:1.3;
}
.update-card p{
  margin-top:0.65rem;
  font-size:0.92rem;
  color:var(--color-gray-600);
  flex:1;
}
.update-card .update-meta{
  margin-top:1.1rem;
  font-size:0.78rem;
  color:var(--color-gray-600);
  display:flex; justify-content:space-between; align-items:center;
}
.update-featured{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:2.5rem;
  align-items:center;
  border:1px solid var(--color-gray-300);
  border-radius:var(--radius-lg);
  padding:2.5rem;
  margin-bottom:3rem;
}
.update-featured .eyebrow{color:var(--color-cyan-600);}
.update-featured h2{
  font-family:var(--font-display);
  font-weight:var(--fw-heading);
  font-size:clamp(1.5rem,2vw + 1rem,2.1rem);
  color:var(--color-navy-700);
  margin-top:0.6rem;
  line-height:1.15;
}
.update-featured p{margin-top:0.85rem; color:var(--color-gray-600);}
.update-featured-visual{
  border-radius:var(--radius-md);
  min-height:220px;
  background:linear-gradient(155deg, var(--color-navy-700), var(--color-navy-900));
  display:flex; align-items:center; justify-content:center;
  position:relative;
  overflow:hidden;
}
.update-featured-visual::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(1,197,197,0.35) 1.5px, transparent 1.5px);
  background-size:20px 20px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 75%);
}
.update-featured-visual svg{width:64px;height:64px; color:var(--color-cyan-500); position:relative;}
@media (max-width:900px){
  .updates-grid{grid-template-columns:1fr;}
  .update-featured{grid-template-columns:1fr;}
}
@media (max-width:1100px) and (min-width:901px){
  .updates-grid{grid-template-columns:repeat(2,1fr);}
}

/* ============================= FORMS ============================= */
.form-shell{
  border:1px solid var(--color-gray-300);
  border-radius:var(--radius-lg);
  padding:clamp(1.75rem, 4vw, 2.75rem);
}
.path-toggle{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:2.5rem;
}
.path-option{
  border:1.5px solid var(--color-gray-300);
  border-radius:var(--radius-md);
  padding:1.5rem;
  cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease;
  background:none;
  text-align:left;
  font:inherit;
  color:inherit;
}
.path-option h3{
  font-family:var(--font-display);
  font-weight:var(--fw-subheading);
  font-size:1.05rem;
  color:var(--color-navy-700);
}
.path-option p{margin-top:0.5rem; font-size:0.9rem; color:var(--color-gray-600);}
.path-option.is-active{
  border-color:var(--color-cyan-500);
  background:var(--color-cyan-100);
  box-shadow:0 0 0 1px var(--color-cyan-500) inset;
}
@media (max-width:700px){.path-toggle{grid-template-columns:1fr;}}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.25rem;
}
.form-grid .full{grid-column:1 / -1;}
.field{display:flex; flex-direction:column; gap:0.45rem; min-width:0;}
.field label{
  font-size:0.85rem;
  font-weight:var(--fw-subheading);
  color:var(--color-navy-700);
}
.field .optional{font-weight:var(--fw-body); color:var(--color-gray-600);}
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea{
  font:inherit;
  font-size:0.95rem;
  padding:0.75em 0.9em;
  border:1.5px solid var(--color-gray-300);
  border-radius:10px;
  background:var(--color-white);
  color:var(--color-gray-900);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--color-cyan-500);
  box-shadow:0 0 0 3px rgba(1,197,197,0.18);
}
.field textarea{resize:vertical; min-height:110px;}
.field-file{
  border:1.5px dashed var(--color-gray-300);
  border-radius:10px;
  padding:1.5rem;
  text-align:center;
  font-size:0.88rem;
  color:var(--color-gray-600);
  cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease;
}
.field-file:hover{border-color:var(--color-cyan-500); background:var(--color-cyan-100);}
.field-file input{display:none;}
.checkbox-row{
  display:flex; align-items:flex-start; gap:0.6rem;
  font-size:0.85rem;
  color:var(--color-gray-600);
}
.checkbox-row input{
  width:16px;
  height:16px;
  flex-shrink:0;
  margin-top:0.2rem;
  accent-color:var(--color-cyan-500);
}
.checkbox-row a{color:var(--color-navy-700); text-decoration:underline;}
.form-actions{margin-top:0.5rem;}
.form-note.is-success{color:var(--color-success); font-weight:var(--fw-subheading);}
.form-note.is-error{color:var(--color-error); font-weight:var(--fw-subheading);}
@media (max-width:700px){
  .form-grid{grid-template-columns:1fr;}
}

/* ============================= CONTACT ============================= */
.contact-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(2rem, 5vw, 3.5rem);
  align-items:start;
}
.contact-detail{
  display:flex; gap:1rem;
  padding-block:1.25rem;
  border-bottom:1px solid var(--color-gray-300);
}
.contact-detail:first-child{padding-top:0;}
.contact-detail-icon{
  width:40px;height:40px; flex:none;
  border-radius:10px;
  background:var(--color-navy-100);
  color:var(--color-navy-700);
  display:flex; align-items:center; justify-content:center;
}
.contact-detail-icon svg{width:19px;height:19px;}
.contact-detail h3{
  font-family:var(--font-display);
  font-weight:var(--fw-subheading);
  font-size:0.98rem;
  color:var(--color-navy-700);
}
.contact-detail p, .contact-detail a{
  margin-top:0.3rem;
  font-size:0.92rem;
  color:var(--color-gray-600);
  display:block;
}
.contact-detail a:hover{color:var(--color-cyan-600);}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
}

/* ============================= FINAL CTA ============================= */
.cta-band{
  position:relative;
  background:var(--color-navy-700);
  color:var(--color-white);
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.09) 1.5px, transparent 1.5px);
  background-size:22px 22px;
  mask-image:radial-gradient(ellipse 70% 100% at 50% 50%, black, transparent 75%);
}
.cta-inner{
  position:relative;
  text-align:center;
  max-width:38rem;
  margin-inline:auto;
}
.cta-inner h2{
  font-family:var(--font-display);
  font-weight:var(--fw-heading);
  font-size:var(--fs-h2);
  letter-spacing:-0.015em;
}
.cta-inner p{
  margin-top:1rem;
  color:rgba(255,255,255,0.7);
  font-size:var(--fs-lead);
  font-weight:var(--fw-body-light);
}
.cta-actions{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:1rem; margin-top:2.25rem;
}

/* ============================= FOOTER ============================= */
.site-footer{
  background:var(--color-navy-900);
  color:rgba(255,255,255,0.65);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
}
.footer-top{
  display:grid;
  grid-template-columns:1.6fr repeat(3, 1fr);
  gap:2.5rem;
  padding-bottom:3rem;
}
.footer-brand img{height:24px;}
.footer-brand p{
  margin-top:1.1rem;
  font-size:0.9rem;
  max-width:26ch;
  color:rgba(255,255,255,0.5);
}
.footer-social{
  display:flex; gap:0.75rem;
  margin-top:1.5rem;
}
.footer-social a{
  width:34px;height:34px;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .2s ease, color .2s ease;
}
.footer-social a:hover{border-color:var(--color-cyan-500); color:var(--color-cyan-500);}
.footer-social svg{width:15px;height:15px;}
.footer-col h4{
  font-size:0.82rem;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:rgba(255,255,255,0.4);
  font-weight:var(--fw-subheading);
  margin-bottom:1.1rem;
}
.footer-col ul{display:flex; flex-direction:column; gap:0.75rem;}
.footer-col a{font-size:0.92rem; transition:color .2s ease;}
.footer-col a:hover{color:var(--color-white);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  padding-top:2rem;
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:0.83rem;
}
@media (max-width:900px){
  .footer-top{grid-template-columns:repeat(2,1fr); row-gap:2.5rem;}
  .footer-brand{grid-column:1 / -1;}
}
@media (max-width:520px){
  .footer-top{grid-template-columns:1fr;}
}

/* ============================= GENERIC RESPONSIVE ============================= */
@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;}
  .stack-wrap{height:400px;}
  .dash-inner{grid-template-columns:1fr;}
}

/* ============================= TIMELINE (process + benefit, one pass) ============================= */
.timeline{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.75rem;
  position:relative;
  margin-top:0.5rem;
}
.timeline::before{
  content:"";
  position:absolute;
  top:10px; left:0; right:0;
  height:2px;
  background:var(--color-gray-300);
}
.timeline-item{
  position:relative;
  padding-top:2.5rem;
}
.timeline-dot{
  position:absolute;
  top:0; left:0;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--color-white);
  border:2px solid var(--color-cyan-500);
  display:flex; align-items:center; justify-content:center;
  z-index:1;
}
.timeline-dot::after{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:var(--color-cyan-500);
}
.timeline-item h3{
  font-family:var(--font-display);
  font-weight:var(--fw-subheading);
  font-size:1.05rem;
  color:var(--color-navy-700);
  margin-top:0.2rem;
}
.timeline-item p{
  margin-top:0.55rem;
  font-size:0.92rem;
  color:var(--color-gray-600);
}
.timeline-benefit{
  display:block;
  margin-top:0.85rem;
  padding-top:0.75rem;
  border-top:1px dashed var(--color-gray-300);
  font-size:0.82rem;
  font-weight:var(--fw-subheading);
  color:var(--color-cyan-600);
}
@media (max-width:820px){
  .timeline{grid-template-columns:1fr; gap:2rem;}
  .timeline::before{display:none;}
}

/* ============================= SPEC SHEET (technical definition list) ============================= */
.spec-sheet{
  border:1px solid var(--color-gray-300);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.spec-row{
  display:grid;
  grid-template-columns:13rem 1fr;
  gap:1.5rem;
  padding:1.35rem 1.75rem;
  border-bottom:1px solid var(--color-gray-300);
}
.spec-row:last-child{border-bottom:none;}
.spec-row:nth-child(odd){background:var(--color-gray-100);}
.spec-label{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.07em;
  text-transform:uppercase;
  font-weight:var(--fw-subheading);
  color:var(--color-cyan-600);
}
.spec-value{
  font-size:0.97rem;
  color:var(--color-gray-900);
}
.spec-value strong{color:var(--color-navy-700); font-weight:var(--fw-subheading);}
@media (max-width:640px){
  .spec-row{grid-template-columns:1fr; gap:0.4rem;}
}

/* ============================= EXPERIENCE SPLIT (two-sided platform, home) ============================= */
.experience-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.75rem;
}
.experience-card{
  border-radius:var(--radius-lg);
  padding:clamp(1.75rem, 3vw, 2.5rem);
  position:relative;
  overflow:hidden;
}
.experience-card.for-employers{background:var(--color-navy-700); color:var(--color-white);}
.experience-card.for-talent{background:var(--color-navy-100); color:var(--color-navy-700);}
.experience-eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.09em;
  text-transform:uppercase;
  font-weight:var(--fw-subheading);
}
.experience-card.for-employers .experience-eyebrow{color:var(--color-cyan-500);}
.experience-card.for-talent .experience-eyebrow{color:var(--color-cyan-600);}
.experience-card h3{
  font-family:var(--font-display);
  font-weight:var(--fw-heading);
  font-size:1.5rem;
  margin-top:0.6rem;
}
.experience-card > p{
  margin-top:0.65rem;
  font-size:0.95rem;
}
.experience-card.for-employers > p{color:rgba(255,255,255,0.72);}
.experience-card.for-talent > p{color:var(--color-navy-500);}
.experience-mock{
  margin-block:1.5rem;
  border-radius:12px;
  padding:1rem 1.15rem;
  display:flex;
  align-items:center;
  gap:0.75rem;
  font-family:var(--font-mono);
  font-size:0.82rem;
}
.experience-card.for-employers .experience-mock{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);}
.experience-card.for-talent .experience-mock{background:var(--color-white); border:1px solid var(--color-gray-300);}
.experience-mock-input{
  flex:1;
  color:rgba(255,255,255,0.55);
}
.experience-card.for-talent .experience-mock-input{color:var(--color-gray-600);}
.experience-mock-pill{
  background:var(--color-cyan-500);
  color:var(--color-cyan-900);
  padding:0.35em 0.8em;
  border-radius:999px;
  font-weight:var(--fw-subheading);
  white-space:nowrap;
}
.experience-mock .locked-name{filter:blur(3px); color:var(--color-gray-600);}
.experience-mock-badge{
  font-size:0.72rem;
  background:var(--color-cyan-100);
  color:var(--color-cyan-900);
  padding:0.3em 0.6em;
  border-radius:8px;
  font-weight:var(--fw-subheading);
  white-space:nowrap;
}
.experience-list{display:flex; flex-direction:column; gap:0.55rem;}
.experience-list li{
  display:flex; align-items:flex-start; gap:0.55rem;
  font-size:0.92rem;
}
.experience-list svg{width:15px; height:15px; flex:none; margin-top:0.25em;}
.experience-card.for-employers .experience-list svg{color:var(--color-cyan-500);}
.experience-card.for-talent .experience-list svg{color:var(--color-cyan-600);}
.experience-card .link-arrow{margin-top:1.5rem;}
.experience-card.for-employers .link-arrow{color:var(--color-cyan-500);}
.experience-card.for-talent .link-arrow{color:var(--color-navy-700);}
@media (max-width:760px){
  .experience-split{grid-template-columns:1fr;}
}

/* ============================= VETTING ============================= */
.vetting-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:clamp(2rem, 5vw, 3.5rem);
  align-items:start;
}
.vetting-stages{display:flex; flex-direction:column; gap:2.25rem;}
.vetting-stage{
  border-top:2px solid var(--color-navy-700);
  padding-top:1.4rem;
}
.vetting-stage-num{
  font-family:var(--font-mono);
  font-weight:var(--fw-subheading);
  color:var(--color-cyan-600);
  font-size:0.85rem;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.vetting-stage h3{
  font-family:var(--font-display);
  font-size:var(--fs-h3);
  font-weight:var(--fw-subheading);
  margin-top:0.5rem;
  color:var(--color-navy-700);
}
.vetting-stage > p{
  margin-top:0.6rem;
  color:var(--color-gray-600);
  font-size:0.98rem;
}
.vetting-list{display:flex; flex-direction:column; gap:0.55rem; margin-top:1.1rem;}
.vetting-list li{
  display:flex; align-items:flex-start; gap:0.55rem;
  font-size:0.92rem;
  color:var(--color-gray-900);
}
.vetting-list svg{width:15px; height:15px; flex:none; margin-top:0.25em; color:var(--color-cyan-600);}
.vetting-note{
  display:block;
  margin-top:1rem;
  font-size:0.85rem;
  font-weight:var(--fw-subheading);
  color:var(--color-navy-500);
}
.vetting-meaning{
  padding-top:2rem;
  border-top:1px solid var(--color-gray-300);
}
.vetting-meaning h3{
  font-family:var(--font-display);
  font-size:1.2rem;
  font-weight:var(--fw-subheading);
  color:var(--color-navy-700);
}
.vetting-meaning p{
  margin-top:0.6rem;
  color:var(--color-gray-600);
  font-size:0.98rem;
}
.vetting-preview{position:sticky; top:6rem;}
.verified-card{
  background:var(--color-white);
  border:1px solid var(--color-gray-300);
  border-radius:var(--radius-lg);
  padding:1.75rem;
  box-shadow:0 24px 55px -20px rgba(4,36,61,0.25);
}
.verified-badge{
  display:inline-flex;
  align-items:center;
  gap:0.4rem;
  background:var(--color-cyan-100);
  color:var(--color-cyan-900);
  font-size:0.78rem;
  font-weight:var(--fw-subheading);
  padding:0.4em 0.85em;
  border-radius:999px;
  margin-bottom:1.5rem;
}
.verified-badge svg{width:14px; height:14px; flex:none;}
.verified-name{font-weight:var(--fw-subheading); font-size:1.05rem; color:var(--color-navy-700);}
.verified-checks{
  display:flex; flex-direction:column; gap:0.6rem;
  margin-top:1.25rem;
  padding-top:1.1rem;
  border-top:1px dashed var(--color-gray-300);
}
.verified-checks li{
  display:flex; align-items:center; gap:0.5rem;
  font-size:0.88rem;
  font-weight:var(--fw-subheading);
  color:var(--color-navy-700);
}
.verified-checks svg{width:16px; height:16px; flex:none; color:var(--color-success);}
@media (max-width:900px){
  .vetting-grid{grid-template-columns:1fr;}
  .vetting-preview{position:static; margin-top:0.5rem;}
}