.site-header { position: fixed; z-index: 20; inset: 0 0 auto; height: 76px; display: flex; align-items: center; transition: background .25s, border-color .25s, backdrop-filter .25s; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(9,10,15,.74); border-color: rgba(255,255,255,.07); backdrop-filter: blur(16px); }
.nav-wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.06em; }
.brand-mark { height: 23px; width: 23px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 2px; transform: skewY(-23deg); }
.brand-mark i { display: block; border-radius: 1px; background: linear-gradient(180deg,#c4b5fd,#7c3aed); }.brand-mark i:nth-child(1) { height: 11px; }.brand-mark i:nth-child(2) { height: 18px; }.brand-mark i:nth-child(3) { height: 23px; }
.main-nav { display: flex; align-items: center; gap: 25px; margin-left: auto; }.main-nav a,.text-link { color: #b6bac5; font-size: 13px; font-weight: 600; transition: color .2s; }.main-nav a:hover,.text-link:hover { color: #fff; }
.nav-actions { display: flex; align-items: center; gap: 18px; }.menu-toggle { display: none; }
.hero { padding: 176px 0 110px; min-height: 790px; overflow: hidden; }.hero-grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 40px; }.hero-copy { padding-top: 10px; position: relative; z-index: 1; }.hero h1 { max-width: 600px; margin: 0; font-size: clamp(3.2rem, 6vw, 5.3rem); line-height: .99; letter-spacing: -.075em; }.hero h1 span { background: linear-gradient(98deg,#d8b4fe 12%,#a78bfa 45%,#818cf8); background-clip: text; -webkit-background-clip: text; color: transparent; }.hero-text { max-width: 515px; margin: 27px 0 30px; font-size: 17px; color: #aeb3c0; line-height: 1.75; }.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; }.play-link { color: #ecebf3; background: none; border: 0; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 700; font-size: 14px; }.play-icon { display: grid; place-items: center; width: 28px; height: 28px; padding-left: 2px; border-radius: 50%; border: 1px solid #64697b; font-size: 9px; transition: border-color .2s, background .2s; }.play-link:hover .play-icon { background: var(--primary); border-color: var(--primary); }.hero-proof { margin-top: 45px; color: #7f8492; font-size: 12px; display: flex; align-items: center; gap: 10px; }.avatars { display: inline-flex; }.avatars b { width: 22px; height: 22px; margin-left: -5px; display: grid; place-items: center; color: #fff; border: 2px solid var(--bg); border-radius: 50%; font: 700 8px var(--mono); background: #485168; }.avatars b:nth-child(2) { background: #945c50; }.avatars b:nth-child(3) { background: #4e7a73; }.avatars b:nth-child(4) { background: var(--primary); }
.orb-one,.orb-two { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }.orb-one { width: 560px; height: 560px; top: -195px; left: -255px; background: radial-gradient(circle,rgba(124,58,237,.2),rgba(124,58,237,0) 68%); }.orb-two { width: 700px; height: 700px; right: -200px; top: -185px; background: radial-gradient(circle,rgba(99,102,241,.14),rgba(99,102,241,0) 67%); }
.hero-preview { position: relative; min-height: 530px; }.preview-glow { position: absolute; inset: 12% 5%; border-radius: 30px; background: radial-gradient(ellipse,rgba(139,92,246,.4),transparent 70%); filter: blur(22px); }.preview-frame { position: absolute; width: min(100%, 500px); right: 0; top: 30px; border: 1px solid #3b3d56; border-radius: 18px; overflow: hidden; background: #11131d; box-shadow: 0 30px 60px rgba(0,0,0,.4); }.preview-topline { display: flex; gap: 9px; align-items: center; height: 42px; padding: 0 16px; color: #969aad; font: 500 10px var(--mono); letter-spacing: .06em; }.preview-topline > span:last-child { margin-left: auto; }.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 8px #a78bfa; }.video-surface { height: 306px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 26px; overflow: hidden; background: linear-gradient(120deg,rgba(12,21,36,.48),rgba(11,11,15,.1)), radial-gradient(ellipse at 20% 5%,#e7a976 0 10%,transparent 38%), linear-gradient(155deg,#4575a8 0,#8ca8bf 31%,#b08566 32%,#1a1e2a 71%); }.video-surface:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 50%); }.video-label,.video-caption,.video-play { position:relative; z-index:1; }.video-label { max-width: 270px; font-weight:800; font-size: 30px; line-height:1.02; letter-spacing:-.065em; text-shadow: 0 2px 10px rgba(0,0,0,.35); }.video-play { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:52px; height:52px; padding-left:4px; cursor:pointer; border-radius:50%; border:1px solid rgba(255,255,255,.7); color:white; background:rgba(9,10,15,.24); backdrop-filter:blur(6px); }.video-caption { font-size: 13px; font-weight: 600; }.video-meta { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #11131d; }.video-meta div { display:flex; flex-direction:column; gap:2px; }.video-meta strong { font-size: 12px; }.video-meta span { font: 10px var(--mono); color:#888d9d; }.complete { color: #85e3a1!important; background: rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.2); padding:5px 8px; border-radius:99px; }
.generation-card { position:absolute; z-index:2; left:-26px; bottom: -10px; width: 283px; padding: 16px; border:1px solid #34364b; border-radius: 13px; background:rgba(20,22,33,.92); backdrop-filter: blur(12px); box-shadow:0 18px 38px rgba(0,0,0,.35); }.generation-head { display:flex; justify-content:space-between; color:#e7e8ef; font:500 10px var(--mono); }.generation-head span:last-child { color:#bda6ff; }.progress { height:4px; overflow:hidden; margin:11px 0 12px; border-radius:3px; background:#292d3e; }.progress i { display:block; width:100%; height:100%; background:linear-gradient(90deg,#8b5cf6,#c084fc); }.generation-card ul { list-style:none; margin:0; padding:0; }.generation-card li { display:flex; justify-content:space-between; margin-top:6px; color:#a9adba; font-size:10px; }.generation-card b { color:#7ee3a4; }
.trusted-bar { position:relative; z-index:1; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); background:#0d0f16; }.trusted-inner { display:flex; align-items:center; justify-content:space-between; gap:45px; min-height: 128px; }.trusted-inner p { margin:0; color:#a8acb8; font-size:14px; line-height:1.5; }.trusted-inner strong { color:#f0f0f6; }.capability-list { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:11px; }.capability-list span { padding:8px 12px; color:#b1b5c2; border:1px solid #282b39; border-radius:5px; font: 10px var(--mono); letter-spacing:.02em; }
.workflow-section { background: linear-gradient(180deg,#090a0f,#0d0f17 30%,#090a0f); }.workflow { border-top:1px solid #292c39; }.workflow-step { min-height: 366px; padding:42px 0; display:grid; grid-template-columns: 120px 1fr; gap:50px; border-bottom:1px solid #292c39; }.step-number { color:#787e91; font:500 11px var(--mono); }.step-content { display:grid; grid-template-columns: .9fr 1.1fr; gap:45px; }.step-label { grid-column:1; margin:0 0 8px; color:#a78bfa; font:500 10px var(--mono); letter-spacing:.08em; }.step-content h3 { grid-column:1; margin:-3px 0 0; font-size: 30px; line-height:1.15; letter-spacing:-.055em; }.step-content > p:not(.step-label) { grid-column:1; margin:12px 0 0; align-self:start; color:var(--muted); font-size:14px; }.idea-card,.script-card,.visual-grid,.timeline-card { grid-column:2; grid-row:1/4; align-self:center; }.idea-card { border:1px solid #303345; border-radius:10px; padding:20px; background:#12141d; box-shadow:inset 0 1px rgba(255,255,255,.03); }.idea-card small { color:#898e9d; font:10px var(--mono); letter-spacing:.08em; }.idea-card strong { display:block; margin:8px 0 17px; font-size:16px; letter-spacing:-.03em; }.idea-card div { display:flex; gap:7px; }.idea-card span { padding:5px 8px; border-radius:4px; background:#202332; color:#abaebe; font:9px var(--mono); }.script-card { position:relative; padding:0 0 0 19px; border-left:1px solid #383b4e; }.script-card > div:not(.wave) { padding:7px 0 13px; }.script-card b { color:#ad9af2; font:10px var(--mono); letter-spacing:.08em; }.script-card p { margin:5px 0 0; color:#d9dbe4; font-size:13px; }.wave { height:43px; display:flex; align-items:center; gap:3px; padding:0 10px; margin-top:5px; border-radius:7px; background:linear-gradient(90deg,rgba(139,92,246,.21),rgba(99,102,241,.09)); }.wave span { width:3px; background:#bda7ff; border-radius:99px; }.wave span:nth-child(1),.wave span:nth-child(5) {height:9px}.wave span:nth-child(2),.wave span:nth-child(6) {height:23px}.wave span:nth-child(3),.wave span:nth-child(7) {height:15px}.wave span:nth-child(4),.wave span:nth-child(8) {height:30px}.wave em { margin-left:auto; color:#c6b6ff; font:9px var(--mono); font-style:normal; }.visual-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }.visual-card { height:149px; padding:10px; display:flex; justify-content:flex-end; flex-direction:column; overflow:hidden; position:relative; border-radius:7px; background-size:cover; background-position:center; }.visual-card:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(3,4,8,.85),transparent 68%); }.visual-card small,.visual-card b { z-index:1; }.visual-card small { font:8px var(--mono); color:#d7d3ff; }.visual-card b { margin-top:4px; font-size:10px; line-height:1.2; }.portrait-card { background:linear-gradient(150deg,#c19e7d,#263248 61%,#0b0d14); }.rocket-card { background:linear-gradient(160deg,#e35c2c,#172c48 52%,#080b13); }.tesla-card { background:linear-gradient(150deg,#333841,#c7ced1 51%,#101217); }.office-card { background:linear-gradient(150deg,#d9a869,#55514d 40%,#17131a); }.timeline-card { padding:15px; border-radius:9px; border:1px solid #2e3140; background:#11131b; }.timeline-scenes { display:flex; height:34px; gap:3px; margin-bottom:13px; }.timeline-scenes i { flex:1; border-radius:3px; background:linear-gradient(145deg,#a8774f,#3e5e83); }.timeline-scenes i:nth-child(2n) { background:linear-gradient(145deg,#756557,#1c293c); }.timeline-card > div:not(:first-child) { display:flex; align-items:center; gap:11px; margin-top:6px; }.timeline-card > div span { width:53px; color:#878c9c; font:9px var(--mono); }.track { display:block; height:6px; flex:1; border-radius:4px; }.voice-track { background:repeating-linear-gradient(90deg,#b492ff 0 4px,transparent 4px 6px),#473c72; }.music-track { background:linear-gradient(90deg,#818cf8,#6d53bb); }.subtitle-track { background:repeating-linear-gradient(90deg,#a4a9b8 0 11px,transparent 11px 14px),#3b3d4b; }.timeline-card footer { display:flex; align-items:center; gap:8px; margin-top:13px; padding-top:10px; border-top:1px solid #282b38; color:#8d92a0; font:9px var(--mono); }.timeline-card footer b { padding:3px 5px; border-radius:3px; color:#d5d7e0; background:#212431; font-size:8px; }
.feature-section { background:#0c0e15; }.split-heading { max-width:none; display:flex; justify-content:space-between; align-items:end; gap:40px; }.split-heading > p { margin:0; }.feature-grid { display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap:14px; }.feature-card { min-height:235px; padding:27px; overflow:hidden; position:relative; border:1px solid #2a2d3b; border-radius:13px; background:#12141d; }.feature-card h3 { margin:10px 0 8px; font-size:21px; letter-spacing:-.04em; }.feature-card p { margin:0; color:#959aa8; font-size:12px; line-height:1.65; }.feature-icon { width:28px; height:28px; display:grid; place-items:center; color:#c4b5fd; border:1px solid #4a3f6c; border-radius:7px; background:#201a36; }.feature-kicker { margin-top:21px!important; color:#aa95ef!important; font:10px var(--mono)!important; letter-spacing:.08em; }.feature-featured { grid-row:span 2; background: radial-gradient(circle at 75% 22%,rgba(112,65,238,.18),transparent 34%),#12141d; }.feature-featured h3 { font-size:29px; }.topic-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:22px; }.topic-tags span { padding:5px 7px; color:#c2c5d0; border:1px solid #333546; border-radius:4px; font:9px var(--mono); }.mode-flow { position:absolute; right:0; bottom:0; left:0; display:flex; align-items:center; justify-content:center; gap:12px; padding:17px; color:#b5a0fa; border-top:1px solid #2c2d3d; background:rgba(10,11,17,.42); font:10px var(--mono); }.mode-flow i { color:#716f85; font-style:normal; }.relax-card { background:linear-gradient(118deg,rgba(91,60,154,.2),transparent 60%),#12141d; }.split-video { display:grid; grid-template-rows:1fr 1fr; height:93px; margin-top:20px; overflow:hidden; border-radius:7px; border:1px solid #3d4052; }.split-video div { display:flex; align-items:center; justify-content:center; color:#d4d6e0; font:10px var(--mono); text-align:center; background:linear-gradient(115deg,#4c6a86,#ab8a70); }.split-video div+div { background:linear-gradient(115deg,#cb8251,#574334); }.split-video span { margin-left:7px; padding:2px 4px; color:#90e6ac; border-radius:3px; background:rgba(34,197,94,.15); font-size:8px; }.mini-card { min-height:190px; }.mini-card h3 { margin-top:18px; }
.modes-section { overflow:hidden; }.centered { margin-right:auto; margin-left:auto; text-align:center; }.centered > p:last-child { margin-right:auto; margin-left:auto; }.mode-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }.mode-card { min-height:340px; padding:19px; display:flex; flex-direction:column; overflow:hidden; border:1px solid #292c39; border-radius:11px; background:#11131b; }.mode-card.available { border-color:#594995; background:radial-gradient(circle at 50% 100%,rgba(110,70,221,.24),transparent 50%),#141420; }.mode-head { display:flex; justify-content:space-between; align-items:center; color:#73798a; font:10px var(--mono); }.mode-head b { padding:4px 5px; border-radius:3px; color:#bdb0ef; background:#282146; font-size:8px; letter-spacing:.04em; }.available .mode-head b { color:#a7efc0; background:rgba(34,197,94,.14); }.mode-card h3 { margin:34px 0 6px; font-size:21px; letter-spacing:-.045em; }.mode-card > p { min-height:37px; margin:0; color:#9297a6; font-size:11px; }.documentary-sample,.chat-sample,.ranking-sample,.vs-sample { margin-top:auto; min-height:127px; border-radius:7px; }.documentary-sample { position:relative; display:flex; align-items:end; justify-content:space-between; padding:12px; overflow:hidden; background:linear-gradient(130deg,#3a5780,#bca87f 62%,#362c2a); }.documentary-sample:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.55),transparent); }.documentary-sample span,.documentary-sample i { position:relative; z-index:1; }.documentary-sample span { font-size:16px; line-height:1.1; font-weight:800; letter-spacing:-.05em; }.documentary-sample i { display:grid; place-items:center; width:28px; height:28px; padding-left:2px; border:1px solid white; border-radius:50%; font-size:8px; font-style:normal; }.chat-sample { display:flex; flex-direction:column; justify-content:center; gap:8px; padding:11px; background:#171928; }.chat-sample span { align-self:flex-start; max-width:80%; padding:7px; border-radius:6px 6px 6px 1px; color:#cfc9ec; background:#28233e; font:9px var(--mono); }.chat-sample span+span { align-self:end; border-radius:6px 6px 1px; color:#cbdbfa; background:#24324d; }.chat-sample em { color:#bbb9c7; font-style:normal; }.ranking-sample { display:flex; flex-direction:column; gap:5px; justify-content:center; padding:14px; background:linear-gradient(145deg,#2b1f43,#161622); }.ranking-sample strong { color:#c8b7ff; font:700 14px var(--mono); }.ranking-sample span { padding:6px; border-left:2px solid #a174f6; color:#c8cbd6; background:#211d31; font-size:10px; }.vs-sample { display:flex; align-items:center; justify-content:center; gap:12px; padding:14px; background:linear-gradient(130deg,#343c62,#30243f); text-align:center; }.vs-sample span { font-size:11px; font-weight:700; }.vs-sample b { padding:6px; color:#cfbcff; border-radius:50%; border:1px solid #936ef4; font:10px var(--mono); }
.examples-section { background:#0c0e15; }.arrow-link { padding:0; color:#c5b5f7; border:0; background:none; cursor:pointer; font-weight:700; font-size:13px; }.arrow-link span { margin-left:8px; font-size:19px; }.examples-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:13px; }.example-card { position:relative; aspect-ratio:.74; padding:13px; text-align:left; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; color:white; border:1px solid #3a3b48; border-radius:10px; background:#303a55; transition:transform .25s,border-color .25s; }.example-card:hover { transform:translateY(-6px); border-color:#9582e8; }.example-card:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(1,2,5,.85),transparent 62%); }.example-top,.example-card strong,.example-card i { position:relative; z-index:1; }.example-top { display:flex; justify-content:space-between; }.example-top b,.example-top em { padding:4px 5px; border-radius:3px; background:rgba(9,10,15,.46); backdrop-filter:blur(5px); font:8px var(--mono); font-style:normal; }.example-top b { color:#dad0ff; }.example-top em { color:#e0e2e7; }.example-card strong { font-size:17px; line-height:1.15; letter-spacing:-.055em; margin-top:auto; }.example-card i { display:grid; place-items:center; width:28px; height:28px; margin-top:11px; padding-left:2px; border:1px solid rgba(255,255,255,.85); border-radius:50%; font-size:8px; font-style:normal; }.plane { background:linear-gradient(135deg,#79a3c6 0,#d8b894 45%,#28323c 100%); }.musk { background:linear-gradient(145deg,#b28368,#313e54 48%,#0b0d12); }.lambo { background:linear-gradient(145deg,#75342a,#ed8d35 43%,#121619 100%); }.birds { background:linear-gradient(155deg,#578cc0,#dde1df 48%,#345171 100%); }
.comparison-section { padding-top:0; }.comparison { display:grid; grid-template-columns:1fr 1px 1fr; border:1px solid #2b2e3b; border-radius:15px; overflow:hidden; background:#11131a; }.comparison-side { min-height:446px; padding:50px 56px; }.comparison-side h3 { margin:0; font-size:37px; line-height:1.07; letter-spacing:-.065em; }.traditional { background:linear-gradient(135deg,#151720,#0f1016); }.comparison-side ul { list-style:none; margin:32px 0; padding:0; }.comparison-side li { padding:8px 0; color:#8e93a1; border-bottom:1px solid #282b37; font-size:13px; }.comparison-side li:before { content:"×"; margin-right:10px; color:#707685; }.comparison-side strong { display:inline-block; padding:8px 11px; color:#ffb0a6; border-radius:5px; background:rgba(239,68,68,.1); font:11px var(--mono); }.comparison-divider { display:grid; place-items:center; position:relative; background:#2d3040; }.comparison-divider span { z-index:1; display:grid; place-items:center; width:36px; height:36px; color:#a4a9b8; border:1px solid #3d4051; border-radius:50%; background:#171924; font:10px var(--mono); }.fyren-way { background:radial-gradient(circle at 50% 10%,rgba(104,69,228,.25),transparent 50%),#151423; }.fyren-flow { display:flex; align-items:flex-start; flex-direction:column; gap:7px; margin:31px 0 35px; }.fyren-flow span { min-width:190px; padding:9px 11px; border:1px solid #50487c; border-radius:6px; color:#e3ddf8; background:rgba(94,65,181,.17); font-size:12px; }.fyren-flow i { color:#9e87e9; font-style:normal; }.fyren-way strong { color:#b2f5c8; background:rgba(34,197,94,.12); }
.pricing-section { background:#0c0e15; }.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); align-items:stretch; gap:14px; max-width:990px; margin:auto; }.price-card { position:relative; padding:30px; border:1px solid #2d3040; border-radius:12px; background:#12141d; }.price-card > p { margin:0; color:#cecff5; font:600 13px var(--mono); }.price-card h3 { margin:14px 0 4px; font-size:39px; letter-spacing:-.065em; }.price-card h3 span { color:#8d92a1; font-size:11px; letter-spacing:0; }.price-card em { color:#9297a6; font-size:11px; font-style:normal; }.price-card ul { min-height:143px; list-style:none; margin:24px 0; padding:0; }.price-card li { margin:10px 0; color:#c5c8d2; font-size:12px; }.price-card li:before { content:"✓"; margin-right:9px; color:#ad95ff; }.featured-price { border-color:#7c5ccf; transform:translateY(-8px); background:linear-gradient(160deg,rgba(115,71,228,.2),transparent 36%),#171523; box-shadow:0 18px 45px rgba(66,35,149,.18); }.popular { position:absolute; top:-12px; left:50%; transform:translateX(-50%); padding:5px 8px; color:#efeaff; border-radius:5px; background:#7c4dd4; white-space:nowrap; font:500 8px var(--mono); letter-spacing:.08em; }.price-note { margin:25px 0 0; color:#7e8392; text-align:center; font-size:11px; }
.roadmap { display:grid; grid-template-columns:repeat(4,1fr); position:relative; gap:0; }.roadmap:before { content:""; position:absolute; top:6px; right:10%; left:10%; height:1px; background:#373a49; }.roadmap article { padding:0 19px 0 0; position:relative; }.roadmap article:before { content:""; display:block; width:12px; height:12px; margin-bottom:26px; border:3px solid #090a0f; border-radius:50%; background:#5c6271; }.roadmap article.active:before { background:#a78bfa; box-shadow:0 0 0 5px rgba(139,92,246,.2); }.roadmap small { color:#8e93a3; font:10px var(--mono); letter-spacing:.08em; }.roadmap h3 { margin:9px 0 7px; font-size:16px; letter-spacing:-.04em; }.roadmap p { margin:0; color:#8d92a1; font-size:11px; }.roadmap .active h3 { color:#d8caff; }
.faq-section { background:#0d0f16; }.faq-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:100px; }.faq-list { border-top:1px solid #303340; }.faq-list details { border-bottom:1px solid #303340; }.faq-list summary { cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0; color:#ebebf1; font-size:14px; font-weight:700; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { color:#a68af9; font-size:20px; font-weight:400; transition:transform .2s; }.faq-list details[open] summary span { transform:rotate(45deg); }.faq-list details p { max-width:600px; margin:0; padding:0 35px 19px 0; color:#989daa; font-size:13px; }
.final-cta { padding:124px 0; background:#090a0f; }.final-card { position:relative; overflow:hidden; padding:95px 30px; border:1px solid #55418c; border-radius:18px; text-align:center; background:radial-gradient(ellipse at 50% 110%,rgba(108,60,237,.6),transparent 54%),radial-gradient(circle at 18% 15%,rgba(129,91,255,.18),transparent 22%),#19142b; }.final-card h2 { margin:0; font-size:clamp(2.7rem,5.5vw,5.1rem); line-height:1.02; letter-spacing:-.075em; }.final-card > p:not(.eyebrow) { margin:21px 0 27px; color:#c2bdcf; }.cta-spark { position:absolute; color:#c4b5fd; opacity:.7; }.spark-one { top:23%; left:16%; font-size:24px; }.spark-two { right:15%; bottom:23%; font-size:17px; }
.site-footer { padding-top:58px; border-top:1px solid #242733; background:#08090d; }.footer-grid { display:grid; grid-template-columns:2fr repeat(3,1fr); gap:35px; padding-bottom:49px; }.footer-grid p { max-width:210px; margin:16px 0 0; color:#838898; font-size:12px; }.footer-grid > div:not(:first-child) { display:flex; flex-direction:column; gap:8px; }.footer-grid b { margin-bottom:6px; color:#d8dae2; font-size:12px; }.footer-grid a:not(.brand) { color:#818696; font-size:12px; }.footer-grid a:not(.brand):hover { color:#c6b7fb; }.footer-bottom { display:flex; justify-content:space-between; padding:18px 0; border-top:1px solid #20222c; color:#656a78; font:10px var(--mono); }
.video-modal { width:min(760px,calc(100% - 32px)); padding:0; color:white; border:1px solid #4b4962; border-radius:14px; background:#141622; box-shadow:0 30px 100px rgba(0,0,0,.8); }.video-modal::backdrop { background:rgba(3,4,8,.8); backdrop-filter:blur(5px); }.modal-video { position:relative; }.modal-close { position:absolute; z-index:2; top:12px; right:12px; width:30px; height:30px; color:#eee; cursor:pointer; border:1px solid rgba(255,255,255,.3); border-radius:50%; background:rgba(8,8,12,.5); font-size:22px; line-height:1; }.modal-video-poster { min-height:420px; padding:34px; position:relative; display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; background:linear-gradient(120deg,rgba(10,12,20,.34),rgba(10,10,10,.05)), radial-gradient(ellipse at 15% 0,#daa778 0 12%,transparent 36%), linear-gradient(155deg,#4c7ca9 0,#9bb0bb 32%,#a17457 33%,#1d2029 70%); }.modal-video-poster:after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.65),transparent 60%); }.modal-video-poster > * { position:relative; z-index:1; }.modal-video-poster > span { color:#eee; font:10px var(--mono); letter-spacing:.12em; }.modal-video-poster h2 { margin:auto 0 0; font-size:clamp(2rem,5vw,3.6rem); line-height:1; letter-spacing:-.065em; }.modal-video-poster p { margin:11px 0 0; font-size:13px; }.modal-play { position:absolute!important; top:50%; left:50%; width:60px; height:60px; padding-left:4px; cursor:pointer; color:white; border:1px solid white; border-radius:50%; background:rgba(9,10,15,.4); transform:translate(-50%,-50%); }.modal-info { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 20px; }.modal-info div { display:flex; flex-direction:column; gap:2px; }.modal-info strong { font-size:13px; }.modal-info span { color:#9499a7; font:10px var(--mono); }
@media(max-width:900px){.main-nav{gap:14px}.main-nav a{font-size:12px}.hero{min-height:0}.hero-grid{grid-template-columns:1fr}.hero-preview{max-width:570px;width:100%;margin:0 auto;min-height:490px}.feature-grid{grid-template-columns:1fr 1fr}.feature-featured{grid-row:span 1}.mode-grid{grid-template-columns:repeat(2,1fr)}.workflow-step{grid-template-columns:72px 1fr;gap:24px}.step-content{gap:28px}.comparison-side{padding:42px 35px}.faq-layout{gap:50px}.footer-grid{grid-template-columns:1.5fr repeat(3,1fr)}}
@media(max-width:720px){.site-header{height:65px}.menu-toggle{z-index:2;display:flex;flex-direction:column;justify-content:center;gap:5px;width:35px;height:35px;padding:8px;cursor:pointer;border:1px solid #363847;border-radius:7px;background:#151721}.menu-toggle span{display:block;height:1px;background:#e3e5eb;transition:transform .2s}.main-nav{display:none}.main-nav.open{position:absolute;top:57px;right:16px;left:16px;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px;border:1px solid #343644;border-radius:10px;background:#151720;box-shadow:0 18px 40px rgba(0,0,0,.4)}.main-nav a{padding:11px}.nav-actions .text-link{display:none}.hero{padding:125px 0 62px}.hero h1{font-size:clamp(3rem,14vw,4.5rem)}.hero-text{font-size:15px}.hero-preview{min-height:420px}.preview-frame{top:20px}.video-surface{height:250px}.video-label{font-size:25px}.generation-card{left:-5px;bottom:0}.trusted-inner{align-items:start;flex-direction:column;gap:19px;padding:25px 0}.capability-list{justify-content:start}.workflow-step{display:block;min-height:0}.step-number{display:block;margin-bottom:19px}.step-content{display:block}.step-content h3{font-size:27px}.step-content > p:not(.step-label){margin-bottom:27px}.idea-card,.script-card,.visual-grid,.timeline-card{display:block}.visual-grid{grid-template-columns:repeat(2,1fr)}.visual-card{height:120px}.split-heading{display:block}.split-heading>p{margin-top:20px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:210px}.mode-grid,.examples-grid,.pricing-grid,.roadmap{grid-template-columns:1fr}.mode-card{min-height:285px}.examples-grid{grid-template-columns:1fr 1fr}.example-card{min-height:210px}.comparison{grid-template-columns:1fr;}.comparison-divider{height:1px}.comparison-divider span{position:absolute}.comparison-side{min-height:0;padding:35px 26px}.comparison-side h3{font-size:32px}.pricing-grid{gap:27px}.featured-price{transform:none}.roadmap{gap:20px}.roadmap:before{top:0;bottom:0;left:5px;right:auto;width:1px;height:auto}.roadmap article{padding:0 0 0 26px}.roadmap article:before{position:absolute;top:0;left:0;margin:0}.faq-layout{grid-template-columns:1fr;gap:0}.final-card{padding:74px 20px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-grid>div:first-child{grid-column:span 2}.footer-bottom{flex-direction:column;gap:6px}.modal-video-poster{min-height:350px}.modal-info .complete{display:none}}