:root{
  --bg:#0b0b12;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.08);
  --stroke:rgba(255,255,255,.14);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --dim:rgba(255,255,255,.5);

  --pink:#ff3aa7;
  --cyan:#2ee6ff;
  --lime:#b7ff2a;

  --r:18px;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --shadow2: 0 10px 28px rgba(0,0,0,.45);
  --container: 1120px;

  --h1: clamp(2.25rem, 4vw + 1rem, 4.2rem);
  --h2: clamp(1.55rem, 1.8vw + 1rem, 2.35rem);
  --lead: clamp(1.05rem, .5vw + 1rem, 1.25rem);

  --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

img{max-width:100%;display:block}
svg{display:block}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}

.container{width:min(var(--container), calc(100% - 2rem)); margin-inline:auto}

.skip{
  position:absolute; left:-9999px; top:8px; padding:.7rem 1rem;
  background:#000; border:1px solid var(--stroke); border-radius:10px; z-index:9999;
}
.skip:focus{left:12px}

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

/* Background */
.bg{position:fixed; inset:0; z-index:-1; pointer-events:none;}
.bg__gradient{
  position:absolute; inset:-20%;
  background: radial-gradient(800px 600px at 15% 20%, rgba(255,58,167,.22), transparent 55%),
              radial-gradient(900px 700px at 80% 35%, rgba(46,230,255,.20), transparent 60%),
              radial-gradient(700px 600px at 50% 80%, rgba(183,255,42,.13), transparent 60%),
              linear-gradient(120deg, rgba(255,58,167,.08), rgba(46,230,255,.06), rgba(183,255,42,.05));
  filter:saturate(1.1);
  animation: drift 14s var(--ease) infinite alternate;
}
@keyframes drift{to{transform: translate3d(1.2%, -1.8%, 0) scale(1.03)}}

.blob{position:absolute; width:520px; height:520px; border-radius:999px; filter: blur(40px); opacity:.35; mix-blend-mode:screen;}
.blob--a{left:-160px; top:120px; background: radial-gradient(circle at 30% 30%, rgba(255,58,167,.8), transparent 55%); animation: blobA 12s var(--ease) infinite alternate;}
.blob--b{right:-220px; top:40px; background: radial-gradient(circle at 30% 30%, rgba(46,230,255,.8), transparent 55%); animation: blobB 14s var(--ease) infinite alternate;}
.blob--c{left:20%; bottom:-280px; background: radial-gradient(circle at 30% 30%, rgba(183,255,42,.65), transparent 55%); animation: blobC 16s var(--ease) infinite alternate;}
@keyframes blobA{to{transform: translate(80px, -30px) scale(1.08)}}
@keyframes blobB{to{transform: translate(-80px, 40px) scale(1.06)}}
@keyframes blobC{to{transform: translate(60px, -60px) scale(1.1)}}

.noise{position:absolute; inset:0; opacity:.10; background-image:url('assets/noise.svg'); background-size:220px 220px; mix-blend-mode: overlay;}

/* Page transitions */
.page{opacity:0; transform: translateY(8px);}
.page.is-ready{opacity:1; transform:none; transition: opacity .45s var(--ease), transform .45s var(--ease);}
.page.is-leaving{opacity:0; transform: translateY(10px); transition: opacity .25s var(--ease), transform .25s var(--ease);}

/* Navbar */
.nav{position:sticky; top:0; z-index:50; backdrop-filter: blur(14px); background: rgba(11,11,18,.55); border-bottom:1px solid rgba(255,255,255,.08)}
.nav__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 0}
.brand{display:flex; align-items:center; gap:.65rem}
.brand__name{font-family: "Space Grotesk", Inter, system-ui; letter-spacing:.3px; font-weight:700}
.brand__mark{filter: drop-shadow(0 8px 18px rgba(255,58,167,.25))}

.nav__links{display:flex; align-items:center; gap:.95rem}
.nav__links a{color:var(--muted); font-weight:600; font-size:.95rem}
.nav__links a:hover{color:var(--text)}

.link-chip{padding:.35rem .6rem; border:1px solid rgba(255,255,255,.10); border-radius:999px; background: rgba(255,255,255,.04)}

.nav__toggle{
  display:none; background:transparent; border:1px solid rgba(255,255,255,.14);
  width:44px; height:44px; border-radius:14px; color:var(--text);
}
.nav__toggle span{display:block; height:2px; background: rgba(255,255,255,.82); margin:6px 10px; border-radius:2px;}

@media (max-width: 980px){
  .nav__toggle{display:block}
  .nav__links{
    position:fixed; left:1rem; right:1rem; top:74px;
    flex-direction:column; align-items:stretch; gap:.6rem;
    padding:1rem;
    background: rgba(11,11,18,.88);
    border:1px solid rgba(255,255,255,.10);
    border-radius: 18px;
    box-shadow: var(--shadow);
    transform: translateY(-10px);
    opacity:0; pointer-events:none;
    transition: transform .25s var(--ease), opacity .25s var(--ease);
  }
  .nav__links.is-open{transform: translateY(0); opacity:1; pointer-events:auto;}
  .nav__links a{padding:.85rem .9rem; border-radius:14px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08)}
  .nav__links a.btn{background: transparent; border:none; padding:0}
  .nav__links .btn{width:100%}
}

/* Typography */
.h1,.h2{font-family:"Space Grotesk", Inter, system-ui; margin:0 0 .6rem 0; letter-spacing:-.02em}
.h1{font-size:var(--h1); line-height:1.05}
.h2{font-size:var(--h2); line-height:1.15}
.lead{font-size:var(--lead); color:var(--muted); margin:0 0 1.2rem 0}
.sub{margin:0; color:var(--muted)}
.muted{color:var(--muted)}
.tiny{font-size:.9rem; color:var(--dim); margin:.8rem 0 0 0}

.grad{
  background: linear-gradient(90deg, var(--pink), var(--cyan), var(--lime));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* Buttons + micro-interactions */
.btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55rem;
  padding:.9rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  font-weight:800;
  font-family:"Space Grotesk", Inter, system-ui;
  letter-spacing:.2px;
  cursor:pointer;
  user-select:none;
  transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
  outline: none;
}
.btn:focus-visible{box-shadow: 0 0 0 4px rgba(46,230,255,.18), 0 0 0 1px rgba(46,230,255,.35) inset;}
.btn:active{transform: translateY(1px) scale(.99)}

.btn--primary{
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(120deg, rgba(255,58,167,.35), rgba(46,230,255,.28), rgba(183,255,42,.20));
  box-shadow: 0 12px 40px rgba(255,58,167,.14);
}
.btn--primary:hover{box-shadow: 0 18px 52px rgba(46,230,255,.14); border-color: rgba(255,255,255,.22); transform: translateY(-1px)}

.btn--ghost{background: rgba(255,255,255,.04)}
.btn--ghost:hover{background: rgba(255,255,255,.07); transform: translateY(-1px)}

.btn--sm{padding:.65rem .8rem; border-radius: 14px; font-size:.95rem}
.w100{width:100%}

.ripple{overflow:hidden}
.ripple span.rip{position:absolute; border-radius:999px; transform: translate(-50%,-50%); pointer-events:none; animation: ripple .6s var(--ease) forwards; background: rgba(255,255,255,.32)}
@keyframes ripple{from{width:0;height:0;opacity:.6} to{width:520px;height:520px;opacity:0}}

/* Magnetic button (subtle) */
.magnetic{will-change: transform}

/* Sections */
.main{padding-bottom:3rem}
.section{padding: clamp(3.2rem, 4vw, 5.2rem) 0}
.section--tight{padding: clamp(2.6rem, 3vw, 4.0rem) 0}
.section__head{display:grid; gap:.55rem; margin-bottom: 1.4rem}

/* Hero */
.hero{padding: clamp(2.2rem, 4vw, 4rem) 0 1.4rem}
.hero__grid{display:grid; gap:2rem; align-items:center}
@media (min-width: 980px){.hero__grid{grid-template-columns: 1.1fr .9fr}}

.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem .7rem;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.75);
  font-weight:700;
  font-size:.92rem;
}
.pill--sm{font-size:.85rem; padding:.35rem .6rem}
.dot{width:8px; height:8px; border-radius:999px; background: linear-gradient(120deg, var(--pink), var(--cyan), var(--lime)); box-shadow: 0 0 0 4px rgba(255,58,167,.12)}

.hero__cta{display:flex; gap:.9rem; flex-wrap:wrap; margin-top:.35rem}

.badges{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:1rem}
.badge{padding:.45rem .7rem; border-radius:999px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); color: rgba(255,255,255,.78); font-weight:700; font-size:.9rem}

/* Mock */
.mock{
  position:relative;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.mock__svg{width:100%; height:auto; padding: 18px; transform-origin:center; animation: floaty 5.2s var(--ease) infinite alternate;}
@keyframes floaty{to{transform: translateY(-10px)}}

.mock__tag{
  display:flex; gap:.55rem; align-items:center; justify-content:center;
  padding: .9rem 1rem;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.spark{width:12px;height:12px;border-radius:4px;background: linear-gradient(120deg, var(--pink), var(--cyan)); box-shadow: 0 0 20px rgba(255,58,167,.35)}

/* Feature grid */
.feature-grid{display:grid; gap:1rem}
@media (min-width: 820px){.feature-grid{grid-template-columns: repeat(4,1fr)}}

.feature{
  border-radius: 20px;
  background: rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  padding: 1rem;
  box-shadow: var(--shadow2);
}
.feature__icon{width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); margin-bottom:.75rem}
.feature h3{margin:.1rem 0 .25rem; font-family:"Space Grotesk"}
.feature p{margin:0; color:var(--muted)}

/* Cards */
.cards{display:grid; gap:1rem}
@media (min-width: 860px){.cards{grid-template-columns: repeat(4,1fr)}}

.card{
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  padding: 1.05rem;
  box-shadow: var(--shadow2);
}
.card:hover{border-color: rgba(255,255,255,.18)}
.card__top{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.7rem}
.chip{padding:.35rem .6rem; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.035); color: rgba(255,255,255,.75); font-weight:800; font-size:.82rem}
.card__icon{font-size:1.2rem}
.card h3{margin:.1rem 0 .35rem; font-family:"Space Grotesk"}
.card p{margin:0; color:var(--muted)}

/* Steps */
.steps{list-style:none; padding:0; margin:0; display:grid; gap: .8rem}
@media (min-width: 920px){.steps{grid-template-columns: repeat(3,1fr)}}
.step{display:flex; gap:1rem; padding:1.05rem; border-radius:22px; background: rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10)}
.step__n{width:44px;height:44px;border-radius:16px; display:grid; place-items:center; font-family:"Space Grotesk"; font-weight:900; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12)}
.step h3{margin:.1rem 0 .25rem; font-family:"Space Grotesk"}
.step p{margin:0; color:var(--muted)}

/* Social proof */
.proof{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem}
.counter{min-width: 240px; padding: 1rem 1.2rem; border-radius: 22px; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11); box-shadow: var(--shadow2)}
.counter__num{font-family:"Space Grotesk"; font-size: clamp(2rem, 2.2vw + 1rem, 2.7rem); font-weight:900; line-height:1}
.counter__label{color:var(--muted); margin-top:.35rem}

.testimonials{display:grid; gap:1rem}
@media (min-width: 920px){.testimonials{grid-template-columns: repeat(3,1fr)}}

.tcard{margin:0; border-radius: 22px; background: rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.10); padding: 1.05rem; box-shadow: var(--shadow2)}
.tcard blockquote{margin:0 0 .9rem 0; color: rgba(255,255,255,.86); font-weight:600; line-height:1.45}
.tcard figcaption{display:flex; align-items:center; gap:.8rem}
.avatar{width:42px;height:42px;border-radius:16px; display:grid; place-items:center; font-family:"Space Grotesk"; font-weight:900; background: linear-gradient(120deg, rgba(255,58,167,.25), rgba(46,230,255,.20)); border:1px solid rgba(255,255,255,.14)}

/* Pricing */
.pricing{display:grid; gap:1rem}
@media (min-width: 980px){.pricing{grid-template-columns: repeat(3,1fr)}}

.price{
  position:relative;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  padding: 1.1rem;
  box-shadow: var(--shadow2);
}
.price header h3{margin:.1rem 0 .1rem; font-family:"Space Grotesk"}
.price__tag{display:flex; align-items:flex-end; gap:.25rem; margin:.9rem 0}
.price__num{font-family:"Space Grotesk"; font-weight:900; font-size: 2.8rem; line-height:1}
.price__cur{color: var(--muted); font-weight:800; margin-bottom:.25rem}

.price--hot{border-color: rgba(46,230,255,.22); box-shadow: 0 18px 60px rgba(46,230,255,.10)}
.hot{position:absolute; right:14px; top:14px; padding:.35rem .6rem; border-radius:999px; background: rgba(46,230,255,.14); border:1px solid rgba(46,230,255,.30); font-weight:900; font-size:.82rem}

.list{margin:.7rem 0 1rem; padding-left: 1.1rem; color: var(--muted)}
.list li{margin:.35rem 0}

/* Ticker */
.ticker{border-radius: 24px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); overflow:hidden; box-shadow: var(--shadow2)}
.ticker__track{
  display:flex; gap:2.2rem; padding: 1.05rem 1rem;
  white-space:nowrap;
  animation: marquee 18s linear infinite;
}
.ticker__track span{font-family:"Space Grotesk"; font-weight:800; color: rgba(255,255,255,.80)}
@keyframes marquee{to{transform: translateX(-50%)}}

/* Accordion */
.accordion{display:grid; gap:.8rem}
.acc{border-radius: 20px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); padding:.2rem .85rem}
.acc summary{cursor:pointer; list-style:none; padding: .95rem .25rem; font-family:"Space Grotesk"; font-weight:800}
.acc summary::-webkit-details-marker{display:none}
.acc__body{padding:0 .25rem 1rem; color:var(--muted)}
.acc[open]{border-color: rgba(255,255,255,.18)}

/* CTA */
.cta__box{display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; padding: 1.35rem 1.25rem; border-radius: 26px; border:1px solid rgba(255,255,255,.12); background: linear-gradient(120deg, rgba(255,58,167,.16), rgba(46,230,255,.10), rgba(183,255,42,.08)); box-shadow: var(--shadow)}
.cta__actions{display:flex; gap:.8rem; flex-wrap:wrap}

/* Footer */
.footer{padding: 2.4rem 0 1.4rem; border-top:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.22)}
.footer__grid{display:grid; gap:1.4rem}
@media (min-width: 900px){.footer__grid{grid-template-columns: 1.4fr 1fr 1fr}}

.footer__h{margin:0 0 .6rem; font-family:"Space Grotesk"}
.footer__links{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.footer__links a{color:var(--muted)}
.footer__links a:hover{color:var(--text)}

.brand--footer{opacity:.95}

.newsletter{display:flex; gap:.6rem}
.newsletter input{
  flex:1;
  padding:.85rem .9rem;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:var(--text);
  outline:none;
}
.newsletter input:focus-visible{box-shadow: 0 0 0 4px rgba(255,58,167,.16), 0 0 0 1px rgba(255,255,255,.22) inset;}

.footer__bottom{display:flex; justify-content:space-between; gap:1rem; margin-top:1.2rem}

/* B2B */
.timeline{display:grid; gap:.8rem}
.tl{display:flex; gap:1rem; padding:1.05rem; border-radius:22px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.045)}
.tl__dot{width:14px;height:14px;border-radius:6px; margin-top:.3rem; background: linear-gradient(120deg, var(--pink), var(--cyan), var(--lime)); box-shadow: 0 0 0 6px rgba(46,230,255,.10)}
.tl h3{margin:.05rem 0 .2rem; font-family:"Space Grotesk"}
.tl p{margin:0; color:var(--muted)}

.form-grid{display:grid; gap:1rem}
@media (min-width: 980px){.form-grid{grid-template-columns: 1.1fr .9fr}}

.form{
  border-radius: 24px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 1.05rem;
  box-shadow: var(--shadow2);
  display:grid;
  grid-template-columns: 1fr;
  gap:.85rem;
}
@media (min-width: 720px){.form{grid-template-columns: 1fr 1fr}}
.field{display:grid; gap:.4rem}
.field--full{grid-column: 1 / -1}
label{font-weight:800; font-family:"Space Grotesk"; color: rgba(255,255,255,.82)}
input, select, textarea{
  padding:.85rem .9rem;
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
  outline: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{box-shadow: 0 0 0 4px rgba(46,230,255,.14), 0 0 0 1px rgba(255,255,255,.22) inset;}
.help{margin:0; color: var(--dim); font-size:.9rem}

.aside__card{border-radius: 24px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.035); padding: 1.05rem; box-shadow: var(--shadow2)}
.mini-mock{margin-top:1rem; border-radius: 18px; border:1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.18); padding:.75rem}

.cases{display:grid; gap:1rem}
@media (min-width: 900px){.cases{grid-template-columns: repeat(2,1fr)}}
.case{border-radius: 24px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); padding: 1.05rem; box-shadow: var(--shadow2)}
.case__head{display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.55rem}
.case h3{margin:0; font-family:"Space Grotesk"}

/* Legal */
.legal{max-width: 860px}
.legal__card{margin-top:1rem; border-radius: 24px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); padding: 1.1rem; box-shadow: var(--shadow2)}

/* Toast */
.toast{position:fixed; left:50%; bottom:18px; transform: translateX(-50%); z-index:999;}
.toast__inner{display:flex; gap:.7rem; align-items:center; padding: .85rem 1rem; border-radius: 18px; background: rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); box-shadow: var(--shadow)}
.toast__emoji{font-size:1.2rem}

/* Reveal animations */
.reveal{opacity:0; transform: translateY(12px); filter: blur(2px)}
.reveal.is-in{opacity:1; transform:none; filter:none; transition: opacity .6s var(--ease), transform .6s var(--ease), filter .6s var(--ease); transition-delay: var(--d, 0ms)}

[data-reveal="fade"]{transform:none}
[data-reveal="scale"]{transform: scale(.96)}
[data-reveal="up"]{transform: translateY(14px)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .bg__gradient,.blob,.ticker__track,.mock__svg{animation:none!important}
  .page,.reveal{transition:none!important}
}