:root{
  --bg:#0f0d18;
  --card:#1b1728;
  --cream:#fff2d8;
  --cream2:#f6e7c7;
  --lime:#b9ff38;
  --lime2:#d9ff82;
  --pink:#ff667d;
  --blue:#6b8cff;
  --purple:#9b75ff;
  --text:#fff8ec;
  --muted:#b8aecb;
  --muted2:#81778f;
  --black:#08070c;
  --line:rgba(255,255,255,.11);
}

.legal-page{min-height:70vh}

.legal-hero{padding:76px 0 52px}

.legal-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:28px;
  align-items:center;
}

.legal-hero h1{
  max-width:820px;
  font-size:clamp(2.45rem,5vw,4.8rem);
  letter-spacing:-.06em;
}

.legal-hero p{
  max-width:690px;
  margin-top:18px;
  color:var(--muted);
  font-size:1.08rem;
  line-height:1.75;
}

.legal-side-card{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.04)),var(--card);
  border:1px solid var(--line);
  border-radius:28px;
  padding:26px;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}

.legal-side-icon{
  width:50px;
  height:50px;
  border-radius:16px;
  background:linear-gradient(135deg,var(--lime),var(--lime2));
  color:var(--black);
  display:grid;
  place-items:center;
  font-size:1.25rem;
  margin-bottom:18px;
  box-shadow:0 12px 28px rgba(185,255,56,.18);
}

.legal-side-card h2{
  font-size:1.3rem;
  letter-spacing:-.04em;
}

.legal-side-card p{
  margin-top:10px;
  color:var(--muted);
  font-size:.94rem;
  line-height:1.65;
}

.legal-side-card a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  color:var(--lime);
  font-weight:900;
  transition:.2s ease;
}

.legal-side-card a:hover{color:var(--lime2)}

.legal-section{padding:34px 0 84px}

.legal-card{
  max-width:1100px;
  margin:0 auto;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none;
}

.legal-logo-wrap,
.legal-divider{display:none}

.legal-card h1{
  color:var(--text);
  font-size:clamp(2rem,4vw,3.1rem);
  letter-spacing:-.05em;
  margin-bottom:14px;
}

.legal-card h2{
  margin-top:42px;
  margin-bottom:12px;
  color:var(--cream);
  font-size:1.35rem;
  letter-spacing:-.035em;
}

.legal-card p{
  margin-top:14px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.9;
}

.legal-card strong{color:var(--text)}

.legal-card a{
  color:var(--lime);
  font-weight:800;
  transition:.2s ease;
}

.legal-card a:hover{color:var(--lime2)}

.legal-card ul{
  margin:16px 0 0;
  display:grid;
  gap:12px;
  list-style:none;
}

.legal-card li{
  position:relative;
  color:var(--muted);
  line-height:1.75;
  padding-left:24px;
}

.legal-card li:before{
  content:"";
  position:absolute;
  left:0;
  top:.75em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--lime);
  box-shadow:0 0 0 4px rgba(185,255,56,.1);
}

.menu{
  border:0;
  color:var(--text);
}

.menu-panel{display:none}

.cookie-title i{
  margin-right:6px;
  color:var(--lime);
}

footer{
  border-top:1px solid var(--line);
  padding:42px 0;
  background:rgba(255,255,255,.018);
}

.footer-grid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:28px;
}

.footer-copy{
  margin-top:12px;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
}

.footer-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:18px;
}

.footer-links{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  flex-wrap:wrap;
}

.footer-links a{
  color:var(--muted);
  font-size:.92rem;
  font-weight:800;
  transition:.2s ease;
}

.footer-links a:hover{color:var(--lime)}

.footer-social{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:11px;
  flex-wrap:wrap;
}

.social-icon{
  width:44px;
  height:44px;
  border-radius:15px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.045);
  border:1px solid var(--line);
  color:var(--text);
  transition:.22s ease;
}

.social-icon i{font-size:1.15rem}
.social-icon:hover{transform:translateY(-3px)}
.social-icon.discord:hover{background:#5865F2;border-color:#5865F2;color:#fff}
.social-icon.x:hover{background:#fff;border-color:#fff;color:#000}
.social-icon.instagram:hover{background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4);border-color:transparent;color:#fff}
.social-icon.trustpilot:hover{background:#00B67A;border-color:#00B67A;color:#fff}

.legal-meta{margin:18px 0 34px}

.legal-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(185,255,56,.10);
  border:1px solid rgba(185,255,56,.20);
  color:var(--lime);
  font-size:.9rem;
  font-weight:800;
  line-height:1;
}

.legal-badge i{font-size:.95rem}

@media(max-width:960px){
  .legal-hero-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .legal-side-card{max-width:520px}

  .nav-links,
  .nav-actions{display:none}

  .menu{
    display:grid;
    place-items:center;
    width:44px;
    height:44px;
    border-radius:14px;
    background:rgba(255,255,255,.06);
    border:1px solid var(--line);
    color:var(--text);
    cursor:pointer;
    transition:.18s ease;
  }

  .menu:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.1);
  }

  .menu-panel{
    position:fixed;
    top:76px;
    left:14px;
    right:14px;
    z-index:60;
    background:rgba(27,23,40,.96);
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    backdrop-filter:blur(18px);
    box-shadow:0 24px 60px rgba(0,0,0,.38);
  }

  .menu-panel.open{display:block}

  .menu-panel a{
    display:flex;
    padding:15px;
    border-radius:14px;
    color:var(--muted);
    font-weight:800;
  }

  .menu-panel a:hover{
    background:rgba(255,255,255,.06);
    color:var(--text);
  }
}

@media(max-width:768px){
  .legal-hero{padding:50px 0 34px}

  .legal-hero h1{font-size:clamp(2.1rem,11vw,3.5rem)}

  .legal-hero p{
    font-size:.98rem;
    line-height:1.7;
  }

  .legal-section{padding:28px 0 60px}

  .legal-card{padding:0 18px}

  .legal-card h1{font-size:2rem}

  .legal-card h2{
    font-size:1.16rem;
    margin-top:32px;
  }

  .legal-card p,
  .legal-card li{
    font-size:.92rem;
    line-height:1.78;
  }

  .legal-side-card{
    padding:22px;
    border-radius:22px;
  }

  .legal-meta{margin:16px 0 28px}

  .legal-badge{
    font-size:.82rem;
    padding:9px 14px;
    gap:8px;
  }

  footer{padding:38px 0 32px}

  .footer-grid{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:0;
  }

  .footer-grid > div:first-child{
    width:100%;
    max-width:340px;
    padding-bottom:24px;
    margin-bottom:24px;
    border-bottom:1px solid var(--line);
  }

  .logo{justify-content:center}

  .footer-copy{font-size:.86rem}

  .footer-right{
    width:100%;
    align-items:center;
    gap:22px;
  }

  .footer-links{
    justify-content:center;
    row-gap:12px;
    column-gap:10px 20px;
    max-width:360px;
  }

  .footer-links a{font-size:.88rem}

  .footer-social{
    justify-content:center;
    gap:10px;
  }

  .cookie-notice{
    left:12px;
    right:12px;
    bottom:12px;
    padding:15px;
    border-radius:16px;
  }

  .cookie-buttons{
    flex-direction:column;
    gap:10px;
  }

  .cookie-btn{width:100%}
}

@media(max-width:420px){
  .legal-card{padding:0 16px}

  .legal-card li{padding-left:22px}

  footer{padding:32px 0 28px}

  .footer-grid > div:first-child{
    max-width:100%;
    padding-bottom:20px;
    margin-bottom:20px;
  }

  .footer-links{
    gap:10px 16px;
    max-width:280px;
  }

  .footer-links a{font-size:.84rem}

  .footer-social{gap:8px}

  .social-icon{
    width:40px;
    height:40px;
    border-radius:13px;
  }

  .social-icon i{font-size:1.05rem}
}