@font-face{ font-family:"Poppins"; font-weight:300; font-display:swap; src:url("../fonts/poppins-300.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-weight:400; font-display:swap; src:url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-weight:500; font-display:swap; src:url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-weight:600; font-display:swap; src:url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face{ font-family:"Poppins"; font-weight:700; font-display:swap; src:url("../fonts/poppins-700.woff2") format("woff2"); }

:root{
  --indigo:#4f39f6; --indigo-2:#625fff; --indigo-l:#a9a6ff; --violet:#9810fa;
  --night-1:#15123d; --night-2:#0b0a22; --night-3:#050412;
  --petrol:#0F6B6E; --petrol-l:#7cc4bd; --coral:#E66A5C;
  --ink:#14132b; --ink-2:#4a4a63; --mute:#7a7a92; --line:#e6e6f0; --paper:#f7f7fb;
  --wrap:1200px;
}
*,*::before,*::after{ box-sizing:border-box; } *{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ font-family:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; font-size:16px; line-height:1.7; color:var(--ink); background:#fff; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

.draft{ background:#fff4d6; color:#7a4a05; font-size:12.5px; font-weight:500; text-align:center; padding:7px 16px; border-bottom:1px solid #f0d58f; position:relative; z-index:60; }

.nav{ position:sticky; top:0; z-index:50; background:rgba(11,10,34,.9); backdrop-filter:saturate(160%) blur(14px); -webkit-backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid rgba(255,255,255,.07); }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.nav .brand img{ height:21px; width:auto; }
.nav nav{ display:flex; align-items:center; gap:32px; font-size:14px; font-weight:500; }
.nav nav a{ color:rgba(255,255,255,.72); text-decoration:none; transition:color .2s; }
.nav nav a:hover{ color:#fff; }
@media (max-width:900px){ .nav nav a:not(.btn){ display:none; } .nav nav{ gap:10px; } }

.btn{ display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px; border-radius:999px; font-family:inherit; font-weight:600; font-size:15px;
  text-decoration:none; white-space:nowrap; transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn svg{ width:18px; height:18px; transition:transform .2s ease; } .btn:hover svg{ transform:translateX(3px); }
.btn-indigo{ background:var(--indigo); color:#fff !important; box-shadow:0 14px 30px -12px rgba(79,57,246,.85); } .btn-indigo:hover{ background:#4127e8; }
.btn-coral{ background:var(--coral); color:#fff !important; box-shadow:0 14px 30px -12px rgba(230,106,92,.8); } .btn-coral:hover{ background:#d2574a; }
.btn-ghost{ color:#fff; border:1.5px solid rgba(255,255,255,.26); } .btn-ghost:hover{ border-color:rgba(255,255,255,.6); background:rgba(255,255,255,.06); }
.btn-sm{ height:40px; padding:0 18px; font-size:13.5px; }

/* hero */
.hero{ position:relative; overflow:hidden; isolation:isolate; color:#fff;
  background:
    radial-gradient(760px 520px at 70% 46%, rgba(98,95,255,.34), transparent 66%),
    radial-gradient(520px 360px at 92% 90%, rgba(152,16,250,.22), transparent 70%),
    linear-gradient(165deg, var(--night-1) 0%, var(--night-2) 55%, var(--night-3) 100%); }
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
  background-image:linear-gradient(rgba(169,166,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(169,166,255,.07) 1px, transparent 1px);
  background-size:64px 64px; -webkit-mask-image:radial-gradient(70% 70% at 70% 50%, #000, transparent); mask-image:radial-gradient(70% 70% at 70% 50%, #000, transparent); }
.hero .wrap{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr); gap:32px; align-items:center; min-height:min(calc(100svh - 100px), 860px); padding-top:48px; padding-bottom:72px; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; padding:7px 16px 7px 12px; border-radius:999px; font-size:13px; font-weight:500; color:#d6d5ff;
  background:rgba(255,255,255,.05); border:1px solid rgba(169,166,255,.28); }
.eyebrow i{ width:7px; height:7px; border-radius:50%; background:var(--indigo-2); box-shadow:0 0 0 4px rgba(98,95,255,.28); }
.hero h1{ font-size:clamp(38px,4.4vw,62px); line-height:1.08; letter-spacing:-.03em; font-weight:600; margin:24px 0 20px; text-wrap:balance; }
.hero h1 em{ font-style:normal; background:linear-gradient(92deg, #b9b6ff, #7f7bff 55%, #c38bff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero .lede{ font-size:clamp(16.5px,1.35vw,18.5px); font-weight:300; color:rgba(255,255,255,.78); max-width:31em; }
.hero .actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.hero-visual{ position:relative; }
.hero-visual .scan{ width:108%; max-width:none; margin-left:0; filter:drop-shadow(0 50px 60px rgba(0,0,0,.55)); animation:float 10s ease-in-out infinite; }
.hero-visual::after{ content:""; position:absolute; left:10%; right:4%; bottom:-2%; height:12%; z-index:-1; border-radius:50%;
  background:radial-gradient(closest-side, rgba(98,95,255,.55), transparent); filter:blur(18px); }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
@media (prefers-reduced-motion:reduce){ .hero-visual .scan{ animation:none; } html{ scroll-behavior:auto; } }
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; min-height:0; padding-top:20px; padding-bottom:56px; gap:8px; }
  .hero-visual{ order:-1; } .hero-visual .scan{ width:100%; max-width:680px; margin:0 auto; }
}

/* stats */
.stats{ background:var(--night-3); color:#fff; border-top:1px solid rgba(255,255,255,.06); }
.stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:44px 28px; border-left:1px solid rgba(255,255,255,.08); }
.stat:first-child{ border-left:0; padding-left:0; }
.stat b{ display:block; font-size:clamp(38px,4vw,54px); font-weight:600; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(180deg,#fff, #b9b6ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat span{ display:block; margin-top:12px; font-size:14px; color:rgba(255,255,255,.62); max-width:15em; }
@media (max-width:860px){ .stats .wrap{ grid-template-columns:1fr 1fr; } .stat{ padding:30px 20px; } .stat:nth-child(3){ border-left:0; padding-left:0; } .stat:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.08); } }
.stats .note{ grid-column:1/-1; font-size:12px; color:rgba(255,255,255,.4); padding:0 0 22px; }

/* sections */
.section{ padding:clamp(80px,9vw,128px) 0; }
.section.paper{ background:var(--paper); }
.head{ max-width:760px; margin:0 auto clamp(44px,5vw,64px); text-align:center; }
.kicker{ font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--indigo); }
h2{ font-size:clamp(30px,3.4vw,46px); line-height:1.12; letter-spacing:-.025em; font-weight:600; margin:14px 0 14px; text-wrap:balance; }
.head p{ font-size:17.5px; color:var(--ink-2); font-weight:300; }

/* product stages */
.products{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:960px){ .products{ grid-template-columns:1fr; } }
.product{ position:relative; overflow:hidden; isolation:isolate; border-radius:32px; color:#fff; display:flex; flex-direction:column; min-height:760px;
  box-shadow:0 40px 80px -40px rgba(11,10,34,.55); }
.product.data{ background:radial-gradient(560px 420px at 60% 26%, rgba(98,95,255,.45), transparent 70%), linear-gradient(170deg, #1c1754, var(--night-3)); }
.product.swaya{ background:radial-gradient(560px 420px at 55% 26%, rgba(45,150,148,.40), transparent 70%), linear-gradient(170deg, #0d4144, #03191a); }
.product .art{ height:380px; display:grid; place-items:center; padding:36px 28px 0; }
.product.data .art img{ height:344px; width:auto; filter:drop-shadow(0 30px 40px rgba(0,0,0,.5)); }
.product.swaya .art img{ width:100%; max-width:560px; filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)); transform:rotate(-4deg); }
.product .body{ padding:28px 40px 40px; display:flex; flex-direction:column; flex:1; }
.product .for{ font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; }
.product.data .for{ color:var(--indigo-l); } .product.swaya .for{ color:var(--petrol-l); }
.product h3{ font-size:30px; font-weight:600; letter-spacing:-.02em; margin:10px 0 12px; line-height:1.15; }
.product h3 img{ height:34px; width:auto; margin-top:6px; }
.product p{ color:rgba(255,255,255,.74); font-weight:300; font-size:15.5px; }
.product ul{ list-style:none; margin:22px 0 30px; display:grid; gap:10px; font-size:14.5px; color:rgba(255,255,255,.86); }
.product li{ display:flex; gap:10px; align-items:flex-start; }
.product li svg{ width:20px; height:20px; flex:none; margin-top:2px; }
.product.data li svg{ color:var(--indigo-l); } .product.swaya li svg{ color:var(--petrol-l); }
.product .btn{ margin-top:auto; align-self:flex-start; }
@media (max-width:640px){ .product{ min-height:0; } .product .art{ height:280px; } .product.data .art img{ height:250px; } .product .body{ padding:24px 26px 30px; } }

/* why */
.why{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media (max-width:900px){ .why{ grid-template-columns:1fr; } }
.why .card{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px 30px; transition:transform .25s ease, box-shadow .25s ease; }
.why .card:hover{ transform:translateY(-3px); box-shadow:0 24px 50px -24px rgba(20,19,43,.25); }
.why .ico{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; color:#fff; margin-bottom:22px;
  background:linear-gradient(135deg, var(--indigo-2), var(--violet)); box-shadow:0 12px 24px -12px rgba(79,57,246,.8); }
.why .ico svg{ width:24px; height:24px; }
.why h3{ font-size:19px; font-weight:600; letter-spacing:-.01em; }
.why p{ margin-top:8px; font-size:15px; color:var(--ink-2); font-weight:300; }

/* company */
.company{ position:relative; overflow:hidden; border-radius:36px; color:#fff; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center;
  padding:clamp(40px,6vw,72px); background:radial-gradient(520px 320px at 85% 20%, rgba(98,95,255,.4), transparent 70%), linear-gradient(160deg, var(--night-1), var(--night-3)); }
.company h2{ color:#fff; margin-top:10px; }
.company p{ color:rgba(255,255,255,.72); font-weight:300; }
.company .kicker{ color:var(--indigo-l); }
.company .facts{ display:grid; gap:14px; font-size:15px; }
.company .facts div{ display:flex; gap:14px; align-items:center; padding:16px 20px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.company .facts svg{ width:20px; height:20px; color:var(--indigo-l); flex:none; }
.company .facts a{ text-decoration:none; }
@media (max-width:860px){ .company{ grid-template-columns:1fr; } }

.footer{ background:var(--night-3); color:rgba(255,255,255,.56); font-size:14px; padding:56px 0 34px; }
.footer .top{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; align-items:flex-start; }
.footer img{ height:20px; width:auto; margin-bottom:16px; }
.footer nav{ display:flex; gap:28px; flex-wrap:wrap; }
.footer a{ text-decoration:none; color:rgba(255,255,255,.72); } .footer a:hover{ color:#fff; }
.footer .bottom{ margin-top:40px; padding-top:20px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; }

@media (min-width:1400px){ .hero-visual .scan{ width:120%; } }
@media (min-width:901px) and (max-width:1100px){ .hero .wrap{ grid-template-columns:1fr 1fr; } }

/* touch targets */
.nav .brand{ display:inline-flex; padding:12px 0; }
.footer nav a{ display:inline-block; padding:10px 0; }
.company .facts a{ display:inline-block; padding:12px 0; margin:-6px 0; }

/* mobile menu */
.menu{ display:none; position:relative; }
.menu summary{ list-style:none; width:44px; height:44px; border-radius:12px; display:grid; place-items:center; cursor:pointer; color:#fff; border:1px solid rgba(255,255,255,.2); }
.menu summary::-webkit-details-marker{ display:none; }
.menu summary svg{ width:22px; height:22px; } .menu summary .x{ display:none; }
.menu[open] summary{ background:rgba(255,255,255,.1); } .menu[open] summary .x{ display:block; } .menu[open] summary .bars{ display:none; }
.menu .panel{ position:absolute; right:0; top:calc(100% + 12px); width:min(260px, calc(100vw - 32px)); padding:8px; border-radius:18px;
  background:#15123d; border:1px solid rgba(255,255,255,.1); box-shadow:0 24px 50px -12px rgba(0,0,0,.6); display:grid; }
.menu .panel a{ display:block !important; padding:14px 16px; border-radius:12px; color:#fff !important; font-weight:500; font-size:16px; text-decoration:none; }
.menu .panel a:hover{ background:rgba(255,255,255,.08); }
@media (max-width:900px){ .menu{ display:block; } }