/* ============================================================
   Panic Point Games — site design system
   Dark, cinematic horror-studio theme
   ============================================================ */
:root{
  --bg:#06070a;
  --bg-2:#0a0c12;
  --panel:#0f121a;
  --panel-2:#141826;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#e9ebf0;
  --muted:#9aa1ae;
  --faint:#5f6672;
  --blood:#c1121f;
  --blood-bright:#ff2b3d;
  --blood-glow:rgba(193,18,31,.45);
  --frost:#59c9ff;
  --frost-dim:#2a7fa8;
  --ok:#46d17f;
  --gold:#e5b567;
  --maxw:1160px;
  --radius:14px;
  --shadow:0 24px 60px -20px rgba(0,0,0,.75);
  --ff-display:"Anton","Oswald","Arial Narrow",system-ui,sans-serif;
  --ff-head:"Oswald",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--ff-body);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- background texture ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 500px at 78% -8%,rgba(193,18,31,.18),transparent 60%),
    radial-gradient(760px 520px at 12% 4%,rgba(41,127,168,.12),transparent 62%),
    linear-gradient(180deg,#06070a 0%,#080a10 40%,#06070a 100%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.5) 0.5px,transparent 0.5px);
  background-size:3px 3px;
}
/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.section{padding:88px 0}
.section-sm{padding:56px 0}
.center{text-align:center}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row-mid{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:16px}
.stack{display:flex;flex-direction:column;gap:14px}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
/* ---------- typography ---------- */
.eyebrow{font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.32em;
  font-size:12px;font-weight:600;color:var(--blood-bright)}
.eyebrow.frost{color:var(--frost)}
h1,h2,h3,h4{font-family:var(--ff-display);font-weight:400;line-height:1.02;
  letter-spacing:.01em;margin:.15em 0 .35em}
h1{font-size:clamp(42px,7vw,86px);text-transform:uppercase}
h2{font-size:clamp(30px,4.4vw,54px);text-transform:uppercase}
h3{font-size:clamp(20px,2.4vw,26px);font-family:var(--ff-head);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:60ch}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.09em;
  font-weight:600;font-size:14px;padding:13px 24px;border-radius:10px;
  border:1px solid transparent;transition:.18s ease;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--blood);color:#fff;border-color:var(--blood-bright);
  box-shadow:0 0 0 0 var(--blood-glow)}
.btn-primary:hover{background:var(--blood-bright);box-shadow:0 12px 34px -8px var(--blood-glow)}
.btn-frost{background:transparent;color:var(--frost);border-color:rgba(89,201,255,.5)}
.btn-frost:hover{background:rgba(89,201,255,.12);border-color:var(--frost)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.09);border-color:var(--text)}
.btn-lg{padding:16px 30px;font-size:15px}
.btn-block{width:100%;justify-content:center}
/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:50;
  background:rgba(6,7,10,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;
  height:70px;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--ff-head);
  text-transform:uppercase;letter-spacing:.05em;font-size:16px;font-weight:700}
.brand .mark{width:42px;height:42px;border-radius:9px;flex:0 0 auto;
  display:grid;place-items:center;overflow:hidden}
.brand .mark img{width:100%;height:100%;object-fit:contain;display:block}
.brand .wm{color:#fff;white-space:nowrap}
.brand .wm .gm{color:var(--blood-bright)}
.nav-links{display:flex;gap:6px;align-items:center}
.nav-links a{font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.06em;
  font-size:13.5px;color:var(--muted);padding:9px 12px;border-radius:8px;transition:.15s}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-links a.active{color:#fff}
.nav-links a.active::after{content:"";display:block;height:2px;margin-top:5px;border-radius:2px;
  background:var(--blood-bright);box-shadow:0 0 10px var(--blood-glow)}
.nav-cta{display:flex;gap:10px;align-items:center}
.hamb{display:none;background:none;border:1px solid var(--line-2);border-radius:9px;
  width:44px;height:40px;cursor:pointer;color:#fff;font-size:20px}

/* ---------- cards / panels ---------- */
.card{background:linear-gradient(180deg,var(--panel),#0b0e15);
  border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  transition:.2s ease;position:relative;overflow:hidden}
.card:hover{border-color:var(--line-2);transform:translateY(-3px)}
.card .ico{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;
  background:rgba(193,18,31,.12);border:1px solid rgba(193,18,31,.3);margin-bottom:14px}
.card.frost .ico{background:rgba(89,201,255,.1);border-color:rgba(89,201,255,.3)}
.card .ico svg{width:24px;height:24px}
.card h3{margin-top:0}
.card p{color:var(--muted);margin:0}
.panel{background:linear-gradient(180deg,var(--panel-2),#0b0e15);
  border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-head);
  text-transform:uppercase;letter-spacing:.1em;font-size:11px;font-weight:600;
  padding:6px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.badge.red{color:var(--blood-bright);border-color:rgba(193,18,31,.4);background:rgba(193,18,31,.08)}
.badge.frost{color:var(--frost);border-color:rgba(89,201,255,.4);background:rgba(89,201,255,.07)}
.badge.ok{color:var(--ok);border-color:rgba(70,209,127,.4);background:rgba(70,209,127,.08)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 8px currentColor}
/* ---------- hero ---------- */
.hero{position:relative;padding:96px 0 82px;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:-1}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.28;
  filter:grayscale(.15) contrast(1.05)}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,7,10,.6),rgba(6,7,10,.86) 70%,var(--bg))}
.hero h1{max-width:16ch}
.hero .lead{font-size:clamp(18px,2.2vw,22px);max-width:56ch}
/* ---------- media frame ---------- */
.frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#0b0e15;box-shadow:var(--shadow);position:relative}
.frame img{width:100%;height:100%;object-fit:cover}
.frame.tall{aspect-ratio:3/4}
.frame.wide{aspect-ratio:16/9}
.ratio{aspect-ratio:16/9}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat{background:linear-gradient(180deg,var(--panel),#0b0e15);border:1px solid var(--line);
  border-radius:var(--radius);padding:26px 22px;text-align:center}
.stat .num{font-family:var(--ff-display);font-size:clamp(40px,6vw,64px);color:#fff;line-height:1}
.stat .num span{color:var(--blood-bright)}
.stat .lbl{font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.12em;
  font-size:12px;color:var(--muted);margin-top:8px}
/* ---------- checklist ---------- */
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ticks li{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.ticks li b{color:var(--text);font-weight:600}
.ticks .tk{flex:0 0 auto;width:22px;height:22px;border-radius:6px;margin-top:2px;
  display:grid;place-items:center;background:rgba(70,209,127,.12);
  border:1px solid rgba(70,209,127,.35);color:var(--ok);font-size:12px}
.ticks.red .tk{background:rgba(193,18,31,.12);border-color:rgba(193,18,31,.35);color:var(--blood-bright)}
/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split.rev>*:first-child{order:2}
/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:#080a0f;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px;padding:56px 0 30px}
.foot-grid h4{font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.12em;
  font-size:13px;color:#fff;margin:0 0 14px}
.foot-grid a{display:block;color:var(--muted);padding:5px 0;font-size:14.5px}
.foot-grid a:hover{color:#fff}
/* The statutory company disclosure. Smaller and dimmer than the copyright line above it: it has
   to be there and legible, but it is not something anybody came to the site to read. */
.legalbits{display:block;margin-top:6px;font-size:11.5px;line-height:1.5;max-width:70ch;opacity:.85}
.foot-bar{border-top:1px solid var(--line);padding:20px 0;display:flex;
  justify-content:space-between;gap:14px;flex-wrap:wrap;color:var(--faint);font-size:13px}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;color:var(--muted)}
.field label .req{color:var(--blood-bright)}
.input,.textarea,select.input{width:100%;background:#080a10;border:1px solid var(--line-2);
  color:var(--text);border-radius:10px;padding:13px 14px;font:inherit;font-size:15px;transition:.15s}
.input:focus,.textarea:focus,select.input:focus{outline:none;border-color:var(--blood);
  box-shadow:0 0 0 3px rgba(193,18,31,.16)}
.textarea{min-height:140px;resize:vertical}
.check{display:flex;gap:11px;align-items:flex-start;color:var(--muted);font-size:14px}
.check input{margin-top:4px;accent-color:var(--blood)}
.form-note{font-size:13px;color:var(--faint);margin-top:6px}
.form-ok{display:none;padding:14px 16px;border-radius:10px;margin-top:8px;
  background:rgba(70,209,127,.1);border:1px solid rgba(70,209,127,.4);color:#bff3d3}
.form-ok.show{display:block}
/* ---------- timeline ---------- */
.timeline{position:relative;padding-left:26px;display:grid;gap:26px}
.timeline::before{content:"";position:absolute;left:6px;top:4px;bottom:4px;width:2px;
  background:linear-gradient(180deg,var(--blood),transparent)}
.tl{position:relative}
.tl::before{content:"";position:absolute;left:-26px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--blood);box-shadow:0 0 0 4px rgba(193,18,31,.18)}
.tl .yr{font-family:var(--ff-head);letter-spacing:.1em;color:var(--blood-bright);
  text-transform:uppercase;font-size:13px;font-weight:600}
.tl h3{margin:.1em 0 .25em}
.tl p{color:var(--muted);margin:0}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.08em;font-size:11px;
  padding:5px 11px;border-radius:7px;border:1px solid var(--line-2);color:var(--muted)}
.hr{height:1px;background:var(--line);border:0;margin:0}
.glow-red{text-shadow:0 0 24px var(--blood-glow)}
.txt-frost{color:var(--frost)}.txt-red{color:var(--blood-bright)}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:20px;padding:56px 44px;
  border:1px solid rgba(193,18,31,.35);
  background:radial-gradient(700px 300px at 80% 10%,rgba(193,18,31,.22),transparent 60%),linear-gradient(180deg,#12141c,#0a0c12)}
.cta-band.frost{border-color:rgba(89,201,255,.32);
  background:radial-gradient(700px 300px at 80% 10%,rgba(89,201,255,.16),transparent 60%),linear-gradient(180deg,#0f1620,#0a0c12)}
.section-label{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.section-label .ln{flex:1;height:1px;background:var(--line)}
/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* ---------- responsive ---------- */
@media (max-width:960px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:30px}
  .split.rev>*:first-child{order:0}
}
@media (max-width:760px){
  .nav-links,.nav-cta .btn{display:none}
  .hamb{display:grid;place-items:center}
  .nav-links.open{display:flex;position:absolute;top:70px;left:0;right:0;flex-direction:column;
    gap:2px;padding:14px 18px 20px;background:rgba(8,10,15,.98);border-bottom:1px solid var(--line)}
  .nav-links.open a{padding:12px 10px;font-size:16px;width:100%}
  .section{padding:60px 0}
  .g-2,.g-3,.g-4,.stats{grid-template-columns:1fr}
  .cta-band{padding:38px 24px}
  .foot-grid{grid-template-columns:1fr}
}
@media (min-width:761px){.nav-links{display:flex!important}}

/* ---------- media helpers + missing-image fallback ---------- */
.media-fill{position:relative;overflow:hidden;background:#0b0e15}
.img-missing{display:grid;place-items:center;
  background:repeating-linear-gradient(45deg,#0c0f16,#0c0f16 12px,#0e131c 12px,#0e131c 24px)}
.img-ph{font-family:var(--ff-head);text-transform:uppercase;letter-spacing:.12em;font-size:12px;
  color:var(--faint);padding:14px;text-align:center}
.video-frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:#000;box-shadow:var(--shadow)}
.video-frame video{width:100%;display:block;aspect-ratio:16/9;background:#000;object-fit:cover}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gal .frame{aspect-ratio:1/1}
.gal .frame.span2{grid-column:span 2;aspect-ratio:2/1}
@media (max-width:760px){.gal{grid-template-columns:repeat(2,1fr)}.gal .frame.span2{grid-column:span 2}}
.logo-strip{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.partner{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--line-2);
  border-radius:10px;background:rgba(255,255,255,.03);font-family:var(--ff-head);
  text-transform:uppercase;letter-spacing:.08em;font-size:13px}

/* ---------- social icons ---------- */
.social{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.foot-grid .social .soc,.social .soc{width:40px;height:40px;padding:0;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--line-2);background:rgba(255,255,255,.03);
  color:var(--muted);transition:.16s ease}
.social .soc svg{width:19px;height:19px;display:block;fill:currentColor}
.social .soc:hover{color:#fff;border-color:var(--text);background:rgba(255,255,255,.08);transform:translateY(-2px)}
.social .soc:active{transform:translateY(0)}

/* ---------- card equal-height helper ---------- */
.grid>.card{height:100%}
.brand .mark img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

.form-err{display:none;padding:14px 16px;border-radius:10px;margin-top:12px;
  background:rgba(214,40,40,.12);border:1px solid rgba(214,40,40,.45);color:#ffd9d9}
.form-err.show{display:block}