/* ==========================================================================
   Scaleup — Premium public-site layer (loaded after main.css, public pages only)
   Motion is progressive: everything is readable with JS off / reduced motion.
   ========================================================================== */

@view-transition { navigation: auto; }

:root {
  --violet: #8b5cf6; --purple: #a855f7; --sky: #38bdf8; --mint: #34d399;
  --glass: rgba(255,255,255,.035);
  --glass-2: rgba(255,255,255,.06);
  --glass-b: rgba(255,255,255,.09);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-lg: 0 40px 90px -30px rgba(0,0,0,.75);
}

html { scrollbar-color: #2a2f4a transparent; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

.site { background: #05060b; }
.site::before { background: radial-gradient(70% 45% at 12% -5%, #141c46 0%, transparent 60%), radial-gradient(55% 40% at 100% 0%, #221046 0%, transparent 62%), #05060b; }
/* film grain instead of the old grid */
.site::after {
  opacity: .05; mask-image: none; -webkit-mask-image: none; background-size: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.site ::selection { background: #7c5cff66; color: #fff; }
.site h1, .site h2, .site h3 { letter-spacing: -.035em; }
.site h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.05; }
.site section { padding: 130px 0; }
.site section.tight { padding: 80px 0; }
.site .container { max-width: 1240px; }

/* ---------- scroll progress + cursor + preloader ---------- */
.progress-bar { position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 200; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--violet), var(--sky)); pointer-events: none; }
.cursor-ring { position: fixed; top: 0; left: 0; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; border: 1px solid rgba(167,139,250,.55); pointer-events: none; z-index: 300; opacity: 0; transition: width .25s var(--ease-out), height .25s var(--ease-out), margin .25s var(--ease-out), background .25s, opacity .3s; }
.cursor-ring.on { opacity: 1; }
.cursor-ring.hot { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(139,92,246,.14); border-color: rgba(56,189,248,.6); }
.cursor-dot { position: fixed; top: 0; left: 0; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #fff; pointer-events: none; z-index: 301; opacity: 0; transition: opacity .3s; }
.cursor-dot.on { opacity: 1; }
@media (pointer: coarse) { .cursor-ring, .cursor-dot { display: none; } }

.preloader { position: fixed; inset: 0; z-index: 500; background: #05060b; display: grid; place-items: center; transition: opacity .7s var(--ease-out), visibility .7s; }
.preloader.done { opacity: 0; visibility: hidden; }
.preloader img { width: 92px; height: 92px; animation: pre-pulse 1.2s var(--ease-out) infinite alternate; filter: drop-shadow(0 0 40px rgba(139,92,246,.6)); }
@keyframes pre-pulse { from { transform: scale(.86); opacity: .6; } to { transform: scale(1); opacity: 1; } }

/* ---------- floating glass nav ---------- */
.site .nav { padding: 16px 0; background: none; border: 0; backdrop-filter: none; transition: padding .4s var(--ease-out); }
.site .nav .container { max-width: 1200px; padding: 8px 10px 8px 22px; border-radius: 999px; background: rgba(10,12,22,.5); border: 1px solid var(--glass-b); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 18px 50px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.06); transition: background .4s, box-shadow .4s; }
.site .nav.scrolled { padding: 10px 0; background: none; border: 0; }
.site .nav.scrolled .container { background: rgba(8,9,18,.78); }
.site .nav-links { gap: 6px; }
.site .nav-links a { padding: 9px 16px; border-radius: 999px; font-size: .9rem; color: var(--text-1); transition: background .25s, color .25s; }
.site .nav-links a::after { display: none; }
.site .nav-links a:hover { background: var(--glass-2); color: #fff; }
.site .nav-actions .btn { padding: 11px 22px; }

/* ---------- buttons ---------- */
.site .btn { position: relative; overflow: hidden; letter-spacing: -.005em; }
.site .btn-primary { background: linear-gradient(120deg, #5b8cff 0%, #8b5cf6 55%, #b05cff 100%); box-shadow: 0 10px 34px -10px rgba(124,92,255,.75), inset 0 1px 0 rgba(255,255,255,.28); }
.site .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s var(--ease-out); }
.site .btn-primary:hover::before { transform: translateX(120%); }
.site .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px -10px rgba(124,92,255,.9), inset 0 1px 0 rgba(255,255,255,.3); }
.site .btn-ghost { background: var(--glass); border-color: var(--glass-b); }
.site .btn-ghost:hover { background: var(--glass-2); border-color: rgba(167,139,250,.55); }
.btn-xl { padding: 18px 34px; font-size: 1.02rem; }
[data-magnetic] { transition: transform .35s var(--ease-out); will-change: transform; }

/* ---------- split text ---------- */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .12em; margin: 0 -.04em -.12em; }
.js [data-split] .wi { display: inline-block; transform: translateY(112%) rotate(4deg); transform-origin: 0 100%; transition: transform 1s var(--ease-out); transition-delay: calc(var(--i) * 55ms + var(--d, 0ms)); }
.js [data-split].is-in .wi { transform: none; }
.reveal { transition-timing-function: var(--ease-out); }

/* ---------- pill / eyebrow ---------- */
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 9px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-b); font-size: .82rem; color: var(--text-1); backdrop-filter: blur(10px); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: ping 2.2s infinite; margin-left: 4px; }
.pill b { font-weight: 600; color: #fff; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); margin-bottom: 18px; }
.kicker::before { content: ''; width: 26px; height: 1px; background: linear-gradient(90deg, var(--violet), var(--sky)); }
.sec-head { max-width: 720px; margin-bottom: 64px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head.center .kicker { justify-content: center; }
.sec-head p { font-size: 1.1rem; max-width: 56ch; }
.sec-head.center p { margin-left: auto; margin-right: auto; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero-x { position: relative; min-height: 100svh; padding: 150px 0 90px; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; opacity: 0; transition: opacity 1.6s var(--ease-out); -webkit-mask-image: linear-gradient(#000 55%, transparent 100%); mask-image: linear-gradient(#000 55%, transparent 100%); }
#hero-canvas.ready { opacity: .95; }
.hero-x::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 50% at 20% 30%, rgba(91,140,255,.16), transparent 70%), radial-gradient(50% 45% at 85% 20%, rgba(168,85,247,.18), transparent 70%); }
.hero-x::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 220px; z-index: -1; background: linear-gradient(transparent, #05060b); }
.hero-x .grid-lines { position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent); }
.hero-x-inner { display: grid; grid-template-columns: 1.02fr .98fr; gap: 30px; align-items: center; width: 100%; }
.hero-title { font-size: clamp(2.9rem, 6.6vw, 6.1rem); line-height: 1; letter-spacing: -.045em; margin: 26px 0 26px; }
.hero-sub { font-size: clamp(1.02rem, 1.4vw, 1.2rem); color: var(--text-1); max-width: 50ch; line-height: 1.65; margin-bottom: 38px; opacity: .92; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 46px; }
.proof-row { display: flex; flex-wrap: wrap; gap: 0; }
.proof { padding: 0 28px; border-left: 1px solid var(--glass-b); }
.proof:first-child { padding-left: 0; border-left: 0; }
.proof b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: #fff; letter-spacing: -.02em; }
.proof span { font-size: .78rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .09em; }

/* floating product composition */
.stage-wrap { perspective: 1500px; position: relative; }
.stage { position: relative; width: min(600px, 100%); aspect-ratio: 1 / 1.02; margin-inline: auto; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease-out); }
.layer { position: absolute; transform: translateZ(var(--z, 0px)); animation: float 8s ease-in-out infinite; animation-delay: var(--fd, 0s); will-change: translate; }
.hero-off .layer, .hero-off .pill .dot, .hero-off .scroll-cue::after, .hero-off .code .caret { animation-play-state: paused; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.gl { border-radius: 22px; background: linear-gradient(160deg, rgba(34,38,72,.86), rgba(14,16,34,.82)); border: 1px solid rgba(255,255,255,.13); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.14); }
.win-bar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.win-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.win-bar i:nth-child(1) { background: #ff6b6b; } .win-bar i:nth-child(2) { background: #ffd166; } .win-bar i:nth-child(3) { background: #4ade80; }
.win-bar span { margin-left: 10px; font-size: .72rem; color: var(--text-3); font-family: var(--font-body); }
.l-dash { left: 0; top: 4%; width: 68%; --z: 20px; }
.l-dash .body { padding: 18px 20px 20px; }
.kpi-row { display: flex; gap: 10px; margin-bottom: 14px; }
.kpi { flex: 1; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.05); }
.kpi small { display: block; color: var(--text-3); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.kpi b { font-family: var(--font-display); font-size: 1rem; color: #fff; }
.kpi b.up { color: var(--mint); }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .line { stroke-dasharray: 700; stroke-dashoffset: 700; animation: draw 2.6s var(--ease-out) .6s forwards; }
.chart .area { opacity: 0; animation: fade-in 1.4s ease 1.6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }
.l-code { left: 4%; bottom: 3%; width: 60%; --z: 70px; --fd: -2s; }
.code { padding: 14px 18px 18px; font: 500 .7rem/1.75 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; color: #b8bdd6; white-space: pre; overflow: hidden; }
.code .k { color: #c084fc; } .code .t { color: #38bdf8; } .code .f { color: #a5b4fc; } .code .c { color: #5c6285; } .code .s { color: #86efac; }
.code .caret { display: inline-block; width: 7px; height: 13px; background: var(--sky); vertical-align: -2px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.l-phone { right: 2%; top: 14%; width: 30%; --z: 110px; --fd: -4s; border-radius: 30px; padding: 8px; }
.phone-screen { border-radius: 23px; background: linear-gradient(180deg, #10132a, #0a0c1c); padding: 14px 12px 16px; aspect-ratio: 9 / 18; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.phone-screen .notch { width: 34%; height: 5px; border-radius: 9px; background: rgba(255,255,255,.16); margin: 0 auto 4px; }
.ring { width: 64%; aspect-ratio: 1; margin: 6px auto; border-radius: 50%; background: conic-gradient(var(--violet) 0 68%, rgba(255,255,255,.09) 0); display: grid; place-items: center; position: relative; }
.ring::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: #0c0f22; }
.ring b { position: relative; z-index: 1; font-family: var(--font-display); font-size: .82rem; color: #fff; }
.row-i { height: 26px; border-radius: 9px; background: rgba(255,255,255,.06); position: relative; }
.row-i::before { content: ''; position: absolute; left: 8px; top: 7px; width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, var(--violet), var(--sky)); }
.row-i::after { content: ''; position: absolute; left: 28px; top: 11px; width: 46%; height: 4px; border-radius: 3px; background: rgba(255,255,255,.2); }
.l-orb { right: 8%; top: -2%; width: 21%; aspect-ratio: 1; --z: 150px; --fd: -1s; }
.orb-3d { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #e9d5ff 0%, #a855f7 22%, #5b21b6 52%, #150a33 100%); box-shadow: 0 30px 60px -12px rgba(124,58,237,.7), inset -10px -14px 30px rgba(0,0,0,.45); position: relative; }
.orb-3d::before { content: ''; position: absolute; inset: -22%; border-radius: 50%; border: 1px solid rgba(56,189,248,.5); transform: rotateX(72deg) rotateZ(-20deg); }
.orb-3d::after { content: ''; position: absolute; inset: -38%; border-radius: 50%; border: 1px dashed rgba(167,139,250,.35); transform: rotateX(72deg) rotateZ(25deg); }
.chip-f { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px 9px 11px; border-radius: 999px; font-size: .74rem; color: #e6e8f5; white-space: nowrap; }
.chip-f i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); }
.chip-f.b i { background: var(--sky); box-shadow: 0 0 12px var(--sky); } .chip-f.p i { background: var(--purple); box-shadow: 0 0 12px var(--purple); }
.l-c1 { left: 42%; top: -1%; --z: 130px; --fd: -3s; } .l-c2 { right: -2%; bottom: 24%; --z: 140px; --fd: -5s; } .l-c3 { left: -3%; bottom: 36%; --z: 120px; --fd: -1.5s; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); width: 24px; height: 40px; border: 1px solid var(--glass-b); border-radius: 14px; display: grid; justify-items: center; padding-top: 8px; opacity: .8; }
.scroll-cue::after { content: ''; width: 3px; height: 8px; border-radius: 3px; background: #fff; animation: cue 1.8s infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---------- marquee ---------- */
.marquee-x { position: relative; padding: 26px 0; border-block: 1px solid var(--glass-b); background: rgba(255,255,255,.015); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-x .track { display: flex; width: max-content; gap: 14px; animation: marquee 46s linear infinite; }
.marquee-x:hover .track { animation-play-state: paused; }
.marquee-x .track span { display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px; border: 1px solid var(--glass-b); border-radius: 999px; background: var(--glass); font-family: var(--font-display); font-weight: 500; color: var(--text-1); font-size: .95rem; white-space: nowrap; }
.marquee-x .track span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--sky)); }
@keyframes marquee { to { transform: translateX(calc(-50% - 7px)); } }

/* ==========================================================================
   Spotlight cards / bento
   ========================================================================== */
.spot { position: relative; isolation: isolate; }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(139,92,246,.22), transparent 45%); }
.spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(167,139,250,.9), rgba(56,189,248,.4) 40%, transparent 60%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.spot:hover::before, .spot:hover::after { opacity: 1; }

.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.bento-item { grid-column: span 4; display: flex; flex-direction: column; min-height: 380px; padding: 30px; border-radius: 30px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--glass-b); overflow: hidden; transition: transform .6s var(--ease-out), border-color .4s; }
.bento-item:hover { transform: translateY(-4px); border-color: rgba(167,139,250,.35); }
.bento-item.b7 { grid-column: span 7; }
.bento-item.b7, .bento-item.b6 { flex-direction: row; align-items: center; gap: 10px; }
.bento-item.b5 { grid-column: span 5; }
.bento-item.b6 { grid-column: span 6; }
.bento-item .b-text { position: relative; z-index: 2; }
.bento-item.b7 .b-text, .bento-item.b6 .b-text { flex: 0 0 42%; }
.bento-item h3 { font-size: 1.55rem; margin: 14px 0 10px; }
.bento-item p { font-size: .96rem; color: var(--text-2); margin: 0 0 18px; max-width: 38ch; }
.b-idx { font-family: var(--font-display); font-size: .78rem; color: var(--text-3); letter-spacing: .12em; }
.b-link { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 600; color: #fff; }
.b-link svg { transition: transform .4s var(--ease-out); }
.bento-item:hover .b-link svg { transform: translateX(6px); }
.b-art { margin-top: auto; width: 100%; transition: transform .9s var(--ease-out); }
.bento-item.b7 .b-art, .bento-item.b6 .b-art { margin: 0 -14px 0 0; flex: 1; min-width: 0; }
.bento-item:hover .b-art { transform: scale(1.045) translateY(-4px); }
.art { display: block; width: 100%; height: auto; overflow: visible; }
.art .pulse { transform-box: fill-box; transform-origin: center; }
.art .flow { stroke-dasharray: 6 8; }
.art .bar { transform-box: fill-box; transform-origin: 50% 100%; }
.spot:hover .art .pulse, .art-live .art .pulse { animation: pulse-n 3s ease-in-out infinite; }
.spot:hover .art .pulse.d2, .art-live .art .pulse.d2 { animation-delay: -1s; } .spot:hover .art .pulse.d3, .art-live .art .pulse.d3 { animation-delay: -2s; }
.spot:hover .art .flow, .art-live .art .flow { animation: flow 2.4s linear infinite; }
.spot:hover .art .bar, .art-live .art .bar { animation: grow 2.8s var(--ease-out) infinite alternate; }
@keyframes pulse-n { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes flow { to { stroke-dashoffset: -28; } }
@keyframes grow { from { transform: scaleY(.55); } to { transform: scaleY(1); } }

/* ---------- rail (featured demos) ---------- */
.rail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.rail-ctrl { display: flex; gap: 10px; }
.round-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--glass-b); background: var(--glass); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .3s, border-color .3s, transform .3s var(--ease-out); }
.round-btn:hover { background: var(--glass-2); border-color: rgba(167,139,250,.6); transform: scale(1.06); }
.rail { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px max(24px, calc((100vw - 1240px) / 2 + 24px)) 40px; scrollbar-width: none; overscroll-behavior-x: contain; }
.rail::-webkit-scrollbar { display: none; }
.demo-card { flex: 0 0 min(440px, 84vw); scroll-snap-align: start; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border: 1px solid var(--glass-b); display: block; transition: transform .6s var(--ease-out), border-color .4s; }
.demo-card:hover { transform: translateY(-6px); border-color: rgba(167,139,250,.4); }
.demo-shot { position: relative; padding: 26px 22px 6px; background: radial-gradient(80% 90% at 50% 0%, rgba(139,92,246,.2), transparent 70%), rgba(255,255,255,.02); border-bottom: 1px solid var(--glass-b); aspect-ratio: 400 / 268; overflow: hidden; display: grid; place-items: center; }
.demo-shot .art { transition: transform .9s var(--ease-out); }
.demo-card:hover .demo-shot .art { transform: scale(1.06); }
.demo-shot img.real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-body { padding: 24px 26px 28px; }
.demo-body h3 { font-size: 1.35rem; margin: 12px 0 8px; }
.demo-body p { font-size: .93rem; margin: 0 0 16px; min-height: 3em; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chips span { padding: 5px 11px; border-radius: 999px; font-size: .72rem; border: 1px solid var(--glass-b); background: var(--glass); color: var(--text-1); }

/* ---------- process timeline ---------- */
.timeline { position: relative; max-width: 860px; margin: 0 auto; padding-left: 70px; --p: 0; }
.timeline::before { content: ''; position: absolute; left: 22px; top: 8px; bottom: 8px; width: 2px; background: var(--glass-b); border-radius: 2px; }
.timeline::after { content: ''; position: absolute; left: 22px; top: 8px; width: 2px; height: calc((100% - 16px) * var(--p)); background: linear-gradient(var(--violet), var(--sky)); border-radius: 2px; box-shadow: 0 0 18px rgba(139,92,246,.8); }
.tl-step { position: relative; padding: 30px 34px; margin-bottom: 22px; border-radius: 26px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--glass-b); }
.tl-step::before { content: attr(data-n); position: absolute; left: -70px; top: 24px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: #fff; background: #0a0c1a; border: 1px solid var(--glass-b); transition: background .5s, border-color .5s, box-shadow .5s; }
.tl-step.on::before { background: linear-gradient(135deg, var(--violet), var(--sky)); border-color: transparent; box-shadow: 0 0 24px rgba(139,92,246,.7); }
.tl-step h3 { font-size: 1.3rem; margin: 0 0 8px; } .tl-step p { margin: 0; }

/* ---------- portal preview ---------- */
.split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
.split.split-wide { grid-template-columns: 1.15fr .85fr; gap: 40px; }
.ticks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.ticks li { display: flex; gap: 14px; color: var(--text-1); align-items: flex-start; }
.ticks li svg { flex-shrink: 0; color: var(--mint); margin-top: 2px; }
.mock { border-radius: 26px; overflow: hidden; }
.mock .win-bar { padding: 14px 18px; }
.mock-body { padding: 22px; display: grid; gap: 14px; }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mock-stat { padding: 14px; border-radius: 14px; background: rgba(255,255,255,.05); }
.mock-stat small { display: block; font-size: .64rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.mock-stat b { font-family: var(--font-display); font-size: 1.05rem; color: #fff; }
.mock-prog { padding: 16px; border-radius: 14px; background: rgba(255,255,255,.05); }
.mock-prog .bar-t { height: 9px; border-radius: 9px; background: rgba(255,255,255,.09); overflow: hidden; margin-top: 10px; }
.mock-prog .bar-f { height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg, var(--violet), var(--sky)); transition: width 2s var(--ease-out) .3s; }
.in .mock-prog .bar-f, .mock.in .bar-f { width: 62%; }
.mock-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.04); font-size: .82rem; color: var(--text-1); }
.mock-row .status { font-size: .62rem; }
.mock-line { height: 9px; border-radius: 6px; background: rgba(255,255,255,.14); width: 38%; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.faq { border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); border: 1px solid var(--glass-b); transition: border-color .4s; }
.faq[open] { border-color: rgba(167,139,250,.4); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 28px; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-family: var(--font-display); font-size: 1.12rem; font-weight: 500; color: #fff; }
.faq summary::-webkit-details-marker { display: none; }
.faq .plus { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--glass-b); display: grid; place-items: center; transition: transform .5s var(--ease-out), background .3s; }
.faq[open] .plus { transform: rotate(45deg); background: var(--glass-2); }
.faq .ans { padding: 0 28px 26px; color: var(--text-2); max-width: 68ch; }
.faq .ans p { margin: 0; }

/* ---------- CTA ---------- */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cta-x { position: relative; border-radius: 40px; padding: 90px 40px; text-align: center; overflow: hidden; isolation: isolate; background: radial-gradient(60% 90% at 50% 0%, rgba(139,92,246,.35), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); }
.cta-x::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1; background: conic-gradient(from var(--ang), transparent 0 55%, var(--violet), var(--sky), transparent 85%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: spin-ang 7s linear infinite; }
@keyframes spin-ang { to { --ang: 360deg; } }
.cta-x h2 { font-size: clamp(2.2rem, 5.4vw, 4.4rem); max-width: 16ch; margin: 0 auto 20px; }
.cta-x p { max-width: 52ch; margin: 0 auto 36px; font-size: 1.1rem; }

/* ==========================================================================
   Page hero (inner pages) + generic
   ========================================================================== */
.page-hero { position: relative; padding: 190px 0 130px; overflow: hidden; isolation: isolate; -webkit-mask-image: linear-gradient(#000 calc(100% - 120px), transparent); mask-image: linear-gradient(#000 calc(100% - 120px), transparent); }
.page-hero::before, .page-hero::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .5; animation: drift 18s ease-in-out infinite alternate; }
.page-hero::before { width: 520px; height: 520px; background: #4f6bff; top: -220px; right: 4%; }
.page-hero::after { width: 420px; height: 420px; background: #9d4dff; top: 20px; right: 28%; opacity: .35; animation-delay: -6s; }
@keyframes drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-60px, 50px) scale(1.15); } }
.page-hero h1 { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: -.045em; line-height: 1.02; margin: 22px 0; max-width: 16ch; }
.page-hero .lead { font-size: 1.18rem; max-width: 56ch; color: var(--text-1); }
.crumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a, .crumbs span { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--glass-b); background: var(--glass); font-size: .8rem; color: var(--text-1); }
.crumbs a:hover { background: var(--glass-2); color: #fff; }

.gcard { position: relative; padding: 34px; border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--glass-b); transition: transform .6s var(--ease-out), border-color .4s; }
.gcard:hover { transform: translateY(-5px); border-color: rgba(167,139,250,.35); }
.gcard h3 { font-size: 1.3rem; margin: 18px 0 10px; }
.gcard p { margin: 0; }
.gicon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: var(--sky); background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(56,189,248,.12)); border: 1px solid var(--glass-b); }
.grid-x3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.filter-bar button { padding: 10px 20px; border-radius: 999px; border: 1px solid var(--glass-b); background: var(--glass); color: var(--text-1); font: 500 .88rem var(--font-body); cursor: pointer; transition: all .3s var(--ease-out); }
.filter-bar button:hover { background: var(--glass-2); color: #fff; }
.filter-bar button.on { background: linear-gradient(120deg, rgba(91,140,255,.35), rgba(168,85,247,.35)); border-color: rgba(167,139,250,.6); color: #fff; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.demo-grid .demo-card { flex: none; }
.demo-grid .demo-card.hide { display: none; }
.stat-x { padding: 34px; border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--glass-b); }
.stat-x b { display: block; font-family: var(--font-display); font-size: clamp(2.4rem, 4.4vw, 3.6rem); letter-spacing: -.04em; line-height: 1; background: linear-gradient(135deg, #fff, #b7c0ff 60%, #9fd8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-x span { display: block; margin-top: 10px; color: var(--text-3); font-size: .82rem; text-transform: uppercase; letter-spacing: .09em; }
.empty-x { padding: 60px 30px; text-align: center; border-radius: 28px; border: 1px dashed var(--glass-b); color: var(--text-2); }

/* form polish */
.site .field input, .site .field textarea, .site .field select { background: rgba(255,255,255,.04); border-color: var(--glass-b); border-radius: 14px; padding: 15px 18px; transition: border-color .3s, background .3s, box-shadow .3s; }
.site .field input:focus, .site .field textarea:focus, .site .field select:focus { border-color: rgba(167,139,250,.7); background: rgba(255,255,255,.06); box-shadow: 0 0 0 4px rgba(139,92,246,.15); }
.site .field select option { background: #0c0e1c; }

/* ---------- footer ---------- */
.footer-x { position: relative; margin-top: 40px; padding: 90px 0 34px; border-top: 1px solid var(--glass-b); overflow: hidden; }
.footer-x .giant { font-family: var(--font-display); font-weight: 700; font-size: clamp(5rem, 21vw, 20rem); line-height: .8; letter-spacing: -.06em; text-align: center; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.09); margin: 60px 0 -.06em; user-select: none; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.09), transparent 75%); -webkit-background-clip: text; background-clip: text; }
.footer-x .footer-grid { margin-bottom: 30px; }
.to-top { position: absolute; right: 24px; top: 24px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .hero-x-inner { grid-template-columns: 1fr; gap: 60px; }
  .hero-x { padding-top: 140px; }
  .stage { width: min(520px, 92%); }
  .split, .split.split-wide { grid-template-columns: 1fr; gap: 50px; }
  .bento-item, .bento-item.b5 { grid-column: span 6; }
  .bento-item.b7, .bento-item.b6 { grid-column: span 12; }
  .demo-grid, .grid-x3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .site section { padding: 86px 0; }
  .site .nav .container { padding-left: 16px; }
  .bento-item, .bento-item.b5, .bento-item.b7, .bento-item.b6 { grid-column: span 12; min-height: 0; flex-direction: column; align-items: stretch; }
  .bento-item.b7 .b-text, .bento-item.b6 .b-text { flex: none; }
  .bento-item.b7 .b-art, .bento-item.b6 .b-art { margin: 24px 0 0; }
  .demo-grid, .grid-x3, .grid-x2 { grid-template-columns: 1fr; }
  .l-c2, .l-c3 { display: none; }
  .proof { padding: 0 18px; } .proof b { font-size: 1.2rem; }
  .timeline { padding-left: 54px; } .tl-step::before { left: -54px; width: 40px; height: 40px; } .timeline::before, .timeline::after { left: 19px; }
  .tl-step { padding: 24px; }
  .cta-x { padding: 64px 24px; border-radius: 30px; }
  .mock-stats { grid-template-columns: 1fr 1fr; }
  .scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .marquee-x .track { animation: none; }
  .js [data-split] .wi { transform: none; }
  .chart .line { stroke-dashoffset: 0; } .chart .area { opacity: 1; }
}

/* ---------- inner-page hero with side art ---------- */
.ph-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
.ph-side { padding: 30px 26px 10px; border-radius: 32px; background: radial-gradient(80% 90% at 50% 0%, rgba(139,92,246,.22), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); border: 1px solid var(--glass-b); }
.points { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.points li { display: flex; gap: 12px; color: var(--text-1); font-size: .97rem; align-items: flex-start; }
.points li::before { content: ''; width: 7px; height: 7px; margin-top: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--violet), var(--sky)); flex-shrink: 0; }
.spec-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 32px; overflow: hidden; border: 1px solid var(--glass-b); background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); margin-bottom: 20px; }
.spec-card .copy { padding: 44px; } .spec-card .copy h3 { font-size: 1.7rem; margin: 10px 0; }
.spec-card .vis { padding: 30px; display: grid; place-items: center; background: radial-gradient(70% 80% at 50% 0%, rgba(139,92,246,.2), transparent 70%); border-left: 1px solid var(--glass-b); }
.spec-card:nth-child(even) .vis { order: -1; border-left: 0; border-right: 1px solid var(--glass-b); }
@media (max-width: 1080px) { .ph-inner { grid-template-columns: 1fr; } .ph-side { max-width: 520px; } }
@media (max-width: 820px) { .spec-card { grid-template-columns: 1fr; } .spec-card .copy { padding: 30px; } .spec-card .vis, .spec-card:nth-child(even) .vis { order: 0; border: 0; border-top: 1px solid var(--glass-b); } }