/* ============================================================
   RIZQ FINANCE — DESIGN SYSTEM v2
   Hybrid aesthetic: light editorial + dark cinematic moments
   Motion-first, high-end Islamic fintech
   ============================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root {
  /* Brand greens */
  --green-900: #061A10;   /* deepest — cinematic bg */
  --green-800: #0A2417;
  --green-700: #0E2E1E;
  --green-600: #103626;
  --green-base: #1A3A2A;  /* brand primary */
  --green-500: #2D6A4F;
  --green-400: #40916C;
  --green-300: #74C69D;
  --green-200: #B7E4C7;

  /* Gold */
  --gold-700: #8A6D2F;
  --gold-600: #B8892A;
  --gold:     #C9A96E;    /* brand gold */
  --gold-400: #D9BE86;
  --gold-300: #E5C98A;
  --gold-200: #F0DEB4;

  /* Neutrals — light surfaces */
  --cream:    #FAF8F3;
  --paper:    #FFFFFF;
  --sand:     #F3EEE4;
  --ink-900:  #0F1A14;    /* near-black green-tinted text */
  --ink-700:  #2B3A31;
  --ink-500:  #54635A;    /* muted body on light */
  --ink-300:  #8A968E;

  /* Neutrals — dark surfaces */
  --on-dark:        #FAFAF8;
  --on-dark-muted:  rgba(250,250,248,0.62);
  --on-dark-faint:  rgba(250,250,248,0.40);

  /* Semantic */
  --primary: var(--green-base);
  --accent:  var(--gold);
  --success: #6EE7A8;
  --danger:  #F49A9A;

  /* Borders */
  --hair-light: rgba(15,26,20,0.10);
  --hair-dark:  rgba(250,250,248,0.12);
  --gold-hair:  rgba(201,169,110,0.28);

  /* Glass */
  --glass-dark:  rgba(255,255,255,0.045);
  --glass-light: rgba(255,255,255,0.72);

  /* Typography */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Fluid type scale (clamp) */
  --t-display: clamp(2.75rem, 6.5vw, 5.75rem);
  --t-h1:      clamp(2.25rem, 4.8vw, 4rem);
  --t-h2:      clamp(1.85rem, 3.4vw, 3rem);
  --t-h3:      clamp(1.3rem, 2vw, 1.7rem);
  --t-lead:    clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-sm:      0.9rem;
  --t-xs:      0.78rem;

  /* Spacing scale */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem;
  --sp-5: 3rem;  --sp-6: 4rem; --sp-7: 6rem;  --sp-8: 8rem;
  --section-pad: clamp(4.5rem, 9vw, 9rem);

  /* Radii */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* Shadows */
  --sh-sm: 0 2px 8px rgba(15,26,20,0.06);
  --sh-md: 0 12px 40px rgba(15,26,20,0.10);
  --sh-lg: 0 30px 80px rgba(15,26,20,0.16);
  --sh-gold: 0 16px 50px rgba(201,169,110,0.22);

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.15, 1);
  --dur-1: 0.2s; --dur-2: 0.4s; --dur-3: 0.7s; --dur-4: 1.1s;

  /* Layout */
  --maxw: 1240px;
  --maxw-narrow: 760px;
  --z-nav: 100;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--ink-700);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gold); color: var(--green-900); }

/* ---------- TYPOGRAPHY ---------- */
.display {
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
}
h1, .h1 { font-family: var(--font-display); font-size: var(--t-h1); font-weight: 600; line-height: 1.06; letter-spacing: -0.025em; }
h2, .h2 { font-family: var(--font-display); font-size: var(--t-h2); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; }
h3, .h3 { font-family: var(--font-display); font-size: var(--t-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--ink-500); font-weight: 300; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-600);
}
.eyebrow::before {
  content: ''; width: 22px; height: 1px; background: var(--gold); opacity: 0.7;
}
.eyebrow--center::before { display: none; }
.gold-text { color: var(--gold-600); }
.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

/* Dark-surface text variants */
.on-dark { color: var(--on-dark); }
.on-dark .lead, .lead.on-dark { color: var(--on-dark-muted); }
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--gold-300); }

/* ---------- LAYOUT ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.section { padding-block: var(--section-pad); position: relative; }
.section--cream { background: var(--cream); }
.section--paper { background: var(--paper); }
.section--sand  { background: var(--sand); }
.section--dark  { background: var(--green-900); color: var(--on-dark); }
.section--green { background: var(--green-base); color: var(--on-dark); }
.grid { display: grid; gap: clamp(1.5rem, 3vw, 3rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.center { text-align: center; }
.measure { max-width: 56ch; }
.mt-1{margin-top:var(--sp-1)}.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: 0.01em;
  padding: 0.95rem 1.6rem; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer;
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
  will-change: transform;
}
.btn:active { transform: scale(0.97); transition-duration: 100ms; }
.btn--gold { background: var(--gold); color: var(--green-900); box-shadow: var(--sh-gold); }
.btn--gold:hover { background: var(--gold-300); box-shadow: 0 20px 60px rgba(201,169,110,0.34); }
.btn--dark { background: var(--green-base); color: var(--on-dark); }
.btn--dark:hover { background: var(--green-500); }
.btn--ghost { background: transparent; color: currentColor; border-color: var(--hair-light); }
.on-dark .btn--ghost, .btn--ghost.on-dark { border-color: var(--hair-dark); color: var(--on-dark); }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-600); }
.on-dark .btn--ghost:hover { color: var(--gold-300); border-color: var(--gold); }
.btn--lg { padding: 1.15rem 2rem; font-size: 1rem; }
.btn--sm { padding: 0.7rem 1.2rem; font-size: var(--t-xs); }
.btn__arrow { transition: transform var(--dur-2) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* Text link with animated underline */
.tlink {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 600; font-size: var(--t-sm); color: var(--green-500);
  position: relative;
}
.tlink span.arr { transition: transform var(--dur-2) var(--ease); }
.tlink:hover span.arr { transform: translateX(5px); }
.on-dark .tlink { color: var(--gold-300); }

/* ---------- NAV ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  transition: background var(--dur-2) var(--ease), backdrop-filter var(--dur-2), box-shadow var(--dur-2), border-color var(--dur-2);
  border-bottom: 1px solid transparent;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.nav__logo img { height: 40px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav__link {
  font-size: var(--t-sm); font-weight: 500; color: var(--on-dark);
  position: relative; padding: 0.3rem 0; transition: color var(--dur-2);
}
.nav__link::after {
  content: ''; position: absolute; left: 0; bottom: -2px; height: 1.5px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease);
}
.nav__link:hover::after, .nav__link.active::after { transform: scaleX(1); }
.nav__link:hover { color: var(--gold-300); }
/* Products dropdown */
.nav__has-sub { position: relative; }
.nav__sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(2px);
  transform-origin: top center; /* drop + fade only — NO scale (scaling shifted items sideways on hover) */
  min-width: 230px; padding: 0.6rem; display: flex; flex-direction: column; gap: 0.1rem;
  background: rgba(6,26,16,0.92); backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid var(--hair-dark); border-radius: var(--r-md);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.nav__has-sub::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px; }
.nav__has-sub:hover .nav__sub, .nav__has-sub:focus-within .nav__sub {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(8px);
}
.nav__sub a {
  font-size: var(--t-sm); color: var(--on-dark-muted); padding: 0.6rem 0.8rem; border-radius: var(--r-sm);
  transition: background var(--dur-2), color var(--dur-2); white-space: nowrap;
}
.nav__sub a:hover { background: rgba(201,169,110,0.1); color: var(--gold-300); }
.nav.nav--light .nav__sub { background: rgba(255,255,255,0.97); border-color: var(--hair-light); }
.nav.nav--light .nav__sub a { color: var(--ink-700); }
.nav.nav--light .nav__sub a:hover { background: var(--sand); color: var(--gold-700); }
@media (max-width: 920px) {
  .nav__sub,
  .nav.nav--light .nav__sub,
  .nav__has-sub:hover .nav__sub,
  .nav__has-sub:focus-within .nav__sub { position: static; opacity: 1; visibility: visible; pointer-events: auto; transform: none !important; min-width: 0; background: transparent; border: none; box-shadow: none; padding: 0 0 0 1rem; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__has-sub::after { display: none; }
}

.nav__cta { display: flex; align-items: center; gap: 1rem; }
.nav__toggle { display: none; background: none; border: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__toggle span { width: 24px; height: 2px; background: var(--on-dark); border-radius: 2px; transition: var(--dur-2); }

/* scrolled state
   NOTE: the blur lives on a ::before pseudo, NOT on .nav itself. Putting
   backdrop-filter on .nav would make it the containing block for the fixed
   mobile menu (a child), collapsing the open menu and letting taps fall
   through to the page behind it. Keeping it on the pseudo avoids that. */
.nav.is-scrolled {
  border-bottom-color: var(--hair-dark);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.nav.is-scrolled::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: rgba(6,26,16,0.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
/* nav on light pages */
.nav.nav--light .nav__link { color: var(--ink-700); }
.nav.nav--light .nav__link:hover { color: var(--gold-600); }
.nav.nav--light .nav__toggle span { background: var(--ink-700); }

@media (max-width: 920px) {
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle { display: flex; }
  .nav__links.is-open {
    display: flex; position: fixed; inset: 78px 0 0 0; flex-direction: column;
    gap: 0; background: var(--green-900); padding: 1rem 1.5rem 2rem;
    border-bottom: 1px solid var(--hair-dark);
    max-height: calc(100dvh - 78px); overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .nav__links.is-open .nav__link { padding: 1rem 0; border-bottom: 1px solid var(--hair-dark); width: 100%; }
  /* hide the desktop gold hover-underline inside the mobile menu (it rendered as a
     stray "fold line" over Governance/Zakat); items already have a divider */
  .nav__links.is-open .nav__link::after { display: none; }
  /* The open mobile menu always sits on a dark-green panel — force readable light
     text so it stays visible even on light (nav--light) pages. */
  .nav__links.is-open .nav__link,
  .nav.nav--light .nav__links.is-open .nav__link { color: var(--on-dark); }
  .nav__links.is-open .nav__sub a,
  .nav.nav--light .nav__links.is-open .nav__sub a { color: var(--on-dark-muted); }
  .nav__links.is-open .nav__sub a:hover,
  .nav.nav--light .nav__links.is-open .nav__sub a:hover { color: var(--gold-300); }
}

/* ---------- TOUCH: no hover-lift on tap devices ---------- */
@media (hover: none) {
  .card:hover, .card--glass:hover { transform: none; box-shadow: none; }
}

/* ---------- FILM GRAIN (dark surfaces) ----------
   Subtle noise breaks digital flatness; pure texture, no banding. */
.hero::after, .page-hero::after, .section--dark::after, .section--green::after, .footer::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* ---------- A11Y & TYPE REFINEMENTS ---------- */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
.nav__sub a:focus-visible, .btn:focus-visible { outline-offset: 2px; }
h1, h2, h3, .h1, .h2, .h3, .display { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- LIVING IMAGERY (video-feel) ---------- */
/* Slow Ken Burns drift inside media frames; scroll-driven where supported */
@keyframes kenburns {
  0%   { transform: scale(1.06) translate3d(-1.2%, 0.8%, 0); }
  100% { transform: scale(1.14) translate3d(1.2%, -1.2%, 0); }
}
.img-slot { perspective: 800px; }
.img-slot .img-slot__img {
  transform: scale(1.08);
  animation: kenburns 26s var(--ease-soft) infinite alternate;
  will-change: transform;
  transition: filter var(--dur-3) var(--ease);
}
/* Scroll-driven version: image pans with viewport progress (Chrome 115+) */
@supports (animation-timeline: view()) {
  .img-slot .img-slot__img {
    animation: kenburns linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}
.img-slot:hover .img-slot__img { filter: saturate(1.12) brightness(1.05); }
@media (prefers-reduced-motion: reduce) {
  .img-slot .img-slot__img { animation: none; transform: none; }
}

/* ---------- BREATHING LIGHT (dark sections) ---------- */
@keyframes glowbreathe {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}
.flow-sec__glow, .cta-sec__glow {
  animation: glowbreathe 9s var(--ease-soft) infinite;
  will-change: opacity, transform;
}
@media (prefers-reduced-motion: reduce) { .flow-sec__glow, .cta-sec__glow { animation: none; } }

/* ---------- HERO WORD CHOREOGRAPHY ---------- */
.wsplit .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(2deg);
  filter: blur(6px);
  animation: wordrise 0.9s var(--ease) forwards;
  animation-delay: calc(var(--wi) * 70ms + 150ms);
}
@keyframes wordrise {
  to { opacity: 1; transform: none; filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .wsplit .w { animation: none; opacity: 1; transform: none; filter: none; }
}

/* ---------- SMOOTH FAQ OPEN (progressive) ---------- */
@supports (interpolate-size: allow-keywords) {
  .faq__item { interpolate-size: allow-keywords; }
  .faq__item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size var(--dur-3) var(--ease), content-visibility var(--dur-3) allow-discrete;
  }
  .faq__item[open]::details-content { block-size: auto; }
}

/* ---------- MOTION UTILITIES ---------- */
[data-reveal] { opacity: 1; }
.js-motion [data-reveal] { opacity: 0; transform: translateY(28px); }
.js-motion [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.js-motion [data-reveal-stagger] > * { opacity: 0; transform: translateY(28px); }
.js-motion [data-reveal-stagger].is-in > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.js-motion [data-reveal-stagger].is-in > *:nth-child(1){transition-delay:.05s}
.js-motion [data-reveal-stagger].is-in > *:nth-child(2){transition-delay:.13s}
.js-motion [data-reveal-stagger].is-in > *:nth-child(3){transition-delay:.21s}
.js-motion [data-reveal-stagger].is-in > *:nth-child(4){transition-delay:.29s}
.js-motion [data-reveal-stagger].is-in > *:nth-child(5){transition-delay:.37s}
.js-motion [data-reveal-stagger].is-in > *:nth-child(6){transition-delay:.45s}

/* ---------- IMAGE SLOTS (for AI raster fill) ---------- */
.img-slot {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background:
    linear-gradient(135deg, var(--green-800) 0%, var(--green-base) 60%, var(--green-700) 100%);
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}
.img-slot::after {
  /* subtle islamic-geo placeholder texture until raster drops in */
  content: ''; position: absolute; inset: 0; opacity: 0.10; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M30 0L60 30 30 60 0 30Z' fill='none' stroke='%23C9A96E' stroke-width='0.6'/%3E%3Cpath d='M30 12L48 30 30 48 12 30Z' fill='none' stroke='%23C9A96E' stroke-width='0.4'/%3E%3C/svg%3E");
  background-size: 48px 48px;
}
.img-slot img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.img-slot__hint {
  position: relative; z-index: 2; color: var(--gold-300); font-family: var(--font-mono);
  font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.55;
  text-align: center; padding: 1rem;
}
.img-slot[data-filled] .img-slot__hint { display: none; }

/* ---------- CARDS ---------- */
.card {
  background: var(--paper); border: 1px solid var(--hair-light);
  border-radius: var(--r-lg); padding: clamp(1.5rem, 2.5vw, 2.25rem);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-2);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh-md); border-color: var(--gold-hair); }
.card--glass {
  background: var(--glass-dark); border-color: var(--hair-dark);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--on-dark);
}
.card--glass:hover { background: rgba(255,255,255,0.07); border-color: var(--gold-hair); }

/* ---------- FOOTER ---------- */
.footer { background: var(--green-900); color: var(--on-dark); padding-block: var(--sp-7) var(--sp-4); position: relative; overflow: hidden; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2.5rem; }
@media (max-width: 820px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo img { height: 78px; margin-bottom: 1.25rem; }
.footer__tag { color: var(--on-dark-muted); font-size: var(--t-sm); max-width: 32ch; line-height: 1.7; }
.footer__col h4 { font-family: var(--font-mono); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-300); margin-bottom: 1.1rem; font-weight: 500; }
.footer__col a { display: block; color: var(--on-dark-muted); font-size: var(--t-sm); padding: 0.4rem 0; transition: color var(--dur-2); }
.footer__col a:hover { color: var(--gold-300); }
.footer__bottom { margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--hair-dark); display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.footer__bottom p { font-size: var(--t-xs); color: var(--on-dark-faint); max-width: 70ch; line-height: 1.7; }

/* ---------- MISC ---------- */
/* Editorial kicker (replaces the old capsule badge) */
.pill {
  display: inline-flex; align-items: center; gap: 0.9rem;
  align-self: flex-start;
  padding: 0; border: none; background: none; border-radius: 0;
  font-family: var(--font-mono); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-300);
}
.pill::before {
  content: ''; width: 34px; height: 1px; flex-shrink: 0;
  background: linear-gradient(90deg, var(--gold), transparent);
}
.center .pill, .pill.pill--center { align-self: center; }
/* the old status dot is no longer shown */
.pill__dot { display: none; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(0.7)} }
.cursor-dot { position: fixed; top: 0; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); pointer-events: none; z-index: 9999; mix-blend-mode: difference; transition: transform 0.15s var(--ease), opacity 0.3s; will-change: transform; }
@media (hover: none) { .cursor-dot { display: none; } }

/* ---------- WAITLIST MODAL ---------- */
.modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(6,16,11,0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.modal.is-open .modal__overlay { opacity: 1; }
.modal__card {
  position: relative; z-index: 1; width: min(460px, calc(100vw - 2rem));
  margin: clamp(2rem, 12vh, 7rem) auto 0;
  background: var(--cream); border: 1px solid var(--gold-hair); border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  box-shadow: 0 40px 100px rgba(0,0,0,0.45);
  transform: translateY(16px) scale(0.97); opacity: 0;
  /* enter 320ms; exit is faster (180ms) below */
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
  max-height: calc(100vh - 3rem); overflow-y: auto;
}
.modal:not(.is-open) .modal__card { transition-duration: 0.18s; }
.modal:not(.is-open) .modal__overlay { transition-duration: 0.18s; }
.modal.is-open .modal__card { transform: none; opacity: 1; }
.modal__close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hair-light); background: var(--paper); color: var(--ink-500); font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background var(--dur-2), color var(--dur-2), transform 100ms var(--ease); }
.modal__close:hover { background: var(--sand); color: var(--ink-900); }
.modal__close:active { transform: scale(0.92); }
.modal__card h2 { margin: 0.6rem 0 0.5rem; }
.modal__card .lead { margin-bottom: 1.5rem; }
.modal__form .btn { margin-top: 0.5rem; }
.modal__note { font-size: var(--t-xs); color: var(--ink-300); text-align: center; margin-top: 0.9rem; }
.modal__success { display: none; text-align: center; padding: 1.5rem 0; }
.modal__success .modal__check { width: 60px; height: 60px; margin: 0 auto 1rem; border-radius: 50%; background: rgba(45,106,79,0.12); display: flex; align-items: center; justify-content: center; color: var(--green-500); font-size: 1.7rem; }
body.modal-open { overflow: hidden; }