/* =====================================================================
 * base.css — chrome shared by every PaTran page.
 *
 * These rules previously existed as four separate copies, one per HTML
 * file, and had drifted: --border was .07 on the home page and .08 on the
 * other three, --muted .45 vs .5, and privacypolicy.html had lost --coral
 * altogether. Reconciled here to the home page's values, which is the
 * canonical set.
 * ================================================================= */

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

:root {
      --ink:      #0b0f1a;
      --ink-soft: #1c243a;
      --surface:  #111827;
      --card:     #151d2e;
      --amber:    #f59e0b;
      --amber-lt: #fbbf24;
      --teal:     #14b8a6;
      --teal-lt:  #2dd4bf;
      --coral:    #fb7185;
      --indigo:   #818cf8;
      --muted:    rgba(255,255,255,.45);
      --border:   rgba(255,255,255,.07);
      --r:        16px;
    }

html { scroll-behavior: smooth; }

body {
      font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      background: var(--ink);
      color: #e8edf8;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

/* NAV */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 6%;
      background: rgba(11,15,26,.8);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--border);
    }

.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.nav-logo-text {
      font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
      font-weight: 800;
      font-size: 1.5rem; letter-spacing: .01em; color: #fff;
    }

.nav-logo-text span { color: var(--amber); }

/* HERO */
    .hero {
      position: relative;
      display: flex; align-items: center; justify-content: center;
      padding: 120px 6% 64px; overflow: hidden;
    }

.orb { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; }

.orb-amber { width: 500px; height: 500px; background: radial-gradient(circle, rgba(245,158,11,.25) 0%, transparent 70%); top: -80px; right: -60px; }

.orb-teal  { width: 420px; height: 420px; background: radial-gradient(circle, rgba(20,184,166,.2) 0%, transparent 70%); bottom: 0; left: -80px; }

.hero-inner { position: relative; z-index: 1; max-width: 920px; width: 100%; margin: 0 auto; text-align: center; }

h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.8rem, 9.5vw, 8.5rem);
      line-height: .95; letter-spacing: .02em; color: #fff;
      margin-bottom: 20px;
      animation: fadeUp .9s .1s ease both;
    }

h1 em { font-style: normal; color: var(--amber); }

h2 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.6rem, 6vw, 5rem);
      line-height: 1; letter-spacing: .02em; color: #fff; margin-bottom: 18px;
    }

/* PAGE LOADER */
    #pageloader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;
      align-items:center;justify-content:center;gap:22px;background:var(--ink);
      transition:opacity .4s ease,visibility .4s ease;}

#pageloader.hide{opacity:0;visibility:hidden;}

.pl-logo{font-family:'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;font-weight:800;font-size:2rem;color:#fff;letter-spacing:.01em;}

.pl-logo span{color:var(--amber);}

.pl-ring{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.12);
      border-top-color:var(--amber);animation:plspin .8s linear infinite;}

@keyframes plspin{to{transform:rotate(360deg);}}

.pl-text{font-size:.78rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;}

a{ color:var(--amber-lt); }

#pageloader{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; background:var(--ink); transition:opacity .4s ease,visibility .4s ease; }

nav{ position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:16px 6%; background:rgba(11,15,26,.85); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }

.nav-back{ color:var(--muted); text-decoration:none; font-size:.9rem; font-weight:600; }

.nav-back:hover{ color:#fff; }

.hero{ position:relative; padding:72px 6% 34px; text-align:center; overflow:hidden; }

.badge{ display:inline-flex; align-items:center; gap:8px; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--amber-lt); background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.3); padding:7px 16px; border-radius:100px; margin-bottom:20px; }

.updated{ color:var(--muted); font-size:.9rem; margin-top:14px; }

.wrap{ max-width:860px; margin:0 auto; padding:8px 6% 40px; position:relative; z-index:1; }

section{ margin-top:34px; }

p{ color:#cdd5e5; line-height:1.75; margin-bottom:13px; }

ul{ margin:2px 0 14px; padding-left:4px; list-style:none; display:grid; gap:9px; }

li{ position:relative; padding-left:26px; color:#cdd5e5; line-height:1.7; }

li::before{ content:'•'; position:absolute; left:6px; top:0; color:var(--teal-lt); font-weight:800; }

strong{ color:#fff; }

.callout{ border-radius:12px; padding:18px 20px; margin:14px 0; }

.callout p{ margin:0; color:#e8edf8; line-height:1.7; }

footer{ border-top:1px solid var(--border); margin-top:56px; padding:32px 6%; text-align:center; color:var(--muted); font-size:.82rem; }

footer a{ color:var(--muted); text-decoration:none; }

footer a:hover{ color:#fff; }


/* ── Footer links ──────────────────────────────────────────────────────
 * Listed vertically. As a horizontal row these wrapped mid-list once there
 * were five of them, leaving an orphan on a second line that read as a
 * mistake rather than a layout.
 * ------------------------------------------------------------------- */
.footer-simple{
  max-width:1200px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.footer-links{
  display:flex; flex-direction:column; align-items:center; gap:11px;
}
.footer-links a{
  color:var(--muted); text-decoration:none; font-size:.86rem;
  line-height:1.2; padding:3px 2px;          /* a real tap target, not just text */
  transition:color .2s;
}
.footer-links a:hover,
.footer-links a:focus-visible{color:#fff}
.footer-copy{margin:0; color:var(--muted); font-size:.82rem}