:root{
  --onyx:#1A1A1A;
  --cobalt:#2E5BFF;
  --cobalt-ink:#1f3fc7;
  --stone:#F5F5F7;
  --white:#FFFFFF;
  --rule:#E6E6EA;
  --muted: rgba(26,26,26,.62);
  --muted-2: rgba(26,26,26,.45);
  --container: 1240px;
  --pad: clamp(20px, 4vw, 56px);
  --sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family: var(--sans);
  font-feature-settings: "ss01","cv11";
  color: var(--onyx);
  background: var(--stone);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 17px;
  line-height: 1.6;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font-family:inherit}
::selection{background: var(--cobalt); color:#fff}

.wrap{max-width:var(--container);margin:0 auto;padding:0 var(--pad)}
section{position:relative}

.eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--cobalt);
}
.mono{ font-family:var(--mono); }
.kicker{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

h1,h2,h3,h4{ font-family:var(--sans); font-weight:600; letter-spacing:-.02em; margin:0; }
h1{
  font-size: clamp(48px, 9vw, 116px);
  line-height: .96;
  letter-spacing:-.035em;
}
h2{
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing:-.028em;
}
h3{
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
}
p{margin:0}
.lede{
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 60ch;
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  height: 50px; padding: 0 22px;
  border-radius: 999px;
  font-weight: 500; font-size: 15px;
  border:1px solid transparent;
  cursor:pointer; text-decoration:none;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
  white-space:nowrap;
}
.btn .arrow{ transition: transform .3s cubic-bezier(.2,.7,.2,1); display:inline-block;}
.btn:hover .arrow{ transform: translateX(4px); }
.btn-primary{ background: var(--cobalt); color:#fff; }
.btn-primary:hover{ background: var(--cobalt-ink); }

.text-link{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--onyx);
  border-bottom:1px solid currentColor; padding-bottom:2px;
  font-weight:500;
}
.text-link:hover{ color: var(--cobalt); }

.reveal{ opacity:0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none}
  *{animation:none !important; transition:none !important}
}

nav.top{
  position:fixed; top:0; left:0; right:0; z-index:50;
  height: 68px;
  display:flex; align-items:center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
nav.top.scrolled{
  background: rgba(255,255,255,.86);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--rule);
}
nav .row{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{
  font-weight:600; letter-spacing:-.015em; font-size:16px;
  text-decoration:none; color: var(--onyx);
  display:inline-flex; align-items:baseline; gap:2px;
}
.brand .dot{ font-family:var(--mono); color: var(--cobalt); margin: 0 1px; }
.nav-links{ display:flex; align-items:center; gap:28px; }
.nav-links a{
  text-decoration:none; color:var(--onyx); font-size:14px; font-weight:500;
  opacity:.8;
}
.nav-links a:hover{ opacity:1; color: var(--cobalt); }
.nav-cta{
  height: 38px; padding: 0 16px; font-size:13.5px; border-radius: 999px;
  background: var(--cobalt); color:#fff; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition: background .25s ease;
}
.nav-cta:hover{ background: var(--cobalt-ink); }
.hamburger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; border:1px solid var(--rule); border-radius:999px; background:#fff; cursor:pointer;}
.hamburger span{ display:block; width:16px; height:1.5px; background: var(--onyx); position:relative;}
.hamburger span::before, .hamburger span::after{ content:""; position:absolute; left:0; right:0; height:1.5px; background: var(--onyx);}
.hamburger span::before{ top:-5px; }
.hamburger span::after{ top:5px; }

@media (max-width: 820px){
  .nav-links{ display:none; }
  .hamburger{ display:flex; }
  .nav-cta.desktop-only{ display:none; }
}

.mobile-overlay{
  position:fixed; inset:0; background:#fff; z-index:60;
  display:flex; flex-direction:column; padding: 24px var(--pad);
  transform: translateY(-100%); transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.mobile-overlay.open{ transform:none; }
.mobile-overlay .top-row{ display:flex; justify-content:space-between; align-items:center; }
.mobile-overlay .links{ display:flex; flex-direction:column; gap:18px; margin-top: 60px; }
.mobile-overlay .links a{ text-decoration:none; color: var(--onyx); font-size: 32px; font-weight: 600; letter-spacing:-.02em;}
.close-x{ width:42px; height:42px; border:1px solid var(--rule); border-radius:999px; background:#fff; cursor:pointer; }

/* Hero — "behind" layout: 3D form fills the hero as a faded backdrop, copy on top */
.hero{
  min-height: 100vh;
  padding-top: 96px;
  padding-bottom: 80px;
  display:flex; align-items:center;
  background: var(--stone);
  position:relative;
  overflow:hidden;
}
.hero-copy{ position: relative; z-index: 1; }
.hero-copy h1{ max-width: 14ch; }
.hero-copy h1 .accent{ color: var(--cobalt); }
.hero-copy .eyebrow{ margin-bottom: 28px; display:inline-flex; align-items:center; gap: 10px;}
.hero-copy .eyebrow::before{
  content:""; width: 18px; height: 1px; background: var(--cobalt);
}
.hero-copy .lede{ margin-top: 28px; max-width: 56ch;}
.hero-cta-row{ display:flex; align-items:center; gap: 18px; margin-top: 36px; flex-wrap: wrap;}
.hero-trust{
  margin-top: 36px;
  display:flex; flex-wrap:wrap; gap: 8px 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.hero-trust .sep{ color: var(--muted-2); }

.hero-stage{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.hero-stage canvas{ width:100%; height:100%; }

.hero-stage .fallback{
  display:none;
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: auto;
  max-width: 480px; max-height: 480px;
}
@media (prefers-reduced-motion: reduce){
  .hero-stage canvas{ visibility: hidden; }
  .hero-stage .fallback{ display:block; }
}

@media (max-width: 920px){
  .hero{ min-height: auto; padding-top: 92px; padding-bottom: 48px;}
}

.section{
  padding: clamp(72px, 10vw, 140px) 0;
}
.section.alt{ background: #fff; }
.section.dark{ background: var(--onyx); color:#fff;}
.section-head{
  display:grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 72px);
}
.section-head .right{ max-width: 60ch; }
.section-head .kicker{ margin-bottom: 12px; display:block;}
@media (max-width: 820px){
  .section-head{ grid-template-columns: 1fr; align-items: start;}
}

.problem-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 40px);
}
.problem-grid .item{
  border-top: 1px solid var(--onyx);
  padding-top: 24px;
}
.problem-grid .item .num{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px;
  letter-spacing: .04em;
}
.problem-grid .item h3{ margin-bottom: 12px;}
.problem-grid .item p{ color: var(--muted); font-size: 16px; line-height: 1.6;}
.problem-close{
  margin-top: clamp(56px, 7vw, 96px);
  text-align: center;
  font-size: clamp(24px, 3.2vw, 40px);
  letter-spacing: -.02em;
  font-weight: 500;
  line-height: 1.2;
  max-width: 22ch;
  margin-left:auto; margin-right: auto;
}
.problem-close em{ font-style: normal; color: var(--cobalt);}
@media (max-width: 820px){
  .problem-grid{ grid-template-columns: 1fr; }
}

.tiles{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.tile{
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 28px 28px 32px;
  min-height: 320px;
  display:flex; flex-direction:column; justify-content: space-between;
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
  cursor: default;
}
.tile:hover{
  background: var(--onyx); color: #fff; border-color: var(--onyx);
  transform: translateY(-2px);
}
.tile:hover .tile-label{ color: rgba(255,255,255,.55); }
.tile:hover .tile-body{ color: rgba(255,255,255,.72); }
.tile:hover .tile-mark .dot1{ background: var(--cobalt); }
.tile-label{
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  letter-spacing: .04em;
}
.tile h3{ margin-top: 24px; margin-bottom: 14px; font-size: clamp(22px, 2.4vw, 28px);}
.tile-body{ color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.tile-mark{
  margin-top: 28px;
  display:flex; align-items:center; gap: 6px;
  height: 28px;
}
.tile-mark .bar{ height: 1px; flex: 1; background: currentColor; opacity:.18;}
.tile-mark .dot1{
  width: 7px; height: 7px; border-radius: 999px; background: var(--onyx); transition: background .25s ease;
}
@media (max-width: 880px){
  .tiles{ grid-template-columns: 1fr; }
  .tile{ min-height: auto; }
}

.packages{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.package{
  background:#fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 28px 24px 28px;
  display:flex; flex-direction:column;
  position: relative;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.package:hover{ transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(26,26,26,.18);}
.package.featured{
  border-color: transparent;
  box-shadow: 0 1px 0 var(--cobalt) inset, 0 0 0 1px var(--rule), 0 8px 24px -12px rgba(46,91,255,.18);
  transform: translateY(-8px);
}
.package.featured::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background: var(--cobalt);
  border-top-left-radius: 18px; border-top-right-radius: 18px;
}
.package .pop-badge{
  position:absolute; top:-12px; left: 24px;
  background: var(--cobalt); color:#fff;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.pkg-name{
  font-size: 13px; font-weight: 500; color: var(--muted);
  letter-spacing: .02em;
  margin-bottom: 14px;
}
.pkg-price{
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(28px, 3vw, 36px);
  letter-spacing: -.02em;
  color: var(--onyx);
  line-height: 1;
  margin-bottom: 8px;
}
.pkg-price .unit{ font-size: 14px; color: var(--muted); margin-left: 4px;}
.pkg-best{
  font-size: 13.5px; color: var(--muted); line-height: 1.45;
  min-height: 56px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.pkg-feats{
  list-style: none; padding: 0; margin: 0 0 24px;
  display:flex; flex-direction: column; gap: 10px;
  font-size: 14px;
}
.pkg-feats li{
  position:relative; padding-left: 20px; color: var(--onyx); line-height: 1.4;
}
.pkg-feats li::before{
  content:""; position:absolute; left: 0; top: 8px; width: 9px; height: 1px; background: var(--cobalt);
}
.pkg-feats li.plus{ font-weight: 500;}
.pkg-cta{
  margin-top:auto;
  display: inline-flex; align-items:center; justify-content: center; gap: 8px;
  height: 44px; border-radius: 999px;
  font-size: 14px; font-weight: 500;
  background: transparent; color: var(--onyx);
  border: 1px solid var(--onyx);
  text-decoration:none;
  transition: background .25s ease, color .25s ease;
}
.pkg-cta:hover{ background: var(--onyx); color:#fff; }
.package.featured .pkg-cta{ background: var(--cobalt); color:#fff; border-color: var(--cobalt);}
.package.featured .pkg-cta:hover{ background: var(--cobalt-ink); border-color: var(--cobalt-ink);}

.packages-foot{
  margin-top: 32px; text-align: center; font-size: 14px; color: var(--muted);
}
.packages-foot a{ color: var(--cobalt); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;}

@media (max-width: 1080px){
  .packages{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .packages{ grid-template-columns: 1fr; }
  .package.featured{ transform: none; }
}

.process{ position:relative; }
.process-track{
  position: relative;
  display:grid; grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 32px;
}
.process-line{
  position:absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--rule);
}
.process-line .fill{ position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--cobalt); transition: width .9s cubic-bezier(.2,.7,.2,1);}
.step{
  position: relative;
  padding-top: 36px;
}
.step .marker{
  position: absolute; top: 8px; left: 0;
  width: 14px; height: 14px; border-radius: 999px;
  background: #fff; border: 1px solid var(--rule);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.step.active .marker{ background: var(--cobalt); border-color: var(--cobalt); transform: scale(1.05);}
.step .num{
  font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing:.04em;
}
.step h3{ margin: 8px 0 10px; font-size: 19px;}
.step p{ font-size: 14.5px; color: var(--muted); line-height: 1.55; max-width: 26ch; }
.step .day{ font-family: var(--mono); font-size: 11px; color: var(--cobalt); margin-left: 8px;}

@media (max-width: 920px){
  .process-track{ grid-template-columns: 1fr; gap: 0;}
  .process-line{ left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;}
  .process-line .fill{ width: 1px; height: 0%; transition: height .9s cubic-bezier(.2,.7,.2,1);}
  .step{ padding: 28px 0 28px 32px; border-bottom: 1px solid var(--rule);}
  .step:last-child{ border-bottom: none; }
  .step .marker{ left: 0; top: 32px; }
  .step p{ max-width: none; }
}

.testi-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
}
.testi{
  background:#fff;
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 32px;
  display:flex; flex-direction: column; gap: 24px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.testi:hover{ transform: translateY(-2px); box-shadow: 0 16px 36px -20px rgba(26,26,26,.16); }
.testi-quote{
  font-size: 19px; line-height: 1.5; letter-spacing: -.01em; color: var(--onyx);
  font-weight: 400;
  text-wrap: pretty;
}
.testi-quote::before{ content:"\201C"; color: var(--cobalt); font-size: 32px; line-height: 0; vertical-align: -2px; margin-right: 4px;}
.testi-foot{
  display:flex; align-items:center; justify-content: space-between;
  padding-top: 20px; border-top: 1px solid var(--rule);
}
.testi-author{ display:flex; flex-direction: column; gap: 2px; }
.testi-author .name{ font-weight: 500; font-size: 14px;}
.testi-author .meta{ font-size: 13px; color: var(--muted);}
.testi-tag{ font-family: var(--mono); font-size: 11px; color: var(--muted); border: 1px solid var(--rule); padding: 4px 8px; border-radius: 999px;}

@media (max-width: 720px){
  .testi-grid{ grid-template-columns: 1fr; }
}

.creds{
  margin-top: clamp(48px, 6vw, 80px);
  text-align:center;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: .12em;
  text-transform: uppercase;
  display: flex; justify-content:center; flex-wrap: wrap; gap: 8px 22px;
}
.creds .sep{ color: var(--muted-2);}

.faq-list{ max-width: 880px; margin: 0 auto;}
.faq-item{ border-top: 1px solid var(--onyx); }
.faq-item:last-child{ border-bottom: 1px solid var(--onyx); }
.faq-q{
  width: 100%; background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 26px 0; text-align: left;
  font-family: inherit; color: var(--onyx);
  font-size: clamp(18px, 2vw, 22px); font-weight: 500; letter-spacing: -.01em;
}
.faq-q .q-mark{
  flex: 0 0 auto;
  width: 22px; height: 22px;
  position: relative;
  margin-top: 6px;
}
.faq-q .q-mark::before, .faq-q .q-mark::after{
  content:""; position:absolute; left: 50%; top: 50%; background: var(--onyx);
  transition: transform .25s ease, opacity .25s ease;
}
.faq-q .q-mark::before{ width: 14px; height: 1.5px; transform: translate(-50%, -50%);}
.faq-q .q-mark::after{ width: 1.5px; height: 14px; transform: translate(-50%, -50%);}
.faq-item.open .faq-q .q-mark::after{ transform: translate(-50%,-50%) rotate(90deg); opacity: 0;}
.faq-a{
  max-height: 0; overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, padding .3s ease;
  opacity: 0;
  color: var(--muted);
  font-size: 16px; line-height: 1.6;
  max-width: 64ch;
}
.faq-item.open .faq-a{ max-height: 400px; opacity: 1; padding: 0 0 28px;}

.final{
  background: var(--onyx); color:#fff;
  padding: clamp(96px, 14vw, 180px) 0;
  position: relative; overflow:hidden;
}
.final h2{
  font-size: clamp(48px, 8vw, 112px);
  letter-spacing: -.035em;
  line-height: .95;
}
.final .lede{ color: rgba(255,255,255,.7); margin-top: 28px; max-width: 56ch;}
.final .row{
  display:flex; align-items:center; gap: 24px; margin-top: 44px; flex-wrap: wrap;
}
.final .final-kicker{ color: rgba(255,255,255,.5); }
.final .final-inner{ position: relative; }
.final a.email{
  color: #fff; text-decoration: underline; text-underline-offset: 4px;
  font-size: 15px;
}
.final a.email:hover{ color: var(--cobalt);}
.final-bg{
  position:absolute; right: -10%; bottom: -20%; width: 70%; aspect-ratio: 1/1; pointer-events:none;
  opacity: .3;
}

footer.foot{
  background: var(--onyx); color: rgba(255,255,255,.7);
  padding: 60px 0 32px;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: 14px;
}
.foot-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.foot a{ text-decoration:none; color: rgba(255,255,255,.7);}
.foot a:hover{ color: #fff; }
.foot h4{ color: #fff; font-size: 13px; font-weight: 500; margin-bottom: 18px; letter-spacing: .04em;}
.foot ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction: column; gap: 10px; }
.foot .brand{ color: #fff; font-size: 18px; }
.foot .brand .dot{ color: var(--cobalt); }
.foot .tag{ margin: 14px 0 18px; max-width: 32ch; line-height: 1.5;}
.foot .loc{ font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.5);}
.foot-bottom{
  padding-top: 24px; display:flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11.5px; color: rgba(255,255,255,.45); letter-spacing: .04em;
}
@media (max-width: 720px){
  .foot-grid{ grid-template-columns: 1fr; gap: 36px;}
}

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}