:root{
  --bg:#0b0f1a; --fg:#e6edf3; --muted:#9fb0c0; --accent:#f76900;
  --card:#0f1524; --line:#1e293b; --ring:rgba(247,105,0,.22);
  --shadow:0 1px 2px rgba(0,0,0,.2),0 10px 20px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  background: radial-gradient(1100px 660px at 80% -10%, rgba(247,105,0,.10), transparent 55%),
              radial-gradient(900px 520px at -10% 5%, rgba(62,121,247,.10), transparent 55%),
              linear-gradient(120deg, #0b0f1a, #0e1324, #0b0f1a);
  background-size:100% 100%, 100% 100%, 300% 300%;
  animation: gradientShift 18s ease-in-out infinite;
  color:var(--fg); -webkit-font-smoothing:antialiased; line-height:1.55;
  overflow-x:hidden;
}
@keyframes gradientShift{0%{background-position:0% 0%,0% 0%,0% 0%}50%{background-position:0% 0%,0% 0%,100% 50%}100%{background-position:0% 0%,0% 0%,0% 0%}}
.grain{position:fixed; inset:-20%; background:url('/assets/grain.png') repeat; opacity:.05; mix-blend-mode:soft-light; pointer-events:none; animation:grain 2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-5%,2%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-2%,3%)}100%{transform:translate(0,0)}}
.wrap{max-width:1180px; margin-inline:auto; padding:0 20px}
a{color:inherit; text-decoration:none}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.15rem; border-radius:14px; font-weight:800; letter-spacing:.2px; border:1px solid rgba(255,255,255,.08); transition:transform .12s ease, box-shadow .12s ease, background .2s ease}
.btn.primary{background:var(--accent); color:#fff; box-shadow:0 8px 20px rgba(247,105,0,.28)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent}
.btn.small{padding:.6rem .85rem; border-radius:12px}
.btn.magnetic{position:relative; will-change:transform}
.tag{font-size:.78rem; padding:.35rem .6rem; border:1px solid var(--line); border-radius:999px; color:var(--muted)}
.tiny{font-size:.88rem}
.muted{color:var(--muted)}
.glass{backdrop-filter:saturate(140%) blur(10px); background:color-mix(in oklab,var(--card) 75%, transparent); border:1px solid var(--line); box-shadow:var(--shadow)}

header.site{position:sticky; top:0; z-index:40; border-bottom:1px solid rgba(255,255,255,.08); background:color-mix(in oklab,var(--bg) 92%, transparent); backdrop-filter:blur(8px)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:.7rem 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:900; letter-spacing:.2px}
.brand-mark{width:28px; height:28px}
.brand-name{font-weight:900; letter-spacing:.2px}
.navlinks{display:flex; gap:18px; align-items:center}
.menu-btn{display:none}
@media (max-width:900px){ .navlinks{display:none} .menu-btn{display:inline-flex} }

.hero{padding:86px 0 36px; position:relative}
.fx .blob{position:absolute; filter: blur(44px); opacity:.35; transform-origin:center}
.fx .b1{width:460px;height:460px;left:-80px;top:-60px;background:radial-gradient(circle at 30% 30%, rgba(247,105,0,.6), transparent 60%);animation:float 22s ease-in-out infinite}
.fx .b2{width:420px;height:420px;right:-80px;top:-40px;background:radial-gradient(circle at 60% 40%, rgba(62,121,247,.5), transparent 60%);animation:float 26s ease-in-out -4s infinite}
.fx .b3{width:380px;height:380px;left:20%;bottom:-120px;background:radial-gradient(circle at 50% 50%, rgba(111,255,200,.4), transparent 60%);animation:float 24s ease-in-out -8s infinite}
.fx .glow{position:absolute; inset:20% 10% 30% 10%; background:radial-gradient(60% 60% at 50% 30%, rgba(255,255,255,.04), transparent 60%)}
@keyframes float{0%{transform:translate(0,0)}50%{transform:translate(20px,-10px)}100%{transform:translate(0,0)}}

.hero-head{text-align:center}
.glyph{width:72px; height:72px; filter: drop-shadow(0 10px 24px rgba(247,105,0,.35))}
.headline{font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.04; letter-spacing:-.02em; font-weight:1000; text-wrap:balance; margin:12px 0 8px}
.sub{max-width:780px; margin:0 auto; color:var(--muted); font-size:clamp(1rem,1.4vw,1.125rem)}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px; justify-content:center}

.hero-showcase{display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-top:28px}
@media (max-width:900px){ .hero-showcase{grid-template-columns:1fr} }
.panel{position:relative; padding:0; border-radius:16px; border:1px solid var(--line); background:var(--card); box-shadow:var(--shadow); overflow:hidden}
.panel header{display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); background:color-mix(in oklab, var(--bg) 88%, transparent)}
.panel header .dot{width:10px; height:10px; border-radius:999px; background:color-mix(in oklab, var(--accent) 40%, var(--bg))}
.panel .body{padding:14px; display:grid; gap:12px}
.row{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.badge{padding:.25rem .55rem; border-radius:999px; border:1px solid var(--line); font-weight:800; font-size:.86rem; color:var(--muted); background:var(--bg)}
.timeline{margin:0; padding-left:16px; display:grid; gap:8px}
.timeline li{position:relative}
.timeline li span{color:var(--muted); font-size:.9rem}
.timeline li::before{content:''; position:absolute; left:-14px; top:.45rem; width:8px; height:8px; border-radius:999px; background:var(--accent)}

.stats{display:grid; gap:12px; align-content:start}
.metric{padding:16px; border-radius:12px; background:var(--bg); border:1px dashed var(--line); display:grid; gap:4px}
.metric b{font-size:1.18rem}
.metric span{color:var(--muted); font-size:.92rem}

.marquee{overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:24px}
.marquee .track{display:flex; gap:28px; padding:12px 0; animation: marquee 24s linear infinite; white-space:nowrap}
.marquee span{padding:.35rem .7rem; border:1px solid var(--line); border-radius:999px; background:color-mix(in oklab,var(--bg) 96%, transparent); font-weight:800; color:var(--muted)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.section{padding:64px 0}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .grid-3{grid-template-columns:1fr} }
.card{border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow)}
.card.pad{padding:20px}
.feature .ico{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:color-mix(in oklab,var(--accent) 22%, var(--bg)); font-weight:900}

.pricing-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.pricing{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .pricing{grid-template-columns:1fr} }
.price{padding:26px; border:1px solid var(--line); border-radius:16px; background:var(--bg); box-shadow:var(--shadow)}
.price.featured{border-color:var(--accent)}
.amt{font-size:2rem; font-weight:1000; letter-spacing:-.02em}
.note{color:var(--muted); font-size:.95rem}
.actions{margin-top:16px}

.faq details{border:1px solid var(--line); border-radius:14px; padding:14px 16px; background:var(--bg)}
.faq summary{cursor:pointer; font-weight:900}

.lead{display:grid; gap:12px}
.lead input, .lead textarea{width:100%; padding:14px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--fg); outline:none}
.lead input:focus, .lead textarea:focus{ box-shadow:0 0 0 6px var(--ring); border-color:var(--accent) }

.foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:36px 0; border-top:1px solid var(--line)}
.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}

.reveal{opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease}
.reveal.visible{opacity:1; transform:none}

.tilt{transform-style:preserve-3d; transition:transform .12s ease}
.tilt::after{content:''; position:absolute; inset:0; background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.08), transparent 60%); transform:translateX(-100%); transition:transform .4s ease; pointer-events:none}
.tilt.active::after{transform:translateX(100%)}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
  .tilt,.magnetic{transform:none !important}
}