/* Nightcap Games shared marketing stylesheet.
   Nightcap is a bar-at-night product, so every marketing page commits to one
   dark visual world. Colors and the body ground are painted explicitly so the
   look holds anywhere. Design tokens match the approved home-page mockup and
   core/web/theme.css. Keep this the single source of truth for the public site. */

:root{
  --bg:#0b0812; --bg2:#0e0b1a; --panel:#161022; --panel2:#1c1533;
  --line:#2a2140; --ink:#F6F3FF; --muted:#b9b0d6; --faint:#8b83a8;
  --magenta:#ff3d8b; --purple:#7b5cff; --gold:#ffd24a; --green:#37d67a;
  --grad:linear-gradient(90deg,var(--magenta),var(--purple));
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 700px at 82% -12%, #3a115033 0%, transparent 60%),
    radial-gradient(1000px 600px at -8% 8%, #7b5cff22 0%, transparent 55%);
  background-attachment:fixed;
}
.fred{font-family:'Fredoka','Inter',sans-serif}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
a{color:inherit}
img{max-width:100%}
h1,h2,h3{text-wrap:balance; margin:0}
.eyebrow{font-family:'Fredoka';font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  font-size:12.5px;color:var(--gold);margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---- nav ---- */
nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 78%, transparent);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:'Fredoka';font-weight:700;font-size:22px;text-decoration:none;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.navlinks{display:flex;align-items:center;gap:28px;font-weight:500;font-size:15px}
.navlinks a{color:var(--muted);text-decoration:none}
.navlinks a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:'Fredoka';font-weight:700;border:0;border-radius:12px;cursor:pointer;
  padding:13px 22px;font-size:16px;text-decoration:none;transition:transform .12s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:linear-gradient(180deg,#ffe07a,var(--gold));color:#241a05;
  box-shadow:0 10px 30px -8px #ffd24a66, 0 0 0 1px #ffffff22 inset}
.btn-gold:hover{box-shadow:0 14px 40px -8px #ffd24a88, 0 0 0 1px #ffffff33 inset}
.btn-ghost{background:#ffffff0d;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:#ffffff16}
@media(max-width:760px){.navlinks a:not(.navcta){display:none}}

/* ---- breadcrumbs ---- */
.crumbs{font-size:13.5px;color:var(--faint);padding:18px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.crumbs [aria-current]{color:var(--ink)}

/* ---- generic sections ---- */
section{padding:clamp(56px,8vw,96px) 0}
.band{background:#ffffff05;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sechead{text-align:center;max-width:60ch;margin:0 auto 44px}
.sechead h2{font-family:'Fredoka';font-weight:700;font-size:clamp(28px,4.2vw,44px);line-height:1.08;margin-top:12px}
.sechead p{color:var(--muted);margin:14px 0 0}

/* ---- hero (shared) ---- */
header{padding:clamp(48px,8vw,96px) 0 40px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:40px}}
h1{font-family:'Fredoka';font-weight:700;font-size:clamp(38px,6.2vw,70px);line-height:1.04;
  letter-spacing:-.01em;margin:14px 0 0}
h1 .glow{color:#fff;text-shadow:0 0 8px #fff6,0 0 26px var(--magenta),0 0 54px #ff3d8b88}
h1 .g2{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--muted);font-size:clamp(17px,2.1vw,20px);margin:22px 0 0;max-width:52ch}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.reassure{margin-top:16px;color:var(--faint);font-size:14px}

/* host card */
.hostcard{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:22px;padding:26px;box-shadow:0 40px 90px -40px #000, 0 0 0 1px #ffffff08 inset;position:relative;overflow:hidden}
.hostcard::before{content:"";position:absolute;inset:0;background:
  radial-gradient(400px 200px at 80% 0%, #ff3d8b22, transparent 70%);pointer-events:none}
.tvchip{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:13px;font-weight:600;letter-spacing:.04em}
.dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.mic{font-size:26px;line-height:1}
.hostlabel{font-family:'Fredoka';font-weight:700;color:var(--gold);font-size:13px;letter-spacing:.16em;text-transform:uppercase;margin:20px 0 8px}
.hostline{font-family:'Fredoka';font-weight:600;font-size:clamp(20px,2.6vw,26px);line-height:1.28;min-height:2.6em;transition:opacity .4s ease}
.wave{display:flex;gap:4px;align-items:flex-end;height:22px;margin-top:18px}
.wave i{width:4px;background:var(--grad);border-radius:2px;animation:eq 1.1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.15s}.wave i:nth-child(3){animation-delay:.3s}
.wave i:nth-child(4){animation-delay:.45s}.wave i:nth-child(5){animation-delay:.6s}
.wave i:nth-child(6){animation-delay:.75s}.wave i:nth-child(7){animation-delay:.9s}
@keyframes eq{0%,100%{height:6px}50%{height:22px}}
@media (prefers-reduced-motion:reduce){.wave i{animation:none;height:14px}}

/* ---- trust strip ---- */
.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#ffffff06}
.strip .wrap{display:flex;flex-wrap:wrap;gap:8px 34px;justify-content:center;padding:18px 24px;
  color:var(--muted);font-weight:600;font-size:14.5px}
.strip b{color:var(--ink);font-weight:700}
.strip span{display:inline-flex;align-items:center;gap:9px}
.strip .tick{color:var(--gold)}

/* ---- games grid ---- */
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:860px){.games{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.games{grid-template-columns:1fr}}
.game{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:22px;overflow:hidden;
  display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
  transition:border-color .2s ease, transform .12s ease, box-shadow .2s ease}
.game:hover{transform:translateY(-3px);border-color:var(--gcol,#ff3d8b66);box-shadow:0 24px 50px -30px #000}
.shot{margin:-22px -22px 14px;height:134px;overflow:hidden;border-bottom:1px solid var(--line);background:#0c0a16;display:flex;align-items:center;justify-content:center;font-size:46px;
  background:radial-gradient(130% 130% at 50% 8%, color-mix(in srgb,var(--gcol) 26%, transparent), #0c0a16 70%)}
.game h3{font-family:'Fredoka';font-weight:700;font-size:20px}
.game p{color:var(--muted);font-size:14.5px;margin:0;flex:1}
.tag{align-self:flex-start;font-family:'Fredoka';font-weight:700;font-size:12px;letter-spacing:.03em;
  padding:4px 10px;border-radius:999px;margin-top:6px}
.tag.paid{color:#241a05;background:linear-gradient(180deg,#ffe07a,var(--gold))}
.tag.free{color:var(--green);background:#37d67a1e;border:1px solid #37d67a44}
.gcap{grid-column:1/-1;text-align:center;color:var(--faint);font-size:14px;margin-top:6px}

/* ---- steps ---- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:step}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;position:relative}
.step .n{counter-increment:step;font-family:'Fredoka';font-weight:700;font-size:15px;color:#241a05;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#ffe07a,var(--gold))}
.step .n::before{content:counter(step)}
.step h3{font-family:'Fredoka';font-weight:700;font-size:19px;margin:16px 0 6px}
.step p{color:var(--muted);font-size:15px;margin:0}

/* ---- feature grid ---- */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.why{grid-template-columns:1fr}}
.feat{display:flex;gap:14px;background:#ffffff06;border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.feat .fi{font-size:22px;line-height:1.3}
.feat h3{font-family:'Fredoka';font-weight:700;font-size:16.5px;margin:0 0 3px}
.feat p{color:var(--muted);font-size:14.5px;margin:0}

/* ---- split feature rows (landing pages) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;margin:0 0 26px}
.split.rev .media{order:2}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:22px}.split.rev .media{order:0}}
.split h3{font-family:'Fredoka';font-weight:700;font-size:clamp(22px,3vw,30px);margin:0 0 10px}
.split p{color:var(--muted);margin:0}
.media{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:18px;min-height:210px;display:flex;align-items:center;justify-content:center;
  font-size:64px;box-shadow:0 30px 70px -45px #000;overflow:hidden}

/* ---- pricing ---- */
.price{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:860px;margin:0 auto}
@media(max-width:720px){.price{grid-template-columns:1fr}}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;text-align:center}
.pcard.feature{border-color:#ffd24a55;box-shadow:0 0 0 1px #ffd24a33, 0 30px 60px -40px #ffd24a55}
.pcard .pg{font-family:'Fredoka';font-weight:700;font-size:19px}
.pcard .amt{font-family:'Fredoka';font-weight:700;font-size:40px;margin:10px 0 2px}
.pcard .amt span{font-size:16px;color:var(--faint);font-weight:600}
.pcard .pnote{color:var(--muted);font-size:14px;min-height:2.6em;margin-bottom:16px}
.pmeta{text-align:center;color:var(--muted);margin:26px auto 0;max-width:64ch}
.pmeta b{color:var(--ink)}

/* discount explainer + worked examples */
.calc{max-width:760px;margin:0 auto}
.rule{display:flex;gap:16px;align-items:flex-start;background:#ffffff06;border:1px solid var(--line);
  border-radius:16px;padding:22px 24px;margin:0 0 22px}
.rule .big{font-family:'Fredoka';font-weight:700;font-size:30px;color:var(--gold);line-height:1}
.rule h3{font-family:'Fredoka';font-weight:700;font-size:18px;margin:0 0 4px}
.rule p{color:var(--muted);margin:0;font-size:15px}
.examples{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:680px){.examples{grid-template-columns:1fr}}
.ex{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.ex h4{font-family:'Fredoka';font-weight:700;font-size:16px;margin:0 0 12px}
.ex table{width:100%;border-collapse:collapse;font-size:14.5px}
.ex td{padding:5px 0;color:var(--muted)}
.ex td.amt{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ex td.off{color:var(--green)}
.ex .tot{border-top:1px solid var(--line)}
.ex .tot td{padding-top:12px;font-family:'Fredoka';font-weight:700;color:var(--ink);font-size:16px}

/* ---- FAQ ---- */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:2px 20px}
.faq summary{font-family:'Fredoka';font-weight:600;font-size:17px;cursor:pointer;padding:18px 0;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold);font-size:22px;font-family:'Fredoka'}
.faq details[open] summary::after{content:"\2013"}
.faq p{color:var(--muted);margin:0 0 18px;font-size:15.5px}

/* ---- final cta ---- */
.final{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--line);
  border-radius:26px;padding:clamp(36px,6vw,64px) 28px;text-align:center;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 0%, #ff3d8b22, transparent 70%)}
.final h2{font-family:'Fredoka';font-weight:700;font-size:clamp(28px,4.6vw,46px);position:relative}
.final p{color:var(--muted);margin:14px auto 26px;max-width:48ch;position:relative}
.final .cta-row{justify-content:center;position:relative}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);padding:52px 0 40px;color:var(--muted);font-size:14.5px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:760px){.foot{grid-template-columns:1fr 1fr}}
.foot h4{font-family:'Fredoka';font-weight:700;color:var(--ink);font-size:14px;letter-spacing:.04em;margin:0 0 12px}
.foot a{display:block;color:var(--muted);text-decoration:none;margin:7px 0}
.foot a:hover{color:var(--ink)}
.footbrand .brand{font-size:20px}
.footbrand p{margin:12px 0 0;max-width:32ch;color:var(--faint)}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);color:var(--faint);
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;font-size:13px}