/* 420 Plugins — Homepage
   -------------------------------------------------- */

/* ========== 0) Header auth rules (Homepage only) ========== */
body.logged-in .header .btn-signin{ display:none !important; }
body:not(.logged-in) .header .btn-account{ display:none !important; }
/* Never show a trial button in the HEADER on the homepage */
.header .btn-start-trial,
.header a[href="/checkout/"]{ display:none !important; }

/* ========== 1) Header tweaks (Homepage only) ========== */
.header .logo{
  display:flex !important; flex-direction:row !important; align-items:center;
  gap:12px; flex-wrap:nowrap;
}
.header .logo .brand-pill{ margin:0 0 0 12px; white-space:nowrap; align-self:center; }
/* No underline on header buttons */
.header .btn, .header .btn:hover, .header .btn:focus{ text-decoration:none !important; }

/* ========== 2) Hero (feature area) ========== */
.hero{ padding:14vh 0 14vh; position:relative }          /* more breathing room */
@media (max-width:560px){ .hero{ padding:12vh 0 12vh; } }
.hero .container,
.hero .hero-content{ display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; z-index:2 }
.hero h1{ font-size:clamp(2.6rem,6.8vw,3.8rem); line-height:1.03; margin:.4rem 0 }
.hero .sublead{ color:#fff; font-weight:800; font-size:clamp(1.1rem,2.3vw,1.35rem) }

/* ========== 3) CTA row (email + Start Free Trial) ========== */
.cta-wrap{ margin-top:16px }
.cta-panel{
  background:rgba(0,0,0,.30); padding:6px; border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 18px 50px rgba(177,79,255,.12);
}

/* Shared control height for input + button */
.cta-row{
  --cta-h: 56px;
  display:flex; gap:10px; align-items:center;
  width:clamp(360px, 33vw, 520px);
  margin:12px auto 0;
}
@media (max-width:560px){ .cta-row{ --cta-h: 52px; } }

/* Email input */
.input{
  flex:1; display:flex; align-items:center;
  background:var(--card-2); border:1px solid #2a2f34; border-radius:12px; padding:4px;
  height:var(--cta-h); transition:border-color .2s, box-shadow .2s;
}
.input input{
  appearance:none; border:none; outline:none; background:transparent; color:var(--text);
  height:100%; width:100%; padding:0 14px; font-size:1.18rem;
}
.input input::placeholder{ color:#8c959c; }

/* Focus + valid glow (valid uses price green) */
.cta-panel:focus-within .input{
  border-color:var(--brand-2);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-2) 35%, transparent), 0 0 26px color-mix(in srgb, var(--brand-2) 35%, transparent);
}
.input.is-valid{
  border-color:var(--price)!important;
  box-shadow:0 0 0 2px rgba(46,232,112,.22), 0 0 26px rgba(46,232,112,.25)!important;
}

/* Primary CTA button (shared with the email modal) */
.cta-row .btn,
.email-panel .btn{
  position:relative; height:var(--cta-h); padding:0 1.15rem;
  font-size:1.16rem; font-weight:900; letter-spacing:.2px; white-space:nowrap;
  border-radius:12px; color:#fff; cursor:pointer; overflow:hidden;
  background: linear-gradient(90deg, #b14fff 0%, #00e0c6 100%);
  background-size:200% 100%;
  box-shadow:0 10px 24px rgba(177,79,255,.28), 0 0 0 1px rgba(255,255,255,.05) inset;
  transform: translateZ(0);
  transition:
    transform .14s ease,
    box-shadow .20s ease,
    background-position .35s ease,
    color .12s ease;
}

/* Shimmer stripe (subtle) */
.cta-row .btn::before,
.email-panel .btn::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.28) 20%, transparent 42%) no-repeat;
  background-size:200% 100%; transform:translateX(-100%);
}
@keyframes ctaShimmer { to { transform: translateX(100%); } }

/* Hover: flip to price green + black text (same green as valid email glow) */
.cta-row .btn:hover,
.email-panel .btn:hover{
  transform: translateY(-2px) scale(1.03);
  /* solid fallback using --price, then a gentle dimensional gradient in case */
  background: var(--price, #2EE870);
  background: linear-gradient(180deg, #41eb88, #22d86a);
  color:#0b0c10; /* black label for contrast on green */
  box-shadow:
    0 18px 36px rgba(46,232,112,.28),
    0 0 0 1px rgba(0,0,0,.08) inset;
}
.cta-row .btn:hover::before,
.email-panel .btn:hover::before{ animation: ctaShimmer 1.1s linear; }

/* Active + focus states */
.cta-row .btn:active,
.email-panel .btn:active{ transform: translateY(0) scale(1.0); }
.cta-row .btn:focus-visible,
.email-panel .btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--brand-2) 40%, transparent),
    0 0 30px color-mix(in srgb, var(--brand-2) 30%, transparent),
    0 0 0 1px rgba(0,0,0,.06) inset;
}

/* Disabled (modal uses this) */
.email-panel .btn[disabled]{ opacity:.55; cursor:not-allowed; filter:saturate(.4); }

/* CTA note */
#cta-note{ color:var(--muted); font-size:.9rem; margin-top:8px }

/* ========== 4) Sections / Grid ========== */
.section{ padding:8px 0 40px }
.section h3{ margin:8px 0 12px; text-align:center; font-size:clamp(1.6rem,2.8vw,2.25rem); line-height:1.1; font-weight:900; letter-spacing:.2px }
.meta-pills{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:0 0 14px }
.meta-pills span{ font-size:.78rem; color:#c9d3db; padding:.28rem .6rem; border-radius:999px; border:1px solid #2a2f34; background:rgba(0,0,0,.25) }
.section .container{ display:flex; flex-direction:column; align-items:center }

/* Poster grid */
.poster-grid{
  --poster-w: 220px;
  display:grid; gap:16px; justify-content:center;
  grid-template-columns: repeat(5, var(--poster-w, 220px));
}
@media (max-width:1100px){ .poster-grid{ grid-template-columns: repeat(4, var(--poster-w, 200px)); } }
@media (max-width:900px){  .poster-grid{ grid-template-columns: repeat(3, var(--poster-w, 200px)); } }
@media (max-width:660px){
  .poster-grid{ --poster-w: 31vw; gap:10px; grid-template-columns: repeat(3, minmax(0, var(--poster-w, 31vw))); }
  .poster{ border-radius:12px; }
  .poster .label{ font-size:.8rem; padding:12px 8px 8px; }
}
@media (max-width:420px){
  .poster-grid{ --poster-w: 30vw; gap:8px; grid-template-columns: repeat(3, minmax(0, var(--poster-w, 30vw))); }
}
@media (max-width:340px){ .poster-grid{ grid-template-columns: repeat(2, 44vw); } }

/* ========== 5) Modal (shared) ========== */
.modal{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.6); backdrop-filter:blur(2px); padding:24px }
.modal.is-open{ display:flex }
.modal-card{
  width:min(960px, 94vw); background:var(--card); border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
  transform:translateY(8px) scale(.98); opacity:0; transition:transform .2s, opacity .2s
}
.modal.is-open .modal-card{ transform:translateY(0) scale(1); opacity:1 }
.modal-inner{ display:grid; grid-template-columns:1fr 1fr }
@media (max-width:760px){ .modal-inner{ grid-template-columns:1fr; } }
.modal-media{ background:#0f1316; aspect-ratio:1/1 }
.modal-media video,.modal-media img{ width:100%; height:100%; object-fit:cover; display:block }
.modal-content{ padding:24px; display:flex; flex-direction:column; align-items:center; text-align:center }
.modal-title{ font-weight:800; margin:6px 0 4px; font-size:clamp(1.2rem,2.2vw,1.6rem); color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25) }
#modal-thumb{ width:120px; height:120px; object-fit:cover; border-radius:12px; outline:1px solid #2a3036; margin:6px 0 10px }
#modal-desc{ color:#d2dbe3; line-height:1.55; margin:6px 0 12px; max-width:38ch }
.modal-bullets{ margin:0 0 14px; padding-left:18px; color:#c9d3db }
.modal-bullets li::marker{ color:#a97aff }
.modal-actions{ display:flex; gap:10px; justify-content:center }
.modal-close{ position:absolute; top:12px; right:12px; border:0; background:transparent; color:#fff; font-size:28px; cursor:pointer }

/* Right-side readability panel */
.modal-content{
  background: linear-gradient(180deg, rgba(8, 10, 12, .70), rgba(8, 10, 12, .82));
  border-left: 1px solid #20262b;
}

/* ========== 6) Hero frame accents ========== */
.hero-frame{ position:relative; isolation:isolate; overflow:clip; border-radius:28px; width:min(1200px,94vw); margin-inline:auto }
.hero-frame::before{
  content:""; position:absolute; inset:-4rem; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 100% at 50% 30%, rgba(0,0,0,0) 40%, rgba(12,15,17,.75) 78%, #0c0f11 100%),
    radial-gradient(80% 120% at 10% 50%, rgba(177,79,255,.14), transparent 60%),
    radial-gradient(80% 120% at 90% 50%, rgba(0,224,198,.12), transparent 62%);
  filter: blur(20px);
}
.hero-frame::after{
  content:""; position:absolute; left:3%; right:3%; bottom:-16px; height:14px; border-radius:999px;
  background:linear-gradient(90deg,#ff5ccf 0%,#b14fff 30%,#00e0c6 60%,#b14fff 90%); background-size:200% 100%;
  box-shadow:0 6px 24px rgba(177,79,255,.45), 0 0 60px rgba(0,224,198,.28);
  transform:perspective(900px) rotateX(25deg); animation:stripeFlow 16s linear infinite; z-index:0; pointer-events:none;
}
@keyframes stripeFlow{ 0%{ background-position:0% 0 } 100%{ background-position:200% 0 } }
@media (max-width:560px){
  .hero-frame{ border-radius:18px }
  .hero h1{ font-size:clamp(2rem,8vw,2.6rem) }
}
.cta-panel .input{ background:#171c20; border-color:#2f353b }
.cta-panel .input input::placeholder{ color:#a7b0b7 }

/* ========== 7) Email-capture modal (reuses the CTA styles) ========== */
.email-modal .modal-card{
  width:min(540px, 94vw); background:var(--card); border-radius:18px; overflow:hidden; box-shadow:var(--shadow);
}
.email-modal .modal-content{
  background: linear-gradient(180deg, rgba(8,10,12,.86), rgba(8,10,12,.92));
  padding:28px 22px; text-align:center;
}
.email-modal h3{ margin:6px 0 8px; font-weight:900; font-size:clamp(1.2rem,2.4vw,1.6rem) }
.email-modal p{ color:#cfd8e3; margin:0 0 12px }
.email-panel{
  background:rgba(0,0,0,.30); padding:6px; border-radius:14px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 18px 50px rgba(177,79,255,.12);
  display:flex; gap:10px; align-items:center; justify-content:center;
}
.email-panel .input{ flex:1; background:#171c20; border-color:#2f353b }
.email-panel .input input::placeholder{ color:#a7b0b7 }
.email-panel:focus-within .input{
  border-color:var(--brand-2);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--brand-2) 35%, transparent),
             0 0 26px color-mix(in srgb, var(--brand-2) 35%, transparent);
}
.email-panel .input.is-valid{
  border-color:var(--price)!important;
  box-shadow:0 0 0 2px rgba(46,232,112,.22), 0 0 26px rgba(46,232,112,.25)!important;
}

/* ========== 8) Logged-in UX ========== */
body.logged-in .cta-wrap{ display:none !important; }
body.logged-in .modal .modal-actions{ display:none !important; }

/* ========== 9) Motion safety ========== */
@media (prefers-reduced-motion: reduce){
  .cta-row .btn,
  .cta-row .btn::before,
  .email-panel .btn,
  .email-panel .btn::before,
  .modal-card,
  .hero-frame::after{ transition:none !important; animation:none !important; }
}

/* === Going For Final Styling === */