:root {
  --page: #0d0f10;
  --panel: #141618;
  --surface: #1b1e21;
  --surface-2: #24282c;
  --surface-3: #2b3034;
  --text: #f5f7f2;
  --muted: #979d98;
  --muted-2: #656c67;
  --accent: #b6ed42;
  --accent-ink: #172006;
  --radius-panel: 28px;
  --radius-control: 999px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; border-width: 0 !important; }
html { min-width: 0; max-width: 100%; scroll-behavior: smooth; overflow-x: hidden; background: var(--page); }
body { min-width: 0; max-width: 100%; margin: 0; overflow-x: hidden; background: var(--page); color: var(--text); font-family: Inter, system-ui, sans-serif; font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input { color: inherit; font: inherit; outline: none; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; cursor: pointer; transition: filter .18s ease, background-color .18s ease, color .18s ease; }
button:hover, a:hover { filter: brightness(.9); }
[hidden] { display: none !important; }

.landing-header { position: sticky; top: 10px; z-index: 30; display: grid; width: min(1240px, calc(100% - 28px)); min-height: 68px; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 10px auto 0; padding: 10px 12px 10px 16px; border-radius: 24px; background: rgba(20, 22, 24, .92); backdrop-filter: blur(18px); }
.landing-brand { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 12px; }
.brand-mark { position: relative; display: grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; border-radius: 13px; background: var(--accent); }
.brand-mark::before { width: 20px; height: 20px; content: ''; border-radius: 50%; background: var(--page); }
.brand-mark::after { position: absolute; width: 8px; height: 8px; content: ''; border-radius: 50%; background: var(--accent); }
.landing-brand strong { font-size: 20px; letter-spacing: -.04em; }
.desktop-nav { display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: var(--radius-control); background: #101214; }
.desktop-nav a { min-height: 38px; padding: 0 15px; border-radius: var(--radius-control); color: var(--muted); font-size: 13px; line-height: 38px; }
.desktop-nav a:hover { background: var(--surface); color: var(--text); }
.header-cta { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.login-link { min-height: 40px; padding: 0 14px; border-radius: var(--radius-control); color: var(--muted); font-size: 13px; line-height: 40px; }
.primary-button, .secondary-button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px; padding: 0 20px; border-radius: var(--radius-control); font-size: 15px; font-weight: 600; transition: filter .18s ease, transform .22s var(--ease); }
.primary-button { background: var(--accent); color: var(--accent-ink); }
.secondary-button { background: var(--surface); color: var(--text); }
.primary-button.compact { min-height: 44px; padding: 0 17px; font-size: 13px; }
.primary-button svg, .secondary-button svg { width: 18px; height: 18px; }
.primary-button:active, .secondary-button:active { transform: scale(1.018); }
.mobile-nav-button { display: none; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: var(--surface); color: var(--text); }
.mobile-nav-button svg { width: 19px; height: 19px; }
.mobile-nav { position: absolute; top: calc(100% + 8px); right: 0; left: 0; padding: 12px; border-radius: 22px; background: var(--surface); opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .3s var(--ease); }
.mobile-nav.visible { opacity: 1; transform: translateY(0); }
.mobile-nav a { display: flex; min-height: 46px; align-items: center; padding: 0 14px; border-radius: 15px; color: var(--muted); font-size: 15px; }
.mobile-nav a:hover { background: var(--surface-2); color: var(--text); }
.mobile-nav .mobile-nav-primary { margin-top: 5px; justify-content: center; border-radius: var(--radius-control); background: var(--accent); color: var(--accent-ink); font-weight: 600; }

main { width: min(1240px, calc(100% - 28px)); margin: 14px auto 0; }
.hero-section { display: grid; min-height: 650px; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 12px; }
.hero-copy { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 72px); border-radius: var(--radius-panel); background: var(--panel); }
.hero-copy h1 { max-width: 580px; margin: 0; font-size: 24px; line-height: 1.18; letter-spacing: -.05em; }
.hero-copy > p { max-width: 520px; margin: 20px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.hero-proof { display: flex; align-items: center; gap: 13px; margin-top: 42px; }
.hero-avatars { display: flex; }
.hero-avatars i { display: grid; width: 36px; height: 36px; place-items: center; margin-left: -7px; border-radius: 50%; background: var(--surface-2); color: var(--accent); font-size: 13px; font-style: normal; }
.hero-avatars i:first-child { margin-left: 0; }
.hero-proof p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.hero-proof strong { color: var(--text); }

.hero-visual { --scene-x: 0deg; --scene-y: 0deg; position: relative; min-width: 0; overflow: hidden; border-radius: var(--radius-panel); background: #111412; perspective: 1200px; isolation: isolate; }
.hero-visual::before { position: absolute; inset: 0; content: ''; background: radial-gradient(circle at 70% 20%, rgba(182, 237, 66, .1), transparent 28%), linear-gradient(145deg, transparent 48%, rgba(91, 116, 61, .13)); }
.hero-scene { position: absolute; inset: 5%; transform: rotateX(var(--scene-y)) rotateY(var(--scene-x)); transform-style: preserve-3d; transition: transform .7s var(--ease); }
.scene-grid { position: absolute; right: -18%; bottom: -30%; left: -18%; height: 72%; background-image: linear-gradient(rgba(182, 237, 66, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(182, 237, 66, .1) 1px, transparent 1px); background-size: 46px 46px; opacity: .44; transform: rotateX(66deg) translateZ(-90px); transform-origin: bottom; mask-image: linear-gradient(to top, #000, transparent 82%); }
.scene-ring { position: absolute; top: 50%; left: 50%; width: 78%; aspect-ratio: 1.7; border-radius: 50%; background: rgba(182, 237, 66, .12); mask: radial-gradient(ellipse, transparent 64%, #000 65%, #000 68%, transparent 69%); transform-style: preserve-3d; }
.scene-ring-one { transform: translate3d(-50%, -50%, -45px) rotateX(68deg) rotateZ(5deg); animation: scene-ring-spin 13s linear infinite; }
.scene-ring-two { width: 58%; opacity: .7; transform: translate3d(-50%, -50%, 5px) rotateX(72deg) rotateZ(70deg); animation: scene-ring-spin-reverse 9s linear infinite; }
.scene-core { position: absolute; top: 50%; left: 50%; width: min(50%, 360px); aspect-ratio: .82; overflow: hidden; border-radius: 34px; background: #1c251f; transform: translate3d(-50%, -50%, 48px) rotateZ(-5deg); transform-style: preserve-3d; animation: scene-core-float 5.8s var(--ease) infinite alternate; }
.scene-liquid { position: absolute; inset: -24%; background: #1a241e; }
.scene-liquid span { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 44% 56% 62% 38%; background: #617b55; opacity: .8; animation: scene-liquid 5.4s var(--ease) infinite alternate; }
.scene-liquid span:nth-child(1) { top: -3%; left: -12%; }
.scene-liquid span:nth-child(2) { right: -12%; bottom: -9%; background: #304d40; animation-delay: -1.8s; }
.scene-liquid span:nth-child(3) { top: 26%; left: 27%; width: 52%; background: #a4bd66; opacity: .62; animation-delay: -3.6s; }
.scene-core-copy { position: absolute; top: 24px; left: 24px; z-index: 2; display: grid; gap: 12px; }
.scene-core-copy span { color: rgba(245, 247, 242, .7); font-size: 13px; }
.scene-core-copy strong { max-width: 240px; font-size: 24px; line-height: 1.22; letter-spacing: -.045em; }
.scene-status { position: absolute; right: 18px; bottom: 18px; left: 18px; z-index: 2; display: grid; min-height: 58px; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 0 14px; border-radius: 18px; background: rgba(13, 15, 14, .84); font-size: 13px; }
.scene-status svg { width: 17px; height: 17px; color: var(--accent); }
.scene-status b { color: var(--accent); font-size: 15px; }
.scene-card { position: absolute; z-index: 4; display: grid; min-width: 178px; gap: 8px; padding: 15px; border-radius: 20px; background: rgba(36, 40, 44, .94); transform-style: preserve-3d; }
.scene-card span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; }
.scene-card span svg { width: 16px; height: 16px; color: var(--accent); }
.scene-card strong { font-size: 15px; }
.scene-card small { color: var(--muted-2); font-size: 13px; }
.scene-card-text { top: 8%; right: 4%; transform: translateZ(92px) rotateZ(6deg); animation: scene-card-a 6s var(--ease) infinite alternate; }
.scene-card-image { bottom: 10%; left: 2%; transform: translateZ(112px) rotateZ(-7deg); animation: scene-card-b 6.8s var(--ease) -2s infinite alternate; }
.scene-card-video { right: 0; bottom: 15%; transform: translateZ(78px) rotateZ(4deg); animation: scene-card-c 5.6s var(--ease) -3.4s infinite alternate; }
.scene-cursor { position: absolute; top: 28%; left: 17%; z-index: 6; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 15px; background: var(--accent); color: var(--accent-ink); transform: translateZ(132px) rotate(-8deg); animation: scene-cursor 4.8s var(--ease) infinite alternate; }
.scene-cursor svg { width: 19px; height: 19px; }
@keyframes scene-ring-spin { to { transform: translate3d(-50%, -50%, -45px) rotateX(68deg) rotateZ(365deg); } }
@keyframes scene-ring-spin-reverse { to { transform: translate3d(-50%, -50%, 5px) rotateX(72deg) rotateZ(-290deg); } }
@keyframes scene-core-float { from { transform: translate3d(-50%, -52%, 48px) rotateZ(-6deg); } to { transform: translate3d(-50%, -47%, 68px) rotateZ(-2deg); } }
@keyframes scene-liquid { from { transform: rotate(-13deg) translate3d(-4%, 3%, 0) scale(.94); border-radius: 44% 56% 62% 38%; } to { transform: rotate(17deg) translate3d(8%, -6%, 0) scale(1.13); border-radius: 59% 41% 35% 65%; } }
@keyframes scene-card-a { to { transform: translate3d(-7px, 16px, 104px) rotateZ(2deg); } }
@keyframes scene-card-b { to { transform: translate3d(13px, -13px, 124px) rotateZ(-3deg); } }
@keyframes scene-card-c { to { transform: translate3d(-10px, -17px, 92px) rotateZ(7deg); } }
@keyframes scene-cursor { to { transform: translate3d(34px, 44px, 148px) rotate(2deg); } }

.product-window { display: grid; min-width: 0; grid-template-columns: 154px minmax(0, 1fr); overflow: hidden; border-radius: var(--radius-panel); background: #101214; }
.preview-sidebar { display: flex; min-width: 0; flex-direction: column; gap: 8px; padding: 20px 14px; background: #0f1112; }
.preview-logo { position: relative; display: grid; width: 42px; height: 42px; place-items: center; margin: 0 0 18px 4px; border-radius: 14px; background: var(--accent); }
.preview-logo::before { width: 20px; height: 20px; content: ''; border-radius: 50%; background: #111411; }
.preview-logo::after { position: absolute; width: 7px; height: 7px; content: ''; border-radius: 50%; background: var(--accent); }
.preview-nav { display: flex; min-height: 42px; align-items: center; gap: 10px; padding: 0 12px; border-radius: 15px; color: var(--muted); font-size: 13px; }
.preview-nav.active { background: var(--surface); color: var(--text); }
.preview-nav svg { width: 17px; height: 17px; }
.preview-plan { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin-top: auto; padding: 14px; border-radius: 18px; background: var(--surface); color: var(--muted); font-size: 13px; }
.preview-plan strong { color: var(--accent); }
.preview-plan i { height: 6px; grid-column: 1 / -1; overflow: hidden; border-radius: 999px; background: var(--surface-3); }
.preview-plan i::after { display: block; width: 62%; height: 100%; content: ''; border-radius: inherit; background: var(--accent); }
.preview-main { position: relative; display: flex; min-width: 0; flex-direction: column; padding: 18px; background: #151719; }
.preview-top { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 13px; }
.preview-top > div { display: flex; min-height: 38px; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--radius-control); background: var(--surface); }
.preview-top svg { width: 16px; height: 16px; color: var(--accent); }
.preview-result { position: relative; min-height: 310px; flex: 1; overflow: hidden; margin: 12px 0; border-radius: 24px; background: #19201c; }
.preview-model { position: absolute; top: 13px; left: 13px; z-index: 4; min-height: 32px; padding: 0 11px; border-radius: var(--radius-control); background: rgba(12, 15, 13, .76); font-size: 13px; line-height: 32px; }
.liquid-field { position: absolute; inset: -20%; overflow: hidden; background: #162019; }
.liquid-field span { position: absolute; width: 72%; aspect-ratio: 1; border-radius: 42% 58% 64% 36%; filter: blur(12px); animation: field-liquid 6s var(--ease) infinite alternate; }
.liquid-field span:nth-child(1) { top: -6%; left: -10%; background: #5c824f; }
.liquid-field span:nth-child(2) { right: -8%; bottom: -12%; background: #213e35; animation-delay: -2.2s; }
.liquid-field span:nth-child(3) { top: 22%; left: 30%; width: 48%; background: #a2bb62; opacity: .65; animation-delay: -4s; }
@keyframes field-liquid { from { transform: rotate(-9deg) translate3d(-3%, 2%, 0) scale(.94); } to { transform: rotate(15deg) translate3d(8%, -5%, 0) scale(1.1); } }
.preview-result-copy { position: absolute; right: 14px; bottom: 14px; left: 14px; z-index: 4; display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-radius: 18px; background: rgba(12, 14, 13, .82); }
.preview-result-copy div { display: grid; gap: 5px; }
.preview-result-copy strong { font-size: 15px; }
.preview-result-copy small { color: var(--muted); font-size: 13px; }
.preview-result-copy b { color: var(--accent); font-size: 18px; }
.preview-composer { padding: 14px; border-radius: 22px; background: var(--surface); }
.preview-composer p { min-height: 48px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.preview-composer > div { display: flex; align-items: center; gap: 7px; }
.preview-composer > div > span { display: grid; min-height: 36px; place-items: center; padding: 0 11px; border-radius: var(--radius-control); background: var(--surface-2); color: var(--muted); font-size: 13px; }
.preview-composer > div > span:first-child { width: 36px; padding: 0; border-radius: 50%; }
.preview-composer svg { width: 16px; height: 16px; }
.preview-composer .preview-chip { display: flex; grid-auto-flow: column; gap: 7px; color: var(--text); }
.preview-composer .preview-chip svg { color: var(--accent); }
.preview-composer button, .demo-input button { display: grid; width: 42px; height: 42px; place-items: center; margin-left: auto; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }

.model-strip { display: flex; min-height: 92px; align-items: center; gap: 24px; margin-top: 12px; padding: 16px 22px; overflow: hidden; border-radius: 24px; background: var(--panel); }
.model-strip > p { flex: 0 0 auto; margin: 0; color: var(--muted); font-size: 13px; }
.model-strip > div { display: flex; min-width: 0; flex: 1; align-items: center; justify-content: space-between; gap: 8px; }
.model-strip span { display: flex; min-height: 40px; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--radius-control); background: var(--surface); font-size: 13px; white-space: nowrap; }
.model-strip svg { width: 16px; height: 16px; color: var(--accent); }
.model-strip img { width: 16px; height: 16px; object-fit: contain; filter: brightness(0) invert(1); }

.workspace-section, .workflow-section, .faq-section { padding: 96px 0 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; padding: 0 10px 28px; }
.section-heading h2 { max-width: 560px; margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.04em; }
.section-heading p { max-width: 460px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.workspace-stage { display: grid; min-height: 580px; grid-template-columns: .78fr 1.22fr; gap: 12px; }
.workspace-copy { display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 18px; border-radius: var(--radius-panel); background: var(--panel); }
.feature-row { display: flex; min-height: 116px; align-items: center; gap: 14px; padding: 17px; border-radius: 22px; color: var(--muted); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.feature-row.active { background: var(--surface); color: var(--text); }
.feature-row > span { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: 15px; background: var(--surface-2); color: var(--accent); }
.feature-row svg { width: 19px; height: 19px; }
.feature-row strong { font-size: 15px; }
.feature-row p { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.workspace-demo { display: flex; min-width: 0; flex-direction: column; padding: 20px; overflow: hidden; border-radius: var(--radius-panel); background: #121415; }
.demo-toolbar { display: flex; align-items: center; gap: 8px; }
.demo-toolbar span { display: flex; min-height: 40px; align-items: center; gap: 8px; padding: 0 13px; border-radius: var(--radius-control); background: var(--surface); color: var(--muted); font-size: 13px; }
.demo-toolbar span:first-child { color: var(--text); }
.demo-toolbar svg { width: 17px; height: 17px; color: var(--accent); }
.demo-content { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 22px; padding: 34px 28px; }
.demo-user { align-self: flex-end; max-width: 62%; padding: 14px 16px; border-radius: 20px 20px 7px 20px; background: var(--accent); color: var(--accent-ink); font-size: 15px; line-height: 1.45; }
.demo-answer { display: flex; max-width: 78%; align-items: flex-start; gap: 13px; }
.demo-answer > svg { width: 40px; height: 40px; flex: 0 0 40px; padding: 10px; border-radius: 14px; background: var(--surface); color: var(--accent); }
.demo-answer strong { font-size: 15px; }
.demo-answer p { margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.demo-input { display: flex; min-height: 78px; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; border-radius: 22px; background: var(--surface); color: var(--muted); font-size: 15px; }
.workspace-demo.refreshing .demo-content { animation: demo-refresh .36s var(--ease); }
@keyframes demo-refresh { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.compact-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
.workflow-rail { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.workflow-rail article { position: relative; min-height: 270px; padding: 24px; overflow: hidden; border-radius: var(--radius-panel); background: var(--panel); }
.workflow-rail article > span { color: var(--muted-2); font-size: 13px; }
.workflow-rail article > svg { display: block; width: 42px; height: 42px; margin: 62px 0 22px; padding: 11px; border-radius: 15px; background: var(--surface); color: var(--accent); }
.workflow-rail h3 { margin: 0; font-size: 18px; }
.workflow-rail p { margin: 10px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; }

.pricing-section { padding-top: 96px; }
.pricing-heading { align-items: flex-end; }
.landing-pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.landing-price-card { display: flex; min-width: 0; min-height: 520px; flex-direction: column; padding: clamp(26px, 4vw, 42px); border-radius: var(--radius-panel); background: var(--panel); }
.landing-price-card.featured { background: var(--accent); color: var(--accent-ink); }
.landing-price-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.landing-price-name { font-size: 20px; font-weight: 600; letter-spacing: -.03em; }
.price-discount { min-height: 34px; padding: 0 12px; border-radius: var(--radius-control); background: var(--surface-2); color: var(--accent); font-size: 13px; line-height: 34px; }
.featured .price-discount { background: var(--accent-ink); color: var(--text); }
.landing-price-card > p { max-width: 470px; margin: 16px 0 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.landing-price-card.featured > p { color: rgba(23, 32, 6, .68); }
.landing-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 10px; margin-top: 34px; }
.landing-price del { width: 100%; color: var(--muted-2); font-size: 15px; }
.featured .landing-price del { color: rgba(23, 32, 6, .52); }
.landing-price strong { font-size: 24px; }
.landing-price small { color: var(--muted); font-size: 13px; }
.featured .landing-price small { color: rgba(23, 32, 6, .64); }
.landing-price-card ul { display: grid; gap: 15px; margin: 30px 0; padding: 0; list-style: none; }
.landing-price-card li { display: flex; align-items: center; gap: 10px; color: #cbd0ca; font-size: 13px; line-height: 1.45; }
.landing-price-card.featured li { color: var(--accent-ink); }
.landing-price-card li svg { width: 19px; height: 19px; flex: 0 0 19px; padding: 3px; border-radius: 50%; background: var(--surface-2); color: var(--accent); }
.landing-price-card.featured li svg { background: var(--accent-ink); color: var(--accent); }
.price-button { display: flex; min-height: 52px; align-items: center; justify-content: center; gap: 9px; margin-top: auto; border-radius: var(--radius-control); background: var(--surface-2); font-size: 15px; font-weight: 600; transition: filter .18s ease, transform .22s var(--ease); }
.landing-price-card.featured .price-button { background: var(--accent-ink); color: var(--text); }
.price-button:active { transform: scale(1.018); }
.price-button svg { width: 18px; height: 18px; }
.price-button.price-current { background: var(--surface-2); color: var(--text); cursor: default; transform: none; }
.price-button.price-current svg { color: var(--accent); }

.faq-list { display: grid; gap: 7px; }
.faq-item { overflow: hidden; border-radius: 22px; background: var(--panel); }
.faq-item button { display: flex; width: 100%; min-height: 76px; align-items: center; justify-content: space-between; gap: 18px; padding: 0 22px; background: transparent; color: var(--text); text-align: left; }
.faq-item button span { font-size: 15px; font-weight: 500; }
.faq-item button svg { width: 20px; height: 20px; flex: 0 0 20px; color: var(--muted); transition: transform .3s var(--ease); }
.faq-item.open button svg { transform: rotate(45deg); }
.faq-item > div { max-height: 0; overflow: hidden; padding: 0 22px; opacity: 0; transform: translateY(-8px); transition: max-height .48s var(--ease), padding .48s var(--ease), opacity .32s ease, transform .48s var(--ease); }
.faq-item.open > div { max-height: 190px; padding-bottom: 21px; opacity: 1; transform: translateY(0); }
.faq-item > div p { max-width: 760px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }

.final-cta { position: relative; display: grid; min-height: 300px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 30px; margin-top: 96px; padding: clamp(30px, 5vw, 64px); overflow: hidden; border-radius: var(--radius-panel); background: var(--panel); }
.final-cta > div:not(.final-liquid), .final-cta > a { position: relative; z-index: 2; }
.final-cta h2 { max-width: 590px; margin: 0; font-size: 24px; line-height: 1.25; letter-spacing: -.04em; }
.final-cta p { max-width: 530px; margin: 14px 0 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.final-liquid { position: absolute; inset: -60% 35% -80% -10%; opacity: .54; }
.final-liquid span { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 44% 56% 62% 38%; background: #456240; animation: final-liquid 6s var(--ease) infinite alternate; }
.final-liquid span:nth-child(2) { right: 5%; bottom: 2%; background: #89a74c; animation-delay: -2s; }
.final-liquid span:nth-child(3) { top: 30%; left: 28%; width: 32%; background: #18332a; animation-delay: -4s; }
@keyframes final-liquid { from { transform: rotate(-12deg) scale(.92); } to { transform: rotate(16deg) translate3d(8%, -5%, 0) scale(1.1); } }

.landing-footer { display: grid; width: min(1240px, calc(100% - 28px)); min-height: 150px; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin: 12px auto 14px; padding: 24px 28px; border-radius: var(--radius-panel); background: #101214; }
.landing-footer p { margin: 0; color: var(--muted); font-size: 13px; text-align: center; }
.landing-footer > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; }
.landing-footer > div a { color: var(--muted); font-size: 13px; }
.landing-footer > div .footer-support-link { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; margin: -9px 0; padding: 0 13px; border-radius: var(--radius-control); background: var(--surface); color: var(--text); }
.footer-support-link:hover { background: var(--surface-2); filter: none; }
.footer-support-link svg { width: 15px; height: 15px; color: var(--accent); }

@media (max-width: 980px) {
  .landing-header { grid-template-columns: 1fr auto; }
  .desktop-nav, .header-cta { display: none; }
  .mobile-nav-button { display: grid; }
  .hero-section { min-height: 0; grid-template-columns: 1fr; }
  .hero-copy { min-height: 470px; }
  .hero-visual { min-height: 620px; }
  .model-strip { align-items: flex-start; flex-direction: column; gap: 12px; }
  .model-strip > div { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .workspace-stage { grid-template-columns: 1fr; }
  .workspace-copy { display: grid; grid-template-columns: repeat(3, 1fr); }
  .feature-row { min-height: 160px; align-items: flex-start; flex-direction: column; }
  .landing-pricing-grid { grid-template-columns: 1fr; }
  .landing-footer { grid-template-columns: 1fr; justify-items: center; }
  .landing-footer > div { justify-content: center; }
}

@media (max-width: 700px) {
  .landing-header, main, .landing-footer { width: calc(100% - 16px); }
  .landing-header { top: 8px; min-height: 62px; margin-top: 8px; padding: 9px 10px 9px 13px; border-radius: 21px; }
  .brand-mark { width: 38px; height: 38px; flex-basis: 38px; border-radius: 12px; }
  .landing-brand strong { font-size: 18px; }
  main { margin-top: 8px; }
  .hero-section { gap: 8px; }
  .hero-copy { min-height: 470px; padding: 32px 22px; border-radius: 24px; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .primary-button, .secondary-button { width: 100%; }
  .hero-proof { margin-top: 34px; }
  .hero-visual { display: none; }
  .hero-scene { inset: 3%; }
  .scene-core { width: min(64%, 300px); }
  .scene-card { min-width: 150px; padding: 13px; }
  .scene-card-text { right: -4%; }
  .scene-card-image { left: -5%; }
  .scene-card-video { right: -7%; bottom: 10%; }
  .preview-sidebar { display: none; }
  .preview-main { min-height: 536px; padding: 12px; border-radius: 19px; }
  .preview-result { min-height: 280px; }
  .preview-composer > div { flex-wrap: wrap; }
  .preview-composer .preview-chip:nth-of-type(3) { display: none; }
  .model-strip { min-height: 0; margin-top: 8px; padding: 18px; border-radius: 22px; }
  .model-strip > div { display: grid; width: 100%; grid-template-columns: 1fr 1fr; }
  .model-strip span { width: 100%; justify-content: flex-start; }
  .workspace-section, .workflow-section, .faq-section, .pricing-section { padding-top: 72px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; padding: 0 4px 22px; }
  .workspace-stage { min-height: 0; gap: 8px; }
  .workspace-copy { display: flex; padding: 12px; border-radius: 24px; }
  .feature-row { min-height: 104px; align-items: center; flex-direction: row; padding: 14px; }
  .workspace-demo { min-height: 500px; padding: 14px; border-radius: 24px; }
  .demo-content { padding: 28px 6px; }
  .demo-user, .demo-answer { max-width: 90%; }
  .workflow-rail { grid-template-columns: 1fr; gap: 8px; }
  .workflow-rail article { min-height: 230px; border-radius: 24px; }
  .workflow-rail article > svg { margin-top: 40px; }
  .landing-pricing-grid { gap: 8px; }
  .landing-price-card { min-height: 500px; padding: 28px 22px; border-radius: 24px; }
  .faq-list { gap: 6px; }
  .faq-item { border-radius: 20px; }
  .faq-item button { min-height: 70px; padding: 0 17px; }
  .faq-item > div { padding-right: 17px; padding-left: 17px; }
  .faq-item.open > div { padding-bottom: 18px; }
  .final-cta { min-height: 360px; grid-template-columns: 1fr; align-content: center; margin-top: 72px; padding: 32px 22px; border-radius: 24px; }
  .final-cta .primary-button { width: max-content; }
  .final-liquid { inset: -20% 5% 20% -30%; }
  .landing-footer { min-height: 220px; margin-top: 8px; padding: 28px 18px; border-radius: 24px; }
  .landing-footer > div { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}