/* ==========================================================================
   YourVideo AI — Cinematic 3D Glassmorphic Design System
   Preserving dark emerald/black identity with dimensional visual depth.
   ========================================================================== */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 800;font-display:swap;src:url("/static/fonts/inter-latin-var.woff2") format("woff2")}

:root{
  color-scheme:dark;
  --bg:#050B08;--bg2:#091711;--card:rgba(14,30,22,.76);--card2:rgba(8,20,14,.88);
  --accent:#00E676;--accent2:#B9F6CA;--accent-cyan:#00F5D4;--accent-ink:#041B10;
  --text:#F3F7F5;--text2:#A2B5AD;--text3:#6F857B;
  --border:rgba(110,255,153,.15);--border2:rgba(110,255,153,.28);--border-glow:rgba(0,230,118,.45);
  --danger:#FF5252;--amber:#FFB300;
  --glass:rgba(13,26,20,.74);
  --glass-specular:inset 0 1px 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(110,255,153,.08);
  --radius:20px;--radius-sm:12px;--radius-lg:28px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-3d:0 36px 90px -24px rgba(0,0,0,.92),0 14px 34px -10px rgba(0,0,0,.65);
  --shadow-glow:0 0 45px -12px rgba(0,230,118,.35);
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --font-display:"Manrope","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font:"Plus Jakarta Sans","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-gta:"Barlow Condensed","Bebas Neue","Manrope",sans-serif;
  --header-h:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%;overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,picture,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:rgba(0,230,118,.3);color:#fff}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-60px;z-index:300;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:10px;font-weight:700;transition:top .2s}
.skip-link:focus{top:12px}
.container{width:100%;max-width:1240px;margin:0 auto;padding:0 24px}

/* Volumetric Aurora Ambient Layer */
.bg-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:
  radial-gradient(1100px 650px at 80% -10%,rgba(0,230,118,.13),transparent 65%),
  radial-gradient(900px 600px at -5% 35%,rgba(0,245,212,.08),transparent 70%),
  radial-gradient(800px 500px at 50% 95%,rgba(16,70,45,.25),transparent 75%),
  linear-gradient(180deg,#050B08 0%,#08140E 45%,#050B08 100%)}
.bg-ambient::before{content:"";position:absolute;inset:-20%;background:radial-gradient(circle at 60% 30%,rgba(0,230,118,.06),transparent 50%);animation:auroraDrift 22s ease-in-out infinite alternate;will-change:transform}
.bg-ambient::after{content:"";position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(110,255,153,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(110,255,153,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 10%,#000 15%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 10%,#000 15%,transparent 75%)}
@keyframes auroraDrift{0%{transform:translate3d(-2%,-3%,0) rotate(0deg) scale(1)}50%{transform:translate3d(3%,2%,0) rotate(2deg) scale(1.05)}100%{transform:translate3d(-2%,-3%,0) rotate(0deg) scale(1)}}

/* Typography */
h1,h2,h3,h4{margin:0;font-family:var(--font-display);line-height:1.15;letter-spacing:-.025em;font-weight:750}
h1{font-size:clamp(2.45rem,5.6vw,4.6rem);letter-spacing:-.038em;line-height:1.03;font-weight:800}
h2{font-size:clamp(1.9rem,3.8vw,2.95rem);letter-spacing:-.032em;font-weight:750}
h3{font-size:1.18rem;font-weight:700}
p{margin:0}
.grad{background:linear-gradient(95deg,#00E676 0%,#00F5D4 60%,#B9F6CA 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-family:var(--font-display);font-size:.74rem;font-weight:750;letter-spacing:.18em;text-transform:uppercase}
.muted{color:var(--text2)}
.lead{color:var(--text2);font-size:1.12rem;line-height:1.7}

/* Buttons */
.btn{--bh:44px;display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--bh);padding:0 20px;border-radius:12px;border:1px solid transparent;font-family:var(--font-display);font-weight:700;font-size:.92rem;line-height:1;white-space:nowrap;transition:transform .24s var(--ease),background-color .24s,border-color .24s,box-shadow .24s,color .24s;text-align:center;position:relative}
.btn svg{width:18px;height:18px;flex:none}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:linear-gradient(100deg,#00E676 0%,#00F5D4 90%);color:var(--accent-ink);box-shadow:0 12px 32px -10px rgba(0,230,118,.6),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-primary:hover{box-shadow:0 16px 40px -10px rgba(0,230,118,.75),0 0 20px rgba(0,245,212,.35),inset 0 1px 0 rgba(255,255,255,.45)}
.btn-secondary{background:rgba(255,255,255,.03);border-color:var(--border2);color:var(--text);backdrop-filter:blur(8px)}
.btn-secondary:hover{background:rgba(0,230,118,.09);border-color:var(--border-glow);color:#fff}
.btn-ghost{background:transparent;color:var(--text2)}
.btn-ghost:hover{background:rgba(255,255,255,.05);color:var(--text)}
.btn-sm{--bh:36px;padding:0 14px;font-size:.84rem;border-radius:10px}
.btn-lg{--bh:52px;padding:0 26px;font-size:1.02rem;border-radius:14px}
.btn-block{width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;transform:none;box-shadow:none}

/* ---------------- Header ---------------- */
.site-header{position:sticky;top:0;z-index:50;height:var(--header-h);background:rgba(5,11,8,.75);border-bottom:1px solid rgba(110,255,153,.1);transition:border-color .25s,background-color .25s}
.site-header.scrolled{border-bottom-color:var(--border2);background:rgba(5,11,8,.88)}
@supports (backdrop-filter:blur(1px)){.site-header{backdrop-filter:saturate(160%) blur(16px)}}
.header-inner{height:100%;display:flex;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:-.03em;white-space:nowrap;text-decoration:none}
.brand-mark{width:32px;height:32px;flex:none;filter:drop-shadow(0 0 12px rgba(0,230,118,.45))}
.brand-col{display:flex;flex-direction:column;justify-content:center}
.brand-name{font-size:1.18rem;line-height:1.15;letter-spacing:-.02em;color:#fff;display:block}
.brand-byline{font-size:0.58rem;line-height:1;letter-spacing:0.09em;color:rgba(110,255,153,0.92);text-transform:uppercase;font-weight:750;margin-top:4px;display:block}
.brand-founder{font-size:0.66rem;line-height:1.15;letter-spacing:0.05em;color:#e8f5e9;font-weight:600;margin-top:3px;display:block}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:18px}
.main-nav a{padding:8px 13px;border-radius:9px;color:var(--text2);font-size:.92rem;font-weight:550;transition:color .2s,background-color .2s}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--text);background:rgba(255,255,255,.05)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.menu-toggle{display:none;width:42px;height:42px;border-radius:11px;border:1px solid var(--border2);background:rgba(255,255,255,.03);align-items:center;justify-content:center}
.menu-toggle span,.menu-toggle span::before,.menu-toggle span::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--text);position:relative;transition:transform .25s,background-color .25s}
.menu-toggle span::before,.menu-toggle span::after{content:"";position:absolute;left:0}
.menu-toggle span::before{top:-6px}.menu-toggle span::after{top:6px}
.menu-toggle[aria-expanded="true"] span{background:transparent}
.menu-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

/* AI status pill */
.ai-pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text2);font-family:var(--font-display);font-size:.72rem;font-weight:750;letter-spacing:.08em;white-space:nowrap;transition:border-color .35s,color .35s,background-color .35s}
.ai-pill .dot{width:8px;height:8px;border-radius:50%;background:#5b7067;transition:background-color .35s,box-shadow .35s}
.ai-pill[data-state="on"]{color:#C9FFD6;border-color:rgba(0,230,118,.35);background:rgba(0,230,118,.08)}
.ai-pill[data-state="on"] .dot{background:var(--accent);box-shadow:0 0 0 3px rgba(0,230,118,.16),0 0 10px rgba(0,230,118,.7)}
.ai-pill[data-state="off"]{color:#FFC7CC;border-color:rgba(255,82,82,.32);background:rgba(255,82,82,.06)}
.ai-pill[data-state="off"] .dot{background:var(--danger);box-shadow:0 0 0 3px rgba(255,82,82,.14),0 0 8px rgba(255,82,82,.5)}
.ai-pill[data-state="checking"]{color:#FFE3A8;border-color:rgba(255,179,0,.32);background:rgba(255,179,0,.06)}
.ai-pill[data-state="checking"] .dot{background:var(--amber);animation:pulseDot 1.1s ease-in-out infinite}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(255,179,0,.45)}50%{box-shadow:0 0 0 5px rgba(255,179,0,0)}}
button.ai-pill:hover{border-color:var(--border2)}

/* ---------------- Hero ---------------- */
.hero{position:relative;padding:84px 0 60px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:52px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 8px;border-radius:999px;border:1px solid var(--border2);background:rgba(14,30,22,.65);backdrop-filter:blur(10px);font-family:var(--font-display);font-size:.8rem;color:var(--text2);font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.eyebrow .tag{padding:3px 9px;border-radius:999px;background:rgba(0,230,118,.16);color:var(--accent);font-weight:800;font-size:.68rem;letter-spacing:.08em}
.hero h1{margin:22px 0 20px}
.hero .lead{max-width:540px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px 22px;margin:28px 0 0;padding:0;list-style:none;color:var(--text2);font-size:.9rem}
.hero-points li{display:inline-flex;align-items:center;gap:8px}
.hero-points svg{width:16px;height:16px;color:var(--accent);filter:drop-shadow(0 0 6px rgba(0,230,118,.4))}

/* Showcase (long video -> shorts) */
.showcase{position:relative;perspective:1400px}
.showcase-stage{position:relative;aspect-ratio:1/0.92;transform-style:preserve-3d;transform:rotateX(var(--rx,4deg)) rotateY(var(--ry,-8deg));transition:transform .5s var(--ease);will-change:transform}
.sc-panel{position:absolute;border-radius:20px;background:linear-gradient(150deg,rgba(16,36,26,.92),rgba(8,18,13,.95));border:1px solid rgba(110,255,153,.25);box-shadow:0 40px 90px -30px rgba(0,0,0,.92),inset 0 1px 1px rgba(255,255,255,.18);overflow:hidden}
.sc-long{top:0;left:0;width:80%;transform:translateZ(10px)}
.sc-long-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;font-size:.74rem;color:var(--text2);border-bottom:1px solid var(--border);background:rgba(5,11,8,.65);backdrop-filter:blur(8px)}
.sc-long-bar i{width:9px;height:9px;border-radius:50%;background:#274338}
.sc-long-bar i:first-child{background:#3b6453}
.sc-long-bar span{margin-left:auto;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.06);font-weight:700;letter-spacing:.04em;color:var(--accent2)}
.sc-media{position:relative;aspect-ratio:16/9;background:#06120c}
.sc-media img{width:100%;height:100%;object-fit:cover}
.sc-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(5,11,8,.75))}
.crop-guide{position:absolute;top:8%;bottom:8%;width:18%;border:2px solid var(--accent);border-radius:8px;box-shadow:0 0 0 999px rgba(5,11,8,.32),0 0 18px var(--accent);z-index:1;left:20%;animation:cropMove 9s var(--ease) infinite}
.crop-guide::before{content:"9:16";position:absolute;top:-1px;left:-1px;padding:2px 6px;background:var(--accent);color:var(--accent-ink);font-size:.62rem;font-weight:800;border-radius:6px 0 6px 0}
@keyframes cropMove{0%,22%{left:20%}33%,55%{left:62%}66%,88%{left:41%}100%{left:20%}}
.sc-timeline{padding:12px 16px 16px}
.tl-track{position:relative;height:26px;border-radius:8px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 7px),rgba(255,255,255,.03);overflow:hidden;border:1px solid rgba(255,255,255,.05)}
.tl-seg{position:absolute;top:3px;bottom:3px;border-radius:5px;background:linear-gradient(90deg,rgba(0,230,118,.6),rgba(0,245,212,.6));box-shadow:0 0 10px rgba(0,230,118,.5) inset;animation:segGlow 9s ease-in-out infinite}
.tl-seg:nth-child(1){left:12%;width:13%}
.tl-seg:nth-child(2){left:47%;width:11%;animation-delay:3s}
.tl-seg:nth-child(3){left:74%;width:12%;animation-delay:6s}
@keyframes segGlow{0%,100%{opacity:.55}10%,25%{opacity:1}}
.tl-head{position:absolute;top:0;bottom:0;width:2px;background:var(--text);box-shadow:0 0 10px rgba(255,255,255,.9);animation:playhead 9s linear infinite}
@keyframes playhead{from{left:0}to{left:100%}}
.tl-labels{display:flex;justify-content:space-between;margin-top:7px;font-size:.68rem;color:var(--text3);font-variant-numeric:tabular-nums}

.sc-shorts{position:absolute;right:0;bottom:0;width:60%;display:flex;gap:4%;justify-content:flex-end;transform-style:preserve-3d}
.sc-short{position:relative;width:31%;aspect-ratio:9/16;border-radius:18px;overflow:hidden;border:1.5px solid rgba(110,255,153,.32);background:#071610;box-shadow:0 34px 70px -20px rgba(0,0,0,.92),0 0 25px rgba(0,230,118,.15);transform:translateZ(60px);transition:transform .45s var(--ease),box-shadow .45s}
.sc-short:nth-child(1){transform:translateZ(40px) translateY(-6%) rotate(-3deg);animation:floatA 7s ease-in-out infinite}
.sc-short:nth-child(2){transform:translateZ(80px);border-color:rgba(0,245,212,.4);animation:floatB 8s ease-in-out infinite}
.sc-short:nth-child(3){transform:translateZ(50px) translateY(-9%) rotate(3deg);animation:floatC 7.5s ease-in-out infinite}
.sc-short img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sc-short:hover img{transform:scale(1.06)}
.sc-short::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 30%,transparent 55%,rgba(0,0,0,.75) 100%)}
.sc-chip{position:absolute;top:8px;left:8px;z-index:2;padding:3px 8px;border-radius:6px;background:rgba(5,11,8,.82);backdrop-filter:blur(6px);color:var(--accent-cyan);font-size:.62rem;font-weight:800;letter-spacing:.05em;border:1px solid rgba(0,245,212,.3)}
.sc-sub{position:absolute;left:10%;right:10%;bottom:12%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px}
.sc-sub i{display:block;height:6px;border-radius:4px;background:rgba(255,255,255,.9)}
.sc-sub i:first-child{width:86%}.sc-sub i:last-child{width:58%;background:var(--accent-cyan)}
.sc-progress{position:absolute;left:8px;right:8px;bottom:6px;height:3px;border-radius:2px;background:rgba(255,255,255,.2);z-index:2;overflow:hidden}
.sc-progress::after{content:"";position:absolute;inset:0;width:40%;background:linear-gradient(90deg,var(--accent),var(--accent-cyan));animation:shortPlay 6s linear infinite}
.sc-short:nth-child(2) .sc-progress::after{animation-delay:-2s}.sc-short:nth-child(3) .sc-progress::after{animation-delay:-4s}
@keyframes shortPlay{from{transform:translateX(-100%)}to{transform:translateX(250%)}}
@keyframes floatA{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes floatB{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes floatC{0%,100%{translate:0 0}50%{translate:0 -6px}}

.sc-flow{position:absolute;left:44%;top:53%;width:22%;height:16%;transform:translateZ(30px);pointer-events:none}
.sc-flow svg{width:100%;height:100%;overflow:visible}
.sc-flow path{fill:none;stroke:url(#flowGrad);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:6 8;animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}

.sc-float{position:absolute;padding:12px 16px;border-radius:16px;background:rgba(12,28,20,.85);border:1px solid rgba(110,255,153,.26);box-shadow:0 28px 55px -20px rgba(0,0,0,.85),inset 0 1px 1px rgba(255,255,255,.15);font-size:.76rem;color:var(--text2);transform:translateZ(110px)}
@supports (backdrop-filter:blur(1px)){.sc-float{background:rgba(12,28,20,.72);backdrop-filter:blur(16px)}}
.sc-float strong{display:block;color:var(--text);font-family:var(--font-display);font-size:.82rem;margin-bottom:8px}
.sc-highlights{left:-2%;bottom:6%;width:42%;animation:floatB 9s ease-in-out infinite}
.sc-highlights ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sc-highlights li{display:flex;align-items:center;gap:9px}
.sc-highlights li b{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;background:rgba(0,230,118,.16);color:var(--accent);font-size:.65rem;font-weight:800}
.sc-highlights li span{flex:1;font-size:.72rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-badge{right:2%;top:3%;display:flex;align-items:center;gap:10px;animation:floatA 8s ease-in-out infinite}
.sc-badge svg{width:20px;height:20px;color:var(--accent);filter:drop-shadow(0 0 8px rgba(0,230,118,.5))}
.sc-dub-badge{right:2%;top:3%;display:flex;align-items:center;gap:10px;animation:floatA 8s ease-in-out infinite}
.sc-dub-badge svg{width:22px;height:22px;color:var(--accent);flex:none;filter:drop-shadow(0 0 8px rgba(0,230,118,.5))}
.sc-dub-badge-txt strong{display:block;font-size:.82rem;color:var(--text);line-height:1.2}
.sc-dub-badge-txt span{font-size:.7rem;color:var(--text2)}
.sc-caption{position:absolute;right:0;bottom:-26px;font-size:.72rem;color:var(--text3)}

/* Use cases */
.usecases{padding:24px 0 10px}
.usecases-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;color:var(--text3);font-size:.88rem}
.usecases-inner span.lbl{margin-right:6px;font-family:var(--font-display);font-weight:700;letter-spacing:.06em}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.025);backdrop-filter:blur(8px);color:var(--text2);font-size:.82rem;font-weight:550;transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--border2);color:var(--text)}

/* ---------------- Sections ---------------- */
.section{padding:96px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px}
.section-head .lead{max-width:440px;font-size:1.02rem}
.section-head h2{margin-top:12px}
.section-head.center{flex-direction:column;align-items:center;text-align:center}
.section-head.center .lead{max-width:620px}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--border2),transparent)}

.glass{background:linear-gradient(160deg,rgba(14,30,22,.78),rgba(7,18,13,.86));backdrop-filter:blur(24px) saturate(180%);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);position:relative;overflow:hidden}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 45%,rgba(0,230,118,.14));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

/* Tools */
.tool-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;perspective:1000px}
.tool-card{position:relative;padding:28px 24px 26px;display:flex;flex-direction:column;min-height:260px;transform-style:preserve-3d;transition:transform .4s var(--ease),border-color .35s,box-shadow .35s}
.tool-card:hover{transform:perspective(1000px) translateY(-7px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));border-color:var(--border-glow);box-shadow:0 36px 85px -24px rgba(0,0,0,.92),0 0 35px -10px rgba(0,230,118,.3),inset 0 1px 1px rgba(255,255,255,.22)}
.tool-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(0,230,118,.2),rgba(0,245,212,.08));border:1px solid var(--border2);color:var(--accent);margin-bottom:22px;box-shadow:0 6px 16px -4px rgba(0,230,118,.3)}
.tool-icon svg{width:22px;height:22px}
.tool-card h3{margin-bottom:9px;font-family:var(--font-display);font-size:1.15rem}
.tool-card p{color:var(--text2);font-size:.92rem;line-height:1.6}
.tool-card .tlink{margin-top:auto;padding-top:20px;color:var(--accent);font-family:var(--font-display);font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:6px;transition:gap .2s}
.tool-card .tlink:hover{color:var(--accent2);gap:9px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-family:var(--font-display);font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--border2);color:var(--accent);background:rgba(0,230,118,.1)}
.badge.neutral{color:var(--text2);background:rgba(255,255,255,.04);border-color:var(--border)}
.badge.warn{color:#FFE3A8;border-color:rgba(255,179,0,.3);background:rgba(255,179,0,.08)}
.tool-card .badge{position:absolute;top:24px;right:22px}

/* Workflow */
.workflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative;counter-reset:wf;perspective:1000px}
.workflow::before{content:"";position:absolute;top:47px;left:12%;right:12%;height:2px;background:linear-gradient(90deg,transparent,var(--border2) 10%,var(--border2) 90%,transparent);z-index:0}
.workflow::after{content:"";position:absolute;top:46px;left:12%;width:12%;height:4px;border-radius:4px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent-cyan),transparent);animation:wfRun 5s ease-in-out infinite;z-index:0;box-shadow:0 0 12px var(--accent)}
@keyframes wfRun{0%{left:12%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:76%;opacity:0}}
.wf-step{position:relative;z-index:1;padding:26px 20px;text-align:center;transform-style:preserve-3d;transition:transform .4s var(--ease),border-color .35s,box-shadow .35s}
.wf-step:hover{transform:perspective(1000px) translateY(-6px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));border-color:var(--border-glow);box-shadow:0 30px 70px -20px rgba(0,0,0,.9),0 0 30px -10px rgba(0,230,118,.25)}
.wf-icon{width:48px;height:48px;margin:0 auto 18px;border-radius:50%;display:grid;place-items:center;background:var(--bg2);border:1px solid var(--border2);color:var(--accent);box-shadow:0 0 0 6px var(--bg),0 0 18px -4px rgba(0,230,118,.35)}
.wf-icon svg{width:22px;height:22px}
.wf-step small{display:block;color:var(--accent);font-family:var(--font-display);font-weight:800;font-size:.72rem;letter-spacing:.16em;margin-bottom:6px}
.wf-step h3{margin-bottom:8px;font-family:var(--font-display)}
.wf-step p{color:var(--text2);font-size:.9rem}

/* ---------------- Studio ---------------- */
.studio{display:grid;grid-template-columns:250px minmax(0,1fr);overflow:hidden;min-height:600px;border-radius:var(--radius-lg);background:linear-gradient(160deg,rgba(13,28,20,.82),rgba(6,14,10,.92));border:1px solid rgba(110,255,153,.22);box-shadow:var(--shadow-3d);backdrop-filter:blur(24px) saturate(180%)}
.studio-side{padding:24px 16px;border-right:1px solid rgba(110,255,153,.12);background:rgba(4,10,7,.45);display:flex;flex-direction:column;gap:5px}
.side-label{font-size:.68rem;color:var(--text3);font-family:var(--font-display);font-weight:800;letter-spacing:.16em;text-transform:uppercase;margin:8px 12px 10px}
.side-tab{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border-radius:12px;border:1px solid transparent;background:transparent;color:var(--text2);font-family:var(--font-display);font-weight:650;font-size:.92rem;text-align:left;transition:all .22s var(--ease)}
.side-tab svg{width:18px;height:18px;transition:transform .2s var(--ease)}
.side-tab:hover{color:var(--text);background:rgba(255,255,255,.03);transform:translateX(3px)}
.side-tab[aria-selected="true"]{color:#fff;background:linear-gradient(135deg,rgba(0,230,118,.16),rgba(0,245,212,.08));border-color:rgba(0,230,118,.35);box-shadow:0 4px 14px -4px rgba(0,230,118,.25)}
.side-tab[aria-selected="true"] svg{color:var(--accent);filter:drop-shadow(0 0 6px rgba(0,230,118,.5))}
.side-list{list-style:none;margin:4px 0 0;padding:0 12px;display:grid;gap:10px;font-size:.84rem;color:var(--text2)}
.side-list li{display:flex;gap:10px;align-items:center}
.side-list svg{width:15px;height:15px;color:var(--accent);flex:none}
.side-sep{height:1px;background:rgba(110,255,153,.1);margin:18px 8px}
.side-mode{margin-top:auto;padding:16px;border-radius:14px;border:1px solid rgba(110,255,153,.15);background:rgba(255,255,255,.02);font-size:.8rem;color:var(--text2)}
.side-mode strong{display:block;color:var(--text);font-family:var(--font-display);font-size:.84rem;margin-bottom:4px}
.studio-main{padding:34px;min-width:0}
.studio-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:26px}
.studio-head h3{font-family:var(--font-display);font-size:1.45rem;font-weight:750}
.studio-head p{color:var(--text2);font-size:.92rem;margin-top:4px}

/* Dropzone */
.dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:44px 24px;border-radius:20px;border:1.5px dashed rgba(110,255,153,.32);background:radial-gradient(700px 220px at 50% 0%,rgba(0,230,118,.09),transparent 75%),rgba(5,11,8,.45);cursor:pointer;transition:border-color .28s,background-color .28s,transform .28s,box-shadow .28s}
.dropzone:hover{border-color:var(--accent);box-shadow:0 0 30px -10px rgba(0,230,118,.3);transform:scale(1.004)}
.dropzone.drag{border-color:var(--accent);background-color:rgba(0,230,118,.12);transform:scale(1.01);box-shadow:0 0 45px -8px rgba(0,230,118,.5)}
.dropzone.invalid{border-color:var(--danger)}
.drop-icon{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(140deg,rgba(0,230,118,.25),rgba(0,245,212,.08));border:1px solid rgba(110,255,153,.35);color:var(--accent);box-shadow:0 8px 20px -4px rgba(0,230,118,.35)}
.drop-icon svg{width:28px;height:28px}
.dropzone strong{font-family:var(--font-display);font-size:1.05rem;font-weight:650}
.dropzone .muted{font-size:.86rem}
.file-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;border:1px solid rgba(110,255,153,.32);background:rgba(0,230,118,.06);box-shadow:0 8px 24px -10px rgba(0,0,0,.5)}
.file-thumb{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:rgba(0,230,118,.16);color:var(--accent);flex:none;box-shadow:0 0 14px rgba(0,230,118,.25)}
.file-thumb svg{width:24px;height:24px}
.file-info{min-width:0;flex:1}
.file-info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-display);font-size:.96rem}
.file-info span{font-size:.82rem;color:var(--text2)}
.icon-btn{width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:transparent;color:var(--text2);display:grid;place-items:center;flex:none;transition:color .2s,border-color .2s,background-color .2s,transform .2s}
.icon-btn:hover{color:var(--text);border-color:var(--border2);background:rgba(255,255,255,.05);transform:scale(1.05)}
.icon-btn svg{width:16px;height:16px}

/* Form */
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:24px 0 20px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label,.field .label{font-family:var(--font-display);font-size:.84rem;font-weight:650;color:var(--text)}
.field .hint{font-size:.76rem;color:var(--text3)}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:15px;top:50%;width:8px;height:8px;border-right:2px solid var(--text2);border-bottom:2px solid var(--text2);transform:translateY(-70%) rotate(45deg);pointer-events:none}
select,.input{width:100%;height:48px;padding:0 38px 0 15px;border-radius:12px;border:1px solid rgba(110,255,153,.22);background:rgba(5,11,8,.65);color:var(--text);-webkit-appearance:none;appearance:none;font-size:.92rem;transition:border-color .2s,box-shadow .2s,background-color .2s}
.input{padding-right:15px}
select:hover,.input:hover{border-color:rgba(110,255,153,.42)}
select:focus,.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,230,118,.2),0 0 16px -4px rgba(0,230,118,.4)}
select option{background:#091711;color:var(--text)}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:16px;border:1px solid rgba(110,255,153,.16);background:rgba(255,255,255,.02);margin-bottom:20px;transition:border-color .2s}
.toggle-row:hover{border-color:rgba(110,255,153,.3)}
.toggle-row .t-text strong{display:block;font-family:var(--font-display);font-size:.92rem}
.toggle-row .t-text span{font-size:.82rem;color:var(--text2)}
.switch{position:relative;width:48px;height:28px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch .track{position:absolute;inset:0;border-radius:999px;background:#1e3228;border:1px solid rgba(110,255,153,.25);transition:background-color .25s,border-color .25s}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#cfe0d6;transition:transform .25s var(--ease),background-color .25s}
.switch input:checked+.track{background:var(--accent);border-color:var(--accent);box-shadow:0 0 14px rgba(0,230,118,.5)}
.switch input:checked+.track::after{transform:translateX(20px);background:#041B10}
.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:3px}
.form-error{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,82,82,.38);background:rgba(255,82,82,.09);color:#FFD3D8;font-size:.88rem}
.form-error svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--danger)}
.form-note{margin-top:14px;text-align:center;font-size:.82rem;color:var(--text3)}

/* Multilingual AI Dubbing Section */
.dubbing-section{margin:22px 0;padding:20px 22px;border-radius:16px;border:1px solid rgba(110,255,153,.22);background:linear-gradient(160deg,rgba(16,46,34,.7),rgba(8,23,17,.85));position:relative;overflow:hidden}
.dubbing-section::before{content:"";position:absolute;top:0;right:0;width:300px;height:120px;background:radial-gradient(ellipse at top right,rgba(66,245,108,.12),transparent 70%);pointer-events:none}
.dubbing-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.dubbing-badge{display:inline-flex;align-items:center;gap:8px;font-size:.94rem;font-weight:750;color:var(--text)}
.dubbing-badge svg{width:18px;height:18px;color:var(--accent)}
.dubbing-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.04em;background:rgba(66,245,108,.12);border:1px solid rgba(66,245,108,.3);color:var(--accent)}
.dubbing-desc{font-size:.82rem;color:var(--text2);margin-bottom:16px;line-height:1.55}
.dubbing-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 10px}
.field-hint{font-size:.74rem;color:var(--text3);margin-top:2px}
.dubbing-notice{margin-top:14px;display:flex;align-items:center;gap:10px;padding:9px 13px;border-radius:10px;font-size:.8rem;background:rgba(255,194,75,.08);border:1px solid rgba(255,194,75,.3);color:#FFE4A0}
.dubbing-notice svg{width:16px;height:16px;flex:none;color:var(--amber)}

.dubbing-pill.strict-badge{gap:5px;background:rgba(16,185,129,.14);border-color:rgba(52,211,153,.4);color:#6EE7B7}
.dubbing-pill.strict-badge svg{width:13px;height:13px;color:#34D399}
.dubbing-pill.eleven-pill{gap:5px;background:rgba(147,51,234,.16);border-color:rgba(168,85,247,.45);color:#D8B4FE}
.dubbing-pill.eleven-pill svg{width:13px;height:13px;color:#C084FC}

/* ElevenLabs Engine Status & Quota Card */
.dubbing-engine-card.elevenlabs-card{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:12px 16px;margin:0 0 12px;border-radius:12px;background:linear-gradient(135deg,rgba(16,39,29,.85),rgba(24,18,36,.85));border:1px solid rgba(168,85,247,.28)}
.engine-card-left{display:flex;flex-direction:column;gap:3px}
.engine-status-indicator{display:flex;align-items:center;gap:8px;font-size:.88rem;color:var(--text)}
.engine-tier-tag{font-size:.7rem;padding:2px 8px;border-radius:6px;background:rgba(168,85,247,.15);border:1px solid rgba(168,85,247,.3);color:#E9D5FF;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.status-dot.pulse{animation:statusPulse 2s infinite ease-in-out}
@keyframes statusPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.85)}}
.engine-meta{font-size:.74rem;color:var(--text3)}
.engine-card-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Credit Protection Box */
.credit-estimate-box{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:8px 12px;margin:0 0 16px;border-radius:10px;background:rgba(66,245,108,.05);border:1px dashed rgba(66,245,108,.25);font-size:.76rem;color:var(--text2)}
.est-left{display:flex;align-items:center;gap:7px}
.est-left svg{width:14px;height:14px;color:var(--accent);flex:none}
.est-tag{font-size:.68rem;padding:2px 7px;border-radius:5px;background:rgba(66,245,108,.12);color:var(--accent);font-weight:650}

.vram-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;font-size:.74rem;font-weight:650;letter-spacing:.02em}
.vram-pill svg{width:13px;height:13px}
.vram-pill.ok{background:rgba(66,245,108,.12);border:1px solid rgba(66,245,108,.35);color:#A7FF83}
.vram-pill.warn{background:rgba(255,194,75,.12);border:1px solid rgba(255,194,75,.35);color:#FFE4A0}
.vram-pill.purple{background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.35);color:#E9D5FF}

/* Voice Picker Row & Sample Preview */
.voice-picker-row{display:flex;align-items:center;gap:8px}
.flex-1{flex:1;min-width:0}
.btn-voice-preview{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:42px;padding:0 14px;border-radius:10px;font-size:.8rem;font-weight:700;color:var(--accent);background:rgba(66,245,108,.1);border:1px solid rgba(66,245,108,.28);cursor:pointer;transition:all .18s ease;white-space:nowrap}
.btn-voice-preview:hover{background:rgba(66,245,108,.2);border-color:var(--accent);color:#fff}
.btn-voice-preview svg{width:14px;height:14px;fill:currentColor}
.btn-voice-preview.playing{background:rgba(255,92,108,.15);border-color:rgba(255,92,108,.4);color:#FF5C6C}

.voice-spec-tags{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px}
.spec-tag{font-size:.7rem;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--text2);font-weight:550}
.spec-tag.cues-tag{color:#D8B4FE;background:rgba(168,85,247,.08);border-color:rgba(168,85,247,.25)}

/* Result Card Dubbing Enhancements */
.clip-audio-toggle{display:inline-flex;align-items:center;gap:4px;padding:3px;border-radius:10px;background:rgba(6,18,14,.8);border:1px solid var(--border);margin-bottom:10px;width:fit-content}
.clip-audio-toggle button{padding:4px 10px;border-radius:7px;border:0;background:transparent;color:var(--text2);font-size:.76rem;font-weight:650;transition:background-color .2s,color .2s}
.clip-audio-toggle button[aria-pressed="true"]{background:rgba(66,245,108,.16);color:var(--accent)}
.meta-pill.dub{color:#A7FF83;background:rgba(167,255,131,.1);border-color:rgba(167,255,131,.35)}
.meta-pill.lang{color:#FFF;background:rgba(255,255,255,.07);border-color:var(--border2);font-weight:600}
.meta-pill.strict-qa{font-weight:650;letter-spacing:.02em}
.meta-pill.qa-clean{color:#A7FF83;background:rgba(66,245,108,.12);border-color:rgba(66,245,108,.35)}
.meta-pill.qa-fallback{color:#FFE4A0;background:rgba(255,194,75,.12);border-color:rgba(255,194,75,.35)}
.clip-regen-box{margin-top:12px;padding:12px 14px;border-radius:12px;background:rgba(6,18,14,.5);border:1px dashed var(--border2);display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.clip-regen-box select{height:34px;padding:0 28px 0 10px;font-size:.8rem}

/* 3D Holographic AI Transformation Stage (Long Video -> Vertical Shorts) */
.process-3d-stage{perspective:1100px;width:100%;margin-bottom:20px;padding:20px 16px;background:radial-gradient(ellipse at center,rgba(66,245,108,.09) 0%,rgba(6,18,14,.7) 70%,transparent 100%);border-radius:18px;border:1px solid rgba(110,255,153,.2);box-shadow:0 16px 40px -10px rgba(0,0,0,.7),inset 0 0 30px rgba(66,245,108,.06);overflow:hidden;position:relative}
.p3d-viewport{display:flex;align-items:center;justify-content:space-between;gap:18px;transform-style:preserve-3d;transform:rotateX(4deg);min-height:160px;position:relative}
.p3d-card.p3d-long{width:38%;aspect-ratio:16/9;background:linear-gradient(135deg,rgba(16,39,29,.94),rgba(6,18,14,.96));border:1.5px solid rgba(110,255,153,.32);border-radius:14px;box-shadow:0 15px 35px -10px rgba(0,0,0,.8),0 0 20px rgba(66,245,108,.12);transform:rotateY(12deg) translateZ(10px);display:flex;flex-direction:column;overflow:hidden;position:relative}
.p3d-glass-header{height:24px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;padding:0 10px;gap:5px}
.p3d-dot{width:6px;height:6px;border-radius:50%}
.p3d-dot:nth-child(1){background:#ff5f56}
.p3d-dot:nth-child(2){background:#ffbd2e}
.p3d-dot:nth-child(3){background:#27c93f}
.p3d-label{font-size:.66rem;font-weight:700;color:var(--accent);letter-spacing:.05em;text-transform:uppercase;margin-left:auto}
.p3d-screen{flex:1;background:radial-gradient(circle at center,rgba(66,245,108,.12),rgba(3,8,6,.95));position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.p3d-laser-scan{position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent);box-shadow:0 0 12px 2px var(--accent);animation:laserScan 2.5s ease-in-out infinite}
@keyframes laserScan{0%{top:0%;opacity:.2}50%{top:94%;opacity:1}100%{top:0%;opacity:.2}}
.p3d-waveform{display:flex;align-items:center;gap:3px;height:32px}
.p3d-waveform i{width:3px;background:linear-gradient(to top,var(--accent),var(--accent2));border-radius:2px;animation:waveBar 1.2s ease-in-out infinite alternate}
.p3d-waveform i:nth-child(2n){animation-duration:.8s}
.p3d-waveform i:nth-child(3n){animation-duration:1.4s}
.p3d-waveform i:nth-child(4n){animation-duration:1.1s}
@keyframes waveBar{0%{height:5px;opacity:.3}100%{height:28px;opacity:1}}
.p3d-screen-tag{font-size:.7rem;font-weight:600;color:var(--text2);margin-top:4px;letter-spacing:.03em}
.p3d-core{width:22%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transform:translateZ(30px)}
.p3d-ring{position:absolute;border-radius:50%;border:1.5px dashed var(--accent);pointer-events:none}
.p3d-ring-outer{width:86px;height:86px;border-color:rgba(66,245,108,.25);animation:spinRing 8s linear infinite}
.p3d-ring-mid{width:68px;height:68px;border-color:rgba(167,255,131,.5);border-style:dotted;animation:spinRingRev 5s linear infinite}
.p3d-ring-inner{width:50px;height:50px;border-color:rgba(66,245,108,.7);animation:spinRing 3s linear infinite}
@keyframes spinRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes spinRingRev{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
.p3d-orb{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,var(--accent) 45%,#0b3d22 80%);display:grid;place-items:center;box-shadow:0 0 25px var(--accent),0 0 50px rgba(66,245,108,.4);z-index:2;animation:pulseOrb 2s ease-in-out infinite alternate}
.p3d-orb svg{width:20px;height:20px;color:#03140a;animation:spinRing 4s linear infinite}
@keyframes pulseOrb{0%{transform:scale(.92);box-shadow:0 0 18px var(--accent)}100%{transform:scale(1.08);box-shadow:0 0 32px var(--accent),0 0 60px rgba(66,245,108,.55)}}
.p3d-beam{position:absolute;top:50%;height:2px;width:60px;pointer-events:none}
.p3d-beam-left{right:100%;background:linear-gradient(90deg,transparent,var(--accent));box-shadow:0 0 8px var(--accent);animation:beamFlow 1.5s ease-in-out infinite}
.p3d-beam-right{left:100%;background:linear-gradient(90deg,var(--accent),transparent);box-shadow:0 0 8px var(--accent);animation:beamFlow 1.5s ease-in-out infinite}
@keyframes beamFlow{0%,100%{opacity:.4}50%{opacity:1}}
.p3d-core-label{font-size:.62rem;font-weight:800;letter-spacing:.08em;color:var(--accent);margin-top:50px;text-transform:uppercase;text-shadow:0 0 10px rgba(66,245,108,.6);white-space:nowrap}
.p3d-shorts-stack{width:38%;display:flex;justify-content:center;align-items:center;gap:10px;transform-style:preserve-3d;transform:rotateY(-12deg)}
.p3d-card.p3d-short{width:31%;aspect-ratio:9/16;background:linear-gradient(150deg,rgba(16,39,29,.95),rgba(9,26,20,.95));border:1.5px solid rgba(110,255,153,.35);border-radius:10px;box-shadow:0 15px 35px -10px rgba(0,0,0,.9),0 0 20px rgba(66,245,108,.15);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:6px}
.p3d-short-1{transform:translateZ(18px) translateY(-5%) rotate(-3deg);animation:floatShort1 5s ease-in-out infinite}
.p3d-short-2{transform:translateZ(38px) translateY(0%) scale(1.04);border-color:var(--accent);box-shadow:0 20px 45px -10px rgba(0,0,0,.95),0 0 25px rgba(66,245,108,.3);animation:floatShort2 4.5s ease-in-out infinite}
.p3d-short-3{transform:translateZ(14px) translateY(5%) rotate(3deg);animation:floatShort3 5.5s ease-in-out infinite}
@keyframes floatShort1{0%,100%{transform:translateZ(18px) translateY(-5%) rotate(-3deg)}50%{transform:translateZ(24px) translateY(-8%) rotate(-2deg)}}
@keyframes floatShort2{0%,100%{transform:translateZ(38px) translateY(0%) scale(1.04)}50%{transform:translateZ(48px) translateY(-3%) scale(1.07)}}
@keyframes floatShort3{0%,100%{transform:translateZ(14px) translateY(5%) rotate(3deg)}50%{transform:translateZ(20px) translateY(2%) rotate(2deg)}}
.p3d-short-badge{font-size:.58rem;font-weight:750;padding:2px 4px;background:rgba(66,245,108,.18);border:1px solid rgba(110,255,153,.3);border-radius:5px;color:var(--accent);text-align:center;letter-spacing:.04em}
.p3d-short-audio-bar{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 8px var(--accent);animation:shimmer 1.5s linear infinite}
@media (max-width:768px){.p3d-viewport{flex-direction:column;transform:none;gap:14px}.p3d-card.p3d-long{width:90%;transform:none}.p3d-core{width:100%;transform:none;margin:8px 0}.p3d-shorts-stack{width:90%;transform:none}}

/* Processing panel */
.process{margin-top:24px;padding:26px;border-radius:20px;border:1px solid rgba(110,255,153,.25);background:linear-gradient(160deg,rgba(14,32,24,.92),rgba(6,16,11,.95));position:relative;overflow:hidden;box-shadow:var(--shadow-3d);backdrop-filter:blur(24px) saturate(180%)}
.process::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(600px 140px at 25% 0%,rgba(0,230,118,.14),transparent 75%)}
.process-top{position:relative;display:flex;align-items:center;gap:16px;margin-bottom:18px}
.process-spinner{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(0,230,118,.14);border:1px solid rgba(110,255,153,.32);color:var(--accent);flex:none;box-shadow:0 0 18px rgba(0,230,118,.25)}
.process-spinner svg{width:24px;height:24px}
.process[data-state="running"] .process-spinner svg{animation:spin 1.6s linear infinite}
.process[data-state="failed"] .process-spinner{background:rgba(255,82,82,.14);border-color:rgba(255,82,82,.4);color:var(--danger)}
@keyframes spin{to{transform:rotate(360deg)}}
.process-title{min-width:0;flex:1}
.process-title strong{display:block;font-family:var(--font-display);font-size:1.08rem;font-weight:750}
.process-title span{font-size:.84rem;color:var(--text2)}
.process-pct{font-family:var(--font-display);font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:-.02em;text-shadow:0 0 12px rgba(0,230,118,.5)}
.process[data-state="failed"] .process-pct{color:var(--danger)}
.bar{position:relative;height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.bar-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:inherit;background:linear-gradient(90deg,#00E676,#00F5D4,#B9F6CA);box-shadow:0 0 14px rgba(0,230,118,.6);transition:width .6s var(--ease)}
.process[data-state="running"] .bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.6) 50%,transparent 80%);background-size:200% 100%;animation:shimmer 1.6s linear infinite}
.process[data-state="failed"] .bar-fill{background:linear-gradient(90deg,#b5374a,var(--danger))}
@keyframes shimmer{from{background-position:150% 0}to{background-position:-50% 0}}
.bar-meta{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:.78rem;color:var(--text3);font-variant-numeric:tabular-nums}
.stages{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stage{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid rgba(110,255,153,.12);background:rgba(255,255,255,.018);font-size:.84rem;color:var(--text3);transition:border-color .3s,background-color .3s,color .3s,transform .3s,box-shadow .3s}
.stage .s-ico{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.05);flex:none;transition:all .3s}
.stage .s-ico svg{width:16px;height:16px}
.stage .s-txt{min-width:0}
.stage .s-txt b{display:block;font-family:var(--font-display);font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage .s-txt small{display:block;font-size:.72rem;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage[data-s="active"]{color:var(--text);border-color:var(--border-glow);background:linear-gradient(135deg,rgba(0,230,118,.1),rgba(0,245,212,.04));box-shadow:0 6px 18px -4px rgba(0,230,118,.25);transform:translateY(-2px)}
.stage[data-s="active"] .s-ico{background:rgba(0,230,118,.2);color:var(--accent);box-shadow:0 0 10px rgba(0,230,118,.5)}
.stage[data-s="active"] .s-ico svg{animation:bob 1.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.stage[data-s="done"]{color:var(--text2);border-color:rgba(110,255,153,.2)}
.stage[data-s="done"] .s-ico{background:var(--accent);color:var(--accent-ink);box-shadow:0 0 10px rgba(0,230,118,.4)}
.stage[data-s="failed"]{color:#FFD3D8;border-color:rgba(255,82,82,.4);background:rgba(255,82,82,.08)}
.stage[data-s="failed"] .s-ico{background:var(--danger);color:#2a0308}
.process-msg{position:relative;margin-top:16px;font-size:.86rem;color:var(--text2)}
.process-msg.err{color:#FFD3D8}
.process-actions{position:relative;display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}

/* Results */
.results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:38px 0 18px}
.results-head h3{font-family:var(--font-display);font-size:1.35rem;font-weight:750}
.results-grid{display:grid;gap:20px}
.clip{display:grid;grid-template-columns:210px minmax(0,1fr);gap:24px;padding:20px;border-radius:20px;border:1px solid rgba(110,255,153,.2);background:linear-gradient(160deg,rgba(14,32,24,.88),rgba(8,20,15,.92));box-shadow:var(--shadow-card);backdrop-filter:blur(20px);animation:clipIn .5s var(--ease) both;transition:border-color .3s,box-shadow .3s}
.clip:hover{border-color:var(--border2);box-shadow:0 30px 65px -20px rgba(0,0,0,.9),0 0 25px -10px rgba(0,230,118,.25)}
@keyframes clipIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.clip-frame{position:relative;align-self:start;width:100%;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#030806;border:1.5px solid rgba(110,255,153,.25);box-shadow:0 24px 50px -20px rgba(0,0,0,.95)}
.clip-frame video{width:100%;height:100%;object-fit:contain;background:#000}
.clip-body{min-width:0;display:flex;flex-direction:column}
.clip-top{display:flex;align-items:flex-start;gap:14px}
.clip-num{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(0,230,118,.14);color:var(--accent);font-family:var(--font-display);font-weight:800;font-size:.88rem;font-variant-numeric:tabular-nums;box-shadow:0 0 10px rgba(0,230,118,.2)}
.clip-title{font-family:var(--font-display);font-size:1.1rem;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.clip-meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 16px}
.meta-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(110,255,153,.15);font-size:.76rem;color:var(--text2);font-variant-numeric:tabular-nums}
.meta-pill svg{width:13px;height:13px}
.meta-pill.ai{color:#C9FFD6;border-color:rgba(0,230,118,.35);background:rgba(0,230,118,.08)}
.tabs{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(5,11,8,.65);border:1px solid rgba(110,255,153,.15);width:max-content;max-width:100%;overflow-x:auto}
.tab{padding:8px 14px;border-radius:9px;border:0;background:transparent;color:var(--text2);font-family:var(--font-display);font-size:.82rem;font-weight:650;white-space:nowrap;transition:background-color .2s,color .2s}
.tab[aria-selected="true"]{background:rgba(0,230,118,.16);color:var(--text);box-shadow:0 2px 8px rgba(0,230,118,.2)}
.tab-panel{margin-top:14px;font-size:.88rem;color:var(--text2);line-height:1.65;overflow-wrap:anywhere;white-space:pre-line;max-height:180px;overflow:auto;padding-right:4px}
.tags{display:flex;flex-wrap:wrap;gap:6px;white-space:normal}
.tag-chip{padding:4px 11px;border-radius:999px;background:rgba(0,230,118,.08);border:1px solid rgba(0,230,118,.25);color:var(--accent2);font-size:.78rem;font-weight:600}
.clip-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:auto;padding-top:18px}
.clip-actions .sep{flex-basis:100%;height:0}
.copied{border-color:var(--accent)!important;color:var(--accent)!important}

/* Projects */
.project-list{display:grid;gap:12px}
.project{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;border:1px solid rgba(110,255,153,.15);background:rgba(255,255,255,.02);transition:border-color .2s,transform .2s,box-shadow .2s}
.project:hover{border-color:var(--border2);transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.project-ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(0,230,118,.12);color:var(--accent);flex:none;box-shadow:0 0 12px rgba(0,230,118,.2)}
.project-ico svg{width:22px;height:22px}
.project-info{min-width:0;flex:1}
.project-info strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--font-display);font-size:.96rem}
.project-info span{font-size:.78rem;color:var(--text3)}
.status-chip{padding:3px 10px;border-radius:999px;font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--border);color:var(--text2)}
.status-chip.complete{color:var(--accent);border-color:var(--border2);background:rgba(0,230,118,.1);box-shadow:0 0 10px rgba(0,230,118,.2)}
.status-chip.failed{color:#FFC7CC;border-color:rgba(255,82,82,.32);background:rgba(255,82,82,.06)}
.status-chip.processing,.status-chip.queued{color:#FFE3A8;border-color:rgba(255,179,0,.3);background:rgba(255,179,0,.06)}
.empty{padding:44px 20px;text-align:center;color:var(--text2);border:1px dashed var(--border2);border-radius:18px}
.empty svg{width:38px;height:38px;margin:0 auto 14px;color:var(--accent)}
.signin-gate{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:44px 20px;border-radius:18px;border:1px dashed var(--border2)}

/* ---------------- Pricing ---------------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch;perspective:1000px}
.price{padding:32px 26px;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .4s var(--ease),border-color .35s,box-shadow .35s}
.price:hover{transform:perspective(1000px) translateY(-8px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));border-color:var(--border-glow);box-shadow:0 36px 85px -20px rgba(0,0,0,.92),0 0 30px -10px rgba(0,230,118,.25)}
.price.current{border-color:rgba(0,230,118,.5);box-shadow:0 30px 70px -25px rgba(0,230,118,.35),var(--shadow)}
.price-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}
.price h3{font-family:var(--font-display);font-size:1.25rem}
.price-amount{font-family:var(--font-display);font-size:2.45rem;font-weight:800;letter-spacing:-.03em;margin:4px 0;color:#fff}
.price-amount small{font-size:.9rem;font-weight:500;color:var(--text2);letter-spacing:0}
.price > p{color:var(--text2);font-size:.92rem}
.checks{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:11px;font-size:.92rem;color:var(--text2)}
.checks li{display:flex;gap:10px;align-items:flex-start}
.checks svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:2px;filter:drop-shadow(0 0 6px rgba(0,230,118,.4))}
.price .btn{margin-top:auto}
.note{margin-top:24px;padding:16px 20px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text2);font-size:.88rem}

/* Wide Luxury Pricing Card */
.pricing-card-wide {
  max-width: 1100px;
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 36px;
  padding: 42px 46px;
  border-radius: 26px;
  background: radial-gradient(800px 320px at 20% 0%, rgba(0, 230, 118, 0.14), transparent 70%),
              linear-gradient(160deg, rgba(14, 32, 24, 0.92), rgba(7, 18, 13, 0.96));
  border: 1px solid rgba(110, 255, 153, 0.26);
  box-shadow: 0 40px 90px -25px rgba(0, 0, 0, 0.88), 0 0 35px -10px rgba(0, 230, 118, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@media (max-width: 860px) {
  .pricing-card-wide {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 30px 22px;
  }
}

.pcard-left {
  display: flex;
  flex-direction: column;
}

.pcard-badge-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.pcard-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  font-weight: 750;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.32);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pcard-tag {
  font-size: 0.72rem;
  font-weight: 650;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pcard-pricing-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 16px;
}

.pcard-price {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 850;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.03em;
}

.pcard-cycle {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pcard-cycle strong {
  font-size: 1.05rem;
  color: #ffffff;
  font-weight: 700;
}

.pcard-cycle span {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
}

.pcard-desc {
  font-size: 0.94rem;
  color: var(--text2);
  line-height: 1.65;
  margin: 0 0 28px;
}

.pcard-cta-row {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pcard-subnote {
  font-size: 0.78rem;
  color: var(--text3);
}

.pcard-right {
  display: flex;
  flex-direction: column;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 36px;
}

@media (max-width: 860px) {
  .pcard-right {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-left: 0;
    padding-top: 24px;
  }
}

.pcard-features-heading {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 750;
  color: var(--text3);
  margin-bottom: 18px;
}

.pcard-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pcard-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text2);
  line-height: 1.5;
}

.pfeat-text strong {
  color: #ffffff;
  font-weight: 650;
}

/* FAQ */
.faq{display:grid;gap:12px;max-width:880px;margin:0 auto}
.faq details{border-radius:18px;border:1px solid var(--border);background:rgba(14,30,22,.6);backdrop-filter:blur(16px);transition:border-color .25s,background-color .25s}
.faq details[open]{border-color:var(--border2);background:rgba(14,30,22,.85)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 22px;font-family:var(--font-display);font-weight:650;font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg) translateY(-3px);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-3px)}
.faq .answer{padding:0 22px 20px;color:var(--text2);font-size:.94rem;line-height:1.7}
.faq .answer p+p{margin-top:10px}

/* CTA band */
.cta-band{position:relative;overflow:hidden;padding:64px 44px;text-align:center;border-radius:32px;border:1px solid rgba(110,255,153,.32);background:radial-gradient(800px 300px at 50% 0%,rgba(0,230,118,.22),rgba(0,245,212,.08) 50%,transparent 80%),linear-gradient(160deg,#0E2218,#06130D);box-shadow:0 40px 100px -30px rgba(0,0,0,.92),0 0 50px -15px rgba(0,230,118,.3)}
.cta-band h2{margin:10px 0 14px}
.cta-band .lead{max-width:580px;margin:0 auto 28px}
.cta-band .hero-actions{justify-content:center;margin-top:0}

/* Reserved future ad slot (renders nothing until an approved ad unit is inserted) */
.ad-slot:empty{display:none}
.ad-slot{margin:32px auto;max-width:970px;text-align:center}

/* ---------------- Footer ---------------- */
.site-footer{margin-top:80px;border-top:1px solid var(--border);background:linear-gradient(180deg,rgba(11,30,23,.4),rgba(6,18,14,1))}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,minmax(0,1fr));gap:40px;padding:56px 0 40px}
.footer-grid p{color:var(--text2);font-size:.9rem;margin-top:14px;max-width:340px}
.footer-grid h4{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:14px;font-weight:700}
.footer-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-grid a{color:var(--text2);font-size:.92rem;transition:color .2s}
.footer-grid a:hover{color:var(--accent)}
.support-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:var(--accent)!important;font-weight:600;overflow-wrap:anywhere}
.support-link svg{width:16px;height:16px;flex:none}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px 0 28px;border-top:1px solid var(--border);color:var(--text3);font-size:.84rem}
.footer-bottom nav{display:flex;flex-wrap:wrap;gap:16px}
.footer-bottom a:hover{color:var(--text)}

/* ---------------- Modal & toast ---------------- */
.modal-backdrop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(2,8,6,.72);animation:fadeIn .2s ease}
@supports (backdrop-filter:blur(1px)){.modal-backdrop{backdrop-filter:blur(8px)}}
.modal{position:relative;width:min(100%,430px);padding:32px 28px 26px;border-radius:24px;border:1px solid var(--border2);background:linear-gradient(160deg,#10271D,#0A1C15);box-shadow:0 40px 100px -20px rgba(0,0,0,.9);animation:popIn .3s var(--ease)}
.modal h2{font-size:1.7rem;margin:10px 0 6px}
.modal > p{color:var(--text2);font-size:.92rem;margin-bottom:20px}
.modal .field{margin-bottom:14px}
.modal-close{position:absolute;top:14px;right:14px}
.auth-switch{margin-top:16px;text-align:center;font-size:.9rem;color:var(--text2)}
.link-btn{border:0;background:none;padding:2px 4px;color:var(--accent);font-weight:650}
.link-btn:hover{color:var(--accent2);text-decoration:underline}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.toast{position:fixed;right:20px;bottom:20px;z-index:250;max-width:min(380px,calc(100vw - 40px));display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:14px;border:1px solid var(--border2);background:rgba(13,33,25,.96);box-shadow:0 20px 50px -10px rgba(0,0,0,.8);font-size:.9rem;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease)}
.toast.show{opacity:1;transform:none;pointer-events:auto}
.toast.err{border-color:rgba(255,92,108,.4)}
.toast::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}
.toast.err::before{background:var(--danger)}

/* ---------------- Static info pages ---------------- */
.page-hero{padding:72px 0 40px}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem);margin:14px 0 14px}
.page-hero .lead{max-width:680px}
.breadcrumb{display:flex;gap:8px;font-size:.84rem;color:var(--text3)}
.breadcrumb a:hover{color:var(--text)}
.prose{max-width:820px}
.prose h2{font-size:1.5rem;margin:44px 0 14px}
.prose h3{font-size:1.1rem;margin:28px 0 10px}
.prose p,.prose li{color:var(--text2);line-height:1.8}
.prose p+p{margin-top:14px}
.prose ul,.prose ol{padding-left:22px;margin:12px 0}
.prose li{margin:6px 0}
.prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose strong{color:var(--text)}
.prose .updated{font-size:.86rem;color:var(--text3)}
.info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.info-card{padding:24px}
.info-card h3{margin:16px 0 8px}
.info-card p{color:var(--text2);font-size:.92rem}
.contact-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:20px;padding:26px}
.contact-card .tool-icon{margin:0}
.contact-card a.mail{font-size:1.15rem;font-weight:700;color:var(--accent);overflow-wrap:anywhere}
.two-col{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px;align-items:start}
.table-wrap{overflow-x:auto;border-radius:14px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--text);background:rgba(255,255,255,.03);font-weight:650}
td{color:var(--text2)}
tr:last-child td{border-bottom:0}

/* ---------------- Reveal & motion ---------------- */
[data-reveal]{opacity:1;transform:none}
@media (prefers-reduced-motion: no-preference) {
  .js body.motion-ready [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  .js body.motion-ready [data-reveal].in{opacity:1;transform:none}
  .js body.motion-ready [data-reveal][data-delay="1"]{transition-delay:.08s}
  .js body.motion-ready [data-reveal][data-delay="2"]{transition-delay:.16s}
  .js body.motion-ready [data-reveal][data-delay="3"]{transition-delay:.24s}
}


/* Low-power / reduced motion: keep layout, drop expensive effects */
.lite .sc-short,.lite .sc-float{animation:none!important}
.lite .sc-float,.lite .site-header,.lite .modal-backdrop{backdrop-filter:none!important}
.lite .showcase-stage{transition:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js [data-reveal]{opacity:1;transform:none}
  .showcase-stage{transform:none}
}

/* ---------------- Responsive ---------------- */
@media (max-width:1180px){
  .main-nav a{padding:8px 9px}
  .tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1060px){
  .main-nav{display:none}
  .menu-toggle{display:inline-flex}
  .site-header.menu-open .main-nav{display:flex;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:12px 16px 18px;background:rgba(6,18,14,.98);border-bottom:1px solid var(--border)}
  .site-header.menu-open .main-nav a{padding:12px 14px;font-size:1rem}
  .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero .lead{margin:0 auto}
  .hero-actions,.hero-points{justify-content:center}
  .showcase{max-width:640px;margin:0 auto;width:100%}
  .pricing-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > div:first-child{grid-column:1/-1}
  .info-grid{grid-template-columns:1fr 1fr}
  .two-col{grid-template-columns:1fr}
}
@media (max-width:860px){
  .section{padding:72px 0}
  .section-head{flex-direction:column;align-items:flex-start;gap:14px}
  .workflow{grid-template-columns:1fr 1fr}
  .workflow::before,.workflow::after{display:none}
  .studio{grid-template-columns:1fr}
  .studio-side{flex-direction:row;flex-wrap:wrap;align-items:center;padding:10px;border-right:0;border-bottom:1px solid var(--border);gap:6px}
  .studio-side .side-label,.studio-side .side-list,.studio-side .side-sep{display:none}
  .side-tab{width:auto;flex:1;justify-content:center}
  .side-mode{display:none}
  .studio-main{padding:22px}
  .fields{grid-template-columns:1fr 1fr}
  .fields .field:last-child{grid-column:1/-1}
  .stages{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  :root{--header-h:64px}
  .container{padding:0 18px}
  .hero{padding:44px 0 40px}
  .header-actions .hide-sm{display:none}
  .showcase-stage{aspect-ratio:1/1.02}
  .sc-long{width:92%}
  .sc-shorts{width:74%}
  .sc-highlights{display:none}
  .sc-badge{top:auto;bottom:40%;right:auto;left:0}
  .tool-grid,.workflow,.info-grid{grid-template-columns:1fr}
  .tool-card{min-height:0}
  .clip{grid-template-columns:1fr;padding:16px}
  .clip-frame{max-width:250px;margin:0 auto}
  .clip-actions .btn{flex:1 1 calc(50% - 8px)}
  .clip-actions .btn-primary{flex-basis:100%}
  .stages{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
  .cta-band{padding:40px 22px}
  .contact-card{grid-template-columns:1fr;text-align:left}
  .project{flex-wrap:wrap}
  .project .btn{width:100%}
}
@media (max-width:480px){
  h1{font-size:clamp(1.85rem,7.5vw,2.55rem)}
  h2{font-size:clamp(1.5rem,5.5vw,2.1rem)}
  .dimension-indicator-box{flex-wrap:wrap;gap:8px}
  .dim-left{flex-wrap:wrap}
  .pricing-card-wide{padding:24px 16px;border-radius:18px}
  .pcard-badge-wrap{flex-wrap:wrap;gap:8px}
  .pcard-num{font-size:2.8rem}
  .voice-guide-wrapper{padding:22px 14px;border-radius:18px}
  .voice-choice-card{padding:20px 14px;border-radius:16px}
  .hero-points{flex-direction:column;align-items:center;gap:8px}
}
@media (max-width:420px){
  .fields{grid-template-columns:1fr}
  .hero-actions .btn{width:100%}
  .ai-pill{padding:0 8px;letter-spacing:.04em;font-size:0.68rem}
  .brand{font-size:1.02rem;gap:8px}
  .brand-mark{width:26px;height:26px}
  .brand-name{font-size:1.02rem}
  .brand-byline{font-size:0.48rem;letter-spacing:0.06em;margin-top:2px}
  .header-actions{gap:6px}
  .footer-grid{grid-template-columns:1fr}
  .studio-main{padding:16px}
  .process{padding:16px}
}
@media (max-width:350px){
  .header-actions .btn-primary{display:none}
  .brand-name{font-size:0.92rem}
  .brand-byline{font-size:0.44rem;letter-spacing:0.04em}
}

/* ==========================================================================
   GTA VI Style Cinematic 3D Showcase & Specular Glare Physics
   ========================================================================== */
.gta-kicker {
  font-family: var(--font-gta);
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
}

.gta-headline {
  font-family: var(--font-gta);
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 0.98;
}

.gta-showcase-section {
  padding: 85px 0 70px;
  position: relative;
}

.gta-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 26px;
  margin-top: 48px;
  perspective: 1400px;
}

.gta-card-wide {
  grid-column: span 12;
}

.gta-card-tall {
  grid-column: span 4;
}

@media (max-width: 900px) {
  .gta-card-tall {
    grid-column: span 12;
  }
}

.gta-3d-card {
  position: relative;
  border-radius: var(--radius);
  background: rgba(10, 24, 18, 0.75);
  border: 1px solid rgba(110, 255, 153, 0.16);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.85);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
  cursor: pointer;
}

.gta-3d-card:hover {
  border-color: rgba(0, 230, 118, 0.45);
  box-shadow: 0 35px 80px -20px rgba(0, 0, 0, 0.95), 0 0 45px -10px rgba(0, 230, 118, 0.32);
}

.gta-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  transform: translateZ(0);
}

.gta-media-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #020704;
}

.gta-card-wide .gta-media-wrap {
  aspect-ratio: 16 / 7.6;
}

.gta-card-tall .gta-media-wrap {
  aspect-ratio: 9 / 13.5;
}

.gta-media-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.65s ease;
  filter: brightness(0.92) contrast(1.06);
}

.gta-3d-card:hover .gta-media-wrap img {
  transform: scale(1.05);
  filter: brightness(1.03) contrast(1.1);
}

/* 3D Specular Sheen (Dynamic Glare overlay reacting to mouse movement) */
.gta-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  background: radial-gradient(
    circle 500px at var(--sheen-x, 50%) var(--sheen-y, 50%),
    rgba(255, 255, 255, 0.36) 0%,
    rgba(0, 230, 118, 0.18) 32%,
    rgba(0, 245, 212, 0.06) 55%,
    transparent 75%
  );
  mix-blend-mode: screen;
  transition: opacity 0.35s ease;
}

.gta-3d-card:hover .gta-sheen {
  opacity: 1;
}

/* Hero Showcase 3D & Sheen Integration */
.sc-long.gta-3d-card {
  perspective: 1200px;
}
.sc-media, .sc-short {
  position: relative;
  overflow: hidden;
}
.sc-media:hover .gta-sheen, .sc-short:hover .gta-sheen {
  opacity: 1;
}

/* Card Overlays & GTA VI Badging */
.gta-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px;
  background: linear-gradient(180deg, rgba(3, 8, 5, 0.75) 0%, rgba(3, 8, 5, 0.1) 40%, rgba(2, 6, 4, 0.92) 100%);
  pointer-events: none;
}

.gta-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gta-pill {
  font-family: var(--font-gta);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  backdrop-filter: blur(10px);
}

.gta-pill.pill-live {
  background: rgba(220, 38, 38, 0.85);
  border-color: rgba(255, 100, 100, 0.6);
  color: #fff;
  box-shadow: 0 0 15px rgba(220, 38, 38, 0.5);
}

.gta-pill.pill-neural {
  background: rgba(0, 230, 118, 0.22);
  border-color: rgba(0, 230, 118, 0.55);
  color: var(--accent);
}

.gta-pill.pill-gold {
  background: rgba(255, 179, 0, 0.22);
  border-color: rgba(255, 179, 0, 0.6);
  color: #ffca28;
}

.gta-card-caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gta-card-subtitle {
  font-family: var(--font-gta);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
}

.gta-card-title {
  font-family: var(--font-gta);
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 1.05;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.9);
}

.gta-card-caption p {
  font-size: 0.88rem;
  color: rgba(240, 246, 243, 0.84);
  line-height: 1.45;
  margin-top: 4px;
  max-width: 620px;
}

.gta-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--font-gta);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--accent);
  text-transform: uppercase;
  opacity: 0.88;
  transition: transform 0.22s var(--ease), opacity 0.22s ease, color 0.22s ease;
}

.gta-3d-card:hover .gta-card-cta {
  opacity: 1;
  color: #fff;
  transform: translateX(5px);
}

a.gta-3d-card, a.sc-long, a.sc-short {
  display: block;
  text-decoration: none;
  color: inherit;
}

.glow-pulse {
  animation: dropzonePulse 1.4s ease-in-out;
}
@keyframes dropzonePulse {
  0%, 100% { border-color: rgba(110, 255, 153, 0.28); box-shadow: none; }
  50% { border-color: var(--accent); box-shadow: 0 0 35px rgba(0, 230, 118, 0.5); }
}

/* ---------------- 4K & Export Quality Settings ---------------- */
.export-section {
  margin: 22px 0;
  padding: 22px 24px;
  border-radius: 18px;
  border: 1px solid rgba(110, 255, 153, 0.24);
  background: linear-gradient(160deg, rgba(14, 38, 29, 0.78), rgba(7, 19, 14, 0.92));
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 36px -12px rgba(0, 0, 0, 0.6);
}
.export-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 140px;
  background: radial-gradient(ellipse at top right, rgba(0, 200, 83, 0.15), transparent 70%);
  pointer-events: none;
}
.export-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.export-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.96rem;
  font-weight: 750;
  color: var(--text);
}
.export-badge svg {
  width: 18px;
  height: 18px;
  color: var(--accent);
}
.export-tags {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.export-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: rgba(66, 245, 108, 0.12);
  border: 1px solid rgba(66, 245, 108, 0.3);
  color: var(--accent);
}
.export-desc {
  font-size: 0.83rem;
  color: var(--text2);
  margin-bottom: 16px;
  line-height: 1.55;
}

/* Resolution Selection Grid */
.resolution-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 768px) {
  .resolution-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .resolution-grid {
    grid-template-columns: 1fr;
  }
}

.res-card {
  position: relative;
  display: block;
  cursor: pointer;
  border-radius: 14px;
  background: rgba(18, 38, 29, 0.65);
  border: 1.5px solid rgba(110, 255, 153, 0.18);
  padding: 14px 14px 12px;
  transition: transform 0.22s var(--ease), border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.res-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.res-card:hover {
  transform: translateY(-2px);
  border-color: rgba(110, 255, 153, 0.45);
  background: rgba(22, 48, 36, 0.8);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.5);
}
.res-card.selected,
.res-card:has(input:checked) {
  border-color: var(--accent);
  background: linear-gradient(145deg, rgba(20, 52, 38, 0.85), rgba(10, 30, 22, 0.95));
  box-shadow: 0 0 0 1px var(--accent), 0 10px 25px -8px rgba(0, 200, 83, 0.35);
}

.res-card-inner {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.res-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.res-name {
  font-size: 0.92rem;
  font-weight: 750;
  color: var(--text);
  letter-spacing: -0.01em;
}
.res-badge {
  font-size: 0.64rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text2);
}
.res-badge.green {
  background: rgba(0, 200, 83, 0.2);
  border: 1px solid rgba(0, 200, 83, 0.4);
  color: var(--accent);
}
.res-badge.gold {
  background: rgba(255, 193, 7, 0.18);
  border: 1px solid rgba(255, 193, 7, 0.4);
  color: #ffca28;
}
.res-badge.blue {
  background: rgba(33, 150, 243, 0.18);
  border: 1px solid rgba(33, 150, 243, 0.4);
  color: #64b5f6;
}
.res-dim {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.res-note {
  font-size: 0.72rem;
  color: var(--text3);
  line-height: 1.35;
  margin-top: 2px;
}
.res-enhanced-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 750;
  color: #a7ff83;
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.e-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(135deg, #00E676, #00F5D4);
  color: #04200E;
  font-weight: 900;
  font-size: 0.65rem;
  line-height: 1;
  box-shadow: 0 0 8px rgba(0, 230, 118, 0.45);
  flex-shrink: 0;
}
.frame-enhanced-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(5, 18, 12, 0.85);
  border: 1px solid rgba(0, 230, 118, 0.4);
  color: #C9FFD6;
  font-size: 0.70rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.meta-pill.enhanced-pill {
  color: #C9FFD6;
  border-color: rgba(0, 230, 118, 0.35);
  background: rgba(0, 230, 118, 0.08);
  font-weight: 700;
}

/* Dimension Indicator Box */
.dimension-indicator-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(10, 28, 21, 0.75);
  border: 1px solid rgba(110, 255, 153, 0.22);
  font-size: 0.82rem;
  color: var(--text2);
  margin-bottom: 14px;
}
.dim-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dim-left svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}
.dim-left strong {
  color: #ffffff;
}
.dim-tag {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0, 200, 83, 0.12);
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid rgba(0, 200, 83, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.upscale-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(0, 200, 83, 0.06);
  border: 1px solid rgba(66, 245, 108, 0.28);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8rem;
  line-height: 1.5;
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.upscale-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(66, 245, 108, 0.15);
  border: 1px solid rgba(66, 245, 108, 0.35);
  flex-shrink: 0;
  margin-top: 1px;
}
.upscale-icon-wrap svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}
.upscale-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.upscale-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(66, 245, 108, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(66, 245, 108, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.export-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .export-fields {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .export-fields {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   CREATOR AUDIO GUIDE: ORIGINAL VOICE VS AI DUBBING (WIDE LUXURY LAYOUT)
   ========================================================================== */
.voice-guide-section {
  padding-top: 60px;
  padding-bottom: 40px;
}

.voice-guide-wrapper {
  max-width: 1220px;
  margin: 0 auto;
  padding: 46px 42px;
  border-radius: 28px;
  background: radial-gradient(900px 360px at 50% 0%, rgba(0, 230, 118, 0.14), rgba(0, 245, 212, 0.04) 50%, transparent 80%),
              linear-gradient(160deg, rgba(14, 32, 24, 0.88), rgba(7, 18, 13, 0.94));
  border: 1px solid rgba(110, 255, 153, 0.24);
  box-shadow: 0 40px 90px -25px rgba(0, 0, 0, 0.88), 0 0 40px -15px rgba(0, 230, 118, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.voice-guide-banner {
  margin-bottom: 34px;
}

.voice-guide-header h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  margin: 12px 0 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.voice-guide-header .lead {
  max-width: 760px;
  margin: 0 auto;
  font-size: 0.98rem;
  color: var(--text2);
  line-height: 1.65;
}

.voice-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
  width: 100%;
}

@media (max-width: 900px) {
  .voice-guide-wrapper {
    padding: 32px 20px;
  }
  .voice-guide-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.voice-choice-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px;
  border-radius: 20px;
  background: rgba(10, 22, 17, 0.72);
  border: 1px solid rgba(110, 255, 153, 0.16);
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
  position: relative;
  overflow: hidden;
}

.voice-choice-card:hover {
  transform: translateY(-4px);
  border-color: rgba(110, 255, 153, 0.38);
  box-shadow: 0 24px 60px -15px rgba(0, 0, 0, 0.75), 0 0 30px -5px rgba(0, 230, 118, 0.18);
}

.voice-card-original {
  border-top: 2px solid var(--accent);
}

.voice-card-dubbed {
  border-top: 2px solid #38bdf8;
}

.vcard-badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.vcard-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.vcard-pill.pill-original {
  color: var(--accent);
  background: rgba(0, 230, 118, 0.12);
  border: 1px solid rgba(0, 230, 118, 0.28);
}

.vcard-pill.pill-dubbed {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.28);
}

.vcard-pill.pill-neutral {
  color: var(--text3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.vcard-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vcard-dot.dot-original {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.vcard-dot.dot-dubbed {
  background: #38bdf8;
  box-shadow: 0 0 8px #38bdf8;
}

.vcard-hero-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.vcard-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vcard-icon svg {
  width: 24px !important;
  height: 24px !important;
}

.vcard-icon.icon-original {
  background: rgba(0, 230, 118, 0.14);
  border: 1px solid rgba(0, 230, 118, 0.35);
  color: var(--accent);
  box-shadow: 0 0 16px rgba(0, 230, 118, 0.25);
}

.vcard-icon.icon-dubbed {
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #38bdf8;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.25);
}

.vcard-hero-row h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 750;
  color: #ffffff;
  letter-spacing: -0.01em;
}

.vcard-sub {
  margin: 2px 0 0;
  font-size: 0.8rem;
  color: var(--text3);
}

.vcard-desc {
  font-size: 0.9rem;
  color: var(--text2);
  line-height: 1.6;
  margin: 0 0 18px;
}

.vcard-checklist {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.vcard-check-heading {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  font-weight: 700;
  margin-bottom: 2px;
}

.vcard-check-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.86rem;
  color: var(--text2);
  line-height: 1.48;
}

.vcheck-ico {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  flex: 0 0 16px !important;
  color: var(--accent) !important;
  margin-top: 3px !important;
  filter: drop-shadow(0 0 6px rgba(0, 230, 118, 0.45));
}

.vcheck-ico.vcheck-blue {
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.45));
}

.vcheck-text {
  flex: 1;
}

.vcheck-text strong {
  color: #ffffff;
  font-weight: 650;
}

.vcard-footer {
  margin-top: 22px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.vcard-setting-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.vcard-setting-label {
  font-size: 0.7rem;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.vcard-setting-code {
  font-size: 0.8rem;
  color: #e2e8f0;
  font-family: ui-monospace, monospace;
}

.vcard-setting-code strong {
  color: var(--accent);
}

.voice-card-dubbed .vcard-setting-code strong {
  color: #38bdf8;
}

.vcard-setting-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(0, 230, 118, 0.1);
  border: 1px solid rgba(0, 230, 118, 0.28);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.vcard-setting-btn:hover {
  background: var(--accent);
  color: #04200E;
  box-shadow: 0 0 14px rgba(0, 230, 118, 0.4);
}

.voice-card-dubbed .vcard-setting-btn {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.28);
  color: #38bdf8;
}

.voice-card-dubbed .vcard-setting-btn:hover {
  background: #38bdf8;
  color: #04121d;
  box-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
}

/* ==========================================================================
   Cinema Web-Print AI Remaster Section & Before/After Comparison
   ========================================================================== */
.web-remaster-section {
  position: relative;
  padding: 85px 0 80px;
  background: radial-gradient(1100px 500px at 50% 0%, rgba(0, 230, 118, 0.08), transparent 70%);
}

.remaster-headline {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-top: 10px;
}

.remaster-showcase-box {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.compare-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 9/16;
  max-height: 680px;
  border-radius: 24px;
  overflow: hidden;
  background: #030806;
  border: 2px solid rgba(0, 230, 118, 0.35);
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.85), 0 0 35px -5px rgba(0, 230, 118, 0.25);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.compare-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.compare-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Before layer: Simulated raw low-res 480p blur, washed out, low contrast */
.compare-before img {
  filter: blur(2.8px) contrast(0.85) brightness(0.92) saturate(0.82);
  transform: scale(1.02);
}

/* After layer: Web-Print Cinema Remastered (Razor sharp, vibrant, crystal clear) */
.compare-after {
  width: 50%;
  border-right: 2px solid #00E676;
  box-shadow: 3px 0 15px rgba(0, 230, 118, 0.6);
  z-index: 2;
  will-change: width;
}

.compare-after img {
  width: 500px;
  max-width: none;
  filter: contrast(1.14) brightness(1.04) saturate(1.22);
}

@media (max-width: 560px) {
  .compare-after img {
    width: 100vw;
  }
}

.compare-tag {
  position: absolute;
  top: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
  text-transform: uppercase;
}

.tag-before {
  right: 16px;
  background: rgba(30, 12, 12, 0.85);
  border: 1px solid rgba(255, 82, 82, 0.4);
  color: #ff8a80;
}

.tag-after {
  left: 16px;
  background: rgba(6, 28, 18, 0.88);
  border: 1px solid rgba(0, 230, 118, 0.5);
  color: #C9FFD6;
}

.tag-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.tag-status-dot.red {
  background: #ff5252;
  box-shadow: 0 0 8px #ff5252;
}
.tag-status-dot.green {
  background: #00E676;
  box-shadow: 0 0 8px #00E676;
}

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  margin-left: -20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #00E676 0%, #00F5D4 100%);
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.8);
}

.handle-button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #041B10;
  border: 2px solid #00E676;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00E676;
  box-shadow: 0 0 18px rgba(0, 230, 118, 0.6), inset 0 0 8px rgba(0, 230, 118, 0.3);
  cursor: ew-resize;
}
.handle-button svg {
  width: 18px;
  height: 18px;
}

.compare-range-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 15;
  margin: 0;
}

.remaster-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  width: 100%;
  max-width: 960px;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .remaster-features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.rfeat-card {
  padding: 24px 20px;
  border-radius: 16px;
  background: rgba(14, 32, 24, 0.65);
  border: 1px solid rgba(110, 255, 153, 0.18);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.25s, border-color 0.25s;
}
.rfeat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(0, 230, 118, 0.4);
}
.rfeat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(0, 230, 118, 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}
.rfeat-icon svg {
  width: 20px;
  height: 20px;
}
.rfeat-card h4 {
  font-size: 1.05rem;
  font-weight: 750;
  margin-bottom: 6px;
  color: #fff;
}
.rfeat-card p {
  font-size: 0.85rem;
  color: var(--text2);
  line-height: 1.5;
}

.remaster-cta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 960px;
  margin-top: 28px;
  padding: 22px 28px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(16, 42, 31, 0.85), rgba(8, 22, 16, 0.95));
  border: 1px solid rgba(0, 230, 118, 0.3);
  box-shadow: 0 12px 35px -10px rgba(0, 0, 0, 0.6);
}

@media (max-width: 720px) {
  .remaster-cta-bar {
    flex-direction: column;
    text-align: center;
    padding: 20px 18px;
  }
}
.cta-info strong {
  display: block;
  font-size: 1.02rem;
  color: #fff;
}
.cta-info span {
  font-size: 0.82rem;
  color: var(--text2);
}