/* ==========================================================
   Umbrai — Warm Atelier (Direction A)
   ----------------------------------------------------------
   Warm off-white paper, terracotta accent, Fraunces serif,
   Inter as Söhne substitute, JetBrains Mono for detail.
   Every marketing page loads this. Same variable NAMES as the
   previous theme, so all rules cascade with new values.
   ========================================================== */

:root {
  /* warm off-white paper palette */
  --paper:     oklch(0.972 0.012 78);
  --paper-2:   oklch(0.955 0.016 76);
  --paper-3:   oklch(0.935 0.020 74);
  --ink:       oklch(0.195 0.020 40);
  --ink-2:     oklch(0.34  0.014 42);
  --mute:      oklch(0.55  0.010 50);
  --rule:      oklch(0.82  0.016 65);
  --rule-soft: oklch(0.90  0.014 68);

  /* terracotta, saturated but warm — the one accent per screen */
  --accent:    oklch(0.58 0.150 38);
  --accent-ink:oklch(0.44 0.120 34);
  --accent-2:  oklch(0.70 0.040 150);   /* sage — used sparingly */
  --lime:      oklch(0.70 0.040 150);   /* legacy name — maps to sage */

  /* type */
  --sans:    "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", sans-serif;
  --display: "Fraunces", "Times New Roman", serif;
  --serif:   "Fraunces", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  /* radii — atelier feels pill-y with flat-ish cards */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 22px;
  --r-pill: 999px;

  --ease:   cubic-bezier(.2, .7, .2, 1);
  --t-fast: 180ms;
  --t-med:  260ms;

  --shadow-card:     0 2px 8px -3px oklch(0.3 0.03 40 / 0.10);
  --shadow-floating: 0 30px 80px -40px oklch(0.3 0.03 40 / 0.35), 0 2px 8px -4px oklch(0.3 0.03 40 / 0.15);
}

/* --------- base --------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--accent); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
::selection { background: var(--accent); color: var(--paper); }

/* --------- layout helpers --------- */
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 56px; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); }

/* --------- status pill --------- */
.pill-lab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--r-pill);
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
}
.pill-lab .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent-2) 35%, transparent);
}
.chip-soft {
  padding: 7px 12px; background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  font-size: 13px; color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 8px;
}
.chip-soft .stars { color: var(--accent); letter-spacing: 1px; font-size: 11px; }
.chip-soft b { color: var(--ink); font-weight: 500; }

/* --------- buttons (pill-shape, Atelier style) --------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: 14px;
  padding: 11px 18px;
  border-radius: var(--r-pill);
  border: 1px solid var(--ink);
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  cursor: pointer; color: var(--ink);
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn.accent   { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn.accent:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--paper); }
.btn.ghost    { border-color: var(--rule); color: var(--ink); background: transparent; }
.btn.ghost:hover { border-color: var(--ink); background: var(--paper-2); color: var(--ink); }
.btn.pill     { border-radius: var(--r-pill); }
.btn.lg       { padding: 14px 22px; font-size: 15px; }
.btn .arr { display: inline-block; width: 14px; height: 1px; background: currentColor; position: relative; }
.btn .arr::after {
  content: ""; position: absolute; right: 0; top: -3px;
  width: 7px; height: 7px;
  border-right: 1px solid currentColor;
  border-top:   1px solid currentColor;
  transform: rotate(45deg);
}

/* --------- topbar --------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.topbar-inner { display: flex; align-items: center; padding: 16px 56px; gap: 28px; justify-content: space-between; }
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 22px; font-weight: 400; letter-spacing: -0.015em;
  color: var(--ink);
}
.brand em { font-family: var(--display); font-style: italic; font-weight: 300; color: var(--accent); }
.brand .glyph {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--ink); color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--display); font-style: italic; font-size: 18px; line-height: 1;
}
.brand sub { font-size: 11px; color: var(--mute); font-weight: 400; letter-spacing: 0; margin-left: 2px; }

nav.primary { display: flex; gap: 32px; }
nav.primary a { font-family: var(--sans); font-size: 14px; color: var(--ink-2); position: relative; padding: 6px 0; border-bottom: 0; }
nav.primary a:hover { color: var(--accent); }
.nav-right { display: flex; gap: 14px; align-items: center; }

.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute); }
.lang-switch button { padding: 4px 8px; color: var(--mute); border-radius: var(--r-xs); }
.lang-switch button.active { background: var(--ink); color: var(--paper); }
.lang-switch .sep { opacity: 0.5; }

/* --------- marquee (warm, thin) --------- */
.marquee {
  overflow: hidden;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  background: var(--paper-2);
  padding: 16px 0;
  margin: 24px 0 0;
}
.marquee-track { display: flex; gap: 48px; animation: umbrai-slide 50s linear infinite; white-space: nowrap; align-items: center; }
.marquee span { font-family: var(--display); font-size: 22px; font-style: italic; font-weight: 400; color: var(--ink-2); }
.marquee em { font-family: var(--display); font-style: italic; color: var(--accent); }
.marquee .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.marquee .glyph { color: var(--accent); font-size: 18px; flex: 0 0 auto; }
@keyframes umbrai-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------- section chrome --------- */
.section { padding: 96px 0; }
.section.tight { padding: 64px 0; }
.section.hero-pad { padding: 48px 0 80px; }

/* --------- KPI strip --------- */
.kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-top: 20px; }
.kpi > div { padding: 28px 24px; border-right: 1px solid var(--rule-soft); }
.kpi > div:last-child { border-right: 0; }
.kpi .v { font-family: var(--display); font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -0.02em; }
.kpi .v em { font-family: var(--display); font-style: italic; color: var(--accent); font-weight: 300; }
.kpi .k { margin-top: 8px; font-size: 13px; color: var(--mute); }

/* --------- pack card (pricing) --------- */
.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pack {
  padding: 28px 26px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; min-height: 440px;
  transition: border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.pack:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-card); }
.pack.featured { border-color: var(--accent); background: var(--paper); box-shadow: var(--shadow-floating); }
.pack .tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.pack.featured .tag { color: var(--accent-ink); }
.pack .name { font-family: var(--display); font-style: italic; font-size: 34px; font-weight: 300; letter-spacing: -0.015em; margin-bottom: 6px; color: var(--ink); }
.pack .price { font-family: var(--display); font-size: 48px; font-weight: 300; letter-spacing: -0.025em; line-height: 1; color: var(--ink); }
.pack .price .cents { font-family: var(--display); font-size: 24px; color: var(--mute); font-weight: 300; letter-spacing: 0; font-style: italic; }
.pack .credits { font-size: 14px; color: var(--ink-2); margin-top: 8px; }
.pack .credits b { color: var(--ink); font-weight: 500; }
.pack ul { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 10px; flex: 1; }
.pack li { font-size: 14px; color: var(--ink-2); display: flex; align-items: start; gap: 10px; }
.pack li::before { content: ""; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--paper-3); margin-top: 4px; position: relative; }
.pack.featured li::before { background: color-mix(in oklch, var(--accent) 20%, var(--paper)); }
.pack li span { flex: 1; }
.pack .cta { margin-top: auto; }
.pack .cta .btn { width: 100%; justify-content: center; }
.pack .foot-note { margin-top: 12px; font-size: 11px; color: var(--mute); font-family: var(--mono); letter-spacing: 0.1em; text-align: center; }

/* --------- footer --------- */
.umbrai-footer { padding: 60px 0 36px; border-top: 1px solid var(--rule-soft); background: var(--paper-2); margin-top: 40px; }
.foot-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand h3 { font-family: var(--display); font-size: 40px; font-weight: 300; letter-spacing: -0.015em; color: var(--ink); }
.foot-brand h3 em { font-family: var(--display); font-style: italic; color: var(--accent); font-weight: 300; }
.foot-brand p { color: var(--mute); max-width: 30ch; margin-top: 10px; font-size: 14px; line-height: 1.5; }
.foot-col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); margin-bottom: 12px; }
.foot-col ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot-col ul a { color: var(--ink-2); font-size: 14px; }
.foot-col ul a:hover { color: var(--accent); }
.foot-bottom { display: flex; justify-content: space-between; padding-top: 28px; margin-top: 36px; border-top: 1px solid var(--rule-soft); font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); }

/* --------- placeholder face grid --------- */
.plate { position: relative; aspect-ratio: 3/4; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-3); }
.plate .tint { position: absolute; inset: 0; }
.plate .stripe { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, oklch(0 0 0 / 0.04) 0 1px, transparent 1px 12px); mix-blend-mode: multiply; }
.plate .face-mask {
  position: absolute; width: 44%; aspect-ratio: 3/4; top: 12%; left: 50%; transform: translateX(-50%);
  border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
  background: oklch(0.82 0.035 55 / 0.45);
  border: 1.2px dashed oklch(0.4 0.06 40 / 0.5);
}
.plate .idx { position: absolute; top: 10px; left: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink); background: oklch(1 0 0 / 0.75); padding: 4px 8px; border-radius: var(--r-xs); }
.plate .cap { position: absolute; bottom: 10px; left: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); background: oklch(1 0 0 / 0.75); padding: 4px 7px; border-radius: var(--r-xs); backdrop-filter: blur(4px); }

/* Warm tints re-used from the mockup */
.tint-01 { background: linear-gradient(160deg, oklch(0.78 0.03 60),  oklch(0.60 0.04 40)); }
.tint-02 { background: linear-gradient(160deg, oklch(0.88 0.020 90), oklch(0.72 0.030 55)); }
.tint-03 { background: linear-gradient(160deg, oklch(0.32 0.020 280), oklch(0.20 0.020 290)); }
.tint-04 { background: linear-gradient(160deg, oklch(0.80 0.040 20), oklch(0.55 0.100 28)); }
.tint-05 { background: linear-gradient(160deg, oklch(0.92 0.015 90), oklch(0.80 0.020 80)); }
.tint-06 { background: linear-gradient(160deg, oklch(0.70 0.060 160), oklch(0.45 0.050 170)); }
.tint-07 { background: linear-gradient(160deg, oklch(0.85 0.015 60), oklch(0.94 0.010 80)); }
.tint-08 { background: linear-gradient(160deg, oklch(0.62 0.050 45), oklch(0.35 0.040 30)); }

/* --------- form inputs (shared) --------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  font: inherit;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 15%, transparent);
}
.field .hint { margin-top: 6px; font-size: 12px; color: var(--mute); }

.auth-card {
  max-width: 460px; margin: 0 auto;
  padding: 44px 40px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.auth-card h1 { font-family: var(--display); font-style: italic; font-weight: 300; font-size: 44px; letter-spacing: -0.02em; margin-bottom: 8px; color: var(--ink); }
.auth-card .lede { color: var(--ink-2); margin-bottom: 26px; font-size: 15px; line-height: 1.55; }
.auth-card .btn { width: 100%; justify-content: center; padding: 14px; font-size: 14px; }
.auth-card .foot { margin-top: 24px; font-size: 13px; color: var(--mute); text-align: center; }
.auth-card .foot a { color: var(--accent); border-bottom: 1px solid color-mix(in oklch, var(--accent) 30%, transparent); }

.msg { padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; margin-bottom: 16px; }
.msg.err { background: oklch(0.95 0.05 25); color: oklch(0.4 0.15 25); border: 1px solid oklch(0.85 0.08 25); }
.msg.ok  { background: oklch(0.95 0.08 150); color: oklch(0.35 0.12 150); border: 1px solid oklch(0.80 0.08 150); }

/* --------- reveal --------- */
[data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-reveal].on { opacity: 1; transform: none; }

/* --------- responsive --------- */
@media (max-width: 1100px) {
  .wrap { padding: 0 24px; }
  .topbar-inner { padding: 16px 24px; gap: 16px; }
  nav.primary { display: none; }
  .kpi { grid-template-columns: 1fr 1fr; }
  .pack-grid { grid-template-columns: 1fr; }
  .foot-row { grid-template-columns: 1fr 1fr; }
  .marquee { margin: 24px 0 0; }
}