/* ============================================================
   ROYAL MATCH DESKTOP — SHARED STYLES
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --night:      #101d52;
  --night-deep: #0a1440;
  --royal:      #2743a6;
  --gold:       #f5b333;
  --gold-light: #ffd873;
  --gold-deep:  #c98a12;
  --cream:      #fff7e8;
  --paper:      #ffffff;
  --ink:        #1b2350;
  --ink-soft:   #59618f;
  --ruby:       #e8474f;
  --emerald:    #3ec96f;
  --amethyst:   #9b5de5;
  --sky:        #3fb6f2;

  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --shadow-pop: 0 10px 30px rgba(10, 20, 64, .18);
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
  --header-h: 64px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg{ display:block; max-width:100%; }
a{ color:inherit; }

.wrap{ width:min(1120px, calc(100% - 40px)); margin-inline:auto; }

.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(16,29,82,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.site-header .wrap{
  display:flex; align-items:center; gap:24px;
  min-height: var(--header-h);
}
.logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none; color:#fff;
  font-family: var(--font-display); font-weight:600; font-size:1.2rem;
  letter-spacing:.01em;
}
.logo svg{ width:32px; height:32px; flex:none; }

.main-nav{ display:flex; gap:24px; margin-left:auto; align-items:center; }
.main-nav a{
  color:#cdd6ff; text-decoration:none; font-weight:700; font-size:.95rem;
  transition: color .15s;
}
.main-nav a:hover, .main-nav a:focus-visible{ color:#fff; }
.main-nav a[aria-current="page"]{ color:#fff; }
.main-nav a[aria-current="page"]::after{
  content:""; display:block; height:3px; border-radius:3px;
  background: var(--gold); margin-top:2px;
}

.header-cta{
  font-family: var(--font-display); font-weight:600; font-size:.95rem;
  color: var(--night); text-decoration:none;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  padding: 9px 20px; border-radius: 999px;
  box-shadow: 0 3px 0 var(--gold-deep);
  transition: transform .12s;
  white-space:nowrap;
}
.header-cta:hover{ transform: translateY(-2px); }
.header-cta:active{ transform: translateY(1px); box-shadow: 0 1px 0 var(--gold-deep); }

/* --- Burger (mobile) --- */
.burger{
  display:none;
  margin-left:auto;
  width:44px; height:44px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; align-items:center; gap:5px;
  border-radius: 10px;
}
.burger span{
  display:block; width:22px; height:2.5px; border-radius:2px;
  background:#fff; transition: transform .2s, opacity .2s;
}
.burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7.5px) rotate(-45deg); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-download{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  font-family: var(--font-display); font-weight:600; font-size:1.15rem;
  color: var(--night); text-decoration:none; text-align:center;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 55%, #eda51f 100%);
  padding: 16px 32px; border-radius: 999px;
  box-shadow: 0 5px 0 var(--gold-deep), 0 16px 34px rgba(245,179,51,.35);
  transition: transform .12s, box-shadow .12s;
}
.btn-download svg{ width:24px; height:24px; flex:none; }
.btn-download:hover{ transform: translateY(-3px); box-shadow: 0 8px 0 var(--gold-deep), 0 20px 40px rgba(245,179,51,.4); }
.btn-download:active{ transform: translateY(2px); box-shadow: 0 2px 0 var(--gold-deep), 0 10px 24px rgba(245,179,51,.3); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-display); font-weight:600; font-size:1rem;
  color:#fff; text-decoration:none;
  border: 2px solid rgba(255,255,255,.35);
  padding: 13px 26px; border-radius: 999px;
  transition: border-color .15s, background .15s;
}
.btn-ghost:hover{ border-color:#fff; background: rgba(255,255,255,.06); }

.cta-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.cta-note{ color:#9aa7e6; font-size:.9rem; font-weight:600; line-height:1.45; }

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative;
  background:
    radial-gradient(1200px 600px at 75% -10%, #2c47ab 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 110%, #1c2f80 0%, transparent 55%),
    var(--night);
  color:#fff;
  padding: 72px 0 0;
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(2px 2px at 12% 22%, rgba(255,255,255,.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 28% 64%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 18%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 42%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(2px 2px at 82% 12%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 91% 55%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 7% 78%, rgba(255,255,255,.4) 50%, transparent 51%);
  pointer-events:none;
}
.hero .wrap{
  position:relative;
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 48px;
  align-items:center;
  padding-bottom: 56px;
}

.new-badge{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(245,179,51,.14);
  border: 1px solid rgba(245,179,51,.45);
  color: var(--gold-light);
  font-weight:800; font-size:.85rem; letter-spacing:.04em;
  padding: 7px 16px; border-radius: 999px;
  margin-bottom: 22px;
}
.new-badge .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--gold);
  animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(245,179,51,.55); }
  70%{ box-shadow: 0 0 0 9px rgba(245,179,51,0); }
  100%{ box-shadow: 0 0 0 0 rgba(245,179,51,0); }
}

.hero h1{
  font-family: var(--font-display);
  font-weight:700;
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  margin-bottom: 18px;
}
.hero h1 .gold{
  background: linear-gradient(180deg, #ffe6a3, var(--gold));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lead{
  color:#c9d3ff; font-size: 1.1rem; max-width: 46ch;
  margin-bottom: 30px;
}

/* Mobile-only hint under the hero CTA */
.mobile-hint{
  display:none;
  margin-top: 14px;
  color:#9aa7e6; font-size:.9rem; font-weight:600;
}
.mobile-hint a{ color: var(--gold-light); }

/* ---------- Hero board ---------- */
.hero-board{ position:relative; justify-self:center; transform: rotate(2.5deg); }
.window-frame{
  background: #17246b;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: 0 30px 70px rgba(4,10,38,.55);
}
.window-bar{ display:flex; gap:7px; padding: 2px 6px 12px; }
.window-bar i{ width:11px; height:11px; border-radius:50%; background:#3a4a9e; }
.window-bar i:first-child{ background: var(--ruby); }
.window-bar i:nth-child(2){ background: var(--gold); }
.window-bar i:nth-child(3){ background: var(--emerald); }

.board{
  --cell: 62px;
  display:grid;
  grid-template-columns: repeat(5, var(--cell));
  grid-auto-rows: var(--cell);
  gap: 8px;
  background: linear-gradient(180deg, #0d1745, #0a1237);
  padding: 12px;
  border-radius: var(--radius-md);
}
.tile{
  border-radius: 14px;
  display:grid; place-items:center;
  position:relative;
  transition: transform .25s ease, opacity .25s ease;
}
.tile::after{
  content:""; position:absolute; inset: 8% 12% 55% 12%;
  border-radius: 10px 10px 40% 40%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.tile.ruby    { background: linear-gradient(180deg,#ff7a80,var(--ruby) 60%,#c2323a); }
.tile.emerald { background: linear-gradient(180deg,#7ce8a4,var(--emerald) 60%,#2a9e53); }
.tile.amethyst{ background: linear-gradient(180deg,#c39bf2,var(--amethyst) 60%,#7a3fc4); }
.tile.sky     { background: linear-gradient(180deg,#8cd8fb,var(--sky) 60%,#2b8fc7); }
.tile.gold    { background: linear-gradient(180deg,#ffe08a,var(--gold) 60%,#d3941a); }
.tile.crown-tile{
  background: linear-gradient(180deg,#3450bf,#22398f);
  border: 2px solid rgba(255,216,115,.7);
}
.tile.crown-tile svg{ width:60%; height:60%; }
.tile.popping{ animation: pop .55s ease forwards; }
@keyframes pop{
  0%{ transform: scale(1); filter:brightness(1); }
  35%{ transform: scale(1.18); filter:brightness(1.6); }
  100%{ transform: scale(0); opacity:0; }
}
.tile.dropping{ animation: drop .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes drop{
  from{ transform: translateY(-90px); opacity:0; }
  to{ transform: translateY(0); opacity:1; }
}
.board-caption{
  margin-top: 16px; text-align:center;
  color:#9aa7e6; font-size:.85rem; font-weight:700; letter-spacing:.05em;
  text-transform: uppercase;
}

/* ---------- Trust bar ---------- */
.trust-bar{
  position:relative;
  border-top: 1px solid rgba(255,255,255,.1);
  background: rgba(10,20,64,.45);
}
.trust-bar .wrap{
  display:grid; grid-template-columns: repeat(4,1fr);
  padding: 22px 0;
}
.trust-item{
  text-align:center;
  padding: 4px 12px;
  border-left: 1px solid rgba(255,255,255,.1);
}
.trust-item:first-child{ border-left:0; }
.trust-item strong{
  display:block;
  font-family: var(--font-display); font-weight:700; font-size:1.5rem;
  color: var(--gold-light); line-height:1.2;
}
.trust-item span{ color:#9aa7e6; font-size:.85rem; font-weight:700; }

.hero-wave{ display:block; width:100%; margin-bottom:-1px; }

/* ============================================================
   GENERIC SECTIONS
   ============================================================ */
section{ padding: 84px 0; }
.eyebrow{
  font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  font-size:.8rem; color: var(--gold-deep); margin-bottom: 10px;
}
h2{
  font-family: var(--font-display); font-weight:600;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height:1.15; margin-bottom: 14px;
}
.section-lead{ color: var(--ink-soft); max-width: 58ch; font-size:1.05rem; }

/* ---------- Feature cards ---------- */
.features .grid{
  margin-top: 44px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px;
}
.card{
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  box-shadow: var(--shadow-pop);
  border-top: 5px solid var(--tile, var(--gold));
  transition: transform .18s;
}
.card:hover{ transform: translateY(-6px); }
.card.ruby{ --tile: var(--ruby); }
.card.emerald{ --tile: var(--emerald); }
.card.sky{ --tile: var(--sky); }
.card.gold{ --tile: var(--gold); }
.card .icon{
  width:52px; height:52px; border-radius: 16px;
  display:grid; place-items:center;
  background: color-mix(in srgb, var(--tile) 16%, white);
  margin-bottom: 18px;
}
.card .icon svg{ width:26px; height:26px; stroke: var(--tile); }
.card h3{
  font-family: var(--font-display); font-weight:600; font-size:1.15rem;
  margin-bottom: 8px;
}
.card p{ color: var(--ink-soft); font-size:.95rem; }

/* ---------- Screenshots ---------- */
.shots{ background: var(--paper); }
.shots .grid{
  margin-top: 44px;
  display:grid; grid-template-columns: repeat(3,1fr); gap: 22px;
}
.shot{
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-pop);
  background: var(--night);
  aspect-ratio: 16/10;
  position:relative;
  display:grid; place-items:center;
}
.shot img{ width:100%; height:100%; object-fit:cover; }
/* placeholder look until real screenshots are dropped in */
.shot.placeholder-1{ background: radial-gradient(120% 120% at 20% 0%, #2c47ab, var(--night)); }
.shot.placeholder-2{ background: radial-gradient(120% 120% at 80% 0%, #6a3fc4, var(--night)); }
.shot.placeholder-3{ background: radial-gradient(120% 120% at 50% 110%, #1f7a4d, var(--night)); }
.shot .ph-label{
  color:#9aa7e6; font-weight:800; font-size:.8rem;
  letter-spacing:.08em; text-transform:uppercase;
  border: 1.5px dashed rgba(255,255,255,.3);
  padding: 10px 18px; border-radius: 999px;
}
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 10px 16px;
  background: linear-gradient(0deg, rgba(4,10,38,.85), transparent);
  color:#e6ebff; font-size:.85rem; font-weight:700;
}

/* ---------- Install steps ---------- */
.install{
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(245,179,51,.12), transparent 60%),
    var(--night);
  color:#fff;
}
.install .eyebrow{ color: var(--gold-light); }
.install .section-lead{ color:#c9d3ff; }
.steps{
  margin-top: 48px;
  display:grid; grid-template-columns: repeat(3,1fr); gap: 22px;
  counter-reset: step;
  list-style:none;
}
.step{
  position:relative;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 30px 26px 26px;
}
.step::before{
  counter-increment: step;
  content: counter(step);
  position:absolute; top:-20px; left:24px;
  width:42px; height:42px; border-radius: 50%;
  display:grid; place-items:center;
  font-family: var(--font-display); font-weight:700; font-size:1.1rem;
  color: var(--night);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 3px 0 var(--gold-deep);
}
.step h3{
  font-family: var(--font-display); font-weight:600; font-size:1.15rem;
  margin: 10px 0 8px;
}
.step p{ color:#c9d3ff; font-size:.95rem; }
.install .cta-row{ margin-top: 44px; justify-content:center; }

/* ---------- System requirements ---------- */
.sysreq{
  margin-top: 56px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 30px;
}
.sysreq h3{
  font-family: var(--font-display); font-weight:600; font-size:1.2rem;
  margin-bottom: 18px; color:#fff;
}
.sysreq table{
  width:100%; border-collapse: collapse; font-size:.93rem;
}
.sysreq th, .sysreq td{
  text-align:left; padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  vertical-align: top;
}
.sysreq th{ color: var(--gold-light); font-weight:800; white-space:nowrap; }
.sysreq td{ color:#c9d3ff; }
.sysreq tr:last-child th, .sysreq tr:last-child td{ border-bottom:0; }

/* ---------- FAQ ---------- */
.faq-list{ margin-top: 40px; max-width: 780px; }
.faq-item{
  background: var(--paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  margin-bottom: 14px;
  overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 18px 22px;
  font-family: var(--font-display); font-weight:600; font-size:1.05rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+";
  flex:none;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  font-family: var(--font-body); font-weight:800; font-size:1.2rem;
  color: var(--gold-deep);
  background: color-mix(in srgb, var(--gold) 18%, white);
  transition: transform .2s;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item .faq-body{
  padding: 0 22px 20px;
  color: var(--ink-soft); font-size:.97rem;
}

/* ---------- Mobile stores section ---------- */
.mobile-section .inner{
  display:grid; grid-template-columns: 1fr auto; gap: 40px;
  align-items:center;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 48px 52px;
}
.store-badges{ display:flex; gap:16px; flex-wrap:wrap; }
.store-badge{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  background: var(--night);
  color:#fff;
  border-radius: 14px;
  padding: 10px 20px 10px 16px;
  min-width: 190px;
  transition: transform .12s, background .12s;
}
.store-badge:hover{ transform: translateY(-3px); background: var(--night-deep); }
.store-badge svg{ width:28px; height:28px; flex:none; }
.store-badge .txt small{
  display:block; font-size:.68rem; letter-spacing:.03em;
  color:#aeb9ee; text-transform:uppercase; font-weight:700; line-height:1.2;
}
.store-badge .txt strong{
  font-family: var(--font-display); font-weight:600; font-size:1.1rem; line-height:1.25;
}
.sync-note{
  display:flex; align-items:center; gap:10px;
  margin-top: 22px; color: var(--ink-soft); font-size:.92rem; font-weight:600;
}
.sync-note svg{ width:20px; height:20px; stroke: var(--emerald); flex:none; }

/* ============================================================
   INNER PAGES
   ============================================================ */
.page-hero{
  background:
    radial-gradient(900px 400px at 80% -20%, #2c47ab 0%, transparent 60%),
    var(--night);
  color:#fff;
  padding: 72px 0;
}
.page-hero .eyebrow{ color: var(--gold-light); }
.page-hero h1{
  font-family: var(--font-display); font-weight:700;
  font-size: clamp(2rem, 4vw, 3rem); line-height:1.1;
  margin-bottom: 12px;
}
.page-hero p{ color:#c9d3ff; max-width: 60ch; font-size:1.05rem; }

/* long-form text (legal, guide) */
.prose{ max-width: 760px; }
.prose h2{
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  margin: 44px 0 12px;
}
.prose h2:first-child{ margin-top:0; }
.prose h3{
  font-family: var(--font-display); font-weight:600; font-size:1.15rem;
  margin: 28px 0 8px;
}
.prose p{ margin-bottom: 14px; color: #33396b; }
.prose ul, .prose ol{ margin: 0 0 16px 22px; color:#33396b; }
.prose li{ margin-bottom: 8px; }
.prose li::marker{ color: var(--gold-deep); font-weight:800; }
.prose a{ color: var(--royal); font-weight:700; }
.prose .muted{ color: var(--ink-soft); font-size:.92rem; }

.notice{
  background: color-mix(in srgb, var(--gold) 14%, white);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, white);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  color: #6b5410; font-size:.93rem; font-weight:600;
  margin-bottom: 32px;
}

.updated{ color: var(--ink-soft); font-size:.9rem; margin-bottom: 32px; }

/* ---------- Guide components ---------- */
.guide-grid{
  margin-top: 40px;
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
}
.booster{
  background: var(--paper);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  box-shadow: var(--shadow-pop);
}
.booster .chip{
  width:56px; height:56px; border-radius: 16px;
  display:grid; place-items:center;
  margin-bottom: 16px;
  font-size:1.6rem;
}
.booster.ruby .chip{ background: linear-gradient(180deg,#ff7a80,var(--ruby)); }
.booster.gold .chip{ background: linear-gradient(180deg,#ffe08a,var(--gold)); }
.booster.sky .chip{ background: linear-gradient(180deg,#8cd8fb,var(--sky)); }
.booster.amethyst .chip{ background: linear-gradient(180deg,#c39bf2,var(--amethyst)); }
.booster.emerald .chip{ background: linear-gradient(180deg,#7ce8a4,var(--emerald)); }
.booster h3{
  font-family: var(--font-display); font-weight:600; font-size:1.1rem;
  margin-bottom: 6px;
}
.booster p{ color: var(--ink-soft); font-size:.93rem; }
.booster .how{
  margin-top:12px; padding-top:12px;
  border-top: 1px dashed #e6dcc4;
  font-size:.85rem; font-weight:700; color: var(--gold-deep);
}

.tip-list{ margin-top: 32px; max-width: 780px; }
.tip{
  display:flex; gap:16px; align-items:flex-start;
  background: var(--paper);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop);
  padding: 20px 22px;
  margin-bottom: 14px;
}
.tip .n{
  flex:none;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  font-family: var(--font-display); font-weight:700;
  color: var(--night);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}
.tip h3{
  font-family: var(--font-display); font-weight:600; font-size:1.05rem;
  margin-bottom: 4px;
}
.tip p{ color: var(--ink-soft); font-size:.95rem; }

/* ---------- About page ---------- */
.about-facts{
  margin-top: 40px;
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
}
.fact{
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 26px 24px; text-align:center;
}
.fact strong{
  display:block;
  font-family: var(--font-display); font-weight:700; font-size:1.9rem;
  color: var(--royal);
}
.fact span{ color: var(--ink-soft); font-weight:700; font-size:.9rem; }

/* ---------- CTA band (inner pages) ---------- */
.cta-band{
  background:
    radial-gradient(700px 300px at 50% -30%, rgba(245,179,51,.16), transparent 60%),
    var(--night);
  color:#fff;
  text-align:center;
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:#c9d3ff; max-width: 52ch; margin: 0 auto 30px; }
.cta-band .cta-row{ justify-content:center; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background: var(--night-deep); color:#8f9bd9;
  padding: 48px 0 36px; font-size:.9rem;
}
.footer-grid{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-brand .logo{ margin-bottom: 12px; font-size:1.1rem; }
.footer-brand p{ max-width: 34ch; font-size:.88rem; }
.footer-col h4{
  font-family: var(--font-display); font-weight:600;
  color:#fff; font-size:.95rem; margin-bottom: 12px;
}
.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom: 8px; }
.footer-col a{ color:#c9d3ff; text-decoration:none; }
.footer-col a:hover{ text-decoration:underline; }
.footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top: 22px; font-size:.82rem;
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible{ outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1020px){
  .features .grid{ grid-template-columns: repeat(2,1fr); }
  .guide-grid{ grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px){
  .hero .wrap{ grid-template-columns: 1fr; gap: 48px; padding-bottom: 48px; }
  .hero-board{ transform:none; }
  .steps{ grid-template-columns: 1fr; gap: 34px; }
  .mobile-section .inner{ grid-template-columns: 1fr; padding: 36px 30px; }
  .shots .grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .about-facts{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  /* --- mobile navigation --- */
  .burger{ display:flex; }
  .site-header .wrap{ gap:14px; }
  .main-nav{
    position:fixed;
    top: var(--header-h); left:0; right:0;
    margin:0;
    flex-direction:column; align-items:stretch; gap:0;
    background: var(--night-deep);
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: 8px 20px 16px;
    transform: translateY(-8px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: opacity .18s, transform .18s, visibility .18s;
    box-shadow: 0 24px 40px rgba(4,10,38,.5);
  }
  .main-nav.open{
    transform: translateY(0);
    opacity:1; visibility:visible; pointer-events:auto;
  }
  .main-nav a{
    padding: 14px 4px; font-size:1.05rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  .main-nav a:last-of-type{ border-bottom:0; }
  .main-nav a[aria-current="page"]::after{ display:none; }
  .header-cta{ margin-left:auto; }
  .burger{ margin-left:0; }

  section{ padding: 60px 0; }

  /* --- center-align stacked content on phones --- */
  .hero{ padding-top: 48px; }
  .hero .wrap > div:first-child{ text-align:center; }
  .hero .lead{ font-size:1.02rem; margin-inline:auto; }
  .new-badge{ margin-inline:auto; }

  .eyebrow, h2, .section-lead{ text-align:center; }
  .section-lead{ margin-inline:auto; }

  .page-hero{ text-align:center; }
  .page-hero p{ margin-inline:auto; }

  /* long-form reading stays left-aligned for readability */
  .prose, .prose h2, .prose h3,
  .card, .card h3, .card p,
  .tip, .booster, .faq-item,
  .sysreq, .sysreq h3{ text-align:left; }

  /* full-width primary CTA on phones */
  .cta-row{ flex-direction:column; align-items:stretch; gap:22px; }
  .cta-row .btn-download{ width:100%; }
  .cta-note{ text-align:center; }
  .mobile-hint{ display:block; text-align:center; }

  .trust-bar .wrap{ grid-template-columns: repeat(2,1fr); gap: 10px 0; padding: 18px 0; }
  .trust-item{ border-left:0; padding: 8px 6px; }
  .trust-item strong{ font-size:1.25rem; }

  .board{ --cell: min(56px, calc((100vw - 116px) / 5)); gap:6px; }
  .tile{ border-radius: 11px; }

  .features .grid{ grid-template-columns: 1fr; }
  .guide-grid{ grid-template-columns: 1fr; }

  .sysreq{ padding: 20px 8px; }
  .sysreq table, .sysreq tbody, .sysreq tr, .sysreq th, .sysreq td{ display:block; }
  .sysreq th{ padding: 12px 14px 0; }
  .sysreq td{ padding: 2px 14px 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .sysreq tr:last-child td{ border-bottom:0; }

  .store-badges{ width:100%; }
  .store-badge{ flex:1 1 100%; justify-content:center; }
  .sync-note{ justify-content:center; }

  .footer-grid{ grid-template-columns: 1fr; gap: 28px; text-align:center; }
  .footer-brand .logo{ justify-content:center; }
  .footer-brand p{ margin-inline:auto; }
  .footer-bottom{ flex-direction:column; align-items:center; text-align:center; gap:10px; }

  .page-hero{ padding: 52px 0; }
}

/* ============================================================
   THANK-YOU / DOWNLOAD PAGE
   ============================================================ */
.ty-hero .btn-row{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:26px;
}
.dl-status{
  display:inline-flex; align-items:center; gap:12px;
  background: rgba(62,201,111,.14);
  border:1px solid rgba(62,201,111,.5);
  color:#bff0d0;
  font-weight:700; font-size:.95rem;
  padding:12px 20px; border-radius:999px;
  margin-top:22px;
}
.dl-status svg{ width:22px; height:22px; stroke: var(--emerald); flex:none; }
.dl-status .spin{ animation: ty-spin 1s linear infinite; }
@keyframes ty-spin{ to{ transform: rotate(360deg); } }
.dl-restart{ color:#9aa7e6; font-size:.9rem; font-weight:600; margin-top:14px; }
.dl-restart a{ color: var(--gold-light); font-weight:800; }

/* ---- Quick steps (light strip) ---- */
.ty-steps{
  margin-top: 44px;
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
  counter-reset: tystep; list-style:none;
}
.ty-steps .step-lite{
  position:relative;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  padding: 30px 24px 24px;
}
.ty-steps .step-lite::before{
  counter-increment: tystep;
  content: counter(tystep);
  position:absolute; top:-18px; left:24px;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  font-family: var(--font-display); font-weight:700; font-size:1.05rem;
  color: var(--night);
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  box-shadow: 0 3px 0 var(--gold-deep);
}
.ty-steps .step-lite h3{
  font-family: var(--font-display); font-weight:600; font-size:1.1rem;
  margin: 10px 0 6px;
}
.ty-steps .step-lite p{ color: var(--ink-soft); font-size:.94rem; }

/* ---- SmartScreen spotlight section ---- */
.smartscreen{
  background:
    radial-gradient(800px 400px at 15% 0%, rgba(63,182,242,.14), transparent 60%),
    var(--night);
  color:#fff;
}
.smartscreen .eyebrow{ color:#8fd0f8; }
.smartscreen .section-lead{ color:#c9d3ff; }
.ss-flag{
  display:inline-flex; align-items:center; gap:9px;
  background: rgba(63,182,242,.16);
  border:1px solid rgba(63,182,242,.5);
  color:#bfe6fb; font-weight:800; font-size:.82rem; letter-spacing:.03em;
  padding:7px 15px; border-radius:999px; margin-bottom:20px;
}
.ss-flag svg{ width:17px; height:17px; flex:none; }

.ss-layout{
  margin-top: 40px;
  display:grid; grid-template-columns: 420px 1fr; gap: 44px;
  align-items:start;
}

/* --- Replica of the Windows SmartScreen dialog --- */
.ss-dialog{
  background:#f3f3f3; color:#1b1b1b;
  border-radius:12px; overflow:hidden;
  box-shadow: 0 30px 70px rgba(4,10,38,.6);
  border:1px solid rgba(255,255,255,.15);
  font-family: "Segoe UI", var(--font-body); position:sticky; top:88px;
}
.ss-dialog .ss-bar{
  background:#0a67c2;
  height:34px; display:flex; align-items:center; justify-content:flex-end;
  padding:0 4px;
}
.ss-dialog .ss-bar .x{
  width:34px; height:26px; display:grid; place-items:center;
  color:#fff; font-size:.9rem;
}
.ss-dialog .ss-body{ padding: 26px 26px 22px; }
.ss-dialog .ss-shield{
  width:46px; height:46px; margin-bottom:14px;
}
.ss-dialog h4{
  font-family:"Segoe UI", var(--font-display);
  font-size:1.35rem; font-weight:600; color:#1b1b1b; margin-bottom:10px;
}
.ss-dialog p{ font-size:.92rem; color:#3a3a3a; line-height:1.5; margin:0; }
.ss-dialog .ss-more{
  background:none; border:0; padding:0; margin-top:4px;
  color:#0a67c2; font-size:.92rem; font-weight:600; cursor:pointer;
  font-family:inherit;
}
.ss-dialog .ss-more:hover{ text-decoration:underline; }
.ss-dialog .ss-app{
  margin-top:14px; font-size:.9rem; color:#3a3a3a;
  opacity:0; max-height:0; overflow:hidden; transition: opacity .25s, max-height .25s;
}
.ss-dialog .ss-app b{ color:#1b1b1b; }
.ss-dialog.revealed .ss-app{ opacity:1; max-height:120px; }
.ss-dialog .ss-actions{
  display:flex; justify-content:flex-end; gap:10px;
  padding: 18px 26px 24px;
}
.ss-btn{
  font-family:"Segoe UI", var(--font-body); font-size:.9rem;
  padding:7px 20px; border-radius:4px; cursor:pointer;
  border:1px solid #adadad; background:#e1e1e1; color:#1b1b1b; font-weight:600;
}
.ss-btn.run{
  display:none; border-color:#0a67c2; background:#0a67c2; color:#fff;
  box-shadow: 0 0 0 3px rgba(10,103,194,.25);
}
.ss-dialog.revealed .ss-btn.run{ display:inline-block; }
.ss-hint-pill{
  display:none; margin-top:14px; text-align:center;
  color:#8fd0f8; font-size:.85rem; font-weight:700;
}
.ss-dialog.revealed ~ .ss-hint-pill{ display:block; }

/* --- Explanation column --- */
.ss-do{ }
.ss-do h3{
  font-family: var(--font-display); font-weight:600; font-size:1.3rem;
  color:#fff; margin-bottom: 6px;
}
.ss-do .lead-line{ color:#c9d3ff; margin-bottom:26px; font-size:1rem; }
.ss-action{
  display:flex; gap:16px; align-items:flex-start;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-md);
  padding: 18px 20px; margin-bottom:14px;
}
.ss-action .n{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  font-family: var(--font-display); font-weight:700; color: var(--night);
  background: linear-gradient(180deg, #8cd8fb, var(--sky));
}
.ss-action h4{
  font-family: var(--font-display); font-weight:600; font-size:1.05rem;
  color:#fff; margin-bottom:3px;
}
.ss-action p{ color:#c9d3ff; font-size:.94rem; }
.ss-action code{
  background: rgba(63,182,242,.2); color:#bfe6fb;
  padding:1px 8px; border-radius:6px; font-weight:700;
  font-family:"Segoe UI", var(--font-body); font-size:.9em;
}

/* --- Why it happens --- */
.ss-why{
  margin-top: 30px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
}
.ss-why h3{
  font-family: var(--font-display); font-weight:600; font-size:1.15rem;
  color:#fff; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
.ss-why h3 svg{ width:22px; height:22px; stroke:#8fd0f8; flex:none; }
.ss-why ul{ list-style:none; display:grid; gap:12px; }
.ss-why li{ display:flex; gap:12px; align-items:flex-start; color:#c9d3ff; font-size:.95rem; }
.ss-why li svg{ width:20px; height:20px; stroke: var(--emerald); flex:none; margin-top:2px; }
.ss-safe{
  margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1);
  color:#9aa7e6; font-size:.9rem;
}

@media (max-width: 900px){
  .ty-steps{ grid-template-columns:1fr; gap:30px; }
  .ss-layout{ grid-template-columns:1fr; gap:34px; }
  .ss-dialog{ position:static; max-width:420px; margin-inline:auto; }
}

/* ============================================================
   "WINDOWS ONLY" MODAL (shown to non-Windows visitors)
   ============================================================ */
.os-modal{
  position:fixed; inset:0; z-index:100;
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.os-modal.open{ display:flex; }
.os-modal__backdrop{
  position:absolute; inset:0;
  background: rgba(10,20,64,.62);
  backdrop-filter: blur(4px);
}
.os-modal__card{
  position:relative;
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px rgba(4,10,38,.5);
  padding: 40px 36px 32px;
  max-width: 420px; width:100%;
  text-align:center;
  animation: os-pop .2s ease-out;
}
@keyframes os-pop{
  from{ transform: translateY(10px) scale(.98); opacity:0; }
  to{ transform:none; opacity:1; }
}
.os-modal__x{
  position:absolute; top:12px; right:14px;
  width:36px; height:36px; border:0; background:none;
  font-size:1.7rem; line-height:1; color: var(--ink-soft);
  cursor:pointer; border-radius:50%;
}
.os-modal__x:hover{ background: rgba(89,97,143,.12); color: var(--ink); }
.os-modal__icon{
  width:64px; height:64px; margin:0 auto 18px;
  border-radius:18px; display:grid; place-items:center;
  background: linear-gradient(180deg, #8cd8fb, var(--sky));
  box-shadow: 0 8px 20px rgba(63,182,242,.35);
}
.os-modal__icon svg{ width:32px; height:32px; }
.os-modal__card h3{
  font-family: var(--font-display); font-weight:600; font-size:1.4rem;
  color: var(--ink); margin-bottom:8px;
}
.os-modal__card p{
  color: var(--ink-soft); font-size:1rem; margin-bottom:26px;
}
.os-modal__ok{
  font-family: var(--font-display); font-weight:600; font-size:1rem;
  color: var(--night); cursor:pointer; border:0;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
  padding: 12px 34px; border-radius:999px;
  box-shadow: 0 3px 0 var(--gold-deep);
  transition: transform .12s;
}
.os-modal__ok:hover{ transform: translateY(-2px); }
.os-modal__ok:active{ transform: translateY(1px); box-shadow: 0 1px 0 var(--gold-deep); }

@media (prefers-reduced-motion: reduce){
  .os-modal__card{ animation:none; }
}