/* ========================================================================
   Mastum landing page — recreated from the Claude Design handoff prototype.
   Theme variables, atmosphere knobs (cuneiform intensity, spotlight radius)
   and accent are baked from the prototype's default props:
     defaultMode: dark · accentColor #3a52e8 · cuneiformIntensity 25% · spotlightRadius 170px
   ===================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: #0a0b12;
  color: #f5f6fb;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: rgba(92,112,242,0.35); }

/* keep the page gutter/overscroll in sync with the active theme */
:root[data-theme="light"] body { background: #f4f4f1; }

/* ---- theme tokens (dark = default) ---------------------------------- */
.app {
  --bg:#0a0b12; --bg-2:#0f111b; --card:#12141f; --card-2:#171a27;
  --fg:#f5f6fb; --muted:#9ea3b6; --faint:#6b7186;
  --line:rgba(255,255,255,0.09); --line-2:rgba(255,255,255,0.06);
  --accent:#3a52e8; --accent-2:#5c70f2; --glow:rgba(58,82,232,0.42);
  --gold:#c6a45a; --panel:#070810; --panel-fg:#f5f6fb;
  --logo-white-op:1; --logo-dark-op:0;
  --cun:0.25; --torch:170px;

  position: relative;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  transition: background .55s ease, color .55s ease;
  /* clip, not hidden: hidden makes .app a scroll container, which silently
     breaks the sticky nav (it would stick to .app instead of the viewport) */
  overflow-x: clip;
}

/* light theme — mirrors themeVars('light'); --glow & --accent stay the
   accent-derived values because the prototype's applyTheme overrides them.
   The :root[data-theme] variant lets the inline head script theme the page
   before the bottom-of-body script sets #app, preventing a flash of dark. */
.app[data-theme="light"],
:root[data-theme="light"] .app {
  --bg:#f4f4f1; --bg-2:#ffffff; --card:#ffffff; --card-2:#f7f7f4;
  --fg:#0d0f17; --muted:#565b6e; --faint:#8a8f9f;
  --line:rgba(13,15,23,0.10); --line-2:rgba(13,15,23,0.05);
  --accent-2:#3a52e8;
  --gold:#9a7a32; --panel:#0c0e16; --panel-fg:#f5f6fb;
  --logo-white-op:0; --logo-dark-op:1;
}

/* logo cross-fade layers */
.logo-white { opacity: var(--logo-white-op); }
.logo-dark  { opacity: var(--logo-dark-op); }

/* shared cuneiform decorative glyph */
.cun-glyph {
  position: absolute;
  font-family: 'Noto Sans Cuneiform', serif;
  line-height: 1;
  color: var(--gold);
  pointer-events: none;
}

/* ---- keyframes ------------------------------------------------------ */
@keyframes mastFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes mastRise  { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mastRing  { 0% { transform: scale(0.85); opacity: 0.5; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes mastCaret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }

.rise   { animation: mastRise .7s ease both; }
.rise-1 { animation-delay: .06s; }
.rise-2 { animation-delay: .14s; }
.rise-3 { animation-delay: .22s; }

.strong { color: var(--fg); font-weight: 600; }

/* ===================================================================== */
/* NAV                                                                   */
/* ===================================================================== */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 18px 40px;
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--line-2);
}
.brand { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; color: var(--fg); text-decoration: none; }
.brand-mark { position: relative; width: 34px; height: 34px; display: inline-flex; }
.brand-mark.sm { width: 30px; height: 30px; }
.brand-mark img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; transition: opacity .5s ease;
}
.brand-name { font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }
.brand-name.sm { font-size: 19px; }

.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-link {
  position: relative; padding: 9px 16px; font-size: 15px; font-weight: 500;
  color: var(--muted); text-decoration: none; border-radius: 10px; cursor: pointer;
  transition: color .25s ease, background .25s ease;
}
.nav-link:hover { color: var(--fg); background: var(--card); }
.nav-cun { top: 3px; left: 6px; font-size: 11px; opacity: calc(var(--cun) * 0.7); }

.nav-actions { display: flex; align-items: center; gap: 12px; }
.icon-btn {
  position: relative; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); background: var(--card); color: var(--fg);
  border-radius: 11px; cursor: pointer; font-size: 17px;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.icon-btn:hover { background: var(--card-2); border-color: var(--accent); transform: translateY(-1px); }
.ico-moon { opacity: var(--logo-white-op); }
.ico-sun  { position: absolute; opacity: var(--logo-dark-op); }

.btn {
  position: relative; overflow: hidden;
  font-family: 'Space Grotesk', sans-serif; cursor: pointer;
  text-decoration: none; text-align: center;
}
.login-btn {
  padding: 10px 22px; font-size: 15px; font-weight: 600; color: var(--fg);
  background: transparent; border: 1px solid var(--line); border-radius: 11px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.login-btn:hover { border-color: var(--accent); background: var(--card); transform: translateY(-1px); }
.login-cun { top: 3px; right: 7px; left: auto; font-size: 12px; opacity: calc(var(--cun) * 0.8); }

/* ===================================================================== */
/* HERO                                                                  */
/* ===================================================================== */
.hero {
  position: relative; max-width: 1280px; margin: 0 auto;
  padding: 70px 40px 90px;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 40px;
  align-items: center; min-height: 78vh;
}
/* interactive cuneiform field — canvas particle system (ported from TamkarWeb) */
.cuneiform-canvas {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;       /* the field listens on window; let UI stay clickable */
  opacity: 0;
  transition: opacity 1.6s ease .2s;
}
.cuneiform-canvas.is-ready { opacity: 1; }

.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border: 1px solid var(--line); border-radius: 100px;
  background: color-mix(in srgb, var(--card) 60%, transparent);
  font-size: 13px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--muted); text-transform: uppercase;
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.hero-title {
  margin: 24px 0 0; font-weight: 700;
  font-size: clamp(40px, 5.4vw, 76px); line-height: 0.98; letter-spacing: -0.035em;
}
.hero-accent { color: var(--accent); position: relative; }

.hero-lede {
  margin: 26px 0 0; max-width: 30em;
  font-size: 19px; line-height: 1.6; color: var(--muted);
}
.hero-cta { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

.btn-primary {
  padding: 15px 30px; font-size: 16px; font-weight: 600; color: #fff;
  background: var(--accent); border: none; border-radius: 13px;
  box-shadow: 0 16px 40px -16px var(--glow);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -18px var(--glow); background: var(--accent-2); }
.cta-cun-light { top: 6px; right: 9px; left: auto; font-size: 14px; color: #fff; opacity: calc(var(--cun) * 0.85); }

.btn-ghost {
  padding: 15px 30px; font-size: 16px; font-weight: 600; color: var(--fg);
  background: transparent; border: 1px solid var(--line); border-radius: 13px;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.btn-ghost:hover { border-color: var(--accent); background: var(--card); transform: translateY(-2px); }
.cta-cun { top: 6px; right: 9px; left: auto; font-size: 13px; opacity: calc(var(--cun) * 0.85); }

.hero-stage {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  min-height: 380px; perspective: 1100px;
}
.stage-glow {
  position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 68%); filter: blur(8px);
}
.stage-ring {
  position: absolute; width: 300px; height: 300px;
  border: 1px solid var(--line); border-radius: 50%;
  animation: mastRing 3.4s ease-out infinite;
}
.mark-tilt {
  position: relative; transform-style: preserve-3d;
  transition: transform .18s ease-out; will-change: transform;
}
.mark-float { animation: mastFloat 6s ease-in-out infinite; }
.mark-img { position: relative; display: block; width: 210px; height: 200px; }
.mark-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: opacity .5s ease; filter: drop-shadow(0 24px 50px var(--glow));
}

/* ===================================================================== */
/* SECTIONS (shared)                                                     */
/* ===================================================================== */
.section { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 40px 40px 90px; scroll-margin-top: 74px; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; flex-wrap: wrap; margin-bottom: 46px;
}
.section-title {
  margin: 0; font-weight: 700; font-size: clamp(30px, 3.6vw, 46px);
  letter-spacing: -0.03em; max-width: 16em;
}
.section-cun {
  font-family: 'Noto Sans Cuneiform', serif; font-size: 13px; letter-spacing: 0.2em;
  color: var(--muted); opacity: calc(0.4 + var(--cun) * 0.6);
}

/* pillars */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar {
  position: relative; overflow: hidden; padding: 30px 28px 34px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 18px;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.pillar:hover { transform: translateY(-6px); border-color: var(--accent); background: var(--card-2); }
.pillar-glyph {
  position: absolute; top: 14px; right: 16px;
  font-family: 'Noto Sans Cuneiform', serif; font-size: 30px; line-height: 1;
  color: var(--gold); opacity: calc(var(--cun) * 0.5); pointer-events: none;
}
.pillar-tag { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; }
.pillar-title { margin: 14px 0 10px; font-weight: 700; font-size: 23px; letter-spacing: -0.02em; }
.pillar-body { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

/* ===================================================================== */
/* OUR STORY  (the loom / Mašṭûm narrative)                              */
/* ===================================================================== */
.story-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 52px; align-items: center; }
.story-copy { position: relative; z-index: 2; }

.story-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.story-kicker-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.story-kicker-cun { font-family: 'Noto Sans Cuneiform', serif; font-size: 15px; color: var(--gold); opacity: calc(0.5 + var(--cun) * 0.5); }

.story-title { margin: 0; font-weight: 700; font-size: clamp(30px, 3.8vw, 50px); letter-spacing: -0.03em; line-height: 1.04; }
.story-title-em { color: var(--gold); }

.story-etym {
  display: inline-flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin: 22px 0 0; padding: 9px 16px;
  border: 1px solid var(--line); border-radius: 100px;
  background: color-mix(in srgb, var(--card) 60%, transparent);
}
.story-etym-cun { font-family: 'Noto Sans Cuneiform', serif; font-size: 17px; color: var(--gold); }
.story-etym-translit { font-weight: 600; font-style: italic; color: var(--fg); letter-spacing: 0.01em; }
.story-etym-gloss { font-size: 13.5px; color: var(--muted); }
.story-etym-sep { color: var(--faint); }

.story-body { margin: 22px 0 0; font-size: 17px; line-height: 1.7; color: var(--muted); max-width: 34em; }
.story-body + .story-body { margin-top: 15px; }

.story-close {
  margin: 28px 0 0; max-width: 30em;
  font-size: clamp(18px, 1.9vw, 22px); line-height: 1.5; font-weight: 600; color: var(--fg);
  padding-left: 18px; border-left: 2px solid var(--accent);
}
.story-close .em { color: var(--accent); }

/* the woven visual */
.story-weave {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(160deg, var(--card), var(--bg-2));
  aspect-ratio: 11 / 10; min-height: 320px;
}
.story-weave svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.weave-cap {
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; fill: var(--faint);
}
/* the shuttle sweeping across the warp */
.weave-shuttle-bar {
  position: absolute; top: 9%; height: 78%; width: 2px;
  background: var(--accent); box-shadow: 0 0 16px 2px var(--glow);
  border-radius: 2px; opacity: 0.35; pointer-events: none;
  animation: weaveShuttle 5.5s ease-in-out infinite;
}
@keyframes weaveShuttle {
  0%, 100% { left: 12%; opacity: 0.12; }
  50%      { left: 86%; opacity: 0.5; }
}
.story-weave-cun {
  position: absolute; bottom: 12px; right: 16px;
  font-family: 'Noto Sans Cuneiform', serif; font-size: 40px; line-height: 1;
  color: var(--gold); opacity: calc(var(--cun) * 0.3); pointer-events: none;
}

/* ===================================================================== */
/* EDUBBLY SHOWCASE                                                      */
/* ===================================================================== */
.edubbly-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 13px; border: 1px solid var(--line); border-radius: 100px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em;
  color: var(--accent); text-transform: uppercase;
}
.edubbly-title { margin: 18px 0 0; font-weight: 700; font-size: clamp(32px, 4vw, 54px); letter-spacing: -0.03em; line-height: 1.02; }
.edubbly-lede { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 30em; }

.edu-links { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.edu-link {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; background: var(--card); border: 1px solid var(--line-2);
  border-radius: 14px; text-decoration: none; color: var(--fg);
  transition: transform .25s ease, border-color .25s ease;
}
.edu-link:hover { transform: translateX(4px); border-color: var(--accent); }
.edu-link-text { display: flex; flex-direction: column; gap: 3px; }
.edu-link-title { font-weight: 600; font-size: 16px; }
.edu-link-sub { font-size: 13.5px; color: var(--muted); }
.edu-link-arrow { font-size: 18px; color: var(--accent); }

/* live correction card */
.live-wrap { position: relative; }
.live-badge {
  position: absolute; top: -13px; left: 24px; z-index: 3;
  padding: 5px 12px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; border-radius: 8px;
  box-shadow: 0 8px 24px -8px var(--glow);
}
.live-card {
  --live: 0;
  position: relative; overflow: hidden; padding: 26px 26px 28px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.live-card:hover,
.live-card:focus-within {
  --live: 1;
  transform: translateY(-6px); border-color: var(--accent);
  box-shadow: 0 36px 90px -36px var(--glow);
}
.live-watermark {
  position: absolute; bottom: 14px; right: 18px;
  font-family: 'Noto Sans Cuneiform', serif; font-size: 46px; line-height: 1;
  color: var(--gold); opacity: calc(var(--cun) * 0.32); pointer-events: none;
}
.live-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.live-caption {
  margin-bottom: 18px; font-size: 12.5px; letter-spacing: 0.01em;
  color: var(--faint);
}
.live-tab {
  padding: 7px 14px; font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px; font-weight: 600; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: all .2s ease;
}
.live-tab.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }

.live-text { font-size: 21px; line-height: 1.85; color: var(--muted); min-height: 150px; }
.live-text.ar { font-size: 24px; line-height: 2; text-align: right; }
.live-text.math { font-size: 24px; line-height: 2; font-family: 'Space Grotesk', sans-serif; }
.math-prompt { margin-bottom: 6px; }
.math-answer { display: flex; align-items: center; gap: 12px; }

.edit { position: relative; display: inline-block; }
.edit-word {
  text-decoration: underline; text-decoration-style: wavy;
  text-decoration-color: var(--accent); text-underline-offset: 5px; color: var(--fg);
}
.live-text.ar .edit-word,
.live-text.math .edit-word { text-underline-offset: 6px; }
.edit-tip {
  position: absolute; left: 50%; bottom: calc(100% + 7px);
  transform: translate(-50%, calc((1 - var(--live, 0)) * 8px));
  opacity: var(--live, 0);
  transition: opacity .4s ease var(--d, 0s), transform .4s ease var(--d, 0s);
  white-space: nowrap; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 7px; pointer-events: none;
}
.live-text.ar .edit-tip { font-size: 13px; padding: 3px 10px; }
.live-text.math .edit-tip { font-size: 14px; padding: 3px 11px; }

.live-summary {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2);
  opacity: var(--live, 0);
  transform: translateY(calc((1 - var(--live, 0)) * 6px));
  transition: opacity .4s ease var(--d, 0s), transform .4s ease var(--d, 0s);
}
.live-check {
  width: 26px; height: 26px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
}
.live-note { font-size: 14px; color: var(--muted); }

/* ===================================================================== */
/* TAMKAR SHOWCASE  (mirrors Edubbly; card left, copy right)             */
/* ===================================================================== */
.tamkar-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
/* place by column so DOM keeps copy first (heading-first on mobile) while
   desktop shows card-left / copy-right — the reverse of the Edubbly grid */
.tamkar-grid .tamkar-live { grid-column: 1; grid-row: 1; }
.tamkar-grid .tamkar-copy { grid-column: 2; grid-row: 1; }

/* status row (Instagram bot pending Meta approval) — looks like an edu-link
   but isn't a link, so no hover lift and a muted "Soon" chip instead of an arrow */
.tk-status { cursor: default; }
.tk-status:hover { transform: none; border-color: var(--line-2); }
.tk-soon {
  flex: none; padding: 4px 11px; border-radius: 100px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  background: color-mix(in srgb, var(--gold) 13%, transparent);
}

/* chat panel — customer bubbles always shown; bot replies fade in on hover
   (reuses the .live-card --live var, exactly like Edubbly's tips) */
.tk-panel { /* parity with .live-panel height so tabs don't jump */ }
.chat { display: flex; flex-direction: column; gap: 10px; min-height: 150px; }
.msg {
  max-width: 82%; padding: 10px 14px; font-size: 15.5px; line-height: 1.5;
  border-radius: 16px;
}
.msg.in { align-self: flex-start; background: var(--card-2); color: var(--fg); border: 1px solid var(--line-2); }
/* bot bubble: always present (so the thread looks two-sided at rest), with a
   typing indicator that gives way to the Iraqi-dialect reply on hover. The two
   children share one grid cell so the bubble stays sized to the reply — no jump. */
.msg.out { align-self: flex-end; background: var(--accent); color: #fff; display: grid; }
.msg.out > .reply, .msg.out > .dots { grid-area: 1 / 1; }
.msg.out > .reply {
  opacity: var(--live, 0);
  transition: opacity .4s ease var(--d, 0s);
}
.msg.out > .dots {
  justify-self: start; align-self: center; display: inline-flex; gap: 5px;
  opacity: calc(1 - var(--live, 0)); transition: opacity .25s ease;
}
.msg.out > .dots i {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.85);
  animation: tkTyping 1.2s infinite ease-in-out;
}
.msg.out > .dots i:nth-child(2) { animation-delay: .15s; }
.msg.out > .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tkTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* catalog panel — a product photo read into structured fields on hover */
.tk-catalog { display: flex; gap: 16px; align-items: stretch; min-height: 150px; }
.tk-photo {
  position: relative; flex: 0 0 118px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(150deg, var(--card-2), var(--card));
  border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
}
.tk-photo-cun { font-family: 'Noto Sans Cuneiform', serif; font-size: 52px; line-height: 1; color: var(--gold); opacity: 0.42; }
.tk-photo-tag {
  position: absolute; bottom: 9px; left: 0; right: 0; text-align: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint);
}
.tk-fields { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.tk-field {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 13px; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 11px;
  opacity: var(--live, 0);
  transform: translateX(calc((1 - var(--live, 0)) * 10px));
  transition: opacity .45s ease var(--d, 0s), transform .45s ease var(--d, 0s);
}
.tk-k { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.tk-v { font-size: 15.5px; font-weight: 600; color: var(--fg); }

/* ===================================================================== */
/* SPOTLIGHT                                                             */
/* ===================================================================== */
.spotlight-section { margin: 0 auto 90px; padding: 0 40px; }
.spotlight {
  --mx: 50%; --my: 50%; --rx: 50%; --ry: 50%; --on: 0;
  position: relative; overflow: hidden; border-radius: 24px;
  background: var(--panel); color: var(--panel-fg);
  padding: 56px clamp(28px, 5vw, 72px) 64px; cursor: crosshair; border: 1px solid var(--line);
}
.torch-glow {
  position: absolute; left: var(--mx); top: var(--my);
  width: calc(var(--torch) * 2.4); height: calc(var(--torch) * 2.4);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--glow) 0%, transparent 60%);
  opacity: var(--on); transition: opacity .3s ease; pointer-events: none;
}
.spotlight-kicker { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.spotlight-kicker-label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); }
.spotlight-kicker-cun { font-family: 'Noto Sans Cuneiform', serif; font-size: 15px; color: var(--gold); opacity: calc(0.5 + var(--cun) * 0.5); }
.spotlight-title { position: relative; z-index: 2; margin: 0 0 6px; font-weight: 700; font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; max-width: 18em; }
.spotlight-lede { position: relative; z-index: 2; margin: 0 0 30px; font-size: 16px; color: rgba(245,246,251,0.6); max-width: 34em; }

.spotlight-text { position: relative; z-index: 2; max-width: 780px; }
.spot-base { margin: 0; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.9; color: rgba(245,246,251,0.16); }
.spot-reveal {
  position: absolute; inset: 0; margin: 0;
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.9; color: rgba(245,246,251,0.92);
  -webkit-mask-image: radial-gradient(circle var(--torch) at var(--rx) var(--ry), #000 0%, #000 42%, transparent 78%);
          mask-image: radial-gradient(circle var(--torch) at var(--rx) var(--ry), #000 0%, #000 42%, transparent 78%);
  /* Corrections stay dark until the cursor "torch" is on — matches the
     section copy ("in the dark, an essay looks fine"). The prototype gated
     only the glow on --on and left this layer revealing a blob at center. */
  opacity: var(--on);
  transition: opacity .3s ease;
  pointer-events: none;
}
.spot-fix { color: #fff; border-bottom: 2px solid var(--accent-2); padding-bottom: 1px; }

/* ===================================================================== */
/* BLOG / JOURNAL                                                        */
/* ===================================================================== */
.nav-link.is-current { color: var(--fg); background: var(--card); }

.blog-head {
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line-2);
  padding: 66px 40px 58px;
}
.blog-head-inner { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; }
.blog-h1 { margin: 18px 0 0; font-weight: 700; font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.035em; line-height: 1.0; }
.blog-lede { margin: 20px 0 0; max-width: 40em; font-size: 18px; line-height: 1.6; color: var(--muted); }

.blog-main { padding-top: 40px; }
.blog-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 34px; }
.blog-chip {
  padding: 8px 16px; font-family: 'Space Grotesk', sans-serif;
  font-size: 13.5px; font-weight: 600; border-radius: 100px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.blog-chip:hover { border-color: var(--accent); color: var(--fg); }
.blog-chip.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }

/* card-wrapping link: keeps title/body text on the theme's fg color instead
   of the browser's default link-blue (display:contents means the anchor is
   unboxed, but color/text-decoration still inherit into its children) */
.card-link { display: contents; color: inherit; text-decoration: none; }

/* featured post */
.blog-featured {
  display: grid; grid-template-columns: 1.25fr 0.75fr;
  overflow: hidden; margin-bottom: 34px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--card);
  cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.blog-featured:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 36px 90px -42px var(--glow); }
.blog-featured-body { padding: 40px clamp(28px, 3vw, 44px); }
.blog-tagrow { display: flex; align-items: center; gap: 10px; }
.blog-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.blog-featured-flag { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.blog-dot { color: var(--faint); }
.blog-featured-title { margin: 14px 0 0; font-weight: 700; font-size: clamp(26px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1.08; }
.blog-featured-excerpt { margin: 16px 0 0; font-size: 16.5px; line-height: 1.65; color: var(--muted); max-width: 36em; }
.blog-meta { display: flex; align-items: center; gap: 10px; margin-top: 24px; font-size: 13.5px; color: var(--faint); }
.blog-featured-art {
  position: relative; min-height: 220px;
  background: linear-gradient(150deg, var(--card-2), var(--panel));
  border-left: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
}
.blog-art-glyph {
  font-family: 'Noto Sans Cuneiform', serif; font-size: clamp(80px, 12vw, 150px);
  line-height: 1; color: var(--gold); opacity: calc(0.22 + var(--cun) * 0.4);
}

/* post grid */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.blog-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  padding: 26px 26px 24px; background: var(--card);
  border: 1px solid var(--line-2); border-radius: 18px; cursor: pointer;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.blog-card:hover { transform: translateY(-6px); border-color: var(--accent); background: var(--card-2); }
.blog-card.is-hidden { display: none; }
.blog-card-glyph {
  position: absolute; top: 16px; right: 18px;
  font-family: 'Noto Sans Cuneiform', serif; font-size: 30px; line-height: 1;
  color: var(--gold); opacity: calc(var(--cun) * 0.5); pointer-events: none;
}
.blog-card-tag { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.blog-card-title { margin: 14px 0 0; padding-right: 30px; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.blog-card-excerpt { margin: 11px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); flex: 1; }
.blog-card-meta { display: flex; align-items: center; gap: 9px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--faint); }

/* newsletter band (always on the dark panel, like the spotlight) */
.blog-news-wrap { padding-top: 16px; }
.blog-news {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 34px clamp(28px, 4vw, 48px); border-radius: 22px;
  background: var(--panel); color: var(--panel-fg); border: 1px solid var(--line);
}
.blog-news-cun {
  position: absolute; right: 26px; bottom: -14px;
  font-family: 'Noto Sans Cuneiform', serif; font-size: 116px; line-height: 1;
  color: var(--gold); opacity: 0.1; pointer-events: none;
}
.blog-news-copy { position: relative; z-index: 2; flex: 1 1 280px; }
.blog-news-copy h3 { margin: 0; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }
.blog-news-copy p { margin: 8px 0 0; font-size: 15px; color: rgba(245, 246, 251, 0.6); }
.blog-news-form { position: relative; z-index: 2; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.blog-news-input {
  padding: 13px 18px; min-width: 240px;
  font-family: 'Space Grotesk', sans-serif; font-size: 15px; color: var(--panel-fg);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px; outline: none; transition: border-color .2s ease;
}
.blog-news-input::placeholder { color: rgba(245, 246, 251, 0.4); }
.blog-news-input:focus { border-color: var(--accent-2); }
.blog-news-done { display: none; font-size: 14.5px; font-weight: 600; color: var(--accent-2); }
.blog-news-form.is-done .blog-news-input,
.blog-news-form.is-done .btn-primary { display: none; }
.blog-news-form.is-done .blog-news-done { display: inline; }

/* ===================================================================== */
/* FOOTER                                                                */
/* ===================================================================== */
.footer { position: relative; z-index: 2; overflow: hidden; border-top: 1px solid var(--line-2); background: var(--bg-2); }
.footer-watermark {
  position: absolute; right: 30px; bottom: -6px;
  font-family: 'Noto Sans Cuneiform', serif; font-size: 120px; line-height: 1;
  color: var(--faint); opacity: calc(var(--cun) * 0.22); pointer-events: none; white-space: nowrap;
}
.footer-grid {
  position: relative; max-width: 1280px; margin: 0 auto;
  padding: 56px 40px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px;
}
.footer-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.footer-blurb { margin: 0; max-width: 24em; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.footer-col-head { font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.footer-col-links { display: flex; flex-direction: column; gap: 10px; }
.foot-link { font-size: 14.5px; color: var(--muted); text-decoration: none; cursor: pointer; transition: color .2s ease; }
.foot-link:hover { color: var(--fg); }
.footer-bar {
  position: relative; max-width: 1280px; margin: 0 auto;
  padding: 18px 40px 40px; border-top: 1px solid var(--line-2);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 13px; color: var(--faint);
}

/* ===================================================================== */
/* RESPONSIVE — conservative collapse of the desktop grids               */
/* ===================================================================== */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding: 48px 24px 64px; min-height: auto; }
  .hero-stage { order: -1; min-height: 300px; }
  .pillars { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; gap: 32px; }
  .edubbly-grid { grid-template-columns: 1fr; gap: 32px; }
  .tamkar-grid { grid-template-columns: 1fr; gap: 32px; }
  /* collapse the explicit placement so DOM order (copy → card) flows naturally */
  .tamkar-grid .tamkar-live,
  .tamkar-grid .tamkar-copy { grid-column: auto; grid-row: auto; }
  .nav { padding: 14px 20px; flex-wrap: wrap; }
  .section { padding: 32px 24px 64px; }
  .spotlight-section { padding: 0 24px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* blog */
  .blog-head { padding: 48px 24px 44px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-art { min-height: 150px; }
}
@media (max-width: 560px) {
  /* keep the nav links: wrap them onto a full-width second row */
  .nav-links { order: 3; flex-basis: 100%; justify-content: center; gap: 2px; }
  .nav-link { padding: 7px 12px; font-size: 14px; }
  .nav { padding-bottom: 10px; row-gap: 4px; }
  .footer-grid { grid-template-columns: 1fr; }
}

/* touch screens have no hover: show the interactive states outright */
.touch-only { display: none; }
@media (hover: none) {
  .live-card { --live: 1; }
  .live-badge { display: none; }
  .spotlight { --on: 1; cursor: default; }
  .torch-glow { display: none; }
  .spot-reveal { -webkit-mask-image: none; mask-image: none; }
  .spot-base { visibility: hidden; } /* keeps layout; the corrected layer replaces it */
  .hover-only { display: none; }
  .touch-only { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ===================================================================== */
/* SERVICES PAGE                                                         */
/* Digital-transformation marketing page. Reuses the shared tokens,      */
/* .section / .pillars / .btn primitives; adds a numbered "how we weave" */
/* process grid and a final Telegram call-to-action panel.              */
/* ===================================================================== */
.svc-lede { margin: 0 0 40px; max-width: 44em; font-size: 17px; line-height: 1.7; color: var(--muted); }

/* how the loom works — numbered process cards */
.svc-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-step {
  position: relative; overflow: hidden; padding: 30px 26px 32px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 18px;
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.svc-step:hover { transform: translateY(-6px); border-color: var(--accent); background: var(--card-2); }
.svc-step-glyph {
  position: absolute; top: 14px; right: 16px;
  font-family: 'Noto Sans Cuneiform', serif; font-size: 28px; line-height: 1;
  color: var(--gold); opacity: calc(var(--cun) * 0.5); pointer-events: none;
}
.svc-step-num { display: inline-block; font-weight: 700; font-size: 13px; letter-spacing: 0.16em; color: var(--accent); text-transform: uppercase; }
.svc-step-title { margin: 12px 0 9px; font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }
.svc-step-body { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

/* final call-to-action panel — always the dark panel (like .spotlight) */
.svc-cta-section { position: relative; z-index: 2; max-width: 1280px; margin: 0 auto; padding: 20px 40px 100px; }
.svc-cta {
  position: relative; overflow: hidden; border-radius: 24px;
  background: var(--panel); color: var(--panel-fg); border: 1px solid var(--line);
  padding: 66px clamp(28px, 6vw, 84px) 70px; text-align: center;
}
.svc-cta-glow {
  position: absolute; top: -30%; left: 50%; transform: translateX(-50%);
  width: 620px; height: 420px; max-width: 120%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 66%); pointer-events: none;
}
.svc-cta-watermark {
  position: absolute; right: 22px; bottom: 6px;
  font-family: 'Noto Sans Cuneiform', serif; font-size: 72px; line-height: 1;
  color: var(--gold); opacity: calc(var(--cun) * 0.22); pointer-events: none;
}
.svc-cta-kicker {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 12px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2);
}
.svc-cta-kicker-cun { font-family: 'Noto Sans Cuneiform', serif; font-size: 15px; color: var(--gold); opacity: calc(0.5 + var(--cun) * 0.5); letter-spacing: 0; }
.svc-cta-title { position: relative; z-index: 2; margin: 16px auto 0; max-width: 16em; font-weight: 700; font-size: clamp(28px, 3.6vw, 46px); letter-spacing: -0.03em; line-height: 1.05; }
.svc-cta-lede { position: relative; z-index: 2; margin: 16px auto 0; max-width: 40em; font-size: 17px; line-height: 1.6; color: rgba(245,246,251,0.62); }
.svc-cta-actions { position: relative; z-index: 2; display: inline-flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; justify-content: center; align-items: center; }
.svc-cta-note { position: relative; z-index: 2; margin: 20px 0 0; font-size: 13.5px; color: rgba(245,246,251,0.45); }
.svc-cta-note a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s ease; }
.svc-cta-note a:hover { border-bottom-color: currentColor; }

/* Telegram "Contact Us" button — a slightly larger primary with a mark */
.btn-tg { display: inline-flex; align-items: center; gap: 10px; padding: 16px 32px; font-size: 17px; }
.btn-tg .tg-ico { width: 20px; height: 20px; }
.btn-tg .tg-ico svg { width: 100%; height: 100%; display: block; fill: currentColor; }

@media (max-width: 900px) {
  .svc-steps { grid-template-columns: 1fr; }
  .svc-cta-section { padding: 12px 24px 72px; }
  .svc-cta { padding: 52px 24px 56px; }
}

/* ===================================================================== */
/* SERVICES — PRICING                                                    */
/* Tabbed packages with an installment toggle, count-up prices, a quote  */
/* estimator and a floating Telegram contact. All content lives in the   */
/* static markup; pricing.js enhances it and gates JS-only styles via    */
/* the .price-js class it adds to #app at boot.                          */
/* ===================================================================== */

/* four-pillar variant of the shared .pillars grid */
.pillars.pillars-4 { grid-template-columns: repeat(4, 1fr); }

/* category tabs */
.price-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.price-tab {
  padding: 9px 18px; font-family: 'Space Grotesk', sans-serif;
  font-size: 14px; font-weight: 600; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.price-tab:hover { border-color: var(--accent); color: var(--fg); }
.price-tab.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }

/* payment-plan toggle */
.price-terms-row { display: flex; margin: 0 0 30px; }
.price-terms-row[hidden], .price-fab[hidden] { display: none; } /* class display beats the UA [hidden] rule */
.price-terms {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: 100px;
  background: color-mix(in srgb, var(--card) 60%, transparent);
}
.price-term {
  padding: 7px 14px; font-family: 'Space Grotesk', sans-serif;
  font-size: 13px; font-weight: 600; border-radius: 100px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  transition: color .2s ease, background .2s ease;
}
.price-term:hover { color: var(--fg); }
.price-term.is-active { background: var(--accent); color: #fff; }
.price-term[disabled] { opacity: .4; cursor: default; pointer-events: none; }
.price-term-note { margin-left: 2px; font-size: 11px; font-weight: 700; color: var(--faint); }
.price-term.is-active .price-term-note { color: rgba(255,255,255,0.75); }

/* panels — fallback headings show only without JS; fade on tab switch */
.price-panel-title { margin: 26px 0 14px; font-weight: 700; font-size: 21px; letter-spacing: -0.02em; }
.price-js .price-panel-title { display: none; }
@keyframes priceIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.price-panel.is-entering { animation: priceIn .28s ease both; }
.price-panel { margin-bottom: 8px; }

.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.price-grid.cols-3 { grid-template-columns: repeat(3, 1fr); max-width: 1020px; }

/* package cards — same recipe as .pillar / .svc-step */
.price-card {
  position: relative; display: flex; flex-direction: column; padding: 28px 24px 26px;
  background: var(--card); border: 1px solid var(--line-2); border-radius: 18px;
  transition: transform .3s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.price-card:hover { transform: translateY(-6px); border-color: var(--accent); background: var(--card-2); }
.price-card.is-featured { border-color: var(--accent); box-shadow: 0 24px 70px -30px var(--glow); }
.price-card.is-featured:hover { box-shadow: 0 36px 90px -36px var(--glow); }
.price-flag {
  position: absolute; top: -13px; left: 20px; z-index: 3;
  padding: 5px 12px; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; border-radius: 8px;
  box-shadow: 0 8px 24px -8px var(--glow);
}
.price-name { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; }
.price-prefix { display: block; margin: 14px 0 -8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.price-prefix[hidden] { display: none; }
.price-amount {
  margin-top: 14px; font-weight: 700; font-size: clamp(30px, 2.6vw, 38px);
  letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.price-cur { font-size: 0.6em; font-weight: 700; color: var(--muted); margin-right: 1px; }
.price-dash { margin: 0 3px; font-size: 0.7em; font-weight: 600; color: var(--muted); }
.price-per { margin-left: 3px; font-size: 15px; font-weight: 600; color: var(--muted); }
.price-per[hidden] { display: none; }
.price-sub { margin: 10px 0 0; min-height: 40px; font-size: 13px; line-height: 1.5; color: var(--faint); }
.price-list {
  list-style: none; margin: 14px 0 22px; padding: 14px 0 0;
  border-top: 1px solid var(--line-2); display: grid; gap: 9px;
}
.price-list li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.55; color: var(--muted); }
.price-list li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.price-cta {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 18px; font-size: 15px;
}
.price-cta-arrow { display: inline-block; transition: transform .25s ease; }
.price-cta:hover .price-cta-arrow { transform: translateX(4px); }

/* live-example button (landing cards) — quiet ghost above the primary CTA */
.price-demo {
  margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 18px; font-size: 14.5px;
}
.price-demo + .price-cta { margin-top: 10px; }
.price-demo-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.price-demo-arrow { display: inline-block; font-size: 13px; color: var(--muted); transition: transform .25s ease, color .25s ease; }
.price-demo:hover .price-demo-arrow { transform: translate(2px, -2px); color: var(--accent-2); }

/* pay-as-you-go panel */
.price-payg { max-width: 720px; }
.price-rates { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.price-rate { padding: 26px 24px; background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; }
.price-rate-k { font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; }
.price-rate .price-amount { margin-top: 10px; }
.price-rate-per { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--faint); }
.price-payg-note { margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.price-payg .price-faq { margin-top: 14px; }
.price-payg .price-cta { margin-top: 20px; }

/* trust line + quiet payment-options accordion */
.price-trust { margin: 34px 0 0; font-size: 14px; color: var(--faint); }
.price-faq { max-width: 720px; margin: 14px 0 0; background: var(--card); border: 1px solid var(--line-2); border-radius: 14px; }
.price-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none;
}
.price-faq summary::-webkit-details-marker { display: none; }
.price-faq summary::after { content: "+"; font-size: 18px; font-weight: 600; color: var(--muted); transition: transform .25s ease; }
.price-faq[open] summary::after { transform: rotate(45deg); }
.price-faq-body { padding: 0 18px 16px; }
.price-faq-body p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/* price-your-project estimator */
.price-est {
  margin-top: 56px; padding: 34px clamp(22px, 3vw, 40px) 38px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
}
.price-est-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.price-est-title { margin: 0; font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -0.02em; }
.price-est-cun { font-family: 'Noto Sans Cuneiform', serif; font-size: 13px; letter-spacing: 0.2em; color: var(--muted); opacity: calc(0.4 + var(--cun) * 0.6); }
.price-est-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 36px; }
.price-est-label { display: block; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--accent); text-transform: uppercase; }
.price-est-select {
  width: 100%; padding: 12px 14px; font-family: 'Space Grotesk', sans-serif; font-size: 15px;
  color: var(--fg); background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
}
.price-est-hint { margin: 10px 0 24px; font-size: 13px; color: var(--faint); }
.price-est-hint a { color: var(--accent-2); text-decoration: none; }
.price-est-hint a:hover { text-decoration: underline; }
.price-addons { display: grid; gap: 8px; }
.price-addon {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: var(--card-2); border: 1px solid var(--line-2); border-radius: 12px;
  cursor: pointer; transition: border-color .2s ease;
}
.price-addon:hover { border-color: var(--accent); }
.price-addon.is-on { border-color: var(--accent); }
.price-addon input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.price-addon-name { flex: 1; font-size: 14.5px; font-weight: 500; }
.price-addon-amt { font-size: 13.5px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.price-addon.is-on .price-addon-amt { color: var(--accent-2); }
.price-est-summary { display: flex; flex-direction: column; border-left: 1px solid var(--line-2); padding-left: 36px; }
.price-est-sum-k { font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; color: var(--muted); text-transform: uppercase; }
.price-est-summary .price-prefix { margin: 12px 0 -10px; }
.price-est-total { margin-top: 12px; font-size: clamp(34px, 3vw, 44px); }
.price-est-plan { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.price-est-plan .price-term { padding: 6px 12px; font-size: 12.5px; border-color: var(--line); }
.price-est-plan .price-term.is-active { border-color: var(--accent); }
.price-est-monthly { margin-top: 12px; min-height: 21px; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.price-est-lines { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 7px; }
.price-est-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.price-est-cta { margin-top: 22px; justify-content: center; padding: 14px 20px; font-size: 16px; }
.price-est-note { margin: 12px 0 0; font-size: 12.5px; color: var(--faint); }

/* floating quick-contact (shown by pricing.js when #pricing enters view) */
.price-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 600;
  text-decoration: none; border-radius: 100px;
  box-shadow: 0 16px 40px -12px var(--glow);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .25s ease;
}
.price-fab:hover { background: var(--accent-2); }
.price-fab .tg-ico { width: 18px; height: 18px; }
.price-fab .tg-ico svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.price-fab.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.price-fab.is-shown.is-hushed { opacity: 0; pointer-events: none; }

/* first-view scroll reveal — hidden only when pricing.js is running; the
   script strips these classes after the transition so card hovers keep
   their own .3s timing */
.price-js .price-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease var(--rv-d, 0s), transform .6s ease var(--rv-d, 0s);
}
.price-js .price-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 1100px) {
  .pillars.pillars-4 { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid.cols-3 { grid-template-columns: repeat(2, 1fr); max-width: none; }
}
@media (max-width: 900px) {
  .price-est-grid { grid-template-columns: 1fr; gap: 28px; }
  .price-est-summary { border-left: 0; padding-left: 0; border-top: 1px solid var(--line-2); padding-top: 26px; }
}
@media (max-width: 640px) {
  .pillars.pillars-4, .price-grid, .price-grid.cols-3, .price-rates { grid-template-columns: 1fr; }
  .price-terms { border-radius: 22px; }
  .price-fab { right: 14px; bottom: 14px; width: 52px; height: 52px; padding: 0; justify-content: center; }
  .price-fab-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .price-js .price-reveal { opacity: 1; transform: none; transition: none; }
  .price-fab, .price-cta-arrow, .price-demo-arrow, .price-faq summary::after { transition: none; }
}

/* ========================================================================
   Apple-style scroll feel: content settles into place as sections cross
   into view (like apple.com product pages), plus a gentle hero parallax
   as the page scrolls past it. Gated by .js-reveal (added once script.js
   confirms IntersectionObserver support) so content is never stuck hidden
   for no-JS / older browsers.
   ===================================================================== */
.js-reveal .mast-reveal {
  opacity: 0; transform: translateY(32px);
  transition: opacity .8s cubic-bezier(.16,.8,.24,1) var(--rv-d, 0s),
              transform .8s cubic-bezier(.16,.8,.24,1) var(--rv-d, 0s);
  will-change: opacity, transform;
}
.js-reveal .mast-reveal.is-in { opacity: 1; transform: none; }

/* hero parallax: --hero-p runs 0 -> 1 as the hero scrolls out of view */
.hero-copy, .hero-stage { transition: opacity .1s linear; }
.js-parallax .hero-copy {
  transform: translateY(calc(var(--hero-p, 0) * 46px));
  opacity: calc(1 - var(--hero-p, 0) * 1.15);
}
.js-parallax .hero-stage {
  transform: translateY(calc(var(--hero-p, 0) * -28px)) scale(calc(1 - var(--hero-p, 0) * 0.06));
  opacity: calc(1 - var(--hero-p, 0) * 1.15);
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .mast-reveal { opacity: 1; transform: none; transition: none; }
  .js-parallax .hero-copy, .js-parallax .hero-stage { transform: none; opacity: 1; }
}

/* ========================================================================
   EDUBBLY JOURNEY — sticky feature panel (photo → grading → PDF).
   The device stage pins (position: sticky) while the steps scroll past;
   script.js flips .is-active on screens/steps/dots as each step crosses
   a band around the middle of the viewport. Dimming of inactive steps is
   gated by .js-journey so no-JS readers get full-opacity text and the
   first screen (active in markup) stays visible.
   ===================================================================== */
.journey { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; }

/* ---- pinned stage --------------------------------------------------- */
.journey-stage {
  position: sticky; top: 96px; align-self: start;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 8px 0;
}
.journey-device {
  width: min(290px, 76vw); aspect-ratio: 9 / 18.4;
  border-radius: 42px; border: 1px solid var(--line);
  background: var(--panel); color: var(--panel-fg);
  position: relative; overflow: hidden;
  box-shadow: 0 44px 90px -42px rgba(0, 0, 0, 0.65),
              0 0 0 6px color-mix(in srgb, var(--card) 72%, transparent);
}
.journey-notch {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 21px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.07); z-index: 3;
}
.journey-screen {
  position: absolute; inset: 0; padding: 44px 16px 18px;
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(16px) scale(0.985);
  transition: opacity .5s cubic-bezier(.16,.8,.24,1), transform .5s cubic-bezier(.16,.8,.24,1);
  pointer-events: none;
}
.journey-screen.is-active { opacity: 1; transform: none; }

.journey-dots { display: flex; gap: 9px; }
.journey-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.journey-dot.is-active { background: var(--accent); box-shadow: 0 0 10px var(--glow); transform: scale(1.25); }

/* ---- screen 1: camera over the paper -------------------------------- */
.jp-cam {
  flex: 1; position: relative; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, #12141f, #0a0b12);
  display: flex; align-items: center; justify-content: center;
}
.jp-corner { position: absolute; width: 24px; height: 24px; border: 2px solid rgba(255, 255, 255, 0.5); }
.jp-corner.tl { top: 13px; left: 13px; border-right: 0; border-bottom: 0; border-top-left-radius: 8px; }
.jp-corner.tr { top: 13px; right: 13px; border-left: 0; border-bottom: 0; border-top-right-radius: 8px; }
.jp-corner.bl { bottom: 13px; left: 13px; border-right: 0; border-top: 0; border-bottom-left-radius: 8px; }
.jp-corner.br { bottom: 13px; right: 13px; border-left: 0; border-top: 0; border-bottom-right-radius: 8px; }
.jp-hint {
  position: absolute; top: 17px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6); white-space: nowrap;
}
.jp-paper {
  width: 74%; aspect-ratio: 3 / 4; background: #f6f4ec; border-radius: 6px;
  transform: rotate(-3.5deg); padding: 18px 15px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55);
}
.jl { display: block; height: 5px; border-radius: 3px; background: #565b6e; opacity: 0.5; }
.jp-shutter {
  position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid #fff; background: rgba(255, 255, 255, 0.2);
}

/* ---- screen 2: grading pass ------------------------------------------ */
.jg-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent-2);
}
.jg-pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 10px var(--glow); animation: jgPulse 1.4s ease-in-out infinite;
}
@keyframes jgPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.jg-paper {
  flex: 1; position: relative; overflow: hidden; margin-top: 12px;
  background: #f6f4ec; border-radius: 14px; padding: 20px 16px;
  display: flex; flex-direction: column; gap: 13px;
}
.jg-beam {
  position: absolute; left: 0; right: 0; top: -22%; height: 22%;
  background: linear-gradient(180deg, transparent, var(--glow), transparent);
  animation: jgScan 2.8s ease-in-out infinite;
}
@keyframes jgScan { from { top: -22%; } to { top: 100%; } }
.jg-row { display: flex; align-items: center; gap: 9px; }
.jg-row .jl { flex: 0 1 auto; }
.jg-row .jl.bad { background: #cf5044; opacity: 0.75; }
.jg-chip {
  flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff;
}
.jg-chip.ok { background: #2e9e5b; }
.jg-chip.no { background: #cf5044; }
.jg-meta {
  margin-top: 12px; text-align: center;
  font-size: 11px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55);
}

/* ---- screen 3: the PDF report ---------------------------------------- */
.jr-report {
  flex: 1; background: #fbfaf5; color: #1a1c26; border-radius: 14px;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 13px;
}
.jr-top {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.07em; color: #565b6e;
}
.jr-badge {
  background: #cf5044; color: #fff; font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; padding: 2px 7px; border-radius: 5px;
}
.jr-score { display: flex; align-items: center; gap: 13px; padding: 2px 0 4px; }
.jr-ring {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  background: conic-gradient(var(--accent) 0 87%, #e7e5da 87% 100%);
  display: grid; place-items: center;
}
.jr-num {
  width: 44px; height: 44px; border-radius: 50%; background: #fbfaf5;
  display: grid; place-items: center; font-size: 17px; font-weight: 700; color: #1a1c26;
}
.jr-score-label { font-size: 12px; font-weight: 600; line-height: 1.35; }
.jr-score-sub { font-weight: 400; color: #8a8f9f; }
.jr-row {
  font-size: 11.5px; line-height: 1.5; border-top: 1px dashed #e2dfd2; padding-top: 10px;
}
.jr-strike { text-decoration: line-through; color: #b1493e; }
.jr-fix { font-weight: 700; color: var(--accent); }
.jr-why { display: block; font-style: italic; color: #8a8f9f; font-size: 10.5px; }
.jr-foot {
  margin-top: auto; border-top: 1px solid #e7e5da; padding-top: 10px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: #565b6e; text-align: center;
}

/* ---- scrolling steps -------------------------------------------------- */
.journey-steps { display: flex; flex-direction: column; }
.journey-step {
  min-height: 62vh; display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.journey-step:last-child { min-height: 50vh; }
.js-journey .journey-step { opacity: 0.3; transition: opacity .45s ease; }
.js-journey .journey-step.is-active { opacity: 1; }
.journey-kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--accent);
}
.journey-cun { font-family: 'Noto Sans Cuneiform', serif; font-size: 19px; line-height: 1; color: var(--gold); }
.journey-step-title { margin: 0; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.14; letter-spacing: -0.02em; }
.journey-step-body { margin: 0; max-width: 46ch; font-size: 16.5px; line-height: 1.65; color: var(--muted); }

/* ---- responsive & motion ---------------------------------------------- */
@media (max-width: 900px) {
  .journey { grid-template-columns: 1fr; gap: 0; }
  .journey-stage {
    top: 106px; z-index: 2; padding: 12px 0 24px;
    background: linear-gradient(180deg, var(--bg) 84%, transparent);
  }
  .journey-device { width: min(196px, 58vw); }
  .journey-dots { gap: 8px; }
  .journey-step { min-height: 52vh; justify-content: flex-start; padding-top: 6vh; }
  .journey-step:last-child { min-height: 40vh; }
  .journey-step-body { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .journey-screen { transition: none; transform: none; }
  .js-journey .journey-step { transition: none; }
  .jg-beam, .jg-pulse { animation: none; }
  .jg-beam { display: none; }
}

/* ========================================================================
   VIEW TRANSITIONS — progressive enhancement, two flavors:

   1) Cross-document navigation (@view-transition): moving between pages
      gets an Apple-subtle settle — old page lifts away, new page rises
      in — while the nav (view-transition-name: site-nav) is snapshotted
      separately, so the header appears to stay put across pages.

   2) Theme toggle (html.theme-vt, set by theme-fx.js for the duration of
      the transition): the default animations are silenced and the new
      theme is clip-path-swept out of the toggle button as a growing
      circle (the animation itself runs from JS via element.animate on
      ::view-transition-new(root)).

   Browsers without the API ignore all of this and swap instantly.
   ===================================================================== */
@view-transition { navigation: auto; }

@keyframes mast-page-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes mast-page-in  { from { opacity: 0; transform: translateY(14px); } }
::view-transition-old(root) { animation: mast-page-out .26s ease both; }
::view-transition-new(root) { animation: mast-page-in .42s cubic-bezier(.16,.8,.24,1) both; }
.nav { view-transition-name: site-nav; }

/* theme toggle: one full-page snapshot pair, no motion — the circle sweep
   from theme-fx.js does all the work. The nav rejoins the root snapshot
   so the sweep passes over it too. */
.theme-vt .nav { view-transition-name: none; }
.theme-vt::view-transition-old(root),
.theme-vt::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
.theme-vt::view-transition-old(root) { z-index: 1; }
.theme-vt::view-transition-new(root) { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ========================================================================
   WORD-BY-WORD HEADLINE REVEAL — .mast-words headlines are split into
   .mast-word spans by script.js (gated on .js-words, skipped for no-JS
   and reduced motion). Each word settles from blurred/offset to sharp
   with a per-word stagger (--wd) once the headline enters the viewport.
   ===================================================================== */
.js-words .mast-word {
  display: inline-block;
  opacity: 0; filter: blur(10px); transform: translateY(0.3em);
  transition: opacity .55s ease var(--wd, 0s),
              filter .55s ease var(--wd, 0s),
              transform .55s ease var(--wd, 0s);
}
.js-words .mast-words.is-in .mast-word { opacity: 1; filter: blur(0); transform: none; }

/* ========================================================================
   AUTO-PLAYING DEMOS — script.js loops the Edubbly and Tamkar cards while
   they're on screen. .is-live drives the same --live variable as hover;
   .is-typing pins it to 0 while the typewriter rewrites the answer (it
   also outranks the (hover:none) always-on rule and, being last, the
   :hover rule at equal specificity).
   ===================================================================== */
.live-card.is-live { --live: 1; }
.live-card.is-typing { --live: 0; }
.type-caret {
  display: inline-block; width: 2px; height: 1.05em; margin: 0 1px;
  vertical-align: -0.12em; background: var(--accent);
  animation: caretBlink .9s steps(1) infinite;
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* text-only price value ("On request") sized to sit among numeric prices */
.price-amount .price-txt { font-size: 0.62em; font-weight: 700; letter-spacing: -0.01em; }

/* ========================================================================
   SERVICES — PER-SERVICE SECTIONS (.svc-block)
   Each service is a standalone section: why-copy beside a CSS-drawn
   visual (.svc-duo), then a per-section payment toggle and its price
   grid. The chooser pillars up top became anchor links (.pillar-link).
   All mocks are pure CSS on the shared tokens — no image assets.
   ===================================================================== */

/* chooser pillars as links */
.pillar-link { display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; }
.pillar-go {
  margin-top: auto; padding-top: 14px;
  font-size: 13px; font-weight: 600; color: var(--accent);
}
.pillar-go i { font-style: normal; display: inline-block; transition: transform .25s ease; }
.pillar-link:hover .pillar-go i { transform: translateX(4px); }

/* why-copy + visual row */
.svc-duo { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; margin: 6px 0 34px; }
.svc-why-title { margin: 0 0 12px; font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.02em; }
.svc-why-body { margin: 0 0 16px; max-width: 52ch; font-size: 16px; line-height: 1.7; color: var(--muted); }
.svc-why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.svc-why-list li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.65; color: var(--muted); }
.svc-why-list li::before {
  content: "𒁹"; position: absolute; left: 0; top: 2px;
  font-family: 'Noto Sans Cuneiform', serif; font-size: 14px; color: var(--gold); opacity: .8;
}
.svc-visual { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* payment toggles are JS-driven; hide until pricing.js adds .price-js */
.price-terms-row { display: none; }
.price-js .price-terms-row { display: flex; }

/* ---- browser-frame mock ---------------------------------------------- */
.mock-browser {
  width: 100%; max-width: 460px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--line); background: var(--card);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.55);
}
.mock-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  background: var(--card-2); border-bottom: 1px solid var(--line-2);
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.mock-url {
  margin-left: 10px; flex: 1; padding: 3px 10px;
  font-size: 11px; color: var(--faint);
  background: var(--card); border: 1px solid var(--line-2); border-radius: 6px;
}
.mock-view { padding: 18px; min-height: 236px; }

/* mini landing page (flagship; richness switches with data-tier) */
.ml-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ml-logo { width: 54px; height: 10px; border-radius: 5px; background: var(--accent); }
.ml-links { display: flex; gap: 6px; }
.ml-links i { width: 26px; height: 7px; border-radius: 4px; background: var(--line); }
.ml-hero { display: flex; flex-direction: column; gap: 9px; margin: 8px 0 18px; }
.ml-h1 { width: 70%; height: 14px; border-radius: 7px; background: var(--fg); opacity: .85; }
.ml-h2 { width: 52%; height: 9px; border-radius: 5px; background: var(--muted); opacity: .5; }
.ml-cta { width: 92px; height: 24px; border-radius: 8px; background: var(--accent); box-shadow: 0 8px 22px -8px var(--glow); margin-top: 6px; }
.ml-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.ml-cards span { height: 52px; border-radius: 9px; background: var(--card-2); border: 1px solid var(--line-2); }
.ml-strip {
  height: 34px; border-radius: 9px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
#mock-landing[data-tier="basic"] .ml-cards,
#mock-landing[data-tier="basic"] .ml-strip { display: none; }
#mock-landing[data-tier="pro"] .ml-strip { display: none; }

.mock-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  border: 1px solid var(--line); border-radius: 100px;
  background: color-mix(in srgb, var(--card) 60%, transparent);
}
.mock-tab {
  padding: 6px 14px; font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px; font-weight: 600; border-radius: 100px; cursor: pointer;
  border: 1px solid transparent; background: transparent; color: var(--muted);
  transition: color .2s ease, background .2s ease;
}
.mock-tab:hover { color: var(--fg); }
.mock-tab.is-active { background: var(--accent); color: #fff; }
.mock-live { font-size: 13px; font-weight: 600; color: var(--accent-2); text-decoration: none; }
.mock-live:hover { text-decoration: underline; }

/* dashboard mock (web apps) */
.md-wrap { display: flex; gap: 14px; min-height: 200px; }
.md-side {
  flex: 0 0 56px; padding: 10px 8px; border-radius: 10px;
  background: var(--card-2); border: 1px solid var(--line-2);
  display: flex; flex-direction: column; gap: 9px;
}
.md-side i { height: 8px; border-radius: 4px; background: var(--line); }
.md-side i:first-child { background: var(--accent); }
.md-main { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.md-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.md-tile {
  height: 46px; border-radius: 9px; position: relative; overflow: hidden;
  background: var(--card-2); border: 1px solid var(--line-2);
}
.md-tile::after {
  content: ""; position: absolute; left: 8px; bottom: 8px;
  width: 42%; height: 6px; border-radius: 3px; background: var(--accent); opacity: .7;
}
.md-row { display: block; height: 19px; border-radius: 6px; background: var(--card-2); border: 1px solid var(--line-2); }

/* phone mock (mobile apps) */
.mock-phone {
  width: 176px; aspect-ratio: 9 / 17; border-radius: 28px; position: relative; overflow: hidden;
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.6),
              0 0 0 5px color-mix(in srgb, var(--card) 72%, transparent);
  padding: 30px 11px 14px; display: flex; flex-direction: column; gap: 9px;
}
.mock-phone::before {
  content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 56px; height: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.07);
}
.mp-toast {
  display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 10px;
  background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.14);
}
.mp-toast i { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 5px; background: var(--accent); }
.mp-toast-lines { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mp-toast-lines span { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.35); }
.mp-toast-lines .w8 { width: 85%; }
.mp-toast-lines .w5 { width: 55%; }
.mp-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mp-grid i { border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.09); }
.mp-cta { height: 26px; border-radius: 9px; background: var(--accent); box-shadow: 0 8px 22px -8px var(--glow); }

/* chat mock (ai) — reuses the Tamkar .chat/.msg recipe with replies shown */
.mock-chat {
  --live: 1;
  width: 100%; max-width: 400px; padding: 18px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.45);
}
.mock-chat .chat { min-height: 0; }

/* ---- responsive & motion ---------------------------------------------- */
@media (min-width: 901px) {
  /* alternate the visual side on desktop only */
  .svc-duo-flip .svc-why { order: 2; }
  .svc-duo-flip .svc-visual { order: 1; }
}
@media (max-width: 900px) {
  .svc-duo { grid-template-columns: 1fr; gap: 28px; margin-bottom: 28px; }
  .mock-browser { max-width: none; }
}

/* ===================================================================== */
/* i18n — Arabic typography, RTL mirroring, language-switch choreography */
/* (engine: i18n.js; strings tagged with data-i18n in the markup)        */
/* ===================================================================== */

/* boot: the head snippet adds .i18n-boot when Arabic is saved, so the
   English markup never paints before i18n.js swaps the copy in */
html.i18n-boot body { visibility: hidden; }

/* ---- Arabic typography ---------------------------------------------- */
html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea {
  font-family: 'IBM Plex Sans Arabic', 'Space Grotesk', system-ui, sans-serif;
}
/* mixed cuneiform + Arabic spans keep the glyph font first */
html[lang="ar"] .section-cun,
html[lang="ar"] .weave-cap {
  font-family: 'Noto Sans Cuneiform', 'IBM Plex Sans Arabic', serif;
}

/* tracking is a Latin habit — spacing tears Arabic letter joining apart,
   and the negative display tracking clips connected forms */
html[lang="ar"] .brand-name, html[lang="ar"] .hero-title, html[lang="ar"] .hero-lede,
html[lang="ar"] .section-title, html[lang="ar"] .story-title, html[lang="ar"] .edubbly-title,
html[lang="ar"] .pillar-title, html[lang="ar"] .spotlight-title, html[lang="ar"] .journey-step-title,
html[lang="ar"] .blog-card-title, html[lang="ar"] .svc-why-title,
html[lang="ar"] .eyebrow, html[lang="ar"] .pill, html[lang="ar"] .pillar-tag,
html[lang="ar"] .story-kicker-label, html[lang="ar"] .spotlight-kicker-label,
html[lang="ar"] .live-badge, html[lang="ar"] .live-caption, html[lang="ar"] .journey-kicker,
html[lang="ar"] .jp-hint, html[lang="ar"] .jg-head, html[lang="ar"] .jg-meta,
html[lang="ar"] .jr-score-label, html[lang="ar"] .tk-k, html[lang="ar"] .tk-photo-tag,
html[lang="ar"] .footer-col-head, html[lang="ar"] .section-cun {
  letter-spacing: 0;
}

/* Arabic ascenders/dots need more vertical room than the tight Latin display sizes */
html[lang="ar"] .hero-title { line-height: 1.2; font-size: clamp(36px, 4.8vw, 66px); }
html[lang="ar"] .story-title, html[lang="ar"] .edubbly-title { line-height: 1.28; }
html[lang="ar"] .section-title, html[lang="ar"] .spotlight-title { line-height: 1.32; }
html[lang="ar"] .journey-step-title { line-height: 1.38; }
html[lang="ar"] .story-close { line-height: 1.65; }

/* ---- RTL mirroring ---------------------------------------------------- */
/* flex/grid layouts flip on their own under dir="rtl"; these are the
   physical left/right rules that don't */
html[dir="rtl"] .story-close {
  padding-left: 0; border-left: 0;
  padding-right: 18px; border-right: 2px solid var(--accent);
}
html[dir="rtl"] .edu-link:hover { transform: translateX(-4px); }
html[dir="rtl"] .edu-link-arrow { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] .live-badge { left: auto; right: 24px; }
html[dir="rtl"] .live-watermark { right: auto; left: 18px; }
html[dir="rtl"] .nav-cun { left: auto; right: 6px; }
html[dir="rtl"] .cta-cun, html[dir="rtl"] .cta-cun-light { right: auto; left: 9px; }
html[dir="rtl"] .pillar-glyph { right: auto; left: 16px; }
html[dir="rtl"] .story-weave-cun { right: auto; left: 26px; }
html[dir="rtl"] .footer-watermark { right: auto; left: 30px; }
html[dir="rtl"] .blog-card-glyph { right: auto; left: 18px; }
html[dir="rtl"] .blog-card-title { padding-right: 0; padding-left: 30px; }
/* services / pricing */
html[dir="rtl"] .price-list li { padding-left: 0; padding-right: 18px; }
html[dir="rtl"] .price-list li::before { left: auto; right: 0; }
html[dir="rtl"] .price-cta:hover .price-cta-arrow { transform: translateX(-4px); }
html[dir="rtl"] .pillar-link:hover .pillar-go i { transform: translateX(-4px); }
html[dir="rtl"] .price-cur { margin-right: 0; margin-left: 1px; }
html[dir="rtl"] .price-per { margin-left: 0; margin-right: 3px; }
html[dir="rtl"] .price-term-note { margin-left: 0; margin-right: 2px; }
html[dir="rtl"] .price-pop { left: auto; right: 20px; }
html[dir="rtl"] .price-est-summary {
  border-left: 0; padding-left: 0;
  border-right: 1px solid var(--line-2); padding-right: 36px;
}
html[dir="rtl"] .svc-why-list li { padding-left: 0; padding-right: 26px; }
html[dir="rtl"] .svc-why-list li::before { left: auto; right: 0; }
html[dir="rtl"] .price-fab { right: auto; left: 20px; }
@media (max-width: 900px) {
  html[dir="rtl"] .price-est-summary { border-right: 0; padding-right: 0; }
}
@media (max-width: 640px) {
  html[dir="rtl"] .price-fab { right: auto; left: 14px; }
}

/* ---- language toggle button ------------------------------------------ */
.lang-btn { font-size: 13px; font-weight: 700; }
.lang-btn .lang-to-ar { font-size: 16px; line-height: 1; font-family: 'IBM Plex Sans Arabic', system-ui, sans-serif; }
.lang-btn .lang-to-en { display: none; letter-spacing: 0.04em; }
html[lang="ar"] .lang-btn .lang-to-ar { display: none; }
html[lang="ar"] .lang-btn .lang-to-en { display: inline; }

/* ---- switch choreography ---------------------------------------------- */
/* Phase 1 (.i18n-out): app children stagger out toward the exiting
   language's flow; Phase 2: i18n.js flips dir/lang + swaps strings;
   Phase 3 (.i18n-in): children re-enter from the opposite side.
   --i18n-x: 1 = switching into Arabic, -1 = back to English.
   --i18n-i: per-child stagger index, set by i18n.js at switch time. */
html.i18n-out .app > * {
  opacity: 0;
  transform: translateX(calc(var(--i18n-x, 1) * -30px));
  filter: blur(7px);
  transition:
    opacity .24s cubic-bezier(.55, 0, .8, .4),
    transform .24s cubic-bezier(.55, 0, .8, .4),
    filter .24s cubic-bezier(.55, 0, .8, .4);
  transition-delay: calc(var(--i18n-i, 0) * 22ms);
  pointer-events: none;
}
html.i18n-in .app > * {
  animation: i18nEnter .5s cubic-bezier(.16, .84, .28, 1) both;
  animation-delay: calc(var(--i18n-i, 0) * 45ms);
}
@keyframes i18nEnter {
  from { opacity: 0; transform: translateX(calc(var(--i18n-x, 1) * 34px)); filter: blur(7px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* accent sweep that wipes across the viewport mid-switch */
.i18n-sweep { position: fixed; inset: 0; z-index: 220; pointer-events: none; overflow: hidden; }
.i18n-sweep::before,
.i18n-sweep::after {
  content: ""; position: absolute; top: -10%; bottom: -10%;
}
.i18n-sweep::before {
  left: calc(50% - 30vw); width: 60vw;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(58, 82, 232, 0.14) 34%,
    rgba(58, 82, 232, 0.32) 50%,
    rgba(198, 164, 90, 0.22) 56%,
    transparent 100%);
  transform: translateX(calc(var(--i18n-x, 1) * -130vw)) skewX(-12deg);
  animation: i18nSweep .92s cubic-bezier(.66, .05, .25, 1) .06s both;
}
/* sharp leading edge, a beat behind the glow */
.i18n-sweep::after {
  left: calc(50% - 1px); width: 2px;
  background: linear-gradient(180deg, transparent, var(--accent-2, #5c70f2), transparent);
  box-shadow: 0 0 22px 2px rgba(58, 82, 232, 0.55);
  transform: translateX(calc(var(--i18n-x, 1) * -120vw)) skewX(-12deg);
  animation: i18nSweep .92s cubic-bezier(.66, .05, .25, 1) .12s both;
}
@keyframes i18nSweep {
  to { transform: translateX(calc(var(--i18n-x, 1) * 130vw)) skewX(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.i18n-out .app > *, html.i18n-in .app > * { transition: none; animation: none; opacity: 1; transform: none; filter: none; }
  .i18n-sweep { display: none; }
}