@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=DM+Sans:ital,opsz,wght@0,9..40,300..600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================
   artineer — Global Stylesheet v3
   Palette: Fuchsia Rose · Moss Green · Ink Black · Platinum Chrome
   Artist/designer grade — high contrast, chrome metallic luster
   ========================================================== */

:root {
  /* ── Light surfaces ─────────────────────────────────── */
  --bg:         #F4F4F7;
  --bg-alt:     #EBEBF0;
  --panel:      #FFFFFF;
  --border:     #D8D8E4;
  --border-2:   #BCBCCC;
  --shadow:     rgba(12,10,30,0.07);
  --shadow-lg:  rgba(12,10,30,0.16);

  /* ── Light text ─────────────────────────────────────── */
  --text:       #14142A;
  --muted:      #4E4E68;
  --muted-2:    #9090A8;

  /* ── Dark surfaces (ink black — deep cool) ──────────── */
  --dark:       #08080E;
  --dark-2:     #0E0E1C;
  --dark-card:  #16162A;
  --dark-bd:    rgba(255,255,255,0.07);
  --dark-bd-2:  rgba(255,255,255,0.14);

  /* ── Dark text (pure, bright) ───────────────────────── */
  --on-dark:    #F2F2FF;
  --on-dark-2:  #ABABCC;
  --on-dark-m:  #5858A0;

  /* ── Fuchsia Rose (vivid, fashion-grade) ────────────── */
  --rose:       #CC2E60;
  --rose-2:     #E05080;
  --rose-3:     #F090B4;
  --rose-pale:  #FCEDF4;
  --rose-glow:  rgba(204,46,96,0.35);

  /* ── Moss Green (architectural, precise) ────────────── */
  --moss:       #3A5E34;
  --moss-2:     #548A4A;
  --moss-3:     #78B068;
  --moss-pale:  #E6F2E2;

  /* ── Platinum Chrome (true metallic silver) ─────────── */
  --chrome:     #6080A8;
  --chrome-2:   #90B4D4;
  --chrome-3:   #C0D8EE;
  --chrome-pale:#ECF4FA;
  --chrome-glow:rgba(144,180,212,0.45);

  /* ── Alias names for backward compat ────────────────── */
  --violet:      var(--rose);
  --violet-2:    var(--rose-2);
  --violet-3:    var(--rose-3);
  --violet-pale: var(--rose-pale);
  --violet-glow: var(--rose-glow);
  --gold:        var(--chrome);
  --gold-2:      var(--chrome-2);
  --gold-pale:   var(--chrome-pale);
  --gold-glow:   var(--chrome-glow);
  --teal:        var(--moss);
  --teal-2:      var(--moss-2);
  --teal-pale:   var(--moss-pale);

  /* ── Typography ─────────────────────────────────────── */
  --fd: "Fraunces", Georgia, serif;
  --fb: "DM Sans", system-ui, sans-serif;
  --fm: "JetBrains Mono", ui-monospace, monospace;

  /* ── Layout ─────────────────────────────────────────── */
  --r:     20px;
  --rsm:   12px;
  --maxw:  1180px;
  --nav-h: 72px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
img, video { max-width: 100%; display: block; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--fb);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Typography ─────────────────────────────────────────── */
h1,h2,h3,h4,h5 {
  font-family: var(--fb);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 0 0 .45em;
  color: var(--text);
}
h1 {
  font-family: var(--fd);
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
h1 em, h1 i { font-style: italic; font-weight: 400; }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1rem; font-weight: 600; margin: 0 0 .3em; }
h5 { font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a  { color: var(--rose); text-decoration: none; transition: color .2s; }
a:hover { color: var(--rose-2); }

/* ── Utilities ──────────────────────────────────────────── */
.wrap   { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
.muted  { color: var(--muted); }
.muted2 { color: var(--muted-2); }
.mono   { font-family: var(--fm); }
.center { text-align: center; }

/* ── Section layout ─────────────────────────────────────── */
section { padding: 96px 0; position: relative; }
.tight  { padding: 64px 0 !important; }
.alt    { background: var(--bg-alt); }

/* ── Dark sections ──────────────────────────────────────── */
.dark {
  background: var(--dark);
  color: var(--on-dark);
}
.dark h1,.dark h2,.dark h3,.dark h4 { color: var(--on-dark); }
.dark p:not(.kicker) { color: var(--on-dark-2); }
.dark .muted { color: var(--on-dark-m); }
.dark a:not(.btn) { color: var(--rose-3); }

.dark-2 {
  background: var(--dark-2);
  color: var(--on-dark);
}
.dark-2 h1,.dark-2 h2,.dark-2 h3,.dark-2 h4 { color: var(--on-dark); }
.dark-2 p:not(.kicker) { color: var(--on-dark-2); }
.dark-2 .muted { color: var(--on-dark-m); }

/* ── Section heads ──────────────────────────────────────── */
.shead { margin-bottom: 48px; max-width: 680px; }
.shead.center { margin-left: auto; margin-right: auto; text-align: center; }
.shead h2 { margin-bottom: .2em; }

/* ── Kicker ─────────────────────────────────────────────── */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--fm);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rose-2);
  margin-bottom: 14px;
}
.kicker .dot { display: none; }
.kicker.gold   { color: var(--chrome-2); }
.kicker.teal   { color: var(--moss-2); }
.dark  .kicker,.dark-2 .kicker               { color: var(--rose-3); }
.dark  .kicker.gold,.dark-2 .kicker.gold     { color: var(--chrome-3); }
.dark  .kicker.teal,.dark-2 .kicker.teal     { color: var(--moss-3); }

/* ── Tags ───────────────────────────────────────────────── */
.tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--fm);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1.5px solid transparent;
}
.tag-v { background: var(--rose-pale);   color: var(--rose);   border-color: #ECA8C0; }
.tag-g { background: var(--chrome-pale); color: var(--chrome); border-color: #9AC0DC; }
.tag-t { background: var(--moss-pale);   color: var(--moss);   border-color: #8CC080; }
.dark .tag-v { background: rgba(192,72,108,.14); color: var(--rose-3);   border-color: rgba(192,72,108,.35); }
.dark .tag-g { background: rgba(138,176,208,.12); color: var(--chrome-3); border-color: rgba(138,176,208,.3); }
.dark .tag-t { background: rgba(90,136,80,.13);   color: var(--moss-3);   border-color: rgba(90,136,80,.3); }

/* ── Gradient text ──────────────────────────────────────── */
.grad {
  background: linear-gradient(130deg, var(--rose-2) 0%, var(--chrome-3) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   CHROME METALLIC SYSTEM
   Real polished-metal shimmer: blue-steel → platinum → white
   ═══════════════════════════════════════════════════════════ */

@keyframes chrome-slide {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Platinum Chrome shimmer text — high contrast, true metallic */
.metallic {
  background: linear-gradient(105deg,
    #3A5A88 0%,
    #7AAAD0 10%,
    #AACCEA 20%,
    #D8F0FF 30%,
    #FFFFFF 38%,
    #EEF8FF 44%,
    #FFFFFF 48%,
    #D0ECFF 54%,
    #90C0DE 65%,
    #4A6E98 76%,
    #8AAECE 86%,
    #D0EAFC 94%,
    #FFFFFF 100%
  );
  background-size: 500% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: chrome-slide 2.8s linear infinite;
  filter: drop-shadow(0 0 18px rgba(180,220,255,0.3));
}

/* Platinum Chrome button */
.btn-metal {
  background: linear-gradient(105deg,
    #3A5A88 0%,
    #7AB0D4 12%,
    #C0DCEE 24%,
    #E8F6FF 33%,
    #FFFFFF 40%,
    #EEF8FF 46%,
    #FFFFFF 50%,
    #D8F0FE 56%,
    #A0C8E4 68%,
    #5880A8 82%,
    #8AAECE 92%,
    #D0EAFC 100%
  );
  background-size: 400% 100%;
  color: #08080E;
  font-weight: 700;
  letter-spacing: .01em;
  animation: chrome-slide 2.4s linear infinite;
  box-shadow:
    0 4px 28px rgba(144,180,212,0.55),
    0 2px 0 rgba(255,255,255,0.6) inset,
    0 -1px 0 rgba(60,90,140,0.4) inset;
  border: none;
  text-shadow: none;
}
.btn-metal:hover {
  color: #08080E;
  animation-duration: 1.4s;
  box-shadow:
    0 8px 44px rgba(144,180,212,0.75),
    0 2px 0 rgba(255,255,255,0.7) inset,
    0 -1px 0 rgba(60,90,140,0.5) inset;
  transform: translateY(-2px);
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 13px 26px;
  border-radius: 999px;
  font-family: var(--fb);
  font-size: .93rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all .22s;
  line-height: 1;
  white-space: nowrap;
}
.btn-primary {
  background: var(--rose);
  color: #fff;
  box-shadow: 0 4px 20px var(--rose-glow);
}
.btn-primary:hover {
  background: var(--rose-2);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 32px var(--rose-glow);
}
.btn-ghost {
  background: transparent;
  color: var(--rose);
  border: 1.5px solid var(--border-2);
}
.btn-ghost:hover { border-color: var(--rose); background: var(--rose-pale); }
.dark .btn-ghost,.dark-2 .btn-ghost {
  color: var(--on-dark);
  border-color: var(--dark-bd-2);
}
.dark .btn-ghost:hover,.dark-2 .btn-ghost:hover {
  border-color: rgba(192,72,108,.5);
  color: var(--rose-3);
  background: rgba(192,72,108,.1);
}
.btn-chrome {
  background: transparent;
  color: var(--chrome-3);
  border: 1.5px solid rgba(138,176,208,.4);
}
.btn-chrome:hover { background: rgba(138,176,208,.1); border-color: var(--chrome-3); }
.btn-sm { padding: 9px 18px; font-size: .84rem; }
.btn-lg { padding: 17px 38px; font-size: 1.05rem; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 32px;
  transition: box-shadow .25s, transform .25s;
}
.card:hover { box-shadow: 0 12px 40px var(--shadow-lg); transform: translateY(-2px); }
.dark .card,.dark-2 .card {
  background: var(--dark-card);
  border-color: var(--dark-bd);
}
.dark .card h3,.dark-2 .card h3,
.dark .card h4,.dark-2 .card h4 { color: var(--on-dark); }
.dark .card p,.dark-2 .card p   { color: var(--on-dark-2); }

/* Chrome-bordered card */
.card-chrome {
  border-color: transparent;
  background:
    linear-gradient(var(--dark-card), var(--dark-card)) padding-box,
    linear-gradient(135deg, #5878A0, #B8D4EC, #E8F4FC, #8AB0D0, #4A6890) border-box;
  border: 1.5px solid transparent;
}

/* ── Grid ───────────────────────────────────────────────── */
.grid { display: grid; gap: 24px; }
.g2   { grid-template-columns: repeat(2,1fr); }
.g3   { grid-template-columns: repeat(3,1fr); }
.g4   { grid-template-columns: repeat(4,1fr); }
.g5   { grid-template-columns: repeat(5,1fr); }

/* ── Split ──────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.flip > *:first-child { order: 2; }
.split.wide   { grid-template-columns: 1.2fr 1fr; }
.split.narrow { grid-template-columns: 1fr 1.3fr; }

/* ── Icon circle ────────────────────────────────────────── */
.ic {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--rose-pale);
  border: 1.5px solid #ECA8C0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 18px;
  flex-shrink: 0;
}
.ic.gold { background: var(--chrome-pale); border-color: #9AC0DC; }
.ic.teal { background: var(--moss-pale);   border-color: #8CC080; }
.dark .ic,.dark-2 .ic         { background: rgba(192,72,108,.12); border-color: rgba(192,72,108,.28); }
.dark .ic.gold,.dark-2 .ic.gold { background: rgba(138,176,208,.1); border-color: rgba(138,176,208,.28); }
.dark .ic.teal,.dark-2 .ic.teal { background: rgba(90,136,80,.12);  border-color: rgba(90,136,80,.28); }

/* ── Check list ─────────────────────────────────────────── */
.checks { list-style: none; margin: 0; padding: 0; }
.checks li {
  padding: 9px 0 9px 26px;
  border-bottom: 1px solid var(--border);
  position: relative;
  color: var(--muted);
  font-size: .95rem;
}
.checks li:last-child { border-bottom: none; }
.checks li::before { content: '→'; position: absolute; left: 0; color: var(--rose-2); font-size: .8rem; }
.dark .checks li,.dark-2 .checks li { border-color: var(--dark-bd); color: var(--on-dark-2); }
.dark .checks li::before,.dark-2 .checks li::before { color: var(--rose-3); }

/* ── Steps ──────────────────────────────────────────────── */
.steps { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.step:last-child { border-bottom: none; }
.step-n {
  font-family: var(--fd);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--rose-2);
  opacity: .5;
  line-height: 1;
  padding-top: 4px;
}
.dark .step { border-color: var(--dark-bd); }
.dark .step-n { color: var(--rose-3); opacity: .55; }

/* ── Stats ──────────────────────────────────────────────── */
.stats { display: flex; gap: 48px; flex-wrap: wrap; }
.stat .n {
  font-family: var(--fd);
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--text);
  margin-bottom: 4px;
}
.stat .l { font-size: .84rem; color: var(--muted); font-weight: 500; }
.dark .stat .n,.dark-2 .stat .n { color: var(--on-dark); }
.dark .stat .l,.dark-2 .stat .l { color: var(--on-dark-m); }

/* ── Placeholder visual ─────────────────────────────────── */
.vis-placeholder {
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(192,72,108,.06) 0%, rgba(138,176,208,.07) 100%);
  border: 1.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  overflow: hidden;
}
.dark .vis-placeholder,.dark-2 .vis-placeholder {
  background: linear-gradient(135deg, rgba(192,72,108,.1) 0%, rgba(138,176,208,.08) 100%);
  border-color: var(--dark-bd);
}
.vis-placeholder .vis-label {
  font-family: var(--fd);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--muted-2);
  text-align: center;
  padding: 24px;
  line-height: 1.8;
}

/* ── Pull quote ─────────────────────────────────────────── */
.pull {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(1.3rem, 2.8vw, 1.9rem);
  line-height: 1.55;
  padding: 36px 0;
  border-top: 2px solid var(--rose-2);
  border-bottom: 2px solid var(--rose-2);
  color: var(--text);
  max-width: 760px;
}
.dark .pull,.dark-2 .pull { color: var(--on-dark); border-color: var(--rose-2); }

/* ── CTA band ───────────────────────────────────────────── */
.cta-band {
  background: var(--dark-2);
  border: 1px solid var(--dark-bd-2);
  border-radius: var(--r);
  padding: 64px 56px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -60%; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(204,46,96,.20) 0%, transparent 65%);
  pointer-events: none;
}
.cta-band::after {
  content: '';
  position: absolute;
  bottom: -50%; right: -10%;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144,180,212,.14) 0%, transparent 65%);
  pointer-events: none;
}
.cta-band h2 { color: var(--on-dark); position: relative; z-index: 1; }
.cta-band p  { color: var(--on-dark-2); max-width: 560px; margin: 0 auto; position: relative; z-index: 1; }
.cta-band .btn-row { justify-content: center; position: relative; z-index: 1; }

/* ── Glow line — spectrum bloom across sections ─────────── */
.glow-line {
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(204,46,96,.7) 15%,
    rgba(144,180,212,.9) 35%,
    rgba(240,248,255,1) 48%,
    rgba(255,255,255,1) 50%,
    rgba(240,248,255,1) 52%,
    rgba(144,180,212,.9) 65%,
    rgba(84,138,74,.5) 85%,
    transparent 100%
  );
  opacity: .65;
  border: none;
  margin: 0;
}

/* ── Separator ──────────────────────────────────────────── */
.sep {
  width: 48px; height: 2px;
  background: linear-gradient(90deg, var(--rose-2), var(--chrome-3));
  border-radius: 1px;
  margin: 36px 0;
}
.sep.center { margin-left: auto; margin-right: auto; }

/* Chrome horizon line */
.metal-line {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--chrome) 20%,
    var(--chrome-3) 45%,
    #F0F8FF 50%,
    var(--chrome-3) 55%,
    var(--chrome) 80%,
    transparent
  );
  opacity: .5;
  border: none;
  margin: 0;
}

/* ── Navigation ─────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  transition: background .3s, box-shadow .3s;
}
.nav.on-dark          { background: transparent; }
.nav.on-dark.scrolled {
  background: rgba(8,8,14,.94);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(255,255,255,.05);
}
.nav.on-light {
  background: rgba(244,244,247,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  height: var(--nav-h);
  gap: 28px;
}
.brand {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
}
.nav.on-dark:not(.scrolled) .brand { color: var(--on-dark); }

.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-links a {
  padding: 7px 13px;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted);
  transition: all .2s;
  text-decoration: none;
}
.nav-links a:hover { color: var(--text); background: var(--bg-alt); }
.nav-links a.active { color: var(--rose); font-weight: 600; }
.nav.on-dark:not(.scrolled) .nav-links a        { color: rgba(238,238,255,.55); }
.nav.on-dark:not(.scrolled) .nav-links a:hover  { color: var(--on-dark); background: rgba(255,255,255,.07); }
.nav.on-dark:not(.scrolled) .nav-links a.active { color: var(--rose-3); }

.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  font-size: 1.25rem;
  color: inherit;
  line-height: 1;
}
.nav.on-dark:not(.scrolled) .nav-toggle { color: var(--on-dark); }

/* ── Mobile nav ─────────────────────────────────────────── */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  background: rgba(8,8,14,.97);
  backdrop-filter: blur(20px);
  padding: 20px 24px 28px;
  z-index: 99;
  border-bottom: 1px solid var(--dark-bd);
  flex-direction: column;
  gap: 2px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 12px 16px;
  border-radius: 10px;
  color: var(--on-dark-2);
  font-size: 1rem;
  font-weight: 500;
  transition: all .2s;
  text-decoration: none;
}
.mobile-nav a:hover { background: var(--dark-card); color: var(--on-dark); }
.mobile-nav .btn { margin-top: 12px; align-self: flex-start; }

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  overflow: hidden;
  position: relative;
}
/* Deep rose bloom + chrome haze — ink-black ground */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 50% at 60% 36%, rgba(204,46,96,.32) 0%, transparent 55%),
    radial-gradient(ellipse 40% 35% at 15% 70%, rgba(58,94,52,.18) 0%, transparent 55%),
    radial-gradient(ellipse 30% 28% at 88% 78%, rgba(144,180,212,.22) 0%, transparent 48%),
    radial-gradient(ellipse 22% 18% at 28% 18%, rgba(192,216,238,.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 80% 20%, rgba(204,46,96,.06) 0%, transparent 60%),
    var(--dark);
}
.hero-noise {
  position: absolute;
  inset: 0;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner { position: relative; z-index: 2; width: 100%; padding: 80px 0; }

/* ── Inner page hero ────────────────────────────────────── */
.phead {
  background: var(--dark);
  color: var(--on-dark);
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}
.phead::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 85% 45%, rgba(204,46,96,.18) 0%, transparent 55%),
    radial-gradient(ellipse 35% 50% at 10% 80%, rgba(144,180,212,.10) 0%, transparent 55%);
}
.phead .wrap { position: relative; z-index: 1; }
.phead h1  { color: var(--on-dark); max-width: 760px; }
.phead p   { color: var(--on-dark-2); max-width: 620px; font-size: 1.05rem; }
.phead .kicker { margin-bottom: 16px; }

/* ── Reveal animation ───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* ── Event card ─────────────────────────────────────────── */
.event-card {
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--panel);
  transition: box-shadow .25s, transform .25s;
}
.event-card:hover { box-shadow: 0 12px 40px var(--shadow-lg); transform: translateY(-2px); }
.event-meta {
  background: var(--bg-alt);
  padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border);
}
.event-body { padding: 24px; }

/* ── Tag row ────────────────────────────────────────────── */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* ── Footer ─────────────────────────────────────────────── */
footer.site {
  background: var(--dark);
  color: var(--on-dark);
  padding: 64px 0 32px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.foot-brand .brand { color: var(--on-dark); display: block; margin-bottom: 12px; font-size: 1.5rem; }
.foot-tagline { font-size: .9rem; color: var(--on-dark-m); line-height: 1.6; }
footer h5 {
  font-family: var(--fm);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-dark-m);
  margin-bottom: 16px;
  font-weight: 500;
}
footer a {
  display: block;
  color: var(--on-dark-2);
  margin-bottom: 10px;
  font-size: .9rem;
  transition: color .2s;
  text-decoration: none;
}
footer a:hover { color: var(--on-dark); }
.foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--dark-bd);
  font-size: .82rem;
  color: var(--on-dark-m);
  flex-wrap: wrap; gap: 8px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .g3,.g4,.g5 { grid-template-columns: repeat(2,1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split.flip > *:first-child { order: unset; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  :root { --nav-h: 60px; }
  section { padding: 64px 0; }
  h1  { font-size: clamp(2.2rem, 10vw, 3rem); }
  .g2,.g3 { grid-template-columns: 1fr; }
  .g4,.g5 { grid-template-columns: 1fr 1fr; }
  .nav-links  { display: none; }
  .nav-toggle { display: block; }
  .foot-grid  { grid-template-columns: 1fr; }
  .cta-band   { padding: 40px 28px; }
  .stats      { gap: 28px; }
  .btn-row    { flex-direction: column; align-items: flex-start; }
  .cta-band .btn-row { align-items: center; }
}

/* ==========================================================
   ARTIST / DESIGNER GRADE EXTRAS
   Editorial typography, chrome accents, high-contrast detail
   ========================================================== */

/* ── Display text for hero sections ─────────────────────── */
.display {
  font-family: var(--fd);
  font-style: italic;
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: 300;
  line-height: .95;
  letter-spacing: -0.035em;
}

/* ── Label / overline ───────────────────────────────────── */
.overline {
  font-family: var(--fm);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.dark .overline, .dark-2 .overline { color: var(--on-dark-m); }

/* ── Editorial rose rule ─────────────────────────────────── */
.rule-rose {
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--rose) 0%, var(--rose-2) 50%, transparent 100%);
  border-radius: 2px;
  position: absolute;
  left: 0; top: 0;
}

/* ── Chrome border card (dark sections) ─────────────────── */
.card-platinum {
  background:
    linear-gradient(var(--dark-card), var(--dark-card)) padding-box,
    linear-gradient(135deg,
      #3A5A88 0%, #7AAAD0 20%, #D8F0FF 35%,
      #FFFFFF 45%, #D0ECFF 55%, #88B4D4 75%, #3A5A88 100%
    ) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--r);
}

/* ── Vivid rose glow box ────────────────────────────────── */
.glow-rose {
  box-shadow:
    0 0 0 1px rgba(204,46,96,.2),
    0 8px 40px rgba(204,46,96,.18),
    0 24px 80px rgba(204,46,96,.08);
}

/* ── Chrome glow box ────────────────────────────────────── */
.glow-chrome {
  box-shadow:
    0 0 0 1px rgba(144,180,212,.25),
    0 8px 40px rgba(144,180,212,.22),
    0 24px 80px rgba(144,180,212,.1);
}

/* ── Tinted glass panel ─────────────────────────────────── */
.glass {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r);
}
.glass-rose {
  background: rgba(204,46,96,.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(204,46,96,.18);
  border-radius: var(--r);
}

/* ── Section counter — editorial numbering ──────────────── */
.sect-num {
  font-family: var(--fd);
  font-style: italic;
  font-size: 5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--border);
  position: absolute;
  top: -16px; right: 0;
  pointer-events: none;
  user-select: none;
}
.dark .sect-num, .dark-2 .sect-num { color: var(--dark-bd-2); }

/* ── Nav scrolled chrome underline on active link ────────── */
.nav.scrolled .nav-links a.active {
  position: relative;
}
.nav.scrolled .nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 13px; right: 13px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--rose), var(--chrome-2));
  border-radius: 1px;
}

/* ── Monochrome photo treatment for image placeholders ───── */
.photo-frame {
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
}
.photo-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(204,46,96,.08) 0%,
    transparent 50%,
    rgba(144,180,212,.08) 100%
  );
  pointer-events: none;
}

/* ── Large italic headline variant ─────────────────────── */
.h-serif {
  font-family: var(--fd);
  font-style: italic;
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* ── Minimal hairline divider ───────────────────────────── */
.divider {
  width: 100%;
  height: 1px;
  background: var(--border);
  margin: 48px 0;
}
.dark .divider, .dark-2 .divider { background: var(--dark-bd); }

/* ==========================================================
   PAPER STACK — stacked-pages visual with hover peel
   ========================================================== */
.paper-stack {
  flex-shrink: 0;
  position: relative;
  width: 220px;
  height: 284px;
  perspective: 1000px;
  perspective-origin: 50% 8%;
  cursor: pointer;
}
.ps-page {
  position: absolute;
  width: 174px;
  height: 226px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.25);
  transform-origin: top center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  transition: transform .5s cubic-bezier(0.4,0,0.2,1), box-shadow .3s;
  will-change: transform;
}
.ps-page img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top left;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* CSS-only paper placeholder (before real screenshots are added) */
.ps-ph {
  width: 100%; height: 100%;
  background: #f8f8fa;
  padding: 14px 12px 0;
  box-sizing: border-box;
  position: relative;
}
.ps-ph::before {
  content: '';
  display: block;
  height: 8px; width: 70%;
  background: #d0d0d8;
  border-radius: 2px;
  margin-bottom: 10px;
}
.ps-ph::after {
  content: '';
  display: block;
  height: 100%;
  background: repeating-linear-gradient(
    transparent, transparent 9px,
    #e4e4ea 9px, #e4e4ea 10px
  );
}
.ps-page.is-peel {
  transform: rotateX(-175deg);
  box-shadow: none;
  z-index: 20 !important;
}
@media (max-width: 640px) { .paper-stack { display: none; } }

/* ==========================================================
   PAPER READER MODAL
   ========================================================== */
.pm-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.pm-overlay.is-open { opacity: 1; pointer-events: auto; }
.pm-backdrop {
  position: absolute; inset: 0;
  background: rgba(8,8,14,.90);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.pm-box {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 20px;
  padding: 0 8px; max-width: 96vw;
}
.pm-stage {
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,.75);
  border-radius: 2px;
  overflow: hidden;
  background: #fff;
  transform: scale(.94);
  transition: transform .25s ease;
}
.pm-overlay.is-open .pm-stage { transform: scale(1); }
.pm-img {
  display: block;
  max-height: 88vh;
  max-width: 76vw;
  width: auto; height: auto;
}
.pm-counter {
  position: absolute; bottom: 0; left: 0; right: 0;
  text-align: center;
  padding: 6px 0 8px;
  font-family: var(--fm); font-size: .72rem; letter-spacing: .12em;
  color: rgba(0,0,0,.38);
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(4px);
}
.pm-nav {
  flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.10);
  color: #fff; font-size: 1.8rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.pm-nav:hover  { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.55); }
.pm-nav:disabled { opacity: .2; cursor: default; }
.pm-close {
  position: absolute; top: -48px; right: 0;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.85); font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  z-index: 2;
}
.pm-close:hover { background: rgba(255,255,255,.22); }
/* paper-card needs position:relative for the glow blob */
.paper-card { position: relative; overflow: hidden; }