@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107.4%;ascent-override:90.2%;descent-override:22.5%;line-gap-override:0%;}
:root{
  --ink:#14110E; --ink-soft:#3A352C; --paper:#F6F2E4; --paper-2:#ECE4CD; --paper-3:#DED2AC;
  --emerald:#0F5C46; --emerald-2:#0B4636; --lime:#31D6A1; --marigold:#F2A93B; --marigold-dark:#C97F1A; --crimson:#C1443B;
  --line:rgba(20,17,14,.14);
  --radius-s:10px; --radius-m:16px; --radius-l:26px;
  --shadow-1:0 1px 2px rgba(20,17,14,.06);
  --shadow-2:0 12px 32px -12px rgba(20,17,14,.28);
  --font-display:'Sora',sans-serif; --font-body:'Inter','Inter Fallback',sans-serif; --font-urdu:'Noto Nastaliq Urdu',serif;

  --dark-bg:#0C0E0A; --dark-surface:#151810; --dark-surface-2:#1D2116; --dark-line:rgba(255,255,255,.09);
  --dark-text:#F3F1E6; --dark-text-dim:#A6A08C;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body); color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
}
img,video{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer;}
a{color:inherit; text-decoration:none;}
input,textarea,select{font-family:inherit; font-size:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--emerald); outline-offset:2px;}
.container{max-width:1180px; margin:0 auto; padding:0 28px;}
.hidden{display:none !important;}
h1,h2,h3,h4{font-family:var(--font-display); letter-spacing:-0.01em; line-height:1.08;}
.eyebrow-tag{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--emerald); background:rgba(15,92,70,.09); padding:6px 14px; border-radius:999px;}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; font-size:15px; padding:13px 24px; border-radius:12px; border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--emerald); color:#fff; box-shadow:0 8px 20px -8px rgba(15,92,70,.6);}
.btn-primary:hover{background:var(--emerald-2); box-shadow:0 10px 26px -8px rgba(15,92,70,.75);}
.btn-secondary{background:transparent; border-color:var(--ink); color:var(--ink);}
.btn-secondary:hover{background:var(--ink); color:var(--paper);}
.btn-ghost{background:rgba(20,17,14,.06); color:var(--ink);}
.btn-ghost:hover{background:rgba(20,17,14,.11);}
/* Inside the dark app shell the light-theme ghost/secondary buttons were invisible */
#view-app .btn-ghost{background:rgba(255,255,255,.08); color:var(--dark-text); border:1px solid var(--dark-line);}
#view-app .btn-ghost:hover{background:rgba(255,255,255,.15);}
#view-app .btn-secondary{border-color:var(--dark-text-dim); color:var(--dark-text);}
#view-app .btn-secondary:hover{background:var(--dark-text); color:var(--dark-bg);}
.btn[disabled]{opacity:.55; cursor:not-allowed;}
.footer-col a{display:block;}
@media(max-width:480px){.site-nav .nav-cta .btn-primary{display:none;} .site-nav .container{gap:8px;}}
.btn-marigold{background:var(--marigold); color:var(--ink);}
.btn-marigold:hover{background:var(--marigold-dark); color:#fff;}
.btn-sm{padding:8px 14px; font-size:13px; border-radius:9px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none !important;}

/* ---------- NAV ---------- */
.site-nav{position:sticky; top:0; z-index:50; background:rgba(246,242,228,.86); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}
.site-nav .container{display:flex; align-items:center; justify-content:space-between; height:74px;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:800; font-size:21px; color:var(--ink);}
.logo .mark{width:34px; height:34px; border-radius:9px; background:var(--emerald); display:flex; align-items:center; justify-content:center; color:#7df2cd; font-family:var(--font-urdu); font-size:18px; flex-shrink:0;}
.nav-links{display:flex; align-items:center; gap:34px; font-size:14.5px; font-weight:500; color:var(--ink-soft);}
.nav-links a:hover{color:var(--ink);}
.nav-cta{display:flex; align-items:center; gap:12px;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;}
.nav-toggle span{width:22px; height:2px; background:var(--ink); border-radius:2px;}

/* ---------- HERO ---------- */
.hero{position:relative; padding:88px 0 100px; overflow:hidden;}
.hero-watermark{position:absolute; top:-40px; right:-40px; font-family:var(--font-urdu); font-size:340px; color:rgba(15,92,70,.05); user-select:none; pointer-events:none; line-height:1;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; position:relative;}
.hero h1{font-size:clamp(40px,5.4vw,68px); font-weight:800; color:var(--ink); max-width:640px;}
.hero h1 .accent{color:var(--emerald);}
.hero-sub{margin-top:22px; font-size:19px; color:var(--ink-soft); max-width:480px; line-height:1.6;}
.hero-actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;}
.hero-trust{margin-top:38px; display:flex; align-items:center; gap:18px; font-size:13.5px; color:var(--ink-soft);}
.trust-dots{display:flex;}
.trust-dots span{width:30px; height:30px; border-radius:50%; background:var(--paper-3); border:2px solid var(--paper); margin-left:-10px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;}
.trust-dots span:first-child{margin-left:0;}

/* phone demo card */
.demo-phone{position:relative; margin-left:auto; width:100%; max-width:340px; background:var(--ink); border-radius:34px; padding:14px; box-shadow:var(--shadow-2); border:1px solid rgba(255,255,255,.06);}
.demo-screen{position:relative; aspect-ratio:9/16; border-radius:24px; overflow:hidden; background:linear-gradient(160deg,#123b30,#0c1f1a 60%,#0a1512); display:flex; flex-direction:column; justify-content:flex-end;}
.demo-screen::before{content:"";position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, rgba(49,214,161,.25), transparent 55%);}
.demo-caption-wrap{position:relative; padding:20px 16px 26px; z-index:2;}
.demo-caption-card{background:rgba(12,15,10,.72); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:14px 16px;}
.demo-caption-label{font-size:11px; font-weight:700; color:var(--lime); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; display:flex; align-items:center; gap:6px;}
.demo-caption-label .dot{width:6px; height:6px; border-radius:50%; background:var(--lime); animation:pulse 1.4s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.demo-caption-text{color:#F3F1E6; font-size:15.5px; font-weight:600; min-height:48px;}
.demo-caption-text .cursor{display:inline-block; width:2px; height:16px; background:var(--lime); margin-left:2px; vertical-align:-2px; animation:blink 1s steps(1) infinite;}
@keyframes blink{50%{opacity:0;}}
.demo-tag-row{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap;}
.demo-tag{font-size:11px; color:var(--lime); background:rgba(49,214,161,.12); padding:3px 9px; border-radius:999px;}
.demo-top-ui{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; position:relative; z-index:2;}
.demo-top-ui .plat{font-size:12px; font-weight:700; color:#fff; background:rgba(255,255,255,.14); padding:5px 11px; border-radius:999px;}
.demo-top-ui .icons{display:flex; gap:10px; color:#fff; opacity:.85; font-size:16px;}

/* ---------- SECTION SHARED ---------- */
section{padding:96px 0;}
.section-head{max-width:600px; margin-bottom:52px;}
.section-kicker{color:var(--emerald); font-weight:700; font-size:13.5px; text-transform:none; margin-bottom:12px; display:block;}
.section-head h2{font-size:clamp(28px,3.4vw,42px); font-weight:800;}
.section-head p{margin-top:14px; font-size:17px; color:var(--ink-soft); line-height:1.6;}
.alt-bg{background:var(--paper-2);}

/* how it works */
.steps-row{display:grid; grid-template-columns:repeat(4,1fr); gap:26px;}
.step-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); padding:26px 22px; position:relative;}
.step-num{font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--emerald); width:34px; height:34px; border-radius:50%; border:1.5px solid var(--emerald); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.step-card h3{font-size:17px; margin-bottom:8px;}
.step-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.55;}

/* text vs video split */
.split-block{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
.split-card{border-radius:var(--radius-l); padding:38px; position:relative; overflow:hidden;}
.split-card.text-card{background:var(--ink); color:var(--paper);}
.split-card.video-card{background:var(--emerald); color:#fff;}
.split-card .split-kicker{font-size:12.5px; font-weight:700; opacity:.65; text-transform:none;}
.split-card h3{font-size:26px; margin:12px 0 14px; font-weight:800;}
.split-card p{opacity:.82; font-size:15px; line-height:1.6; max-width:400px;}
.split-list{margin-top:22px; display:flex; flex-direction:column; gap:10px;}
.split-list div{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; opacity:.9;}
.split-list .chk{width:18px; height:18px; border-radius:5px; background:rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; font-size:11px;}
.split-card .btn{margin-top:26px;}

/* platforms */
.platform-row{display:flex; flex-wrap:wrap; gap:14px;}
.platform-chip{display:flex; align-items:center; gap:10px; background:var(--paper); border:1px solid var(--line); padding:14px 22px; border-radius:14px; font-weight:600; font-size:15px;}
.platform-chip .ic{width:28px; height:28px; border-radius:8px; background:var(--paper-3); display:flex; align-items:center; justify-content:center; font-size:14px;}

/* features grid */
.features-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.feature-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-m); padding:28px;}
.feature-card .ic{width:42px; height:42px; border-radius:11px; background:rgba(15,92,70,.09); color:var(--emerald); display:flex; align-items:center; justify-content:center; font-size:19px; margin-bottom:16px;}
.feature-card h3{font-size:16.5px; margin-bottom:8px;}
.feature-card p{font-size:14.5px; color:var(--ink-soft); line-height:1.55;}

/* pricing */
.price-wrap{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:820px;}
.price-card{border-radius:var(--radius-l); padding:36px; border:1px solid var(--line); background:var(--paper);}
.price-card.pro{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.price-plan-name{font-weight:700; font-size:15px; color:var(--emerald);}
.price-card.pro .price-plan-name{color:var(--lime);}
.price-amt{font-family:var(--font-display); font-size:44px; font-weight:800; margin:10px 0 4px;}
.price-amt span{font-size:15px; font-weight:500; opacity:.6;}
.price-list{margin:24px 0 28px; display:flex; flex-direction:column; gap:11px; font-size:14.5px;}
.price-list div{display:flex; gap:9px; align-items:flex-start;}
.badge-soon{font-size:11px; font-weight:700; background:var(--marigold); color:var(--ink); padding:3px 9px; border-radius:999px; margin-left:8px; vertical-align:2px;}

/* faq */
.faq-list{max-width:760px; display:flex; flex-direction:column; gap:2px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{width:100%; display:flex; justify-content:space-between; align-items:center; padding:20px 4px; background:none; border:none; text-align:left; font-family:var(--font-display); font-weight:600; font-size:16.5px; color:var(--ink);}
.faq-q .plus{font-size:20px; color:var(--emerald); transition:transform .2s ease; flex-shrink:0; margin-left:16px;}
.faq-item.open .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding:0 4px 20px; font-size:14.5px; color:var(--ink-soft); max-width:640px; line-height:1.6;}

/* footer */
.site-footer{background:var(--ink); color:var(--paper); padding:64px 0 32px;}
.footer-top{display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-bottom:44px; border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand p{margin-top:14px; color:rgba(243,241,230,.55); font-size:14px; max-width:280px; line-height:1.6;}
.footer-cols{display:flex; gap:64px; flex-wrap:wrap;}
.footer-col h5{font-size:13px; text-transform:none; color:rgba(243,241,230,.5); margin-bottom:14px; font-weight:600;}
.footer-col a{display:block; font-size:14.5px; color:rgba(243,241,230,.85); margin-bottom:11px;}
.footer-bottom{padding-top:26px; display:flex; justify-content:space-between; font-size:13px; color:rgba(243,241,230,.68); flex-wrap:wrap; gap:10px;}

/* ================= APP SHELL ================= */
#view-app{display:none; min-height:100vh; background:var(--dark-bg); color:var(--dark-text);}
#view-app.active{display:flex;}
#view-landing{display:none;}
#view-landing.active{display:block;}
.app-sidebar{width:250px; flex-shrink:0; background:var(--dark-surface); border-right:1px solid var(--dark-line); display:flex; flex-direction:column; padding:22px 16px; position:sticky; top:0; height:100vh;}
.app-sidebar .logo{color:var(--dark-text); margin-bottom:30px; padding-left:6px;}
.side-link{display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:11px; font-size:14.5px; font-weight:500; color:var(--dark-text-dim); margin-bottom:3px; transition:background .15s ease, color .15s ease;}
.side-link .ic{width:19px; text-align:center; font-size:15px;}
.side-link:hover{background:var(--dark-surface-2); color:var(--dark-text);}
.side-link.active{background:var(--emerald); color:#fff;}
.side-section-label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:rgba(166,160,140,.5); margin:20px 0 8px 14px; font-weight:700;}
.sidebar-foot{margin-top:auto; padding-top:16px; border-top:1px solid var(--dark-line);}
.usage-mini{background:var(--dark-surface-2); border-radius:12px; padding:14px; font-size:12.5px;}
.usage-mini .row{display:flex; justify-content:space-between; margin-bottom:6px; color:var(--dark-text-dim);}
.usage-bar{height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-bottom:12px;}
.usage-bar > div{height:100%; background:var(--lime); border-radius:99px;}
.usage-bar.warn > div{background:var(--marigold);}
.back-to-site{display:block; margin-top:10px; font-size:12.5px; color:var(--dark-text-dim); text-align:center; padding:8px;}
.back-to-site:hover{color:var(--dark-text);}

.app-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.app-topbar{height:70px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid var(--dark-line); position:sticky; top:0; background:rgba(12,14,10,.7); backdrop-filter:blur(8px); z-index:10;}
.topbar-title{font-family:var(--font-display); font-weight:700; font-size:19px;}
.topbar-right{display:flex; align-items:center; gap:16px;}
.usage-pill{display:flex; align-items:center; gap:8px; background:var(--dark-surface-2); padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; color:var(--dark-text-dim);}
.usage-pill b{color:var(--lime); font-weight:700;}
.profile-btn{width:38px; height:38px; border-radius:50%; background:var(--emerald); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; border:none; position:relative;}
.profile-menu{position:absolute; top:56px; right:28px; background:var(--dark-surface-2); border:1px solid var(--dark-line); border-radius:14px; padding:8px; width:200px; box-shadow:0 20px 40px -20px rgba(0,0,0,.6); display:none; z-index:60;}
.profile-menu.open{display:block;}
.profile-menu a, .profile-menu button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:10px 12px; border-radius:9px; font-size:13.5px; background:none; border:none; color:var(--dark-text);}
.profile-menu a:hover, .profile-menu button:hover{background:var(--dark-surface);}

.app-content{flex:1; padding:30px 32px 60px; max-width:1220px; width:100%; margin:0 auto;}
.app-subview{display:none;}
.app-subview.active{display:block;}
.content-head{margin-bottom:26px;}
.content-head h2{font-family:var(--font-display); font-size:24px; font-weight:700;}
.content-head p{color:var(--dark-text-dim); font-size:14.5px; margin-top:6px;}

.panel{background:var(--dark-surface); border:1px solid var(--dark-line); border-radius:18px; padding:26px;}
.field-label{font-size:13px; font-weight:600; color:var(--dark-text); margin-bottom:9px; display:block;}
.field-hint{font-size:12px; color:var(--dark-text-dim); margin-top:6px;}
textarea.input-dark, input.input-dark, select.input-dark{width:100%; background:var(--dark-bg); border:1px solid var(--dark-line); color:var(--dark-text); border-radius:11px; padding:13px 14px; font-size:14.5px; resize:vertical;}
textarea.input-dark:focus, input.input-dark:focus, select.input-dark:focus{border-color:var(--emerald);}
.chip-group{display:flex; flex-wrap:wrap; gap:8px;}
.chip-opt{padding:9px 15px; border-radius:10px; background:var(--dark-bg); border:1px solid var(--dark-line); font-size:13.5px; font-weight:500; color:var(--dark-text-dim); transition:all .12s ease;}
.chip-opt:hover{border-color:var(--emerald);}
.chip-opt.selected{background:var(--emerald); border-color:var(--emerald); color:#fff;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px;}
.field-block{margin-bottom:22px;}

.results-wrap{display:flex; flex-direction:column; gap:14px;}
/* ---- Generate workspace: composer left, results board right, no page-long scrolling ---- */
.gen-shell{display:grid; grid-template-columns:minmax(340px,430px) minmax(0,1fr); gap:22px; align-items:start;}
.gen-composer{padding:0; display:flex; flex-direction:column; max-height:calc(100vh - 124px); overflow:hidden; position:sticky; top:94px;}
.gen-head{padding:22px 24px 4px;}
.gen-head h2{font-family:var(--font-display); font-size:20px; font-weight:700; letter-spacing:-.01em;}
.gen-head p{color:var(--dark-text-dim); font-size:13.5px; margin-top:6px; line-height:1.55;}
.gen-scroll{padding:16px 24px 6px; overflow-y:auto; flex:1; min-height:0;}
.gen-scroll .field-block{margin-bottom:18px;}
.gen-foot{padding:14px 24px 16px; border-top:1px solid var(--dark-line); background:var(--dark-surface);}
.gen-foot-note{display:flex; justify-content:space-between; gap:10px; margin-top:9px; font-size:12px; color:var(--dark-text-dim);}
.kbd-hint{opacity:.8;}
.field-row{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
.field-count{font-size:12px; color:var(--dark-text-dim); font-variant-numeric:tabular-nums; margin-top:6px; white-space:nowrap;}
.field-count.near{color:var(--marigold);}
.field-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.example-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.example-chip{font-size:12px; padding:5px 10px; border-radius:999px; background:transparent; border:1px dashed rgba(166,160,140,.45); color:var(--dark-text-dim);}
.example-chip:hover{border-color:var(--lime); color:var(--lime);}
.gen-scroll .chip-opt{padding:7px 12px; font-size:13px; cursor:pointer;}
.chip-opt:focus-visible{outline:2px solid var(--lime); outline-offset:2px;}
.chip-group.seg{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; background:var(--dark-bg); border:1px solid var(--dark-line); border-radius:11px; padding:3px;}
.chip-group.seg .chip-opt{border:none; background:transparent; text-align:center; padding:7px 4px; border-radius:8px;}
.chip-group.seg .chip-opt.selected{background:var(--emerald); color:#fff;}
.gen-results{background:var(--dark-surface); border:1px solid var(--dark-line); border-radius:18px; display:flex; flex-direction:column; height:calc(100vh - 124px); min-height:460px; overflow:hidden; min-width:0; padding:0;}
.results-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--dark-line); flex-shrink:0;}
.results-head h3{font-family:var(--font-display); font-size:16px; font-weight:700;}
.results-head p{font-size:12.5px; color:var(--dark-text-dim); margin-top:3px;}
.results-actions{display:flex; gap:8px; flex-shrink:0;}
.gen-results .results-wrap{flex:1; overflow-y:auto; padding:18px 20px 26px; min-height:0; scroll-behavior:smooth;}
.empty-board{margin:auto; max-width:420px; text-align:center; padding:10px;}
.empty-board .ghost{background:var(--dark-bg); border:1px dashed var(--dark-line); border-radius:14px; padding:18px; text-align:left; margin-bottom:22px;}
.ghost i{display:block; height:9px; border-radius:6px; background:rgba(255,255,255,.07); margin-bottom:9px;}
.ghost i.h{width:62%; height:12px; background:rgba(49,214,161,.22);} .ghost i.m{width:92%;} .ghost i.s{width:48%; margin-bottom:0; background:rgba(242,169,59,.22);}
.empty-board h4{font-family:var(--font-display); font-size:17px; margin-bottom:6px;}
.empty-board p{font-size:13.5px; color:var(--dark-text-dim); line-height:1.6;}
.skel-card{background:var(--dark-bg); border:1px solid var(--dark-line); border-radius:14px; padding:20px;}
.skel-card i{display:block; height:11px; border-radius:6px; margin-bottom:11px; background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.12),rgba(255,255,255,.05)); background-size:200% 100%; animation:skel 1.1s linear infinite;}
.skel-card i:nth-child(1){width:55%; height:15px;} .skel-card i:nth-child(2){width:96%;} .skel-card i:nth-child(3){width:84%;} .skel-card i:nth-child(4){width:40%; margin-bottom:0;}
@keyframes skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.skel-card i{animation:none}.gen-results .results-wrap{scroll-behavior:auto}}
.gen-results .result-card{background:var(--dark-bg); border-radius:14px; padding:20px 20px 16px;}
.rc-hook{font-family:var(--font-display); font-weight:700; font-size:16.5px; line-height:1.4; letter-spacing:-.005em;}
.rc-meter{font-size:11.5px; color:var(--dark-text-dim); font-variant-numeric:tabular-nums; margin-left:auto; white-space:nowrap;}
.rc-meter.over{color:var(--crimson); font-weight:700;}
.rc-top .rc-lead{display:flex; align-items:center; gap:10px; min-width:0; flex:1;}
.icon-btn.primary{background:var(--emerald); border-color:var(--emerald); color:#fff;}
.icon-btn.primary:hover{background:var(--emerald-2);}
@media (max-width:1023px){
  .gen-shell{grid-template-columns:minmax(0,1fr);}
  .gen-composer{position:static; max-height:none; overflow:visible;}
  .gen-scroll{overflow:visible;}
  .gen-foot{position:sticky; bottom:0; z-index:5; border-radius:0 0 18px 18px; box-shadow:0 -10px 24px -14px rgba(0,0,0,.7);}
  .gen-results{height:auto; min-height:320px; overflow:visible;}
  .gen-results .results-wrap{overflow:visible;}
  .chip-group.scroll-x{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; margin-right:-24px; padding-right:24px;}
  .chip-group.scroll-x::-webkit-scrollbar{display:none;}
  .chip-group.scroll-x .chip-opt{flex-shrink:0;}
}
.result-card{background:var(--dark-surface); border:1px solid var(--dark-line); border-radius:16px; padding:22px;}
.result-card .rc-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px;}
.rc-tag{font-size:11px; font-weight:700; color:var(--lime); background:rgba(49,214,161,.1); padding:4px 10px; border-radius:999px;}
.rc-hook{font-weight:700; font-size:15.5px; margin-bottom:8px; color:var(--dark-text);}
.rc-body{font-size:14.5px; line-height:1.65; color:var(--dark-text); white-space:pre-wrap;}
.rc-body[contenteditable="true"]{outline:1px dashed var(--emerald); border-radius:6px; padding:4px 6px; margin:-4px -6px;}
.rc-cta{margin-top:10px; font-size:14px; font-weight:600; color:var(--marigold);}
.rc-tags{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px;}
.rc-tags span{font-size:12px; color:var(--dark-text-dim); background:var(--dark-bg); padding:3px 9px; border-radius:999px;}
.rc-actions{display:flex; gap:8px; margin-top:16px; flex-wrap:wrap;}
.icon-btn{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:8px; background:var(--dark-bg); border:1px solid var(--dark-line); color:var(--dark-text-dim);}
.icon-btn:hover{color:var(--dark-text); border-color:var(--emerald);}
.icon-btn.saved{color:var(--marigold); border-color:var(--marigold);}

.empty-state{text-align:center; padding:60px 20px; color:var(--dark-text-dim);}
.empty-state .ic{font-size:34px; margin-bottom:14px;}
.empty-state h4{color:var(--dark-text); font-size:16px; margin-bottom:6px;}
.empty-state p{font-size:13.5px; max-width:340px; margin:0 auto;}

/* dropzone / video view */
.dropzone{border:1.5px dashed var(--dark-line); border-radius:18px; padding:50px 20px; text-align:center; transition:all .15s ease; cursor:pointer;}
.dropzone.drag{border-color:var(--lime); background:rgba(49,214,161,.05);}
.dropzone .ic{font-size:32px; margin-bottom:14px;}
.dropzone h4{font-size:16px; margin-bottom:6px;}
.dropzone p{font-size:13px; color:var(--dark-text-dim);}
.dropzone input{display:none;}
.file-types-row{display:flex; justify-content:center; gap:8px; margin-top:16px; flex-wrap:wrap;}
.file-types-row span{font-size:11.5px; color:var(--dark-text-dim); background:var(--dark-bg); padding:3px 10px; border-radius:6px;}

.pipeline{display:flex; flex-direction:column; gap:14px;}
.pipe-step{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:12px; background:var(--dark-bg); border:1px solid var(--dark-line); opacity:.45; transition:all .2s ease;}
.pipe-step.active{opacity:1; border-color:var(--emerald);}
.pipe-step.done{opacity:1;}
.pipe-icon{width:32px; height:32px; border-radius:50%; background:var(--dark-surface-2); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0;}
.pipe-step.active .pipe-icon{background:var(--emerald); color:#fff;}
.pipe-step.done .pipe-icon{background:var(--lime); color:var(--ink);}
.pipe-text b{font-size:14px; display:block;}
.pipe-text span{font-size:12.5px; color:var(--dark-text-dim);}
.spinner{width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.video-workspace{display:grid; grid-template-columns:380px 1fr; gap:24px; align-items:start;}
.vw-preview{position:sticky; top:90px;}
.preview-frame{background:#000; border-radius:18px; overflow:hidden; position:relative; aspect-ratio:9/16; max-height:640px; margin:0 auto;}
.preview-frame video{position:absolute; inset:0; width:100%; height:100%; opacity:0; pointer-events:none;}
.preview-frame canvas{position:absolute; inset:0; width:100%; height:100%; display:block; cursor:pointer;}
.export-progress{margin-top:12px;}
.export-progress .bar{height:6px; border-radius:99px; background:var(--dark-surface-2); overflow:hidden;}
.export-progress .bar > div{height:100%; width:0%; background:var(--lime); transition:width .2s;}
.export-progress .lbl{font-size:12.5px; color:var(--dark-text-dim); margin-top:6px;}
.export-note{font-size:12px; color:var(--dark-text-dim); margin-top:10px; line-height:1.5;}
.caption-overlay{position:absolute; left:0; right:0; padding:0 18px; display:flex; pointer-events:none; z-index:5;}
.caption-overlay .bubble{max-width:100%; font-weight:800; text-align:center; padding:6px 4px; border-radius:8px; line-height:1.3; transition:background .2s;}
.bubble .t{display:inline;}
.bubble.marker .t{background:var(--cap-accent,#FFD84D); padding:.08em .5em; line-height:1.85; -webkit-box-decoration-break:clone; box-decoration-break:clone; border-radius:.25em;}
.bubble .w{display:inline-block; transition:opacity .12s, transform .12s, color .12s;}
.bubble .w.on{color:var(--cap-accent,#F2A93B); transform:scale(1.1);}
.bubble .w.next{opacity:.45;}
@keyframes capFade{from{opacity:0}to{opacity:1}}
@keyframes capPop{0%{transform:scale(.8);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes capSlide{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.bubble.anim-fade{animation:capFade .28s ease-out both}
.bubble.anim-pop{animation:capPop .28s cubic-bezier(.2,.9,.3,1.2) both}
.bubble.anim-slide{animation:capSlide .3s ease-out both}
.preset-card .sw-sample{display:flex; align-items:center; justify-content:center; height:40px; background:linear-gradient(135deg,#3a4132,#14170f); overflow:hidden;}
.preset-card .sw-sample span{font-size:15px; white-space:nowrap; line-height:1.2;}
.preview-controls{display:flex; align-items:center; gap:10px; margin-top:14px;}
.preview-controls button{width:38px; height:38px; border-radius:50%; background:var(--dark-surface-2); border:1px solid var(--dark-line); color:var(--dark-text); flex-shrink:0;}
.scrub{flex:1; height:5px; border-radius:99px; background:var(--dark-surface-2); position:relative; cursor:pointer;}
.scrub > div{height:100%; background:var(--lime); border-radius:99px; width:0%;}
.time-label{font-size:12px; color:var(--dark-text-dim); font-variant-numeric:tabular-nums;}

.tabs-row{display:flex; gap:4px; background:var(--dark-bg); border:1px solid var(--dark-line); padding:4px; border-radius:12px; margin-bottom:20px; width:fit-content;}
.tab-btn{padding:9px 18px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--dark-text-dim); background:none; border:none;}
.tab-btn.active{background:var(--emerald); color:#fff;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.preset-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px;}
.preset-card{border:1.5px solid var(--dark-line); border-radius:12px; padding:12px 16px; min-width:110px; text-align:center; background:var(--dark-bg);}
.preset-card.selected{border-color:var(--lime); background:rgba(49,214,161,.08);}
.preset-card .swatch{width:100%; height:26px; border-radius:6px; margin-bottom:8px;}
.preset-card b{font-size:12.5px;}

.style-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.style-row .field-block{margin-bottom:0;}
input[type=range].input-dark{padding:0; height:5px; background:var(--dark-surface-2); accent-color:var(--lime);}
.color-swatch-row{display:flex; gap:8px;}
.color-swatch-row input[type=color]{width:38px; height:38px; border-radius:9px; border:1px solid var(--dark-line); background:none; padding:2px;}

.transcript-list{display:flex; flex-direction:column; gap:10px; max-height:640px; overflow:auto; padding-right:4px;}
.seg-row{display:flex; gap:12px; padding:12px 14px; background:var(--dark-bg); border:1px solid var(--dark-line); border-radius:12px;}
.seg-row.playing{border-color:var(--lime);}
.seg-time{flex-shrink:0; width:104px; font-size:11.5px; color:var(--dark-text-dim); font-variant-numeric:tabular-nums; padding-top:2px;}
.seg-time input{width:44px; background:transparent; border:none; border-bottom:1px solid var(--dark-line); color:var(--dark-text-dim); font-size:11px; text-align:center; font-variant-numeric:tabular-nums;}
.seg-text{flex:1; font-size:14px; border:none; background:none; color:var(--dark-text); resize:none; line-height:1.5; font-family:inherit;}
.seg-text:focus{outline:none;}
.seg-lang{flex-shrink:0; font-size:10.5px; padding:3px 8px; border-radius:999px; height:fit-content; background:var(--dark-surface-2); color:var(--dark-text-dim);}
.seg-del{flex-shrink:0; color:var(--dark-text-dim); background:none; border:none; font-size:16px;}
.seg-del:hover{color:var(--crimson);}

table.data-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.data-table th{text-align:left; padding:11px 14px; color:var(--dark-text-dim); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--dark-line);}
table.data-table td{padding:13px 14px; border-bottom:1px solid var(--dark-line); color:var(--dark-text); vertical-align:top;}
table.data-table tr:hover td{background:var(--dark-surface-2);}
.table-cap-text{max-width:340px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pill-sm{font-size:11px; padding:3px 9px; border-radius:999px; background:var(--dark-surface-2); color:var(--dark-text-dim);}
.row-actions{display:flex; gap:6px;}
.row-actions button{background:none; border:none; color:var(--dark-text-dim); font-size:14px; padding:4px 6px;}
.row-actions button:hover{color:var(--dark-text);}

.saved-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}

.settings-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.settings-block{margin-bottom:22px;}
.env-key-row{display:flex; justify-content:space-between; align-items:center; padding:12px 14px; background:var(--dark-bg); border:1px solid var(--dark-line); border-radius:10px; margin-bottom:8px; font-size:13px;}
.env-key-row code{color:var(--lime); font-family:monospace;}
.env-key-row span.status{font-size:11px; padding:2px 8px; border-radius:999px; background:rgba(242,169,59,.15); color:var(--marigold);}

/* modal + toast */
.modal-backdrop{position:fixed; inset:0; background:rgba(10,10,8,.6); z-index:100; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-backdrop.open{display:flex;}
.modal-box{background:var(--dark-surface); border:1px solid var(--dark-line); border-radius:20px; padding:32px; width:100%; max-width:400px; position:relative;}
.modal-close{position:absolute; top:16px; right:16px; background:none; border:none; color:var(--dark-text-dim); font-size:18px;}
.modal-tabs{display:flex; gap:6px; background:var(--dark-bg); border-radius:10px; padding:4px; margin-bottom:22px;}
.modal-tabs button{flex:1; padding:9px; border-radius:8px; border:none; background:none; color:var(--dark-text-dim); font-weight:600; font-size:13.5px;}
.modal-tabs button.active{background:var(--emerald); color:#fff;}
.toast-stack{position:fixed; bottom:24px; right:24px; z-index:200; display:flex; flex-direction:column; gap:10px; max-width:340px;}
.toast{background:var(--ink); color:var(--paper); padding:14px 18px; border-radius:12px; font-size:13.5px; box-shadow:var(--shadow-2); display:flex; gap:10px; align-items:flex-start; animation:toastIn .2s ease;}
.toast.error{background:var(--crimson);}
.toast.success{background:var(--emerald);}
@keyframes toastIn{from{opacity:0; transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

/* responsive */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .demo-phone{max-width:280px; margin:0 auto;}
  .steps-row{grid-template-columns:1fr 1fr;}
  .split-block{grid-template-columns:1fr;}
  .features-grid{grid-template-columns:1fr 1fr;}
  .price-wrap{grid-template-columns:1fr;}
  .video-workspace{grid-template-columns:minmax(0,1fr);}
  .vw-preview{position:static;}
  .settings-grid{grid-template-columns:1fr;}
}
@media(max-width:720px){
  .nav-links{display:none;}
  .nav-toggle{display:flex;}
  .steps-row, .features-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .app-sidebar{position:fixed; left:-260px; z-index:80; transition:left .2s ease; box-shadow:var(--shadow-2);}
  .app-sidebar.open{left:0;}
  .app-content{padding:22px 16px 50px;}
  .topbar-title{font-size:16px;}
  .usage-pill span.full-label{display:none;}
}

/* ================= SEPARATE PAGES: auth + app shell ================= */
#view-app:not(.ready) .app-content{visibility:hidden;}
.profile-menu .pm-name{padding:10px 14px; font-size:12.5px; color:var(--dark-text-dim); border-bottom:1px solid var(--dark-line); max-width:240px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.profile-menu a[href]{text-decoration:none; display:block;}
.side-link{text-decoration:none;}
.auth-page{background:var(--dark-bg); color:var(--dark-text); min-height:100vh; font-family:var(--font-body);}
.auth-wrap{min-height:100vh; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);}
.auth-side{background:radial-gradient(120% 90% at 0% 0%, #12503d 0%, #0c1f18 55%, #0C0E0A 100%); padding:44px 56px; display:flex; flex-direction:column; justify-content:space-between; position:relative; overflow:hidden;}
.auth-side .logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:20px; color:#fff; text-decoration:none;}
.auth-side .logo .mark{width:34px; height:34px; border-radius:9px; background:var(--emerald); display:grid; place-items:center; font-size:20px;}
.auth-side h2{font-family:var(--font-display); font-size:clamp(28px,3.2vw,42px); line-height:1.1; letter-spacing:-.5px; max-width:15ch;}
.auth-side p.lead{color:#b9c4b8; margin-top:16px; max-width:38ch; line-height:1.6;}
.auth-demo{margin-top:34px; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:18px 20px; max-width:430px;}
.auth-demo b{display:block; font-size:15px; margin-bottom:6px;}
.auth-demo span{font-size:14px; color:#cfd8cd; line-height:1.55; display:block;}
.auth-demo i{display:block; margin-top:10px; font-style:normal; font-size:12.5px; color:var(--lime);}
.auth-side small{color:#8a9588; font-size:12.5px;}
.auth-main{display:flex; align-items:center; justify-content:center; padding:40px 24px;}
.auth-card{width:100%; max-width:400px;}
.auth-card h1{font-family:var(--font-display); font-size:28px; letter-spacing:-.4px;}
.auth-card .sub{color:var(--dark-text-dim); margin:8px 0 26px; font-size:14.5px;}
.auth-card .field-block{margin-bottom:16px;}
.auth-card .pw-wrap{position:relative;}
.auth-card .pw-wrap input{padding-right:64px;}
.auth-card .pw-toggle{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--dark-text-dim); font-size:12.5px; cursor:pointer; padding:6px 8px; border-radius:6px;}
.auth-card .pw-toggle:hover{color:#fff;}
.auth-error{display:none; background:rgba(193,68,59,.14); border:1px solid rgba(193,68,59,.5); color:#f3b3ad; border-radius:10px; padding:10px 12px; font-size:13.5px; margin-bottom:16px;}
.auth-error.show{display:block;}
.auth-card .btn-block{width:100%; justify-content:center;}
.auth-alt{margin-top:22px; font-size:14px; color:var(--dark-text-dim); text-align:center;}
.auth-alt a{color:var(--lime); text-decoration:none; font-weight:600;}
.auth-alt a:hover{text-decoration:underline;}
.auth-link{background:none; border:0; color:var(--dark-text-dim); font-size:13px; cursor:pointer; padding:0; text-decoration:underline; margin-top:14px; display:block; margin-left:auto; margin-right:auto;}
.auth-fine{margin-top:18px; font-size:12px; color:var(--dark-text-dim); text-align:center; line-height:1.5;}
.auth-fine a{color:inherit;}
.auth-mobile-logo{display:none;}
@media (max-width:860px){
  .auth-wrap{grid-template-columns:1fr;}
  .auth-side{display:none;}
  .auth-mobile-logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:20px; margin-bottom:28px; color:#fff; text-decoration:none;}
  .auth-mobile-logo .mark{width:34px; height:34px; border-radius:9px; background:var(--emerald); display:grid; place-items:center;}
}

.pos-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; width:132px; padding:8px; background:var(--dark-bg); border:1px solid var(--dark-line); border-radius:12px; aspect-ratio:9/12;}
.pos-grid button{background:var(--dark-surface-2); border:1px solid var(--dark-line); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;}
.pos-grid button i{width:10px; height:10px; border-radius:50%; background:var(--dark-text-dim); opacity:.5;}
.pos-grid button:hover{border-color:var(--lime);}
.pos-grid button:focus-visible{outline:2px solid var(--lime); outline-offset:2px;}
.pos-grid button.on{background:var(--emerald); border-color:var(--lime);}
.pos-grid button.on i{background:#fff; opacity:1;}
.pos-hint{font-size:12px; color:var(--dark-text-dim); margin-top:6px;}

/* line icons */
svg.i{width:1.15em; height:1.15em; flex-shrink:0; vertical-align:-0.2em;}
svg.i.lg{width:34px; height:34px; stroke-width:1.5;}
svg.i.fill{fill:currentColor;}
svg.i.gold{color:var(--marigold); fill:var(--marigold);}
svg.i.flame{color:var(--marigold); fill:rgba(242,169,59,.25);}
.side-link .ic{display:inline-flex; align-items:center; justify-content:center; width:20px; font-size:17px;}
.side-link .ic svg{width:18px; height:18px;}
.icon-btn,.btn-sm,.back-to-site,.profile-menu a,.profile-menu button,.usage-pill{display:inline-flex; align-items:center; gap:7px;}
.profile-menu a,.profile-menu button{display:flex;}
.empty-state .ic,.dropzone .ic{display:flex; justify-content:center; color:var(--lime); opacity:.85;}
.pipe-icon svg{width:16px; height:16px;}
.pipe-step:not(.active):not(.done) .pipe-icon{color:var(--dark-text-dim);}
.toast .t-ic{display:inline-flex;}
#playBtn{display:flex; align-items:center; justify-content:center;}
#playBtn svg{width:18px; height:18px;}
.pricing-tick,.tick{display:flex; align-items:center; gap:8px;}
.tick svg{color:var(--lime); width:15px; height:15px;}
.seg-del{display:inline-flex; align-items:center; justify-content:center;}
.seg-del svg,.history-table button svg{width:16px; height:16px;}
.video-workspace > *{min-width:0;}
.preview-frame{width:min(100%, 360px);}
.preview-controls{flex-wrap:wrap; min-width:0;}

/* ===== Subtitle language switch ===== */
.lang-switch{position:relative; display:grid; grid-template-columns:1fr 1fr; max-width:440px; background:var(--dark-bg); border:1px solid var(--dark-line); border-radius:14px; padding:4px; isolation:isolate;}
.lang-switch .ls-thumb{position:absolute; z-index:-1; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:10px; background:linear-gradient(135deg,var(--emerald),#0b7a5b); box-shadow:0 6px 18px -6px rgba(49,214,161,.55); transition:transform .35s cubic-bezier(.3,1.25,.5,1);}
.lang-switch[data-value="english"] .ls-thumb{transform:translateX(100%);}
.lang-switch button{all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; gap:2px; padding:10px 14px; border-radius:10px; color:var(--dark-text-dim); transition:color .25s;}
.lang-switch button b{font:600 14.5px var(--font-display); letter-spacing:-.1px;}
.lang-switch button small{font-size:12px; opacity:.85; line-height:1.3;}
.lang-switch button[aria-checked="true"]{color:#fff;}
.lang-switch button:hover:not([aria-checked="true"]){color:var(--dark-text);}
.lang-switch button:focus-visible{outline:2px solid var(--lime); outline-offset:1px;}
@media (max-width:480px){ .lang-switch button{padding:9px 10px;} .lang-switch button small{font-size:11px;} }

/* ===== Captions-style animated website ===== */
.kw{display:inline-block; position:relative; white-space:pre; isolation:isolate;}
.js-kw .kw{opacity:.22; transform:translateY(.12em); transition:opacity .25s, transform .25s;}
.js-kw .kw.on{opacity:1; transform:none;}
.js-kw .kw.pop::before{content:""; position:absolute; inset:.06em -.12em .02em; background:var(--lime); border-radius:.22em; z-index:-1; animation:kwpop .55s ease-out forwards;}
.hero h1 .accent .kw.pop::before{background:var(--marigold);}
@keyframes kwpop{0%{opacity:0; transform:scale(.7);} 25%{opacity:.95; transform:scale(1.06);} 100%{opacity:0; transform:scale(1);}}
/* hero phone: karaoke caption */
.demo-caption-text .w{display:inline-block; margin:0 .09em; opacity:.45; transition:color .15s, opacity .15s, transform .18s;}
.demo-caption-text .w.done{opacity:.95;}
.demo-caption-text .w.act{opacity:1; color:var(--marigold); transform:scale(1.14); text-shadow:0 0 14px rgba(242,169,59,.45);}
@media (prefers-reduced-motion:reduce){
  .js-kw .kw{opacity:1; transform:none; transition:none;}
  .js-kw .kw.pop::before{display:none;}
  .demo-caption-text .w{transition:none;}
}

/* ===== Caption styles showcase ===== */
.styles-show{background:var(--dark-bg); color:var(--dark-text);}
.styles-show .section-head h2{color:#fff;}
.styles-show .section-head p{color:var(--dark-text-dim);}
.styles-show .section-kicker{color:var(--lime);}
.style-stage{max-width:880px; margin:0 auto;}
.stage-screen{aspect-ratio:16/8.5; border-radius:22px; display:flex; align-items:flex-end; justify-content:center; padding:0 24px 12%; overflow:hidden;
  background:radial-gradient(120% 90% at 30% 20%, #1c6b55 0%, #0d2a22 55%, #070b09 100%); border:1px solid var(--dark-line);}
.stage-cap{font:800 clamp(22px,4.2vw,44px)/1.25 var(--font-display); text-align:center; max-width:90%; color:#fff;}
.stage-cap .w{display:inline-block; margin:0 .14em; transition:transform .18s, color .15s, opacity .15s; opacity:.55;}
.stage-cap .w.done{opacity:1;} .stage-cap .w.act{opacity:1; transform:scale(1.12);}
.stage-cap[data-style="pop"] .w.act{color:#111; background:var(--marigold); border-radius:.25em; padding:0 .18em; margin:0 -.04em;}
.stage-cap[data-style="neon"]{font-weight:700; color:#bff8ff;} 
.stage-cap[data-style="neon"] .w{text-shadow:0 0 6px #22e5ff,0 0 18px #22e5ff,0 0 34px #0aa;} 
.stage-cap[data-style="neon"] .w.act{color:#fff; text-shadow:0 0 8px #fff,0 0 22px #ff3df0,0 0 44px #ff3df0;}
.stage-cap[data-style="comic"]{font-family:'Poppins','Sora',sans-serif; text-transform:uppercase; color:#ffd60a; -webkit-text-stroke:2px #111; paint-order:stroke fill; text-shadow:3px 4px 0 #111;}
.stage-cap[data-style="comic"] .w.act{color:#ff4d6d; transform:scale(1.18) rotate(-3deg);}
.stage-cap[data-style="tape"] .w{background:#f6e7b8; color:#16120a; padding:.05em .3em; margin:.08em .06em; border-radius:.12em; box-shadow:0 2px 0 rgba(0,0,0,.25); transform:rotate(-1.2deg);}
.stage-cap[data-style="tape"] .w:nth-child(even){transform:rotate(1.2deg);}
.stage-cap[data-style="tape"] .w.act{background:#ffd23f; transform:scale(1.1) rotate(0);}
.stage-cap[data-style="gold"]{font-family:'Playfair Display',Georgia,serif; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:clamp(18px,3.4vw,36px); color:#e9c46a;}
.stage-cap[data-style="gold"] .w.act{color:#fff3c4; text-shadow:0 0 20px rgba(233,196,106,.7);}
.stage-cap[data-style="fire"] .w{background:linear-gradient(#fff7a8,#ff9a1f 55%,#e0301e); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 2px 8px rgba(255,90,20,.5));}
.stage-cap[data-style="box"] .w{background:#000; color:#fff; padding:.04em .3em; margin:.1em .05em; border-radius:.2em;}
.stage-cap[data-style="box"] .w.act{background:var(--lime); color:#04130d;}
.stage-pick{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px;}
.stage-pick button{border:1px solid var(--dark-line); background:var(--dark-surface); color:var(--dark-text-dim); padding:9px 16px; border-radius:999px; font:600 14px var(--font-body); transition:background .2s,color .2s,border-color .2s;}
.stage-pick button:hover{color:#fff; border-color:rgba(255,255,255,.25);}
.stage-pick button[aria-selected="true"]{background:var(--emerald); color:#fff; border-color:transparent;}
.stage-pick button:focus-visible{outline:2px solid var(--lime); outline-offset:2px;}
@media (max-width:600px){ .stage-screen{aspect-ratio:4/3; padding-bottom:14%;} }
@media (prefers-reduced-motion:reduce){ .stage-cap .w{transition:none;} }

/* ===== Motion layer ===== */
.playhead{position:fixed; top:0; left:0; height:3px; width:100%; z-index:100; pointer-events:none; transform-origin:0 50%; transform:scaleX(0); background:linear-gradient(90deg,var(--lime),var(--marigold));}
.playhead::after{content:""; position:absolute; right:-5px; top:-3px; width:9px; height:9px; border-radius:50%; background:#fff; box-shadow:0 0 10px var(--lime);}
.site-nav{transition:box-shadow .3s, background .3s;}
.site-nav.scrolled{box-shadow:0 10px 30px -18px rgba(20,17,14,.45); background:rgba(246,242,228,.96);}

.stats-strip{padding:0 0 18px; margin-top:-28px; position:relative; z-index:2;}
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow-2); padding:6px;}
.stat{padding:22px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; gap:4px;}
.stat:last-child{border-right:none;}
.stat b{font:800 clamp(30px,3.6vw,44px)/1 var(--font-display); color:var(--emerald); letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.stat span{font-size:14px; color:var(--ink-soft);}
@media (max-width:760px){ .stats-grid{grid-template-columns:1fr 1fr;} .stat{padding:16px 18px;} .stat:nth-child(2){border-right:none;} .stat:nth-child(-n+2){border-bottom:1px solid var(--line);} }

/* scroll reveal: only hides things when JS is running */
.js-reveal [data-rv]{opacity:0; transform:translateY(18px) scale(.985); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);}
.js-reveal [data-rv].in{opacity:1; transform:none;}
.step-num{transition:background .4s .15s, color .4s .15s, transform .5s .15s cubic-bezier(.3,1.6,.5,1);}
.js-reveal .step-card:not(.in) .step-num{transform:scale(.6);}
.step-card.in .step-num{background:var(--emerald); color:#fff;}
.feature-card .ic{transition:transform .35s cubic-bezier(.3,1.6,.5,1), background .25s;}

/* hover micro-interactions */
.feature-card,.step-card,.platform-chip,.price-card,.split-card{transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s, opacity .6s cubic-bezier(.2,.7,.2,1);}
.js-reveal [data-rv]:not(.in){transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);}
.feature-card:hover,.step-card:hover,.price-card:hover,.split-card:hover{transform:translateY(-5px); box-shadow:0 22px 40px -22px rgba(20,17,14,.45); border-color:rgba(15,92,70,.35);}
.platform-chip:hover{transform:translateY(-3px); border-color:var(--emerald);}
.feature-card:hover .ic{transform:rotate(-8deg) scale(1.12); background:rgba(15,92,70,.16);}
.btn{position:relative; overflow:hidden;}
.btn-primary::after,.btn-marigold::after{content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg); transition:left .6s;}
.btn-primary:hover::after,.btn-marigold:hover::after{left:130%;}
.btn:active{transform:translateY(1px) scale(.985);}

/* hero life */
.demo-phone{animation:floaty 7s ease-in-out infinite;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-.4deg);}50%{transform:translateY(-10px) rotate(.4deg);}}
.hero-watermark{will-change:transform;}

/* app: view + result transitions */
.app-subview.active{animation:viewIn .38s cubic-bezier(.2,.7,.2,1);}
@keyframes viewIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;}}
.results-wrap .result-card{animation:cardIn .5s cubic-bezier(.2,.7,.2,1) both;}
.results-wrap .result-card:nth-child(2){animation-delay:.08s;} .results-wrap .result-card:nth-child(3){animation-delay:.16s;}
.results-wrap .result-card:nth-child(4){animation-delay:.24s;} .results-wrap .result-card:nth-child(n+5){animation-delay:.3s;}
@keyframes cardIn{from{opacity:0; transform:translateY(16px) scale(.98);} to{opacity:1; transform:none;}}
.usage-bar > div{transition:width .8s cubic-bezier(.2,.7,.2,1);}
.chip-opt.selected{animation:chipPop .28s cubic-bezier(.3,1.6,.5,1);}
@keyframes chipPop{0%{transform:scale(.92);} 100%{transform:scale(1);}}
#genBtn:disabled{background:linear-gradient(100deg,var(--emerald) 30%,#17a07a 50%,var(--emerald) 70%); background-size:200% 100%; animation:shimmer 1.2s linear infinite; opacity:1;}
@keyframes shimmer{to{background-position:-200% 0;}}
.result-card:hover{border-color:rgba(49,214,161,.3);}

@media (prefers-reduced-motion:reduce){
  .playhead{display:none;}
  .js-reveal [data-rv]{opacity:1; transform:none; transition:none;}
  .demo-phone,.app-subview.active,.results-wrap .result-card,.chip-opt.selected,#genBtn:disabled{animation:none;}
  .btn-primary::after,.btn-marigold::after{display:none;}
  .feature-card:hover,.step-card:hover,.price-card:hover,.split-card:hover,.platform-chip:hover{transform:none;}
}

/* ===== Credits ===== */
.chip-opt.chip-disabled{opacity:.38; cursor:not-allowed; text-decoration:line-through; text-decoration-thickness:1px;}
.chip-group.seg .chip-opt.chip-disabled:hover{background:transparent;}
.gen-foot-note #genUsageNote.out{color:var(--marigold); font-weight:600;}
#genBtn.is-out{background:var(--dark-surface-2); color:var(--dark-text-dim); box-shadow:none; border-color:var(--dark-line);}
.usage-pill.empty b{color:var(--marigold);}
.usage-pill.bump{animation:pillBump .5s cubic-bezier(.3,1.6,.5,1);}
@keyframes pillBump{0%{transform:scale(1);} 40%{transform:scale(1.12);} 100%{transform:scale(1);}}
.limit-board{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:44px 24px;}
.limit-ring{width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--marigold); background:rgba(242,169,59,.1); border:1px solid rgba(242,169,59,.35);}
.limit-ring .i{width:28px; height:28px;}
.limit-board h4{font-size:19px; color:var(--dark-text);}
.limit-board p{max-width:380px; color:var(--dark-text-dim); line-height:1.6;}
.limit-board p b{color:var(--dark-text);}
.limit-actions{margin-top:8px;}

/* manual payment modal */
.pay-modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.62);display:grid;place-items:center;padding:16px}
.pay-card{position:relative;width:min(440px,100%);max-height:90vh;overflow:auto;background:var(--dark-surface,#161b18);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:12px}
.pay-card h3{margin:0 0 2px;font-size:20px}
.pay-x{position:absolute;top:10px;right:14px;background:none;border:0;color:inherit;font-size:26px;cursor:pointer;line-height:1}
.pay-note{margin:0;font-size:13.5px;color:var(--dark-text-dim,#9aa59f)}
.pay-note.ok{color:#4ade80}
.pay-list{display:flex;flex-direction:column;gap:8px}
.pay-opt{display:flex;gap:10px;align-items:flex-start;border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:12px;cursor:pointer;font-size:13.5px}
.pay-opt:has(input:checked){border-color:#f4a93b;background:rgba(244,169,59,.07)}
.pay-opt span{display:flex;flex-direction:column;gap:3px}
.pay-opt em{font-style:normal;color:var(--dark-text-dim,#9aa59f)}
.pay-opt u{text-decoration:none;color:inherit;user-select:all}
.pay-card{color:var(--dark-text,#e9efeb)}
.pay-card h3,.pay-opt b{color:var(--dark-text,#e9efeb)}
.pay-opt u{color:var(--dark-text,#e9efeb)}

/* performance + accessibility pass */
.hero-watermark svg{display:block;max-width:none;}
#features,#pricing,#faq,#guides,#caption-ideas,.site-footer{content-visibility:auto;contain-intrinsic-size:auto 700px;}
.footer-col a{padding:5px 0;margin-bottom:2px;}
.nav-links a{padding-top:6px;padding-bottom:6px;}
@media (prefers-reduced-motion:reduce){.hero-watermark{will-change:auto;}}

/* avoid mid-transition low-contrast frames in the style showcase */
.stage-cap .w{transition-property:opacity,transform;}