/* =====================================================
   STORYBOARD STUDIO - cinematic landing (dark + gold)
   Matches the markup in index.html
   ===================================================== */
:root{
  --bg:#0a0a0e; --bg-soft:#0d0d13; --panel:#13131c; --panel-2:#181820; --card:#14141d;
  --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.05);
  --gold:#e8a32c; --gold-bright:#f6bd45; --gold-deep:#b9791a; --gold-tint:rgba(232,163,44,.12);
  --text:#ece8e1; --muted:#9b958a; --dim:#6f6a61;
  --blue:#5b8def; --green:#54c089; --purple:#9b7ff0;
  --display:'Bebas Neue','Arial Narrow',sans-serif;
  --cond:'Saira Condensed','Arial Narrow',sans-serif;
  --hand:'Saira Condensed',sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --maxw:1240px; --radius:14px; --radius-sm:9px;
  --t:.25s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(232,163,44,.06),transparent 60%);}
a{color:inherit;text-decoration:none;transition:color var(--t)}
img,svg{max-width:100%;display:block}
ul{list-style:none}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}

h1,h2,h3,h4{font-weight:700;line-height:1.12;letter-spacing:0}
/* HEADINGS · Bebas Neue (display) - uppercase, condensed, cinematic */
h1,h2,.serif{font-family:var(--display);font-weight:400;letter-spacing:.015em;line-height:.96}
/* SUBHEADINGS · Saira Condensed */
h3,h4{font-family:var(--cond);font-weight:600}
.gold{color:var(--gold-bright)}
.kicker{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 26px;border-radius:9px;
  font-weight:700;font-size:.83rem;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;border:1px solid transparent;
  transition:all var(--t);white-space:nowrap;font-family:inherit}
.btn svg{width:16px;height:16px}
.btn-primary{background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1206;border-color:var(--gold);box-shadow:0 6px 22px rgba(232,163,44,.25)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(232,163,44,.4)}
.btn-outline{background:rgba(255,255,255,.02);color:var(--text);border-color:var(--line)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(232,163,44,.06)}
.btn-lg{padding:16px 32px;font-size:.86rem}
.btn-full{width:100%}
.play-ic{width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;display:inline-flex;align-items:center;justify-content:center;font-size:8px}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;transition:all var(--t);
  background:rgba(10,10,14,.6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(10,10,14,.92);border-bottom-color:var(--line)}
.nav-container{max-width:var(--maxw);margin:0 auto;padding:0 28px;height:74px;display:flex;align-items:center;justify-content:space-between}
.logo{display:inline-flex;align-items:center;gap:12px}
/* brand logo image (transparent PNG, light marks on no plate) */
.logo-img{height:40px;width:auto;display:block}
.logo-mark{width:34px;height:34px;flex-shrink:0}
.logo-text{font-family:var(--display);font-weight:800;font-size:1.12rem;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links>a{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-links>a:hover{color:var(--text)}
.nav-cta{display:flex;align-items:center;gap:20px}
.nav-signin{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav-signin:hover{color:var(--text)}
.nav-cta .btn{padding:10px 20px}
.mobile-menu-btn{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px}
.mobile-menu-btn span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:all var(--t)}
.mobile-menu-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mobile-menu-btn.active span:nth-child(2){opacity:0}
.mobile-menu-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;padding:150px 0 40px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(10,10,14,.94) 0%,rgba(10,10,14,.62) 42%,rgba(10,10,14,.34) 100%),
            url(../images/storyboardStudio_background.jpg) center/cover no-repeat}
.hero-shot img{width:100%;border-radius:14px;box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04)}
.hero .container{display:grid;grid-template-columns:0.92fr 1.08fr;gap:50px;align-items:center}
.hero-copy{position:relative}
.hero h1{font-family:var(--display);font-size:clamp(2.4rem,3.9vw,3.6rem);font-weight:400;line-height:.98;letter-spacing:.01em;margin-bottom:24px}
.hero h1 .l1{color:var(--text)}
.hero h1 .l2{color:var(--gold-bright)}
.hero-desc{font-size:1.08rem;color:var(--muted);max-width:430px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-hand{font-family:var(--hand);font-size:1.5rem;color:var(--gold);transform:rotate(-6deg);position:absolute;left:-18px;bottom:-70px;opacity:.85;line-height:1.1}
/* film-margin annotations down the far left edge */
.film-marks{position:absolute;left:14px;top:170px;display:flex;flex-direction:column;gap:42px;z-index:2;pointer-events:none}
.film-mark{font-size:.62rem;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;text-align:center;line-height:1.5}
.film-mark b{display:block;color:var(--muted);font-size:.8rem;font-weight:700}
.film-mark .x{font-size:1.1rem;color:var(--gold-deep);opacity:.7}

/* ---------- Hero app mockup ---------- */
.hero-mock{position:relative}
.app-mock{background:linear-gradient(180deg,#15151e,#101017);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02) inset;font-size:11px}
.am-bar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
.am-proj{display:flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;font-size:11px;white-space:nowrap}
.am-proj .dd{color:var(--dim)}
.am-tools{display:flex;gap:5px;margin:0 auto}
.am-tools i{width:20px;height:20px;border-radius:5px;background:rgba(255,255,255,.05);display:block}
.am-tools i.on{background:var(--gold-tint);box-shadow:0 0 0 1px var(--gold) inset}
.am-bar-right{display:flex;align-items:center;gap:7px;color:var(--dim);font-size:10px}
.am-bar-right i{width:18px;height:18px;border-radius:4px;background:rgba(255,255,255,.05);display:block}
.am-body{display:grid;grid-template-columns:118px 1fr 152px}
.am-scenes{border-right:1px solid var(--line);padding:10px 8px;background:rgba(0,0,0,.18)}
.am-col-head{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-bottom:10px}
.am-col-head .pl{color:var(--gold)}
.am-scene{display:flex;gap:7px;align-items:center;padding:4px;border-radius:6px;margin-bottom:6px;border:1px solid transparent}
.am-scene.sel{border-color:var(--gold);background:var(--gold-tint)}
.am-scene .th{width:40px;height:26px;border-radius:4px;flex-shrink:0;background:linear-gradient(135deg,#2a2a33,#15151c)}
.am-scene .meta b{display:block;font-size:9px;color:var(--text)}
.am-scene .meta span{font-size:8px;color:var(--dim);letter-spacing:.04em}
.am-scene-foot{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft)}
.am-scene-foot i{width:14px;height:14px;border-radius:3px;background:rgba(255,255,255,.06);display:block}
.am-main{padding:11px 13px}
.am-main-head{font-size:10px;letter-spacing:.1em;color:var(--gold);text-transform:uppercase;font-weight:700;margin-bottom:11px}
.am-frames{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.am-frame .fr{position:relative;aspect-ratio:4/3;border-radius:6px;border:1px solid var(--line);overflow:hidden;
  background:repeating-linear-gradient(135deg,#1b1b22,#1b1b22 6px,#191920 6px,#191920 12px)}
.am-frame.act .fr{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.am-frame .fr::after{content:'';position:absolute;inset:18% 14%;border-radius:3px;
  background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.10),transparent 55%),linear-gradient(160deg,#3a3a44,#1d1d25);opacity:.7}
.am-frame .code{position:absolute;top:4px;left:4px;font-size:8px;color:var(--gold);background:rgba(0,0,0,.5);padding:1px 4px;border-radius:3px;z-index:2}
.am-frame .cap{font-size:8.5px;color:var(--muted);margin-top:4px;line-height:1.35}
.am-shot{border-left:1px solid var(--line);padding:10px;background:rgba(0,0,0,.18)}
.am-tabs{display:flex;gap:12px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-bottom:11px;border-bottom:1px solid var(--line-soft);padding-bottom:8px}
.am-tabs .on{color:var(--gold);border-bottom:1.5px solid var(--gold);padding-bottom:8px;margin-bottom:-9px}
.am-field{margin-bottom:9px}
.am-field label{display:block;font-size:8px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;margin-bottom:3px}
.am-field .val{font-size:10px;color:var(--text);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:5px;padding:5px 7px}
.am-field .val.sel{display:flex;justify-content:space-between;color:var(--muted)}
.am-note{font-family:var(--hand);font-size:14px;color:var(--gold-bright);line-height:1.15}
.am-swatches{display:flex;gap:5px;margin-top:10px}
.am-swatches i{width:15px;height:15px;border-radius:4px;display:block}
.am-timeline{border-top:1px solid var(--line);padding:9px 12px 11px;background:rgba(0,0,0,.22)}
.am-tl-head{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase;margin-bottom:9px}
.am-tl-head .pl{color:var(--gold)}
.am-tl-head .tc{color:var(--muted);margin-left:auto;font-variant-numeric:tabular-nums}
.am-tl-track{display:flex;gap:6px}
.am-tl-cell{flex:1}
.am-tl-cell .th{aspect-ratio:16/9;border-radius:4px;border:1px solid var(--line);background:linear-gradient(135deg,#26262f,#16161d)}
.am-tl-cell.act .th{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.am-tl-cell .lbl{display:flex;justify-content:space-between;font-size:7.5px;color:var(--dim);margin-top:3px}
.am-tl-cell .lbl b{color:var(--muted)}

/* floating callouts + shot-list paper */
.callout{position:absolute;z-index:4;background:rgba(18,18,26,.95);border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  box-shadow:0 16px 40px rgba(0,0,0,.55);max-width:165px}
.callout .ttl{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px}
.callout p{font-size:10px;color:var(--muted);line-height:1.35}
.callout.c-blue .ttl{color:var(--blue)} .callout.c-gold .ttl{color:var(--gold)}
.co-closeup{top:30%;right:-58px}
.co-track{top:55%;right:-58px}
.co-dialogue{bottom:6%;left:-44px}
.shot-list{position:absolute;top:6%;right:-90px;width:188px;transform:rotate(2.5deg);z-index:3;
  background:linear-gradient(180deg,#efe7d4,#e6dcc4);color:#3a3326;border-radius:4px;padding:14px 16px;
  box-shadow:0 22px 50px rgba(0,0,0,.6);font-family:var(--hand)}
.shot-list h4{font-size:1rem;letter-spacing:.18em;text-align:center;margin-bottom:10px;color:#2a2418;border-bottom:1px dashed #b3a98c;padding-bottom:6px}
.shot-list li{display:flex;align-items:center;gap:9px;font-size:1.05rem;line-height:1.7;color:#4a4131}
.shot-list .bx{width:13px;height:13px;border:1.5px solid #6b6149;border-radius:2px;flex-shrink:0;position:relative}
.shot-list .bx.on::after{content:'✓';position:absolute;top:-5px;left:0;color:var(--gold-deep);font-size:14px}

/* connector dashes */
.dash{position:absolute;border-top:1.5px dashed var(--gold-deep);opacity:.5;z-index:2}

/* ---------- Section scaffolding ---------- */
section{padding:48px 0}
.sec-label{display:flex;flex-direction:column;gap:3px}
.sec-label .a{font-size:.95rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-bright)}
.sec-label .b{font-size:.95rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);opacity:.7}

/* POWERFUL TOOLS */
.tools{border-top:1px solid var(--line)}
.tools .container{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}
.tools-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.tool-card{padding:26px 22px;border-right:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.015),transparent);transition:background var(--t)}
.tool-card:last-child{border-right:none}
.tool-card:hover{background:rgba(232,163,44,.05)}
.tool-ic{width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;
  background:var(--gold-tint);color:var(--gold-bright);border:1px solid rgba(232,163,44,.25)}
.tool-ic svg{width:21px;height:21px}
.tool-card h3{font-size:1.02rem;margin-bottom:8px;color:var(--text)}
.tool-card p{font-size:.86rem;color:var(--muted);line-height:1.5}

/* MADE FOR CREATIVE MINDS */
.minds{border-top:1px solid var(--line)}
.minds .container{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:start}
.minds-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mind-card{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;
  background:#16161d}
.mind-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.85;transition:opacity var(--t),transform var(--t)}
.mind-card:hover .mind-img{opacity:1;transform:scale(1.04)}
.mind-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,14,.1) 30%,rgba(10,10,14,.92))}
.mind-body{position:relative;z-index:2;padding:20px 18px}
.mind-body h3{font-size:1.02rem;margin-bottom:7px}
.mind-body p{font-size:.83rem;color:var(--muted);line-height:1.45}
.mind-body .ln{width:30px;height:3px;border-radius:2px;margin-top:12px;background:var(--gold)}
.mind-card:nth-child(2) .mind-body .ln{background:var(--blue)}
.mind-card:nth-child(3) .mind-body .ln{background:var(--purple)}
.mind-card:nth-child(4) .mind-body .ln{background:var(--green)}
.mi-film{background-image:url(../images/chair.jpg)}
.mi-game{background-image:url(../images/mech.jpg)}
.mi-anim{background-image:url(../images/artist.jpg)}
.mi-teach{background-image:url(../images/studio.jpg)}

/* A WORKFLOW */
.flow{border-top:1px solid var(--line)}
.flow .container{display:grid;grid-template-columns:230px 1fr;gap:40px;align-items:center}
.flow-steps{display:grid;grid-template-columns:repeat(9,auto);align-items:start;gap:8px;justify-content:space-between}
.flow-step{display:flex;flex-direction:column;gap:10px;max-width:150px}
.flow-step .fic{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:rgba(255,255,255,.02)}
.flow-step .fic svg{width:20px;height:20px}
.flow-step h4{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.flow-step p{font-size:.8rem;color:var(--muted);line-height:1.4}
.flow-arrow{display:flex;align-items:center;justify-content:center;color:var(--dim);padding-top:11px}
.flow-arrow svg{width:18px;height:18px}
.s-write .fic{color:var(--gold);border-color:rgba(232,163,44,.3)} .s-write h4{color:var(--gold)}
.s-break .fic{color:var(--blue);border-color:rgba(91,141,239,.3)} .s-break h4{color:var(--blue)}
.s-board .fic{color:var(--green);border-color:rgba(84,192,137,.3)} .s-board h4{color:var(--green)}
.s-time .fic{color:var(--purple);border-color:rgba(155,127,240,.3)} .s-time h4{color:var(--purple)}
.s-export .fic{color:var(--gold);border-color:rgba(232,163,44,.3)} .s-export h4{color:var(--gold)}

/* ---------- Pricing ---------- */
.pricing{border-top:1px solid var(--line);text-align:center}
.sec-head{max-width:640px;margin:0 auto 50px;text-align:center}
.sec-head .kicker{margin-bottom:14px}
.sec-head h2{font-family:var(--display);font-size:clamp(2rem,3.2vw,2.7rem);margin-bottom:14px}
.sec-head p{color:var(--muted);font-size:1.05rem}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1000px;margin:0 auto;text-align:left}
.price-tier{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;transition:all var(--t)}
.price-tier:hover{transform:translateY(-4px);border-color:rgba(232,163,44,.3)}
.price-tier.popular{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 24px 60px rgba(232,163,44,.12)}
.price-ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,var(--gold-bright),var(--gold));color:#1a1206;
  font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 14px;border-radius:999px;white-space:nowrap}
.price-tier h3{font-family:var(--display);font-size:1.4rem;margin-bottom:4px}
.price-seats{font-size:.85rem;color:var(--dim);margin-bottom:18px}
.price-amt{display:flex;align-items:flex-start;gap:2px;margin-bottom:6px}
.price-amt .cur{font-size:1.3rem;font-weight:700;margin-top:8px;color:var(--muted)}
.price-amt .num{font-family:var(--display);font-size:3rem;font-weight:800;line-height:1;color:var(--text)}
.price-amt .per{align-self:flex-end;color:var(--dim);font-size:.95rem;margin-bottom:6px}
.price-annual{font-size:.82rem;color:var(--muted);margin-bottom:22px}
.price-free{display:inline-block;background:var(--gold-tint);color:var(--gold-bright);font-weight:700;font-size:.68rem;padding:2px 8px;border-radius:999px;margin-left:4px}
.price-feat{display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.price-feat li{position:relative;padding-left:25px;font-size:.88rem;color:var(--muted)}
.price-feat li::before{content:'';position:absolute;left:2px;top:7px;width:11px;height:6px;border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.price-tier .btn{margin-top:auto}
.pricing-note{margin-top:30px;font-size:.85rem;color:var(--dim)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:980px;margin:0 auto}
.faq-item{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px}
.faq-item h3{font-size:1rem;margin-bottom:8px;color:var(--text)}
.faq-item p{font-size:.88rem;color:var(--muted);line-height:1.55}

/* ---------- CTA band ---------- */
.cta{position:relative;text-align:center;padding:110px 0;overflow:hidden;border-top:1px solid var(--line)}
.cta-bg{position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,#0a0a0e 0%,transparent 25%,transparent 60%,#0a0a0e 100%),
            radial-gradient(ellipse 70% 90% at 50% 120%,rgba(232,163,44,.28),transparent 60%),
            linear-gradient(180deg,#1a160f,#0d0b09)}
.cta-bg::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;
  background:radial-gradient(ellipse 80% 100% at 50% 100%,rgba(120,80,30,.45),transparent 70%)}
.cta .container{position:relative;z-index:2}
.cta h2{font-family:var(--display);font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:14px}
.cta p{color:var(--muted);font-size:1.12rem;margin-bottom:32px}
.cta-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:46px 0 30px;background:var(--bg-soft)}
.footer-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;margin-bottom:28px}
.footer-brand .logo{margin-bottom:8px}
.footer-brand p{font-size:.82rem;color:var(--dim)}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 26px}
.footer-links a{font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.footer-links a:hover{color:var(--gold-bright)}
.footer-social{display:flex;gap:14px}
.footer-social a{color:var(--muted)}.footer-social a:hover{color:var(--gold-bright)}
.footer-social{gap:20px}
.footer-social svg{width:36px;height:36px}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:22px;border-top:1px solid var(--line-soft);font-size:.78rem;color:var(--dim)}

/* ---------- Auth modal ---------- */
.modal{position:fixed;inset:0;z-index:2000;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-overlay{position:absolute;inset:0;background:rgba(5,5,8,.7);backdrop-filter:blur(4px)}
.modal-content{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:38px;width:100%;max-width:420px;box-shadow:0 32px 80px rgba(0,0,0,.6)}
.modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:1.7rem;line-height:1;color:var(--dim);cursor:pointer}
.modal-close:hover{color:var(--text)}
.modal-content h2{font-family:var(--display);text-align:center;margin-bottom:24px;font-size:1.6rem}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-weight:600;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.form-group input{width:100%;padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:9px;color:var(--text);font-size:.95rem;font-family:inherit}
.form-group input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-tint)}
.auth-divider{display:flex;align-items:center;gap:14px;margin:20px 0;color:var(--dim);font-size:.8rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--line)}
.auth-toggle{text-align:center;margin-top:20px;font-size:.88rem;color:var(--muted)}
.auth-toggle a{color:var(--gold-bright);font-weight:700;margin-left:4px}
.auth-error{display:none;background:rgba(220,80,60,.1);color:#f0a08c;border:1px solid rgba(220,80,60,.3);border-radius:9px;padding:11px 14px;font-size:.85rem;margin-bottom:16px}
.auth-error.show{display:block}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero .container{grid-template-columns:1fr;gap:60px}
  .film-marks{display:none}
  .shot-list{right:0;top:-30px}
  .co-closeup,.co-track{right:8px}
  .co-dialogue{left:8px}
  .tools .container,.minds .container,.flow .container{grid-template-columns:1fr;gap:26px}
  .tools-grid,.minds-grid{grid-template-columns:repeat(2,1fr)}
  .tool-card:nth-child(2){border-right:none}
  .tool-card{border-bottom:1px solid var(--line)}
  .flow-steps{grid-template-columns:1fr;gap:0}
  .flow-arrow{transform:rotate(90deg);padding:6px 0}
  .flow-step{flex-direction:row;align-items:flex-start;max-width:none;padding:6px 0}
  .flow-step .fic{flex-shrink:0}
}
@media (max-width:760px){
  .nav-links{position:fixed;top:74px;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;background:rgba(10,10,14,.98);
    padding:18px 28px 26px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform var(--t);max-height:calc(100vh - 74px);overflow:auto}
  .nav.menu-open .nav-links{transform:translateY(0)}
  .nav-links>a{padding:10px 0}
  .mobile-menu-btn{display:flex}
  .nav-signin{display:none}
  section{padding:35px 0}
  .hero{padding:120px 0 30px}
  .pricing-grid,.faq-grid,.minds-grid,.tools-grid{grid-template-columns:1fr}
  .tool-card{border-right:none}
  .price-tier.popular{order:-1}
  .footer-top{flex-direction:column;align-items:flex-start}
}
@media (max-width:480px){ .nav-cta .btn{display:none} .logo-text{font-size:1rem} .hero-hand{display:none} }
@media (max-width:430px){ .app-mock{font-size:9px} .am-body{grid-template-columns:84px 1fr 0}.am-shot{display:none} }