/* ==========================================================================
   워드팡 (WORDPANG) — 실시간 두뇌·낱말 대결 소셜게임
   Punchy competitive arcade design system
   ========================================================================== */

/* ===== Fonts ===== */
@font-face { font-family:'Gugi'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/gugi-400.woff2') format('woff2'); }
@font-face { font-family:'Pretendard'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/Pretendard-Regular.woff2') format('woff2'); }
@font-face { font-family:'Pretendard'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/Pretendard-Medium.woff2') format('woff2'); }
@font-face { font-family:'Pretendard'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/Pretendard-Bold.woff2') format('woff2'); }
@font-face { font-family:'Pretendard'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../fonts/Pretendard-Black.woff2') format('woff2'); }

/* ===== Reset ===== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
img,svg { display:block; max-width:100%; height:auto; }
a { color:inherit; text-decoration:none; }
ul { list-style:none; }
button { font:inherit; cursor:pointer; }

/* ===== Tokens ===== */
:root {
  --blue:#2f6bff; --blue-deep:#1d47c7; --lime:#b8f235; --pink:#ff3d7f;
  --ink:#14161f; --ink-2:#1c1f2b; --ink-3:#262a3a;
  --surface:#ffffff; --surface-2:#f4f6fb; --surface-3:#e9edf6;
  --text:#14161f; --text-mut:#5a6072; --line:#e2e7f1;
  --font-display:'Gugi','Black Han Sans',sans-serif;
  --font-body:'Pretendard',system-ui,-apple-system,sans-serif;
  --maxw:1160px; --space:1rem;
  --radius:18px; --radius-lg:26px;
  --shadow:0 18px 40px -22px rgba(20,22,31,.35);
  --shadow-pop:0 22px 50px -20px rgba(47,107,255,.55);
}

/* ===== Base ===== */
body { font-family:var(--font-body); color:var(--text); background:var(--surface);
  line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.08; font-weight:400; letter-spacing:-.01em; }
strong { font-weight:700; }
:focus-visible { outline:3px solid var(--blue); outline-offset:3px; border-radius:6px; }
.container { max-width:var(--maxw); margin-inline:auto; padding-inline:1.25rem; }
.skip { position:absolute; left:-999px; top:0; background:var(--blue); color:#fff; padding:.6rem 1rem; z-index:2000; border-radius:0 0 10px 0; }
.skip:focus { left:0; }

/* ===== Buttons ===== */
.btn { display:inline-flex; align-items:center; gap:.5rem; font-weight:700; font-family:var(--font-body);
  border:0; border-radius:999px; padding:.85rem 1.6rem; font-size:1rem; line-height:1;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease; white-space:nowrap; }
.btn:active { transform:translateY(1px) scale(.99); }
.btn--pri { background:var(--blue); color:#fff; box-shadow:var(--shadow-pop); }
.btn--pri:hover { background:var(--blue-deep); transform:translateY(-2px); }
.btn--lime { background:var(--lime); color:var(--ink); }
.btn--lime:hover { transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(184,242,53,.9); }
.btn--pink { background:var(--pink); color:#fff; }
.btn--pink:hover { transform:translateY(-2px); box-shadow:0 16px 34px -16px rgba(255,61,127,.8); }
.btn--ghost { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.35); }
.btn--ghost:hover { border-color:var(--lime); color:var(--lime); }
.btn--dark { background:var(--ink); color:#fff; }
.btn--dark:hover { background:var(--ink-2); transform:translateY(-2px); }
.btn--lg { padding:1.05rem 2.1rem; font-size:1.08rem; }
.btn--block { width:100%; justify-content:center; }

/* ===== Header ===== */
.site-header { position:sticky; top:0; z-index:900; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); }
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; height:68px; }
.nav__brand { display:flex; align-items:center; }
.nav__brand svg { height:34px; width:auto; }
.nav__menu { display:flex; align-items:center; gap:.35rem; }
.nav__link { padding:.5rem .85rem; border-radius:999px; font-weight:500; color:var(--text);
  font-size:.98rem; transition:background .15s,color .15s; }
.nav__link:hover { background:var(--surface-2); }
.nav__link.is-active { color:var(--blue); font-weight:700; }
.nav__cta { display:flex; align-items:center; gap:.6rem; }
.nav__toggle { display:none; background:transparent; border:0; padding:.4rem; }
.nav__toggle span { display:block; width:24px; height:2.5px; background:var(--ink); border-radius:2px; margin:5px 0; transition:.25s; }
.nav.is-open .nav__toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2){ opacity:0; }
.nav.is-open .nav__toggle span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ===== Section scaffolding ===== */
.section { padding:5rem 0; }
.section--tight { padding:3.5rem 0; }
.section__head { max-width:640px; margin-bottom:2.5rem; }
.section__head.center { margin-inline:auto; text-align:center; }
.eyebrow { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-body);
  font-weight:700; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--blue);
  background:var(--surface-2); padding:.4rem .8rem; border-radius:999px; margin-bottom:1rem; }
.eyebrow::before { content:""; width:8px; height:8px; border-radius:2px; background:var(--lime); }
h2.section__title { font-size:clamp(1.9rem,4.5vw,3rem); }
.section__title .hl { color:var(--blue); }
.section__desc { margin-top:1rem; color:var(--text-mut); font-size:1.06rem; }

/* ===== Hero ===== */
.hero { position:relative; background:linear-gradient(160deg,#14161f 0%, #1a1f33 55%, #172a5e 100%); color:#fff; overflow:hidden;
  padding:3.5rem 0 4.5rem; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 82% 18%, rgba(47,107,255,.55) 0, transparent 42%),
    radial-gradient(circle at 12% 88%, rgba(255,61,127,.28) 0, transparent 40%); }
.hero__grid { position:relative; display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center; }
.hero__tag { display:inline-flex; align-items:center; gap:.5rem; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16); padding:.45rem .9rem; border-radius:999px; font-size:.85rem;
  font-weight:600; color:var(--lime); margin-bottom:1.4rem; }
.hero__tag .dot { width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 0 rgba(184,242,53,.7); animation:pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(184,242,53,.6);} 70%{box-shadow:0 0 0 10px rgba(184,242,53,0);} 100%{box-shadow:0 0 0 0 rgba(184,242,53,0);} }
.hero h1 { font-size:clamp(2.5rem,6.4vw,4.6rem); letter-spacing:-.02em; }
.hero h1 .pop { color:var(--lime); position:relative; }
.hero h1 .blue { color:#7fa4ff; }
.hero__lead { margin:1.4rem 0 2rem; font-size:1.16rem; color:rgba(255,255,255,.82); max-width:34ch; }
.hero__actions { display:flex; flex-wrap:wrap; gap:.8rem; }
.hero__meta { display:flex; gap:1.8rem; margin-top:2.2rem; flex-wrap:wrap; }
.hero__meta div { display:flex; flex-direction:column; }
.hero__meta b { font-family:var(--font-display); font-size:1.7rem; color:#fff; line-height:1; }
.hero__meta span { font-size:.82rem; color:rgba(255,255,255,.6); margin-top:.35rem; }

/* ===== Phone mockup frame ===== */
.phone { position:relative; width:min(330px,100%); margin-inline:auto; background:#0d0f16;
  border-radius:40px; padding:12px; box-shadow:0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 2px rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08); }
.phone::before { content:""; position:absolute; top:20px; left:50%; transform:translateX(-50%);
  width:110px; height:26px; background:#0d0f16; border-radius:0 0 16px 16px; z-index:5; }
.phone__screen { border-radius:30px; overflow:hidden; background:#0f1220; aspect-ratio:9/18.6; position:relative; }
.mockup-float { position:absolute; z-index:6; }

/* ===== In-app game screen mockup (SVG-friendly wrappers) ===== */
.screen { position:absolute; inset:0; display:flex; flex-direction:column;
  background:linear-gradient(180deg,#0f1220 0,#141a30 100%); color:#fff; padding:38px 16px 16px; font-size:12px; }
.screen__top { display:flex; align-items:center; justify-content:space-between; font-size:11px; color:rgba(255,255,255,.6); margin-bottom:10px; }
.vs-bar { display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:8px 10px; margin-bottom:12px; }
.vs-bar .p { display:flex; align-items:center; gap:7px; }
.vs-bar img { width:30px; height:30px; border-radius:50%; object-fit:cover; }
.vs-bar .name { font-weight:700; font-size:11px; }
.vs-bar .score { font-family:var(--font-display); font-size:16px; }
.vs-bar .p--me .score { color:var(--lime); }
.vs-bar .p--op .score { color:var(--pink); }
.vs-bar .vs { font-family:var(--font-display); font-size:13px; color:#7fa4ff; padding:0 6px; }

/* timer ring */
.timer { display:flex; flex-direction:column; align-items:center; margin:4px 0 12px; }
.timer svg { width:60px; height:60px; }
.timer .num { font-family:var(--font-display); font-size:18px; margin-top:-42px; margin-bottom:24px; }

/* chain (끝말잇기) */
.chain { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:14px; }
.chip-word { background:rgba(47,107,255,.18); border:1px solid rgba(127,164,255,.4); color:#cfe0ff;
  padding:4px 9px; border-radius:9px; font-weight:700; font-size:12px; }
.chip-word.turn { background:var(--lime); color:var(--ink); border-color:var(--lime); }
.chain__arrow { color:rgba(255,255,255,.35); align-self:center; }

/* letter tiles */
.tiles { display:flex; gap:6px; justify-content:center; margin-bottom:12px; }
.tile { width:34px; height:40px; border-radius:9px; background:linear-gradient(180deg,#fff,#e6ebfa);
  color:var(--ink); font-family:var(--font-display); font-size:19px; display:grid; place-items:center;
  box-shadow:0 4px 0 #b7c2df, 0 8px 12px -6px rgba(0,0,0,.5); position:relative; }
.tile.hot { background:linear-gradient(180deg,var(--lime),#9fd41f); box-shadow:0 4px 0 #7fb00f, 0 8px 12px -6px rgba(0,0,0,.5); }
.tile small { position:absolute; right:3px; bottom:1px; font-family:var(--font-body); font-size:8px; color:var(--text-mut); font-weight:700; }
.screen__foot { margin-top:auto; display:flex; gap:8px; }
.screen__foot .kbtn { flex:1; text-align:center; background:var(--blue); border-radius:11px; padding:9px; font-weight:700; }
.screen__foot .kbtn.alt { background:rgba(255,255,255,.1); }

/* ===== Generic card grid ===== */
.grid { display:grid; gap:1.4rem; }
.grid--2 { grid-template-columns:repeat(2,1fr); }
.grid--3 { grid-template-columns:repeat(3,1fr); }
.grid--4 { grid-template-columns:repeat(4,1fr); }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.7rem; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease; }
.card:hover { transform:translateY(-4px); box-shadow:0 26px 50px -24px rgba(20,22,31,.4); }
.card__icon { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; margin-bottom:1rem;
  background:var(--surface-2); }
.card__icon svg { width:28px; height:28px; }
.card h3 { font-size:1.35rem; margin-bottom:.5rem; }
.card p { color:var(--text-mut); font-size:.98rem; }
.tagrow { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.tag { font-size:.75rem; font-weight:700; padding:.3rem .65rem; border-radius:999px; background:var(--surface-2); color:var(--text-mut); }
.tag--blue { background:rgba(47,107,255,.12); color:var(--blue-deep); }
.tag--lime { background:rgba(120,170,10,.14); color:#5e7c08; }
.tag--pink { background:rgba(255,61,127,.12); color:#c31257; }

/* ===== Game type cards (games.php) ===== */
.gcard { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.gcard__mock { background:linear-gradient(160deg,#171c30,#101526); padding:1.4rem; border-bottom:1px solid var(--line); }
.gcard__body { padding:1.5rem 1.6rem 1.7rem; }
.gcard__body h3 { font-size:1.5rem; margin-bottom:.4rem; }
.gcard__rule { margin:1rem 0; border-top:1px dashed var(--line); padding-top:1rem; }
.gcard__rule dt { font-size:.76rem; font-weight:700; color:var(--text-mut); letter-spacing:.04em; text-transform:uppercase; }
.gcard__rule dd { margin-bottom:.7rem; font-size:.96rem; }
.diff { display:inline-flex; gap:3px; vertical-align:middle; }
.diff i { width:8px; height:8px; border-radius:50%; background:var(--surface-3); display:inline-block; }
.diff i.on { background:var(--pink); }

/* ===== Number band ===== */
.band { background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:3rem 2rem;
  background-image:radial-gradient(circle at 90% 10%,rgba(47,107,255,.35) 0,transparent 45%),
    radial-gradient(circle at 5% 90%,rgba(184,242,53,.14) 0,transparent 42%); }
.band__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.band__grid b { display:block; font-family:var(--font-display); font-size:clamp(2rem,5vw,3.1rem); color:var(--lime); line-height:1; }
.band__grid .bl { color:#7fa4ff; }
.band__grid .pk { color:var(--pink); }
.band__grid span { font-size:.9rem; color:rgba(255,255,255,.7); margin-top:.5rem; display:block; }

/* ===== Ranking / league table ===== */
.rank-table { width:100%; border-collapse:collapse; overflow:hidden; border-radius:var(--radius);
  background:var(--surface); box-shadow:var(--shadow); }
.rank-table th, .rank-table td { padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--line); font-size:.95rem; }
.rank-table th { background:var(--surface-2); font-weight:700; font-size:.8rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-mut); }
.rank-table tbody tr:last-child td { border-bottom:0; }
.rank-table tbody tr:hover { background:var(--surface-2); }
.rank-table .rk { font-family:var(--font-display); font-size:1.1rem; width:48px; }
.rank-table tr.me { background:rgba(47,107,255,.06); }
.rank-table tr.me td { font-weight:700; }
.rk--1 { color:var(--pink); } .rk--2 { color:var(--blue); } .rk--3 { color:#c58b00; }
.player { display:flex; align-items:center; gap:.7rem; }
.player img { width:38px; height:38px; border-radius:50%; object-fit:cover; }
.player .tier { font-size:.75rem; color:var(--text-mut); }
.streak { font-weight:700; color:var(--pink); }
.delta.up { color:#1f9d55; } .delta.down { color:#d13b3b; } .delta.flat { color:var(--text-mut); }

/* tier chips */
.tiers { display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.5rem; }
.tierchip { display:flex; align-items:center; gap:.6rem; padding:.7rem 1.1rem; border-radius:14px;
  border:1px solid var(--line); background:var(--surface); font-weight:700; }
.tierchip i { width:22px; height:22px; border-radius:6px; display:inline-block; }

/* league promo/relegation panel */
.ladder { display:grid; gap:.5rem; }
.ladder__row { display:flex; align-items:center; justify-content:space-between; padding:.8rem 1.1rem;
  border-radius:14px; border:1px solid var(--line); background:var(--surface); }
.ladder__row.promo { border-color:rgba(31,157,85,.4); background:rgba(31,157,85,.06); }
.ladder__row.releg { border-color:rgba(209,59,59,.35); background:rgba(209,59,59,.05); }
.pill { font-size:.75rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; }
.pill.up { background:rgba(31,157,85,.14); color:#1f7d47; }
.pill.down { background:rgba(209,59,59,.12); color:#c0392b; }
.pill.keep { background:var(--surface-2); color:var(--text-mut); }

/* ===== Feature split (friends.php) ===== */
.split { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.split--rev .split__media { order:2; }
.split__media { position:relative; }
.feature-list { display:grid; gap:1.1rem; margin-top:1.5rem; }
.feature-list li { display:flex; gap:.9rem; align-items:flex-start; }
.feature-list .ic { flex:0 0 auto; width:38px; height:38px; border-radius:11px; background:var(--surface-2);
  display:grid; place-items:center; }
.feature-list .ic svg { width:20px; height:20px; }
.feature-list b { display:block; font-size:1.05rem; }
.feature-list p { color:var(--text-mut); font-size:.94rem; margin-top:.15rem; }

/* challenge card mock */
.chal { background:var(--ink); color:#fff; border-radius:var(--radius); padding:1.3rem; box-shadow:var(--shadow); }
.chal__top { display:flex; align-items:center; gap:.8rem; margin-bottom:1rem; }
.chal__top img { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.chal__top b { font-size:1.05rem; } .chal__top span { font-size:.82rem; color:rgba(255,255,255,.6); }
.chal__body { background:rgba(255,255,255,.05); border-radius:12px; padding:.9rem; font-size:.9rem; margin-bottom:1rem; }
.chal__actions { display:flex; gap:.6rem; }
.chal__actions .btn { flex:1; justify-content:center; padding:.7rem; }

/* clan roster */
.clan { display:flex; align-items:center; gap:.8rem; padding:.8rem 1rem; border-radius:14px;
  border:1px solid var(--line); background:var(--surface); }
.clan .avatars { display:flex; }
.clan .avatars img { width:32px; height:32px; border-radius:50%; border:2px solid var(--surface); margin-left:-10px; object-fit:cover; }
.clan .avatars img:first-child { margin-left:0; }

/* ===== Testimonials ===== */
.quote { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.6rem; box-shadow:var(--shadow); }
.quote__stars { color:var(--pink); font-size:1rem; letter-spacing:2px; margin-bottom:.7rem; }
.quote p { font-size:1rem; }
.quote__who { display:flex; align-items:center; gap:.7rem; margin-top:1.2rem; }
.quote__who img { width:42px; height:42px; border-radius:50%; object-fit:cover; }
.quote__who b { font-size:.95rem; } .quote__who span { font-size:.8rem; color:var(--text-mut); }

/* ===== CTA band ===== */
.cta { position:relative; overflow:hidden; background:linear-gradient(120deg,var(--blue),#5b46ff);
  color:#fff; border-radius:var(--radius-lg); padding:3.5rem 2rem; text-align:center; }
.cta::before { content:""; position:absolute; inset:0; background:
  radial-gradient(circle at 15% 20%,rgba(184,242,53,.28) 0,transparent 35%),
  radial-gradient(circle at 85% 80%,rgba(255,61,127,.3) 0,transparent 38%); }
.cta > * { position:relative; }
.cta h2 { font-size:clamp(1.8rem,4.5vw,2.8rem); }
.cta p { margin:1rem auto 1.8rem; max-width:44ch; color:rgba(255,255,255,.85); }
.cta__actions { display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* ===== Store buttons (SVG mock) ===== */
.stores { display:flex; gap:.9rem; flex-wrap:wrap; }
.store-btn { display:flex; align-items:center; gap:.7rem; background:var(--ink); color:#fff;
  padding:.7rem 1.2rem; border-radius:14px; transition:transform .15s; }
.store-btn:hover { transform:translateY(-2px); }
.store-btn svg { width:26px; height:26px; }
.store-btn small { display:block; font-size:.68rem; color:rgba(255,255,255,.65); }
.store-btn b { font-size:1.02rem; font-family:var(--font-display); font-weight:400; }

/* ===== Forms ===== */
.form { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:2rem; box-shadow:var(--shadow); }
.field { margin-bottom:1.2rem; }
.field label { display:block; font-weight:700; font-size:.92rem; margin-bottom:.45rem; }
.field .req { color:var(--pink); }
.field input, .field select, .field textarea { width:100%; padding:.8rem 1rem; border:1.5px solid var(--line);
  border-radius:12px; font:inherit; background:var(--surface); color:var(--text); transition:border .15s; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--blue); }
.field small { display:block; margin-top:.35rem; color:var(--text-mut); font-size:.82rem; }
.check { display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--text-mut); }
.check input { width:auto; margin-top:.2rem; }

/* ===== Steps ===== */
.steps { counter-reset:s; display:grid; gap:1.2rem; }
.steps li { counter-increment:s; display:flex; gap:1rem; align-items:flex-start; }
.steps li::before { content:counter(s); flex:0 0 auto; width:40px; height:40px; border-radius:12px;
  background:var(--blue); color:#fff; font-family:var(--font-display); display:grid; place-items:center; font-size:1.1rem; }
.steps b { display:block; font-size:1.08rem; }
.steps p { color:var(--text-mut); font-size:.95rem; }

/* ===== Media photo blocks ===== */
.photo { border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.photo img { width:100%; height:100%; object-fit:cover; }
.media-badge { position:absolute; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:.7rem 1rem; box-shadow:var(--shadow); display:flex; align-items:center; gap:.6rem; font-weight:700; font-size:.9rem; }

/* ===== FAQ ===== */
.faq details { border:1px solid var(--line); border-radius:14px; padding:.2rem 1.2rem; margin-bottom:.8rem; background:var(--surface); }
.faq summary { cursor:pointer; font-weight:700; padding:1rem 0; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-family:var(--font-display); color:var(--blue); font-size:1.4rem; }
.faq details[open] summary::after { content:"–"; }
.faq p { padding-bottom:1rem; color:var(--text-mut); }

/* ===== Page hero (interior) ===== */
.phero { background:linear-gradient(160deg,#14161f,#1a2240); color:#fff; padding:3.2rem 0; position:relative; overflow:hidden; }
.phero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 15%,rgba(47,107,255,.4) 0,transparent 45%); }
.phero .container { position:relative; }
.phero h1 { font-size:clamp(2.1rem,5vw,3.4rem); }
.phero p { margin-top:1rem; color:rgba(255,255,255,.8); max-width:52ch; }
.crumb { font-size:.85rem; color:rgba(255,255,255,.55); margin-bottom:1rem; }
.crumb a:hover { color:var(--lime); }

/* ===== Footer ===== */
.site-footer { background:var(--ink); color:rgba(255,255,255,.72); padding:3.5rem 0 2rem; }
.footer__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2rem; margin-bottom:2.5rem; }
.footer__brand svg { height:32px; margin-bottom:1rem; }
.footer__brand p { font-size:.9rem; max-width:32ch; }
.footer h4 { font-family:var(--font-body); font-weight:700; color:#fff; font-size:.92rem; margin-bottom:1rem; letter-spacing:.02em; }
.footer ul li { margin-bottom:.55rem; }
.footer a:hover { color:var(--lime); }
.footer__bottom { border-top:1px solid rgba(255,255,255,.12); padding-top:1.6rem; display:flex;
  justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:rgba(255,255,255,.5); }
.footer__biz { font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.8; margin-top:.4rem; }
.legal-links { display:flex; gap:1.2rem; flex-wrap:wrap; }
.legal-open { background:none; border:0; padding:0; cursor:pointer; color:rgba(255,255,255,.72);
  font:inherit; text-decoration:underline; }
.legal-open:hover { color:var(--lime); }

/* ===== Modal ===== */
.modal[hidden] { display:none; }
.modal { position:fixed; inset:0; z-index:1500; display:grid; place-items:center; padding:1.25rem; }
.modal__backdrop { position:absolute; inset:0; background:rgba(10,12,20,.7); backdrop-filter:blur(3px); }
.modal__panel { position:relative; z-index:1; width:min(720px,100%); max-height:85vh; overflow-y:auto;
  background:var(--surface); color:var(--text); padding:2.2rem; border-radius:var(--radius-lg); box-shadow:0 40px 80px -30px rgba(0,0,0,.6); }
.modal__panel h2 { font-size:1.7rem; margin-bottom:.4rem; }
.modal__panel h3 { font-family:var(--font-body); font-weight:700; font-size:1.02rem; margin:1.4rem 0 .5rem; }
.modal__panel p, .modal__panel li { font-size:.92rem; color:var(--text-mut); line-height:1.7; }
.modal__panel ul { list-style:disc; padding-left:1.2rem; margin:.4rem 0; }
.modal__panel table { width:100%; border-collapse:collapse; margin:.6rem 0; font-size:.86rem; }
.modal__panel th, .modal__panel td { border:1px solid var(--line); padding:.5rem .7rem; text-align:left; }
.modal__panel th { background:var(--surface-2); }
.modal__meta { font-size:.82rem; color:var(--text-mut); border-top:1px solid var(--line); margin-top:1.4rem; padding-top:1rem; }
.modal__close { position:absolute; top:1rem; right:1rem; background:var(--surface-2); border:0; width:38px; height:38px;
  border-radius:50%; font-size:1.5rem; line-height:1; color:var(--text); }
.modal__close:hover { background:var(--surface-3); }

/* ===== Reveal animation ===== */
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity:1; transform:none; }

/* ===== Responsive ===== */
@media (max-width:900px) {
  .hero__grid, .split { grid-template-columns:1fr; gap:2rem; }
  .split--rev .split__media { order:0; }
  .grid--4 { grid-template-columns:repeat(2,1fr); }
  .grid--3 { grid-template-columns:repeat(2,1fr); }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .band__grid { grid-template-columns:repeat(2,1fr); gap:1.8rem; }
}
@media (max-width:640px) {
  .section { padding:3.5rem 0; }
  .nav__menu { position:fixed; inset:68px 0 auto 0; flex-direction:column; align-items:stretch;
    background:var(--surface); border-bottom:1px solid var(--line); padding:1rem 1.25rem 1.5rem; gap:.2rem;
    transform:translateY(-120%); transition:transform .28s ease; box-shadow:var(--shadow); }
  .nav.is-open .nav__menu { transform:none; }
  .nav__menu .nav__cta { flex-direction:column; align-items:stretch; margin-top:.6rem; }
  .nav__menu .btn { width:100%; justify-content:center; }
  .nav__toggle { display:block; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns:1fr; }
  .band__grid { grid-template-columns:repeat(2,1fr); }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .rank-table thead { font-size:.7rem; }
  .rank-table th:nth-child(4), .rank-table td:nth-child(4) { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .reveal { opacity:1; transform:none; }
}