/* Base */
:root{
  --bg: #F9F9FA;
  --card: #FFFFFF;
  --ink: #111111;
  --muted: #6B7280;
  --brand1: #4f46e5;
  --brand2: #6366f1;
  --radius: 20px;
  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 32px rgba(0,0,0,.12);
}

html, body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand1); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Header */
.legal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 18px 6%;
}

.brand{ display:flex; align-items:center; gap:12px; font-weight:800; color:#111; }
.brand img{ width:48px; height:auto; }
.brand span{ font-size:22px; letter-spacing:0.5px; }

.legal-nav a{ margin-left:16px; font-weight:600; color:#111; }
.legal-nav a:hover{ color: var(--brand1); }

/* Wrapper */
.legal-wrapper{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 6% 56px 6%;
}

/* Hero */
.hero{
  background: linear-gradient(135deg, var(--brand1), var(--brand2));
  color:#fff;
  border-radius: var(--radius);
  padding: 36px 28px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
}
.hero h1{ margin: 0 0 6px 0; font-size: 40px; font-weight: 800; }
.hero .subtitle{ margin:0; opacity:.9; }

/* Cards */
.card{
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 22px;
  margin: 16px 0;
  box-shadow: var(--shadow-sm);
}
.card h2{ margin-top:0; font-size: 22px; }
.card p, .card li{ line-height: 1.7; color:#222; }
.card ul{ margin: 8px 0 0 18px; }

/* Contact card pop */
.card.contact{
  border-left: 6px solid var(--brand1);
}

/* Footer */
.legal-footer{
  padding: 26px 6% 40px 6%;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap; gap: 12px;
  color:#444;
}
.legal-footer .links a{ margin-left:14px; color:#444; }
.legal-footer .links a:hover{ color: var(--brand1); }

/* Responsive */
@media (max-width: 1024px){
  .hero h1{ font-size: 34px; }
}

@media (max-width: 768px){
  .legal-header{ padding: 14px 4%; }
  .legal-wrapper{ padding: 20px 4% 44px 4%; }
  .hero{ padding: 28px 22px; }
  .hero h1{ font-size: 28px; }
  .card{ padding: 18px; }
}

@media (max-width: 480px){
  .brand span{ font-size: 18px; }
  .legal-nav a{ margin-left: 12px; }
  .hero h1{ font-size: 24px; }
}