/* Toojibee marketing site — shared layout and components. Colors, spacing,
   radius and type all come from tokens.css; never hardcode values here. */

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

html { -webkit-text-size-adjust: 100%; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans-latin);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  transition: background-color var(--duration-normal) var(--ease-standard),
              color var(--duration-normal) var(--ease-standard);
  overflow-x: hidden;
}

html[lang="fa"] body { font-family: var(--font-sans-fa); }

img { max-width: 100%; display: block; }

a { color: inherit; }

/* Accessible focus ring, visible on keyboard nav, not on mouse click */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: var(--space-3);
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 100;
  transition: top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus { top: var(--space-3); }

.wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
@media (min-width: 960px) {
  .wrap { max-width: 1120px; padding: 0 var(--space-6); }
}
@media (min-width: 1280px) {
  .wrap { max-width: 1280px; padding: 0 var(--space-7); }
}

/* ===== Header ===== */
/* Floating capsule, fixed to the viewport with a gap above it rather
   than a full-width bar flush with the top — #main gets a matching
   top offset below so fixed positioning doesn't hide page content. */
.site-header {
  position: fixed; top: var(--space-4); left: var(--space-4); right: var(--space-4);
  z-index: 40;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-soft-sm);
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: var(--shadow-md); }
@media (min-width: 960px) { .site-header { max-width: 1120px; } }
@media (min-width: 1280px) { .site-header { max-width: 1280px; } }

#main { padding-top: calc(var(--space-9) + var(--space-2)); }
/* In-page links (hero "What is Toojibee?") land below the fixed header. */
#main section[id] { scroll-margin-top: calc(var(--space-9) + var(--space-2)); }

.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand-mark {
  /* Single source for the placeholder brand mark: assets/icons/logo.svg.
     Swap that one file to rebrand every page at once (per CLAUDE.md).
     42px = the shared logo.svg's old 38px circle, 10% bigger. */
  width: 42px; height: 42px; border-radius: var(--radius-md); flex: 0 0 auto; display: block;
  box-shadow: var(--shadow-soft-sm);
  transition: transform var(--duration-normal) var(--ease-spring);
}
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.05); }
/* fa/en index.html's header only: logo-header(-dark).svg, a 40%-bigger
   mark inside the same-size circle (see that file's own comment), swapped
   light/dark via [data-theme] instead of the shared logo.svg everywhere
   else staying a single static file. */
.brand-mark-dark { display: none; }
[data-theme="dark"] .brand-mark-light { display: none; }
[data-theme="dark"] .brand-mark-dark { display: block; }
.brand-name { font-weight: 800; font-size: var(--font-size-md); letter-spacing: -0.01em; }

.header-actions { display: flex; align-items: center; gap: var(--space-2); }

.icon-btn {
  width: 42px; height: 42px; border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-text); display: flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none; font-size: var(--font-size-sm); font-weight: 600;
  transition: transform var(--duration-fast) var(--ease-spring), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.icon-btn:hover { border-color: var(--color-primary); box-shadow: var(--shadow-soft-sm); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }

.lang-switch {
  border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text);
  padding: 0 var(--space-4); height: 42px; display: flex; align-items: center;
  font-size: var(--font-size-sm); font-weight: 600; text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-spring), border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.lang-switch:hover { border-color: var(--color-primary); box-shadow: var(--shadow-soft-sm); transform: translateY(-1px); }

/* Header "Log in" (fa/en index only): opens the app's sign-in popup
   (/demo/#login). Same height as its neighbours, the accent fill marks it
   as the one call to action up there. */
.header-login {
  height: 42px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  display: flex; align-items: center; white-space: nowrap;
  background: var(--color-accent); color: var(--color-on-accent);
  font-size: var(--font-size-sm); font-weight: 700; text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard);
}
.header-login:hover { opacity: 0.94; transform: translateY(-1px); }
@media (max-width: 400px) {
  .site-header .brand-name { display: none; }
  .lang-switch, .header-login { padding: 0 var(--space-3); }
}

/* Sun/moon cross-fade: both icons are always in the DOM, stacked and
   absolutely positioned, and swap via opacity+rotate+scale instead of
   display:none so the swap animates instead of popping. */
.icon-btn.theme-toggle { position: relative; overflow: hidden; }
.icon-btn.theme-toggle svg {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  opacity: 1;
  transition: transform var(--duration-normal) var(--ease-spring),
              opacity var(--duration-normal) var(--ease-standard),
              color var(--duration-normal) var(--ease-standard);
}
.icon-btn.theme-toggle .icon-moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg) scale(0.4);
}
:root[data-theme="dark"] .icon-btn.theme-toggle .icon-sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
}
:root[data-theme="dark"] .icon-btn.theme-toggle .icon-moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  color: var(--color-primary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn.theme-toggle .icon-sun {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.4);
  }
  :root:not([data-theme="light"]) .icon-btn.theme-toggle .icon-moon {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
    color: var(--color-primary);
  }
}
@media (prefers-reduced-motion: reduce) {
  .icon-btn.theme-toggle svg { transition: opacity var(--duration-fast) var(--ease-standard); }
}

/* ===== Hero ===== */
.hero {
  position: relative; padding: var(--space-7) 0 var(--space-8) 0; text-align: start;
  isolation: isolate;
}
.hero::before {
  content: ""; position: absolute; inset: -10% -10% auto -10%; height: 140%;
  background: var(--gradient-glow); pointer-events: none; z-index: -1;
  filter: blur(10px);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-full); padding: var(--space-1) var(--space-4);
  font-size: var(--font-size-xs); font-weight: 700; color: var(--color-link);
  margin: 0 0 var(--space-5) 0; box-shadow: var(--shadow-soft-sm);
}
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success); flex: 0 0 auto; animation: pulse-dot 2.4s var(--ease-standard) infinite; }
@media (prefers-reduced-motion: reduce) { .hero-eyebrow .dot { animation: none; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero h1 {
  font-size: var(--font-size-2xl); line-height: var(--line-height-tight);
  font-weight: 800; letter-spacing: -0.02em; margin: 0 0 var(--space-4) 0;
  max-width: 18ch;
}
.hero h1 em {
  font-style: normal; background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p {
  font-size: var(--font-size-md); color: var(--color-text-muted);
  margin: 0 0 var(--space-6) 0; max-width: 48ch;
}
.hero-actions { display: flex; flex-direction: column; gap: var(--space-3); max-width: 340px; }

@media (min-width: 560px) {
  .hero-actions { flex-direction: row; flex-wrap: wrap; max-width: none; }
}
@media (min-width: 960px) {
  .hero { padding: var(--space-9) 0 var(--space-9) 0; }
  .hero h1 { font-size: var(--font-size-3xl); max-width: 16ch; }
  .hero p { font-size: var(--font-size-lg); max-width: 56ch; }
  .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center; }
}

/* ===== Hero visual: a real screenshot of the web-preview app, captured
   straight from /demo/, set in a lightweight device frame. Honest product
   imagery instead of a fabricated mockup — still a single small JPEG kept
   under the page's performance budget. ===== */
.hero-visual { margin-top: var(--space-8); display: flex; justify-content: center; }
@media (min-width: 960px) { .hero-visual { margin-top: 0; } }
.device-frame {
  position: relative; width: min(320px, 78vw); border-radius: var(--radius-xl);
  overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-glow);
  animation: float-y 6s var(--ease-standard) infinite;
}
@media (prefers-reduced-motion: reduce) { .device-frame { animation: none; } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.device-frame img { display: block; width: 100%; height: auto; }
/* Two real screenshots (light/dark theme, captured per-language) stacked
   in the same frame, swapped by [data-theme] — same technique as the
   header logo marks above. Only one is ever laid out at a time.
   Specificity note: these need to beat ".device-frame img" above (class
   + element), so they're written as "img.preview-img-*" (class + element
   too, but later in the cascade) rather than the class alone. */
.device-frame img.preview-img-dark { display: none; }
[data-theme="dark"] .device-frame img.preview-img-light { display: none; }
[data-theme="dark"] .device-frame img.preview-img-dark { display: block; }
.device-frame::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 6%, transparent);
  pointer-events: none;
}
.device-frame-glow {
  position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%;
  background: var(--gradient-brand); filter: blur(60px); opacity: .35; z-index: -1;
  top: 10%; inset-inline-start: 15%;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  border-radius: var(--radius-full); padding: var(--space-4) var(--space-6);
  font-size: var(--font-size-sm); font-weight: 700; font-family: inherit;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-spring),
              opacity var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.btn:active { transform: scale(0.97); }
/* Every button is orange in both themes (tokens.css). Primary = solid
   orange with olive text; outline = orange ring, regular text color
   (orange text on cream would fail contrast). */
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); box-shadow: var(--shadow-glow); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 88%, var(--color-ink)); transform: translateY(-2px); }
.btn-outline { background: var(--color-surface); color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); box-shadow: var(--shadow-soft-sm); }
.btn-outline:hover { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); transform: translateY(-2px); }
.btn-disabled,
.btn[aria-disabled="true"] {
  pointer-events: none; opacity: 0.5; border-color: var(--color-border); color: var(--color-text-muted);
}
.btn .icon-dir { width: 16px; height: 16px; }

/* Directional icons (arrows) must flip in RTL. Applies to the app's UI
   too in spirit, but per SPEC.md §2 the app itself is deliberately
   LTR-only — this rule is for the WEBSITE only. */
[dir="rtl"] .icon-dir { transform: scaleX(-1); }

/* ===== Sections / cards ===== */
.section { padding: var(--space-7) 0; }
.section h2 {
  font-size: var(--font-size-lg); font-weight: 800; margin: 0 0 var(--space-6) 0;
}
.card-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
}
@media (min-width: 640px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .card-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
}
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
  box-shadow: var(--shadow-soft-sm);
  transition: transform var(--duration-normal) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-standard);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-soft-lg); }
.card-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  background: var(--color-accent); color: var(--color-on-accent);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4);
  box-shadow: var(--shadow-soft-sm);
}
.card-icon svg { width: 22px; height: 22px; }
.card h3 { margin: 0 0 var(--space-2) 0; font-size: var(--font-size-md); font-weight: 700; }
.card p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
/* Feature cards with their own button: the link sits at the bottom so
   cards of different text lengths line up. */
@media (min-width: 960px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card-grid-3 .card { display: flex; flex-direction: column; }
.card-grid-3 .card p { flex: 1 1 auto; }
.card-link {
  display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start;
  margin-top: var(--space-5); color: var(--color-link); font-size: var(--font-size-sm);
  font-weight: 700; text-decoration: none;
}
.card-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.card-link .icon-dir { width: 16px; height: 16px; }

.section-sub {
  color: var(--color-text-muted); font-size: var(--font-size-sm);
  margin: calc(var(--space-6) * -1 + var(--space-2)) 0 var(--space-6) 0; max-width: 60ch;
}

/* ===== Why Toojibee (bullet list, not cards — a calmer rhythm than another
   4-card grid right after the features section) ===== */
.why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.why-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.why-item .card-icon { margin-bottom: 0; flex: 0 0 auto; }
.why-item p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.why-item strong { display: block; font-size: var(--font-size-md); margin-bottom: var(--space-1); }

/* ===== Showcase: a "pinned scroll" feature walkthrough. The screenshot
   column uses native position:sticky — it holds its place in the viewport
   while the step text scrolls past beside it. No scroll-hijacking JS, no
   library: just CSS, so it stays cheap and works even if JS fails to load. */
.showcase { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 900px) {
  .showcase { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-8); align-items: start; }
}
.showcase-sticky { position: relative; }
@media (min-width: 900px) { .showcase-sticky { position: sticky; top: calc(var(--space-8) + 64px); } }
.showcase-sticky .device-frame { width: min(432px, 100%); margin: 0 auto; animation: none; } /* 360px, 20% bigger */
.showcase-steps { display: flex; flex-direction: column; gap: var(--space-6); counter-reset: step; }
.showcase-step {
  counter-increment: step;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
  box-shadow: var(--shadow-soft-sm);
}
.showcase-step::before {
  content: counter(step, decimal-leading-zero);
  display: inline-block; font-size: var(--font-size-sm); font-weight: 800;
  color: var(--color-on-accent); background: var(--color-accent);
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  line-height: 32px; text-align: center; margin-bottom: var(--space-3);
}
/* Digits follow the page language (SPEC.md: Persian in /fa/, Latin in
   /en/) — the base rule above is the /en/ (decimal-leading-zero) case.
   The built-in CSS Counter Styles "persian" keyword this used to rely
   on isn't reliably supported everywhere, so these are hardcoded
   Persian-digit strings instead (there are only ever 3 fixed steps, so
   this isn't fragile the way it would be for a dynamic list). */
html[lang="fa"] .showcase-step:nth-child(1)::before { content: "۱"; }
html[lang="fa"] .showcase-step:nth-child(2)::before { content: "۲"; }
html[lang="fa"] .showcase-step:nth-child(3)::before { content: "۳"; }
.showcase-step h3 { margin: 0 0 var(--space-2) 0; font-size: var(--font-size-md); font-weight: 700; }
.showcase-step p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ===== Product experience: heading + one desktop screenshot ===== */
.experience { text-align: center; }
.experience .section-sub { margin-inline: auto; }
.experience .device-frame { width: min(860px, 100%); margin: 0 auto; animation: none; }

/* ===== Final CTA band ===== */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--color-band); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-7) var(--space-5);
  text-align: center; margin: var(--space-7) 0; box-shadow: var(--shadow-soft-lg);
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at 80% 0%, var(--band-shine), transparent 55%);
}
.cta-band h2 { margin: 0 0 var(--space-5) 0; font-size: var(--font-size-lg); font-weight: 800; color: var(--color-on-band); }
.cta-band h2:has(+ p) { margin-bottom: var(--space-3); }
.cta-band p { margin: 0 auto var(--space-6) auto; max-width: 48ch; color: var(--color-on-band); opacity: 0.85; font-size: var(--font-size-sm); }
.cta-band .hero-actions { margin: 0 auto; align-items: center; justify-content: center; }
.cta-band .btn-primary { box-shadow: var(--shadow-soft-lg); }
.cta-band .btn-outline { background: color-mix(in srgb, var(--color-on-band) 12%, transparent); color: var(--color-on-band); border-color: var(--color-accent); }
@media (min-width: 960px) { .cta-band { padding: var(--space-9); } }

/* ===== Scroll-reveal: fade + rise in as sections enter the viewport.
   Progressive enhancement — assets/js/reveal.js toggles .is-visible via
   IntersectionObserver; content is fully visible with JS off or motion
   reduced, so nothing ever depends on the animation to be readable. ===== */
/* Default: fully visible (works with JS off, with no FOUC). Only once
   assets/js/reveal.js confirms it can animate does it add .reveal-armed
   to <html> and hide elements right before observing them — so there is
   never a frame where content is invisible with no script to reveal it. */
html.reveal-armed [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-spring), transform var(--duration-slow) var(--ease-spring);
}
html.reveal-armed [data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-group] > * { transition-delay: calc(var(--reveal-i, 0) * 90ms); }

/* ===== Footer ===== */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-6) 0; margin-top: var(--space-7);
}
.footer-row {
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between;
}
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.footer-links a { text-decoration: none; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.footer-links a:hover { color: var(--color-link); }
.footer-copyright { color: var(--color-text-muted); font-size: var(--font-size-xs); }

/* ===== Language chooser (root "/") ===== */
.chooser {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-6); text-align: center;
}
.chooser-buttons { display: flex; gap: var(--space-3); }
.chooser-buttons .btn { min-width: 140px; }

/* ===== Notice banners (demo preview / legal draft) ===== */
.notice-bar {
  background: var(--color-warning-bg); color: var(--color-warning);
  text-align: center; font-size: var(--font-size-xs); font-weight: 600;
  padding: var(--space-2) var(--space-4);
}

/* ===== Simple content pages (about / privacy / terms) ===== */
.content-page { padding: var(--space-7) 0 var(--space-8) 0; }
.content-page h1 { font-size: var(--font-size-xl); margin: 0 0 var(--space-5) 0; }
.content-page p { max-width: 65ch; color: var(--color-text); }
.content-page p + p { margin-top: var(--space-4); }

/* ===== Download page ===== */
.download-meta {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5); margin: var(--space-5) 0;
}
@media (min-width: 560px) {
  .download-meta { grid-template-columns: repeat(3, 1fr); }
}
.download-meta dt { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 0; }
.download-meta dd { font-size: var(--font-size-sm); font-weight: 700; margin: var(--space-1) 0 0 0; word-break: break-all; }

.install-steps { padding: 0; padding-inline-start: var(--space-5); margin: var(--space-4) 0 0 0; max-width: 60ch; }
.install-steps li { margin-bottom: var(--space-2); }

.store-badges { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.store-badge-placeholder {
  border: 1.5px dashed var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-xs);
}