/* ============================================================
WIZARD ADS — LANDING · marketing front door
Built on the platform's design language:
· Manrope + JetBrains Mono
· Obsidian (cinematic dark) hero + finale
· Arctic (icy frost) light sections for rhythm
· ONE glacial-cyan → aqua accent, violet only as glow
Fonts load via + in the HTML .
============================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
:root{
--font-ui:'Manrope',system-ui,-apple-system,sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
/* obsidian dark */
--bg-0:#05060a;
--bg-1:#080a11;
--bg-2:#0c0f18;
--ink:#eef1f7;
--ink-2:#a7afc2;
--ink-3:#828a9e; /* muted text — WCAG AA on obsidian (5.7:1) */
--ink-4:#767e93; /* faint text (kickers, labels) — AA (4.9:1) */
--line:rgba(255,255,255,.10);
--line-2:rgba(255,255,255,.16);
--glass:rgba(255,255,255,.045);
--glass-2:rgba(255,255,255,.07);
/* accent — glacial cyan → aqua (the one accent) */
--acc:#16c0d8;
--acc-2:#2ed3c6;
--acc-ink:#7fe6f1;
--ai-grad:linear-gradient(118deg,#2f9fe0 0%,#16c0d8 50%,#2ed3c6 100%);
--acc-glow:rgba(22,192,216,.55);
/* violet — glow only, never structural */
--vio:#8b7dff;
--vio-glow:rgba(139,125,255,.42);
--good:#2fd39a;
/* arctic light (for inverted sections) */
--paper:#e9f2f6;
--paper-grad:linear-gradient(165deg,#f4fafb,#deeaef);
--frost:rgba(255,255,255,.66);
--frost-2:rgba(255,255,255,.82);
--d-ink:#0f2c36;
--d-ink-2:#36545f;
--d-ink-3:#4a6873; /* muted text on arctic sections — AA (5.0:1) */
--d-line:rgba(18,70,95,.16);
--d-acc:#0e93a8;
--r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:36px;
--ease:cubic-bezier(.22,.61,.36,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--maxw:1240px;
}
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
font-family:var(--font-ui);
background:var(--bg-0);
color:var(--ink);
line-height:1.55;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
::selection{ background:rgba(22,192,216,.28); color:#fff; }
.mono{ font-family:var(--font-mono); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }
section{ position:relative; }
/* scrollbar */
::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--bg-0); }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.13); border-radius:9px; border:3px solid var(--bg-0); }
::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.22); }
/* ---- shared layout ---- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.eyebrow{
display:inline-flex; align-items:center; gap:9px;
font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
color:var(--acc-ink);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 12px var(--acc-glow); }
.eyebrow.dark{ color:var(--d-acc); }
.eyebrow.dark .dot{ background:var(--d-acc); box-shadow:0 0 10px rgba(14,147,168,.5); }
.grad-text{
background:var(--ai-grad);
-webkit-background-clip:text; background-clip:text; color:transparent;
}
.sec-head{ max-width:720px; margin:0 auto; text-align:center; }
.sec-title{ font-size:clamp(30px,4.4vw,52px); font-weight:800; letter-spacing:-.035em; line-height:1.04; margin:18px 0 0; }
.sec-sub{ font-size:clamp(15px,1.5vw,18px); color:var(--ink-2); margin-top:18px; line-height:1.6; }
.light .sec-title{ color:var(--d-ink); }
.light .sec-sub{ color:var(--d-ink-2); }
/* ============================================================
BUTTONS
============================================================ */
.btn{
position:relative; display:inline-flex; align-items:center; gap:9px;
font-family:var(--font-ui); font-size:15px; font-weight:700; letter-spacing:-.01em;
padding:14px 24px; border-radius:14px; border:1px solid transparent;
cursor:pointer; transition:transform .25s var(--ease-out), box-shadow .25s var(--ease), background .2s;
white-space:nowrap; will-change:transform;
}
.btn svg{ width:18px; height:18px; }
.btn-primary{
color:#04161a; background:var(--ai-grad);
box-shadow:0 12px 34px -10px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn-primary:hover{ box-shadow:0 18px 48px -10px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.5); }
.btn-ghost{
color:var(--ink); background:var(--glass); border-color:var(--line-2);
backdrop-filter:blur(12px);
}
.btn-ghost:hover{ background:var(--glass-2); border-color:var(--acc); color:#fff; }
.btn-lg{ font-size:16px; padding:17px 30px; border-radius:15px; }
.btn .sheen{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; }
.btn .sheen::before{
content:''; position:absolute; top:0; bottom:0; width:40%; left:-60%;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
transform:skewX(-18deg);
}
.btn-primary:hover .sheen::before{ animation:sheen 1s var(--ease); }
@keyframes sheen{ to{ left:130%; } }
/* ============================================================
NAV
============================================================ */
.nav{
position:fixed; top:0; left:0; right:0; z-index:100;
display:flex; align-items:center; justify-content:space-between;
padding:18px 32px; transition:padding .35s var(--ease), background .35s, border-color .35s, backdrop-filter .35s;
border-bottom:1px solid transparent;
}
.nav.scrolled{
padding:12px 32px;
background:rgba(7,9,14,.72);
backdrop-filter:blur(20px) saturate(160%);
border-bottom-color:var(--line);
}
.nav-inner{ width:100%; max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
background:var(--ai-grad); color:#04161a; font-weight:800; font-size:19px;
box-shadow:0 8px 22px -6px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.5);
position:relative; overflow:hidden;
}
.brand-name{ font-size:19px; font-weight:800; letter-spacing:-.02em; white-space:nowrap; }
.brand-name b{ color:var(--acc-ink); font-weight:800; }
.nav-links{ display:flex; align-items:center; gap:4px; }
.nav-link{
font-size:14px; font-weight:600; color:var(--ink-2); padding:9px 15px; border-radius:10px;
transition:.18s var(--ease); position:relative;
}
.nav-link:hover{ color:var(--ink); background:var(--glass); }
.nav-cta{ display:flex; align-items:center; gap:11px; }
.nav-login{ font-size:14px; font-weight:700; color:var(--ink); padding:11px 18px; border-radius:12px;
background:var(--glass); border:1px solid var(--line-2); transition:.2s var(--ease); }
.nav-login:hover{ border-color:var(--acc); color:#fff; transform:translateY(-1px); }
/* burger + mobile menu (shown under 900px, where .nav-links is hidden) */
.nav-burger{
display:none; flex-direction:column; align-items:center; justify-content:center; gap:5px;
width:44px; height:44px; padding:0; border-radius:12px; cursor:pointer;
background:var(--glass); border:1px solid var(--line-2); transition:.2s var(--ease);
}
.nav-burger:hover{ border-color:var(--acc); }
.nav-burger span{ display:block; width:18px; height:2px; border-radius:2px; background:var(--ink);
transition:transform .28s var(--ease), opacity .18s var(--ease); }
.nav.menu-open .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav.menu-open .nav-burger span:nth-child(2){ opacity:0; }
.nav.menu-open .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.nav-menu{ display:none; }
/* language switch */
.lang-switch{ display:inline-flex; padding:3px; border-radius:11px; background:var(--glass);
border:1px solid var(--line-2); gap:2px; }
.lang-opt{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.04em;
color:var(--ink-3); padding:11px 13px; border-radius:8px; cursor:pointer; background:transparent;
border:0; transition:.18s var(--ease); line-height:1; }
.lang-opt:hover{ color:var(--ink); }
.lang-opt.on{ color:#04161a; background:var(--ai-grad);
box-shadow:0 2px 10px -3px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.4); }
/* footer language switch — intentionally discreet (moved out of the header) */
.lang-mini{ display:inline-flex; align-items:center; gap:5px; }
.lang-mini .lm-opt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em;
color:var(--ink-4); background:none; border:0; padding:6px 2px; cursor:pointer;
opacity:.5; transition:.18s var(--ease); }
.lang-mini .lm-opt:hover{ opacity:1; color:var(--ink-2); }
.lang-mini .lm-opt.on{ opacity:.85; color:var(--ink-2); }
.lang-mini .lm-sep{ font-size:10px; color:var(--ink-4); opacity:.4; }
/* ============================================================
HERO
============================================================ */
.hero{
position:relative; min-height:100vh; display:flex; flex-direction:column;
justify-content:center; padding:140px 0 80px; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-bg .glow{ position:absolute; border-radius:50%; filter:blur(70px); will-change:transform; }
.glow-a{ width:760px; height:760px; top:-220px; left:-180px; background:radial-gradient(circle,rgba(22,192,216,.30),transparent 62%); }
.glow-b{ width:680px; height:680px; top:-120px; right:-160px; background:radial-gradient(circle,var(--vio-glow),transparent 64%); }
.glow-c{ width:900px; height:600px; bottom:-300px; left:30%; background:radial-gradient(circle,rgba(46,211,198,.18),transparent 64%); }
.hero-grid{
position:absolute; inset:0; z-index:0;
background-image:
linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
background-size:60px 60px;
mask-image:radial-gradient(120% 90% at 50% 20%,#000 30%,transparent 78%);
-webkit-mask-image:radial-gradient(120% 90% at 50% 20%,#000 30%,transparent 78%);
}
.hero-noise{ position:absolute; inset:0; z-index:0; opacity:.04; pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-inner{ position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center; }
.hero-badge{
display:inline-flex; align-items:center; gap:10px; padding:7px 8px 7px 14px;
border-radius:30px; background:var(--glass); border:1px solid var(--line-2);
font-size:13px; font-weight:600; color:var(--ink-2); backdrop-filter:blur(10px);
}
.hero-badge .tag{ font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
padding:4px 10px; border-radius:30px; background:var(--ai-grad); color:#04161a; }
.hero h1{
font-size:clamp(40px,6vw,76px); font-weight:800; letter-spacing:-.045em; line-height:.98;
margin:26px 0 0;
}
.hero h1 .grad-text{ display:inline-block; }
.hero-lede{ font-size:clamp(16px,1.7vw,20px); color:var(--ink-2); margin-top:26px; max-width:520px; line-height:1.6; }
.hero-actions{ display:flex; align-items:center; gap:14px; margin-top:36px; flex-wrap:wrap; }
.hero-trust{ display:flex; align-items:center; gap:22px; margin-top:34px; flex-wrap:wrap; }
.trust-ava{ display:flex; }
.trust-ava i{ width:34px; height:34px; border-radius:50%; border:2px solid var(--bg-0); margin-left:-10px;
background:var(--ai-grad); display:grid; place-items:center; font-size:12px; font-weight:800; color:#04161a; font-style:normal; }
.trust-ava i:first-child{ margin-left:0; }
.trust-txt{ font-size:13px; color:var(--ink-3); }
.trust-txt b{ color:var(--ink); }
.trust-stars{ color:#ffc24b; letter-spacing:2px; font-size:13px; }
/* capability pills under the hero copy (stand-in for the hidden social proof) */
.hero-stack{ display:flex; flex-wrap:wrap; gap:9px; margin-top:34px; }
.hs-item{ font-size:12.5px; font-weight:700; color:var(--ink-2); padding:9px 15px;
border-radius:999px; background:var(--glass); border:1px solid var(--line); }
/* ---- hero product visual ---- */
.hero-visual{ position:relative; height:560px; }
.hv-phone{
position:absolute; right:6%; top:50%; transform:translateY(-50%);
width:262px; aspect-ratio:9/19.5; border-radius:34px; z-index:3;
background:linear-gradient(180deg,#0d1420,#070a11);
border:1px solid var(--line-2);
box-shadow:0 50px 110px -30px rgba(0,0,0,.8), 0 0 70px -10px var(--acc-glow), inset 0 1px 0 rgba(255,255,255,.14);
padding:9px;
}
.hv-screen{ position:relative; width:100%; height:100%; border-radius:26px; overflow:hidden;
background:
radial-gradient(120% 80% at 30% 12%,rgba(22,192,216,.4),transparent 56%),
radial-gradient(110% 70% at 80% 100%,rgba(139,125,255,.3),transparent 60%),
repeating-linear-gradient(135deg,#1a2230 0 12px,#141b27 12px 24px); }
.hv-screen::after{ content:''; position:absolute; inset:0;
background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 26%,transparent 60%,rgba(0,0,0,.5)); }
.hv-cap{ position:absolute; left:14px; right:14px; bottom:62px; z-index:2; text-align:center;
font-size:17px; font-weight:800; letter-spacing:-.01em; line-height:1.2;
text-shadow:0 2px 14px rgba(0,0,0,.6); }
.hv-cap em{ font-style:normal; color:var(--acc-ink); }
.hv-play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
background:rgba(8,12,18,.5); border:1px solid rgba(255,255,255,.4); backdrop-filter:blur(6px); color:#fff; }
.hv-play svg{ width:22px; height:22px; margin-left:3px; }
.hv-score{ position:absolute; top:14px; left:14px; z-index:2; display:flex; align-items:center; gap:6px;
padding:6px 11px; border-radius:30px; font-size:12px; font-weight:800;
background:rgba(8,12,18,.55); border:1px solid var(--acc); color:#fff; backdrop-filter:blur(8px); }
.hv-score svg{ width:13px; height:13px; color:var(--acc-ink); }
.hv-bars{ position:absolute; left:14px; right:14px; bottom:18px; z-index:2; display:flex; gap:3px; align-items:flex-end; height:30px; }
.hv-bars i{ flex:1; border-radius:2px; background:linear-gradient(180deg,var(--acc),var(--acc-2)); opacity:.85;
animation:eq 1.1s var(--ease) infinite alternate; }
@keyframes eq{ from{ height:18%; } to{ height:100%; } }
/* floating cards around phone */
.hv-card{
position:absolute; z-index:4; border-radius:16px; padding:13px 15px;
background:rgba(12,16,24,.78); border:1px solid var(--line-2);
backdrop-filter:blur(18px); box-shadow:0 24px 60px -20px rgba(0,0,0,.7);
will-change:transform;
}
.hv-card-render{ top:9%; left:-2%; display:flex; align-items:center; gap:11px; }
.hv-ic{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; flex:0 0 36px; }
.hv-ic svg{ width:19px; height:19px; }
.hv-ic.good{ background:rgba(47,211,154,.16); color:var(--good); }
.hv-ic.acc{ background:rgba(22,192,216,.16); color:var(--acc-ink); }
.hv-ic.vio{ background:rgba(139,125,255,.18); color:#c4b9ff; }
.hv-cl{ font-size:13px; font-weight:700; color:var(--ink); }
.hv-cs{ font-size:11px; color:var(--ink-3); margin-top:1px; }
.hv-card-trend{ bottom:14%; left:-6%; width:200px; }
.hv-trend-head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.hv-trend-row{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-2); margin:6px 0; }
.hv-trend-row .up{ margin-left:auto; color:var(--good); font-weight:800; font-family:var(--font-mono); font-size:11px; }
.hv-trend-bar{ height:5px; border-radius:3px; background:var(--ai-grad); }
.hv-card-stat{ top:30%; right:-4%; width:150px; }
.hv-stat-num{ font-family:var(--font-mono); font-size:26px; font-weight:700; letter-spacing:-.02em; color:#fff; }
.hv-stat-lbl{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin-top:2px; }
.hv-spark{ display:flex; gap:2px; align-items:flex-end; height:22px; margin-top:9px; }
.hv-spark i{ flex:1; border-radius:1px; background:var(--acc); opacity:.7; }
/* marquee logos */
.logos{ padding:54px 0 30px; border-bottom:1px solid var(--line); }
.logos-label{ text-align:center; font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); margin-bottom:26px; }
.marquee{ 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-track{ display:flex; gap:62px; width:max-content; animation:marq 32s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.logo-item{ display:flex; align-items:center; gap:11px; font-size:19px; font-weight:800; letter-spacing:-.02em; color:var(--ink-3);
opacity:.65; transition:.25s var(--ease); white-space:nowrap; }
.logo-item:hover{ opacity:1; color:var(--ink); }
.logo-item svg{ width:24px; height:24px; }
/* ============================================================
GENERIC SECTION SHELLS
============================================================ */
.section{ padding:120px 0; }
.section.light{ background:var(--paper); background-image:var(--paper-grad); color:var(--d-ink); }
.section.light::before{ content:''; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(1100px 700px at 12% -10%,rgba(22,192,216,.10),transparent 60%),
radial-gradient(1000px 700px at 105% 110%,rgba(46,211,198,.09),transparent 58%); }
.section.light > .wrap{ position:relative; z-index:1; }
.sec-top{ margin-bottom:64px; }
/* ============================================================
MODULE BENTO
============================================================ */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:20px; }
.tile{
position:relative; border-radius:var(--r-lg); overflow:hidden; padding:28px;
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
border:1px solid var(--line); min-height:280px; display:flex; flex-direction:column;
transition:transform .4s var(--ease-out), border-color .35s, box-shadow .4s;
will-change:transform;
}
.tile::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s;
background:radial-gradient(120% 90% at 50% 0%,rgba(22,192,216,.12),transparent 60%); }
.tile:hover{ transform:translateY(-6px); border-color:var(--line-2); box-shadow:0 40px 80px -36px rgba(0,0,0,.7); }
.tile:hover::after{ opacity:1; }
.tile.span3{ grid-column:span 3; }
.tile.span2{ grid-column:span 2; }
.tile.span4{ grid-column:span 4; }
.tile-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.tile-ic{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:0 0 42px;
background:var(--glass-2); border:1px solid var(--line-2); color:var(--acc-ink); }
.tile-ic svg{ width:22px; height:22px; }
.tile-kicker{ font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4); }
.tile h3{ font-size:23px; font-weight:800; letter-spacing:-.025em; margin-top:14px; }
.tile p{ font-size:14.5px; color:var(--ink-2); margin-top:9px; line-height:1.55; max-width:42ch; }
.tile-demo{ margin-top:auto; padding-top:24px; }
/* --- demo: studio timeline --- */
.d-studio{ display:flex; flex-direction:column; gap:8px; }
.d-stage{ height:84px; border-radius:12px; position:relative; overflow:hidden;
background:radial-gradient(80% 80% at 50% 35%,rgba(22,192,216,.2),transparent 70%),repeating-linear-gradient(135deg,#1a2230 0 11px,#141b27 11px 22px);
border:1px solid var(--line); display:grid; place-items:center; }
.d-stage .ph-frame{ width:38px; height:64px; border-radius:7px; border:1.5px solid rgba(255,255,255,.3);
background:rgba(8,12,18,.4); display:grid; place-items:center; }
.d-stage .ph-frame svg{ width:16px; height:16px; color:#fff; opacity:.8; }
.d-track{ display:flex; gap:6px; height:26px; }
.d-clip{ border-radius:6px; height:100%; }
.d-clip.v{ flex:3; background:linear-gradient(180deg,#3f97b4,#2c7593); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); }
.d-clip.v2{ flex:2; background:linear-gradient(180deg,#3f97b4,#2c7593); }
.d-clip.a{ flex:5; background:rgba(47,211,154,.3); border:1px solid rgba(47,211,154,.4); }
.d-clip.o{ flex:2; background:rgba(22,192,216,.22); border:1px solid var(--acc); }
/* --- demo: auto node graph --- */
.d-auto{ position:relative; height:130px; }
.d-node{ position:absolute; padding:8px 11px; border-radius:10px; font-size:11px; font-weight:700;
background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.8)); color:#0f2c36;
border:1px solid rgba(22,192,216,.4); box-shadow:0 8px 20px -8px rgba(0,0,0,.6); display:flex; align-items:center; gap:7px; white-space:nowrap; }
.d-node .nd{ width:7px; height:7px; border-radius:2px; }
.d-node.n1{ top:4px; left:0; } .d-node.n1 .nd{ background:#2f9fe0; }
.d-node.n2{ top:50px; left:36%; } .d-node.n2 .nd{ background:var(--acc); }
.d-node.n3{ top:6px; right:0; } .d-node.n3 .nd{ background:var(--vio); }
.d-node.n4{ bottom:2px; right:14%; } .d-node.n4 .nd{ background:var(--good); }
.d-wires{ position:absolute; inset:0; }
.d-wires path{ fill:none; stroke:rgba(22,192,216,.45); stroke-width:1.6; stroke-dasharray:4 4; }
/* --- demo: matrix calendar --- */
.d-matrix{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.d-day{ aspect-ratio:1; border-radius:7px; background:var(--glass); border:1px solid var(--line); position:relative; }
.d-day.on{ background:rgba(22,192,216,.16); border-color:var(--acc); }
.d-day.on::after{ content:''; position:absolute; left:5px; bottom:5px; width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 8px var(--acc-glow); }
.d-day.vio.on{ background:rgba(139,125,255,.16); border-color:var(--vio); }
.d-day.vio.on::after{ background:var(--vio); box-shadow:0 0 8px var(--vio-glow); }
/* --- demo: stats chart --- */
.d-stats{ position:relative; }
.d-stats-num{ font-family:var(--font-mono); font-size:30px; font-weight:700; letter-spacing:-.02em; color:#fff; }
.d-stats-num span{ font-size:15px; color:var(--good); margin-left:8px; }
.d-chart{ margin-top:12px; }
.d-chart path.area{ fill:url(#sgrad); opacity:.5; }
.d-chart path.line{ fill:none; stroke:var(--acc); stroke-width:2.4; filter:drop-shadow(0 3px 8px var(--acc-glow)); }
/* --- demo: trends --- */
.d-trend-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.d-trend-row:last-child{ border-bottom:none; }
.d-trend-rank{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--ink-4); width:18px; }
.d-trend-fl{ color:#ff7a3c; display:flex; }
.d-trend-fl svg{ width:15px; height:15px; }
.d-trend-name{ font-size:13px; font-weight:600; color:var(--ink); }
.d-trend-up{ margin-left:auto; font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--good); }
/* --- demo: script chat --- */
.d-chat{ display:flex; flex-direction:column; gap:8px; }
.d-bubble{ font-size:12.5px; padding:9px 13px; border-radius:13px; max-width:88%; line-height:1.4; }
.d-bubble.ai{ align-self:flex-start; background:var(--glass-2); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:5px; }
.d-bubble.me{ align-self:flex-end; background:rgba(22,192,216,.18); border:1px solid var(--acc); color:#fff; border-bottom-right-radius:5px; }
/* ============================================================
HOW IT WORKS (light)
============================================================ */
.steps{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:24px; }
.steps::before{ content:''; position:absolute; top:38px; left:8%; right:8%; height:2px; z-index:0;
background:linear-gradient(90deg,transparent,var(--d-acc) 12%,var(--d-acc) 88%,transparent); opacity:.35; }
.step{ position:relative; z-index:1; text-align:center; }
.step-num{ width:76px; height:76px; margin:0 auto; border-radius:22px; display:grid; place-items:center;
background:var(--frost-2); border:1px solid var(--d-line); color:var(--d-acc);
box-shadow:0 18px 40px -18px rgba(28,116,142,.4), inset 0 1px 0 rgba(255,255,255,.9); position:relative; }
.step-num svg{ width:32px; height:32px; }
.step-num .ix{ position:absolute; top:-8px; right:-8px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
background:var(--ai-grad); color:#04161a; font-size:12px; font-weight:800; font-family:var(--font-mono); box-shadow:0 4px 12px -2px var(--acc-glow); }
.step h4{ font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--d-ink); margin-top:20px; }
.step p{ font-size:14px; color:var(--d-ink-2); margin-top:8px; line-height:1.55; }
/* ============================================================
METRICS
============================================================ */
.metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.metric{ text-align:center; padding:34px 20px; border-radius:var(--r-lg);
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--line); }
.metric-num{ font-family:var(--font-mono); font-size:clamp(40px,5vw,58px); font-weight:700; letter-spacing:-.03em; line-height:1; }
.metric-num .suf{ color:var(--acc-ink); }
.metric-lbl{ font-size:14px; color:var(--ink-2); margin-top:12px; font-weight:500; }
/* ============================================================
CAPABILITY CARDS · tech core + audience grids
============================================================ */
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.caps.four{ grid-template-columns:repeat(4,1fr); }
.cap{ position:relative; overflow:hidden; padding:30px 28px 32px; border-radius:var(--r-lg);
background:var(--glass); border:1px solid var(--line); transition:.28s var(--ease); }
.cap::after{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
background:radial-gradient(460px 190px at 18% -12%, rgba(22,192,216,.16), transparent 70%);
opacity:0; transition:opacity .3s var(--ease); }
.cap:hover{ transform:translateY(-4px); border-color:var(--line-2); }
.cap:hover::after{ opacity:1; }
.cap-ic{ position:relative; z-index:1; width:46px; height:46px; border-radius:14px; display:grid;
place-items:center; background:var(--glass-2); border:1px solid var(--line-2);
color:var(--acc-ink); margin-bottom:18px; }
.cap-ic svg{ width:22px; height:22px; }
.cap h3{ position:relative; z-index:1; font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:1.28; }
.cap p{ position:relative; z-index:1; font-size:14.5px; line-height:1.62; color:var(--ink-2); margin-top:10px; }
/* ============================================================
COMPARISON (light)
============================================================ */
.compare{ max-width:980px; margin:0 auto; border-radius:var(--r-lg); overflow:hidden;
border:1px solid var(--d-line); background:var(--frost); backdrop-filter:blur(16px);
box-shadow:0 40px 90px -40px rgba(28,116,142,.35); }
.cmp-row{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); align-items:center; border-bottom:1px solid var(--d-line); }
.cmp-row:last-child{ border-bottom:none; }
.cmp-row.head{ background:rgba(255,255,255,.4); }
.cmp-cell{ padding:18px 20px; font-size:14px; color:var(--d-ink-2); text-align:center; }
.cmp-cell.feat{ text-align:left; font-weight:700; color:var(--d-ink); }
.cmp-cell.wz{ background:rgba(22,192,216,.09); }
.cmp-head-brand{ font-weight:800; font-size:15px; color:var(--d-ink); display:flex; align-items:center; justify-content:center; gap:7px; }
.cmp-head-brand.wz{ color:var(--d-acc); }
.cmp-mark{ width:38px; height:38px; }
.cmp-yes{ color:var(--d-acc); } .cmp-yes svg{ width:22px; height:22px; }
.cmp-no{ color:#b9c4cb; } .cmp-no svg{ width:18px; height:18px; }
.cmp-row.head .cmp-cell{ padding-top:24px; padding-bottom:24px; }
/* ============================================================
TESTIMONIALS
============================================================ */
.quotes{ columns:3; column-gap:24px; }
.quote{ break-inside:avoid; margin-bottom:24px; padding:26px; border-radius:var(--r-md);
background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)); border:1px solid var(--line); }
.quote-stars{ color:#ffc24b; letter-spacing:2px; font-size:13px; }
.quote p{ font-size:15px; color:var(--ink); margin-top:14px; line-height:1.6; }
.quote-by{ display:flex; align-items:center; gap:11px; margin-top:18px; }
.quote-ava{ width:40px; height:40px; border-radius:50%; background:var(--ai-grad); display:grid; place-items:center;
font-size:14px; font-weight:800; color:#04161a; flex:0 0 40px; }
.quote-meta .n{ font-size:14px; font-weight:700; color:var(--ink); }
.quote-meta .r{ font-size:12px; color:var(--ink-3); }
/* ============================================================
PRICING (light)
============================================================ */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.plan{ position:relative; border-radius:var(--r-lg); padding:34px 30px; background:var(--frost-2); border:1px solid var(--d-line);
display:flex; flex-direction:column; box-shadow:0 26px 60px -36px rgba(28,116,142,.3), inset 0 1px 0 rgba(255,255,255,.9);
transition:transform .35s var(--ease-out), box-shadow .35s; }
.plan:hover{ transform:translateY(-6px); }
.plan.feat{ background:linear-gradient(180deg,#0b1018,#0a0d14); border-color:transparent; color:var(--ink);
box-shadow:0 40px 90px -34px rgba(0,0,0,.6), 0 0 60px -20px var(--acc-glow); transform:scale(1.04); }
.plan.feat:hover{ transform:scale(1.04) translateY(-6px); }
.plan-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); padding:5px 16px; border-radius:30px;
background:var(--ai-grad); color:#04161a; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
box-shadow:0 8px 22px -6px var(--acc-glow); }
.plan-name{ font-size:15px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--d-acc); }
.plan.feat .plan-name{ color:var(--acc-ink); }
.plan-price{ font-family:var(--font-mono); font-size:48px; font-weight:700; letter-spacing:-.03em; margin-top:16px; color:var(--d-ink); }
.plan.feat .plan-price{ color:#fff; }
.plan-price .per{ font-family:var(--font-ui); font-size:15px; font-weight:600; color:var(--d-ink-3); }
.plan.feat .plan-price .per{ color:var(--ink-3); }
.plan-desc{ font-size:14px; color:var(--d-ink-2); margin-top:10px; }
.plan.feat .plan-desc{ color:var(--ink-2); }
.plan-feats{ list-style:none; margin:24px 0; display:flex; flex-direction:column; gap:12px; flex:1; }
.plan-feats li{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--d-ink-2); }
.plan.feat .plan-feats li{ color:var(--ink-2); }
.plan-feats svg{ width:18px; height:18px; color:var(--d-acc); flex:0 0 18px; margin-top:1px; }
.plan.feat .plan-feats svg{ color:var(--acc-ink); }
.plan .btn{ width:100%; justify-content:center; }
.plan-cta-light{ color:var(--d-ink); background:var(--frost); border:1px solid var(--d-line); }
.plan-cta-light:hover{ border-color:var(--d-acc); background:rgba(255,255,255,.95); }
/* ============================================================
FINAL CTA
============================================================ */
.finale{ padding:130px 0; position:relative; overflow:hidden; text-align:center; }
.finale-bg{ position:absolute; inset:0; z-index:0; }
.finale-bg .glow{ position:absolute; border-radius:50%; filter:blur(80px); }
.fg-a{ width:700px; height:700px; top:-40%; left:50%; transform:translateX(-50%); background:radial-gradient(circle,rgba(22,192,216,.3),transparent 62%); }
.fg-b{ width:500px; height:500px; bottom:-50%; left:20%; background:radial-gradient(circle,var(--vio-glow),transparent 64%); }
.finale-inner{ position:relative; z-index:2; max-width:760px; margin:0 auto; }
.finale h2{ font-size:clamp(36px,5.5vw,64px); font-weight:800; letter-spacing:-.04em; line-height:1.02; }
.finale p{ font-size:clamp(16px,1.8vw,20px); color:var(--ink-2); margin-top:22px; }
.finale .hero-actions{ justify-content:center; margin-top:40px; }
.finale-note{ font-size:13px; color:var(--ink-3); margin-top:22px; }
/* ============================================================
FOOTER
============================================================ */
.footer{ border-top:1px solid var(--line); padding:64px 0 40px; background:var(--bg-1); }
.footer-top{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; }
.footer-brand p{ font-size:14px; color:var(--ink-3); margin-top:16px; max-width:30ch; line-height:1.6; }
.footer-col h5{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4); margin-bottom:16px; }
.footer-col a{ display:block; font-size:14px; color:var(--ink-2); padding:6px 0; transition:.18s; }
.footer-col a:hover{ color:var(--acc-ink); }
.footer-bot{ display:flex; align-items:center; justify-content:space-between; margin-top:54px; padding-top:28px; border-top:1px solid var(--line); flex-wrap:wrap; gap:16px; }
.footer-bot p{ font-size:13px; color:var(--ink-4); }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--glass); border:1px solid var(--line); color:var(--ink-3); transition:.2s var(--ease); }
.footer-social a:hover{ color:var(--acc-ink); border-color:var(--acc); transform:translateY(-2px); }
.footer-social svg{ width:19px; height:19px; }
/* ============================================================
REVEAL ANIMATIONS
============================================================ */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; }
.reveal.d4{ transition-delay:.32s; } .reveal.d5{ transition-delay:.4s; }
@media (prefers-reduced-motion:reduce){
.reveal{ opacity:1; transform:none; transition:none; }
.nav-menu, .nav-burger span{ transition:none; }
*{ animation:none !important; }
/* illustrations must read as finished, not as mid-animation leftovers */
.d-chart path.line{ stroke-dashoffset:0; }
.d-chart path.area{ opacity:.5; }
.d-studio::after, .d-stage::after, .d-bubble.ai::after, .hv-play::after, .steps::after{ display:none; }
html{ scroll-behavior:auto; }
}
/* ============================================================
RESPONSIVE
============================================================ */
/* ============================================================
LIVE ILLUSTRATIONS
------------------------------------------------------------
Every loop below is gated on `.live`, which landing.js adds only
while the element is on screen — nothing animates in the part of
the page you are not looking at. Only transform / opacity /
stroke-dashoffset are animated (composited or paint-cheap), and
the reduced-motion block at the bottom of this file switches the
whole set off.
============================================================ */
/* ---- Studio: light sweep across the timeline + playhead on the stage ---- */
.d-studio{ position:relative; overflow:hidden; border-radius:12px; }
.d-studio::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
background:linear-gradient(90deg,transparent 35%,rgba(22,192,216,.16) 50%,transparent 65%);
transform:translateX(-100%); }
.d-studio.live::after{ animation:wz-sweep 5s var(--ease) infinite; }
@keyframes wz-sweep{ 0%{ transform:translateX(-100%); } 55%,100%{ transform:translateX(100%); } }
.d-stage{ position:relative; }
.d-stage::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:2px; z-index:2;
background:linear-gradient(180deg,transparent,var(--acc-ink),transparent);
box-shadow:0 0 10px var(--acc-glow); opacity:0; }
.d-studio.live .d-stage::after{ animation:wz-playhead 5s var(--ease) infinite; }
@keyframes wz-playhead{
0%{ transform:translateX(0); opacity:0; }
6%{ opacity:.9; }
50%{ transform:translateX(var(--pw,240px)); opacity:.9; }
56%{ opacity:0; } 100%{ transform:translateX(var(--pw,240px)); opacity:0; }
}
.d-studio.live .ph-frame{ animation:wz-breathe 4.4s var(--ease) infinite; }
@keyframes wz-breathe{ 0%,100%{ transform:scale(1); opacity:.9; } 50%{ transform:scale(1.05); opacity:1; } }
/* ---- Auto: the pipeline builds itself, step by step ----
The splines are generated from the real node boxes in landing.js; the loop
below walks the chain: source → AI clipping → captions → publishing.
One 7s track, every element keyed to the same timeline so the steps stay in
sync at any width. Resting state = fully built, so a still page looks right. */
.d-wires{ position:absolute; inset:0; overflow:visible; z-index:0; }
.d-wires .w{ fill:none; stroke:var(--acc); stroke-width:1.8; stroke-linecap:round;
stroke-dasharray:1; stroke-dashoffset:0; opacity:.7;
filter:drop-shadow(0 0 4px rgba(22,192,216,.4)); }
.d-wires .wdot{ fill:#eafcff; opacity:0; offset-rotate:0deg;
filter:drop-shadow(0 0 6px var(--acc)); }
.d-node{ z-index:1; }
.d-node .nd{ transform-origin:center; }
.d-auto.live .w1{ animation:wz-w1 7s linear infinite; }
.d-auto.live .w2{ animation:wz-w2 7s linear infinite; }
.d-auto.live .w3{ animation:wz-w3 7s linear infinite; }
@keyframes wz-w1{
0%,6%{ stroke-dashoffset:1; opacity:.7; } 20%{ stroke-dashoffset:0; }
88%{ stroke-dashoffset:0; opacity:.7; } 99%{ stroke-dashoffset:0; opacity:0; }
100%{ stroke-dashoffset:1; opacity:0; }
}
@keyframes wz-w2{
0%,26%{ stroke-dashoffset:1; opacity:.7; } 40%{ stroke-dashoffset:0; }
88%{ stroke-dashoffset:0; opacity:.7; } 99%{ stroke-dashoffset:0; opacity:0; }
100%{ stroke-dashoffset:1; opacity:0; }
}
@keyframes wz-w3{
0%,46%{ stroke-dashoffset:1; opacity:.7; } 60%{ stroke-dashoffset:0; }
88%{ stroke-dashoffset:0; opacity:.7; } 99%{ stroke-dashoffset:0; opacity:0; }
100%{ stroke-dashoffset:1; opacity:0; }
}
.d-auto.live .wd1{ animation:wz-dot1 7s linear infinite; }
.d-auto.live .wd2{ animation:wz-dot2 7s linear infinite; }
.d-auto.live .wd3{ animation:wz-dot3 7s linear infinite; }
@keyframes wz-dot1{
0%,6%{ offset-distance:0%; opacity:0; } 9%{ opacity:1; }
18%{ opacity:1; } 20%,100%{ offset-distance:100%; opacity:0; }
}
@keyframes wz-dot2{
0%,26%{ offset-distance:0%; opacity:0; } 29%{ opacity:1; }
38%{ opacity:1; } 40%,100%{ offset-distance:100%; opacity:0; }
}
@keyframes wz-dot3{
0%,46%{ offset-distance:0%; opacity:0; } 49%{ opacity:1; }
58%{ opacity:1; } 60%,100%{ offset-distance:100%; opacity:0; }
}
/* nodes switch on as the flow reaches them */
.d-auto.live .n1{ animation:wz-node1 7s var(--ease) infinite; }
.d-auto.live .n2{ animation:wz-node2 7s var(--ease) infinite; }
.d-auto.live .n3{ animation:wz-node3 7s var(--ease) infinite; }
.d-auto.live .n4{ animation:wz-node4 7s var(--ease) infinite; }
.d-auto.live .n1 .nd{ animation:wz-nd1 7s var(--ease) infinite; }
.d-auto.live .n2 .nd{ animation:wz-nd2 7s var(--ease) infinite; }
.d-auto.live .n3 .nd{ animation:wz-nd3 7s var(--ease) infinite; }
.d-auto.live .n4 .nd{ animation:wz-nd4 7s var(--ease) infinite; }
@keyframes wz-node1{ 0%,1%{ opacity:.3; transform:scale(.95);} 4%{ opacity:1; transform:scale(1.07);} 8%,90%{ opacity:1; transform:scale(1);} 100%{ opacity:.3; transform:scale(.95);} }
@keyframes wz-node2{ 0%,19%{ opacity:.3; transform:scale(.95);} 23%{ opacity:1; transform:scale(1.07);} 27%,90%{ opacity:1; transform:scale(1);} 100%{ opacity:.3; transform:scale(.95);} }
@keyframes wz-node3{ 0%,39%{ opacity:.3; transform:scale(.95);} 43%{ opacity:1; transform:scale(1.07);} 47%,90%{ opacity:1; transform:scale(1);} 100%{ opacity:.3; transform:scale(.95);} }
@keyframes wz-node4{ 0%,59%{ opacity:.3; transform:scale(.95);} 63%{ opacity:1; transform:scale(1.12);} 67%,90%{ opacity:1; transform:scale(1);} 100%{ opacity:.3; transform:scale(.95);} }
@keyframes wz-nd1{ 0%,1%{ transform:scale(1); filter:none;} 4%{ transform:scale(1.9); filter:drop-shadow(0 0 7px currentColor);} 10%,100%{ transform:scale(1); filter:none;} }
@keyframes wz-nd2{ 0%,19%{ transform:scale(1); filter:none;} 23%{ transform:scale(1.9); filter:drop-shadow(0 0 7px currentColor);} 29%,100%{ transform:scale(1); filter:none;} }
@keyframes wz-nd3{ 0%,39%{ transform:scale(1); filter:none;} 43%{ transform:scale(1.9); filter:drop-shadow(0 0 7px currentColor);} 49%,100%{ transform:scale(1); filter:none;} }
@keyframes wz-nd4{ 0%,59%{ transform:scale(1); filter:none;} 63%{ transform:scale(1.9); filter:drop-shadow(0 0 7px currentColor);} 69%,100%{ transform:scale(1); filter:none;} }
/* ---- Matrix / Library: a scheduler at work ----
A scan column runs across the grid; every cell it passes lights up, the
booked slots ping, and empty cells breathe. */
.d-matrix{ position:relative; overflow:hidden; border-radius:10px; padding:2px; }
.d-matrix::after{ content:''; position:absolute; top:0; bottom:0; left:0; width:34%;
pointer-events:none; z-index:1; border-radius:10px;
background:linear-gradient(90deg,transparent,rgba(22,192,216,.20) 45%,rgba(22,192,216,.28) 55%,transparent);
transform:translateX(-120%); }
.d-matrix.live::after{ animation:wz-scan 4.6s var(--ease) infinite; }
@keyframes wz-scan{ 0%{ transform:translateX(-120%); } 70%,100%{ transform:translateX(320%); } }
.d-day{ transform-origin:center; }
/* only booked slots move — empty cells stay still (fewer animations, cleaner read) */
.d-matrix.live .d-day.on{ animation:wz-cell 4.6s var(--ease) infinite; }
.d-day.on::after{ transform-origin:center; }
.d-matrix.live .d-day.on::after{ animation:wz-ping 4.6s var(--ease) infinite; }
@keyframes wz-cell{
0%,46%,100%{ transform:scale(1); }
22%{ transform:scale(1.11); }
}
@keyframes wz-ping{
0%,52%,100%{ transform:scale(1); opacity:.85; }
20%{ transform:scale(2.1); opacity:.35; }
30%{ transform:scale(1); opacity:1; }
}
/* stagger by column so the pulse follows the scan column */
.d-matrix.live .d-day:nth-child(7n+1),.d-matrix.live .d-day:nth-child(7n+1)::after{ animation-delay:0s; }
.d-matrix.live .d-day:nth-child(7n+2),.d-matrix.live .d-day:nth-child(7n+2)::after{ animation-delay:.16s; }
.d-matrix.live .d-day:nth-child(7n+3),.d-matrix.live .d-day:nth-child(7n+3)::after{ animation-delay:.32s; }
.d-matrix.live .d-day:nth-child(7n+4),.d-matrix.live .d-day:nth-child(7n+4)::after{ animation-delay:.48s; }
.d-matrix.live .d-day:nth-child(7n+5),.d-matrix.live .d-day:nth-child(7n+5)::after{ animation-delay:.64s; }
.d-matrix.live .d-day:nth-child(7n+6),.d-matrix.live .d-day:nth-child(7n+6)::after{ animation-delay:.8s; }
.d-matrix.live .d-day:nth-child(7n),.d-matrix.live .d-day:nth-child(7n)::after{ animation-delay:.96s; }
/* ---- Library + Brand: media grid scanned by AI search ---- */
.d-lib .d-day{ overflow:hidden; }
.d-lib .d-day::before{ content:''; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
background-size:260% 100%; background-position:180% 0; }
.d-lib.live .d-day::before{ animation:wz-shimmer 3.4s var(--ease) infinite; }
.d-lib.live .d-day:nth-child(2n)::before{ animation-delay:.35s; }
.d-lib.live .d-day:nth-child(3n)::before{ animation-delay:.7s; }
@keyframes wz-shimmer{ 0%{ background-position:180% 0; } 55%,100%{ background-position:-120% 0; } }
/* ---- Statistic: the chart draws itself, the delta nudges up ---- */
/* the resting state is the FINISHED one: if the observer never fires or motion
is reduced, the chart is simply drawn — it can never stay invisible */
.d-chart path.line{ stroke-dasharray:520; stroke-dashoffset:0; }
.d-stats.live .d-chart path.line{ animation:wz-draw 1.9s var(--ease-out) backwards; }
.d-stats.live .d-chart path.area{ animation:wz-fade 1s var(--ease-out) backwards; }
@keyframes wz-draw{ from{ stroke-dashoffset:520; } to{ stroke-dashoffset:0; } }
@keyframes wz-fade{ from{ opacity:0; } to{ opacity:.5; } }
.d-stats.live .d-stats-num span{ animation:wz-bob 2.8s var(--ease) infinite; display:inline-block; }
@keyframes wz-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
/* a tracer runs along the curve, dragging a halo behind it */
.d-chart .tracer{ fill:#fff; opacity:0; offset-rotate:0deg;
offset-path:path("M0 56 L30 50 L60 54 L90 38 L120 42 L150 24 L180 30 L210 14 L240 8"); }
.d-chart .tracer-halo{ fill:var(--acc); opacity:0; offset-rotate:0deg;
offset-path:path("M0 56 L30 50 L60 54 L90 38 L120 42 L150 24 L180 30 L210 14 L240 8"); }
.d-stats.live .d-chart .tracer{ animation:wz-trace 3.6s var(--ease) 1.2s infinite; }
.d-stats.live .d-chart .tracer-halo{ animation:wz-trace-halo 3.6s var(--ease) 1.2s infinite; }
@keyframes wz-trace{
0%{ offset-distance:0%; opacity:0; } 8%{ opacity:1; }
88%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; }
}
@keyframes wz-trace-halo{
0%{ offset-distance:0%; opacity:0; } 8%{ opacity:.45; }
88%{ opacity:.45; } 100%{ offset-distance:100%; opacity:0; }
}
/* soft scanline over the whole chart block */
.d-stats{ overflow:hidden; border-radius:12px; }
.d-scanline{ position:absolute; inset:0; pointer-events:none; z-index:1;
background:linear-gradient(90deg,transparent,rgba(22,192,216,.10) 50%,transparent);
transform:translateX(-100%); }
.d-stats.live .d-scanline{ animation:wz-sweep 6s var(--ease) infinite; }
/* ---- Trends: rows slide in, flames flicker ---- */
.d-trends.live .d-trend-row{ animation:wz-rise .55s var(--ease-out) backwards; }
.d-trends.live .d-trend-row:nth-child(2){ animation-delay:.1s; }
.d-trends.live .d-trend-row:nth-child(3){ animation-delay:.2s; }
@keyframes wz-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.d-trend-fl svg{ transform-origin:50% 80%; }
.d-trends.live .d-trend-fl svg{ animation:wz-flicker 2.2s var(--ease) infinite; }
.d-trends.live .d-trend-row:nth-child(2) .d-trend-fl svg{ animation-delay:.35s; }
.d-trends.live .d-trend-row:nth-child(3) .d-trend-fl svg{ animation-delay:.7s; }
@keyframes wz-flicker{
0%,100%{ transform:scale(1) rotate(0); opacity:.9; }
35%{ transform:scale(1.14) rotate(-3deg); opacity:1; }
65%{ transform:scale(.97) rotate(2deg); opacity:.85; }
}
/* ---- Trends: live demand bars under every row ---- */
.d-trend-row{ position:relative; }
.d-trend-row::after{ content:''; position:absolute; left:28px; right:0; bottom:3px; height:2px;
border-radius:2px; background:linear-gradient(90deg,var(--acc),var(--acc-2));
transform:scaleX(var(--v,.5)); transform-origin:left; opacity:.55; }
.d-trends.live .d-trend-row::after{ animation:wz-demand 3.4s var(--ease) infinite; }
.d-trend-row:nth-child(1){ --v:.86; }
.d-trend-row:nth-child(2){ --v:.62; }
.d-trend-row:nth-child(3){ --v:.4; }
.d-trends.live .d-trend-row:nth-child(2)::after{ animation-delay:.3s; }
.d-trends.live .d-trend-row:nth-child(3)::after{ animation-delay:.6s; }
@keyframes wz-demand{
0%{ transform:scaleX(0); opacity:.2; }
35%{ transform:scaleX(var(--v,.5)); opacity:.75; }
85%{ transform:scaleX(var(--v,.5)); opacity:.55; }
100%{ transform:scaleX(var(--v,.5)); opacity:.2; }
}
.d-trends.live .d-trend-up{ animation:wz-pop 3.4s var(--ease) infinite; display:inline-block; }
.d-trends.live .d-trend-row:nth-child(2) .d-trend-up{ animation-delay:.3s; }
.d-trends.live .d-trend-row:nth-child(3) .d-trend-up{ animation-delay:.6s; }
@keyframes wz-pop{ 0%,70%,100%{ transform:scale(1); } 40%{ transform:scale(1.16); } }
/* ---- Script: a conversation that keeps replaying ---- */
.d-typing{ align-self:flex-start; display:flex; gap:4px; padding:10px 13px; border-radius:13px;
background:var(--glass-2); border:1px solid var(--line); border-bottom-left-radius:5px; opacity:0; }
.d-typing i{ width:5px; height:5px; border-radius:50%; background:var(--ink-3); }
.d-chat.live .d-typing{ animation:wz-typing-box 9s var(--ease) infinite; }
.d-chat.live .d-typing i{ animation:wz-typing-dot 1.1s var(--ease) infinite; }
.d-chat.live .d-typing i:nth-child(2){ animation-delay:.15s; }
.d-chat.live .d-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes wz-typing-dot{ 0%,100%{ transform:translateY(0); opacity:.45; } 40%{ transform:translateY(-4px); opacity:1; } }
@keyframes wz-typing-box{ 0%,18%{ opacity:0; } 24%,44%{ opacity:1; } 50%,100%{ opacity:0; } }
.d-chat.live .d-bubble.me{ animation:wz-msg-me 9s var(--ease) infinite; }
.d-chat.live .d-bubble.ai{ animation:wz-msg-ai 9s var(--ease) infinite; }
@keyframes wz-msg-me{
0%{ opacity:0; transform:translateY(10px) scale(.96); }
10%,92%{ opacity:1; transform:none; }
100%{ opacity:0; transform:translateY(-6px); }
}
@keyframes wz-msg-ai{
0%,46%{ opacity:0; transform:translateY(10px) scale(.96); }
56%,92%{ opacity:1; transform:none; }
100%{ opacity:0; transform:translateY(-6px); }
}
.d-bubble.ai::after{ content:''; display:inline-block; width:2px; height:1em; margin-left:3px;
vertical-align:-2px; background:var(--acc-ink); opacity:0; }
.d-chat.live .d-bubble.ai::after{ animation:wz-caret 1.1s steps(1) 1.1s infinite; }
@keyframes wz-caret{ 0%,50%{ opacity:.9; } 51%,100%{ opacity:0; } }
/* ---- Hero visual: equalizer, sparkline, pulsing play button, growing bars ---- */
.hv-bars i{ animation-play-state:paused; }
.hero-visual.live .hv-bars i{ animation-play-state:running; }
.hv-spark i{ transform-origin:bottom; }
.hero-visual.live .hv-spark i{ animation:wz-spark 2.6s var(--ease) infinite; }
.hero-visual.live .hv-spark i:nth-child(2n){ animation-delay:.3s; }
.hero-visual.live .hv-spark i:nth-child(3n){ animation-delay:.6s; }
@keyframes wz-spark{ 0%,100%{ transform:scaleY(.75); } 50%{ transform:scaleY(1); } }
.hv-play::after{ content:''; position:absolute; inset:-6px; border-radius:50%;
border:1.5px solid var(--acc); opacity:0; pointer-events:none; }
.hero-visual.live .hv-play::after{ animation:wz-ripple 2.6s var(--ease-out) infinite; }
@keyframes wz-ripple{ 0%{ transform:scale(.8); opacity:.55; } 70%,100%{ transform:scale(1.5); opacity:0; } }
.hv-trend-bar{ transform-origin:left; }
.hero-visual.live .hv-trend-bar{ animation:wz-grow 1s var(--ease-out) backwards; }
.hero-visual.live .hv-trend-bar:last-of-type{ animation-delay:.2s; }
@keyframes wz-grow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.hero-visual.live .hv-score{ animation:wz-glow 3.6s var(--ease) infinite; }
@keyframes wz-glow{ 0%,100%{ box-shadow:0 0 0 rgba(22,192,216,0); } 50%{ box-shadow:0 0 18px -4px var(--acc-glow); } }
/* ---- How it works: the connector fills, the icons float ---- */
.steps.live .step-num{ animation:wz-float 5s var(--ease) infinite; }
.steps.live .step:nth-child(2) .step-num{ animation-delay:.6s; }
.steps.live .step:nth-child(3) .step-num{ animation-delay:1.2s; }
.steps.live .step:nth-child(4) .step-num{ animation-delay:1.8s; }
@keyframes wz-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
.steps::after{ content:''; position:absolute; top:36px; left:8%; right:8%; height:6px; z-index:0;
pointer-events:none; border-radius:3px;
background:radial-gradient(closest-side,rgba(14,147,168,.75),transparent);
background-size:18% 100%; background-repeat:no-repeat; background-position:-20% 0; }
.steps.live::after{ animation:wz-line 5.5s linear infinite; }
@keyframes wz-line{ from{ background-position:-20% 0; } to{ background-position:120% 0; } }
/* ---- marquee: keep the loop, but only while it is on screen ---- */
.marquee-track{ animation-play-state:paused; }
.marquee.live .marquee-track{ animation-play-state:running; }
/* ============================================================
AURORA SECTIONS · Technology core + Who it is for
Slow drifting light behind the card grids + a creeping grid mesh.
All three layers are single elements moved with translate3d only.
============================================================ */
.has-aurora{ position:relative; overflow:hidden; }
.has-aurora > .wrap{ position:relative; z-index:1; }
.aurora{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.aurora i{ position:absolute; display:block; border-radius:50%; will-change:transform; }
.aurora .a1{ width:620px; height:620px; left:-8%; top:0%;
background:radial-gradient(closest-side,rgba(22,192,216,.46),transparent 70%); }
.aurora .a2{ width:540px; height:540px; right:-6%; top:26%;
background:radial-gradient(closest-side,rgba(139,125,255,.40),transparent 70%); }
.aurora .a3{ width:680px; height:680px; left:34%; bottom:-24%;
background:radial-gradient(closest-side,rgba(46,211,198,.30),transparent 70%); }
.aurora.alt .a1{ background:radial-gradient(closest-side,rgba(139,125,255,.38),transparent 70%); }
.aurora.alt .a2{ background:radial-gradient(closest-side,rgba(22,192,216,.44),transparent 70%); }
/* sparks drifting through the light */
.aurora .p{ position:absolute; width:4px; height:4px; border-radius:50%; opacity:.2;
background:var(--acc-ink); box-shadow:0 0 12px var(--acc-glow); will-change:transform; }
.aurora .p2{ background:#c4b9ff; box-shadow:0 0 12px var(--vio-glow); }
.aurora .p4{ background:var(--acc-2); }
.aurora .p1{ left:11%; top:24%; } .aurora .p2{ left:31%; top:70%; }
.aurora .p3{ left:57%; top:16%; } .aurora .p4{ left:74%; top:54%; }
.aurora .p5{ left:88%; top:80%; }
.has-aurora.live .aurora .p{ animation:wz-spark-drift 19s ease-in-out infinite; }
.has-aurora.live .aurora .p2{ animation-delay:-4s; }
.has-aurora.live .aurora .p3{ animation-delay:-8s; }
.has-aurora.live .aurora .p4{ animation-delay:-12s; }
.has-aurora.live .aurora .p5{ animation-delay:-16s; }
@keyframes wz-spark-drift{
0%,100%{ transform:translate3d(0,0,0) scale(1); opacity:.15; }
25%{ opacity:.75; }
50%{ transform:translate3d(34px,-52px,0) scale(1.4); opacity:.4; }
75%{ opacity:.7; }
}
/* section titles catch the light */
.has-aurora .sec-title{
background:linear-gradient(100deg,#fff 18%,var(--acc-ink) 32%,#fff 46%,#fff 100%);
background-size:250% 100%; background-position:100% 0;
-webkit-background-clip:text; background-clip:text;
-webkit-text-fill-color:transparent; color:transparent; }
.has-aurora.live .sec-title{ animation:wz-title-shine 7s var(--ease) infinite; }
@keyframes wz-title-shine{ 0%{ background-position:120% 0; } 55%,100%{ background-position:-60% 0; } }
.aurora::after{ content:''; position:absolute; inset:-60px; opacity:.5;
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:56px 56px;
-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 78%);
mask-image:radial-gradient(ellipse 80% 60% at 50% 40%,#000,transparent 78%); }
.has-aurora.live .aurora .a1{ animation:wz-drift-a 24s ease-in-out infinite; }
.has-aurora.live .aurora .a2{ animation:wz-drift-b 28s ease-in-out infinite; }
.has-aurora.live .aurora .a3{ animation:wz-drift-c 34s ease-in-out infinite; }
.has-aurora.live .aurora::after{ animation:wz-mesh 24s linear infinite; }
@keyframes wz-drift-a{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(70px,50px,0) scale(1.14); } }
@keyframes wz-drift-b{ 0%,100%{ transform:translate3d(0,0,0) scale(1.08); } 50%{ transform:translate3d(-60px,60px,0) scale(1); } }
@keyframes wz-drift-c{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(-80px,-40px,0) scale(1.1); } }
@keyframes wz-mesh{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(56px,56px,0); } }
/* ---- capability cards: living light inside, sheen on hover ---- */
/* Cards keep their original dark-glass fill and hairline border (the gradient
fill/edge experiment from 28.07.2026 read as cheap — reverted). The life on
these blocks comes from the section aurora behind them, the icons and the
hover treatment, not from tinting the card itself. */
.cap{ isolation:isolate; }
/* rotating gradient ring — the showpiece. Runs on hover only, so the conic
repaint never happens for ten cards at once. */
@property --wz-a{ syntax:''; initial-value:0deg; inherits:false; }
.cap-ring{ position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
padding:1.5px; opacity:0; transition:opacity .3s var(--ease);
background:conic-gradient(from var(--wz-a),transparent 0 58%,var(--acc) 72%,var(--vio) 84%,transparent 96%);
-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,linear-gradient(#000 0 0);
mask-composite:exclude; }
.cap:hover .cap-ring{ opacity:1; animation:wz-ring 3.2s linear infinite; }
@keyframes wz-ring{ to{ --wz-a:360deg; } }
/* the old static hover glow becomes a sheen that sweeps once per hover */
.cap::after{ background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.09) 50%,transparent 62%);
opacity:1; transform:translateX(-110%); transition:none; }
.cap:hover::after{ animation:wz-cap-sheen .9s var(--ease); }
@keyframes wz-cap-sheen{ from{ transform:translateX(-110%); } to{ transform:translateX(110%); } }
.cap:hover{ transform:translateY(-5px); border-color:var(--line-2); box-shadow:0 28px 60px -34px rgba(0,0,0,.75); }
/* entrance: cards deal in like cards on a table */
.has-aurora.live .cap{ animation:wz-card-in .75s var(--ease-out) backwards; }
.has-aurora.live .cap:nth-child(2){ animation-delay:.08s; }
.has-aurora.live .cap:nth-child(3){ animation-delay:.16s; }
.has-aurora.live .cap:nth-child(4){ animation-delay:.24s; }
.has-aurora.live .cap:nth-child(5){ animation-delay:.32s; }
.has-aurora.live .cap:nth-child(6){ animation-delay:.4s; }
@keyframes wz-card-in{ from{ opacity:0; transform:translateY(26px) scale(.97); } to{ opacity:1; transform:none; } }
/* icons: float, breathe and react to the cursor */
.cap-ic{ overflow:hidden; }
.cap-ic::after{ content:''; position:absolute; inset:0; border-radius:inherit; opacity:0;
background:linear-gradient(140deg,rgba(22,192,216,.55),rgba(139,125,255,.35)); }
.has-aurora.live .cap-ic{ animation:wz-float 6.5s var(--ease) infinite; }
.has-aurora.live .cap-ic::after{ animation:wz-ic-glow 6.5s var(--ease) infinite; }
.has-aurora.live .cap:nth-child(2) .cap-ic,.has-aurora.live .cap:nth-child(2) .cap-ic::after{ animation-delay:.5s; }
.has-aurora.live .cap:nth-child(3) .cap-ic,.has-aurora.live .cap:nth-child(3) .cap-ic::after{ animation-delay:1s; }
.has-aurora.live .cap:nth-child(4) .cap-ic,.has-aurora.live .cap:nth-child(4) .cap-ic::after{ animation-delay:1.5s; }
.has-aurora.live .cap:nth-child(5) .cap-ic,.has-aurora.live .cap:nth-child(5) .cap-ic::after{ animation-delay:2s; }
.has-aurora.live .cap:nth-child(6) .cap-ic,.has-aurora.live .cap:nth-child(6) .cap-ic::after{ animation-delay:2.5s; }
@keyframes wz-ic-glow{ 0%,100%{ opacity:0; } 50%{ opacity:.5; } }
.cap-ic svg{ position:relative; z-index:1; transition:transform .45s var(--ease); }
.cap:hover .cap-ic svg{ transform:scale(1.14) rotate(-7deg); }
.cap h3{ transition:color .3s var(--ease); }
.cap:hover h3{ color:var(--acc-ink); }
/* ---- icons: micro-interaction on hover only (zero idle cost) ---- */
.tile-ic, .cap-ic, .hv-ic{ transition:transform .35s var(--ease), color .25s var(--ease); }
.tile:hover .tile-ic{ transform:translateY(-2px) rotate(-4deg) scale(1.06); }
.cap:hover .cap-ic{ transform:translateY(-2px) scale(1.06); }
.logo-item svg{ transition:transform .3s var(--ease); }
.logo-item:hover svg{ transform:translateY(-2px) scale(1.1); }
@media (max-width:1080px){
.caps, .caps.four{ grid-template-columns:repeat(2,1fr); }
.bento{ grid-template-columns:repeat(4,1fr); }
.tile.span3,.tile.span4{ grid-column:span 4; } .tile.span2{ grid-column:span 2; }
.quotes{ columns:2; }
}
@media (max-width:900px){
/* keep the section light softer on phones so the copy stays the brightest thing */
.aurora{ opacity:.5; }
.nav-links{ display:none; }
.nav-burger{ display:flex; }
.nav-menu{
display:block; position:absolute; left:0; right:0; top:100%;
padding:8px 18px 18px; background:rgba(7,9,14,.94);
backdrop-filter:blur(20px) saturate(160%); border-bottom:1px solid var(--line);
opacity:0; visibility:hidden; transform:translateY(-10px); pointer-events:none;
transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.nav.menu-open .nav-menu{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.nav-menu a{ display:block; font-size:16px; font-weight:700; color:var(--ink-2);
padding:14px 12px; border-radius:12px; transition:.18s var(--ease); }
.nav-menu a:hover, .nav-menu a:focus-visible{ color:var(--ink); background:var(--glass); }
.nav-menu .nav-menu-login{ margin-top:8px; text-align:center; color:var(--ink);
background:var(--glass); border:1px solid var(--line-2); }
.hero-inner{ grid-template-columns:1fr; }
.hero-visual{ height:480px; margin-top:20px; }
.steps{ grid-template-columns:repeat(2,1fr); }
.steps::before{ display:none; }
.metrics{ grid-template-columns:repeat(2,1fr); }
.plans{ grid-template-columns:1fr; max-width:440px; margin:0 auto; }
.plan.feat{ transform:none; } .plan.feat:hover{ transform:translateY(-6px); }
.footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
.caps, .caps.four{ grid-template-columns:1fr; }
.wrap{ padding:0 20px; }
.section{ padding:84px 0; }
.bento{ grid-template-columns:1fr; }
.tile.span2,.tile.span3,.tile.span4{ grid-column:span 1; }
.quotes{ columns:1; }
.metrics{ grid-template-columns:1fr 1fr; }
.cmp-row{ grid-template-columns:1.3fr repeat(3,1fr); }
.cmp-cell{ padding:13px 8px; font-size:12px; }
.hero-visual{ height:430px; transform:scale(.86); }
.footer-top{ grid-template-columns:1fr; gap:28px; }
/* compact nav: at this width the full bar (brand + lang + login + CTA)
overflowed the viewport and the primary CTA got clipped. */
.nav{ padding:12px 18px; } .nav.scrolled{ padding:10px 18px; }
.brand{ gap:9px; }
.brand-mark{ width:32px; height:32px; border-radius:9px; font-size:16px; }
.brand-name{ font-size:16px; }
.nav-cta{ gap:8px; }
/* on phones the bar keeps only brand · language · burger — the studio CTA
lives in the menu and 200px below in the hero, so it isn't lost. */
.nav-login{ display:none; }
.nav-cta .btn-primary{ display:none; }
.lang-opt{ padding:11px 11px; }
}
@media (max-width:400px){
.nav{ padding:11px 14px; } .nav.scrolled{ padding:9px 14px; }
.brand-name{ font-size:15px; }
.lang-opt{ padding:11px 10px; }
}