:root { --black:#050507; --ink:#0a0a0d; --white:#fff; --soft:#f4f4f6; --muted:#777981; --violet:#7c3aed; --blue:#2563eb; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--black); }
body { margin:0; color:var(--ink); background:var(--white); font-family:"Inter",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-header { position:absolute; top:0; left:50%; z-index:20; display:grid; grid-template-columns:1fr auto 1fr; width:min(100% - 80px,1440px); height:96px; align-items:center; color:white; transform:translateX(-50%); }
.brand { display:inline-flex; width:max-content; align-items:center; gap:10px; font-size:17px; font-weight:750; }
.brand img { width:28px; height:28px; border-radius:8px; object-fit:cover; }
.site-header nav { display:flex; gap:34px; color:rgba(255,255,255,.68); font-size:13px; font-weight:600; }
.site-header nav a,.header-cta { transition:color .25s ease,opacity .25s ease; }
.site-header nav a:hover { color:white; }
.header-cta { justify-self:end; padding:10px 16px; border:1px solid rgba(255,255,255,.28); border-radius:999px; font-size:12px; font-weight:700; backdrop-filter:blur(16px); }
.scene { width:100%; height:100%; object-fit:cover; }
.hero { position:relative; min-height:100svh; overflow:hidden; color:white; background:#080a12; }
.scene-hero { position:absolute; inset:0; transform:scale(1.03); animation:heroEnter 2.2s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(2,3,9,.92) 0%,rgba(2,3,9,.67) 36%,rgba(2,3,9,.08) 72%),linear-gradient(0deg,rgba(2,3,9,.56),transparent 48%); }
.hero-content { position:relative; z-index:2; display:flex; min-height:100svh; width:min(100% - 80px,1440px); margin:auto; flex-direction:column; align-items:flex-start; justify-content:center; padding-top:70px; }
.hero h1 { max-width:840px; margin:0; font-size:clamp(64px,6.4vw,104px); line-height:.9; letter-spacing:0; font-weight:800; }
.hero-content p { margin:32px 0 26px; color:rgba(255,255,255,.7); font-size:16px; }
.light-button { display:inline-flex; min-height:50px; align-items:center; gap:32px; padding:0 22px; border:1px solid rgba(255,255,255,.32); border-radius:999px; color:white; background:rgba(255,255,255,.08); font-size:13px; font-weight:650; backdrop-filter:blur(18px); transition:background .25s ease,transform .25s ease; }
.light-button:hover { background:rgba(255,255,255,.16); transform:translateY(-2px); }
.scroll-note { position:absolute; right:40px; bottom:38px; z-index:2; color:rgba(255,255,255,.45); font-size:10px; letter-spacing:.16em; text-transform:uppercase; writing-mode:vertical-rl; }
.manifesto { padding:130px 40px 0; background:white; }
.manifesto-copy,.section-intro,.stage-copy { width:min(100%,1360px); margin:0 auto; }
.overline { margin:0 0 28px; color:var(--muted); font-size:12px; font-weight:650; letter-spacing:.1em; text-transform:uppercase; }
.manifesto h2,.section-intro h2,.stage-copy h2 { margin:0; font-size:clamp(56px,6.3vw,96px); line-height:.95; letter-spacing:0; font-weight:750; }
.manifesto-answer { margin:28px 0 72px; color:var(--violet); font-size:clamp(24px,2.6vw,40px); font-weight:650; }
.cinema-frame { width:min(100%,1280px); height:min(58vw,700px); margin:0 auto; overflow:hidden; background:#111; }
.cinema-frame img { transform:scale(1.06); }
.possibilities { padding:135px 40px; background:var(--soft); }
.section-intro { margin-bottom:90px; }
.section-intro h2 { max-width:960px; font-size:clamp(54px,6vw,88px); }
.product-lines { width:min(100%,1360px); margin:auto; border-top:1px solid #d7d7dc; }
.product-line { display:grid; grid-template-columns:64px 1fr auto; min-height:132px; align-items:center; border-bottom:1px solid #d7d7dc; }
.product-line > span { color:#9b9ca2; font-size:12px; }
.product-line h3 { margin:0; font-size:clamp(40px,4.2vw,62px); line-height:1; font-weight:650; }
.product-line p { margin:0; color:#777981; font-size:16px; }
.product-stage { overflow:hidden; padding:135px 40px 0; color:white; background:var(--black); }
.stage-copy { margin-bottom:70px; }
.stage-copy .overline { color:#8b8e97; }
.stage-copy h2 { max-width:960px; font-size:clamp(54px,6vw,88px); }
.product-window { width:min(100%,1100px); margin:auto; overflow:hidden; border:1px solid #27272c; border-bottom:0; border-radius:18px 18px 0 0; background:#f7f7f9; box-shadow:0 -30px 140px rgba(74,69,213,.22); }
.window-top { display:flex; height:50px; align-items:center; gap:7px; padding:0 18px; border-bottom:1px solid #dfdfe3; color:#888b95; }
.window-top span { width:8px; height:8px; border-radius:50%; background:#c6c7cc; }
.window-top span:first-child { background:#ff6b6b; }.window-top span:nth-child(2){background:#ffd166}.window-top span:nth-child(3){background:#24c87a}
.window-top b { position:absolute; left:50%; font-size:10px; transform:translateX(-50%); }
.app-shell { display:grid; grid-template-columns:74px 1fr; min-height:560px; color:#11131b; }
.app-shell aside { display:flex; align-items:center; flex-direction:column; gap:24px; padding-top:24px; border-right:1px solid #e5e5e8; background:white; }
.app-mark img { width:34px; height:34px; border-radius:10px; }
.app-shell aside i { width:28px; height:7px; border-radius:5px; background:#e7e8ed; }.app-shell aside i.active{background:linear-gradient(90deg,var(--violet),var(--blue))}
.app-main { padding:48px 54px; }
.app-main header { display:flex; align-items:center; justify-content:space-between; }
.app-main header div { display:flex; flex-direction:column; gap:8px; }.app-main header small{color:#8a8c94;font-size:10px;letter-spacing:.12em}.app-main header strong{font-size:32px}.app-main button{padding:12px 20px;color:white;border:0;border-radius:999px;background:#0b0d17;font:700 12px Inter}
.metric-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:48px 0 14px; }.metric-strip div,.chart-panel{padding:24px;border:1px solid #e4e4e8;border-radius:13px;background:white}.metric-strip div{display:flex;flex-direction:column;gap:10px}.metric-strip small{color:#82848d}.metric-strip strong{font-size:28px}.metric-strip em{color:#059669;font-size:11px;font-style:normal;font-weight:700}
.chart-panel { height:300px; }.chart-heading{display:flex;justify-content:space-between}.chart-heading span{font-weight:700}.chart-heading small{color:#91939a}.bars{display:flex;height:210px;align-items:flex-end;gap:18px;padding-top:30px}.bars i{flex:1;height:34%;border-radius:8px 8px 2px 2px;background:linear-gradient(180deg,var(--violet),#20a8ef)}.bars i:nth-child(2){height:52%}.bars i:nth-child(3){height:43%}.bars i:nth-child(4){height:74%}.bars i:nth-child(5){height:61%}.bars i:nth-child(6){height:88%}.bars i:nth-child(7){height:78%}
.belief,.final-scene { position:relative; min-height:100svh; overflow:hidden; color:white; background:#090a0d; }
.belief .scene,.final-scene .scene { position:absolute; inset:0; }
.belief-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,4,8,.9),rgba(3,4,8,.34) 58%,rgba(3,4,8,.1)); }
.belief-copy,.final-copy { position:relative; z-index:2; display:flex; min-height:100svh; width:min(100% - 80px,1360px); margin:auto; flex-direction:column; justify-content:center; }
.belief-copy p,.final-copy p { margin:0 0 22px; color:rgba(255,255,255,.66); font-size:18px; }
.belief-copy h2,.final-copy h2 { margin:0; font-size:clamp(64px,7vw,108px); line-height:.9; letter-spacing:0; font-weight:760; }
.final-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(3,3,7,.9),rgba(3,3,7,.56) 54%,rgba(3,3,7,.12)); }
.final-copy h2 { max-width:980px; font-size:clamp(60px,6.5vw,98px); }
.final-copy .light-button { width:max-content; margin-top:42px; padding:0 30px; background:white; color:#0a0a0d; }
footer { display:grid; grid-template-columns:1fr auto auto; gap:80px; align-items:start; padding:72px 40px 42px; color:white; background:var(--black); }
footer nav,.socials { display:flex; gap:26px; color:#9b9ca4; font-size:12px; }footer small{grid-column:1/-1;color:#56575d;font-size:11px}.footer-brand img{width:26px;height:26px}.footer-brand{font-size:15px}
.reveal { opacity:0; transform:translateY(30px); transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1); }.reveal.visible{opacity:1;transform:none}.reveal-image{opacity:0;filter:blur(10px);transform:scale(.985);transition:opacity 1.2s ease,filter 1.2s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}.reveal-image.visible{opacity:1;filter:none;transform:none}
@keyframes heroEnter { to { transform:scale(1); } }
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.scene-hero,.reveal,.reveal-image{animation:none;transition:none}.reveal,.reveal-image{opacity:1;filter:none;transform:none}}
@media (max-width:800px){
  .site-header{grid-template-columns:1fr auto;width:calc(100% - 36px);height:76px}.site-header nav{display:none}.brand{font-size:15px}.brand img{width:25px;height:25px}.header-cta{font-size:11px}
  .hero-content,.belief-copy,.final-copy{width:calc(100% - 36px);padding-top:54px}.hero h1{font-size:clamp(44px,12vw,64px);line-height:.92}.hero-content p{max-width:260px;margin-top:24px}.hero-shade{background:linear-gradient(90deg,rgba(2,3,9,.91),rgba(2,3,9,.46)),linear-gradient(0deg,rgba(2,3,9,.68),transparent)}.scene-hero{object-position:66% center}.scroll-note{display:none}
  .manifesto,.possibilities,.product-stage{padding-right:18px;padding-left:18px}.manifesto{padding-top:110px}.manifesto h2{font-size:58px}.manifesto-answer{margin-bottom:64px}.cinema-frame{height:78svh}.cinema-frame img{object-position:46% center}
  .possibilities{padding-top:110px;padding-bottom:110px}.section-intro{margin-bottom:72px}.section-intro h2,.stage-copy h2{font-size:52px}.product-line{grid-template-columns:38px 1fr;min-height:124px}.product-line h3{font-size:42px}.product-line p{grid-column:2;margin-top:-25px;font-size:13px}
  .product-stage{padding-top:110px}.stage-copy{margin-bottom:60px}.product-window{width:760px;transform-origin:top left;scale:.48;margin-bottom:-330px}.app-shell{min-height:650px}
  .belief .scene{object-position:46% center}.belief-copy h2,.final-copy h2{font-size:58px}.belief-copy p,.final-copy p{font-size:15px}.final-scene .scene{object-position:62% center}
  footer{grid-template-columns:1fr;gap:32px;padding:54px 18px 30px}footer nav,.socials{flex-wrap:wrap}footer small{grid-column:auto}
}