:root{
  --bg: #171515;
  --panel: #221f1f;
  --panel-2: #2b2727;
  --line: rgba(245,243,242,.10);
  --line-strong: rgba(245,243,242,.18);
  --ink: #f5f3f2;
  --ink-dim: #b5b5b5;
  --plum: #a06e8c;
  --plum-deep: #66435c;
  --sage: #9fc0b9;
  --sage-deep: #5d7d76;
  --pink: #eeabac;
  --pink-deep: #b9767a;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 999px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Switzer', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- atmosphere ---------- */
.atmosphere{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 12% 8%, rgba(160,110,140,.28) 0%, transparent 60%),
    radial-gradient(55% 45% at 90% 18%, rgba(159,192,185,.20) 0%, transparent 60%),
    radial-gradient(70% 60% at 50% 100%, rgba(102,67,92,.22) 0%, transparent 65%),
    var(--bg);
}

section, header, footer, main{ position:relative; z-index:2; }

/* ---------- nav ---------- */
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(20px,3vw,36px) clamp(20px,5vw,72px);
}
.nav-mark{
  font-size:13px; letter-spacing:.16em; font-weight:600; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
}
.nav-links{ display:flex; gap: clamp(18px,3vw,40px); list-style:none; }
.nav-links a{
  color:var(--ink-dim); text-decoration:none; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; font-weight:500;
  transition:color .25s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); }

/* ---------- generic hero ---------- */
.hero{
  min-height: 70vh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 0 clamp(20px,5vw,72px);
  padding-top: clamp(40px,6vh,80px);
  padding-bottom: clamp(40px,6vh,80px);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  width:fit-content;
  padding:8px 18px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);
  background:rgba(245,243,242,.04);
  backdrop-filter:blur(12px);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom: clamp(24px,4vh,40px);
}
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--sage); }
.eyebrow.plum .dot{ background:var(--plum); }

h1{
  font-weight:800;
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
  line-height:1.05;
  letter-spacing:-.02em;
}
h1 .accent-plum{ color:var(--plum); font-weight:800; }
h1 .accent-sage{ color:var(--sage); font-weight:800; }
h1 .accent-pink{ color:var(--pink); font-weight:800; }

h2{
  font-weight:700;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  letter-spacing:-.01em;
  line-height:1.15;
}

.hero-sub{
  margin-top: clamp(20px,3vh,32px);
  max-width:50ch;
  font-size: clamp(1rem,1.4vw,1.2rem);
  line-height:1.6;
  color:var(--ink-dim);
  font-weight:400;
}
.hero-sub strong{ color:var(--ink); font-weight:600; }

/* ---------- section scaffolding ---------- */
.section{
  padding: clamp(64px,10vh,120px) clamp(20px,5vw,72px);
  border-top:1px solid var(--line);
}
.section-label{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); font-weight:600; margin-bottom:20px;
}

/* ---------- glass card (generic) ---------- */
.glass{
  position:relative;
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background: linear-gradient(160deg, rgba(245,243,242,.06), rgba(245,243,242,.015));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.glass-glow::before{
  content:"";
  position:absolute; inset:-40% -40% auto auto; width:70%; height:70%;
  border-radius:50%; filter:blur(60px); opacity:.30; z-index:-1;
}
.glass-glow.plum::before{ background:var(--plum-deep); }
.glass-glow.sage::before{ background:var(--sage-deep); }
.glass-glow.pink::before{ background:var(--pink-deep); }

/* ---------- pill badge ---------- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong);
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
  color:var(--ink-dim);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:600; letter-spacing:.02em;
  text-decoration:none; transition: transform .3s ease, background .3s ease, border-color .3s ease;
}
.btn-primary{ background:var(--ink); color:var(--bg); }
.btn-primary:hover{ transform:translateY(-2px); }
.btn-outline{ border:1px solid var(--line-strong); color:var(--ink); background:transparent; }
.btn-outline:hover{ border-color:var(--ink); }

/* ---------- footer ---------- */
footer{
  padding: clamp(40px,6vh,64px) clamp(20px,5vw,72px);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:20px;
  justify-content:space-between; align-items:center;
}
.footer-name{ font-size:13px; color:var(--ink-dim); }
.footer-links{ display:flex; gap:24px; list-style:none; }
.footer-links a{ color:var(--ink-dim); text-decoration:none; font-size:13px; }
.footer-links a:hover{ color:var(--ink); }

/* ---------- reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(18px); transition:opacity .8s ease, transform .8s ease; }
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- utility ---------- */
.dim{ color:var(--ink-dim); font-weight:400; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px,2vw,24px); }
@media (max-width:820px){ .grid-2{ grid-template-columns:1fr; } }