/* ===== POLS landing — shared tokens & components ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#f7f7f8;
  --bg-2:#ecebf0;
  --ink:#141419;
  --ink-soft:#33333c;
  --muted:#6c6c77;
  --line:rgba(20,20,32,.09);
  --card:#ffffff;
  --nav-bg:rgba(247,247,248,.82);
  --chip-bg:#ffffff;
  --badge-bg:#141419;
  --badge-txt:#ffffff;

  --purple:#7b1fe0;
  --purple-deep:#5d10c8;
  --purple-bright:#8d33ea;
  --purple-tint:#f1e9fd;
  --magenta:#b026d9;

  --orange:#f2752c;
  --orange-deep:#e6611a;

  --emerald:#0fa968;
  --emerald-ink:#0a7d4d;
  --emerald-bg:#d8f5e6;

  --gold:#b7791f;
  --gold-bg:#fcefc2;

  --grad-purple:linear-gradient(110deg,#7b1fe0,#b026d9);
  --grad-orange:linear-gradient(110deg,#f2752c,#f0913c);

  --shadow-phone:0 2px 8px rgba(20,16,40,.05) drop;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0d0d12;
    --bg-2:#15151b;
    --ink:#ffffff;
    --ink-soft:#a1a1aa;
    --muted:#71717a;
    --line:rgba(255,255,255,.08);
    --card:#15151b;
    --nav-bg:rgba(13,13,18,.82);
    --chip-bg:#1a1a24;
    --badge-bg:#ffffff;
    --badge-txt:#141419;
  }
}

@keyframes shine {
  0% { transform: translateX(-150%) rotate(45deg); }
  100% { transform: translateX(150%) rotate(45deg); }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--purple);color:#fff}

/* ---- logo wordmark ---- */
.pols-logo{
  font-weight:900;font-size:1.5rem;letter-spacing:-.04em;
  color:var(--purple);line-height:1;display:inline-flex;
}
.pols-logo .lo{text-transform:none}

/* ---- phone screenshots (frame baked into PNG) ---- */
.phone{
  width:100%;height:auto;
  filter:drop-shadow(0 28px 50px rgba(40,18,90,.22)) drop-shadow(0 8px 16px rgba(40,18,90,.10));
}

/* ---- store badges ---- */
.badges{display:flex;flex-wrap:wrap;gap:14px}
.badge{
  display:inline-flex;align-items:center;gap:11px;
  padding:12px 20px 12px 17px;border-radius:14px;
  background:var(--badge-bg);color:var(--badge-txt);cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
  box-shadow:0 6px 18px rgba(20,16,40,.18);
}
.badge:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(20,16,40,.26)}
.badge svg{width:26px;height:26px;flex:none;fill:var(--badge-txt)}
.badge .bt{display:flex;flex-direction:column;line-height:1.05;text-align:left}
.badge .bt small{font-size:.62rem;letter-spacing:.04em;opacity:.8;font-weight:500;text-transform:uppercase}
.badge .bt b{font-size:1.12rem;font-weight:700;letter-spacing:-.01em}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
[data-motion="off"] .reveal{opacity:1;transform:none;transition:none}

/* ---- hero crossfade stack ---- */
.stack{position:relative;aspect-ratio:1408/2974}
.stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s ease}
.stack img.active{opacity:1}
[data-motion="off"] .stack img{transition:none}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}