:root {
  --bg: #030303;
  --panel: rgba(255,255,255,.055);
  --line: rgba(255,255,255,.14);
  --text: #f4f3ef;
  --muted: #a2a2a8;
  --lime: #b8ff72;
  --violet: #9e7cff;
  --cyan: #70e8ff;
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 8%, rgba(158,124,255,.11), transparent 31rem),
    linear-gradient(180deg, #020202, #060608 62%, #020202);
  font-family: var(--sans);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
.noise {
  position: fixed; inset: 0; z-index: 20; pointer-events: none; opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.site-header {
  width: min(1180px, calc(100% - 40px));
  height: 76px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.09); position: relative; z-index: 10;
}
.brand { display: inline-flex; gap: 10px; align-items: center; font-size: 18px; font-weight: 720; letter-spacing: -.03em; }
.brand-mark { width: 34px; height: 34px; }
nav { display: flex; gap: 34px; }
nav a { color: #b8b8bd; font-size: 13px; transition: color .25s ease; }
nav a:hover { color: white; }
.header-cta { font-size: 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: 10px 15px; background: rgba(255,255,255,.035); }

.hero {
  width: min(1180px, calc(100% - 40px)); min-height: 790px; margin: 0 auto; padding: 85px 0 55px;
  display: grid; grid-template-columns: .92fr 1.08fr; gap: 20px; align-items: center; position: relative;
}
.hero-copy { position: relative; z-index: 3; }
.eyebrow { color: #b8b8bd; text-transform: uppercase; letter-spacing: .16em; font-size: 10px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.eyebrow span { width: 24px; height: 1px; background: linear-gradient(90deg, var(--lime), var(--violet)); }
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -.055em; }
h1 { font-size: clamp(64px, 7.3vw, 116px); line-height: .83; margin: 25px 0 28px; }
h1 em, h2 em { font-weight: 400; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.68); text-shadow: 0 0 42px rgba(158,124,255,.16); }
.hero-lede { color: var(--muted); max-width: 510px; line-height: 1.7; font-size: 15px; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 34px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 18px; min-height: 50px; border-radius: 99px; padding: 0 23px; font-size: 12px; font-weight: 750; }
.button-primary { color: #090909; background: linear-gradient(105deg, var(--lime), #fff 55%, #c5b4ff); box-shadow: 0 9px 45px rgba(184,255,114,.16); transition: transform .25s, box-shadow .25s; }
.button-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 50px rgba(184,255,114,.27); }
.text-link { color: #c4c4c8; font-size: 12px; }

.hero-visual { min-height: 650px; position: relative; display: grid; place-items: center; isolation: isolate; perspective: 900px; }
.hero-visual::before {
  content: ""; position: absolute; width: 82%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12), rgba(158,124,255,.08) 26%, transparent 66%);
  filter: blur(10px); animation: breathe 5.5s ease-in-out infinite;
}
.aurora { position: absolute; width: 90%; height: 22%; border-radius: 50%; filter: blur(38px); opacity: .46; mix-blend-mode: screen; }
.aurora-one { transform: rotate(-18deg); background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent); animation: driftA 7s ease-in-out infinite alternate; }
.aurora-two { transform: rotate(21deg); background: linear-gradient(90deg, transparent, var(--lime), var(--violet), transparent); animation: driftB 8s ease-in-out infinite alternate; }
.orbit { position: absolute; width: 84%; aspect-ratio: 2.15; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; transform: rotate(-17deg); box-shadow: inset 0 0 18px rgba(158,124,255,.15), 0 0 22px rgba(112,232,255,.14); animation: orbitTilt 8s ease-in-out infinite; }
.orbit::before, .orbit::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: conic-gradient(from 10deg, transparent 0 22%, rgba(184,255,114,.9) 30%, transparent 38% 67%, rgba(158,124,255,.8) 74%, transparent 84%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 9s linear infinite; }
.orbit-b { width: 72%; transform: rotate(29deg); opacity: .62; animation-delay: -3s; }
.orbit-b::before { animation-direction: reverse; animation-duration: 12s; }
.orbit i { position: absolute; width: 8px; height: 8px; background: white; border-radius: 50%; box-shadow: 0 0 18px 5px var(--violet); top: 26%; left: 5%; }
.orbit i:nth-child(2) { top: 72%; left: 84%; box-shadow: 0 0 18px 5px var(--lime); }
.logo-core {
  width: min(270px, 42vw); aspect-ratio: 1; border-radius: 42%; position: relative; display: grid; place-items: center; z-index: 3;
  background: radial-gradient(circle at 40% 28%, rgba(255,255,255,.13), rgba(255,255,255,.025) 48%, rgba(0,0,0,.32));
  border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 0 55px rgba(158,124,255,.12), 0 30px 90px rgba(0,0,0,.7), 0 0 90px rgba(158,124,255,.09);
  backdrop-filter: blur(16px); transform: rotate(-4deg); animation: logoFloat 5s ease-in-out infinite;
}
.logo-core::after { content:""; position:absolute; inset: 9%; border: 1px solid rgba(255,255,255,.08); border-radius: 38%; }
.logo-core svg { width: 64%; filter: drop-shadow(0 0 22px rgba(255,255,255,.16)); }
.logo-core span { position: absolute; bottom: 22px; font-size: 8px; letter-spacing: .28em; color: #a9a9ae; }
.product-card {
  position: absolute; left: 0; bottom: 118px; width: 205px; padding: 10px; z-index: 5; border: 1px solid var(--line); border-radius: 18px;
  background: rgba(12,12,15,.78); backdrop-filter: blur(18px); box-shadow: 0 18px 55px rgba(0,0,0,.55); transform: rotate(-7deg); animation: cardFloat 6s ease-in-out infinite;
}
.product-image { height: 145px; border-radius: 11px; overflow: hidden; background: #141416; }
.product-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); }
.product-meta { padding: 10px 3px 3px; display: flex; flex-direction: column; gap: 3px; }
.product-meta span, .output-chip small { color: #82828a; font-size: 9px; }
.product-meta strong, .output-chip strong { font-size: 11px; }
.status-dot { position: absolute; right: 13px; bottom: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 13px var(--lime); }
.output-chip { position: absolute; right: 1%; top: 20%; z-index: 5; border-radius: 14px; border: 1px solid var(--line); padding: 11px 14px; background: rgba(12,12,15,.74); backdrop-filter: blur(16px); display: flex; align-items: center; gap: 10px; transform: rotate(5deg); animation: cardFloat 6.8s ease-in-out infinite reverse; }
.output-chip span:last-child { display:flex; flex-direction:column; gap:2px; }
.play-mini { width: 30px; height: 30px; border-radius: 50%; display:grid; place-items:center; font-size:9px; color:#050505; background: linear-gradient(135deg,var(--lime),white); }
.particles b { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: white; box-shadow: 0 0 10px white; animation: twinkle 3s ease-in-out infinite; }
.particles b:nth-child(1){left:12%;top:25%}.particles b:nth-child(2){left:28%;top:12%;animation-delay:-1s}.particles b:nth-child(3){right:11%;top:39%;animation-delay:-2s}.particles b:nth-child(4){right:28%;bottom:15%;animation-delay:-.5s}.particles b:nth-child(5){left:22%;bottom:25%;animation-delay:-1.5s}.particles b:nth-child(6){right:4%;bottom:34%;animation-delay:-2.5s}
.hero-metrics { position:absolute; left:0; bottom:40px; display:flex; gap:42px; z-index:4; }
.hero-metrics div { display:flex; align-items:center; gap:10px; }
.hero-metrics strong { font-family:var(--serif); font-size:27px; font-weight:400; }
.hero-metrics strong span { font-size:13px; }
.hero-metrics div>span { color:#7f7f86; font-size:9px; text-transform:uppercase; letter-spacing:.1em; line-height:1.45; }

.section { width:min(1180px,calc(100% - 40px)); margin:0 auto; padding:130px 0; border-top:1px solid rgba(255,255,255,.08); }
.section-head { max-width:700px; margin-bottom:55px; }
h2 { font-size:clamp(48px,6.2vw,88px); line-height:.95; }
.section-head>p:last-child,.pricing-copy>p:last-child { color:var(--muted); line-height:1.7; font-size:14px; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.step-card { min-height:330px; padding:26px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); position:relative; overflow:hidden; transition:transform .35s,border-color .35s; }
.step-card:hover { transform:translateY(-8px); border-color:rgba(184,255,114,.35); }
.step-card::before { content:""; position:absolute; width:160px; height:160px; right:-80px; top:-80px; border-radius:50%; background:var(--violet); filter:blur(70px); opacity:.12; }
.step-number { color:#66666d; font-size:10px; letter-spacing:.18em; }
.step-icon { width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);margin:65px 0 24px;color:var(--lime); }
.step-card h3 { font-family:var(--serif);font-size:27px;font-weight:400;margin:0 0 12px; }
.step-card p { color:var(--muted);font-size:13px;line-height:1.7;margin:0; }
.step-line { position:absolute;left:26px;right:26px;bottom:0;height:2px;background:linear-gradient(90deg,var(--lime),var(--violet),transparent);transform:scaleX(0);transform-origin:left;transition:transform .45s; }
.step-card:hover .step-line { transform:scaleX(1); }

.pricing { display:grid;grid-template-columns:1fr .72fr;gap:80px;align-items:center; }
.pricing-copy h2 { margin:22px 0 28px; }
.price-card { border:1px solid rgba(255,255,255,.17);border-radius:28px;padding:32px;background:radial-gradient(circle at 90% 0,rgba(158,124,255,.16),transparent 42%),rgba(255,255,255,.04);box-shadow:0 30px 90px rgba(0,0,0,.36); }
.price-top { display:flex;justify-content:space-between;align-items:center;font-size:12px; }
.badge { border:1px solid rgba(184,255,114,.3);color:var(--lime);border-radius:99px;padding:7px 10px;font-size:9px; }
.price { margin:40px 0 25px;display:flex;flex-direction:column;gap:7px; }
.price strong { font-family:var(--serif);font-size:54px;font-weight:400; }
.price span { color:var(--muted);font-size:11px; }
.price-card ul { list-style:none;padding:0;margin:0 0 28px;display:grid;gap:13px; }
.price-card li { color:#bdbdc3;font-size:12px; }
.price-card li::before { content:"✓";color:var(--lime);margin-right:10px; }
.price-card .button { width:100%; }
.price-card small { display:block;color:#77777d;font-size:9px;line-height:1.5;text-align:center;margin-top:14px; }
footer { width:min(1180px,calc(100% - 40px));margin:0 auto;padding:40px 0 55px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;align-items:center;color:#73737a;font-size:10px; }
footer .brand { color:white;font-size:15px; }
footer .brand-mark { width:28px;height:28px; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .8s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity:1; transform:none; }

@keyframes spin { to { transform:rotate(1turn); } }
@keyframes breathe { 50% { transform:scale(1.08); opacity:.72; } }
@keyframes orbitTilt { 0%,100% { transform:rotate(-17deg) rotateX(61deg) rotateZ(0); } 50% { transform:rotate(-12deg) rotateX(66deg) rotateZ(9deg); } }
@keyframes logoFloat { 0%,100%{transform:rotate(-4deg) translateY(0)} 50%{transform:rotate(-1deg) translateY(-13px)} }
@keyframes cardFloat { 0%,100%{translate:0 0} 50%{translate:0 -13px} }
@keyframes driftA { to{transform:rotate(-11deg) translate(4%,8%) scale(1.08)} }
@keyframes driftB { to{transform:rotate(15deg) translate(-5%,-7%) scale(.94)} }
@keyframes twinkle { 0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.5)} }

@media (max-width: 900px) {
  nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:65px; min-height:auto; }
  .hero-copy { text-align:center; }
  .eyebrow,.hero-actions { justify-content:center; }
  .hero-lede { margin-left:auto;margin-right:auto; }
  .hero-visual { min-height:560px; margin-top:-30px; }
  .product-card { left:5%; bottom:72px; }
  .output-chip { right:4%; }
  .hero-metrics { position:relative;bottom:auto;justify-content:center;margin:0 auto 50px; }
  .steps { grid-template-columns:1fr; }
  .step-card { min-height:270px; }
  .step-icon { margin:35px 0 22px; }
  .pricing { grid-template-columns:1fr;gap:45px; }
}
@media (max-width: 560px) {
  .site-header,.hero,.section,footer { width:min(100% - 26px,1180px); }
  .site-header { height:66px; }
  .header-cta { padding:8px 11px; }
  h1 { font-size:59px; }
  .hero { padding-top:55px; }
  .hero-actions { flex-direction:column;gap:16px; }
  .hero-visual { min-height:455px; margin-top:-8px; }
  .logo-core { width:190px; }
  .orbit { width:102%; }
  .orbit-b { width:88%; }
  .product-card { width:128px; padding:6px; bottom:24px; left:0; }
  .product-image { height:82px; }
  .output-chip { top:12%; right:0; padding:8px 10px; }
  .hero-metrics { gap:16px; flex-wrap:wrap; }
  .hero-metrics div { gap:6px; }
  .hero-metrics strong { font-size:21px; }
  .section { padding:90px 0; }
  h2 { font-size:51px; }
  footer { flex-direction:column;align-items:flex-start;gap:16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition-duration:.01ms!important; }
  .reveal { opacity:1;transform:none; }
}