:root{
  --sans:"Sora","Helvetica Neue","Inter",system-ui,sans-serif;
  --bg:radial-gradient(125% 125% at 78% 10%,#052a5e 0%,#021c45 52%,#010c22 100%);
  --ink:#f4f6fb;
  --muted:rgba(244,246,251,.86);
  --accent:#0fb5e8;
  --net:#3fd0f5;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:#010c22;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- topbar ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(22px,3.2vw,42px) clamp(26px,5vw,88px);
}
.mark{
  display:flex;align-items:center;gap:11px;
  font-weight:600;letter-spacing:.005em;font-size:1.05rem;
  color:var(--ink);text-decoration:none;
}
.mark .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}
.nav{display:flex;gap:34px;font-size:.92rem}
.nav a{color:var(--muted);text-decoration:none;transition:color .2s}
.nav a:hover{color:var(--ink)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(104px,14vh,150px);
  padding-bottom:clamp(48px,8vh,90px);
}
.stage{
  position:relative;z-index:6;
  padding:0 clamp(26px,5vw,88px) clamp(20px,3vw,40px);
  max-width:820px;
}
.eyebrow{
  font-size:.74rem;letter-spacing:.32em;text-transform:uppercase;font-weight:600;
  color:var(--accent);margin-bottom:clamp(22px,3vw,32px);
}
h1{
  font-size:clamp(2.9rem,7.4vw,5.8rem);line-height:.98;letter-spacing:-0.022em;font-weight:700;
  max-width:15ch;
}
.sub{
  margin-top:clamp(24px,3vw,34px);
  font-size:clamp(1.04rem,1.4vw,1.34rem);line-height:1.55;max-width:46ch;color:var(--muted);
}
.actions{margin-top:clamp(32px,4vw,46px);display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.cta{
  font-size:.92rem;padding:14px 30px;border-radius:2px;
  border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
  background:transparent;color:var(--accent);
  font-family:inherit;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  transition:.2s;
}
.cta:hover{border-color:var(--accent);color:#fff;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.ghost{font-size:.94rem;color:var(--accent);text-decoration:none;opacity:.92}
.ghost:hover{opacity:1}

/* ---------- hero art layers ---------- */
.blob{
  position:absolute;z-index:1;filter:blur(28px) saturate(1.08);
  right:-10%;top:50%;transform:translateY(-50%);width:62vw;height:88vh;
  border-radius:52% 48% 43% 57% / 55% 44% 56% 45%;
  background:
    radial-gradient(38% 42% at 54% 34%,#ffd79c 0%,rgba(255,215,156,0) 62%),
    radial-gradient(32% 36% at 60% 52%,#ff4f9d 0%,rgba(255,79,157,0) 60%),
    radial-gradient(30% 34% at 52% 60%,#ff79b2 0%,rgba(255,121,178,0) 60%),
    radial-gradient(44% 50% at 55% 78%,#7b3ff2 0%,rgba(123,63,242,0) 64%),
    radial-gradient(60% 64% at 56% 54%,#ff6aa8 0%,rgba(255,106,168,0) 72%);
}
.grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;background-size:300px 300px;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
canvas.net{
  position:absolute;z-index:3;top:0;right:0;height:100%;width:66%;pointer-events:none;
  -webkit-mask:radial-gradient(58% 60% at 60% 46%,#000 0%,#000 42%,transparent 80%);
          mask:radial-gradient(58% 60% at 60% 46%,#000 0%,#000 42%,transparent 80%);
}

/* ---------- background continuity for below-the-fold sections ---------- */
body{background:var(--bg) fixed}

/* ---------- approach ---------- */
.approach{
  position:relative;z-index:2;
  padding:clamp(70px,10vw,140px) clamp(26px,5vw,88px);
  max-width:1180px;margin:0 auto;
}
.approach .eyebrow{margin-bottom:18px}
.approach h2{
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.04;letter-spacing:-0.02em;font-weight:700;
  max-width:16ch;margin-bottom:clamp(40px,6vw,72px);
}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.step{border-top:1px solid color-mix(in srgb,var(--accent) 35%,transparent);padding-top:22px}
.step .num{font-size:.85rem;letter-spacing:.1em;color:var(--accent);font-weight:600}
.step h3{font-size:1.5rem;font-weight:600;margin:14px 0 12px}
.step p{color:var(--muted);line-height:1.55;font-size:1.02rem}

/* ---------- about ---------- */
.about{
  position:relative;z-index:2;
  padding:clamp(60px,9vw,120px) clamp(26px,5vw,88px);
  max-width:880px;margin:0 auto;
}
.about .eyebrow{margin-bottom:18px}
.about h2{
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.05;letter-spacing:-0.02em;font-weight:700;margin-bottom:10px;
}
.about .role{color:var(--accent);font-size:.95rem;letter-spacing:.02em;margin-bottom:26px}
.about .about-body{color:var(--muted);line-height:1.6;font-size:clamp(1.05rem,1.5vw,1.28rem);max-width:60ch}

/* ---------- contact ---------- */
.contact{
  position:relative;z-index:2;
  padding:clamp(70px,10vw,150px) clamp(26px,5vw,88px);
  max-width:1180px;margin:0 auto;text-align:center;
}
.contact .eyebrow{margin-bottom:18px}
.contact h2{
  font-size:clamp(2.2rem,5vw,4rem);line-height:1.02;letter-spacing:-0.02em;font-weight:700;margin-bottom:20px;
}
.contact .sub{
  color:var(--muted);line-height:1.55;font-size:clamp(1.02rem,1.4vw,1.25rem);
  max-width:52ch;margin:0 auto 38px;
}
.contact .actions{justify-content:center}

/* ---------- contact form (Netlify) ---------- */
.contact-form{max-width:520px;margin:8px auto 0;text-align:left;display:grid;gap:20px}
.contact-form .field{display:grid;gap:8px}
.contact-form label{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.contact-form input,.contact-form textarea{
  background:rgba(255,255,255,.04);border:1px solid rgba(244,246,251,.16);border-radius:4px;
  color:var(--ink);font:inherit;font-size:1rem;padding:12px 14px;transition:border-color .2s;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent)}
.contact-form textarea{resize:vertical;min-height:110px}
.contact-form button.cta{justify-self:start;background:var(--accent);color:#04182e;border-color:var(--accent);cursor:pointer}
.contact-form button.cta:hover{background:var(--net);color:#04182e}
.contact-form .hidden{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
.foot{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:34px clamp(26px,5vw,88px);
  border-top:1px solid rgba(244,246,251,.1);
  color:var(--muted);font-size:.9rem;
}
.foot-nav{display:flex;gap:26px}
.foot a{color:var(--muted);text-decoration:none}
.foot a:hover{color:var(--ink)}
.foot .copy{opacity:.7}

/* ---------- entrance motion ---------- */
.fade{opacity:0;transform:translateY(14px);animation:fadeUp 1s cubic-bezier(.2,.7,.2,1) forwards}
.fade.delay-1{animation-delay:.12s}
.fade.delay-2{animation-delay:.26s}
.fade.delay-3{animation-delay:.4s}
@keyframes fadeUp{to{opacity:1;transform:none}}

/* ---------- sticky nav state ---------- */
.topbar{transition:background .3s,backdrop-filter .3s,border-color .3s}
.topbar.scrolled{
  background:rgba(1,12,34,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(244,246,251,.08);
  padding-top:clamp(14px,2vw,20px);padding-bottom:clamp(14px,2vw,20px);
}
.nav a.active{color:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .steps{grid-template-columns:1fr;gap:8px}
  .step{padding:22px 0}
}
@media (max-width:640px){
  .topbar{padding:16px 20px}
  .nav{gap:20px;font-size:.86rem}
  .hero .blob{right:-30%;width:130vw;height:56vh;top:34%}
  canvas.net{width:100%;opacity:.85}
  .stage{padding:0 20px}
  h1{font-size:clamp(2.6rem,12vw,3.4rem)}
  .approach,.contact{padding-left:20px;padding-right:20px}
  .contact .actions{flex-direction:column;gap:16px}
  .foot{flex-direction:column;align-items:flex-start;gap:14px}
}

/* ---------- reduced motion + focus ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .fade{animation:none!important;opacity:1!important;transform:none!important}
}
a:focus-visible,.cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}