/* ============================================================
   BRVTAL — design system (mirrors the iOS/watchOS app)
   ============================================================ */

:root {
  /* SURFACES (dark-only — app is dark-only) */
  --bg:                #050505;
  --surface:           #0E0E10;
  --surface-elevated:  #16161A;

  /* STROKES */
  --stroke:            #2A2A2E;
  --stroke-active:     #3A3A3F;

  /* COPPER / TERRACOTTA */
  --copper:            #B46A3E;
  --copper-dim:        #7A4828;
  --terracotta:        #D96B2C;
  --terracotta-deep:   #A64D18;
  --terracotta-soft:   rgba(217, 107, 44, 0.12);

  /* EDITORIAL */
  --olive:             #6B8E5A;
  --gold:              #D4A84B;
  --burgundy:          #B84545;

  /* TEXT (perceived-luminance ladder) */
  --text-primary:      #F5F1EA;
  --text-secondary:    #B0B0B5;
  --text-tertiary:     #A0A0A5;
  --text-muted:        #8E8E93;

  /* TYPOGRAPHY */
  --font-display:      "Archivo Black", system-ui, -apple-system, sans-serif;
  --font-serif:        "Instrument Serif", "Times New Roman", serif;
  --font-mono:         "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-body:         -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;

  /* SPACING (4 / 8 / 16 / 24 / 40 / 64) */
  --sp-xs:   4px;
  --sp-sm:   8px;
  --sp-md:   16px;
  --sp-lg:   24px;
  --sp-xl:   40px;
  --sp-xxl:  64px;

  /* RADII */
  --r-tight: 4px;
  --r-card:  8px;
  --r-glass: 16px;
  --r-hero:  24px;

  /* MOTION */
  --ease:    cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================
   RESET
   ============================================================ */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* selection — terracotta tint */
::selection { background: var(--terracotta); color: #fff; }

/* ============================================================
   LAYOUT
   ============================================================ */

.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}

.page--narrow { max-width: 720px; }

/* fixed glow behind everything (radial terracotta) */
.bg-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 1200px 800px at 85% -10%, var(--terracotta-soft), transparent 60%),
    radial-gradient(ellipse 800px 600px at 0% 100%, rgba(180, 106, 62, 0.06), transparent 70%);
}

main, header, footer, nav { position: relative; z-index: 1; }

/* ============================================================
   TOP BAR (nav)
   ============================================================ */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 0 32px;
}

.topbar__brand {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s var(--ease);
}

.topbar__brand:hover { color: var(--terracotta); }

.topbar__brand .arrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0;
  font-size: 14px;
  transform: translateX(0);
  transition: transform 0.2s var(--ease);
}

.topbar__brand:hover .arrow { transform: translateX(-3px); }

/* lang toggle */
.lang-toggle {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--stroke);
  border-radius: 999px;
  background: var(--surface);
}

.lang-toggle button {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.lang-toggle button:hover { color: var(--text-primary); }

.lang-toggle button.active {
  background: var(--terracotta);
  color: #fff;
}

/* ============================================================
   EDITORIAL HEADERS (mono label + italic-serif sub)
   ============================================================ */

.label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.label--muted { color: var(--text-muted); }

.label--terracotta { color: var(--terracotta); }

.sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.sub--muted { color: var(--text-muted); font-size: 14px; }

/* ============================================================
   SECTION HEADER (label + fading hairline)
   ============================================================ */

.section {
  margin-top: 80px;
}

.section__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.section__head .label { white-space: nowrap; }

.section__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--stroke-active), transparent);
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding: 60px 0 80px;
  text-align: left;
}

.hero__brand {
  font-family: var(--font-display);
  font-size: clamp(64px, 14vw, 168px);
  letter-spacing: 0.04em;
  line-height: 0.9;
  color: var(--text-primary);
  margin: 0 0 20px;
  text-transform: uppercase;
}

.hero__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--text-tertiary);
  margin: 0 0 40px;
  letter-spacing: -0.005em;
  line-height: 1.3;
  max-width: 640px;
}

.hero__quote {
  border-left: 1px solid var(--terracotta);
  padding: 0 0 0 18px;
  margin: 0 0 48px;
  max-width: 540px;
}

.hero__quote p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  color: var(--text-secondary);
  margin: 0 0 10px;
  line-height: 1.55;
}

.hero__quote .label { font-size: 10px; letter-spacing: 0.20em; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--r-card);
  border: 1px solid var(--stroke);
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

.btn:hover {
  border-color: var(--stroke-active);
  background: var(--surface-elevated);
  transform: translateY(-1px);
}

.btn--primary {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #fff;
}

.btn--primary:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  filter: brightness(1.08);
}

.btn--ghost { background: transparent; }

.btn .icon {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
}

/* ============================================================
   HAIRLINE CARD (default content card)
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.card__title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: -0.005em;
  margin: 0 0 4px;
  color: var(--text-primary);
}

.card__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 14px;
}

.card__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.card__body p { margin: 0 0 10px; }
.card__body p:last-child { margin: 0; }

/* ============================================================
   BENTO GRID (asymmetric 2026 layout)
   ============================================================ */

.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.bento .card { padding: 28px; }

.bento .card--span-3 { grid-column: span 3; }
.bento .card--span-4 { grid-column: span 4; }
.bento .card--span-2 { grid-column: span 2; }
.bento .card--span-6 { grid-column: span 6; }

@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
  .bento .card { grid-column: 1 / -1; }
}

/* ============================================================
   META GRID (about-footer style 2-col)
   ============================================================ */

.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin: 16px 0;
}

.meta-grid .meta__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}

.meta-grid .meta__value {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ============================================================
   FAQ
   ============================================================ */

.faq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq__item {
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  padding: 22px 24px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

.faq__q {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0 0 8px;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.faq__a {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.faq__a p { margin: 0 0 10px; }
.faq__a p:last-child { margin: 0; }

/* ============================================================
   POLICY (privacy / support body)
   ============================================================ */

.policy h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 72px);
  letter-spacing: 0.02em;
  line-height: 0.95;
  color: var(--text-primary);
  margin: 0 0 12px;
  text-transform: uppercase;
}

.policy h2 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.005em;
  margin: 56px 0 12px;
  color: var(--text-primary);
}

.policy h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 28px 0 8px;
}

.policy p, .policy li {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.policy p { margin: 0 0 14px; }

.policy ul {
  margin: 12px 0 18px;
  padding-left: 0;
  list-style: none;
}

.policy li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}

.policy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 8px;
  height: 1px;
  background: var(--terracotta);
}

.policy strong {
  color: var(--text-primary);
  font-weight: 600;
}

.policy a {
  color: var(--terracotta);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.policy a:hover { color: var(--text-primary); }

.policy code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--surface-elevated);
  padding: 2px 8px;
  border-radius: var(--r-tight);
  color: var(--text-primary);
}

/* TLDR / callout block */
.callout {
  background: var(--surface-elevated);
  border: 1px solid var(--stroke);
  border-radius: var(--r-glass);
  padding: 24px 28px;
  margin: 28px 0 40px;
  position: relative;
  overflow: hidden;
}

.callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(400px 200px at 100% 0%, var(--terracotta-soft), transparent 70%);
  pointer-events: none;
}

.callout > * { position: relative; z-index: 1; }

.callout .label { color: var(--terracotta); margin-bottom: 10px; display: block; }

.callout p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--text-primary);
  margin: 0 0 12px;
  line-height: 1.5;
}

.callout ul { margin: 8px 0 0; }

/* contact card on policy/support */
.contact {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--stroke);
  border-radius: var(--r-card);
  margin-top: 12px;
}

.contact__icon {
  font-family: var(--font-mono);
  color: var(--terracotta);
  font-size: 14px;
  letter-spacing: 0.15em;
}

.contact a {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--stroke-active);
  padding-bottom: 1px;
}

.contact a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.response {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-muted);
  margin: 10px 0 0;
}

/* ============================================================
   FOOTER (mirrors BRVTALAboutFooter)
   ============================================================ */

.foot {
  margin-top: 100px;
  padding: 40px 0 60px;
  border-top: 1px solid var(--stroke);
}

.foot__brand {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 24px 0 4px;
}

.foot__tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0 0 24px;
}

.foot__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-bottom: 24px;
  max-width: 480px;
}

.foot__meta-cell .meta__label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: block;
  margin-bottom: 2px;
}

.foot__meta-cell .meta__value {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
}

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.foot__links a {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--stroke-active);
  padding-bottom: 2px;
  transition: all 0.2s var(--ease);
}

.foot__links a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

/* ============================================================
   LANGUAGE SWAP
   ============================================================ */

[data-lang]:not(.active) { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 540px) {
  .page { padding: 0 16px; }
  .topbar { padding: 16px 0 24px; }
  .hero { padding: 32px 0 56px; }
  .section { margin-top: 56px; }
  .card, .faq__item { padding: 20px; }
  .meta-grid { grid-template-columns: 1fr; gap: 10px; }
  .foot { margin-top: 64px; padding: 32px 0 48px; }
}

/* ============================================================
   MOTION
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .hero__brand,
  .hero__tagline,
  .hero__quote,
  .hero__cta,
  .section,
  .card,
  .faq__item {
    animation: rise 0.7s var(--ease) both;
  }

  .section { animation-delay: 0.1s; }

  @keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}