:root{
  --ink:#15130f;
  --ink-soft:#221f19;
  --paper:#f4efe2;
  --paper-dim:#e9e2cf;
  --marquee:#c6102d;
  --marquee-dim:#9b0c24;
  --brass:#a9752f;
  --graphite:#6b6558;
  --line:#d9d1b8;
  --shadow: 0 30px 60px -25px rgba(21,19,15,0.45);
  --radius: 2px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.mono{font-family:'Courier Prime', monospace;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

::selection{background:var(--marquee);color:var(--paper);}

/* -------- reveal -------- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

/* -------- nav -------- */
header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(21,19,15,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(244,239,226,0.08);
}
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 32px;max-width:1180px;margin:0 auto;
}
.logo{
  font-family:'Courier Prime',monospace;
  font-weight:700;font-size:19px;letter-spacing:0.06em;
  display:flex;align-items:center;gap:10px;
}
.logo .dot{width:9px;height:9px;background:var(--marquee);border-radius:50%;display:inline-block;}
.nav-links{display:flex;gap:34px;align-items:center;}
.nav-links a{font-size:14.5px;color:#cfc9b8;transition:color .2s;}
.nav-links a:hover{color:var(--paper);}
.nav-cta{display:flex;gap:14px;align-items:center;}
.btn{
  font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;
  padding:10px 20px;border-radius:var(--radius);cursor:pointer;
  border:1px solid transparent;transition:all .25s ease;display:inline-block;
}
.btn-ghost{color:var(--paper);border-color:rgba(244,239,226,0.25);}
.btn-ghost:hover{border-color:var(--paper);}
.btn-solid{background:var(--marquee);color:var(--paper);}
.btn-solid:hover{background:var(--paper);color:var(--ink);}
.btn-outline-dark{border:1px solid var(--ink);color:var(--ink);}
.btn-outline-dark:hover{background:var(--ink);color:var(--paper);}

/* -------- hero -------- */
.hero{
  padding:172px 0 110px;
  display:grid;grid-template-columns:1.05fr 0.95fr;gap:64px;align-items:center;
}
.eyebrow{
  font-family:'Courier Prime',monospace;color:var(--marquee);
  font-size:13.5px;letter-spacing:0.18em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin-bottom:22px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--marquee);}
h1.headline{
  font-family:'Courier Prime',monospace;font-weight:700;
  font-size:clamp(34px,4.4vw,58px);line-height:1.08;letter-spacing:-0.01em;
  text-transform:uppercase;margin-bottom:26px;
}
h1.headline span{color:var(--brass);}
.sub{
  font-size:18px;line-height:1.6;color:#cfc9b8;max-width:480px;margin-bottom:38px;
}
.hero-ctas{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:28px;}
.hero-ctas .btn{padding:14px 26px;font-size:15px;}
.hero-note{font-size:13px;color:#8f8873;font-family:'Courier Prime',monospace;}

/* -------- screenplay page mock -------- */
.page-stage{position:relative;display:flex;justify-content:center;}
.page{
  background:var(--paper);
  color:var(--ink);
  width:400px;max-width:100%;
  padding:52px 46px 46px;
  box-shadow:var(--shadow);
  transform:rotate(1.4deg);
  position:relative;
  font-family:'Courier Prime',monospace;
  font-size:13.5px;line-height:1.85;
  min-height:520px;
}
.page::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(21,19,15,0.03), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(21,19,15,0.035), transparent 45%);
  pointer-events:none;
}
.page-num{position:absolute;top:24px;right:32px;font-size:12px;color:var(--graphite);}
.slug{font-weight:700;letter-spacing:0.02em;margin-bottom:14px;}
.action{color:var(--ink-soft);margin-bottom:18px;}
.char{text-align:center;font-weight:700;margin:0 0 2px;margin-top:6px;}
.paren{text-align:center;color:var(--graphite);font-style:italic;font-size:12.5px;margin-bottom:2px;}
.dial{width:74%;margin:0 auto 18px;text-align:left;}
.cursor{display:inline-block;width:8px;height:15px;background:var(--ink);vertical-align:middle;animation:blink 1s step-end infinite;margin-left:2px;}
@keyframes blink{50%{opacity:0;}}
.type-target{min-height:1.85em;}
.card-shadow-2{
  position:absolute;width:400px;max-width:100%;height:520px;
  background:var(--paper-dim);
  transform:rotate(-3deg);
  z-index:-1;top:14px;
  box-shadow:0 20px 40px -20px rgba(0,0,0,0.5);
}

/* -------- section shell -------- */
section{padding:110px 0;}
.section-head{max-width:640px;margin-bottom:64px;}
.section-head .eyebrow{color:var(--brass);}
.section-head::before{content:"";}
h2{
  font-family:'Courier Prime',monospace;font-weight:700;
  font-size:clamp(26px,3vw,38px);text-transform:uppercase;letter-spacing:-0.01em;
  line-height:1.2;margin-bottom:16px;
}
.section-head p{color:#b9b3a0;font-size:17px;line-height:1.65;max-width:560px;}

/* -------- trust strip -------- */
.trust{
  border-top:1px solid rgba(244,239,226,0.08);
  border-bottom:1px solid rgba(244,239,226,0.08);
  padding:34px 0;
}
.trust .wrap{display:flex;align-items:center;gap:40px;flex-wrap:wrap;justify-content:space-between;}
.trust-label{font-family:'Courier Prime',monospace;font-size:12.5px;letter-spacing:0.14em;color:#8f8873;white-space:nowrap;}
.trust-list{display:flex;gap:44px;flex-wrap:wrap;}
.trust-list span{font-family:'Courier Prime',monospace;font-size:14px;color:#a49d87;letter-spacing:0.04em;}

/* -------- features (scene cards) -------- */
.features{background:var(--paper);color:var(--ink);}
.features .section-head p{color:var(--graphite);}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
.feat-card{
  background:var(--paper);padding:38px 32px 34px;
  transition:background .3s ease, transform .3s ease;
}
.feat-card:hover{background:var(--paper-dim);transform:translateY(-4px);}
.feat-slug{
  font-family:'Courier Prime',monospace;font-weight:700;font-size:12.5px;
  letter-spacing:0.06em;color:var(--marquee);margin-bottom:18px;text-transform:uppercase;
}
.feat-icon{width:34px;height:34px;margin-bottom:20px;color:var(--ink);}
.feat-card h3{font-size:19px;font-weight:700;margin-bottom:10px;letter-spacing:-0.01em;}
.feat-card p{color:var(--graphite);font-size:15px;line-height:1.6;}

/* -------- showcase / editor mock -------- */
.showcase-wrap{position:relative;}
.editor{
  background:var(--ink-soft);
  border:1px solid rgba(244,239,226,0.1);
  border-radius:6px;overflow:hidden;box-shadow:var(--shadow);
  display:grid;grid-template-columns:220px 1fr;
}
.editor-side{
  background:#1a1712;border-right:1px solid rgba(244,239,226,0.08);
  padding:22px 18px;
}
.editor-side .title{font-family:'Courier Prime',monospace;font-size:12px;color:#8f8873;letter-spacing:0.1em;margin-bottom:16px;}
.scene-item{
  font-family:'Courier Prime',monospace;font-size:12.5px;color:#cfc9b8;
  padding:9px 10px;border-radius:3px;margin-bottom:4px;cursor:default;
}
.scene-item.active{background:var(--marquee);color:var(--paper);}
.editor-main{background:var(--paper);color:var(--ink);padding:44px 60px;font-family:'Courier Prime',monospace;font-size:13.5px;line-height:1.9;}
.editor-toolbar{
  display:flex;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(244,239,226,0.08);
  background:#1a1712;grid-column:1/-1;
}
.dotbtn{width:11px;height:11px;border-radius:50%;background:#413c30;}

/* -------- pull quote -------- */
.quote-section{
  background:var(--ink-soft);
  padding:120px 0;
  position:relative;
}
.quote-inner{max-width:680px;margin:0 auto;text-align:center;}
blockquote{
  font-family:'Courier Prime',monospace;font-weight:400;
  font-size:clamp(20px,2.6vw,28px);line-height:1.6;
  color:var(--paper);margin-bottom:30px;
}
.quote-attr{font-size:13px;letter-spacing:0.08em;text-transform:uppercase;color:var(--brass);font-family:'Courier Prime',monospace;}
.quote-attr small{display:block;color:#8f8873;letter-spacing:0.04em;margin-top:4px;text-transform:none;font-size:13px;}

/* -------- pricing -------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.plan{
  border:1px solid rgba(244,239,226,0.14);
  padding:36px 30px;border-radius:4px;
  display:flex;flex-direction:column;gap:18px;
  transition:border-color .25s ease, transform .25s ease;
}
.plan:hover{border-color:rgba(244,239,226,0.4);transform:translateY(-4px);}
.plan.featured{border-color:var(--marquee);background:rgba(191,42,42,0.06);}
.plan-name{font-family:'Courier Prime',monospace;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:#a49d87;}
.plan-price{font-size:36px;font-weight:800;font-family:'Inter',sans-serif;}
.plan-price span{font-size:15px;font-weight:500;color:#a49d87;}
.plan ul{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.plan li{font-size:14.5px;color:#cfc9b8;display:flex;gap:10px;align-items:flex-start;}
.plan li::before{content:"—";color:var(--brass);flex-shrink:0;}

/* -------- cta banner -------- */
.banner{
  background:var(--marquee);color:var(--paper);
  padding:90px 0;text-align:center;
}
.banner h2{color:var(--paper);margin-bottom:20px;}
.banner p{color:rgba(244,239,226,0.85);font-size:17px;margin-bottom:36px;}
.banner .btn-solid{background:var(--ink);}
.banner .btn-solid:hover{background:var(--paper);color:var(--ink);}

/* -------- footer -------- */
footer{padding:70px 0 40px;border-top:1px solid rgba(244,239,226,0.08);}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px;margin-bottom:60px;}
.foot-brand p{color:#8f8873;font-size:14px;line-height:1.6;margin-top:14px;max-width:260px;}
.foot-col h4{font-family:'Courier Prime',monospace;font-size:12.5px;letter-spacing:0.1em;color:#8f8873;text-transform:uppercase;margin-bottom:16px;}
.foot-col a{display:block;font-size:14.5px;color:#cfc9b8;margin-bottom:11px;transition:color .2s;}
.foot-col a:hover{color:var(--paper);}
.foot-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:28px;border-top:1px solid rgba(244,239,226,0.08);
  font-size:13px;color:#75705f;flex-wrap:wrap;gap:12px;
}

/* -------- responsive -------- */
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:150px;text-align:left;}
  .page-stage{margin-top:20px;}
  .nav-links{display:none;}
  .feat-grid{grid-template-columns:1fr;}
  .editor{grid-template-columns:1fr;}
  .editor-side{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .pricing-grid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  .reveal{transition:none;opacity:1;transform:none;}
  .cursor{animation:none;}
  html{scroll-behavior:auto;}
}