/* ================================================================
   BlueWave IT — gdpr.css
   ================================================================ */

    /* ── TOKENS ── */
    :root {
      --bg:        #060e1a;
      --bg-alt:    #0a1523;
      --bg-card:   rgba(255,255,255,0.038);
      --bg-card-h: rgba(255,255,255,0.065);
      --text:      #eef4fc;
      --muted:     #7d9ab8;
      --muted-2:   #a4bdd4;
      --line:      rgba(255,255,255,0.09);
      --line-s:    rgba(255,255,255,0.14);
      --cyan:      #00c2cb;
      --cyan-2:    #38d9e8;
      --cyan-3:    #b2f5ff;
      --blue:      #0f4c81;
      --blue-m:    #1565a8;
      --green:     #3ee89a;
      --amber:     #ffcf4e;
      --danger:    #ff5f5f;
      --shadow:    0 20px 64px rgba(0,0,0,0.50);
      --r:         20px;
      --r-sm:      13px;
      --max:       940px;
      --hh:        72px;
      --fd:        'Syne', sans-serif;
      --fd-head:   'Questrial', sans-serif;
      --fb:        'DM Sans', sans-serif;
      --fm:        'DM Mono', monospace;
    }
    body.theme-light {
      --bg:        #f3f8fd;
      --bg-alt:    #e8f1fa;
      --bg-card:   rgba(255,255,255,0.85);
      --bg-card-h: rgba(255,255,255,0.98);
      --text:      #0a1628;
      --muted:     #4d6b88;
      --muted-2:   #3d5a74;
      --line:      rgba(10,22,40,0.09);
      --line-s:    rgba(10,22,40,0.15);
    }

    /* ── RESET ── */
    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0; font-family: var(--font-body, 'DM Sans', sans-serif); font-size: 1rem;
      line-height: 1.75; color: var(--text);
      background:
        radial-gradient(ellipse 90% 50% at 5% 0%,    rgba(0,194,203,0.11), transparent 55%),
        radial-gradient(ellipse 55% 40% at 95% 10%,  rgba(15,76,129,0.10), transparent 52%),
        radial-gradient(ellipse 40% 35% at 50% 100%, rgba(0,194,203,0.05), transparent 60%),
        linear-gradient(180deg, #060e1a 0%, #07101e 100%);
      overflow-x: hidden; transition: background 250ms ease, color 250ms ease;
    }
    body.theme-light {
      background:
        radial-gradient(ellipse 90% 50% at 5% 0%,   rgba(0,194,203,0.07), transparent 55%),
        radial-gradient(ellipse 55% 40% at 95% 10%, rgba(15,76,129,0.06), transparent 52%),
        linear-gradient(180deg, #f3f8fd 0%, #edf4fb 100%);
    }
    h1,h2,h3 { font-family: var(--fd-head); margin: 0; }
    h1 { font-weight: 400; letter-spacing: 0.01em; }
    h2 { font-weight: 400; letter-spacing: 0.01em; }
    h3 { font-weight: 600; letter-spacing: -0.01em; font-family: var(--font-heading, 'Questrial', sans-serif); }
    h4 { font-family: var(--font-heading, 'Questrial', sans-serif); font-weight: 600; margin: 0; }
    p  { margin: 0; }
    a  { color: var(--cyan-2); text-decoration: none; transition: opacity 160ms; }
    a:hover { opacity: 0.75; }
    button { font: inherit; cursor: pointer; }
    .container { width: min(calc(100% - 40px), var(--max)); margin: 0 auto; }

    /* ── REVEAL ── */
    .reveal { opacity:0; transform:translateY(22px); transition:opacity 640ms cubic-bezier(0.16,1,0.3,1), transform 640ms cubic-bezier(0.16,1,0.3,1); }
    .reveal.is-visible { opacity:1; transform:none; }
    .reveal-d1 { transition-delay: 80ms; }
    .reveal-d2 { transition-delay: 160ms; }
    .reveal-d3 { transition-delay: 240ms; }

    /* ── HEADER ── */
    .site-header { position:sticky; top:0; z-index:60; backdrop-filter:blur(18px) saturate(160%); background:rgba(6,14,26,0.76); border-bottom:1px solid var(--line); transition:background 200ms; }
    body.theme-light .site-header { background:rgba(243,248,253,0.88); }
    .nav { min-height:var(--hh); display:flex; align-items:center; justify-content:space-between; gap:16px; width:min(calc(100% - 40px), 1240px); margin:0 auto; }
    .logo { display:flex; align-items:center; gap:12px; text-decoration:none; }
    .logo:hover { opacity:1; }
    .logo-mark { width:42px; height:42px; border-radius:12px; background:transparent; display:grid; place-items:center; overflow:hidden; flex:0 0 auto; }
    .logo-wordmark { display:flex; flex-direction:column; line-height:1.1; }
    .logo-wordmark strong { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color:var(--text); }
    .logo-wordmark span { color:var(--muted); font-size:0.73rem; letter-spacing:0.09em; text-transform:uppercase; }
    .nav-right { display:flex; gap:8px; align-items:center; }
    .tog { display:inline-flex; gap:2px; padding:4px; border-radius:999px; background:rgba(255,255,255,0.04); border:1px solid var(--line); }
    body.theme-light .tog { background:rgba(10,22,40,0.04); }
    .tog-btn { border:0; background:transparent; color:var(--muted); padding:6px 11px; border-radius:999px; font-size:0.83rem; font-weight:500; transition:all 180ms; }
    .tog-btn.active { background:rgba(56,217,232,0.15); color:var(--text); }
    @media (max-width: 600px) {
      .logo-wordmark span { display:none; }
      .nav-right { gap:6px; }
      .tog-btn { padding:5px 8px; font-size:0.76rem; }
      .tog { padding:3px; }
      .nav-theme-tog { display:none; }
    }

    /* ── PAGE HERO ── */
    .page-hero { padding:72px 0 56px; position:relative; overflow:hidden; }
    .page-hero::before {
      content:""; position:absolute; inset:0; z-index:-1;
      background: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 59px,
        rgba(56,217,232,0.025) 59px,
        rgba(56,217,232,0.025) 60px
      ),
      repeating-linear-gradient(
        180deg,
        transparent,
        transparent 59px,
        rgba(56,217,232,0.025) 59px,
        rgba(56,217,232,0.025) 60px
      );
    }
    .breadcrumb { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:0.85rem; margin-bottom:22px; }
    .breadcrumb a { color:var(--muted); transition:color 160ms; }
    .breadcrumb a:hover { color:var(--text); opacity:1; }
    .breadcrumb .sep { opacity:0.4; }
    .breadcrumb .current { color:var(--cyan-2); }
    .hero-pill { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; border:1px solid rgba(56,217,232,0.22); background:rgba(56,217,232,0.06); color:var(--cyan-3); font-size:0.79rem; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; margin-bottom:18px; }
    .hero-pill-dot { width:7px; height:7px; border-radius:50%; background:var(--cyan-2); flex:0 0 auto; animation: pulse 2.4s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.8)} }
    .page-hero h1 { font-size:clamp(2.6rem,5.5vw,4.2rem); line-height:1.04; margin-bottom:18px; }
    .page-hero h1 em { font-style:normal; color:var(--cyan-2); }
    .hero-sub { color:var(--muted-2); font-size:1.06rem; max-width:62ch; line-height:1.65; margin-bottom:32px; }
    .hero-badges { display:flex; flex-wrap:wrap; gap:10px; }
    .badge { display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; border:1px solid var(--line-s); background:var(--bg-card); color:var(--muted-2); font-size:0.83rem; font-weight:500; }
    .badge svg { width:14px; height:14px; stroke:var(--cyan-3); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }

    /* ── STAT BAR ── */
    .stat-bar { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin:52px 0; }
    @media (max-width:640px) { .stat-bar { grid-template-columns:repeat(2,1fr); } }
    .stat-cell { padding:24px 20px; background:var(--bg-alt); text-align:center; }
    .stat-num { font-family:var(--font-mono, 'DM Mono', monospace); font-size:2rem; font-weight:500; color:var(--cyan-2); line-height:1; margin-bottom:6px; }
    .stat-label { font-size:0.82rem; color:var(--muted); font-weight:500; }

    /* ── TOC ── */
    .toc-wrap { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:26px 30px; margin-bottom:52px; }
    .toc-wrap h4 { font-size:0.79rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:16px; font-family:var(--font-mono, 'DM Mono', monospace); }
    .toc-cols { display:grid; grid-template-columns:1fr 1fr; gap:4px 24px; }
    @media (max-width:580px) { .toc-cols { grid-template-columns:1fr; } }
    .toc-cols a { display:flex; align-items:center; gap:9px; color:var(--muted-2); font-size:0.89rem; padding:5px 0; border-bottom:1px solid var(--line); transition:color 160ms; }
    .toc-cols a:hover { color:var(--text); opacity:1; }
    .toc-cols a span.n { font-family:var(--font-mono, 'DM Mono', monospace); font-size:0.75rem; color:var(--cyan-2); min-width:22px; }

    /* ── SECTIONS ── */
    .policy-content { padding-bottom:96px; }
    .section { margin-bottom:56px; scroll-margin-top:88px; }
    .section-divider { height:1px; background:linear-gradient(90deg, var(--cyan-2) 0%, transparent 60%); margin:52px 0; opacity:0.25; }

    .sec-label { display:flex; align-items:center; gap:12px; margin-bottom:22px; }
    .sec-num { font-family:var(--font-mono, 'DM Mono', monospace); font-size:0.75rem; color:var(--cyan-2); letter-spacing:0.06em; min-width:32px; }
    .sec-label h2 { font-size:clamp(1.45rem,2.8vw,2rem); }

    /* Prose */
    .prose { color:var(--muted-2); font-size:0.97rem; line-height:1.8; }
    .prose p + p { margin-top:13px; }
    .prose strong { color:var(--text); font-weight:600; }
    .prose a { color:var(--cyan-2); }
    .prose ul { margin:12px 0 12px 0; padding:0; list-style:none; display:grid; gap:7px; }
    .prose ul li { display:flex; align-items:flex-start; gap:10px; }
    .prose ul li::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--cyan-2); flex:0 0 auto; margin-top:8px; opacity:0.7; }

    /* Tables */
    .tbl-wrap { overflow-x:auto; border-radius:var(--r-sm); border:1px solid var(--line); margin:18px 0; }
    .tbl-wrap table { width:100%; border-collapse:collapse; font-size:0.90rem; }
    .tbl-wrap th { text-align:left; padding:11px 15px; background:var(--bg-alt); color:var(--muted); font-size:0.76rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; border-bottom:2px solid var(--line-s); white-space:nowrap; }
    .tbl-wrap td { padding:12px 15px; color:var(--muted-2); border-bottom:1px solid var(--line); vertical-align:top; }
    .tbl-wrap tr:last-child td { border-bottom:0; }
    .tbl-wrap tr:hover td { background:rgba(255,255,255,0.014); }
    body.theme-light .tbl-wrap tr:hover td { background:rgba(10,22,40,0.02); }
    .tbl-wrap td.emp { color:var(--text); font-weight:600; }
    .tag { display:inline-flex; padding:3px 9px; border-radius:999px; font-size:0.75rem; font-weight:600; white-space:nowrap; }
    .tag-cyan  { background:rgba(56,217,232,0.09);  border:1px solid rgba(56,217,232,0.22); color:var(--cyan-3); }
    .tag-green { background:rgba(62,232,154,0.09);  border:1px solid rgba(62,232,154,0.22); color:#7ef5c0; }
    .tag-amber { background:rgba(255,207,78,0.09);  border:1px solid rgba(255,207,78,0.22);  color:#ffe589; }
    .tag-blue  { background:rgba(21,101,168,0.18);  border:1px solid rgba(56,140,232,0.25);  color:#7ab8f5; }

    /* Callout boxes */
    .callout { padding:16px 20px; border-radius:var(--r-sm); margin:18px 0; display:flex; gap:14px; align-items:flex-start; }
    .callout.info  { background:rgba(56,217,232,0.06);  border:1px solid rgba(56,217,232,0.20); }
    .callout.warn  { background:rgba(255,207,78,0.06);  border:1px solid rgba(255,207,78,0.22); }
    .callout.green { background:rgba(62,232,154,0.06);  border:1px solid rgba(62,232,154,0.20); }
    .callout.blue  { background:rgba(21,101,168,0.12);  border:1px solid rgba(56,140,232,0.22); }
    .callout-icon { font-size:1.05rem; flex:0 0 auto; margin-top:2px; }
    .callout p { font-size:0.90rem; color:var(--muted-2); line-height:1.62; margin:0; }
    .callout p + p { margin-top:8px; }
    .callout strong { color:var(--text); }

    /* Principle cards */
    .principles-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:20px; }
    @media (max-width:580px) { .principles-grid { grid-template-columns:1fr; } }
    .p-card { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-sm); padding:20px; transition:border-color 200ms, transform 200ms; }
    .p-card:hover { border-color:rgba(56,217,232,0.24); transform:translateY(-2px); }
    .p-card-head { display:flex; align-items:center; gap:11px; margin-bottom:9px; }
    .p-icon { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(0,194,203,0.15),rgba(15,76,129,0.22)); border:1px solid rgba(56,217,232,0.18); color:var(--cyan-3); flex:0 0 auto; }
    .p-icon svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .p-card h4 { font-size:0.93rem; }
    .p-art { font-family:var(--font-mono, 'DM Mono', monospace); font-size:0.71rem; color:var(--cyan-2); margin-left:auto; opacity:0.7; white-space:nowrap; }
    .p-card p { color:var(--muted-2); font-size:0.86rem; line-height:1.56; }

    /* Timeline — DPA flow */
    .flow { display:grid; gap:0; margin-top:20px; position:relative; }
    .flow::before { content:""; position:absolute; left:20px; top:24px; bottom:24px; width:2px; background:linear-gradient(180deg, var(--cyan-2), rgba(56,217,232,0.1)); border-radius:2px; }
    .flow-item { display:flex; gap:20px; align-items:flex-start; padding:0 0 28px 0; position:relative; }
    .flow-item:last-child { padding-bottom:0; }
    .flow-dot { width:40px; height:40px; border-radius:50%; border:2px solid rgba(56,217,232,0.30); background:var(--bg-alt); display:grid; place-items:center; flex:0 0 auto; position:relative; z-index:1; }
    .flow-dot svg { width:16px; height:16px; stroke:var(--cyan-3); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .flow-body h4 { font-size:0.95rem; margin-bottom:5px; }
    .flow-body p { color:var(--muted-2); font-size:0.88rem; line-height:1.55; }

    /* Obligation checklist */
    .checklist { display:grid; gap:10px; margin-top:18px; }
    .check-row { display:flex; align-items:flex-start; gap:13px; padding:14px 16px; background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-sm); transition:border-color 160ms; }
    .check-row:hover { border-color:rgba(56,217,232,0.20); }
    .check-icon { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,rgba(62,232,154,0.15),rgba(0,194,203,0.12)); border:1px solid rgba(62,232,154,0.22); display:grid; place-items:center; flex:0 0 auto; margin-top:1px; }
    .check-icon svg { width:13px; height:13px; stroke:#7ef5c0; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
    .check-text h4 { font-size:0.90rem; margin-bottom:3px; }
    .check-text p { color:var(--muted); font-size:0.84rem; line-height:1.5; }

    /* Rights grid */
    .rights-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
    @media (max-width:580px) { .rights-grid { grid-template-columns:1fr; } }
    .right-card { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-sm); padding:17px; transition:border-color 200ms; }
    .right-card:hover { border-color:rgba(56,217,232,0.22); }
    .right-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
    .right-ico { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,rgba(0,194,203,0.14),rgba(15,76,129,0.20)); border:1px solid rgba(56,217,232,0.18); display:grid; place-items:center; flex:0 0 auto; }
    .right-ico svg { width:13px; height:13px; stroke:var(--cyan-3); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
    .right-card h4 { font-size:0.88rem; }
    .art-tag { font-family:var(--font-mono, 'DM Mono', monospace); font-size:0.68rem; color:var(--cyan-2); margin-left:auto; opacity:0.75; }
    .right-card p { color:var(--muted); font-size:0.83rem; line-height:1.52; }

    /* Breach timeline */
    .breach-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:18px; }
    @media (max-width:640px) { .breach-steps { grid-template-columns:1fr; } }
    .b-step { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r-sm); padding:18px 16px; position:relative; overflow:hidden; }
    .b-step::after { content:""; position:absolute; top:0; left:0; right:0; height:3px; }
    .b-step.s1::after { background:linear-gradient(90deg,var(--amber),transparent); }
    .b-step.s2::after { background:linear-gradient(90deg,var(--cyan-2),transparent); }
    .b-step.s3::after { background:linear-gradient(90deg,var(--green),transparent); }
    .b-time { font-family:var(--font-mono, 'DM Mono', monospace); font-size:0.78rem; color:var(--muted); margin-bottom:10px; }
    .b-step h4 { font-size:0.90rem; margin-bottom:7px; }
    .b-step p { color:var(--muted-2); font-size:0.83rem; line-height:1.52; }

    /* CNPD contact */
    .cnpd-card { background:var(--bg-card); border:1px solid var(--line); border-radius:var(--r); padding:28px 30px; margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
    @media (max-width:580px) { .cnpd-card { grid-template-columns:1fr; } }
    .cnpd-card h4 { font-size:1rem; margin-bottom:12px; }
    .cnpd-row { display:flex; align-items:center; gap:10px; color:var(--muted-2); font-size:0.88rem; margin-bottom:9px; }
    .cnpd-row svg { width:14px; height:14px; stroke:var(--cyan-3); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }

    /* CTA section */
    .cta-section { background:linear-gradient(145deg,rgba(0,194,203,0.08),rgba(15,76,129,0.07),rgba(255,255,255,0.02)); border:1px solid rgba(56,217,232,0.22); border-radius:var(--r); padding:40px 36px; margin-top:56px; display:flex; gap:32px; align-items:center; flex-wrap:wrap; }
    .cta-body { flex:1 1 300px; }
    .cta-body h3 { font-size:1.5rem; margin-bottom:10px; }
    .cta-body p { color:var(--muted-2); font-size:0.97rem; }
    .cta-actions { display:flex; flex-direction:column; gap:10px; flex:0 0 auto; }
    .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; font-family:var(--font-heading, 'Questrial', sans-serif); font-size:0.90rem; font-weight:700; letter-spacing:0.02em; text-decoration:none; border:0; cursor:pointer; transition:all 180ms; }
    .btn-primary { background:linear-gradient(135deg,var(--cyan),var(--cyan-2)); color:#04111f; }
    .btn-primary:hover { opacity:0.88; transform:translateY(-1px); }
    .btn-ghost { background:transparent; color:var(--text); border:1px solid var(--line-s); }
    .btn-ghost:hover { background:rgba(255,255,255,0.05); opacity:1; }

    /* Footer */
    .site-footer { border-top:1px solid var(--line); background:var(--bg-alt); padding:36px 0 28px; }
    .footer-inner { width:min(calc(100% - 40px), 1240px); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
    .footer-copy { color:var(--muted); font-size:0.87rem; }
    .footer-links { display:flex; gap:18px; flex-wrap:wrap; }
    .footer-links a { color:var(--muted); font-size:0.87rem; transition:color 160ms; }
    .footer-links a:hover { color:var(--text); opacity:1; }

    .back-to-top { position:fixed; right:20px; bottom:20px; width:42px; height:42px; border-radius:12px; border:1px solid var(--line-s); background:rgba(6,14,26,0.88); backdrop-filter:blur(10px); color:var(--text); display:grid; place-items:center; font-size:1rem; opacity:0; transform:translateY(12px); pointer-events:none; transition:all 200ms; z-index:70; cursor:pointer; }
    .back-to-top.show { opacity:1; transform:none; pointer-events:auto; }
    body.theme-light .back-to-top { background:rgba(255,255,255,0.92); }