/* ==========================================================================
   TANTORIA STUDIOS — Design System
   A premium dark theme built from the locked Nar brand palette.
   Tokens trace back to ArtBible.md §4 and UITheme.md §3.
   ========================================================================== */

/* ---------- Tokens ---------------------------------------------------------- */
:root {
  /* Surfaces — deep night indigo, darkened for cinematic contrast */
  --bg:        #0a0c13;
  --bg-2:      #0f121c;
  --panel:     #161a27;
  --panel-2:   #1d2231;
  --inset:     #232838;
  --border:    #2a3043;
  --border-2:  #353c52;

  /* Brand accents (locked palette) */
  --fire:      #f0712c;   /* sunset orange — primary energy / "Nar" */
  --fire-2:    #ff8d4a;   /* lighter fire for gradients/hover */
  --gold:      #e3b25c;   /* sandy gold — premium, steel highlight */
  --teal:      #1fa6a0;   /* Nile teal — secondary, links, info */
  --red:       #c8324b;   /* hibiscus red — hot moments */

  /* Text */
  --text:      #f4ecdd;   /* limestone */
  --muted:     #a7a8ba;
  --faint:     #6f7287;

  /* Effects */
  --fire-grad:  linear-gradient(135deg, #ff8d4a 0%, #f0712c 45%, #d6571a 100%);
  --steel-grad: linear-gradient(180deg, #e8edf5 0%, #aeb6c6 50%, #7d8598 100%);
  --gold-grad:  linear-gradient(135deg, #f3d089 0%, #e3b25c 55%, #b6803a 100%);
  --glow-fire:  0 0 40px rgba(240,113,44,.35);
  --shadow:     0 18px 50px -18px rgba(0,0,0,.75);
  --shadow-sm:  0 8px 24px -10px rgba(0,0,0,.6);

  /* Geometry */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 26px;
  --maxw:      1180px;

  /* Type */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Reset ----------------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  background: var(--bg);
  /* static fallback warmth before the animated bg layer mounts (no-JS safe).
     NOTE: no `background-attachment: fixed` — it forces a full-viewport repaint
     on every scroll frame (major jank on mid devices). The fixed `.bg-fx`
     layer already provides the parallax-free look without the repaint cost. */
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(240,113,44,.12), transparent 60%),
    radial-gradient(900px 500px at -5% 100%, rgba(31,166,160,.08), transparent 55%);
}

body {
  font-family: var(--font-body);
  background: transparent;
  color: var(--text);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
/* width/height attrs on <img> are kept only to reserve aspect-ratio (no layout
   shift). height:auto stops the literal pixel height from stretching images
   that CSS sizes by width (the brand logos use width:% / width:200px). */
img { height: auto; }
a { color: var(--teal); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--fire); }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: rgba(240,113,44,.35); color: #fff; }

/* ---------- Layout ---------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; position: relative; }
.section--tight { padding: 64px 0; }
.section--alt { background:
  linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0)) , var(--bg-2); }
.divider { height: 1px; border: 0; background:
  linear-gradient(90deg, transparent, var(--border-2), transparent); margin: 0; }

/* ---------- Typography ------------------------------------------------------ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; color: #fff; letter-spacing: -.02em; }
p { color: var(--muted); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--fire);
  margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--fire-grad); border-radius: 2px; }

.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow::before { display: none; }
.section-head h2 { font-size: clamp(30px, 4vw, 46px); }
.section-head p { margin-top: 16px; font-size: 18px; }

.text-fire { color: var(--fire); }
.text-gold { color: var(--gold); }
.gradient-text {
  background: var(--fire-grad); -webkit-background-clip: text;
  background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 14px 28px; border-radius: 999px; border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  white-space: nowrap; cursor: pointer; line-height: 1;
}
.btn:active { transform: scale(.97); }
.btn-fire {
  background: var(--fire-grad); color: #1a0f06; box-shadow: var(--glow-fire);
}
.btn-fire:hover { color: #1a0f06; transform: translateY(-2px); box-shadow: 0 0 52px rgba(240,113,44,.5); }
.btn-ghost {
  background: rgba(255,255,255,.03); color: var(--text);
  border-color: var(--border-2); backdrop-filter: blur(6px);
}
.btn-ghost:hover { color: #fff; border-color: var(--gold); background: rgba(227,178,92,.08); }
.btn-gold { background: var(--gold-grad); color: #21160a; }
.btn-gold:hover { color: #21160a; transform: translateY(-2px); }
.btn-lg { padding: 17px 36px; font-size: 16px; }
.btn-block { width: 100%; }
.btn .ar { font-size: 13px; opacity: .8; }

/* ---------- Navigation ------------------------------------------------------ */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(10,12,19,.82); backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { height: 38px; width: auto; }
.brand-text { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #fff; letter-spacing: .02em; }
.brand-text small { display: block; font-size: 9px; letter-spacing: .34em; color: var(--gold); font-weight: 600; margin-top: -2px; }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
  color: var(--muted); font-weight: 500; font-size: 15px; padding: 9px 14px;
  border-radius: 10px; position: relative;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.04); }
.nav-links a.active { color: #fff; }
.nav-links a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px;
  height: 2px; background: var(--fire-grad); border-radius: 2px;
}
.nav-cta { margin-left: 8px; }

.nav-toggle { display: none; background: none; border: 0; color: #fff; padding: 8px; }
.nav-toggle svg { width: 26px; height: 26px; }

@media (max-width: 920px) {
  .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; gap: 2px;
    background: rgba(10,12,19,.97); backdrop-filter: blur(14px); padding: 16px 24px 28px;
    border-bottom: 1px solid var(--border); align-items: stretch;
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .25s ease;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .nav-links a { padding: 14px; font-size: 17px; }
  .nav-links a.active::after { display: none; }
  .nav-links .btn { margin-top: 10px; }
}

/* ---------- Hero ------------------------------------------------------------ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,19,.55) 0%, rgba(10,12,19,.35) 40%, rgba(10,12,19,.96) 100%),
    radial-gradient(1000px 600px at 50% 30%, transparent, rgba(10,12,19,.5));
}
.hero .container { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 64px; }
.hero-inner { max-width: 760px; }
.hero h1 {
  font-size: clamp(40px, 7vw, 84px); line-height: 1.02; letter-spacing: -.03em;
  margin-bottom: 22px;
}
.hero .lede { font-size: clamp(17px, 2.2vw, 21px); color: var(--text); opacity: .9; max-width: 600px; margin-bottom: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-scroll {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: var(--faint); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 8px; animation: bob 2.4s ease-in-out infinite;
}
.hero-scroll span { width: 1px; height: 30px; background: linear-gradient(var(--fire), transparent); }
@keyframes bob { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,7px)} }

/* page hero (interior pages) */
.page-hero { position: relative; padding: 150px 0 64px; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(800px 360px at 20% 0%, rgba(240,113,44,.14), transparent 60%);
}
.page-hero h1 { font-size: clamp(36px, 6vw, 64px); }
.page-hero .lede { font-size: 19px; color: var(--muted); max-width: 640px; margin-top: 18px; }

/* ---------- Cards ----------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.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: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  position: relative; overflow: hidden;
}
.card:hover { transform: translateY(-4px); border-color: var(--border-2); box-shadow: var(--shadow-sm); }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(240,113,44,.12); border: 1px solid rgba(240,113,44,.25);
  color: var(--fire); margin-bottom: 18px; font-size: 24px;
}
.card-icon.teal { background: rgba(31,166,160,.12); border-color: rgba(31,166,160,.28); color: var(--teal); }
.card-icon.gold { background: rgba(227,178,92,.12); border-color: rgba(227,178,92,.28); color: var(--gold); }
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { font-size: 15.5px; }
.card-num { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--faint); letter-spacing: .1em; }

/* ---------- Placeholder treatment (future content) ------------------------- */
.ph {
  position: relative; border: 1px dashed var(--border-2); border-radius: var(--radius);
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.014) 0 12px, transparent 12px 24px),
    var(--bg-2);
  min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 24px; overflow: hidden; transition: border-color .25s ease, transform .25s ease;
}
.ph:hover { border-color: var(--fire); transform: translateY(-4px); }
.ph::before { /* sheen sweep */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(240,113,44,.08) 50%, transparent 70%);
  transform: translateX(-100%); transition: none;
}
.ph:hover::before { animation: sweep 1.1s ease; }
@keyframes sweep { to { transform: translateX(100%); } }
.ph-badge {
  position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); background: rgba(227,178,92,.1); border: 1px solid rgba(227,178,92,.3);
  padding: 5px 11px; border-radius: 999px;
}
.ph-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.ph-emoji { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-60%); font-size: 40px; opacity: .25; }
.ph h3 { font-size: 19px; margin-bottom: 4px; position: relative; }
.ph p { font-size: 14px; color: var(--faint); position: relative; }

/* ---------- Split / media rows --------------------------------------------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.split.rev .split-media { order: -1; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 32px; } .split.rev .split-media { order: 0; } }
.split-media {
  border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border);
  background: var(--panel); aspect-ratio: 4/3; position: relative;
}
.split h2 { font-size: clamp(26px, 3.4vw, 38px); margin-bottom: 18px; }
.split p + p { margin-top: 14px; }

/* ---------- Pillars / values ----------------------------------------------- */
.pillar { display: flex; gap: 18px; align-items: flex-start; }
.pillar .pillar-num {
  flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; color: var(--fire);
  background: rgba(240,113,44,.1); border: 1px solid rgba(240,113,44,.25);
}
.pillar h3 { font-size: 18px; margin-bottom: 6px; }
.pillar p { font-size: 15px; }

/* ---------- Stat band ------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; text-align: center; }
@media (max-width: 700px){ .stats { grid-template-columns: repeat(2,1fr); } }
.stat .num { font-family: var(--font-display); font-weight: 800; font-size: clamp(30px,4vw,44px); }
.stat .lbl { color: var(--muted); font-size: 14px; margin-top: 4px; }

/* ---------- Founders -------------------------------------------------------- */
.founder { text-align: center; }
.founder .avatar {
  width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 18px;
  background: radial-gradient(circle at 50% 35%, var(--inset), var(--bg-2));
  border: 1px solid var(--border-2); display: grid; place-items: center;
  color: var(--faint); font-size: 34px; position: relative; overflow: hidden;
}
.founder .avatar::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(from 180deg, transparent, rgba(240,113,44,.4), transparent);
  opacity: 0; transition: opacity .3s ease;
}
.founder:hover .avatar::after { opacity: 1; }
.founder h3 { font-size: 18px; }
.founder .role { color: var(--fire); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.founder p { font-size: 14.5px; margin-top: 8px; }

/* ---------- Timeline / roadmap --------------------------------------------- */
.timeline { position: relative; padding-left: 30px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px;
  background: linear-gradient(var(--fire), var(--teal)); border-radius: 2px; }
.tl-item { position: relative; padding-bottom: 34px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before {
  content: ""; position: absolute; left: -30px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 3px solid var(--faint);
}
.tl-item.done::before { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 12px rgba(31,166,160,.5); }
.tl-item.active::before { border-color: var(--fire); background: var(--fire); box-shadow: var(--glow-fire); }
.tl-phase { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.tl-item.done .tl-phase { color: var(--teal); }
.tl-item.active .tl-phase { color: var(--fire); }
.tl-item h3 { font-size: 19px; margin: 4px 0 6px; }
.tl-item p { font-size: 15px; }
.tl-tag { display: inline-block; margin-top: 8px; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--border-2); color: var(--muted); }
.tl-item.active .tl-tag { color: var(--fire); border-color: rgba(240,113,44,.4); background: rgba(240,113,44,.08); }

/* ---------- Blog ------------------------------------------------------------ */
.post {
  display: flex; flex-direction: column; background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  transition: transform .25s ease, border-color .25s ease;
}
.post:hover { transform: translateY(-4px); border-color: var(--border-2); }
.post-cover { aspect-ratio: 16/9; background:
  repeating-linear-gradient(135deg, rgba(255,255,255,.015) 0 12px, transparent 12px 24px), var(--inset);
  display: grid; place-items: center; color: var(--faint); position: relative; }
.post-cover .tag { position: absolute; top: 14px; left: 14px; font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--teal);
  background: rgba(31,166,160,.12); border: 1px solid rgba(31,166,160,.3); padding: 4px 10px; border-radius: 999px; }
.post-body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
.post-body .meta { font-size: 13px; color: var(--faint); margin-bottom: 8px; }
.post-body h3 { font-size: 19px; margin-bottom: 8px; }
.post-body p { font-size: 14.5px; flex: 1; }
.post-body .read { margin-top: 14px; font-weight: 600; font-size: 14px; color: var(--fire); }

.empty-state {
  text-align: center; padding: 60px 24px; border: 1px dashed var(--border-2);
  border-radius: var(--radius); background: var(--bg-2);
}
.empty-state .ico { font-size: 40px; opacity: .4; margin-bottom: 14px; }

/* ---------- Community / social --------------------------------------------- */
.social-card {
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
  background: linear-gradient(180deg, var(--panel), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--radius); transition: .25s ease;
}
.social-card:hover { border-color: var(--accent, var(--fire)); transform: translateY(-3px); color: var(--text); }
.social-ico { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2); }
.social-ico svg { width: 24px; height: 24px; }
.social-card .name { font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 16px; }
.social-card .handle { font-size: 13px; color: var(--muted); }
.social-card .arrow { margin-left: auto; color: var(--faint); transition: .2s ease; }
.social-card:hover .arrow { color: var(--fire); transform: translateX(3px); }

/* ---------- Forms ----------------------------------------------------------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px; letter-spacing: .02em; }
.field input, .field textarea, .field select {
  width: 100%; padding: 13px 15px; background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: var(--radius-sm); color: var(--text); font: inherit; font-size: 15px; transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--fire); box-shadow: 0 0 0 3px rgba(240,113,44,.15);
}
.form-note { font-size: 13px; color: var(--faint); margin-top: 8px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px){ .form-row { grid-template-columns: 1fr; } }

.newsletter {
  display: flex; gap: 10px; max-width: 480px; flex-wrap: wrap;
}
.newsletter input { flex: 1; min-width: 220px; padding: 14px 16px; background: var(--bg-2);
  border: 1px solid var(--border-2); border-radius: 999px; color: var(--text); font: inherit; }
.newsletter input:focus { outline: none; border-color: var(--fire); }

.form-success { display: none; padding: 14px 16px; border-radius: var(--radius-sm);
  background: rgba(31,166,160,.1); border: 1px solid rgba(31,166,160,.35); color: var(--teal); font-size: 14px; }
.form-success.show { display: block; }

/* ---------- CTA band -------------------------------------------------------- */
.cta-band {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); padding: 64px 48px; text-align: center;
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(240,113,44,.18), transparent 60%),
    linear-gradient(180deg, var(--panel), var(--bg-2));
}
.cta-band h2 { font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
.cta-band p { max-width: 540px; margin: 0 auto 28px; font-size: 17px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- Footer ---------------------------------------------------------- */
.footer { border-top: 1px solid var(--border); background: var(--bg-2); padding: 64px 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 820px){ .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px){ .footer-grid { grid-template-columns: 1fr; } }
.footer .brand img { height: 42px; width: auto; }
.footer-about p { font-size: 14.5px; margin-top: 16px; max-width: 300px; }
.footer h4 { font-family: var(--font-display); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.footer-col a { display: block; color: var(--muted); font-size: 15px; padding: 5px 0; }
.footer-col a:hover { color: var(--fire); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2); color: var(--muted); }
.footer-social a:hover { color: var(--fire); border-color: var(--fire); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); }
.footer-bottom p { font-size: 13.5px; color: var(--faint); }
.footer-bottom .links a { color: var(--faint); font-size: 13.5px; margin-left: 18px; }

/* ---------- Misc ------------------------------------------------------------ */
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--border-2); color: var(--muted);
  background: rgba(255,255,255,.02); }
.chip.fire { color: var(--fire); border-color: rgba(240,113,44,.35); background: rgba(240,113,44,.07); }
.chip.teal { color: var(--teal); border-color: rgba(31,166,160,.35); background: rgba(31,166,160,.07); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-live .dot { animation: pulse 1.8s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }

.platform-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.platform { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--border); font-size: 14px; color: var(--muted); }
.platform svg { width: 18px; height: 18px; }
.platform small { display: block; font-size: 10px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }

.prose p { margin-bottom: 16px; }
.prose h2 { font-size: 26px; margin: 36px 0 14px; }
.prose ul { list-style: disc; padding-left: 22px; margin-bottom: 16px; }
.prose ul li { color: var(--muted); margin-bottom: 6px; }

/* ---------- Reveal animation ------------------------------------------------ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .hero-scroll, .chip-live .dot { animation: none; }
}

/* ==========================================================================
   Bilingual — English / Egyptian Arabic (RTL)
   Mirrors the toggle pattern used across Design Docs.
   ========================================================================== */
.t-ar { display: none; }
html.ar .t-ar { display: revert; }
html.ar .t-en { display: none; }

/* Arabic typography — Cairo (per UITheme.md §4), roomier line-height */
html.ar { --font-display: "Cairo", "Segoe UI", system-ui, sans-serif;
          --font-body: "Cairo", "Segoe UI", system-ui, sans-serif; }
html.ar body { line-height: 1.9; }
html.ar h1, html.ar h2, html.ar h3, html.ar h4 { letter-spacing: 0; font-weight: 800; }
html.ar .eyebrow { letter-spacing: .04em; }
html.ar .brand-text small { letter-spacing: .12em; }
html.ar .card-num, html.ar .tl-phase { letter-spacing: .04em; }

/* Language toggle */
.langtoggle { display: inline-flex; gap: 3px; flex: none;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-2);
  border-radius: 999px; padding: 3px; }
.langtoggle button { border: 0; background: transparent; color: var(--muted);
  font-family: "Cairo", var(--font-body); font-weight: 700; font-size: 13px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer; line-height: 1; transition: .2s ease; }
.langtoggle button:hover { color: #fff; }
.langtoggle button.on { background: var(--fire-grad); color: #1a0f06; }

/* Right-hand nav cluster keeps links + toggle + hamburger together */
.nav-right { display: flex; align-items: center; gap: 10px; }

/* RTL flips for the few physical-property components */
html.ar .footer-bottom .links a { margin-left: 0; margin-right: 18px; }
html.ar .social-card .arrow { margin-left: 0; margin-right: auto; transform: scaleX(-1); }
html.ar .social-card:hover .arrow { transform: scaleX(-1) translateX(3px); }
html.ar .timeline { padding-left: 0; padding-right: 30px; }
html.ar .timeline::before { left: auto; right: 7px; }
html.ar .tl-item::before { left: auto; right: -30px; }
html.ar .prose ul { padding-left: 0; padding-right: 22px; }

/* ==========================================================================
   THEMING — Dark (default) + Light, and the living fire background
   ========================================================================== */

/* ---- Light theme token overrides (Tantoria identity kept) --------------- */
html.light {
  --bg:        #f4ece0;   /* warm limestone */
  --bg-2:      #ece1d1;
  --panel:     #fffaf1;
  --panel-2:   #f6eddd;
  --inset:     #efe5d4;
  --border:    #e0d3bf;
  --border-2:  #cdbda3;
  --text:      #1e2036;   /* night indigo for crisp reading on light */
  --muted:     #5b5c6e;
  --faint:     #8b8498;
  --shadow:    0 18px 50px -20px rgba(34,36,63,.28);
  --shadow-sm: 0 8px 24px -12px rgba(34,36,63,.22);
}
html.light h1, html.light h2, html.light h3, html.light h4 { color: #1b1d30; }
html.light .btn-ghost { background: rgba(34,36,63,.04); }
html.light .btn-ghost:hover { background: rgba(227,178,92,.16); }
html.light .chip,
html.light .langtoggle,
html.light .theme-toggle,
html.light .social-ico,
html.light .footer-social a,
html.light .nav-links a:hover { background: rgba(34,36,63,.05); }
html.light ::selection { background: rgba(240,113,44,.3); color: #1b1d30; }

/* ---- Theme toggle button ------------------------------------------------- */
.theme-toggle {
  display: inline-grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border-2);
  color: var(--muted); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.theme-toggle:hover { color: var(--fire); border-color: var(--fire); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon { display: none; }
html.light .theme-toggle .icon-sun { display: none; }
html.light .theme-toggle .icon-moon { display: block; }

/* ---- Nav contrast (transparent over a dark hero vs themed bg) ----------- */
.brand-text { color: var(--text); }
.nav-links a { color: var(--muted); }
.nav-links a:hover,
.nav-links a.active { color: var(--text); }
.nav-toggle { color: var(--text); }
.nav.scrolled { background: var(--nav-bg, rgba(10,12,19,.82)); }
html.light .nav.scrolled { --nav-bg: rgba(247,241,232,.86); }

/* Pages whose hero is always the dark cinematic one keep light nav text up top */
body.has-dark-hero .nav:not(.scrolled) .nav-links a { color: rgba(244,236,224,.82); }
body.has-dark-hero .nav:not(.scrolled) .nav-links a:hover,
body.has-dark-hero .nav:not(.scrolled) .nav-links a.active { color: #fff; }
body.has-dark-hero .nav:not(.scrolled) .brand-text,
body.has-dark-hero .nav:not(.scrolled) .nav-toggle { color: #fff; }

/* Mobile dropdown surface follows the theme */
@media (max-width: 920px) {
  .nav-links { background: var(--nav-menu-bg, rgba(10,12,19,.97)); }
  html.light .nav-links { --nav-menu-bg: rgba(247,241,232,.98); }
  body.has-dark-hero .nav:not(.scrolled) .nav-links.open a { color: var(--text); }
  html.light body.has-dark-hero .nav:not(.scrolled) .nav-links.open a { color: var(--text); }
}

/* Dark cinematic hero keeps light text in BOTH themes */
html.light .hero h1 { color: #fff; }
html.light .hero .lede { color: #f4ecdd; }
.hero-scroll { color: rgba(244,236,224,.55); }

/* ---- The living background (injected once by main.js) ------------------- */
.bg-fx {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: var(--bg);
}
.bg-glow {
  position: absolute; border-radius: 50%; filter: blur(60px);
  /* Promote to its own compositor layer so the drift animation below is a pure
     compositor transform (no repaint of the blurred surface each frame). */
  will-change: transform; transform: translateZ(0);
}
.bg-glow-1 {
  width: 62vw; height: 62vw; top: -22vw; right: -12vw; opacity: .55;
  background: radial-gradient(circle, rgba(240,113,44,.30), transparent 60%);
  animation: drift1 26s ease-in-out infinite;
}
.bg-glow-2 {
  width: 52vw; height: 52vw; bottom: -22vw; left: -16vw; opacity: .5;
  background: radial-gradient(circle, rgba(31,166,160,.18), transparent 60%);
  animation: drift2 32s ease-in-out infinite;
}
.bg-glow-3 {
  width: 40vw; height: 40vw; top: 35%; left: 45%; opacity: .35;
  background: radial-gradient(circle, rgba(200,50,75,.14), transparent 62%);
  animation: drift1 38s ease-in-out infinite reverse;
}
/* Translate only — never scale a blurred layer (scaling re-rasterizes the
   whole blur surface each frame; translating a promoted layer is composited). */
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-4vw,3vw); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(4vw,-3vw); } }

.bg-grid {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 72%);
}
html.light .bg-grid { background-image: radial-gradient(rgba(34,36,63,.06) 1px, transparent 1px); }

.bg-embers { position: absolute; inset: 0; }
.bg-embers span {
  position: absolute; bottom: -12px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #ffcf9a, #f0712c 70%);
  box-shadow: 0 0 7px rgba(240,113,44,.85);
  opacity: 0; animation-name: rise; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes rise {
  0%   { transform: translate(0, 0) scale(.7); opacity: 0; }
  12%  { opacity: .8; }
  85%  { opacity: .45; }
  100% { transform: translate(22px, -100vh) scale(1); opacity: 0; }
}
html.light .bg-embers { opacity: .55; }

.bg-noise {
  /* No `mix-blend-mode` — overlay forces the GPU to read back and re-blend the
     entire viewport behind this fixed layer on every frame (constant jank over
     the animated glows/embers). A plain low-opacity overlay reads almost
     identically without the per-frame recomposite. */
  position: absolute; inset: 0; opacity: .035;
  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");
}
html.light .bg-noise { opacity: .02; }

.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 38%, transparent 52%, var(--bg) 116%);
}

/* ---- Low-power path: keep phones / mid devices buttery -------------------
   On narrow viewports the GPU budget is tighter, so shed the most expensive
   bits: the full-screen noise overlay, the heavy nav backdrop blur (swap for
   an opaque bar), and dial the glow blur down. JS already drops the ember
   count below 640px. The look is preserved; the per-frame cost is not. */
@media (max-width: 768px) {
  .bg-noise { display: none; }
  .bg-glow { filter: blur(44px); }
  .nav.scrolled { backdrop-filter: none; background: rgba(10,12,19,.94); }
  html.light .nav.scrolled { background: rgba(247,241,232,.96); }
}

/* ---- Lite mode: set by main.js on weak hardware (few CPU cores / low RAM)
   or when a runtime FPS check sees sustained jank. This is viewport-agnostic,
   so a low-end *desktop/laptop* (wide screen, weak GPU) also gets the calm
   path — not just phones. Static gradient glows stay; the per-frame work goes. */
html.lite .bg-embers,
html.lite .bg-noise { display: none; }
html.lite .bg-glow { animation: none; }
html.lite .hero-scroll { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .bg-glow { animation: none !important; }
  .bg-embers { display: none; }
}