:root{
--bg:#0A0A0A;
--bg-2:#111111;
--bg-3:#171717;
--line:rgba(255,255,255,.08);
--line-2:rgba(255,255,255,.14);
--ink:#F2F0EA;
--ink-2:rgba(242,240,234,.72);
--ink-3:rgba(242,240,234,.46);
--ink-4:rgba(242,240,234,.28);
--accent:#2F5BFF;
--accent-ink:#FFFFFF;
--display:"Space Grotesk", system-ui, -apple-system, sans-serif;
--body:"DM Sans", system-ui, -apple-system, sans-serif;
--mono:"JetBrains Mono", ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--body);
font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
/* Layout */
.wrap{width:80%;max-width:1280px;margin:0 auto;padding:0 32px}
@media (max-width:720px){.wrap{width:100%}}
.rule{height:1px;background:var(--line);width:100%}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-3)}
.eyebrow .dot{display:inline-block;width:6px;height:6px;background:var(--accent);
border-radius:50%;vertical-align:middle;margin-right:8px;transform:translateY(-1px)}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;letter-spacing:-.025em;margin:0;
text-wrap:balance}
h1{font-size:clamp(40px,6.6vw,96px);line-height:.96;letter-spacing:-.035em;font-weight:600}
h2{font-size:clamp(36px,5.4vw,72px);line-height:.96;letter-spacing:-.03em}
h3{font-size:clamp(22px,2.4vw,32px);line-height:1.1}
p{margin:0;color:var(--ink-2);text-wrap:pretty}
/* Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(10,10,10,.72);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border-bottom:1px solid var(--line)}
.nav-row{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:600;
font-size:17px;letter-spacing:-.01em}
.brand-mark{width:28px;height:28px;display:block;flex-shrink:0}
.brand-mark img{width:100%;height:100%;display:block;object-fit:contain}
.nav-links{display:flex;gap:28px;font-size:14px;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-links .vidlanding-menu,.foot-links .vidlanding-menu{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.foot-links .vidlanding-menu{gap:24px;flex-wrap:wrap}
@media (min-width:721px){
.vgd-site-header-centered .vgd-header-center{gap:24px}
.vgd-site-header-centered .vgd-header-center .vgd-primary-nav-centered{display:flex!important;position:static!important}
}
@media (max-width:720px){ .nav-links{display:none} }
.content-nav{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;padding:20px 16px;
color:var(--ink-2);font-size:14px;border-bottom:1px solid var(--line)}
.content-nav a:hover{color:var(--ink)}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;
border-radius:999px;border:1px solid transparent;font-weight:500;font-size:14px;
cursor:pointer;transition:transform .12s ease,background .12s ease,border-color .12s ease;
white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn-primary:hover{background:#4972FF;filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink-3)}
.btn-lg{height:54px;padding:0 24px;font-size:15px;border-radius:999px}
.btn-arrow{width:14px;height:14px}
/* Sections */
section{padding:96px 0;position:relative}
section.tight{padding:64px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;
gap:32px;margin-bottom:48px;flex-wrap:wrap}
.section-head .meta{max-width:420px;color:var(--ink-2);font-size:15px}
/* Hero */
.hero{padding:80px 0 96px;position:relative;overflow:hidden}
.hero-grid{display:grid;gap:48px}
.hero-headline .roll{display:inline-flex;align-items:flex-start;background:var(--accent);
color:var(--accent-ink);padding:.05em .22em .12em;border-radius:.08em;height:.96em;
position:relative;overflow:hidden;vertical-align:baseline;font-size:.78em}
.hero-headline .roll-track{display:inline-flex;flex-direction:column;
transition:transform .55s cubic-bezier(.7,0,.2,1);line-height:.96}
.hero-headline .roll-track span{display:flex;align-items:center;height:.96em;line-height:.96;
white-space:nowrap;font-weight:600}
.hero-sub{font-size:clamp(17px,1.6vw,21px);max-width:640px;color:var(--ink-2);
margin-top:32px}
.hero-cta{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.hero-meta{display:flex;gap:24px;margin-top:32px;flex-wrap:wrap}
.hero-meta .item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);
font-family:var(--mono)}
.hero-meta .item::before{content:"";width:6px;height:6px;border-radius:50%;
background:var(--accent)}
/* Demo card */
.demo{position:relative;border:1px solid var(--line);border-radius:18px;
background:linear-gradient(180deg,#121212 0%,#0E0E0E 100%);padding:16px;
overflow:hidden}
.demo-bar{display:flex;align-items:center;gap:8px;padding:6px 4px 14px}
.demo-bar .dot{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.demo-bar .crumb{margin-left:8px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.demo-body{display:grid;grid-template-columns:1.05fr 1.4fr;gap:14px}
@media (max-width:780px){ .demo-body{grid-template-columns:1fr} }
.demo-panel{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;
padding:16px;min-height:380px}
.demo-label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-4);margin-bottom:14px}
.demo-thumb{aspect-ratio:9/16;background:#1A1A1A;border-radius:8px;
background-image:repeating-linear-gradient(45deg,#1F1F1F 0 6px,#181818 6px 12px);
position:relative;overflow:hidden;margin-bottom:14px;border:1px solid var(--line)}
.demo-thumb .play{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink)}
.demo-thumb .play svg{width:48px;height:48px;opacity:.9}
.demo-thumb .time{position:absolute;bottom:8px;right:8px;font-family:var(--mono);
font-size:10px;background:rgba(0,0,0,.6);padding:2px 6px;border-radius:4px}
.demo-title{font-family:var(--display);font-weight:600;font-size:15px;line-height:1.2}
.demo-sub{color:var(--ink-3);font-size:12px;margin-top:4px;font-family:var(--mono)}
.pubrow{display:flex;align-items:center;justify-content:space-between;
padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.pubrow:last-child{border-bottom:0}
.pubrow .left{display:flex;align-items:center;gap:10px}
.pubrow .plat{width:22px;height:22px;border-radius:6px;background:#222;display:grid;
place-items:center;font-family:var(--mono);font-size:10px;font-weight:600}
.pubrow .status{font-family:var(--mono);font-size:11px;color:var(--ink-3);
display:flex;align-items:center;gap:6px}
.pubrow .status.done{color:var(--accent)}
.pubrow .status.live::after{content:"";width:6px;height:6px;border-radius:50%;
background:var(--accent);box-shadow:0 0 0 0 var(--accent);
animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(47,91,255,.6)}
70%{box-shadow:0 0 0 8px rgba(47,91,255,0)}
100%{box-shadow:0 0 0 0 rgba(47,91,255,0)}}
.caption-card{background:#0F0F0F;border:1px solid var(--line);border-radius:8px;
padding:12px;font-size:12px;line-height:1.45;color:var(--ink-2);
margin-top:10px;font-family:var(--mono)}
.caption-card .hash{color:var(--accent)}
/* Problem */
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:780px){ .problem-grid{grid-template-columns:1fr} }
.problem-card{padding:32px;border:1px solid var(--line);border-radius:18px;
background:var(--bg-2);min-height:340px;display:flex;flex-direction:column}
.problem-card.bad{background:radial-gradient(120% 80% at 0% 0%,rgba(255,80,80,.06),transparent 60%),var(--bg-2)}
.problem-card.good{background:radial-gradient(120% 80% at 100% 100%,rgba(47,91,255,.1),transparent 60%),var(--bg-2);
border-color:rgba(47,91,255,.22)}
.problem-card h3{margin-bottom:20px}
.pc-list{display:flex;flex-direction:column;gap:8px;margin-top:auto;font-family:var(--mono);font-size:12px}
.pc-list .item{display:flex;justify-content:space-between;padding:6px 0;
border-top:1px dashed var(--line);color:var(--ink-3)}
.pc-list .item b{color:var(--ink);font-weight:500;font-feature-settings:"tnum"}
.problem-card.bad .item b{color:#FF8B8B}
.problem-card.good .item b{color:var(--accent)}
.tabs-illo{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0}
.tabs-illo .tab{font-family:var(--mono);font-size:10px;padding:5px 10px;border-radius:6px;
background:#1A1A1A;border:1px solid var(--line);color:var(--ink-3);white-space:nowrap}
.tabs-illo .tab.muted{opacity:.4}
.one-illo{display:flex;align-items:center;gap:10px;margin:20px 0;
padding:14px 16px;background:#0F0F0F;border-radius:10px;border:1px solid rgba(47,91,255,.3)}
.one-illo .brand-mark{flex-shrink:0;width:36px;height:36px}
.one-illo .label{font-family:var(--display);font-weight:600;font-size:18px}
.one-illo .sub{font-family:var(--mono);font-size:11px;color:var(--ink-3);margin-top:2px}
/* How it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
@media (max-width:780px){ .steps{grid-template-columns:1fr} }
.step{counter-increment:step;padding:32px 28px;border:1px solid var(--line);
border-radius:18px;background:var(--bg-2);position:relative;min-height:280px;
display:flex;flex-direction:column;gap:14px}
.step::before{content:"0" counter(step);font-family:var(--mono);font-size:11px;
color:var(--accent);letter-spacing:.1em}
.step h3{font-size:24px}
.step p{font-size:14px;color:var(--ink-2)}
.step .illo{margin-top:auto;height:96px;background:#0F0F0F;border:1px solid var(--line);
border-radius:10px;padding:12px;font-family:var(--mono);font-size:11px;color:var(--ink-3);
overflow:hidden;position:relative}
/* Tiers, 1/2/4 responsive */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){ .tiers{grid-template-columns:repeat(2,1fr)} }
@media (max-width:540px){ .tiers{grid-template-columns:1fr} }
.tier{padding:32px 24px 24px;border:1px solid var(--line);border-radius:18px;background:var(--bg-2);
display:flex;flex-direction:column;gap:16px;position:relative}
.tier.featured{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.tier.featured p,.tier.featured .feat li{color:rgba(255,255,255,.82)}
.tier.featured .price-num{color:var(--accent-ink)}
.tier.featured .badge{background:rgba(255,255,255,.95);color:var(--accent)}
.tier .badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
font-family:var(--mono);font-size:10px;
letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px;
background:var(--accent);color:var(--accent-ink);white-space:nowrap;
box-shadow:0 4px 12px rgba(47,91,255,.35);z-index:2}
.tier.featured{margin-top:0}
.tier .feat{flex:1}
.tier .tier-cta{margin-top:auto}
.tier-name{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--ink-3)}
.tier.featured .tier-name{color:rgba(255,255,255,.7)}
.tier h3{font-size:26px;letter-spacing:-.02em}
.tier .desc{font-size:14px;line-height:1.5}
.tier-price{display:flex;align-items:baseline;gap:6px}
.price-num{font-family:var(--display);font-size:40px;font-weight:600;letter-spacing:-.03em;
line-height:1}
.price-suf{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.tier.featured .price-suf{color:rgba(255,255,255,.7)}
.feat{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;
font-size:14px;color:var(--ink-2)}
.feat li{display:flex;gap:10px;align-items:flex-start}
.feat li::before{content:"";flex-shrink:0;width:14px;height:14px;border-radius:50%;
margin-top:4px;background:var(--accent);
-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.tier.featured .feat li::before{background:var(--accent-ink)}
/* Tier preview visuals */
.tier-prev{height:108px;border-radius:12px;background:#0F0F0F;border:1px solid var(--line);
position:relative;overflow:hidden;padding:12px;display:flex;align-items:center;
gap:6px;font-family:var(--mono);font-size:10px}
/* Social Posting: calendar grid */
.tp-social{display:block;padding:14px 12px 24px}
.tp-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;height:68px}
.tp-cal i{display:block;background:#1A1A1A;border-radius:3px;border:1px solid var(--line)}
.tp-cal i.on{background:var(--accent);border-color:var(--accent);
box-shadow:0 0 0 2px rgba(47,91,255,.2)}
.tier.featured .tier-prev{background:rgba(10,10,10,.92);border-color:rgba(10,10,10,.2)}
.tier-prev .tp-cap{position:absolute;bottom:8px;left:14px;color:rgba(242,240,234,.5);
letter-spacing:.12em}
.tier.featured .tier-prev .tp-cap{color:rgba(242,240,234,.55)}
/* Starter: slideshow */
.tp-starter .tp-slide{flex:1;height:78px;border-radius:6px;background:#1A1A1A;
padding:10px;display:flex;flex-direction:column;justify-content:flex-end;gap:5px;
background-image:repeating-linear-gradient(45deg,#1F1F1F 0 4px,#161616 4px 8px)}
.tp-starter .tp-bar{height:6px;border-radius:3px;background:var(--ink-3)}
.tp-starter .tp-bar.a{width:78%;background:var(--accent)}
.tp-starter .tp-bar.b{width:60%}
.tp-starter .tp-bar.c{width:90%}
/* Creator: blob + waveform */
.tp-creator{justify-content:center}
.tp-creator .tp-blob{position:absolute;width:110px;height:110px;border-radius:50%;
background:radial-gradient(circle at 30% 30%,var(--accent),transparent 60%);
left:-20px;top:-20px;opacity:.7;animation:blob 6s ease-in-out infinite}
.tp-creator .tp-blob-2{left:auto;right:-20px;top:auto;bottom:-30px;
background:radial-gradient(circle at 60% 60%,rgba(0,224,199,.4),transparent 60%);
animation-delay:-3s}
@keyframes blob{50%{transform:translate(20px,10px) scale(1.1)}}
.tp-creator .tp-waveform{position:relative;display:flex;align-items:center;gap:3px;
height:60px;z-index:2}
.tp-creator .tp-waveform i{display:block;width:3px;background:var(--ink);
border-radius:2px;animation:wave 1.2s ease-in-out infinite}
@keyframes wave{50%{transform:scaleY(.4)}}
/* Pro: presenter + lip-sync */
.tp-pro{flex-direction:column;align-items:stretch;justify-content:space-between;padding:14px}
.tp-pro .tp-face{width:42px;height:42px;border-radius:50%;
background:linear-gradient(140deg,#2A2A2A,#1A1A1A);
box-shadow:inset 0 0 0 1px var(--line),0 0 0 4px rgba(47,91,255,.18);
position:relative;align-self:flex-start}
.tp-pro .tp-face::before,.tp-pro .tp-face::after{content:"";position:absolute;
width:5px;height:5px;border-radius:50%;background:var(--accent);top:14px}
.tp-pro .tp-face::before{left:12px}
.tp-pro .tp-face::after{right:12px}
.tp-pro .tp-lipsync{display:flex;flex-direction:column;gap:6px}
.tp-pro .tp-row{display:flex;gap:4px;align-items:flex-end;height:14px}
.tp-pro .tp-row span{flex:1;height:6px;background:var(--ink-4);border-radius:2px}
.tp-pro .tp-row span.active{background:var(--accent);height:12px}
.tp-pro .tp-timeline{height:3px;background:rgba(255,255,255,.08);border-radius:2px;
position:relative}
.tp-pro .tp-play{position:absolute;top:-2px;width:42%;height:7px;
background:var(--accent);border-radius:2px}
/* Platform marquee */
.marquee-wrap{overflow:hidden;border-block:1px solid var(--line);
padding:36px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee{display:flex;gap:48px;animation:marquee 38s linear infinite;width:max-content}
.marquee:hover{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
.marquee .pill{display:flex;align-items:center;gap:14px;font-family:var(--display);
font-weight:600;font-size:36px;letter-spacing:-.02em;color:var(--ink-2);white-space:nowrap}
.marquee .pill .glyph{width:36px;height:36px;border-radius:9px;background:#1A1A1A;display:grid;
place-items:center;font-family:var(--mono);font-size:13px;color:var(--accent);
border:1px solid var(--line)}
.marquee .sep{font-size:24px;color:var(--ink-4);font-family:var(--mono)}
/* Not one-click section */
.craft-wrap{padding:48px;border:1px solid var(--line);border-radius:24px;
background:linear-gradient(180deg,#0F0F0F,#0A0A0A);position:relative;overflow:hidden}
.craft-wrap::before{content:"";position:absolute;top:-40%;right:-10%;width:60%;height:120%;
background:radial-gradient(circle,rgba(47,91,255,.12),transparent 60%);pointer-events:none}
.craft-head{position:relative;z-index:1;margin-bottom:40px;max-width:920px}
.craft-title{font-size:clamp(36px,5.4vw,80px);line-height:.96;letter-spacing:-.03em;
margin-top:16px;font-family:var(--display);font-weight:600}
.craft-title .strike{position:relative;color:var(--ink-3)}
.craft-title .strike-not{color:var(--accent);font-weight:700;font-style:italic;
letter-spacing:-.03em}
.craft-title .strike::after{content:"";position:absolute;left:-2%;right:-2%;top:50%;height:6px;
background:var(--accent);transform:rotate(-3deg);border-radius:3px}
.craft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
border:1px solid var(--line);border-radius:16px;overflow:hidden;position:relative;z-index:1}
@media (max-width:900px){ .craft-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .craft-grid{grid-template-columns:1fr} }
.craft-cell{background:#0C0C0C;padding:28px;display:flex;flex-direction:column;gap:10px;
min-height:200px}
.craft-cell .craft-num{font-family:var(--mono);font-size:11px;color:var(--accent);
letter-spacing:.1em}
.craft-cell h4{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;
margin:0;line-height:1.2}
.craft-cell p{font-size:14px;color:var(--ink-3);margin-top:auto;line-height:1.5}
/* Creative direction proof */
.direction-proof{padding-bottom:24px}
.direction-proof-head{max-width:820px;margin-bottom:32px}
.direction-proof-head h2{font-size:clamp(36px,5vw,72px);line-height:1;letter-spacing:-.03em;
margin-top:16px}
.direction-video{aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line-2);
border-radius:24px;background:#111;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.direction-video iframe{display:block;width:100%;height:100%;border:0}
/* Feature grid */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden}
@media (max-width:900px){ .feat-grid{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .feat-grid{grid-template-columns:1fr} }
.feat-cell{background:var(--bg);padding:32px;display:flex;flex-direction:column;gap:12px;
min-height:220px}
.feat-cell .num{font-family:var(--mono);font-size:11px;color:var(--accent);letter-spacing:.1em}
.feat-cell h4{font-family:var(--display);font-weight:600;font-size:22px;letter-spacing:-.02em;
margin:0;line-height:1.15}
.feat-cell p{font-size:14px;color:var(--ink-3);margin-top:auto}
/* Sample */
.samples{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:980px){ .samples{grid-template-columns:repeat(2,1fr)} }
@media (max-width:540px){ .samples{grid-template-columns:1fr} }
.sample{aspect-ratio:9/16;border-radius:14px;border:1px solid var(--line);background:#161616;
overflow:hidden;position:relative;display:flex;flex-direction:column;justify-content:space-between;
padding:14px;cursor:pointer;transition:transform .2s ease}
.sample:hover{transform:translateY(-4px)}
.sample::before{content:"";position:absolute;inset:0;
background-image:repeating-linear-gradient(45deg,#1F1F1F 0 6px,#181818 6px 12px);z-index:0}
.sample > *{position:relative;z-index:1}
.sample-video{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0;
pointer-events:auto}
.sample:has(.sample-video) .meta,
.sample:has(.sample-video) .tag{
background:rgba(0,0,0,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
padding:8px 12px;border-radius:10px}
.sample:has(.sample-video) .tag{padding:4px 8px}
.sample:has(.sample-video)::before{display:none}
.sample .tag{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:4px 8px;
border-radius:999px}
.sample .meta{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.02em;
text-wrap:pretty}
.sample .meta .sub{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--ink-3);
margin-top:6px;text-transform:uppercase;letter-spacing:.1em}
.sample .play-c{position:absolute;inset:0;display:grid;place-items:center;z-index:1;
pointer-events:none}
.sample .play-c svg{width:44px;height:44px;opacity:.9}
/* Pricing */
.pricing-head{display:flex;flex-direction:column;align-items:center;text-align:center;
gap:18px;margin-bottom:48px}
.billing-toggle{display:flex;background:var(--bg-2);border:1px solid var(--line);
border-radius:999px;padding:4px;font-size:13px;position:relative;font-family:var(--mono)}
.billing-toggle button{appearance:none;background:transparent;border:0;padding:8px 18px;
border-radius:999px;cursor:pointer;color:var(--ink-3);position:relative;z-index:1;
transition:color .2s ease}
.billing-toggle button.active{color:var(--accent-ink)}
.billing-toggle .save-tag{position:absolute;right:-46px;top:50%;transform:translateY(-50%);
background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:10px;
padding:2px 8px;border-radius:999px}
.billing-thumb{position:absolute;top:4px;bottom:4px;background:var(--accent);
border-radius:999px;transition:left .2s ease,width .2s ease;z-index:0}
.plan-matrix-wrap{margin-top:64px;padding:36px;border:1px solid var(--line);border-radius:20px;
background:var(--bg-2)}
.plan-matrix-wrap h3{font-size:clamp(24px,3vw,38px);margin:14px 0 8px}
.plan-matrix-wrap > p{color:var(--ink-2);max-width:720px}
.plan-matrix-scroll{overflow-x:auto;margin-top:28px}
.plan-matrix{width:100%;min-width:760px;border-collapse:collapse;text-align:center}
.plan-matrix th,.plan-matrix td{padding:16px;border-bottom:1px solid var(--line)}
.plan-matrix thead th{font:600 13px var(--display);color:var(--ink)}
.plan-matrix thead th:first-child,.plan-matrix tbody th{text-align:left}
.plan-matrix tbody th{font:500 14px var(--body);color:var(--ink-2)}
.plan-matrix td{font:700 18px var(--display)}
.matrix-yes{color:var(--accent)}
.matrix-no{color:var(--ink-4)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:640px){.plan-matrix-wrap{padding:24px 18px}}
/* FAQ */
.faq-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:24px 0;cursor:pointer}
.faq-q{display:flex;justify-content:space-between;gap:24px;align-items:center;
font-family:var(--display);font-weight:500;font-size:clamp(18px,2.2vw,24px);
letter-spacing:-.01em}
.faq-q .toggle{flex-shrink:0;width:32px;height:32px;border-radius:50%;
border:1px solid var(--line-2);display:grid;place-items:center;transition:transform .2s ease,
background .2s ease,border-color .2s ease}
.faq-item[data-open="1"] .toggle{background:var(--accent);border-color:var(--accent);
color:var(--accent-ink);transform:rotate(45deg)}
.faq-q .toggle svg{width:14px;height:14px}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease;
color:var(--ink-2);font-size:15px;max-width:780px}
.faq-item[data-open="1"] .faq-a{grid-template-rows:1fr}
.faq-a > div{overflow:hidden}
.faq-a p{padding-top:14px}
/* Final CTA */
.final{background:var(--accent);color:var(--accent-ink);border-radius:24px;padding:80px 48px;
text-align:center;display:flex;flex-direction:column;align-items:center;gap:24px;
position:relative;overflow:hidden}
.final h2{color:var(--accent-ink);font-size:clamp(40px,6vw,88px);line-height:.96}
.final p{color:rgba(255,255,255,.84);max-width:560px;font-size:17px}
.final .btn-primary{background:#0A0A0A;color:#fff;border-color:#0A0A0A}
.final .btn-primary:hover{background:#1F1F1F;filter:none}
.final .btn-ghost{color:var(--accent-ink);border-color:rgba(255,255,255,.4)}
.final .btn-ghost:hover{border-color:var(--accent-ink)}
/* Footer */
footer{padding:64px 0 48px;border-top:1px solid var(--line);margin-top:96px}
.foot-row{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;
font-size:13px;color:var(--ink-3);font-family:var(--mono)}
.foot-row a:hover{color:var(--ink)}
.foot-links{display:flex;gap:24px;flex-wrap:wrap}
/* Scroll reveal */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].in{opacity:1;transform:none}