/* ============================================================
   Polaris Games — landing page styles
   Recreated from the Claude Design prototype "Polaris Games.dc.html"
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #050509;
  font-family: 'Manrope', sans-serif;
}

/* ---------- Keyframes ---------- */
@keyframes pgHalo {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .85; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}
@keyframes pgDrift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes pgPulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(236,126,190,.5); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 16px rgba(236,126,190,0); }
}

/* ---------- Instagram embed frame ---------- */
.pg-ig-frame .instagram-media {
  margin: 0 !important;
  border-radius: 18px !important;
  min-width: 0 !important;
}

/* ---------- Links ---------- */
.pg-link { transition: color .15s; text-decoration: none; }
.pg-link:hover { color: var(--ink) !important; }

/* ---------- Theme-swapped footer logo ---------- */
[data-theme="light"] .pg-fit-dark  { display: none !important; }
[data-theme="dark"]  .pg-fit-light { display: none !important; }

/* ============================================================
   Theme tokens
   ============================================================ */
[data-theme="dark"] {
  --bg: #050509; --surf-section: #10111A; --surf-part: #08080e;
  --ink: #ffffff; --ink-soft: #C9C7D3; --ink-mute: #8E8A9D; --ink-faint: #54506a;
  --card: rgba(23,24,36,0.78); --card-2: rgba(23,24,36,0.6); --card-faq: rgba(23,24,36,0.72);
  --border: rgba(255,255,255,0.08); --border-strong: rgba(255,255,255,0.12); --border-soft: rgba(255,255,255,0.07); --border-pill: rgba(255,255,255,0.14);
  --field: rgba(255,255,255,0.06); --option-bg: #171824; --nav-bg: rgba(5,5,9,0.72); --ig-frame-bg: #0a0a12;
  --signal: linear-gradient(135deg,#FF7A3D 0%,#FF6B70 35%,#EC7EBE 65%,#8B5CF6 100%);
  --signal-text: linear-gradient(135deg,#FF7A3D,#EC7EBE 60%,#8B5CF6);
  --ig-border: linear-gradient(160deg,rgba(255,122,61,.5),rgba(139,92,246,.5));
  --cta-bg: linear-gradient(135deg,#FF7A3D 0%,#FF6B70 35%,#EC7EBE 65%,#8B5CF6 100%); --cta-color: #fff;
  --cta-shadow: 0 0 44px rgba(236,126,190,.34); --cta-shadow-sm: 0 0 30px rgba(236,126,190,.3);
  --card-shadow: 0 24px 60px rgba(0,0,0,.4); --cell-shadow: none; --benefit-shadow: none; --faq-shadow: none;
  --outline-btn-border: rgba(255,255,255,0.22); --outline-btn-hover: rgba(255,255,255,0.08);
  --star-eyebrow: #ffffff; --accent: #E8F666; --accent-pill-bg: rgba(232,246,102,0.08); --accent-pill-border: rgba(232,246,102,0.3);
  --part-accent: #FF7A3D; --part-pill-bg: rgba(255,122,61,0.10); --part-pill-border: rgba(255,122,61,0.32);
  --faq-mark: #EC7EBE; --noise-op: .05; --glow-op: 1;
  --hero-g1: rgba(139,92,246,.32); --hero-g2: rgba(255,122,61,.15);
  --wl-g1: rgba(139,92,246,.28); --wl-g2: rgba(255,122,61,.13);
  --part-g1: rgba(255,122,61,.16); --part-g2: rgba(139,92,246,.22);
  --faq-g1: rgba(139,92,246,.20); --faq-g2: rgba(255,122,61,.10);
  --halo: rgba(236,126,190,.28); --halo-2: rgba(139,92,246,.10);
  --focus-border: #8B5CF6; --focus-ring: 0 0 0 4px rgba(139,92,246,.18);
  --pill-glass-bg: rgba(5,5,9,.75); --pill-glass-border: rgba(255,255,255,.1);
  --err: #FF6B70;
}
[data-theme="light"] {
  --bg: #F2F2F2; --surf-section: #ffffff; --surf-part: #F2F2F2;
  --ink: #111111; --ink-soft: #444444; --ink-mute: #8a8a8a; --ink-faint: #a0a0a0;
  --card: #ffffff; --card-2: #ffffff; --card-faq: #ffffff;
  --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.14); --border-soft: rgba(0,0,0,0.08); --border-pill: rgba(0,0,0,0.16);
  --field: #ffffff; --option-bg: #ffffff; --nav-bg: rgba(255,255,255,0.82); --ig-frame-bg: #ffffff;
  --signal: linear-gradient(135deg,#FF9A00 0%,#FF2DA1 52%,#6A00FF 100%);
  --signal-text: linear-gradient(135deg,#FF9A00,#FF2DA1 52%,#6A00FF);
  --ig-border: linear-gradient(160deg,#FF9A00,#FF2DA1 50%,#6A00FF);
  --cta-bg: #111111; --cta-color: #fff;
  --cta-shadow: 0 8px 24px rgba(0,0,0,.14); --cta-shadow-sm: 0 6px 18px rgba(0,0,0,.12);
  --card-shadow: 0 24px 60px rgba(0,0,0,.08); --cell-shadow: 0 6px 20px rgba(0,0,0,.05); --benefit-shadow: 0 6px 20px rgba(0,0,0,.04); --faq-shadow: 0 4px 16px rgba(0,0,0,.04);
  --outline-btn-border: rgba(17,17,17,0.2); --outline-btn-hover: rgba(17,17,17,0.05);
  --star-eyebrow: #111111; --accent: #111111; --accent-pill-bg: rgba(17,17,17,0.05); --accent-pill-border: rgba(17,17,17,0.14);
  --part-accent: #B85C00; --part-pill-bg: rgba(255,154,0,0.12); --part-pill-border: rgba(255,154,0,0.4);
  --faq-mark: #111111; --noise-op: 0; --glow-op: 0;
  --hero-g1: rgba(177,0,255,.10); --hero-g2: rgba(255,154,0,.10);
  --wl-g1: rgba(177,0,255,.0); --wl-g2: rgba(255,154,0,.0);
  --part-g1: rgba(255,154,0,.10); --part-g2: rgba(177,0,255,.10);
  --faq-g1: rgba(177,0,255,.0); --faq-g2: rgba(255,154,0,.0);
  --halo: rgba(255,45,161,.18); --halo-2: rgba(106,0,255,.08);
  --focus-border: #111111; --focus-ring: 0 0 0 4px rgba(17,17,17,.08);
  --pill-glass-bg: rgba(255,255,255,.9); --pill-glass-border: rgba(0,0,0,.08);
  --err: #E0245E;
}

/* ============================================================
   Interaction states
   (the prototype expressed these via style-hover / style-focus
    attributes handled by its runtime — recreated here as CSS)
   ============================================================ */
.pg-theme-toggle { transition: color .15s, border-color .15s; }
.pg-theme-toggle:hover { color: var(--ink); border-color: var(--ink); }

.pg-cta-sm  { transition: transform .18s, box-shadow .18s; }
.pg-cta-sm:hover { transform: scale(1.04); box-shadow: var(--cta-shadow); }

.pg-cta-hero { transition: transform .18s, box-shadow .18s; }
.pg-cta-hero:hover { transform: scale(1.03); }

.pg-outline { transition: background .18s; }
.pg-outline:hover { background: var(--outline-btn-hover); }

.pg-submit { transition: transform .18s, box-shadow .18s; }
.pg-submit:hover { transform: scale(1.02); box-shadow: var(--cta-shadow); }

.pg-field { transition: border-color .15s, box-shadow .15s; }
.pg-field:focus { border-color: var(--focus-border); box-shadow: var(--focus-ring); }

.pg-field-part:focus { border-color: var(--part-accent); box-shadow: var(--focus-ring); }

.pg-fitlink { transition: opacity .18s; }
.pg-fitlink:hover { opacity: 1; }

.pg-faq-card { transition: border-color .18s; }

/* ============================================================
   Responsive — the prototype was desktop-grid only; collapse the
   two-column sections so the page is usable on small screens.
   ============================================================ */
@media (max-width: 880px) {
  .pg-grid-2 { grid-template-columns: 1fr !important; gap: 48px !important; }
  .pg-hero-grid { padding-top: 56px !important; padding-bottom: 64px !important; min-height: 0 !important; }
  .pg-nav-links { display: none !important; }
  .pg-hero-media { order: -1; }
  h1.pg-h1 { font-size: 38px !important; }
  .pg-h2 { font-size: 38px !important; }
}
@media (max-width: 520px) {
  .pg-ig-frame { width: 300px !important; height: 533px !important; }
  .pg-form-grid { grid-template-columns: 1fr !important; }
  .pg-logo-hero { height: 160px !important; }
}