:root{
  /* Tokens */
  --bg:#0a0a0a;
  --panel:#111214;
  --ink:#f6f7fb;
  --muted:#9aa0a6;
  --gold:#c2a43c;
  --ring:rgba(255,255,255,.08);
  --shadow-lg:0 20px 60px rgba(0,0,0,.35);
  --radius:16px;
  --nav-h:64px;

  /* Glow palette */
  --glow-1: rgba(194,164,60,.16);
  --glow-2: rgba(194,164,60,.11);
  --glow-3: rgba(194,164,60,.07);
}

/* ===== Base ===== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* tiny noise to avoid banding */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><filter id="n"><feTurbulence baseFrequency="0.9" numOctaves="2" seed="3"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.02"/></svg>');
  background-size:160px 160px;
}

/* One fixed background layer for the whole page (no sectional feathers) */
.site-bg{
  position:fixed;
  /* overscan so parallax/scroll never shows an edge */
  inset:-30vh -15vw;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(1100px 600px at 12% 12%, var(--glow-1), transparent 70%),
    radial-gradient(1200px 700px at 85% 5%,  var(--glow-2), transparent 72%),
    radial-gradient(900px 420px at 55% 115%, var(--glow-3), transparent 78%),
    var(--bg);
}
/* soft vignette so there are no “bands” near page edges */
@supports (mask-image: linear-gradient(black,transparent)) or (-webkit-mask-image: linear-gradient(black,transparent)){
  .site-bg{
    -webkit-mask-image: radial-gradient(130% 120% at 50% 40%, #000 60%, transparent 100%);
            mask-image: radial-gradient(130% 120% at 50% 40%, #000 60%, transparent 100%);
  }
}

a{ color:inherit; text-decoration:none }
a:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:8px }

.container{ max-width:1120px; margin:0 auto; padding:0 24px }
.grid{ display:grid; gap:22px }

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--ring);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-lg);
}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 18px; border-radius:999px;
  border:1px solid var(--gold);
  color:var(--bg); background:var(--gold); font-weight:600;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn.ghost{ background:transparent; border-color:var(--ring); color:var(--ink) }

/* ===== Skip link ===== */
.skiplink{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden }
.skiplink:focus{
  left:12px; top:12px; width:auto; height:auto; padding:8px 12px;
  background:#111; color:#fff; border:1px solid var(--gold); border-radius:10px; z-index:9999;
}

/* ===== Nav ===== */
.nav{
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:linear-gradient(to bottom, rgba(10,10,10,.95), rgba(10,10,10,.72));
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid var(--ring);
}
.nav__wrap{ height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 24px }
.brand{ font-weight:700; letter-spacing:.2px }

/* push content below sticky header; fix anchor jumps */
main{ padding-top:calc(var(--nav-h) + 8px) }
:root{ scroll-padding-top:var(--nav-h) }

/* ===== Hero (overscanned glow, clipped inside hero only) ===== */
.hero{
  position:relative;
  overflow:hidden;       /* hard clip overscan */
  isolation:isolate;
  background:transparent;
}
.hero__bg{
  position:absolute; z-index:0; pointer-events:none;
  /* generous overscan so GSAP parallax never exposes an edge */
  top:-42vh; right:-10vw; bottom:-46vh; left:-10vw;
  opacity:0; animation: heroFade .5s ease-out forwards;
  will-change: transform, opacity;
  background:
    radial-gradient(920px 520px at 16% -6%,  var(--glow-1), transparent 70%),
    radial-gradient(980px 560px at 86% -12%, var(--glow-2), transparent 72%),
    radial-gradient(720px 320px at 50% 118%, var(--glow-3), transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom,
                         rgba(0,0,0,0) 0%,
                         rgba(0,0,0,1) 16%,
                         rgba(0,0,0,1) 84%,
                         rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom,
                         rgba(0,0,0,0) 0%,
                         rgba(0,0,0,1) 16%,
                         rgba(0,0,0,1) 84%,
                         rgba(0,0,0,0) 100%);
}
@keyframes heroFade{ to { opacity:1 } }

.hero__inner{ position:relative; z-index:2; padding:96px 0 88px }
.hero h1{ font-size:clamp(34px,6vw,64px); line-height:1.04; margin:0 }
.hero p{ max-width:58ch; opacity:.85 }

/* ===== Sections ===== */
.section{ position:relative; background:transparent; padding:64px 0 }

/* Care (light surface) — keep fully opaque and above any effects */
.section--ivory{ background:transparent; padding:56px 0 }
.section--ivory .container{ position:relative }

.care{ --care-bg:#f4f3ef; --care-ink:#0f1012 }
.care .card{
  margin:0 auto; max-width:960px; padding:28px 22px;
  background:var(--care-bg); color:var(--care-ink);
  border:1px solid rgba(16,16,16,.08);
  box-shadow:0 18px 36px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  position:relative; z-index:2;  /* ensure above anything decorative */
  overflow:hidden;
}
.care .card h1,
.care .card h2,
.care .card p,
.care .card li,
.care .card small{ color:var(--care-ink) }

/* Care ghost button (light variant) */
.care .card .btn.ghost{
  background:#fff; color:#222; border-color:rgba(16,16,16,.18);
}
.care .card .btn.ghost:hover{ background:#f7f7f3; border-color:rgba(16,16,16,.28) }
.care .card .btn.ghost:focus-visible{ outline:2px solid #111; outline-offset:2px }

/* ===== Stack Pills ===== */
.badges{
  position:relative; z-index:3;    /* sits above hero background */
  display:flex; flex-wrap:wrap; gap:10px;
  margin-top:18px;
  padding:14px 16px;
  border-radius:24px;
  background:rgba(255,255,255,0.03);
  box-shadow:0 12px 24px rgba(0,0,0,.20);
  border:1px solid rgba(194,164,60,.18);
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border:1px solid rgba(194,164,60,.45);
  border-radius:999px; color:#e9e7df; background:rgba(255,255,255,0.02);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.badge:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.06) }
.badge:focus-visible{ outline:2px solid var(--gold); outline-offset:4px }
.badge span{ font-size:14px; letter-spacing:.2px }
.badge svg{ width:18px; height:18px; display:block }

/* ===== Links grid ===== */
.link-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px }
.link-card a{
  display:block; padding:16px 18px; border:1px solid var(--ring); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.link-card a:hover{
  transform: translateY(-2px);
  border-color: rgba(194,164,60,.45);
  background: rgba(255,255,255,.04);
}
.link-card h3{ margin:0 0 6px; font-size:16.5px }
.link-card p{ margin:0 0 10px; color:var(--muted); font-size:14px }
.link-card .pill{
  display:inline-block; font-size:12.5px; border:1px solid var(--gold); padding:4px 10px; border-radius:999px; opacity:.85;
}

/* ===== Footer ===== */
.footer{ padding:36px 0; color:var(--muted); font-size:14px; border-top:1px solid var(--ring) }

/* ===== Responsive ===== */
@media (max-width:640px){
  .container{ padding:0 16px }
  .hero__inner{ padding:80px 0 72px }
  .badges{ padding:12px 12px }
  .btn{ padding:11px 16px }
}

/* ===== Motion safety ===== */
@media (prefers-reduced-motion: reduce){
  .btn:hover,
  .badge:hover,
  .link-card a:hover{ transform:none }
}