*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --primary: #5B6AD0;
  --primary-light: #7B8AE8;
  --accent: #E09050;
  --dark: #1E1F35;
  --dark-surface: #252640;
  --dark-surface2: #2C2D4A;
  --white: #FFFFFF;
  --light: #FBF9F6;
  --text-dark: #1A1B2E;
  --text-medium: #4B4D6E;
  --text-light: #8E8FA8;
  --text-on-dark: #EDEBF5;
  --text-on-dark-muted: #A8A6C0;
  --border: #E0DEE6;
  --border-dark: #363758;
  --radius: 8px;
  --transition: 0.25s ease;
}

html{scroll-behavior:smooth;font-size:16px}

body{
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text-dark);
  background: var(--light);
  line-height: 1.75;
}

h1,h2,h3,h4{line-height:1.3;font-weight:700}
h1{font-size:clamp(1.8rem,4vw,2.4rem)}
h2{font-size:clamp(1.3rem,2.5vw,1.6rem)}
h3{font-size:1.05rem}

a{text-decoration:none;color:inherit}

/* ======== NAVIGATION ======== */
.legal-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  background: rgba(30,31,53,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-dark);
}
.legal-nav .nav-inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.legal-nav .nav-logo{
  font-size:1.3rem;
  font-weight:800;
  color: var(--white);
}
.legal-nav .nav-logo span{color:var(--accent)}
.legal-nav .nav-back{
  color: var(--text-on-dark-muted);
  font-size:0.9rem;
  font-weight:500;
  transition: color var(--transition);
}
.legal-nav .nav-back:hover{color:var(--white)}

/* ======== HEADER ======== */
.legal-header{
  background: linear-gradient(135deg, var(--dark), #2A2D50);
  padding: 120px 0 60px;
  text-align:center;
  color: var(--white);
}
.legal-header .container{
  max-width:800px;
  margin:0 auto;
  padding:0 28px;
}
.legal-header h1{
  color: var(--white);
  margin-bottom:14px;
}
.legal-header p{
  color: var(--text-on-dark-muted);
  font-size:0.95rem;
  line-height:1.6;
}

/* ======== CONTENT ======== */
.legal-page .legal-content{
  padding: 48px 0 64px;
  background: var(--white);
}
.legal-page .legal-content .container{
  max-width: 800px;
  margin: 0 auto;
  padding: 0 24px;
}

/* scope isolation: ensure legal sections are never polluted by homepage styling */
.legal-page .legal-content section{
  background-color: transparent !important;
}

.legal-content .last-updated{
  font-size:0.88rem;
  color: var(--text-light);
  margin-bottom:32px;
}

.legal-content .toc{
  background: var(--light);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:24px 28px;
  margin-bottom:40px;
}
.legal-content .toc h3{
  color: var(--text-dark);
  font-size:1rem;
  margin-bottom:14px;
}
.legal-content .toc ol{
  padding-left:20px;
  columns:2;
  column-gap:32px;
}
.legal-content .toc ol li{
  margin-bottom:8px;
  break-inside:avoid;
  font-size:0.88rem;
}
.legal-content .toc ol li a{
  color: var(--primary);
  transition: color var(--transition);
}
.legal-content .toc ol li a:hover{color:var(--primary-dark)}

@media(max-width:600px){
  .legal-content .toc ol{columns:1}
}

.legal-content section{
  margin-bottom:40px;
  padding-top: 24px;
}
.legal-content section h2{
  color: var(--dark);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:2px solid var(--border);
}
.legal-content section p,
.legal-content section li{
  color: var(--text-medium);
  margin-bottom:14px;
  line-height:1.75;
  font-size:0.95rem;
}
.legal-content section ul,
.legal-content section ol{
  padding-left:24px;
  margin-bottom:16px;
}
.legal-content section ul li,
.legal-content section ol li{
  margin-bottom:8px;
}
.legal-content section strong{
  color: var(--text-dark);
}

/* ======== FOOTER ======== */
.legal-footer{
  background: #17172A;
  padding:40px 0 32px;
  color: var(--text-on-dark-muted);
  text-align:center;
}
.legal-footer .container{
  max-width:800px;
  margin:0 auto;
  padding:0 24px;
}
.legal-footer p{font-size:0.88rem;margin-bottom:8px}
.legal-footer a{
  color: var(--primary-light);
  font-weight:500;
  transition: color var(--transition);
}
.legal-footer a:hover{color:var(--white)}

/* ======== SCROLL REVEAL ======== */
.fade-up{
  opacity:0;
  transform:translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.fade-up.visible{
  opacity:1;
  transform:translateY(0);
}