/* ============================================================
   SonjaAI — Landing Page Styles
   Extracted from web/index.html <style> block
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Nordic minimal: ink + warm white + a single accent (sage). */
  --ink: #0e1614;
  --ink-soft: #141d1a;
  --paper: #f4f1ea;          /* warm cream, used for inverse blocks */
  --paper-soft: #ede7da;
  --brand: #2f6b5a;
  --brand-bright: #3e8a73;
  --accent: #c8900a;
  --accent-soft: #e6b84a;
  --neon: #4ade80;
  --line: #23332e;
  --line-soft: #1c2823;
  --muted: #7d8e85;
  --whisper: #a8b8b1;
  --warm-white: #f4f1ea;
  --glass: transparent;
  --glass-border: rgba(255, 255, 255, 0.04);
  --font-zh-serif: 'Noto Sans SC', 'Source Han Sans SC', sans-serif;
  --lang: zh-CN;
  /* Section tone variants — page is mostly ink, with one or two warm blocks for breathing */
  --tone-bg: var(--ink);
  --tone-fg: var(--warm-white);
  --tone-muted: var(--muted);
  --tone-line: var(--line);
  --tone-card: var(--ink-soft);
  --tone-card-fg: var(--warm-white);
  --tone-btn-bg: var(--paper);
  --tone-btn-fg: var(--ink);
}

/* Warm-light block (used for 1–2 sections to break the dark monotony) */
section[data-tone="paper"] {
  --tone-bg: var(--paper);
  --tone-fg: #1a1206;
  --tone-muted: #6b5a3a;
  --tone-line: #d9cfb8;
  --tone-card: #ffffff;
  --tone-card-fg: #1a1206;
  --tone-btn-bg: var(--ink);
  --tone-btn-fg: var(--paper);
}

/* Gold accent block (sparingly used) */
section[data-tone="gold"] {
  --tone-bg: var(--accent);
  --tone-fg: #1a1206;
  --tone-muted: #4a3a18;
  --tone-line: #b0780a;
  --tone-card: #d99800;
  --tone-card-fg: #1a1206;
  --tone-btn-bg: #1a1206;
  --tone-btn-fg: var(--accent-soft);
}

section[data-tone] { background: var(--tone-bg); color: var(--tone-fg); }
section[data-tone] h1, section[data-tone] h2, section[data-tone] h3, section[data-tone] h4 { color: var(--tone-fg); }
section[data-tone] .text-warm { color: var(--tone-fg); }

html[lang="en"] { --lang: en; }

/* ---------- Base ---------- */
* { -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Manrope', 'Inter', sans-serif;
  background: var(--ink);
  color: var(--warm-white);
  overflow-x: hidden;
  letter-spacing: -0.005em;
}

/* Chinese: Noto Sans SC, generous leading for breathing room */
[data-lang-active="zh-CN"] h1, [data-lang-active="zh-CN"] h2, [data-lang-active="zh-CN"] h3,
[data-lang-active="zh-CN"] .zh-sans { font-family: var(--font-zh-serif); font-weight: 600; letter-spacing: -0.01em; }

/* Section headings: tighter tracking for a premium feel */
.section-heading { letter-spacing: -0.02em; }

/* Nordic minimal — no gradient text, no neon glow halo. Plain white on ink. */
.gradient-text { color: var(--warm-white); }
.gradient-bg { background: var(--brand); color: var(--paper); }
.gold-bg { background: var(--paper); color: var(--ink); }
.gradient-border { border: 1px solid var(--line); background: transparent; }
.glow { box-shadow: none; }
.glow-sm { box-shadow: none; }
.gold-glow { box-shadow: none; }
.brand-glow { box-shadow: none; }

body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' /></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg"); opacity: 0.012; }
.grid-bg { background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px); background-size: 80px 80px; }

@keyframes float { 0%, 100% { transform: translate(0,0) rotate(-2deg) scale(1); } 33% { transform: translate(18px,-22px) rotate(2deg) scale(1.06); } 66% { transform: translate(-14px,12px) rotate(-1deg) scale(0.96); } }
@keyframes aurora-1 { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.5; } 50% { transform: translate(40px,-30px) scale(1.15); opacity: 0.8; } }
@keyframes aurora-2 { 0%,100% { transform: translate(0,0) scale(1); opacity: 0.4; } 50% { transform: translate(-35px,25px) scale(1.12); opacity: 0.7; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes progress-stripe { 0% { background-position: 0 0; } 100% { background-position: 40px 0; } }

.float { animation: float 6s ease-in-out infinite; }
.animate-aurora-1 { animation: aurora-1 14s ease-in-out infinite; }
.animate-aurora-2 { animation: aurora-2 18s ease-in-out infinite reverse; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only:focus, .focus:not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }

/* Reusable text colors */
.text-warm { color: #f1f0eb; }
.text-cream { color: #f4f1ea; }
.text-gold { color: #e6b84a; }

/* Reusable shadows */
.shadow-logo { box-shadow: 0 0 18px rgba(200,144,10,0.35); }
.shadow-gold-sm { box-shadow: 0 0 30px rgba(200,144,10,0.35); }

/* Logo visibility on dark header */
.brightness-200 { filter: brightness(2); }

/* Tight hero leading */
.leading-tight-hero { line-height: 1.15; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* Hero section — compact, no big blank */
.hero-section { min-height: 580px; }
@media (max-width: 768px) { .hero-section { min-height: auto; } }

/* Subtle spotlight behind the hero video column for depth */
.hero-mockup::before { content: ''; position: absolute; inset: -15% -25% -15% -25%; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, rgba(31,107,82,0.16), transparent 70%); filter: blur(20px); pointer-events: none; }

/* Hero static image fallback */
.hero-static {
  aspect-ratio: 16 / 9;
  background: rgba(255,255,255,0.1);
}

/* Tight hero leading */
.leading-tight-hero { line-height: 1.15; }

@media (prefers-reduced-motion: reduce) {
  .animate-aurora-1, .animate-aurora-2, .float, .slide-up, .reveal, .stagger > * { animation: none !important; transition: none !important; }
}

/* Mobile hamburger menu */
.nav-link { transition: color 0.2s ease; }
.nav-link:hover { color: #e6b84a; }
.hamburger { transition: transform 0.2s ease, opacity 0.2s ease; }
.hamburger.open { transform: rotate(90deg); }
.mobile-menu { transition: opacity 0.2s ease, transform 0.2s ease; }
.mobile-menu.open { opacity: 1; transform: translateY(0); }

.slide-up { animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Reveal: hidden by default, JS adds .js-ready then .reveal-in for animation.
   This guarantees content is never hidden if JS / IO fails. */
.reveal { opacity: 1; transform: none; }
.js-ready .reveal:not(.reveal-in) {
  opacity: 0 !important; transform: translateY(20px) !important;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.js-ready .reveal.reveal-in { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .animate-aurora-1, .animate-aurora-2, .float, .slide-up { animation: none !important; }
}

/* Hero marquee: phrases are hardcoded in HTML. */
.hero-marquee { display: none; }

/* Legacy role cards (kept for fallback) */
.role-card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s; transform-style: preserve-3d; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(2,12,9,0.45); background: linear-gradient(180deg, rgba(12,36,28,0.85), rgba(12,36,28,0.55)); position: relative; }
.role-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(45,212,168,0.25), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.6; }
.role-card:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 12px 40px rgba(200,144,10,0.22), 0 0 0 1px rgba(200,144,10,0.3); border-color: rgba(200,144,10,0.4); }
.role-card h3 { margin-bottom: 0.5rem; }
.role-card p { margin-top: 0; }
.role-card .icon-wrap { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.role-card:hover .icon-wrap { transform: scale(1.15) rotate(-5deg); }
.icon-wrap { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

  }
}
  background: rgba(36,91,72,0.6); border: 0; padding: 0;
  cursor: pointer; transition: background 0.25s ease, width 0.25s ease;
}
.slot-dot:hover { background: rgba(45,212,168,0.55); }
.slot-dot[aria-selected="true"] {
  background: linear-gradient(90deg, var(--brand), var(--brand-bright));
  width: 28px;
}

/* 5-card legacy grid — kept for fallback if JS disabled */
.role-grid-fallback { display: none; }

/* Form inputs: deeper, more refined */
.form-input { transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.form-input:focus { outline: none; }
input[type="text"], input[type="url"], input[type="email"] {
  transition: border-color 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s cubic-bezier(0.16,1,0.3,1), background 0.2s ease;
}
input[type="text"]:focus, input[type="url"]:focus, input[type="email"]:focus {
  border-color: #2dd4a8;
  box-shadow: 0 0 0 3px rgba(45,212,168,0.18), 0 0 24px rgba(45,212,168,0.12);
  background: rgba(19,53,42,0.6);
}

.stagger > * { opacity: 0; transform: translateY(10px); animation: slideUp 0.5s ease-out forwards; }
/* When reduced-motion is on, drop the animation but STILL reveal the
   element — otherwise opacity:0 lingers and the list looks empty. */
@media (prefers-reduced-motion: reduce) {
  .stagger > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}
.stagger > *:nth-child(1) { animation-delay: 0.05s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.15s; }
.stagger > *:nth-child(4) { animation-delay: 0.2s; }
.stagger > *:nth-child(5) { animation-delay: 0.25s; }

.progress-ring { transform: rotate(-90deg); }
.progress-ring-circle { transition: stroke-dashoffset 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.stat-number { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--gold); text-shadow: 0 0 12px rgba(200,144,10,0.35); }

.btn-primary { position: relative; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; will-change: transform; }
.btn-primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); transform: translateX(-100%); transition: transform 0.6s ease; }
.btn-primary:hover::after { transform: translateX(100%); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary.gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-soft) 100%); color: #1a1206; }
.btn-primary.gold:hover { box-shadow: 0 0 0 1px rgba(200,144,10,0.55), 0 0 26px rgba(200,144,10,0.5), 0 8px 30px rgba(200,144,10,0.45); transform: translateY(-1px); }
.btn-primary.gold:hover { box-shadow: 0 0 0 1px rgba(200,144,10,0.55), 0 0 26px rgba(200,144,10,0.5), 0 8px 30px rgba(200,144,10,0.45); }
.btn-primary.gold:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(200,144,10,0.35), 0 0 26px rgba(200,144,10,0.5); }

/* Prominent, visible focus rings for keyboard navigation */
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid #e6b84a;
  outline-offset: 2px;
}

/* Inline validation states */
.input-error { border-color: #f87171 !important; box-shadow: 0 0 0 2px rgba(248,113,113,0.25) !important; }
.input-ok { border-color: #4ade80 !important; box-shadow: 0 0 0 2px rgba(74,222,128,0.2) !important; }
.field-error { color: #f87171; font-size: 0.75rem; margin-top: 0.35rem; display: block; }

/* CTA buttons: full-width on mobile so they stay tappable */
.cta-row { width: 100%; }
@media (min-width: 640px) { .cta-row { width: auto; } }
.cta-row .btn-primary { width: 100%; }
@media (min-width: 640px) { .cta-row .btn-primary { width: auto; } }

/* i18n: hide non-active language text.
   Selectors match BOTH <html lang="..."> and <html data-lang-active="...">,
   so lang switching works regardless of which attribute gets updated.
   Block-level tags (p/h2/h3/li/details/summary) get display:block. */
html[lang="zh-CN"] .lang-en,
html[data-lang-active="zh-CN"] .lang-en,
html[lang="en"] .lang-zh,
html[data-lang-active="en"] .lang-zh { display: none !important; }
html[lang="zh-CN"] .lang-zh,
html[data-lang-active="zh-CN"] .lang-zh,
html[lang="en"] .lang-en,
html[data-lang-active="en"] .lang-en { display: inline !important; }
html[lang="zh-CN"] p.lang-zh, html[lang="zh-CN"] h1.lang-zh, html[lang="zh-CN"] h2.lang-zh, html[lang="zh-CN"] h3.lang-zh, html[lang="zh-CN"] h4.lang-zh, html[lang="zh-CN"] li.lang-zh, html[lang="zh-CN"] div.lang-zh, html[lang="zh-CN"] details.lang-zh, html[lang="zh-CN"] summary.lang-zh,
html[data-lang-active="zh-CN"] p.lang-zh, html[data-lang-active="zh-CN"] h1.lang-zh, html[data-lang-active="zh-CN"] h2.lang-zh, html[data-lang-active="zh-CN"] h3.lang-zh, html[data-lang-active="zh-CN"] h4.lang-zh, html[data-lang-active="zh-CN"] li.lang-zh, html[data-lang-active="zh-CN"] div.lang-zh, html[data-lang-active="zh-CN"] details.lang-zh, html[data-lang-active="zh-CN"] summary.lang-zh,
html[lang="en"] p.lang-en, html[lang="en"] h1.lang-en, html[lang="en"] h2.lang-en, html[lang="en"] h3.lang-en, html[lang="en"] h4.lang-en, html[lang="en"] li.lang-en, html[lang="en"] div.lang-en, html[lang="en"] details.lang-en, html[lang="en"] summary.lang-en,
html[data-lang-active="en"] p.lang-en, html[data-lang-active="en"] h1.lang-en, html[data-lang-active="en"] h2.lang-en, html[data-lang-active="en"] h3.lang-en, html[data-lang-active="en"] h4.lang-en, html[data-lang-active="en"] li.lang-en, html[data-lang-active="en"] div.lang-en, html[data-lang-active="en"] details.lang-en, html[data-lang-active="en"] summary.lang-en { display: block !important; }

/* Lang switcher dropdown */
.lang-menu { display: none; }
.lang-menu.open { display: block; }

/* Hero — plain white on ink, no glow halo, no neon stroke. */
.neon { color: var(--brand-bright); }
.fluor { color: var(--brand-bright); }
.hero-text-shadow, .hero-glow { text-shadow: none; }
.hero-video {
  filter: brightness(1) saturate(1) contrast(1);
}

/* Price card (kept for future pricing section) */
.price-card { transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 8px 24px rgba(2,12,9,0.4); position: relative; }
.price-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, transparent, rgba(200,144,10,0.3)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; }
.price-card:hover::before { opacity: 1; }
.price-card:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(200,144,10,0.2), 0 0 0 1px rgba(200,144,10,0.2); }

/* Legacy detail panel styles (kept for fallback) */
#detailDept, #detailTitle, #detailDesc { transition: opacity 0.25s ease; }
.detail-fade { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .slot-track, #detailDept, #detailTitle, #detailDesc { transition: none !important; }
}

/* Mobile role detail tabs */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }
.tab-btn { 
  transition: all 0.2s ease; 
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
}
.tab-btn.active {
  border-color: var(--brand);
  color: var(--warm-white);
  background: rgba(45, 212, 168, 0.12);
}
.tab-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; }
.tab-panel { flex: 0 0 100%; width: 100%; scroll-snap-align: start; }

/* Role dual pane */
#roleDual { transition: opacity 0.35s ease, transform 0.35s ease; }
.role-pane-img { aspect-ratio: 1 / 1; object-fit: cover; }
@media (min-width: 768px) {
  #roleDual:hover { border-color: rgba(45,212,168,0.35); }
  #roleScroll { grid-template-columns: 1fr 1fr; }
}
#roleScroll {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
#roleScroll > div {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  #roleScroll {
    display: grid;
    overflow-x: visible;
    scroll-snap-type: auto;
  }
  #roleScroll > div {
    flex: none;
    min-width: auto;
    scroll-snap-align: auto;
  }
}

/* Role mobile tabs and number selector */
#roleTabs .tab-btn, #roleNumberSelector .tab-btn {
  min-width: 44px;
  justify-content: center;
  font-weight: 500;
}
#roleTabs .tab-btn.active, #roleNumberSelector .tab-btn.active {
  background: rgba(45, 212, 168, 0.15);
  border-color: var(--brand);
  color: var(--warm-white);
  box-shadow: 0 0 12px rgba(45, 212, 168, 0.25);
}
#roleNumberSelector .tab-btn:hover {
  border-color: var(--brand);
  color: var(--warm-white);
}