/* ==========================================================================
   sul-method: brand identity
   Obsidian and champagne. No neon: the product sells restraint, so the
   surface should look restrained. Every colour, radius and shadow the site
   uses is declared here and nowhere else.
   ========================================================================== */

:root {
  /* Ground */
  --obsidian: #08080a;
  --surface: #0f0f13;
  --raised: #16161c;
  --raised-2: #1d1d24;

  /* Champagne: the single accent. Used sparingly, which is the point. */
  --gold: #c9a96a;
  --gold-lit: #f0ddae;
  --gold-deep: #9a7b3f;
  --gold-wash: rgba(201, 169, 106, 0.08);
  --gold-line: rgba(201, 169, 106, 0.22);

  /* Ink */
  --paper: #f4f2ed;
  --muted: #8b8b93;
  --faint: #5a5a62;

  /* Signals: desaturated so they never fight the gold */
  --ok: #7fb07f;
  --warn: #d0a355;
  --bad: #c96f6f;

  --line: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.11);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-lift: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  --shadow-gold: 0 18px 50px -24px rgba(201, 169, 106, 0.45);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Long decelerating tail: the motion arrives rather than snaps. */
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);

  --font-ar: "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --shell: 1120px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--paper);
  font-family: var(--font-ar);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* A single low, wide champagne bloom behind the fold. */
body::before {
  content: "";
  position: fixed;
  inset: -30% 0 auto;
  height: 70vh;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(201, 169, 106, 0.10), transparent 70%),
    radial-gradient(40% 80% at 80% 10%, rgba(201, 169, 106, 0.05), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.shell {
  width: min(100% - 40px, var(--shell));
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

/* --- type ---------------------------------------------------------------- */

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
}

.display {
  font-size: clamp(34px, 5.6vw, 66px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0;
  padding-block: 0.08em;
}

.section-title {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.5;
}

.lede {
  color: var(--muted);
  font-size: clamp(15px, 1.6vw, 18px);
  max-width: 58ch;
}

.gilt {
  display: inline-block;
  padding-block: 0.06em;
  background: linear-gradient(105deg, var(--gold-lit), var(--gold) 45%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--gold-line);
  border-radius: var(--r-pill);
  background: var(--gold-wash);
  color: var(--gold-lit);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.eyebrow .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 169, 106, 0.18);
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- section rhythm ------------------------------------------------------ */

.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-head { margin-bottom: clamp(32px, 5vw, 56px); }
.section-head .lede { margin-top: 14px; }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* --- surfaces ------------------------------------------------------------ */

.card {
  background: linear-gradient(180deg, var(--raised), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}

.card--lit {
  border-color: var(--gold-line);
  box-shadow: var(--shadow-gold);
}

/* --- controls ------------------------------------------------------------ */

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 13px 26px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease),
              background 0.25s var(--ease), border-color 0.25s var(--ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:not(:disabled):hover { transform: translateY(-2px); }

.btn--gold {
  background: linear-gradient(140deg, var(--gold-lit), var(--gold) 55%, var(--gold-deep));
  color: #241c0c;
  box-shadow: var(--shadow-gold);
}

.btn--ghost {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--line-strong);
  color: var(--paper);
}
.btn--ghost:not(:disabled):hover { border-color: var(--gold-line); color: var(--gold-lit); }

.btn--sm { padding: 8px 16px; font-size: 12.5px; }

.field { display: block; margin-bottom: 18px; }

.field > .label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
}

.input,
.select {
  width: 100%;
  padding: 13px 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--paper);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.input:focus,
.select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-wash);
}

.input--key {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-align: center;
  color: var(--gold-lit);
}

.select {
  appearance: none;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: left 18px top 22px, left 13px top 22px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.select option { background: var(--raised); color: var(--paper); }

/* --- utility ------------------------------------------------------------- */

.grid { display: grid; gap: 18px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Visible by default so the page still reads with no JS. The script sets
   data-anim on <html>, and only then is anything hidden to be revealed.
   Only opacity and transform are animated, so it stays on the compositor. */
[data-anim] .reveal {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  transition:
    opacity 0.85s var(--ease-soft),
    transform 1.1s var(--ease-soft);
}

[data-anim] .reveal.in {
  opacity: 1;
  transform: none;
}

@media (max-width: 860px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

.sep { display: inline-block; width: 1px; height: .85em; vertical-align: -.1em;
       margin-inline: 9px; background: currentColor; opacity: .3; }

/* The browser's own rule for this is only as specific as a class, so any
   component that sets its own display quietly cancels it. That is what left an
   empty red warning card on the page from the moment it loaded and stopped it
   ever going away. Nothing overrides this one. */
[hidden] { display: none !important; }