/* ── LOGO FONT ── */
    @font-face {
      font-family: 'Riosark';
      src: url('assets/fonts/behance-67573ff87db92.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    .brand {
      font-family: 'Riosark', 'DM Sans', sans-serif;
    }

    /* ── DESIGN TOKENS ── */
    :root {
      --white: #FFFFFF;
      --off-white: #FAFBFC;
      --black: #0A0A0A;
      --cyan: #00D4FF;
      --cyan08: rgba(0,212,255,0.08);
      --cyan15: rgba(0,212,255,0.15);
      --navy: #0B1426;
      --ice: #E8EDF2;
      --red: #FF2D55;
      --red08: rgba(255,45,85,0.08);
      --violet: #8060FF;
      --gray100: #F4F5F7;
      --gray200: #E4E7EB;
      --gray300: #D1D5DB;
      --gray400: #9CA3AF;
      --gray500: #6B7280;
      --gray600: #4B5563;
      --gray700: #374151;
      --gray800: #1F2937;
    }

    /* ── RESET ── */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--white);
      color: var(--black);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      line-height: 1.6;
    }

    /* ── NAV ── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 0 40px;
      height: 64px;
      background: rgba(255, 255, 255, 0.88);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .nav-inner {
      max-width: 1200px;
      margin: 0 auto;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo { height: 44px; width: auto; }
    .nav-back {
      font-size: 13px;
      font-weight: 500;
      color: var(--gray600);
      text-decoration: none;
      transition: color 0.25s;
    }
    .nav-back:hover { color: var(--black); }

    /* ── LEGAL CONTENT ── */
    .legal-content {
      max-width: 720px;
      margin: 0 auto;
      padding: 120px 24px 80px;
    }
    .legal-content h1 {
      font-size: 36px;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
      line-height: 1.2;
    }
    .legal-content .last-updated {
      font-size: 13px;
      color: var(--gray400);
      margin-bottom: 40px;
    }
    .legal-content h2 {
      font-size: 22px;
      font-weight: 600;
      letter-spacing: -0.01em;
      margin-top: 40px;
      margin-bottom: 16px;
      line-height: 1.3;
    }
    .legal-content p {
      font-size: 16px;
      color: var(--gray600);
      line-height: 1.7;
      margin-bottom: 16px;
    }
    .legal-content ul,
    .legal-content ol {
      margin-bottom: 16px;
      padding-left: 24px;
    }
    .legal-content li {
      font-size: 16px;
      color: var(--gray600);
      line-height: 1.7;
      margin-bottom: 8px;
    }
    .legal-content a {
      color: var(--cyan);
      text-decoration: none;
    }
    .legal-content a:hover {
      text-decoration: underline;
    }
    .legal-content strong {
      color: var(--black);
      font-weight: 600;
    }

    /* ── COOKIE TABLE ── */
    .legal-content table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 24px;
      font-size: 14px;
    }
    .legal-content th {
      text-align: left;
      font-weight: 600;
      color: var(--black);
      padding: 12px 14px;
      border-bottom: 3px solid var(--cyan);
      font-size: 13px;
      letter-spacing: 0.02em;
    }
    .legal-content td {
      padding: 10px 14px;
      color: var(--gray600);
      border-bottom: 1px solid var(--gray200);
      font-size: 14px;
      line-height: 1.5;
    }
    .legal-content tr:nth-child(even) td {
      background: var(--gray100);
    }
    .legal-content td code {
      font-family: 'JetBrains Mono', monospace;
      font-size: 13px;
      background: var(--gray100);
      padding: 2px 6px;
      border-radius: 4px;
      color: var(--black);
    }

    /* ── LEGAL PLACEHOLDER (consistency) ── */
    .legal-placeholder {
      background: var(--gray100);
      border: 1px dashed var(--gray300);
      border-radius: 8px;
      padding: 20px 24px;
      color: var(--gray500);
      font-size: 14px;
      margin-bottom: 16px;
    }

    /* ── FOOTER ── */
    .footer-divider { height: 1px; background: var(--gray200); max-width: 1080px; margin: 0 auto; }
    footer { padding: 28px 28px 40px; }
    .footer-inner {
      max-width: 1080px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .footer-logo { height: 14px; }
    .footer-links { display: flex; gap: 24px; }
    .footer-links a {
      font-size: 12px; color: var(--gray400);
      text-decoration: none;
      transition: color 0.25s;
    }
    .footer-links a:hover { color: var(--black); }
    .footer-copy { font-size: 11px; color: var(--gray400); }
    .footer-bottom {
      max-width: 1080px;
      margin: 16px auto 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .footer-legal {
      display: flex;
      gap: 20px;
      align-items: center;
      flex-wrap: wrap;
    }
    .footer-legal a,
    .footer-legal button {
      font-size: 11px;
      color: var(--gray400);
      text-decoration: none;
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'DM Sans', sans-serif;
      padding: 0;
      transition: color 0.25s;
    }
    .footer-legal a:hover,
    .footer-legal button:hover { color: var(--black); }

    /* ── COOKIE BANNER ── */
    .cookie-banner {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: var(--white);
      border-top: 1px solid var(--gray200);
      padding: 20px 28px;
      z-index: 10000;
      box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
      display: none;
    }
    .cookie-banner.active { display: block; }
    .cookie-banner-inner {
      max-width: 1080px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .cookie-text {
      font-size: 13px;
      color: var(--gray600);
      line-height: 1.5;
      flex: 1;
    }
    .cookie-text a { color: var(--cyan); text-decoration: none; }
    .cookie-text a:hover { text-decoration: underline; }
    .cookie-actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-shrink: 0;
    }
    .cookie-btn {
      padding: 9px 22px;
      border-radius: 20px;
      font-family: 'DM Sans', sans-serif;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      border: 1px solid var(--gray300);
      background: var(--white);
      color: var(--black);
      transition: background 0.2s, border-color 0.2s;
    }
    .cookie-btn:hover {
      background: var(--gray100);
      border-color: var(--gray400);
    }
    .cookie-btn-link {
      background: none;
      border: none;
      color: var(--gray500);
      font-size: 13px;
      font-family: 'DM Sans', sans-serif;
      cursor: pointer;
      text-decoration: underline;
      padding: 0;
    }
    .cookie-btn-link:hover { color: var(--black); }

    /* ── COOKIE SETTINGS PANEL ── */
    .cookie-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 10001;
      display: none;
      align-items: center;
      justify-content: center;
    }
    .cookie-overlay.active { display: flex; }
    .cookie-panel {
      background: var(--white);
      border-radius: 16px;
      max-width: 520px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
      box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    }
    .cookie-panel-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 24px;
      border-bottom: 1px solid var(--gray200);
    }
    .cookie-panel-header h3 { font-size: 18px; font-weight: 600; }
    .cookie-panel-close {
      background: none; border: none;
      font-size: 24px; cursor: pointer;
      color: var(--gray400);
      line-height: 1;
    }
    .cookie-panel-close:hover { color: var(--black); }
    .cookie-panel-body { padding: 20px 24px; }
    .cookie-panel-body > p {
      font-size: 13px;
      color: var(--gray500);
      margin-bottom: 20px;
      line-height: 1.5;
    }
    .cookie-panel-body > p a { color: var(--cyan); text-decoration: none; }
    .cookie-panel-body > p a:hover { text-decoration: underline; }
    .cookie-category {
      padding: 16px 0;
      border-bottom: 1px solid var(--gray100);
    }
    .cookie-category:last-child { border-bottom: none; }
    .cookie-category-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .cookie-category-header strong { font-size: 14px; }
    .cookie-always-on {
      font-size: 11px;
      color: var(--cyan);
      font-weight: 500;
      margin-left: 8px;
    }
    .cookie-category-desc {
      font-size: 12px;
      color: var(--gray400);
      margin-top: 6px;
      line-height: 1.5;
    }
    .cookie-toggle {
      position: relative;
      display: inline-block;
      width: 44px; height: 24px;
    }
    .cookie-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
    .cookie-toggle-slider {
      position: absolute; inset: 0;
      background: var(--gray200);
      border-radius: 24px;
      cursor: pointer;
      transition: background 0.2s;
    }
    .cookie-toggle-slider::before {
      content: '';
      position: absolute;
      width: 18px; height: 18px;
      left: 3px; bottom: 3px;
      background: var(--white);
      border-radius: 50%;
      transition: transform 0.2s;
    }
    .cookie-toggle input:checked + .cookie-toggle-slider { background: var(--cyan); }
    .cookie-toggle input:checked + .cookie-toggle-slider::before { transform: translateX(20px); }
    .cookie-panel-footer {
      padding: 16px 24px;
      border-top: 1px solid var(--gray200);
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }

    /* ── RESPONSIVE: TABLET (768px) ── */
    @media (max-width: 768px) {
      nav { padding: 0 20px; }

      .legal-content { padding: 100px 20px 60px; }
      .legal-content h1 { font-size: 28px; }
      .legal-content h2 { font-size: 19px; }

      .legal-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
      }

      .footer-inner { flex-direction: column; gap: 16px; text-align: center; }
      .footer-links { flex-wrap: wrap; justify-content: center; }
      .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
      .footer-legal { justify-content: center; }

      .cookie-banner-inner { flex-direction: column; text-align: center; }
      .cookie-actions { justify-content: center; }
    }

    /* ── RESPONSIVE: MOBILE (480px) ── */
    @media (max-width: 480px) {
      .legal-content { padding: 90px 16px 48px; }
      .legal-content h1 { font-size: 24px; }
      .legal-content h2 { font-size: 18px; margin-top: 32px; }
      .legal-content p,
      .legal-content li { font-size: 15px; }

      footer { padding: 20px 16px 32px; }
    }

    /* ── SAFE AREA ── */
    @supports (padding: env(safe-area-inset-bottom)) {
      footer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
      nav { padding-top: env(safe-area-inset-top); }
    }

    /* Language Selector */
    .lang-selector { display: flex; align-items: center; gap: 4px; }
    .lang-link {
      font-size: 12px; font-weight: 500; color: var(--gray400);
      text-decoration: none; padding: 4px 8px; border-radius: 6px;
      transition: color 0.2s, background 0.2s; letter-spacing: 0.02em;
    }
    .lang-link:hover { color: var(--black); background: var(--gray100); }
    .lang-link.active { color: var(--black); font-weight: 600; background: var(--gray100); }