:root{
      --bg:#0b1220; --bg-2:#0e1528; --card:#121a2f;
      --text:#e6ecff; --muted:#a1accb; --brand:#ffdd33; --brand2:#00ffa3;
      --border:rgba(255,255,255,.09); --shadow:0 10px 30px rgba(0,0,0,.35);
      --radius:16px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:
      radial-gradient(1200px 800px at 12% -10%, rgba(255,221,51,.12), transparent 60%),
      radial-gradient(800px 600px at 100% 0%, rgba(0,255,163,.10), transparent 60%), var(--bg);
      color:var(--text); font:16px/1.6 system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial;}
    a{color:inherit;text-decoration:none}
    .container{max-width:1120px;margin:0 auto;padding:0 20px}
    header{position:sticky;top:0;z-index:20;background:linear-gradient(to bottom, rgba(11,18,32,.96), rgba(11,18,32,.75) 60%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
    .nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
    .brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
    .logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg, var(--brand), var(--brand2)); box-shadow: 0 4px 16px rgba(255,221,51,.25)}
    .logo svg{filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
    .navlinks{display:flex;gap:18px;align-items:center}
    .btn{display:inline-flex;align-items:center;gap:.5rem;background:linear-gradient(135deg, var(--brand), var(--brand2));color:#0a0f1e;font-weight:800;border:0;border-radius:999px;padding:10px 16px;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s ease}
    .btn:hover{transform:translateY(-1px)}
    .btn.secondary{background:transparent;color:var(--text);border:1px solid var(--border);box-shadow:none}
    .hero{padding:72px 0 24px}
    .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
    .pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.02)}
    .title{font-size: clamp(28px, 4vw, 48px); line-height:1.1;margin:14px 0 12px}
    .title span{background:linear-gradient(135deg, var(--brand), var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent}
    .subtitle{color:var(--muted);max-width:60ch;margin:0 0 18px}
    .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
    .card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
    .shot{aspect-ratio:16/10; border-radius:var(--radius); background:
            linear-gradient(135deg, rgba(255,221,51,.15), transparent 40%),
            linear-gradient(225deg, rgba(0,255,163,.15), transparent 40%),
            #0f172a; border:1px dashed var(--border)}
    .band{display:grid;grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px}
    .band .shot{aspect-ratio:16/9}
	
	/* === Sample Storyboards Gallery === */
.sample-card{padding:14px}
.sample-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sample-header h3{margin:0;font-size:18px;color:var(--text)}
.video-wrap{position:relative; border-radius:var(--radius); overflow:hidden; border:1px dashed var(--border); background:#0f172a}
.video-wrap::after{content:""; position:absolute; inset:0;
  background:radial-gradient(1000px 400px at 100% 0%, rgba(0,255,163,.08), transparent 40%),
             radial-gradient(900px 400px at 0% 100%, rgba(255,221,51,.06), transparent 45%); pointer-events:none}
#previewVideo{width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover}
.play-btn{position:absolute; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%);
  width:68px; height:68px; border-radius:999px; border:1px solid var(--border);
  background:linear-gradient(135deg, var(--brand), var(--brand2)); color:#0b1220; display:grid; place-items:center;
  box-shadow:var(--shadow); cursor:pointer; transition:transform .12s ease, opacity .12s ease}
.play-btn:hover{transform:translate(-50%,-50%) scale(1.03)}
.play-btn.hidden{opacity:0; pointer-events:none}
.thumbs{display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; margin-top:14px}
.thumb{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--border); padding:0; background:rgba(255,255,255,.02); cursor:pointer}
.thumb video{width:100%; height:82px; object-fit:cover; display:block; background:#0f172a}
.thumb::after{content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 0 transparent; transition:box-shadow .12s ease}
.thumb:hover::after{box-shadow:inset 0 0 0 2px rgba(255,221,51,.6)}
.thumb.active::after{box-shadow:inset 0 0 0 2px var(--brand)}

    .section{padding:48px 0}
    .section h2{font-size: clamp(22px, 2.6vw, 32px); margin:0 0 16px}
    .col-2{display:grid;grid-template-columns:1fr 1fr; gap:18px}
    .features{display:grid;grid-template-columns:repeat(3, 1fr); gap:18px}
    .feature{padding:18px;border-radius:var(--radius);border:1px solid var(--border);background:rgba(255,255,255,.02)}
    .feature h3{margin:8px 0 6px;font-size:18px}
    .feature p{margin:0;color:var(--muted)}
    .how{display:grid;grid-template-columns:repeat(3,1fr); gap:16px}
    .step{padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.02)}
    .step .idx{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand2));color:#0b1220;font-weight:900}
    .compare{display:grid;grid-template-columns:1fr 1fr; gap:18px}
    .tile{padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.02)}
	
	/* NEW: Pricing grid & cards */
.pricing{display:grid;grid-template-columns:repeat(2,1fr); gap:18px}
.plan{padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:rgba(255,255,255,.02); position:relative; overflow:hidden}
.plan.best::after{content:'POPULAR'; position:absolute; top:14px; right:-38px; transform:rotate(35deg); background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#0b1220; font-weight:900; padding:4px 44px}
.plan h3{margin:0 0 8px}
.price{font-weight:900;font-size:32px;margin:10px 0}
.plan ul{list-style:none;padding:0;margin:0;color:var(--muted)}
.plan li{margin:.4rem 0}

    footer{padding:28px 0;border-top:1px solid var(--border); color:var(--muted)}
    .center{text-align:center}
    /* Modal */
    .modal-backdrop{position:fixed; inset:0; background:rgba(3,7,18,.65); backdrop-filter: blur(6px); display:none; place-items:center; z-index:50}
    .modal{width:min(560px, 92vw); background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:20px; position:relative}
    .modal h3{margin:0 0 6px}
    .modal p{margin:6px 0 14px; color:var(--muted)}
    .modal .row{display:flex; gap:10px; align-items:center; margin:10px 0 4px}
    .email-box{flex:1; display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.02)}
    .email-text{font-weight:900; letter-spacing:.2px}
    .btn{cursor:pointer}
    .copy-btn{white-space:nowrap}
    .close-x{position:absolute; right:14px; top:12px; width:36px; height:36px; display:grid; place-items:center; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.03); cursor:pointer}
    .toast{position:fixed; bottom:16px; left:50%; transform: translateX(-50%); background:#111827; color:#e6ecff; border:1px solid var(--border); padding:10px 14px; border-radius:999px; display:none; z-index:60}
    /* Responsive */
    @media (max-width: 960px){
      .hero-grid{grid-template-columns:1fr}
      .features{grid-template-columns:1fr 1fr}
      .how{grid-template-columns:1fr}
      .col-2{grid-template-columns:1fr}
      .compare{grid-template-columns:1fr}
	  .pricing{grid-template-columns:1fr} /* NEW */
    }