/* =========================================================
   GuardPlay — online player protection
   ========================================================= */

:root{
  --bg:         #070b14;
  --bg-alt:     #0b1220;
  --panel:      #101a2d;
  --panel-2:    #13203a;
  --line:       rgba(120,165,235,.16);
  --line-soft:  rgba(120,165,235,.08);

  --txt:        #e8eefb;
  --txt-dim:    #9fb0cd;
  --txt-mute:   #6f819e;

  --blue:       #2f7bef;
  --blue-lt:    #58a6ff;
  --cyan:       #35d6f5;
  --steel:      #8fa6c4;
  --danger:     #ff5f6d;
  --warn:       #ffb020;
  --ok:         #2ee08a;

  --radius:     16px;
  --radius-sm:  10px;
  --shadow:     0 24px 60px -20px rgba(0,0,0,.75);
  --glow:       0 0 0 1px rgba(88,166,255,.25), 0 10px 40px -12px rgba(47,123,239,.55);

  --font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --maxw: 1180px;
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--txt);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; line-height:1.18; font-weight:700; letter-spacing:-.02em; }
p{ margin:0; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
input,select,textarea{ font:inherit; color:inherit; }
code{
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
  font-size:.9em; color:var(--cyan);
  background:rgba(53,214,245,.09);
  border:1px solid rgba(53,214,245,.2);
  padding:.05em .4em; border-radius:6px;
}
svg{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:2;
     stroke-linecap:round; stroke-linejoin:round; }

::selection{ background:rgba(47,123,239,.4); }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:.7rem 1.2rem; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--blue-lt); outline-offset:3px; border-radius:4px; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
.container--narrow{ max-width:820px; }

.section{ padding:110px 0; position:relative; }
section[id]{ scroll-margin-top:86px; }
.section--alt{
  background:
    radial-gradient(900px 400px at 85% 0%, rgba(47,123,239,.07), transparent 70%),
    var(--bg-alt);
  border-block:1px solid var(--line-soft);
}

.section__head{ max-width:680px; margin-bottom:56px; }
.section__title{ font-size:clamp(1.85rem,3.6vw,2.7rem); margin-bottom:14px; }
.section__sub{ color:var(--txt-dim); font-size:1.05rem; }

.eyebrow{
  display:inline-block; margin-bottom:14px;
  font-size:.76rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cyan);
}
.eyebrow::before{
  content:""; display:inline-block; width:26px; height:1px; vertical-align:middle;
  margin-right:10px; background:linear-gradient(90deg,transparent,var(--cyan));
}

.grad{
  background:linear-gradient(100deg,var(--blue-lt),var(--cyan) 60%,#bfe6ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.92em 1.6em; border-radius:12px;
  font-weight:600; font-size:.98rem; white-space:nowrap;
  transition:transform .2s, box-shadow .25s, background .25s, border-color .25s;
}
.btn svg{ width:1.1em; height:1.1em; transition:transform .25s; }
.btn:hover svg{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px); }

.btn--primary{
  background:linear-gradient(135deg,var(--blue),#1e5fc4);
  color:#fff; box-shadow:var(--glow);
}
.btn--primary:hover{ box-shadow:0 0 0 1px rgba(88,166,255,.5), 0 16px 44px -10px rgba(47,123,239,.8); }

.btn--ghost{
  border:1px solid var(--line); color:var(--txt);
  background:rgba(255,255,255,.02); backdrop-filter:blur(6px);
}
.btn--ghost:hover{ border-color:rgba(120,165,235,.4); background:rgba(88,166,255,.08); }

.btn--light{ background:#fff; color:#0b1220; }
.btn--light:hover{ box-shadow:0 16px 40px -12px rgba(0,0,0,.6); }

.btn--block{ width:100%; }

/* =========================================================
   HEADER
   ========================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(7,11,20,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-soft);
}
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:74px; }

.header__progress{
  height:2px; width:0;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  transition:width .1s linear;
}

.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand__logo{ width:38px; filter:drop-shadow(0 4px 12px rgba(47,123,239,.5)); }
.brand__text{ display:flex; flex-direction:column; line-height:1.15; }
.brand__text strong{ font-size:1.08rem; letter-spacing:-.01em; white-space:nowrap; }
.brand__text em{ font-style:normal; font-size:.7rem; color:var(--txt-mute); letter-spacing:.06em; }

.nav__list{ display:flex; align-items:center; gap:6px; }
.nav__list a{
  display:block; padding:.55em .95em; border-radius:9px;
  font-size:.94rem; color:var(--txt-dim); transition:color .2s, background .2s;
}
.nav__list a:hover{ color:var(--txt); background:rgba(255,255,255,.05); }
.nav__list a.is-active{ color:var(--blue-lt); }
.nav__cta{
  margin-left:8px;
  background:linear-gradient(135deg,var(--blue),#1e5fc4) !important;
  color:#fff !important; font-weight:600;
  box-shadow:0 8px 24px -10px rgba(47,123,239,.9);
}

.burger{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); }
.burger span{
  display:block; width:18px; height:2px; margin:3.5px auto; border-radius:2px;
  background:var(--txt); transition:transform .28s, opacity .2s;
}
.burger.is-open span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ position:relative; padding:150px 0 90px; overflow:hidden; }
.hero__canvas{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.hero__glow{
  position:absolute; inset:-30% 0 auto -10%; height:900px; pointer-events:none;
  background:
    radial-gradient(620px 420px at 22% 28%, rgba(47,123,239,.28), transparent 68%),
    radial-gradient(520px 380px at 78% 12%, rgba(53,214,245,.16), transparent 70%);
}
.hero__inner{
  position:relative; display:grid; grid-template-columns:1.15fr .85fr;
  gap:60px; align-items:center;
}

.badge{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.45em 1em; margin-bottom:26px;
  border:1px solid var(--line); border-radius:999px;
  background:rgba(16,26,45,.6); backdrop-filter:blur(8px);
  font-size:.82rem; color:var(--txt-dim);
}
.badge .dot{
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 4px rgba(46,224,138,.18);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(46,224,138,0); } }

.hero__title{ font-size:clamp(2.3rem,5.2vw,4rem); margin-bottom:22px; }
.hero__lead{ max-width:600px; font-size:1.1rem; color:var(--txt-dim); margin-bottom:34px; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:34px; }

.hero__trust{ display:flex; flex-wrap:wrap; gap:22px; font-size:.9rem; color:var(--txt-mute); }
.hero__trust li{ display:flex; align-items:center; gap:.5em; }
.hero__trust svg{ color:var(--ok); width:1.05em; height:1.05em; }

/* shield */
.hero__shield{ position:relative; display:grid; place-items:center; min-height:380px; }
.shield-img{
  width:min(300px,72%); position:relative; z-index:2;
  filter:drop-shadow(0 30px 60px rgba(47,123,239,.45));
  animation:float 7s ease-in-out infinite;
}
@keyframes float{ 50%{ transform:translateY(-16px); } }

.shield-ring{
  position:absolute; border-radius:50%; border:1px solid rgba(88,166,255,.18);
}
.shield-ring--1{ width:340px; height:340px; animation:spin 26s linear infinite; }
.shield-ring--2{
  width:440px; height:440px; border-style:dashed; border-color:rgba(53,214,245,.14);
  animation:spin 40s linear reverse infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* stats */
.stats{
  position:relative; margin-top:80px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden;
}
.stat{ padding:28px 24px; background:rgba(11,18,32,.7); backdrop-filter:blur(6px); }
.stat__num{
  display:block; font-size:clamp(1.6rem,2.6vw,2.2rem); font-weight:700;
  letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff,#8fbaff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat__label{ font-size:.85rem; color:var(--txt-mute); }

/* =========================================================
   CARDS (threats)
   ========================================================= */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

.card{
  position:relative; padding:30px 26px 26px;
  background:linear-gradient(180deg,var(--panel),rgba(11,18,32,.9));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  overflow:hidden;
  transition:transform .3s, border-color .3s, box-shadow .3s;
}
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 220px at var(--mx,50%) var(--my,0%), rgba(88,166,255,.11), transparent 65%);
  opacity:0; transition:opacity .35s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:rgba(120,165,235,.3);
  box-shadow:var(--shadow);
}
.card:hover::after{ opacity:1; }

.card__icon{
  display:grid; place-items:center; width:50px; height:50px; margin-bottom:20px;
  border-radius:14px; color:var(--blue-lt);
  background:linear-gradient(140deg,rgba(47,123,239,.22),rgba(53,214,245,.08));
  border:1px solid rgba(88,166,255,.22);
}
.card__icon svg{ width:24px; height:24px; }
.card h3{ font-size:1.12rem; margin-bottom:10px; }
.card p{ color:var(--txt-dim); font-size:.95rem; margin-bottom:18px; }

.card__tag{
  display:inline-block; padding:.28em .8em; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.risk-high{ color:#ffd3d7; background:rgba(255,95,109,.14); border:1px solid rgba(255,95,109,.32); }
.risk-mid { color:#ffe7bf; background:rgba(255,176,32,.13); border:1px solid rgba(255,176,32,.3); }

/* =========================================================
   RULES
   ========================================================= */
.rules__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:start; }
.rules__intro{ position:sticky; top:110px; }
.rules__intro .btn{ margin-top:26px; }

.rules__list{ display:grid; gap:14px; }
.rule{
  display:flex; gap:20px; padding:22px 24px;
  background:rgba(16,26,45,.55);
  border:1px solid var(--line-soft); border-left:2px solid rgba(88,166,255,.35);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  transition:background .28s, border-left-color .28s, transform .28s;
}
.rule:hover{ background:rgba(19,32,58,.85); border-left-color:var(--cyan); transform:translateX(5px); }
.rule__num{
  flex:none; font-size:1.05rem; font-weight:700; color:var(--blue-lt);
  font-variant-numeric:tabular-nums; padding-top:2px;
}
.rule h3{ font-size:1.02rem; margin-bottom:6px; }
.rule p{ color:var(--txt-dim); font-size:.93rem; }

/* =========================================================
   SELF CHECK
   ========================================================= */
.check{
  display:grid; grid-template-columns:1.25fr .75fr; gap:44px; align-items:center;
  padding:38px;
  background:linear-gradient(160deg,var(--panel),rgba(11,18,32,.8));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.check__form{ display:grid; gap:10px; }

.check__item,.consent{
  position:relative; display:flex; align-items:flex-start; gap:13px;
  padding:14px 16px; border-radius:var(--radius-sm);
  background:rgba(7,11,20,.5); border:1px solid var(--line-soft);
  font-size:.95rem; color:var(--txt-dim); cursor:pointer;
  transition:border-color .22s, background .22s, color .22s;
}
.check__item:hover,.consent:hover{ border-color:rgba(120,165,235,.3); color:var(--txt); }
.check__item input,.consent input{ position:absolute; opacity:0; width:0; height:0; }

.box{
  flex:none; width:20px; height:20px; margin-top:1px; border-radius:6px;
  border:1.5px solid rgba(120,165,235,.4); background:rgba(255,255,255,.03);
  position:relative; transition:background .2s, border-color .2s;
}
.box::after{
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
  opacity:0; transform:scale(.5); transition:opacity .18s, transform .18s;
}
input:checked ~ .box{ background:linear-gradient(135deg,var(--blue),#1e5fc4); border-color:var(--blue); }
input:checked ~ .box::after{ opacity:1; transform:scale(1); }
.check__item:has(input:checked){ color:var(--txt); border-color:rgba(88,166,255,.32); background:rgba(47,123,239,.08); }
input:focus-visible ~ .box{ outline:2px solid var(--blue-lt); outline-offset:2px; }

.check__result{ text-align:center; }
.gauge{
  --p:0;
  width:190px; height:190px; margin:0 auto 20px;
  border-radius:50%; display:grid; place-items:center; position:relative;
  background:
    conic-gradient(var(--gc,var(--blue)) calc(var(--p) * 3.6deg), rgba(120,165,235,.1) 0);
  transition:background .6s ease;
}
.gauge::before{
  content:""; position:absolute; inset:12px; border-radius:50%;
  background:radial-gradient(circle at 50% 30%, var(--panel-2), var(--bg));
  border:1px solid var(--line-soft);
}
.gauge__value{ position:relative; z-index:1; line-height:1; }
.gauge__value b{ font-size:2.6rem; font-weight:700; letter-spacing:-.03em; }
.gauge__value small{ display:block; font-size:.8rem; color:var(--txt-mute); margin-top:4px; }
.check__verdict{ font-size:.95rem; color:var(--txt-dim); min-height:3em; }

/* =========================================================
   TIMELINE
   ========================================================= */
.timeline{ position:relative; display:grid; gap:34px; padding-left:34px; }
.timeline::before{
  content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--blue),var(--cyan),transparent);
  opacity:.5;
}
.step{ position:relative; }
.step__dot{
  position:absolute; left:-34px; top:6px; width:16px; height:16px; border-radius:50%;
  background:var(--bg-alt); border:2px solid var(--blue-lt);
  box-shadow:0 0 0 5px rgba(47,123,239,.12);
}
.step__time{
  display:inline-block; margin-bottom:8px; padding:.2em .7em; border-radius:999px;
  font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--cyan); background:rgba(53,214,245,.09); border:1px solid rgba(53,214,245,.22);
}
.step h3{ font-size:1.15rem; margin-bottom:7px; }
.step p{ color:var(--txt-dim); max-width:620px; }

/* =========================================================
   FORM
   ========================================================= */
.complaint__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:60px; align-items:start; }

.complaint__list{ display:grid; gap:12px; margin:26px 0; }
.complaint__list li{ display:flex; align-items:center; gap:.65em; color:var(--txt-dim); font-size:.96rem; }
.complaint__list svg{ color:var(--ok); flex:none; }

.complaint__note{
  padding:16px 18px; border-radius:var(--radius-sm);
  background:rgba(255,176,32,.07); border:1px solid rgba(255,176,32,.24);
  color:#ffe7bf; font-size:.9rem;
}

.form{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
  padding:34px;
  background:linear-gradient(160deg,var(--panel),rgba(11,18,32,.85));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.field{ display:flex; flex-direction:column; gap:8px; min-width:0; }
.field--full{ grid-column:1 / -1; }
.field label{ font-size:.87rem; font-weight:600; color:var(--txt-dim); }
.field label span{ color:var(--danger); }

.field input,.field select,.field textarea{
  width:100%; padding:.85em 1em; border-radius:var(--radius-sm);
  background:rgba(7,11,20,.65); border:1px solid var(--line);
  transition:border-color .22s, box-shadow .22s, background .22s;
}
.field textarea{ resize:vertical; min-height:120px; }
.field input::placeholder,.field textarea::placeholder{ color:var(--txt-mute); }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--blue); background:rgba(7,11,20,.9);
  box-shadow:0 0 0 3px rgba(47,123,239,.16);
}
.field select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fb0cd' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px;
  padding-right:2.6em;
}
.field select option{ background:var(--panel); color:var(--txt); }

.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{
  border-color:var(--danger); box-shadow:0 0 0 3px rgba(255,95,109,.14);
}
.error{ color:var(--danger); font-size:.8rem; min-height:1em; }
.field__meta{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; }
.counter{ color:var(--txt-mute); font-size:.78rem; font-variant-numeric:tabular-nums; flex:none; }
.counter.is-near b{ color:var(--warn); }

.consent{ font-size:.88rem; align-items:flex-start; }
.consent.is-invalid{ border-color:var(--danger); }

.form__status{
  grid-column:1 / -1; min-height:1.4em; font-size:.92rem; text-align:center;
  color:var(--ok); opacity:0; transform:translateY(-4px);
  transition:opacity .3s, transform .3s;
}
.form__status.is-shown{ opacity:1; transform:none; }
.form__status.is-error{ color:var(--danger); }

#submitBtn.is-loading{ pointer-events:none; opacity:.75; }
#submitBtn.is-loading svg{ animation:spin 1s linear infinite; }

/* =========================================================
   FAQ
   ========================================================= */
.faq{ display:grid; gap:12px; }
.faq__item{
  background:rgba(16,26,45,.55); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); overflow:hidden;
  transition:border-color .25s, background .25s;
}
.faq__item.is-open{ border-color:rgba(88,166,255,.3); background:rgba(19,32,58,.8); }
.faq__q{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  width:100%; padding:20px 22px; text-align:left;
  font-size:1.02rem; font-weight:600;
}
.faq__q svg{ flex:none; width:20px; height:20px; color:var(--blue-lt); transition:transform .3s; }
.faq__item.is-open .faq__q svg{ transform:rotate(180deg); }
.faq__a{ overflow:hidden; height:0; transition:height .32s ease; }
.faq__a p{ padding:0 22px 22px; color:var(--txt-dim); font-size:.96rem; }

/* =========================================================
   CTA + FOOTER
   ========================================================= */
.cta{
  padding:80px 0;
  background:
    radial-gradient(700px 300px at 20% 0%, rgba(53,214,245,.16), transparent 70%),
    linear-gradient(120deg,#1a4fb0,#2f7bef 55%,#1c63d8);
}
.cta__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:26px; }
.cta h2{ font-size:clamp(1.5rem,3vw,2.15rem); margin-bottom:8px; }
.cta p{ color:rgba(255,255,255,.85); }

.footer{ padding:70px 0 26px; background:#050810; border-top:1px solid var(--line-soft); }
.footer__grid{
  display:grid; grid-template-columns:1.5fr .8fr .8fr .8fr 1.1fr; gap:36px; padding-bottom:44px;
}
.footer__brand{ display:flex; gap:16px; align-items:flex-start; }
.footer__logo{ width:44px; flex:none; }
.footer__brand p{ color:var(--txt-mute); font-size:.92rem; }
.footer__brand strong{ color:var(--txt); font-size:1.05rem; }

.footer__col h4{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--steel); margin-bottom:16px; }
.footer__col ul{ display:grid; gap:10px; }
.footer__col a{ color:var(--txt-dim); font-size:.93rem; transition:color .2s; }
.footer__col a:hover{ color:var(--blue-lt); }
.footer__warn{ font-size:.88rem; color:var(--txt-mute); border-left:2px solid rgba(255,176,32,.5); padding-left:14px; }

.footer__bottom{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-top:24px; border-top:1px solid var(--line-soft);
  color:var(--txt-mute); font-size:.85rem;
}
.to-top{
  display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
  border:1px solid var(--line); color:var(--txt-dim);
  transition:background .22s, color .22s, transform .22s;
}
.to-top:hover{ background:rgba(88,166,255,.12); color:var(--txt); transform:translateY(-3px); }

/* =========================================================
   REVEAL ON SCROLL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .65s ease, transform .65s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* =========================================================
   INNER PAGES — page hero, breadcrumbs
   ========================================================= */
.page-hero{
  position:relative; padding:142px 0 62px; overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(720px 340px at 12% 0%, rgba(47,123,239,.2), transparent 68%),
    radial-gradient(560px 300px at 88% 10%, rgba(53,214,245,.1), transparent 70%),
    var(--bg);
}
.page-hero__inner{ position:relative; max-width:800px; }
.page-hero h1{ font-size:clamp(1.95rem,4.4vw,3.05rem); margin-bottom:16px; }
.page-hero .lead{ color:var(--txt-dim); font-size:1.08rem; max-width:700px; }

.breadcrumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55em;
  margin-bottom:18px; font-size:.84rem; color:var(--txt-mute);
}
.breadcrumbs a{ color:var(--txt-mute); transition:color .2s; }
.breadcrumbs a:hover{ color:var(--blue-lt); }
.breadcrumbs li + li::before{ content:"/"; margin-right:.55em; color:rgba(120,165,235,.35); }
.breadcrumbs [aria-current]{ color:var(--txt-dim); }

.meta-bar{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin-top:28px;
  font-size:.85rem; color:var(--txt-mute);
}
.meta-bar b{ color:var(--txt-dim); font-weight:600; }

.section--tight{ padding:70px 0; }
.nav__list a.is-current{ color:var(--blue-lt); }

/* =========================================================
   DOCUMENT LAYOUT (legal pages)
   ========================================================= */
.doc{ display:grid; grid-template-columns:246px 1fr; gap:56px; align-items:start; }

.toc{ position:sticky; top:100px; }
.toc h2{
  font-size:.76rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel); margin-bottom:14px;
}

/* the TOC is a <details open>: the summary only appears on small screens,
   where JS collapses it. Without JS it stays open and fully usable. */
.toc summary{
  display:none; align-items:center; justify-content:space-between; gap:14px;
  list-style:none; cursor:pointer;
  font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--steel);
}
.toc summary::-webkit-details-marker{ display:none; }
.toc summary::marker{ content:""; }
.toc summary svg{ flex:none; width:18px; height:18px; color:var(--blue-lt); transition:transform .3s; }
.toc[open] summary svg{ transform:rotate(180deg); }

.toc ol{ display:grid; gap:1px; }
.toc a{
  display:block; padding:.5em .9em; font-size:.87rem; line-height:1.4;
  color:var(--txt-mute); border-left:2px solid var(--line-soft);
  transition:color .2s, border-color .2s, background .2s;
}
.toc a:hover{ color:var(--txt); background:rgba(255,255,255,.03); }
.toc a.is-active{
  color:var(--blue-lt); border-left-color:var(--blue); background:rgba(88,166,255,.07);
}

.prose{ max-width:760px; overflow-wrap:break-word; }
.prose > * + *{ margin-top:1.05em; }
.prose h2{
  font-size:1.35rem; margin-top:2.6em; scroll-margin-top:96px;
  padding-bottom:.5em; border-bottom:1px solid var(--line-soft);
}
.prose h2:first-child{ margin-top:0; }
.prose h2 .num{ color:var(--blue-lt); font-variant-numeric:tabular-nums; margin-right:.55em; }
.prose h3{ font-size:1.06rem; margin-top:1.9em; }
.prose p,.prose li,.prose dd{ color:var(--txt-dim); }
.prose ul,.prose ol{ display:grid; gap:.5em; padding-left:1.35em; }
.prose ul li{ list-style:disc; }
.prose ol li{ list-style:decimal; }
.prose li::marker{ color:var(--blue-lt); }
.prose a{ color:var(--blue-lt); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.prose a:hover{ color:var(--cyan); }
.prose strong{ color:var(--txt); }
.prose dl{ display:grid; gap:.9em; }
.prose dt{ color:var(--txt); font-weight:600; }
.prose dd{ margin:.2em 0 0; padding-left:1.1em; border-left:2px solid var(--line-soft); }
.prose hr{ border:0; border-top:1px solid var(--line-soft); margin:2.4em 0; }

/* ---------- tables ---------- */
.table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  background:rgba(11,18,32,.6);
}
/* inset shadow does not scroll with the content, so it reads as
   "there is more to the right" the whole time */
.table-wrap.has-overflow{ box-shadow:inset -28px 0 24px -24px rgba(2,5,12,.95); }
.scroll-hint{
  display:flex; align-items:center; gap:.4em;
  margin-top:9px; font-size:.78rem; color:var(--txt-mute);
}
table{ width:100%; min-width:520px; border-collapse:collapse; font-size:.9rem; }
th,td{
  padding:13px 16px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-soft); overflow-wrap:break-word;
}
th{
  background:rgba(19,32,58,.8); color:var(--txt);
  font-size:.75rem; letter-spacing:.09em; text-transform:uppercase; white-space:nowrap;
}
td{ color:var(--txt-dim); }
tbody tr:last-child td{ border-bottom:0; }
tbody tr:hover td{ background:rgba(88,166,255,.04); }

/* ---------- callouts ---------- */
.callout{
  padding:18px 20px; border-radius:var(--radius-sm);
  border:1px solid; font-size:.94rem;
}
.callout p + p{ margin-top:.7em; }
.callout--info  { background:rgba(47,123,239,.08); border-color:rgba(88,166,255,.28); color:#cfe3ff; }
.callout--warn  { background:rgba(255,176,32,.07); border-color:rgba(255,176,32,.26); color:#ffe7bf; }
.callout--danger{ background:rgba(255,95,109,.07); border-color:rgba(255,95,109,.28); color:#ffd3d7; }
.callout__title{
  display:flex; align-items:center; gap:.5em;
  font-weight:700; margin-bottom:7px; color:inherit;
}
.callout__title svg{ flex:none; width:1.15em; height:1.15em; }
.callout a{ color:inherit; text-decoration:underline; }

/* =========================================================
   RESOURCES
   ========================================================= */
.res-group + .res-group{ margin-top:52px; }
.res-group__title{
  display:flex; align-items:center; gap:14px; margin-bottom:8px;
  font-size:1.3rem;
}
.res-group__title span{
  display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:11px;
  color:var(--blue-lt);
  background:linear-gradient(140deg,rgba(47,123,239,.22),rgba(53,214,245,.08));
  border:1px solid rgba(88,166,255,.22);
}
.res-group__title span svg{ width:19px; height:19px; }
.res-group__note{ color:var(--txt-dim); font-size:.95rem; margin-bottom:22px; max-width:700px; }

.links{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.link-card{
  display:block; padding:18px 20px;
  background:rgba(16,26,45,.5); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm);
  transition:transform .25s, border-color .25s, background .25s;
}
.link-card:hover{
  transform:translateY(-3px); border-color:rgba(120,165,235,.32); background:rgba(19,32,58,.85);
}
.link-card h3{
  display:flex; align-items:center; gap:.5em;
  font-size:1rem; margin-bottom:5px;
}
.link-card h3 svg{ width:14px; height:14px; color:var(--txt-mute); flex:none; }
.link-card:hover h3 svg{ color:var(--blue-lt); }
.link-card p{ font-size:.88rem; color:var(--txt-dim); }
.link-card code{ font-size:.82em; }
.tag-region{
  display:inline-block; margin-top:10px; padding:.16em .65em; border-radius:999px;
  font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cyan); background:rgba(53,214,245,.08); border:1px solid rgba(53,214,245,.22);
}

/* =========================================================
   PROCESS (how it works)
   ========================================================= */
.proc{ display:grid; gap:16px; }
.proc__item{
  display:grid; grid-template-columns:auto 1fr; gap:26px;
  padding:28px 30px;
  background:linear-gradient(180deg,var(--panel),rgba(11,18,32,.9));
  border:1px solid var(--line-soft); border-radius:var(--radius);
  transition:border-color .28s, transform .28s;
}
.proc__item:hover{ border-color:rgba(120,165,235,.28); transform:translateY(-3px); }
.proc__n{
  font-size:2.1rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,#4f8fef);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.proc__body h3{ font-size:1.15rem; margin-bottom:8px; }
.proc__body p{ color:var(--txt-dim); }
.proc__body p + p{ margin-top:.7em; }
.proc__meta{
  display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px;
  padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:.82rem; color:var(--txt-mute);
}
.proc__meta span{ display:flex; align-items:center; gap:.45em; }
.proc__meta svg{ width:1.05em; height:1.05em; color:var(--blue-lt); }

/* ---------- checklist ---------- */
.checklist{ display:grid; gap:10px; }
.checklist li{
  display:flex; gap:13px; padding:14px 17px;
  background:rgba(7,11,20,.5); border:1px solid var(--line-soft);
  border-radius:var(--radius-sm); color:var(--txt-dim); font-size:.94rem;
}
.checklist svg{ flex:none; width:1.1em; height:1.1em; margin-top:.3em; color:var(--ok); }
.checklist b{ color:var(--txt); font-weight:600; }

/* =========================================================
   ABOUT / CONTACT
   ========================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.split--aside{ grid-template-columns:1.15fr .85fr; }

.panel{
  padding:30px 32px;
  background:linear-gradient(160deg,var(--panel),rgba(11,18,32,.85));
  border:1px solid var(--line-soft); border-radius:var(--radius);
}
.panel h3{ font-size:1.1rem; margin-bottom:14px; }

.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.contact-card{
  padding:26px;
  background:linear-gradient(180deg,var(--panel),rgba(11,18,32,.9));
  border:1px solid var(--line-soft); border-radius:var(--radius);
}
.contact-card__icon{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:18px;
  border-radius:12px; color:var(--blue-lt);
  background:linear-gradient(140deg,rgba(47,123,239,.22),rgba(53,214,245,.08));
  border:1px solid rgba(88,166,255,.22);
}
.contact-card__icon svg{ width:21px; height:21px; }
.contact-card h3{ font-size:1.05rem; margin-bottom:8px; }
.contact-card p{ font-size:.92rem; color:var(--txt-dim); margin-bottom:14px; }
.contact-card a.mail{
  display:inline-block; color:var(--blue-lt); font-weight:600; font-size:.95rem;
  word-break:break-word; text-decoration:underline; text-underline-offset:3px;
}
.contact-card .sla{
  display:block; margin-top:12px; font-size:.8rem; color:var(--txt-mute);
}

/* =========================================================
   404
   ========================================================= */
.nf{
  min-height:78vh; display:grid; place-items:center; text-align:center;
  padding:150px 0 90px;
}
.nf__code{
  font-size:clamp(5rem,16vw,10rem); font-weight:700; line-height:.9; letter-spacing:-.05em;
  background:linear-gradient(180deg,#fff,rgba(88,166,255,.25));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.nf h1{ font-size:clamp(1.5rem,3.4vw,2.2rem); margin:18px 0 14px; }
.nf p{ color:var(--txt-dim); max-width:520px; margin:0 auto 30px; }
.nf__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1024px){
  .hero__inner{ grid-template-columns:1fr; }
  .hero__shield{ order:-1; min-height:280px; }
  .shield-img{ width:200px; }
  .shield-ring--1{ width:250px; height:250px; }
  .shield-ring--2{ width:320px; height:320px; }
  .cards{ grid-template-columns:repeat(2,1fr); }
  .rules__grid,.complaint__grid,.check{ grid-template-columns:1fr; gap:40px; }
  .rules__intro{ position:static; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:34px; }

  .doc{ grid-template-columns:1fr; gap:30px; }
  .toc{
    position:static; padding:18px 20px;
    background:rgba(16,26,45,.55); border:1px solid var(--line-soft);
    border-radius:var(--radius-sm);
  }
  .toc summary{ display:flex; }
  .toc[open] ol{ margin-top:16px; }
  .toc ol{ grid-template-columns:repeat(2,1fr); gap:2px 18px; }
  .split,.split--aside{ grid-template-columns:1fr; gap:36px; }
  .contact-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:820px){
  .nav{
    position:fixed; inset:74px 0 auto 0;
    background:rgba(7,11,20,.97); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .35s ease;
  }
  .nav.is-open{ max-height:520px; }
  .nav__list{ flex-direction:column; align-items:stretch; gap:4px; padding:18px 24px 26px; }
  .nav__list a{ padding:.85em 1em; font-size:1rem; }
  .nav__cta{ margin:8px 0 0; text-align:center; }
  .burger{ display:block; }

  .section{ padding:80px 0; }
  .hero{ padding:120px 0 70px; }
  .stats{ grid-template-columns:repeat(2,1fr); margin-top:60px; }
  .form{ grid-template-columns:1fr; padding:26px 22px; }
  .check{ padding:26px 22px; }

  .page-hero{ padding:112px 0 48px; }
  .section--tight{ padding:60px 0; }
  .links{ grid-template-columns:1fr; }
  .proc__item{ grid-template-columns:1fr; gap:12px; padding:24px 22px; }
  .panel{ padding:24px 22px; }

  /* ---- documents on tablets and large phones ---- */
  .meta-bar{ gap:8px 20px; margin-top:22px; font-size:.82rem; }
  .prose h2{ font-size:1.22rem; margin-top:2.1em; scroll-margin-top:84px; }
  .prose h3{ font-size:1.02rem; margin-top:1.7em; }
  .prose dd{ padding-left:.9em; }
  .callout{ padding:15px 17px; font-size:.92rem; }
  .toc a{ padding:.62em .9em; }        /* bigger tap target */
  table{ font-size:.86rem; min-width:460px; }
  th,td{ padding:11px 13px; }
}

@media (max-width:560px){
  .container{ padding-inline:18px; }
  .cards{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:30px; }
  .hero__trust{ gap:14px 20px; }
  .gauge{ width:160px; height:160px; }
  .gauge__value b{ font-size:2.2rem; }
  .brand__text em{ display:none; }
  .contact-grid{ grid-template-columns:1fr; }

  /* ---- home page ---- */
  .hero{ padding:104px 0 56px; }
  .hero__actions{ gap:12px; }
  .hero__actions .btn,
  .rules__intro .btn,
  .cta .btn{ width:100%; }
  .section{ padding:64px 0; }
  .section__head{ margin-bottom:40px; }
  .stats{ margin-top:44px; }
  .stat{ padding:22px 18px; }
  .card{ padding:26px 22px 22px; }
  .rule{ padding:18px 18px; gap:16px; }
  .faq__q{ padding:17px 18px; font-size:.98rem; gap:12px; }
  .faq__a p{ padding:0 18px 18px; }
  .timeline{ padding-left:28px; }
  .step__dot{ left:-28px; width:14px; height:14px; }
  .footer{ padding:56px 0 22px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; gap:16px; }

  /* ---- documents on phones ---- */
  .page-hero{ padding:100px 0 40px; }
  .page-hero .lead{ font-size:1rem; }
  .breadcrumbs{ font-size:.8rem; margin-bottom:14px; }
  .doc{ gap:24px; }
  .toc{ padding:16px 18px; }
  .toc ol{ grid-template-columns:1fr; }
  .prose h2{ font-size:1.15rem; padding-bottom:.45em; }
  .prose ul,.prose ol{ padding-left:1.15em; }
  .prose .btn{ width:100%; }
  #clearMsg{ display:block; margin:12px 0 0 !important; }
  table{ min-width:420px; font-size:.84rem; }
  th,td{ padding:10px 12px; }
  th{ font-size:.7rem; letter-spacing:.06em; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
                        transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}