/* Virtual Vanguards - legal
   Shared by: ar/privacy-policy.html, ar/terms.html, privacy-policy.html, terms.html, tr/privacy-policy.html, tr/terms.html
   Edit here, not in the HTML. */

/* ===== RESET & VARIABLES ===== */
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

    :root {
      --primary: #6366f1;
      --primary-dark: #4f46e5;
      --secondary: #06b6d4;
      --dark: #0f172a;
      --darker: #020617;
      --card-bg: #0d1526;
      --border: rgba(255,255,255,0.08);
      --text-light: #cbd5e1;
      --text-muted: #94a3b8;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Inter', sans-serif;
      background: var(--darker);
      color: #fff;
      overflow-x: hidden;
      line-height: 1.7;
    }

    /* ===== NAV ===== */
    nav {
      position: fixed; top: 0; width: 100%;
      padding: 1.25rem 2rem;
      background: rgba(2, 6, 23, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
      z-index: 1000;
      transition: all 0.3s ease;
    }

    nav.scrolled {
      background: rgba(15, 23, 42, 0.97);
      padding: 0.9rem 2rem;
      box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    }

    .nav-container {
      max-width: 1400px; margin: 0 auto;
      display: flex; justify-content: space-between; align-items: center;
    }

    .logo {
      font-size: 1.5rem; font-weight: 800;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text; text-decoration: none;
      letter-spacing: -0.5px;
    }

    .nav-back {
      display: inline-flex; align-items: center; gap: 0.5rem;
      color: var(--text-light); text-decoration: none;
      font-size: 0.9rem; font-weight: 500;
      padding: 0.55rem 1.25rem;
      border: 1px solid var(--border);
      border-radius: 50px;
      transition: all 0.25s;
    }

    .nav-back:hover {
      color: #fff;
      border-color: rgba(99,102,241,0.5);
      background: rgba(99,102,241,0.1);
    }

    /* ===== HERO ===== */
    .policy-hero {
      padding: 9rem 2rem 4rem;
      background: linear-gradient(180deg, rgba(99,102,241,0.08) 0%, transparent 100%);
      border-bottom: 1px solid var(--border);
      text-align: center;
    }

    .policy-hero .tag {
      display: inline-flex; align-items: center; gap: 0.5rem;
      background: rgba(99,102,241,0.1);
      border: 1px solid rgba(99,102,241,0.3);
      padding: 0.45rem 1rem; border-radius: 50px;
      font-size: 0.82rem; font-weight: 600;
      color: var(--primary); margin-bottom: 1.5rem;
    }

    .policy-hero h1 {
      font-size: clamp(2rem, 5vw, 3rem);
      font-weight: 900; letter-spacing: -1.5px;
      line-height: 1.15; margin-bottom: 1rem;
    }

    .gradient-text {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .policy-hero .meta {
      color: var(--text-muted); font-size: 0.95rem;
      display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    }

    .policy-hero .meta i { color: var(--secondary); }

    /* ===== CONTENT LAYOUT ===== */
    .policy-content {
      max-width: 820px; margin: 0 auto;
      padding: 4rem 2rem 5rem;
    }

    /* Table of contents */
    .toc {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 1.75rem 2rem;
      margin-bottom: 3.5rem;
    }

    .toc h2 {
      font-size: 1rem; font-weight: 700;
      color: var(--text-light); text-transform: uppercase;
      letter-spacing: 0.08em; margin-bottom: 1rem;
    }

    .toc ol {
      list-style: none; counter-reset: toc-counter;
      display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1.5rem;
    }

    .toc ol li {
      counter-increment: toc-counter;
      display: flex; align-items: center; gap: 0.6rem;
    }

    .toc ol li::before {
      content: counter(toc-counter, decimal-leading-zero);
      font-size: 0.75rem; font-weight: 700;
      color: var(--primary); flex-shrink: 0;
    }

    .toc ol li a {
      color: var(--text-light); text-decoration: none;
      font-size: 0.9rem; transition: color 0.2s;
    }

    .toc ol li a:hover { color: var(--secondary); }

    /* Section blocks */
    .policy-section {
      margin-bottom: 3rem;
      scroll-margin-top: 90px;
    }

    .section-header {
      display: flex; align-items: center; gap: 1rem;
      margin-bottom: 1.25rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid var(--border);
    }

    .section-icon {
      width: 42px; height: 42px; flex-shrink: 0;
      background: linear-gradient(135deg, rgba(99,102,241,0.2), rgba(6,182,212,0.2));
      border: 1px solid rgba(99,102,241,0.3);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1rem; color: var(--primary);
    }

    .policy-section h2 {
      font-size: 1.35rem; font-weight: 700;
      color: #fff;
    }

    .policy-section p {
      color: var(--text-light);
      font-size: 0.97rem;
      line-height: 1.8;
      margin-bottom: 1rem;
    }

    .policy-section p:last-child { margin-bottom: 0; }

    .policy-section ul {
      list-style: none; margin: 0.75rem 0 1rem 0;
    }

    .policy-section ul li {
      color: var(--text-light);
      font-size: 0.97rem;
      padding: 0.4rem 0 0.4rem 1.6rem;
      position: relative;
      line-height: 1.7;
    }

    .policy-section ul li::before {
      content: '';
      position: absolute; left: 0; top: 0.75rem;
      width: 7px; height: 7px; border-radius: 50%;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
    }

    .policy-section ul li strong {
      color: #fff; font-weight: 600;
    }

    /* Highlight box */
    .highlight-box {
      background: rgba(99,102,241,0.08);
      border: 1px solid rgba(99,102,241,0.25);
      border-left: 3px solid var(--primary);
      border-radius: 0 12px 12px 0;
      padding: 1.1rem 1.4rem;
      margin: 1.25rem 0;
      color: var(--text-light);
      font-size: 0.93rem;
      line-height: 1.75;
    }

    .highlight-box strong { color: #fff; }

    /* External link styling */
    .policy-section a {
      color: var(--secondary);
      text-decoration: none;
      border-bottom: 1px solid rgba(6,182,212,0.3);
      transition: border-color 0.2s;
    }

    .policy-section a:hover { border-color: var(--secondary); }

    /* Contact card */
    .contact-card {
      background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(6,182,212,0.08));
      border: 1px solid rgba(99,102,241,0.25);
      border-radius: 16px;
      padding: 2rem;
      display: flex; align-items: center; gap: 1.5rem;
      margin-top: 1rem;
    }

    .contact-card-icon {
      width: 52px; height: 52px; flex-shrink: 0;
      background: var(--primary);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; color: #fff;
    }

    .contact-card h3 {
      font-size: 1rem; font-weight: 700; margin-bottom: 0.3rem;
    }

    .contact-card p { color: var(--text-light); font-size: 0.9rem; margin: 0; }

    .contact-card a {
      display: inline-block; margin-top: 0.5rem;
      color: var(--secondary); font-weight: 600;
      font-size: 0.95rem; border: none;
    }

    /* ===== FOOTER ===== */
    footer {
      padding: 4rem 2rem 2rem;
      border-top: 1px solid rgba(255,255,255,0.1);
    }

    .footer-grid {
      max-width: 1400px; margin: 0 auto;
      display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 3rem; margin-bottom: 3rem;
    }

    .footer-about h3 {
      font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .footer-about p { color: var(--text-light); line-height: 1.8; font-size: 0.93rem; }

    .footer-social { display: flex; gap: 0.75rem; margin-top: 1.5rem; }

    .footer-social a {
      width: 40px; height: 40px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-light); text-decoration: none;
      transition: all 0.3s; font-size: 1rem;
    }

    .footer-links h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; color: #fff; }
    .footer-links ul { list-style: none; }
    .footer-links a {
      color: var(--text-light); text-decoration: none;
      display: block; padding: 0.5rem 0;
      font-size: 0.9rem; transition: color 0.3s;
    }
    .footer-links a:hover { color: var(--primary); border: none; }

    .footer-bottom {
      max-width: 1400px; margin: 0 auto;
      padding-top: 2rem;
      border-top: 1px solid rgba(255,255,255,0.1);
      text-align: center; color: var(--text-muted);
      font-size: 0.87rem;
    }

    /* ===== RESPONSIVE ===== */
    @media (max-width: 768px) {
      .policy-hero { padding: 8rem 1.25rem 3rem; }
      .policy-content { padding: 3rem 1.25rem 4rem; }
      .toc ol { grid-template-columns: 1fr; }
      .contact-card { flex-direction: column; text-align: center; }
      .footer-grid { grid-template-columns: 1fr; }
    }


/* ===== FOOTER TAP TARGETS =====
   Measured, not assumed: every visible footer link was 20-42px tall on a phone,
   short of the 44px minimum, across all 69 pages that carry a footer. The
   mobile-optimization landing page sells "tap targets big enough for a thumb and
   spaced so the wrong one is not hit", so the footer failing it was not
   something to leave.

   Repeated in every stylesheet that styles the footer because this site loads
   one page stylesheet per page rather than a single shared one — there is no
   file every page links that could carry it once. The descendant `footer` puts
   this at (0,1,2) against the (0,1,1) of the `.footer-links a` rule above, so it
   wins regardless of order.

   Scoped to (pointer: coarse): a mouse does not need a 44px target, so desktop
   layout is untouched. */
@media (pointer: coarse) {
    footer .footer-links a {
        display: flex;
        align-items: center;
        min-height: 44px;
    }

    /* The links carry their own height now, so the old gap would double up. */
    footer .footer-links ul li {
        margin-bottom: 0.15rem;
    }
}