/* ===========================================================================
   Kervan — custom design layer (beyond Tailwind)
   Aesthetic: "Carved relief at dusk" — midnight indigo + silk gold + parchment.
   Tokens here are the single source of truth; Tailwind config mirrors them.
   =========================================================================== */

:root {
  /* Surfaces */
  --ink:        #080a16;   /* deepest midnight */
  --ink-1:      #0b0e1f;   /* base background  */
  --ink-2:      #11142a;   /* raised panel     */
  --panel:      #161a33;   /* card             */
  --panel-2:    #1c2140;   /* card hover       */

  /* Silk gold accent */
  --gold:       #d8b873;
  --gold-bright:#ecd49a;
  --gold-deep:  #b08a3e;

  /* Text */
  --text:       #ece7d8;   /* warm off-white   */
  --text-soft:  #c3c0d4;
  --muted:      #8f90a8;

  /* Lines & glow */
  --line:       rgba(216, 184, 115, 0.18);
  --line-soft:  rgba(255, 255, 255, 0.06);
  --glow:       rgba(216, 184, 115, 0.28);

  /* Rhythm */
  --radius:     14px;
  --radius-lg:  22px;
  --shadow:     0 18px 50px -22px rgba(0,0,0,0.85);
  --shadow-gold:0 0 0 1px var(--line), 0 24px 60px -28px var(--glow);
}

/* ---------------------------------------------------------------- base ---- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  background-color: var(--ink-1);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Atmospheric base: layered indigo mesh + a faint parchment grain.
   This is what keeps the page from ever looking flat or empty. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 700px at 78% -8%,  rgba(176, 138, 62, 0.16), transparent 60%),
    radial-gradient(900px 700px at 10% 4%,    rgba(58, 70, 140, 0.22),  transparent 55%),
    radial-gradient(1200px 900px at 50% 120%, rgba(120, 92, 46, 0.12),  transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-1) 40%, var(--ink) 100%);
}

/* Procedural grain — used as a default; if assets/img/texture.png exists it is
   layered over this in HTML, but the SVG noise guarantees texture regardless. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.045;
  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.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------- typography ---- */
.font-display { font-family: 'Cinzel', serif; }
.font-head    { font-family: 'Marcellus', serif; }

.eyebrow {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold);
}

/* Gold gradient text for hero/feature headlines */
.text-gold-grad {
  background: linear-gradient(110deg, var(--gold-bright) 0%, var(--gold) 45%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------- gold hairline ---- */
.hairline {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  border: 0;
}
.gold-tick {
  display: inline-block;
  width: 46px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* --------------------------------------------------------------- nav ------ */
.nav-shell {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(8, 10, 22, 0.55);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.nav-shell.is-scrolled {
  background: rgba(8, 10, 22, 0.88);
  border-bottom: 1px solid var(--line);
}
.nav-link {
  position: relative;
  color: var(--text-soft);
  transition: color .2s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  height: 1px; width: 0;
  background: var(--gold);
  transition: width .28s ease;
}
.nav-link:hover { color: var(--text); }
.nav-link:hover::after,
.nav-link:focus-visible::after { width: 100%; }

/* Mobile drawer */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.4,0,.2,1);
}
.mobile-menu.is-open { max-height: 420px; }

/* ------------------------------------------------- image w/ fallback ------ */
/* Every <figure class="media"> carries a gradient so a missing image still
   reads as a deliberate, premium surface — never a broken-image icon. */
.media {
  /* NOTE: every .media figure also carries the Tailwind `absolute inset-0`
     utility. Do NOT set `position: relative` here — styles.css loads after
     tailwind.css, so it would override `.absolute`, collapse the figure to
     0×0, and hide the image (regressed on the Tailwind-compile, 2026-06-27). */
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 70% 10%, rgba(216,184,115,0.20), transparent 55%),
    linear-gradient(155deg, #1a1d3a 0%, #0d1024 55%, #070815 100%);
  isolation: isolate;
}
.media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Progressive enhancement: fully visible by default (no-JS / crawler safe). */
  opacity: 1;
}
/* Only when JS is active do we hide-then-fade-in once the real pixels load. */
html.js .media > img {
  opacity: 0;
  transition: opacity .8s ease;
}
html.js .media > img.is-loaded { opacity: 1; }
/* if the image errors, it stays hidden and the gradient shows through */
.media > img[data-failed="1"] { display: none; }

/* Cinematic vignette + gold rim over any media */
.media-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8,10,22,0.15) 0%, transparent 30%, rgba(8,10,22,0.85) 100%),
    radial-gradient(140% 100% at 50% 0%, transparent 55%, rgba(8,10,22,0.6) 100%);
}

/* ------------------------------------------------------------- cards ------ */
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--ink-2) 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: var(--line);
  box-shadow: var(--shadow-gold);
}

.pillar-ico {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: var(--gold-bright);
  background: radial-gradient(circle at 30% 25%, rgba(216,184,115,0.22), rgba(216,184,115,0.04));
  border: 1px solid var(--line);
}

/* ------------------------------------------------- job triangle loop ------ */
.job-card { position: relative; }
.job-card .job-tag {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.18em;
}
/* the rotating trade-war loop badge */
.loop-ring {
  position: relative;
  width: 132px; height: 132px;
  display: grid; place-items: center;
}
.loop-ring svg { animation: spin 26s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------- price moment ------- */
.price-numeral {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-size: clamp(4.5rem, 18vw, 11rem);
  text-shadow: 0 0 60px var(--glow);
}

/* ----------------------------------------------------- charter seal ------- */
.seal {
  width: 96px; height: 96px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-deep) 70%, #7c5e23 100%);
  color: #1a1206;
  box-shadow: 0 14px 40px -12px var(--glow), inset 0 2px 6px rgba(255,255,255,.35);
  font-family: 'Cinzel', serif;
  font-weight: 700;
}

/* --------------------------------------------------------- FAQ accordion -- */
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
  color: var(--text);
  font-family: 'Marcellus', serif;
}
.faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); color: var(--gold-bright); }
.faq-icon { transition: transform .3s ease, color .3s ease; color: var(--gold); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
.faq-a > div { overflow: hidden; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }

/* --------------------------------------------------------- buttons -------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 0.95rem 1.7rem;
  transition: transform .2s ease, box-shadow .3s ease, background .3s ease, color .2s ease;
  will-change: transform;
}
.btn:active { transform: translateY(1px) scale(.99); }

.btn-gold {
  background: linear-gradient(120deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  color: #1a1206;
  box-shadow: 0 10px 30px -10px var(--glow);
}
.btn-gold:hover { box-shadow: 0 14px 42px -8px var(--glow); transform: translateY(-2px); }

.btn-ghost {
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255,255,255,0.02);
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold-bright); background: rgba(216,184,115,0.06); }

/* --------------------------------------------------- focus visibility ----- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.faq-q:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
  border-radius: 8px;
}

/* --------------------------------------------------------- reveal anim ---- */
/* Progressive enhancement: content is fully visible by default (no-JS / crawler
   safe). The reveal animation is opt-in and only engages when JS is active. */
.reveal {
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
}
html.js .reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------- misc ----------- */
.prose-tr p { color: var(--text-soft); line-height: 1.85; }
.prose-tr h2, .prose-tr h3 { color: var(--text); }
.divider-dot { color: var(--gold); opacity: .6; }

/* ------------------------------------------------- founder / pricing ------ */
/* Feature card: the offer surface + the "living path" — gold-ringed, glowing.
   Reuses .card; just a richer fill + a standing (not hover-only) gold edge. */
.card-feature {
  border-color: var(--line);
  box-shadow: var(--shadow-gold);
  background:
    radial-gradient(130% 120% at 82% -12%, rgba(216,184,115,0.12), transparent 55%),
    linear-gradient(180deg, var(--panel-2) 0%, var(--ink-2) 100%);
}
.card-feature:hover { transform: translateY(-4px); }

/* Smaller price numeral variant for the offer card (giant moment lives once). */
.price-numeral--sm {
  font-size: clamp(3rem, 9vw, 4.6rem);
  text-shadow: 0 0 42px var(--glow);
}

/* Pills (scarcity / meta labels) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: 'Cinzel', serif;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--gold);
  background: rgba(216,184,115,0.06);
}
.badge-scarce::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px var(--glow);
}

/* Rate-lock stamp — wax-seal cousin of .seal, reads as "stamped, permanent". */
.rate-stamp {
  width: 90px; height: 90px;
  border-radius: 50%;
  display: grid; place-items: center;
  text-align: center;
  border: 2px dashed var(--gold-deep);
  color: var(--gold-bright);
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  line-height: 1.4;
  transform: rotate(-8deg);
  background: radial-gradient(circle at 50% 38%, rgba(216,184,115,0.14), transparent 70%);
}

/* Risk-reversal badge — the 7-day refund, headlined. */
.refund-badge {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(120deg, rgba(216,184,115,0.12), rgba(216,184,115,0.02));
  color: var(--text-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}
.refund-badge__big {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  color: var(--gold-bright);
  font-size: 1.45rem;
  line-height: 1;
  white-space: nowrap;
}

/* ----------------------------------------------- founder pricing ladder --- */
/* Sequential scarcity: tier 1 is lifted + gold-ringed + live; tiers 2/3 read
   as "queued" (plain card, muted price) but keep full text contrast for a11y. */
.tier { position: relative; }

/* the active tier rises out of the ladder on desktop */
.tier--active { border-color: var(--gold); }
@media (min-width: 1024px) {
  .tier--active { transform: translateY(-10px); }
  .tier--active:hover { transform: translateY(-14px); }
}

.tier-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem 0.75rem;
  flex-wrap: wrap;
}

.tier-step {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 1.1rem;
}
.tier--soon .tier-step { color: var(--muted); }

.tier-quota {
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--text-soft);
}

.tier-price {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.tier-price__num {
  font-family: 'Cinzel', serif;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.01em;
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  text-shadow: 0 0 36px var(--glow);
}
.tier--soon .tier-price__num { color: var(--text); text-shadow: none; }
.tier-price__per {
  font-family: 'Marcellus', serif;
  font-size: 0.9rem;
  color: var(--text-soft);
  line-height: 1.15;
  padding-bottom: 0.4rem;
}
.tier-yearly {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted);
}

/* discount rosette */
.tier-discount {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  color: #1a1206;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-deep) 78%);
  box-shadow: 0 8px 22px -10px var(--glow);
}
.tier-discount span {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.1rem;
}
.tier--soon .tier-discount { filter: saturate(0.5) brightness(0.92); }

/* live / queued tier badges */
.badge-live {
  color: var(--gold-bright);
  border-color: var(--gold);
  background: rgba(216, 184, 115, 0.12);
}
.badge-live__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 0 rgba(236, 212, 154, 0.55);
  animation: livePulse 2s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(236, 212, 154, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(236, 212, 154, 0); }
  100% { box-shadow: 0 0 0 0 rgba(236, 212, 154, 0); }
}
.badge-soon {
  color: var(--muted);
  border-color: var(--line-soft);
  background: rgba(255, 255, 255, 0.02);
}

/* lifetime-lock chip — pinned to the card bottom so the three align */
.tier-lock {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(216, 184, 115, 0.05);
}
.tier--soon .tier-lock { color: var(--text-soft); }

/* the eventual standard — de-emphasized dashed strip */
.baseline-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 1.1rem 1.4rem;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  background: rgba(255, 255, 255, 0.015);
}
.baseline-row__label {
  font-family: 'Cinzel', serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--muted);
}
.baseline-row__price { color: var(--text-soft); }
.baseline-row__note { color: var(--muted); font-size: 0.85rem; }

/* ------------------------------------------------------------ forms ------- */
.field {
  width: 100%;
  background: rgba(8,10,22,0.6);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--text);
  padding: 0.85rem 1rem;
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field::placeholder { color: var(--muted); }
.field:hover { border-color: rgba(216,184,115,0.4); }
.field:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(216,184,115,0.18);
  background: rgba(8,10,22,0.85);
}
.field[aria-invalid="true"] {
  border-color: #e0a3a3;
  box-shadow: 0 0 0 3px rgba(224,163,163,0.16);
}
.field:disabled { opacity: .55; cursor: not-allowed; }

/* submit loading affordance */
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* status line under the form (success / error) */
.form-status {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0;
}
.form-status:empty { display: none; }
.form-status.is-error { color: #e9b0b0; }
.form-status.is-ok    { color: var(--gold-bright); }

/* selection */
::selection { background: rgba(216,184,115,0.3); color: #fff; }

/* thin scrollbar on supporting browsers */
* { scrollbar-width: thin; scrollbar-color: var(--gold-deep) transparent; }