/* DZC mockup kit tokens + shared motion classes.
   Body floor 16px, secondary floor 16px, headers 20px+. No dashes anywhere. */

/* ============================ KIT 3: Black and Gold Refined (Legacy Edition) */
.kit3 {
  --ink: #0A0A0A;           /* rich black, primary surface */
  --gold: #C9A227;          /* refined gold */
  --champagne: #E9D8A6;     /* secondary accent on black */
  --paper: #FAF7F0;         /* warm paper, light sections */
  --espresso: #241F1A;      /* body text on paper */
  --slate: #3E4A5C;         /* cool neutral, chrome */
  --rule: rgba(201,162,39,.28);
  --surface: #14120E;       /* raised black */
  --muted: #6B6255;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);  /* deliberate, editorial */
  --dur: 820ms;
  --radius: 4px;            /* editorial: near-square */
}

/* ================================= KIT 4: Kingdom Blue (Digital-First) */
.kit4 {
  --ink: #0D1F4F;           /* primary navy */
  --navy-light: #1A2D66;
  --cyan: #00A6FF;
  --cyan-light: #4DBDFF;
  --gold: #FFB400;          /* premium badge accent only */
  --paper: #FFFFFF;
  --espresso: #0F172A;      /* foreground body */
  --slate: #64748B;
  --rule: rgba(0,166,255,.30);
  --surface: #0A1838;
  --muted: #64748B;

  --font-display: 'Space Grotesk', 'Inter', Arial, sans-serif;
  --font-body: 'Inter', system-ui, Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);      /* confident, cinematic */
  --dur: 700ms;
  --radius: 14px;
}

/* ================================================================ base */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--espresso);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.12; margin: 0 0 .5em; }
h1 { font-size: clamp(40px, 6vw, 76px); }
h2 { font-size: clamp(30px, 3.6vw, 48px); }
h3 { font-size: clamp(21px, 2vw, 28px); }
p  { font-size: 17px; margin: 0 0 1.1em; max-width: 68ch; }
a  { color: inherit; }
img { max-width: 100%; display: block; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.kit3 .eyebrow { color: var(--gold); }
.kit4 .eyebrow { color: var(--cyan); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 820px; }
section { padding: clamp(64px, 8vw, 128px) 0; }

/* ============================================================= buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 17px; font-weight: 600;
  padding: 15px 30px; border-radius: var(--radius);
  text-decoration: none; border: 2px solid transparent;
  transition: transform 260ms var(--ease), background 260ms var(--ease), box-shadow 260ms var(--ease);
  cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.kit3 .btn-primary { background: var(--gold); color: #0A0A0A; }
.kit3 .btn-primary:hover { box-shadow: 0 12px 32px rgba(201,162,39,.34); }
.kit3 .btn-ghost { border-color: var(--gold); color: var(--gold); background: transparent; }
.kit3 .btn-ghost:hover { background: rgba(201,162,39,.12); }
.kit4 .btn-primary { background: var(--cyan); color: #062038; }
.kit4 .btn-primary:hover { box-shadow: 0 12px 34px rgba(0,166,255,.42); }
.kit4 .btn-ghost { border-color: rgba(255,255,255,.5); color: #fff; background: transparent; }
.kit4 .btn-ghost:hover { background: rgba(255,255,255,.12); }
.on-light.btn-ghost { border-color: currentColor; }
.kit4 .on-light.btn-ghost { color: var(--ink); }

/* ================================================================= nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 30px;
  transition: background 340ms var(--ease), padding 340ms var(--ease), box-shadow 340ms var(--ease);
}
.nav.is-scrolled { padding: 11px 30px; backdrop-filter: blur(18px) saturate(170%); }
.kit3 .nav.is-scrolled { background: rgba(10,10,10,.90); box-shadow: 0 1px 0 var(--rule); }
.kit4 .nav.is-scrolled { background: rgba(13,31,79,.92); box-shadow: 0 1px 0 var(--rule); }
.nav a { text-decoration: none; font-size: 16px; }
.nav-links { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.nav-links a { position: relative; padding: 4px 0; opacity: .88; transition: opacity 220ms var(--ease); }
.nav-links a:hover { opacity: 1; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 700; }
.brand .mark {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-display);
  font-size: 20px; font-weight: 700; flex: none;
}
.kit3 .brand .mark { background: var(--gold); color: #0A0A0A; }
.kit4 .brand .mark { background: var(--cyan); color: #062038; }

/* ============================================================== reveal */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.955); }
[data-reveal="blur"]  { filter: blur(8px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), filter var(--dur) var(--ease); }
[data-reveal="blur"].is-visible { filter: none; }

/* ============================================================ parallax */
.px-wrap { position: relative; overflow: hidden; }
.px-layer { position: absolute; inset: -12% 0; will-change: transform; }
.px-layer img, .px-bg {
  width: 100%; height: 100%; object-fit: cover; object-position: center 28%;
}

/* ======================================================= scroll progress */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 80;
  transform: scaleX(0); transform-origin: left;
}
.kit3 .scroll-progress { background: var(--gold); }
.kit4 .scroll-progress { background: var(--cyan); }

/* =============================================================== cards */
.card {
  padding: 30px; border-radius: var(--radius);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.card:hover { transform: translateY(-6px); }
.kit3 .card { background: var(--paper); border: 1px solid rgba(36,31,26,.12); }
.kit3 .card:hover { box-shadow: 0 20px 48px rgba(10,10,10,.16); }
.kit4 .card { background: #fff; border: 1px solid #E2E8F0; }
.kit4 .card:hover { box-shadow: 0 20px 48px rgba(13,31,79,.14); }
.card-dark { background: var(--surface); color: #fff; border-color: rgba(255,255,255,.12); }

.grid { display: grid; gap: 26px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ================================================================ misc */
.dark-section { background: var(--ink); color: #fff; }
.dark-section p { color: rgba(255,255,255,.82); }
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.stat-n { font-family: var(--font-display); font-size: clamp(44px, 5.6vw, 84px); line-height: 1; }
.kit3 .stat-n { color: var(--gold); }
.kit4 .stat-n { color: var(--cyan); }
.stat-l { font-size: 16px; opacity: .78; }
footer.site { padding: 60px 0 44px; font-size: 16px; }
.badge {
  display: inline-block; font-size: 16px; font-weight: 600; padding: 5px 14px;
  border-radius: 99px; border: 1px solid currentColor;
}

/* mockup chrome banner, marks these as concept pages */
.mock-flag {
  position: fixed; right: 14px; bottom: 14px; z-index: 90;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  padding: 9px 16px; border-radius: 99px; color: #fff;
  background: rgba(16,18,24,.86); backdrop-filter: blur(10px);
  text-decoration: none;
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  section { padding: 56px 0; }
}

/* ============================================== reduced motion override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .px-layer { transform: none !important; }
}