/* ==========================================================================
   ValueBet.gr — public-v3
   Warm dark, vivid orange accent, Manrope type, flat crisp edges
   Distinctly different from v1/v2 (no neon, no glow, no mono display)
   ========================================================================== */

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

:root{
  --bg:#0a0a0c;
  --bg2:#111114;
  --bg3:#17171c;
  --bg4:#1e1e24;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --line-3:rgba(255,255,255,.2);

  --text:#f4f4f5;
  --muted:#a1a1aa;
  --muted-2:#71717a;

  --accent:#00ff9d;      /* neon green */
  --accent-2:#00e68a;    /* slightly darker for hover */
  --accent-dim:rgba(0,255,157,.1);
  --accent-ring:rgba(0,255,157,.35);
  --accent-soft:#e6fff4;

  --success:#22c55e;
  --danger:#ef4444;
  --warn:#eab308;

  --ease:cubic-bezier(.4,0,.2,1);
  --radius:8px;
  --radius-lg:14px;
  --radius-xl:20px;
  --container:1200px;

  --font:'Manrope','Inter','Segoe UI',system-ui,sans-serif;
}

html,body{background:var(--bg);color:var(--text)}
body{
  font-family:var(--font);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
::selection{background:var(--accent);color:#000}

h1,h2,h3,h4{font-weight:800;line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,5.6vw,4.2rem);line-height:1.1}
h2{font-size:clamp(1.9rem,3.6vw,2.75rem);line-height:1.15}
h3{font-size:clamp(1.15rem,1.5vw,1.35rem)}
p{color:var(--muted);line-height:1.7}

.container{max-width:var(--container);margin:0 auto;padding:0 1.4rem}
.section{padding:5.5rem 0;position:relative}
.section-head{max-width:740px;margin:0 auto 3.5rem;text-align:center}
.eyebrow{
  display:inline-block;
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
  padding:.35rem .75rem;background:var(--accent-dim);
  border:1px solid var(--accent-ring);border-radius:999px;
}
.section-head h2{margin-bottom:1rem}
.section-head p{font-size:1.05rem;max-width:620px;margin:0 auto}

/* Buttons ------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font);font-weight:700;font-size:.95rem;
  padding:.85rem 1.4rem;border-radius:10px;
  border:1px solid transparent;color:var(--text);
  transition:all .18s var(--ease);cursor:pointer;white-space:nowrap;
}
.btn-primary{
  background:var(--accent);color:#0a0a0c;border-color:var(--accent);
}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}

.btn-secondary{
  background:var(--bg3);border-color:var(--line-2);color:var(--text);
}
.btn-secondary:hover{background:var(--bg4);border-color:var(--line-3)}

.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text)}

.btn-lg{padding:1rem 1.7rem;font-size:1rem}
.btn-full{width:100%}
.btn:focus-visible{outline:2px solid var(--accent-ring);outline-offset:3px}

/* Inputs -------------------------------------------------------------------- */
.field{margin-bottom:1.1rem}
.label{
  display:block;font-size:.75rem;font-weight:600;
  color:var(--muted);margin-bottom:.45rem;letter-spacing:.02em;
}
.input{
  width:100%;background:var(--bg2);
  border:1px solid var(--line-2);border-radius:10px;
  padding:.85rem 1rem;color:var(--text);
  font-family:var(--font);font-size:.95rem;
  transition:all .15s var(--ease);
}
.input::placeholder{color:var(--muted-2)}
.input:focus{outline:none;border-color:var(--accent);background:var(--bg3)}
.error-msg{color:var(--danger);font-size:.85rem;margin:.5rem 0;min-height:1.1em}

/* Nav ----------------------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,12,.8);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  display:flex;align-items:center;gap:2rem;
  padding:.95rem 0;
}
.brand{
  display:flex;align-items:center;gap:.5rem;
  font-weight:800;font-size:1.1rem;letter-spacing:-.02em;
  /* Vertical padding lifts the tap target to ≥40px on mobile without
     enlarging the visible wordmark (matches WCAG 2.5.8 minimum). */
  padding:.3rem 0;
}
.brand-mark{
  width:26px;height:26px;border-radius:7px;
  background:var(--accent);color:#0a0a0c;
  display:grid;place-items:center;
  font-weight:900;font-size:.85rem;
}
.brand em{color:var(--muted);font-style:normal;font-weight:500}
.nav-links{display:flex;gap:1.6rem;margin-left:1rem}
.nav-links a{font-size:.92rem;color:var(--muted);font-weight:500;transition:color .15s}
.nav-links a:hover{color:var(--text)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
@media (max-width:860px){.nav-links{display:none}}
@media (max-width:520px){.nav-right .btn-ghost{display:none}}

/* Hero ---------------------------------------------------------------------- */
.hero{
  padding:6rem 0 5rem;text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-200px;left:50%;
  transform:translateX(-50%);
  width:1000px;height:700px;
  background:radial-gradient(ellipse 60% 55% at 50% 50%,rgba(0,255,157,.12),transparent 65%);
  pointer-events:none;z-index:0;
}
.hero-inner{position:relative;z-index:1}
.trust-bar{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.85rem;color:var(--muted);font-weight:500;
  padding:.5rem 1rem;background:var(--bg2);border:1px solid var(--line-2);
  border-radius:999px;margin-bottom:1.8rem;
}
.trust-bar strong{color:var(--text);font-weight:700}
.trust-bar .dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px rgba(34,197,94,.6);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.hero h1{max-width:960px;margin:0 auto 1.3rem}
.hero h1 .hl{color:var(--accent)}
.hero-sub{max-width:620px;margin:0 auto 2.4rem;font-size:1.1rem;line-height:1.65}
.hero-ctas{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
@media (max-width:480px){.hero-ctas .btn{width:100%}}
.hero-meta{
  display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;
  font-size:.85rem;color:var(--muted);
}
.hero-meta span{display:flex;align-items:center;gap:.45rem}
.hero-meta .chk{color:var(--success);flex-shrink:0}

/* Live data panel (hero extension) ------------------------------------------ */
.live-panel{
  max-width:1000px;margin:3.5rem auto 0;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  border:1px solid var(--line-2);border-radius:var(--radius-xl);
  box-shadow:0 30px 100px rgba(0,0,0,.6),0 0 0 1px var(--line);
  overflow:hidden;
}
.lp-head{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:1rem 1.4rem;border-bottom:1px solid var(--line);
  background:var(--bg3);flex-wrap:wrap;
}
.lp-title{display:flex;align-items:center;gap:.65rem;font-weight:700;font-size:.95rem}
.lp-title .live-pip{
  width:8px;height:8px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 4px rgba(34,197,94,.15);animation:pulse 2s infinite;
}
.lp-stats{display:flex;gap:1.2rem;font-size:.8rem;color:var(--muted)}
.lp-stats strong{color:var(--text);font-weight:700}
.lp-body{padding:.3rem 0}
.lp-row{
  display:grid;grid-template-columns:60px 2fr 1.1fr 1fr 80px 60px;
  gap:.8rem;padding:.9rem 1.4rem;align-items:center;
  border-bottom:1px solid var(--line);font-size:.88rem;
}
.lp-row:last-child{border-bottom:none}
.lp-ev{
  background:var(--accent-dim);color:var(--accent);
  padding:.25rem .5rem;border-radius:6px;
  font-weight:800;font-size:.85rem;text-align:center;
}
.lp-event{font-weight:600}
.lp-event small{display:block;color:var(--muted-2);font-size:.74rem;font-weight:400;margin-top:.15rem}
.lp-sel{color:var(--text);font-weight:600}
.lp-book{color:var(--muted);font-size:.82rem}
.lp-odds{font-weight:800;font-size:1rem;text-align:center}
.lp-grab{
  text-align:center;padding:.35rem 0;
  background:var(--bg3);border-radius:6px;border:1px solid var(--line-2);
  font-size:.75rem;font-weight:700;color:var(--muted);
  transition:all .15s;
}
.lp-grab:hover{background:var(--accent);color:#000;border-color:var(--accent)}
@media (max-width:760px){
  .lp-row{grid-template-columns:60px 1fr 80px;gap:.5rem}
  .lp-row > :nth-child(3),.lp-row > :nth-child(4),.lp-row > :nth-child(6){display:none}
}

/* Logos strip (two-row: bookmakers + leagues) ------------------------------ */
.logos-strip{padding:4.5rem 0;border-block:1px solid var(--line);background:var(--bg)}
.logos-strip .row-block{margin-bottom:3.5rem}
.logos-strip .row-block:last-child{margin-bottom:0}

.strip-divider{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-bottom:2rem;
}
.strip-divider::before,
.strip-divider::after{
  content:'';flex:1;max-width:180px;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2),transparent);
}
.strip-divider span{
  display:inline-flex;align-items:center;gap:.85rem;
  font-size:.85rem;color:var(--muted);font-weight:500;
  letter-spacing:.01em;white-space:nowrap;
}
.strip-divider .chev{
  color:var(--muted-2);font-size:.9rem;letter-spacing:-.15em;
  display:inline-block;font-weight:400;
}

.marquee{
  position:relative;overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee-track{
  display:flex;align-items:center;gap:1.1rem;
  width:max-content;padding:.5rem 0;
  will-change:transform;
  animation:marquee-l 45s linear infinite;
}
.marquee-track.reverse{animation:marquee-r 55s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marquee-l{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

.bk-tiles{
  display:flex;align-items:center;
  gap:1.1rem;flex-wrap:nowrap;flex-shrink:0;
}
.bk-tile{
  width:74px;height:74px;border-radius:16px;
  display:grid;place-items:center;
  overflow:hidden;flex-shrink:0;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.bk-tile:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.5)}
.bk-tile img{
  width:100%;height:100%;object-fit:contain;
  padding:8px;
}
.bk-tile .fb{
  font-weight:800;font-size:1.05rem;color:#fff;
  letter-spacing:-.02em;text-align:center;line-height:1;
}
/* Brand color backgrounds (used as tile bg; PNG sits on top) */
.bk-tile.stoiximan{background:#ffffff}
.bk-tile.stoiximan .fb{color:#1a3a8a}
.bk-tile.novibet{background:#05091c}
.bk-tile.novibet .fb{color:#ffffff}
.bk-tile.betsson{background:#ff7a00}
.bk-tile.bwin{background:#ffffff;border:1px solid var(--line-2)}
.bk-tile.bwin .fb{color:#111827}
.bk-tile.bet365{background:#0c7a3a}
.bk-tile.betano{background:#d81e05}
.bk-tile.pamestoixima{background:#e74c3c}

.league-tiles{
  display:flex;align-items:center;
  gap:2.8rem;flex-wrap:nowrap;flex-shrink:0;
}
.league-tile{
  width:80px;height:80px;display:grid;place-items:center;
  flex-shrink:0;filter:grayscale(.2) brightness(1.1);opacity:.9;
  transition:all .22s var(--ease);
}
.league-tile:hover{filter:none;opacity:1;transform:scale(1.08)}
.league-tile img{max-width:100%;max-height:100%;object-fit:contain}
.league-tile .fb{
  display:grid;place-items:center;
  width:70px;height:70px;border-radius:14px;
  font-weight:800;font-size:.78rem;color:var(--muted);
  background:var(--bg2);border:1px solid var(--line-2);
  text-align:center;line-height:1.1;padding:.4rem;
}

@media (max-width:600px){
  .bk-tile{width:60px;height:60px;border-radius:13px}
  .league-tile{width:64px;height:64px}
  .bk-tiles{gap:.7rem}
  .league-tiles{gap:1.3rem}
  .strip-divider::before,.strip-divider::after{max-width:60px}
}

/* Feature blocks (alternating layout) --------------------------------------- */
.feat-block{padding:5rem 0;border-top:1px solid var(--line)}
.feat-block:first-child{border-top:none}
.feat-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center;
  max-width:1100px;margin:0 auto;
}
.feat-block.reverse .feat-inner{direction:rtl}
.feat-block.reverse .feat-inner > *{direction:ltr}
@media (max-width:860px){
  .feat-inner{grid-template-columns:1fr;gap:2rem}
  .feat-block.reverse .feat-inner{direction:ltr}
}
.feat-copy .feat-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1rem;
}
.feat-copy .feat-tag .n{
  width:22px;height:22px;border-radius:6px;
  background:var(--accent-dim);border:1px solid var(--accent-ring);
  display:grid;place-items:center;font-size:.7rem;
}
.feat-copy h2{margin-bottom:1rem;font-size:clamp(1.6rem,2.8vw,2.2rem)}
.feat-copy p{font-size:1.02rem;margin-bottom:1.3rem;line-height:1.75}
.feat-copy ul{margin-bottom:1.5rem}
.feat-copy li{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:.95rem;padding:.35rem 0;color:var(--text);
}
.feat-copy li svg{flex-shrink:0;color:var(--accent);margin-top:.3em}
.feat-visual{
  background:var(--bg2);border:1px solid var(--line-2);border-radius:var(--radius-xl);
  padding:1.4rem;min-height:320px;position:relative;overflow:hidden;
}
.feat-visual::before{
  content:'';position:absolute;top:-1px;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
}

/* Feature-visual variants */
.fv-table{font-size:.82rem}
.fv-table .h{
  display:grid;grid-template-columns:50px 2fr 70px 70px 80px;gap:.5rem;
  padding:.5rem .7rem;font-size:.65rem;font-weight:700;color:var(--muted-2);
  letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--line);
}
.fv-table .r{
  display:grid;grid-template-columns:50px 2fr 70px 70px 80px;gap:.5rem;
  padding:.6rem .7rem;align-items:center;border-bottom:1px solid var(--line);
}
.fv-table .r:last-child{border-bottom:none}
.fv-table .r .ev{background:var(--accent-dim);color:var(--accent);padding:.2rem .35rem;border-radius:5px;font-weight:800;font-size:.78rem;text-align:center}
.fv-table .r .ev.hi{background:var(--accent);color:#000}
.fv-table .r .ev.gn{background:rgba(34,197,94,.14);color:var(--success)}
.fv-table .r .o{font-weight:700;text-align:center}
.fv-table .r .bk{font-size:.74rem;color:var(--muted)}

.fv-arb{padding:1rem}
.fv-arb-head{font-size:.8rem;color:var(--muted);margin-bottom:.9rem;display:flex;justify-content:space-between;align-items:center}
.fv-arb-head .tag{background:var(--success);color:#000;padding:.2rem .55rem;border-radius:5px;font-weight:800;font-size:.72rem}
.fv-arb-split{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.fv-arb-side{
  background:var(--bg3);border:1px solid var(--line);border-radius:10px;
  padding:.9rem;
}
.fv-arb-side .sub{font-size:.7rem;color:var(--muted);margin-bottom:.3rem}
.fv-arb-side .bk{font-weight:700;font-size:.9rem;margin-bottom:.35rem}
.fv-arb-side .sel{font-size:.75rem;color:var(--muted);margin-bottom:.6rem}
.fv-arb-side .o{font-size:1.3rem;font-weight:800;color:var(--accent)}
.fv-arb-side .st{font-size:.7rem;color:var(--muted);margin-top:.3rem}
.fv-arb-total{
  margin-top:.9rem;padding:.8rem .9rem;
  background:linear-gradient(90deg,rgba(34,197,94,.08),rgba(34,197,94,.02));
  border:1px solid rgba(34,197,94,.2);border-radius:10px;
  display:flex;justify-content:space-between;align-items:center;font-size:.85rem;
}
.fv-arb-total strong{color:var(--success);font-size:1.1rem;font-weight:800}

.fv-kelly{padding:.5rem .3rem}
.fv-kelly-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:.7rem .4rem;border-bottom:1px solid var(--line);font-size:.88rem;
}
.fv-kelly-row:last-child{border-bottom:none}
.fv-kelly-row .l{color:var(--muted)}
.fv-kelly-row .v{font-weight:700}
.fv-kelly-row .v.acc{color:var(--accent);font-size:1rem}
.fv-kelly-bar{
  height:8px;border-radius:999px;background:var(--bg3);margin:1rem 0 .5rem;
  overflow:hidden;
}
.fv-kelly-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px}

.fv-middle{padding:.4rem}
.fv-middle-line{
  position:relative;height:56px;margin:1.5rem 0 1rem;
  background:linear-gradient(90deg,var(--bg3),var(--bg4),var(--bg3));
  border-radius:8px;
}
.fv-middle-seg{
  position:absolute;top:0;bottom:0;
  background:rgba(0,255,157,.25);
  border-left:2px solid var(--accent);border-right:2px solid var(--accent);
}
.fv-middle-labels{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted)}
.fv-middle-win{
  text-align:center;margin-top:1.1rem;padding:.7rem;
  background:var(--accent-dim);border:1px solid var(--accent-ring);
  border-radius:8px;font-size:.85rem;
}
.fv-middle-win strong{color:var(--accent);font-weight:800}

.fv-mispriced{padding:.4rem}
.fv-mp-row{
  display:grid;grid-template-columns:1fr 80px 80px 90px;gap:.6rem;
  padding:.65rem .5rem;align-items:center;font-size:.85rem;
  border-bottom:1px solid var(--line);
}
.fv-mp-row:last-child{border-bottom:none}
.fv-mp-row .e{font-weight:600}
.fv-mp-row .e small{display:block;font-size:.7rem;color:var(--muted-2);margin-top:.1rem;font-weight:400}
.fv-mp-row .o{text-align:center;font-weight:700}
.fv-mp-row .o.fair{color:var(--muted)}
.fv-mp-row .d{
  text-align:center;font-weight:800;font-size:.85rem;
  background:var(--accent-dim);color:var(--accent);
  padding:.22rem;border-radius:5px;
}

.fv-tracker{padding:.4rem}
.fv-tracker-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-bottom:1rem}
.fv-tracker-kpi{
  background:var(--bg3);border:1px solid var(--line);border-radius:9px;
  padding:.7rem .8rem;
}
.fv-tracker-kpi .l{font-size:.65rem;color:var(--muted);letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-bottom:.3rem}
.fv-tracker-kpi .v{font-size:1.1rem;font-weight:800}
.fv-tracker-kpi .v.p{color:var(--success)}
.fv-tracker-chart{
  height:100px;background:var(--bg3);border:1px solid var(--line);
  border-radius:9px;position:relative;overflow:hidden;padding:.6rem;
}

/* Who for ------------------------------------------------------------------- */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;max-width:1000px;margin:0 auto}
@media (max-width:880px){.who-grid{grid-template-columns:1fr}}
.who-card{
  background:var(--bg2);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:2rem 1.7rem;transition:all .2s var(--ease);
}
.who-card:hover{border-color:var(--accent-ring);transform:translateY(-3px)}
.who-ico{
  width:44px;height:44px;border-radius:10px;
  background:var(--accent-dim);border:1px solid var(--accent-ring);
  display:grid;place-items:center;color:var(--accent);margin-bottom:1.2rem;
}
.who-card h3{margin-bottom:.6rem;font-size:1.15rem}
.who-card p{font-size:.9rem;line-height:1.7;margin-bottom:1rem}
.who-card .rec{
  font-size:.72rem;font-weight:700;color:var(--accent);
  letter-spacing:.1em;text-transform:uppercase;
}

/* Compare table ------------------------------------------------------------- */
.compare{max-width:1000px;margin:0 auto;overflow-x:auto}
.compare-table{
  width:100%;min-width:680px;border-collapse:separate;border-spacing:0;
  background:var(--bg2);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  overflow:hidden;
}
.compare-table th,.compare-table td{
  padding:1.1rem 1.2rem;text-align:left;
  border-bottom:1px solid var(--line);
  font-size:.92rem;
}
.compare-table th{
  font-weight:800;font-size:.88rem;background:var(--bg3);
  color:var(--text);
}
.compare-table th.us{
  background:var(--accent);color:#0a0a0c;
}
.compare-table td:first-child,.compare-table th:first-child{font-weight:600;color:var(--muted)}
.compare-table td{text-align:center;font-weight:600}
.compare-table td:first-child{text-align:left}
.compare-table tr:last-child td{border-bottom:none}
.compare-table .yes{color:var(--success)}
.compare-table .no{color:var(--muted-2)}
.compare-table .partial{color:var(--warn)}

/* Problem block ------------------------------------------------------------- */
.problem{
  max-width:900px;margin:0 auto;text-align:center;
  padding:3rem 2rem;
  background:linear-gradient(180deg,var(--bg2),var(--bg));
  border:1px solid var(--line-2);border-radius:var(--radius-xl);
}
.problem .stat{
  font-size:clamp(3.5rem,7vw,5.5rem);font-weight:900;
  line-height:1;margin-bottom:.5rem;color:var(--accent);letter-spacing:-.03em;
}
.problem .stat-label{
  font-size:.85rem;color:var(--muted);letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;margin-bottom:2rem;
}
.problem h2{margin-bottom:1.2rem}
.problem p{max-width:620px;margin:0 auto 1.5rem;font-size:1.02rem}

/* Why-us grid --------------------------------------------------------------- */
.why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;max-width:1100px;margin:0 auto}
.why-card{
  background:var(--bg2);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:1.5rem 1.4rem;transition:all .2s var(--ease);
}
.why-card:hover{border-color:var(--accent-ring)}
.why-ico{
  width:38px;height:38px;border-radius:9px;
  background:var(--accent-dim);display:grid;place-items:center;
  color:var(--accent);margin-bottom:1rem;
}
.why-card h3{font-size:1rem;margin-bottom:.4rem}
.why-card p{font-size:.88rem;line-height:1.65}

/* Calculator (carried from v2 but restyled) -------------------------------- */
.calc{
  display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:1.3rem;
  max-width:1100px;margin:0 auto;
}
@media (max-width:900px){.calc{grid-template-columns:1fr}}
.calc-inputs,.calc-outputs{
  background:var(--bg2);border:1px solid var(--line-2);border-radius:var(--radius-xl);
  padding:1.8rem 1.6rem;
}
.calc-outputs{background:linear-gradient(180deg,var(--bg2),var(--bg))}
.calc-block{margin-bottom:1.6rem}
.calc-block:last-of-type{margin-bottom:1.2rem}
.calc-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.calc-label-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem}
.calc-value{font-size:1.1rem;color:var(--accent);font-weight:800}
.calc-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:999px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--fill,50%),var(--bg3) var(--fill,50%),var(--bg3) 100%);
  outline:none;cursor:pointer;
}
.calc-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent);border:3px solid var(--bg);
  cursor:grab;transition:transform .15s;
}
.calc-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}
.calc-slider::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:var(--accent);
  border:3px solid var(--bg);cursor:grab;
}
.calc-minmax{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted-2);margin-top:.55rem;font-weight:600}
.calc-strategies{display:flex;flex-direction:column;gap:.55rem;margin-top:.7rem}
.calc-strat{
  display:flex;flex-direction:column;align-items:flex-start;gap:.18rem;
  text-align:left;width:100%;padding:.8rem 1rem;border-radius:10px;
  background:var(--bg3);border:1px solid var(--line-2);color:var(--text);
  cursor:pointer;transition:all .18s var(--ease);font-family:var(--font);
}
.calc-strat:hover{border-color:var(--line-3);background:var(--bg4)}
.calc-strat.active{border-color:var(--accent);background:var(--accent-dim)}
.calc-strat.active .strat-name{color:var(--accent)}
.strat-name{font-weight:800;font-size:.92rem}
.strat-sub{font-size:.76rem;color:var(--muted);font-weight:500}
.calc-note{
  display:flex;align-items:flex-start;gap:.55rem;
  margin-top:1rem;padding:.8rem;
  background:var(--bg3);border:1px solid var(--line);border-radius:8px;
  font-size:.78rem;color:var(--muted-2);line-height:1.55;
}
.calc-note svg{flex-shrink:0;margin-top:.18rem;color:var(--muted)}
.calc-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1.6rem}
@media (max-width:560px){.calc-kpis{grid-template-columns:1fr}}
.calc-kpi{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem}
.kpi-label{display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.kpi-num{display:block;font-size:clamp(1.35rem,2.2vw,1.7rem);font-weight:900;color:var(--accent);line-height:1}
.kpi-sub{display:block;font-size:.75rem;color:var(--muted);margin-top:.4rem;font-weight:500}
.calc-chart-wrap{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.2rem 1rem}
.calc-chart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem;gap:1rem;flex-wrap:wrap}
.calc-legend{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--muted);font-weight:600}
.calc-legend .dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.calc-chart{width:100%;height:200px;display:block}
.calc-chart .gridline{stroke:var(--line);stroke-width:1}
.calc-chart .chart-point{fill:var(--accent);stroke:var(--bg);stroke-width:2}
.calc-axis{display:flex;justify-content:space-between;margin-top:.55rem;font-size:.68rem;color:var(--muted-2);font-weight:600}
.calc-cta{text-align:center;margin-top:2rem}

/* Pricing ------------------------------------------------------------------- */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem;max-width:820px;margin:0 auto}
@media (max-width:720px){.price-grid{grid-template-columns:1fr}}
.price{
  background:var(--bg2);border:1px solid var(--line-2);border-radius:var(--radius-xl);
  padding:2.3rem 2rem;position:relative;
}
.price.pro{
  border-color:var(--accent);
  background:linear-gradient(165deg,var(--bg2),rgba(0,255,157,.05));
}
.price-badge{
  position:absolute;top:-12px;right:1.5rem;
  background:var(--accent);color:#0a0a0c;font-weight:800;
  font-size:.7rem;letter-spacing:.1em;
  padding:.35rem .9rem;border-radius:999px;text-transform:uppercase;
}
.price-name{font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.9rem}
.price-amt{font-size:3.2rem;font-weight:900;line-height:1;letter-spacing:-.02em}
.price-amt small{font-size:.95rem;font-weight:500;color:var(--muted);margin-left:.2rem}
.price-desc{margin:.8rem 0 1.6rem;font-size:.92rem;line-height:1.6}
.price-list{margin-bottom:1.8rem}
.price-list li{
  display:flex;align-items:flex-start;gap:.6rem;
  font-size:.92rem;padding:.5rem 0;color:var(--muted);
  border-bottom:1px solid var(--line);
}
.price-list li:last-child{border-bottom:none}
.price-list li.yes{color:var(--text)}
.price-list li svg{flex-shrink:0;margin-top:.3em}
.price-list li.yes svg{color:var(--accent)}
.price-list li.no svg{color:var(--muted-2)}

/* FAQ ---------------------------------------------------------------------- */
.faq{max-width:760px;margin:0 auto}
.faq details{
  background:var(--bg2);border:1px solid var(--line-2);border-radius:10px;
  margin-bottom:.7rem;overflow:hidden;transition:border-color .18s var(--ease);
}
.faq details[open]{border-color:var(--accent-ring)}
.faq summary{
  list-style:none;cursor:pointer;padding:1.1rem 1.4rem;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  font-weight:700;font-size:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'+';font-size:1.4rem;color:var(--accent);font-weight:400;
  transition:transform .2s var(--ease);line-height:1;
}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 1.4rem 1.3rem;color:var(--muted);font-size:.94rem;line-height:1.7}

/* Final CTA ---------------------------------------------------------------- */
.final{
  text-align:center;padding:6rem 1rem;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%,rgba(0,255,157,.1),transparent 65%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.final h2{max-width:780px;margin:0 auto 1rem}
.final p{max-width:540px;margin:0 auto 2rem;font-size:1.05rem}

/* Footer ------------------------------------------------------------------- */
.footer{padding:3.5rem 0 2rem;background:var(--bg2);border-top:1px solid var(--line)}
.footer-top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;
  margin-bottom:2.5rem;
}
@media (max-width:780px){.footer-top{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-top{grid-template-columns:1fr}}
.footer-col h4{font-size:.78rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}
.footer-col ul li{margin-bottom:.55rem}
.footer-col ul li a{font-size:.9rem;color:var(--text);transition:color .15s}
.footer-col ul li a:hover{color:var(--accent)}
.footer-about{font-size:.9rem;color:var(--muted);line-height:1.7;max-width:280px;margin-top:1rem}
.footer-bottom{
  padding-top:1.8rem;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;color:var(--muted-2);font-size:.82rem;
}
.footer-bottom .legal{color:var(--muted-2)}
.responsible{font-size:.8rem;color:var(--muted-2);text-align:center;margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--line);line-height:1.7}
.responsible strong{color:var(--muted)}

/* Auth pages --------------------------------------------------------------- */
.auth-page{min-height:100vh;display:flex;flex-direction:column}
.auth-main{flex:1;display:grid;place-items:center;padding:3rem 1.2rem;position:relative;overflow:hidden}
.auth-main::before{
  content:'';position:absolute;top:-30%;left:50%;transform:translateX(-50%);
  width:900px;height:700px;
  background:radial-gradient(ellipse 50% 55% at 50% 50%,rgba(0,255,157,.08),transparent 65%);
  pointer-events:none;z-index:0;
}
.auth-card{
  position:relative;z-index:1;width:100%;max-width:460px;
  background:var(--bg2);border:1px solid var(--line-2);border-radius:var(--radius-xl);
  padding:2.4rem 2rem;
  box-shadow:0 40px 100px rgba(0,0,0,.55);
}
.auth-card.wide{max-width:680px}
.auth-card h1{font-size:1.8rem;line-height:1.2;margin-bottom:.4rem}
.auth-card .sub{color:var(--muted);font-size:.95rem;margin-bottom:1.8rem;line-height:1.6}
.auth-foot{text-align:center;font-size:.9rem;color:var(--muted);margin-top:1.4rem}
.auth-foot a{color:var(--accent);font-weight:700}
.auth-foot a:hover{text-decoration:underline}

/* ── ValueLab brand-colored bookmaker chips (per Primitives.jsx solid variant) ─
   Used in: register.html bookmaker picker, dashboard sidebar + edit-modal,
   landing marquee. Each chip is a solid brand-color pill with the white-knockout
   logo (or original color logo for novibet/winmasters/pamestoixima which need
   their native palette to render correctly). */
.vl-bk{display:inline-flex;align-items:center;justify-content:center;height:48px;
  border-radius:8px;flex-shrink:0;padding:0 19px;overflow:hidden;
  transition:transform .18s ease;cursor:default;line-height:1;
  font-family:'Manrope',sans-serif;font-weight:700}
.vl-bk:hover{transform:translateY(-1px)}
.vl-bk img{height:20px;width:auto;display:block;
  filter:brightness(0) invert(1);opacity:.98}
.vl-bk[data-id="novibet"] img,
.vl-bk[data-id="winmasters"] img,
.vl-bk[data-id="pamestoixima"] img{filter:none}
.vl-bk[data-id="bwin"] img{filter:brightness(0)}
.vl-bk[data-id="stoiximan"]   { background:#2d6fa8 }
.vl-bk[data-id="novibet"]     { background:#0d1530 }
.vl-bk[data-id="betsson"]     { background:#e87211 }
.vl-bk[data-id="bet365"]      { background:#1aa05a }
.vl-bk[data-id="bwin"]        { background:#f1c40f }
.vl-bk[data-id="fonbet"]      { background:#d42b28 }
.vl-bk[data-id="winmasters"]  { background:#ffffff }
.vl-bk[data-id="pamestoixima"]{ background:#c41818 }
.vl-bk[data-id="betano"]      { background:#ff2d2d }
.vl-bk[data-id="superbet"]    { background:#e30613 }
.vl-bk.tiny{height:24px;padding:0 10px}
.vl-bk.tiny img{height:10px}
.vl-bk.lg{height:44px;padding:0 17px}
.vl-bk.lg img{height:18px}
.vl-bk.compact{height:44px;width:100%;padding:0 17px;cursor:pointer;
  outline:2px solid transparent;outline-offset:2px;
  transition:opacity .15s, outline-color .15s, transform .12s;
  background:initial;border:none}
.vl-bk.compact[data-id="stoiximan"]   { background:#2d6fa8 }
.vl-bk.compact[data-id="novibet"]     { background:#0d1530 }
.vl-bk.compact[data-id="betsson"]     { background:#e87211 }
.vl-bk.compact[data-id="bet365"]      { background:#1aa05a }
.vl-bk.compact[data-id="bwin"]        { background:#f1c40f }
.vl-bk.compact[data-id="fonbet"]      { background:#d42b28 }
.vl-bk.compact[data-id="winmasters"]  { background:#ffffff }
.vl-bk.compact[data-id="pamestoixima"]{ background:#c41818 }
.vl-bk.compact[data-id="betano"]      { background:#ff2d2d }
.vl-bk.compact img{height:18px}
.vl-bk.compact:hover{transform:translateY(-1px)}
.vl-bk.compact.unselected{opacity:.4}
.vl-bk.compact.selected{outline-color:var(--accent);opacity:1}
.vl-bk.compact.coming{cursor:not-allowed;filter:grayscale(.5);opacity:.45}
.vl-bk.compact .badge{position:absolute;font-size:.5rem;font-weight:800;
  letter-spacing:.05em;padding:1px 5px;border-radius:6px;
  background:rgba(255,200,0,.25);color:#ffc800;border:1px solid rgba(255,200,0,.5);
  bottom:-9px;left:50%;transform:translateX(-50%);text-transform:uppercase;line-height:1}

/* Bookmaker picker --------------------------------------------------------- */
.bk-help{font-size:.84rem;color:var(--muted);margin-bottom:.8rem;line-height:1.6}
.bk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.7rem;margin-bottom:.5rem}
.bk-card{
  background:var(--bg3);border:1.5px solid var(--line-2);border-radius:12px;
  padding:.8rem .4rem;cursor:pointer;user-select:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem;
  aspect-ratio:1/1;position:relative;transition:all .18s var(--ease);
}
.bk-card:hover{border-color:var(--line-3);background:var(--bg4)}
.bk-card.selected{border-color:var(--accent);background:var(--accent-dim)}
.bk-card.selected::after{
  content:'✓';position:absolute;top:6px;right:6px;
  width:18px;height:18px;border-radius:50%;
  background:var(--accent);color:#000;
  display:grid;place-items:center;font-weight:800;font-size:.75rem;
}
.bk-logo{
  width:52px;height:52px;border-radius:50%;overflow:hidden;
  display:grid;place-items:center;padding:8px;flex-shrink:0;
}
.bk-logo img{width:100%;height:100%;object-fit:contain}
.bk-logo-fb{width:100%;height:100%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#fff}
.bk-name{font-size:.72rem;font-weight:700;text-align:center;line-height:1.1}
.bk-count{font-family:'Space Mono',ui-monospace,monospace;font-size:.62rem;
  color:var(--warn);margin-top:.6rem;font-weight:700}
.bk-count.ok{color:var(--accent)}

/* Coming-soon books: greyed out, not interactive, with badge */
.bk-card.coming{cursor:not-allowed;opacity:.5;filter:grayscale(.6)}
.bk-card.coming:hover{border-color:var(--line-2);background:var(--bg3)}
.bk-card[disabled]{pointer-events:auto}
.bk-badge{
  position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  background:rgba(255,200,0,.16);color:#ffc800;
  border:1px solid rgba(255,200,0,.35);
  font-size:.55rem;font-weight:700;letter-spacing:.04em;
  padding:1px 6px;border-radius:8px;white-space:nowrap;text-transform:uppercase;
}

/* Reduced motion ----------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .marquee-track{animation:none !important;justify-content:center;flex-wrap:wrap;width:auto}
  .marquee{mask-image:none;-webkit-mask-image:none}
}

/* ── MOBILE TAP TARGETS + LEGIBILITY (login.html, register.html shared) ─── */
@media (max-width:600px){
  /* All interactive elements meet WCAG 2.5.5 minimum 44x44 tap target */
  .btn,.input,.oauth-btn{min-height:48px}
  /* Auth nav: shrink padding so the brand wordmark fits and the picker
     uses full width on narrow screens */
  .nav-inner{padding:.7rem 1rem;gap:.5rem}
  .nav-inner .btn{padding:.55rem 1rem;font-size:.82rem}
  .auth-card{padding:1.6rem 1.25rem!important}
  .auth-card h1{font-size:1.55rem}
  /* Bookmaker picker — bump count text for readability */
  .bk-count{font-size:.7rem}
  /* iOS: prevent zoom-on-focus for inputs <16px */
  .input,input,select,textarea{font-size:max(16px,.95rem)}
}

/* ────────────────────────────────────────────────────────────────────
   Legal pages (terms / privacy / cookies / responsible)
   ──────────────────────────────────────────────────────────────────── */
.legal-page{background:var(--bg)}
.legal-main{max-width:760px;margin:0 auto;padding:3rem 1.5rem 5rem}
.legal-doc{color:var(--text)}
.legal-eyebrow{font-family:'Space Mono',ui-monospace,monospace;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:0 0 .8rem}
.legal-doc h1{font-size:2.4rem;font-weight:900;letter-spacing:-.02em;margin:0 0 .4rem;line-height:1.1}
.legal-updated{font-family:'Space Mono',ui-monospace,monospace;font-size:.74rem;
  color:var(--muted-2);letter-spacing:.05em;margin:0 0 2.4rem}
.legal-doc section{margin-bottom:2.2rem}
.legal-doc h2{font-size:1.18rem;font-weight:800;color:var(--text);margin:0 0 .8rem;letter-spacing:-.01em}
.legal-doc p,.legal-doc li{font-size:.95rem;line-height:1.7;color:var(--muted)}
.legal-doc strong{color:var(--text);font-weight:700}
.legal-doc a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(0,255,157,.3)}
.legal-doc a:hover{border-bottom-color:var(--accent)}
.legal-doc ul,.legal-doc ol{padding-left:1.3rem;margin:.6rem 0}
.legal-doc li{margin:.35rem 0}
.legal-doc code{font-family:'Space Mono',ui-monospace,monospace;font-size:.84em;
  background:var(--bg3);padding:.1rem .4rem;border-radius:4px;color:var(--text)}
.legal-back{margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);
  font-family:'Space Mono',ui-monospace,monospace;font-size:.78rem;letter-spacing:.05em}
.legal-back a{color:var(--muted);border:none}
.legal-back a:hover{color:var(--accent)}

/* Cookie table */
.cookie-table{width:100%;border-collapse:collapse;margin:.8rem 0;font-size:.85rem}
.cookie-table th,.cookie-table td{padding:.7rem .8rem;text-align:left;
  border-bottom:1px solid var(--line);color:var(--muted)}
.cookie-table th{color:var(--text);font-weight:700;background:var(--bg2);
  font-family:'Space Mono',ui-monospace,monospace;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase}
.cookie-table code{font-size:.78em}

/* Responsible-gambling page extras */
.resp-hero{background:linear-gradient(135deg,rgba(0,255,157,.06),rgba(0,255,157,.01));
  border:1px solid rgba(0,255,157,.18);border-radius:14px;padding:1.6rem;margin-bottom:2.4rem}
.resp-hero-h{font-size:1.2rem;font-weight:800;color:var(--text);margin-bottom:.6rem}
.resp-hero p{margin:0}
.resp-rules{counter-reset:r;list-style:none;padding-left:0}
.resp-rules li{counter-increment:r;padding:.7rem 0 .7rem 2.6rem;position:relative;
  border-bottom:1px solid var(--line)}
.resp-rules li:last-child{border-bottom:none}
.resp-rules li::before{content:counter(r);position:absolute;left:0;top:.7rem;
  width:1.8rem;height:1.8rem;display:grid;place-items:center;
  background:var(--accent-dim);color:var(--accent);border-radius:50%;
  font-family:'Space Mono',ui-monospace,monospace;font-weight:700;font-size:.78rem}
.resp-signs{padding-left:1.3rem}
.resp-signs li{position:relative}
.resp-signs li::marker{color:rgba(255,80,80,.7)}
.resp-help-section{background:var(--bg2);border:1px solid var(--line);
  border-radius:14px;padding:1.6rem;margin-bottom:2.2rem}
.resp-help-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.8rem}
.resp-help-card{display:block;background:var(--bg3);border:1px solid var(--line-2);
  border-radius:10px;padding:1rem;text-align:center;text-decoration:none!important;
  border-bottom:1px solid var(--line-2)!important;transition:all .15s}
.resp-help-card:hover{border-color:var(--accent-ring)!important;transform:translateY(-2px)}
.resp-help-num{font-family:'Space Mono',ui-monospace,monospace;font-weight:700;
  font-size:1.3rem;color:var(--accent);margin-bottom:.3rem}
.resp-help-name{font-size:.85rem;font-weight:700;color:var(--text);margin-bottom:.2rem}
.resp-help-sub{font-size:.7rem;color:var(--muted-2);
  font-family:'Space Mono',ui-monospace,monospace;letter-spacing:.04em}
@media (max-width:560px){
  .resp-help-grid{grid-template-columns:1fr}
  .legal-doc h1{font-size:1.8rem}
  .legal-main{padding:2rem 1rem 4rem}
}

/* ────────────────────────────────────────────────────────────────────
   Full footer (used on landing + all legal pages)
   ──────────────────────────────────────────────────────────────────── */
.vl-footer-full{border-top:1px solid var(--line);background:var(--bg2);
  padding:2.4rem 1.5rem 1.4rem;margin-top:3rem}
.vl-footer-grid{max-width:1100px;margin:0 auto;display:grid;
  grid-template-columns:1.4fr 1fr 1.2fr;gap:2.2rem;align-items:start}
.vl-footer-col{display:flex;flex-direction:column;gap:.45rem}
.vl-footer-brand{font-family:'Space Mono',ui-monospace,monospace;font-weight:700;
  font-size:1rem;color:var(--accent);text-shadow:0 0 12px rgba(0,255,136,.35);
  margin-bottom:.3rem}
.vl-footer-brand em{font-style:normal;color:var(--muted);font-weight:400}
.vl-footer-tag{font-size:.78rem;color:var(--muted);line-height:1.55;margin:0;max-width:24ch}
.vl-footer-h{font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  font-weight:700;margin-bottom:.5rem}
.vl-footer-col a{color:var(--muted);font-size:.84rem;text-decoration:none;
  transition:color .12s;padding:.1rem 0}
.vl-footer-col a:hover{color:var(--accent)}
.vl-footer-bottom{max-width:1100px;margin:1.8rem auto 0;padding-top:1.2rem;
  border-top:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:1rem;font-family:'Space Mono',ui-monospace,monospace;
  font-size:.72rem;color:var(--muted-2);letter-spacing:.04em}
.vl-21{display:inline-grid;place-items:center;min-width:34px;height:22px;padding:0 .5rem;
  background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.45);
  color:#ff6b6b;border-radius:6px;font-weight:700;font-size:.7rem;letter-spacing:.04em}
@media (max-width:720px){
  .vl-footer-grid{grid-template-columns:1fr;gap:1.6rem}
  .vl-footer-bottom{flex-direction:column;text-align:center;gap:.6rem}
}

/* Register page — legal consent line */
.legal-consent{margin:1.1rem 0 .4rem;font-size:.78rem;color:var(--muted);
  line-height:1.55;display:flex;align-items:flex-start;gap:.55rem;cursor:pointer;
  user-select:none}
.legal-consent input[type=checkbox]{flex-shrink:0;width:18px;height:18px;margin-top:.1rem;
  accent-color:var(--accent);cursor:pointer}
.legal-consent a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(0,255,157,.3)}
.legal-consent a:hover{border-bottom-color:var(--accent)}

/* Forgot-password link on login page — needs .auth-foot prefix to override
   the .auth-foot a accent-green rule above. */
.auth-foot a.forgot-link{font-size:.78rem;color:var(--muted-2);font-weight:500;
  text-decoration:none;letter-spacing:.01em;border-bottom:1px solid transparent;
  padding-bottom:1px;transition:color .12s,border-color .12s}
.auth-foot a.forgot-link:hover{color:var(--text);border-bottom-color:var(--line-2);
  text-decoration:none}

/* Auth-page bottom legal strip */
.auth-legal-strip{max-width:520px;margin:1.4rem auto 0;padding:0 1.5rem;
  font-family:'Space Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.06em;
  color:var(--muted-2);text-align:center;line-height:1.7}
.auth-legal-strip a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line-2);margin:0 .3rem}
.auth-legal-strip a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.auth-legal-strip .sep{opacity:.4;margin:0 .25rem}