:root { --ink:#060810; --ink-soft:#0b1020; --panel:#101a31; --panel-2:#152441; --line:#2b3d67; --text:#f4f8ff; --muted:#aab9d8; --cyan:#28e2ff; --violet:#9272ff; --acid:#d5ff45; --blue:#3475ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; }
.site-nav { position:fixed; z-index:20; inset:0 0 auto; display:flex; min-height:70px; align-items:center; justify-content:space-between; gap:22px; padding:12px max(24px,calc((100vw - 1200px) / 2)); border-bottom:1px solid rgba(40,226,255,.2); background:rgba(6,8,16,.9); backdrop-filter:blur(16px); }
.site-brand { display:inline-flex; align-items:center; gap:10px; color:var(--text); font-size:18px; font-weight:850; text-decoration:none; white-space:nowrap; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; border:1px solid var(--cyan); background:var(--cyan); color:var(--ink); font-size:12px; font-weight:950; transform:skewY(-7deg); }
.site-links { display:flex; gap:27px; margin:0; padding:0; list-style:none; }
.site-links a { color:var(--muted); font-size:14px; text-decoration:none; }
.site-links a:hover { color:var(--cyan); }
.nav-download,.button-primary,.button-secondary { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:0 19px; border-radius:2px; font-size:13px; font-weight:800; text-decoration:none; transition:transform .2s,background-color .2s,border-color .2s; }
.nav-download,.button-primary { background:var(--cyan); color:#031018; }
.nav-download:hover,.button-primary:hover { background:#83f0ff; transform:translateY(-2px); }
.button-secondary { border:1px solid #576b99; color:var(--text); }
.button-secondary:hover { border-color:var(--violet); color:var(--cyan); }
.button-secondary span { margin-left:10px; font-size:18px; }
.hero { position:relative; display:grid; min-height:790px; grid-template-columns:minmax(0,1fr) minmax(420px,.86fr); gap:70px; align-items:center; overflow:hidden; padding:132px max(24px,calc((100vw - 1200px) / 2)) 78px; background:radial-gradient(ellipse at 88% 12%,#182b55 0,transparent 39%),var(--ink); }
.hero-grid { position:absolute; inset:0; opacity:.35; background-image:linear-gradient(rgba(92,120,180,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(92,120,180,.16) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(90deg,black,transparent 82%); }
.hero-copy,.hero-player { position:relative; z-index:1; }
.kicker,.section-eyebrow { margin:0 0 16px; color:var(--cyan); font-size:12px; font-weight:850; letter-spacing:.11em; }
.kicker span { color:var(--acid); margin-left:8px; }
.hero h1 { max-width:650px; margin:0; font-size:clamp(49px,6.2vw,78px); line-height:1; letter-spacing:0; }
.hero h1 em { color:var(--violet); font-style:normal; }
.hero-copy > p:not(.kicker) { max-width:560px; margin:25px 0 34px; color:#c7d2e9; font-size:18px; line-height:1.65; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero-meta { display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; color:#7185ae; font-size:11px; font-weight:750; letter-spacing:.08em; }
.hero-player { width:min(100%,470px); justify-self:end; border:1px solid #526897; background:#0b1020; box-shadow:20px 20px 0 rgba(40,226,255,.11),-10px -10px 0 rgba(146,114,255,.12); }
.preview-frame { position:relative; aspect-ratio:9 / 12; overflow:hidden; background:#162342; }
.preview-frame img { width:100%; height:100%; object-fit:cover; filter:hue-rotate(174deg) saturate(1.15) contrast(1.12); }
.preview-tint { position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,9,30,.4),transparent 42%,rgba(4,8,18,.72)); }
.recording,.scene-title { position:absolute; z-index:1; color:#fff; font-size:11px; font-weight:850; letter-spacing:.08em; }
.recording { top:18px; left:18px; color:var(--acid); }.scene-title { right:18px; bottom:18px; margin:0; font-size:15px; }
.play-button { position:absolute; top:50%; left:50%; display:grid; width:62px; height:62px; place-items:center; border:1px solid var(--cyan); border-radius:50%; background:rgba(6,8,16,.45); transform:translate(-50%,-50%); }
.play-button span { width:0; height:0; margin-left:4px; border-top:9px solid transparent; border-bottom:9px solid transparent; border-left:14px solid var(--cyan); }
.player-controls { display:grid; grid-template-columns:40px 1fr 40px; gap:8px; align-items:center; padding:15px 15px 11px; color:var(--muted); font-size:10px; }
.progress { height:3px; background:#2b3e69; }.progress i { display:block; width:35%; height:100%; background:var(--cyan); }
.timeline { display:grid; grid-template-columns:repeat(8,1fr); gap:3px; height:45px; padding:0 15px; overflow:hidden; }.timeline b { background:linear-gradient(140deg,#275179,#926fff); }.timeline b:nth-child(2n) { background:linear-gradient(140deg,#182d5a,#22c9d8); }.timeline b:nth-child(3n) { background:linear-gradient(140deg,#4e3c94,#a7d832); }
.player-foot { display:flex; justify-content:space-between; padding:12px 15px 15px; color:#8294bd; font-size:10px; font-weight:800; letter-spacing:.08em; }
.signal-bar { display:flex; min-height:74px; align-items:center; justify-content:center; gap:26px; overflow:hidden; padding:12px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0a142b; white-space:nowrap; }.signal-bar p { margin:0; color:#d7e1fa; font-size:11px; font-weight:850; letter-spacing:.1em; }.signal-bar i { width:7px; height:7px; flex:0 0 7px; background:var(--acid); transform:rotate(45deg); }
.page-section { padding:110px max(24px,calc((100vw - 1100px) / 2)); }.section-heading { max-width:670px; margin-bottom:52px; }.section-heading h2,.suite-copy h2 { margin:0; font-size:clamp(33px,4.4vw,51px); line-height:1.1; letter-spacing:0; }.section-heading > p:last-child { margin:18px 0 0; color:var(--muted); font-size:17px; line-height:1.65; }.compact { max-width:620px; }
.studio { background:var(--ink); }.tool-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }.tool-card { position:relative; min-height:250px; padding:27px; overflow:hidden; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink-soft); }.tool-card:hover { background:#111d38; }.card-code { color:var(--acid); font-size:12px; font-weight:850; }.tool-card h3 { margin:50px 0 11px; font-size:21px; }.tool-card p { max-width:240px; margin:0; color:var(--muted); font-size:14px; line-height:1.7; }.card-icon { position:absolute; right:23px; bottom:19px; color:rgba(40,226,255,.82); font-size:38px; font-weight:850; }.tool-prompt .card-icon,.tool-template .card-icon { color:var(--violet); }.tool-library .card-icon { color:var(--acid); }
.edit-suite { display:grid; grid-template-columns:minmax(0,.85fr) minmax(460px,1.15fr); gap:75px; align-items:center; background:#0c1325; }.suite-copy > p:not(.section-eyebrow) { margin:21px 0 29px; color:var(--muted); font-size:16px; line-height:1.7; }.check-list { display:grid; gap:15px; margin:0; padding:0; list-style:none; }.check-list li { display:flex; gap:12px; color:#e4ebfa; font-size:15px; line-height:1.5; }.check-list li::before { color:var(--acid); content:"+"; font-weight:900; }
.suite-screen { border:1px solid #48618f; background:#080d19; box-shadow:14px 14px 0 rgba(146,114,255,.16); }.screen-top,.screen-tools { display:flex; align-items:center; justify-content:space-between; padding:13px 16px; color:#a2b2d3; font-size:10px; font-weight:850; letter-spacing:.07em; }.screen-canvas { position:relative; aspect-ratio:16 / 9; overflow:hidden; }.screen-canvas img { width:100%; height:100%; object-fit:cover; filter:hue-rotate(176deg) saturate(1.12) contrast(1.1); }.screen-canvas::after { position:absolute; inset:0; background:linear-gradient(90deg,rgba(8,13,25,.42),transparent); content:""; }.frame-label { position:absolute; z-index:1; bottom:12px; left:13px; color:var(--acid); font-size:10px; font-weight:850; letter-spacing:.08em; }.screen-track { display:grid; grid-template-columns:38px 1fr 1fr 1fr 38px; gap:4px; align-items:center; padding:16px; color:#8ea0c4; font-size:10px; }.clip { height:36px; }.clip-a { background:#28b5d1; }.clip-b { background:#7564d3; }.clip-c { background:#91b739; }.screen-tools { gap:8px; justify-content:flex-start; border-top:1px solid #243554; }.screen-tools strong { margin-left:auto; padding:6px 10px; background:var(--cyan); color:#05111a; font-size:10px; }
.workflow { background:var(--ink); }.workflow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }.workflow-step { padding-top:20px; border-top:2px solid var(--cyan); }.workflow-step:nth-child(2) { border-color:var(--violet); }.workflow-step:nth-child(3) { border-color:var(--acid); }.workflow-step > span { color:#7589b4; font-size:12px; font-weight:850; }.workflow-step h3 { margin:24px 0 10px; font-size:21px; }.workflow-step p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.final-cta { padding:118px 24px; border-top:1px solid var(--line); background:linear-gradient(120deg,#14234d,#20194d); text-align:center; }.final-cta .section-eyebrow { color:var(--acid); }.final-cta h2 { max-width:760px; margin:0 auto; font-size:clamp(36px,5vw,61px); line-height:1.05; }.final-cta p:not(.section-eyebrow) { max-width:550px; margin:21px auto 31px; color:#d4ddf4; font-size:16px; line-height:1.7; }
.site-footer { padding:56px max(24px,calc((100vw - 1100px) / 2)) 28px; background:#05070d; }.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; }.footer-summary { max-width:315px; margin:17px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }.footer-group h3 { margin:2px 0 15px; font-size:14px; }.footer-group a { display:block; margin:9px 0; color:var(--muted); font-size:14px; text-decoration:none; }.footer-group a:hover { color:var(--cyan); }.footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:42px; padding-top:22px; border-top:1px solid #1c2945; color:#6f80a4; font-size:12px; }
.legal-page { color:var(--text); line-height:1.7; }.legal-page header { position:sticky; top:0; z-index:2; border-bottom:1px solid var(--line); background:rgba(6,8,16,.92); backdrop-filter:blur(15px); }.legal-page .bar,.legal-page main,.legal-page footer { width:min(900px,calc(100% - 40px)); margin:auto; }.legal-page .bar { display:flex; min-height:70px; align-items:center; justify-content:space-between; gap:20px; }.legal-page .brand { display:flex; align-items:center; gap:10px; color:var(--text); font-size:19px; font-weight:850; text-decoration:none; }.legal-page .mark { display:grid; width:33px; height:33px; place-items:center; background:var(--cyan); color:var(--ink); font-size:11px; font-weight:950; }.legal-page nav { display:flex; gap:18px; font-size:14px; }.legal-page nav a { color:var(--muted); text-decoration:none; }.legal-page nav a:hover { color:var(--cyan); }.legal-page main { padding:54px 0 72px; }.legal-page .eyebrow { display:inline-block; padding:4px 9px; border:1px solid var(--line); color:var(--cyan); font-size:11px; font-weight:850; letter-spacing:.08em; }.legal-page h1 { margin:15px 0 8px; font-size:clamp(31px,6vw,43px); line-height:1.15; }.legal-page .updated { margin:0 0 34px; color:var(--muted); font-size:14px; }.legal-page section { margin:16px 0; padding:27px 30px; border:1px solid var(--line); background:var(--panel); }.legal-page h2 { margin:0 0 12px; font-size:19px; }.legal-page p { margin:0 0 12px; color:var(--muted); font-size:15px; }.legal-page p:last-child,.legal-page ul:last-child { margin-bottom:0; }.legal-page ul { margin:0 0 12px; padding-left:22px; color:var(--muted); font-size:15px; }.legal-page li { margin:6px 0; }.legal-page strong,.legal-page .package { color:var(--text); }.legal-page .package { overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }.legal-page .notice { padding-left:14px; border-left:3px solid var(--cyan); }.legal-page footer { padding:26px 0 38px; border-top:1px solid var(--line); color:#7486a9; font-size:13px; }
@media (max-width:850px) { .site-nav { padding:12px 20px; }.site-links { display:none; }.hero { min-height:auto; grid-template-columns:1fr; gap:52px; padding:116px 24px 64px; }.hero-player { justify-self:start; width:min(470px,100%); }.tool-grid { grid-template-columns:repeat(2,1fr); }.edit-suite { grid-template-columns:1fr; gap:44px; }.workflow-grid { gap:22px; }.footer-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:540px) { .site-brand { font-size:16px; }.brand-mark { width:31px; height:31px; }.nav-download { min-height:39px; padding:0 12px; font-size:12px; }.hero h1 { font-size:48px; }.hero-copy > p:not(.kicker) { font-size:16px; }.hero-actions { align-items:stretch; flex-direction:column; max-width:260px; }.signal-bar { justify-content:flex-start; }.tool-grid,.workflow-grid,.footer-grid { grid-template-columns:1fr; }.tool-card { min-height:215px; }.page-section { padding:76px 24px; }.section-heading { margin-bottom:38px; }.edit-suite { padding-top:76px; padding-bottom:76px; }.screen-track { grid-template-columns:30px 1fr 1fr 1fr 30px; padding:12px; }.footer-bottom { align-items:flex-start; flex-direction:column; }.legal-page .bar,.legal-page main,.legal-page footer { width:min(100% - 28px,900px); }.legal-page .bar { min-height:62px; }.legal-page section { padding:22px 20px; }.legal-page main { padding-top:37px; } }