/* =========================================================================
   Lecron AI — styles.css
   Single hand-authored stylesheet for lechuangtech.com.
   Sections: tokens → reset/base → layout → components → page → responsive.
   ========================================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* color — brand */
  --color-ink: #0E0F12;
  --color-ink-2: #1A1C22;
  --color-ink-3: #25282F;
  --color-paper: #F5F4F0;
  --color-paper-2: #EDE9DF;
  --color-paper-edge: #D8D2C2;
  --color-blue: #1F6FEB;
  --color-blue-deep: #1150B7;
  --color-blue-soft: #E1ECFB;
  --color-gold: #C9A14A;
  --color-gold-soft: #F4E7C5;
  --color-coral: #FF6F5B;
  --color-coral-soft: #FFE2DC;
  --color-success: #2E8B57;
  --color-warning: #D98E04;
  --color-danger: #C0392B;

  /* text */
  --text-on-ink: #F5F4F0;
  --text-on-ink-muted: rgba(245, 244, 240, 0.72);
  --text-on-paper: #0E0F12;
  --text-on-paper-muted: rgba(14, 15, 18, 0.65);
  --text-accent: #1F6FEB;
  --text-accent-dark: #5B95FF;
  --text-gold: #C9A14A;

  /* scrim / overlay */
  --scrim-ink-60: rgba(14, 15, 18, 0.60);
  --scrim-ink-40: rgba(14, 15, 18, 0.40);
  --scrim-paper-50: rgba(245, 244, 240, 0.50);
  --scrim-paper-80: rgba(245, 244, 240, 0.85);

  /* typography */
  --font-display: "Fraunces", "Playfair Display", Georgia, serif;
  --font-body: "Inter", "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --fs-display-1: clamp(2.5rem, 1.6rem + 4.5vw, 5.5rem);
  --fs-display-2: clamp(2rem, 1.4rem + 2.8vw, 4rem);
  --fs-h1: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --fs-h2: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  --fs-h3: 1.25rem;
  --fs-h4: 1.0625rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-mono: 0.8125rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.55;
  --lh-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;

  --weight-display: 500;
  --weight-bold: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-regular: 400;

  /* spacing — 8pt grid */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;
  --space-12: 160px;

  /* layout widths */
  --w-prose: 68ch;
  --w-text: 48rem;
  --w-container: 1280px;
  --w-wide: 1440px;
  --w-gutter: clamp(1rem, 4vw, 2.5rem);

  /* radius */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 40px;
  --radius-pill: 999px;
  --radius-blob: 64% 36% 58% 42% / 48% 56% 44% 52%;

  /* shadow */
  --shadow-1: 0 1px 2px rgba(14, 15, 18, 0.08), 0 2px 6px rgba(14, 15, 18, 0.04);
  --shadow-2: 0 8px 24px rgba(14, 15, 18, 0.10), 0 2px 6px rgba(14, 15, 18, 0.06);
  --shadow-3: 0 24px 56px rgba(14, 15, 18, 0.18), 0 4px 12px rgba(14, 15, 18, 0.10);
  --shadow-glow-blue: 0 12px 40px rgba(31, 111, 235, 0.45);
  --shadow-glow-gold: 0 0 0 1px rgba(201, 161, 74, 0.55), 0 8px 28px rgba(201, 161, 74, 0.35);

  /* motion */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 560ms;
  --dur-marquee: 36s;
  --dur-magnetic: 480ms;

  /* z-index */
  --z-base: 1;
  --z-sticky: 20;
  --z-overlay: 50;
  --z-modal: 80;
  --z-toast: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-marquee: 0s;
    --dur-magnetic: 0ms;
  }
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--text-on-paper); background: var(--color-paper); }
img, svg, video { max-width: 100%; display: block; height: auto; }
a { color: var(--text-accent); text-decoration: none; transition: color var(--dur-fast) var(--ease-out-quint); }
a:hover { color: var(--color-blue-deep); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; border-radius: var(--radius-xs); }
::selection { background: var(--color-gold); color: var(--color-ink); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
p { margin: 0 0 var(--space-5); }
ul, ol { margin: 0; padding: 0; }
hr { border: 0; border-top: 1px solid var(--color-paper-edge); margin: var(--space-9) 0; }

.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; }
.skip-link { position: absolute; top: -40px; left: 8px; background: var(--color-ink); color: var(--text-on-ink); padding: 8px 16px; border-radius: var(--radius-sm); z-index: var(--z-modal); transition: top var(--dur-fast) var(--ease-out-quint); }
.skip-link:focus { top: 8px; color: var(--text-on-ink); }

/* ---------- 3. Layout ---------- */
.container { max-width: var(--w-container); margin-inline: auto; padding-inline: var(--w-gutter); }
.container--wide { max-width: var(--w-wide); }
.prose { max-width: var(--w-prose); }
.section { padding: var(--space-11) var(--w-gutter); }
.section--tight { padding-block: var(--space-9); }

.band { padding: var(--space-11) var(--w-gutter); }
.band--ink { background: var(--color-ink); color: var(--text-on-ink); }
.band--paper { background: var(--color-paper); color: var(--text-on-paper); }
.band--paper-2 { background: var(--color-paper-2); color: var(--text-on-paper); }
.band--blue-soft { background: var(--color-blue-soft); color: var(--text-on-paper); }
.band--gold-soft { background: var(--color-gold-soft); color: var(--text-on-paper); }
.band--bleed { padding-inline: 0; }
.band__inner { max-width: var(--w-container); margin-inline: auto; padding-inline: var(--w-gutter); }

/* Two-column used on services page hero */
.grid-2 { display: grid; gap: var(--space-8); grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
.grid-4 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid-2 { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 4. Typography helpers ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); text-transform: uppercase; font-size: var(--fs-mono); letter-spacing: var(--tracking-wide); color: var(--color-gold); margin: 0 0 var(--space-5); }
.eyebrow::before { content: ""; display: inline-block; width: 24px; height: 1px; background: currentColor; }
.eyebrow--light { color: var(--text-gold); }
.eyebrow--paper { color: var(--color-gold); }

.section-header { max-width: var(--w-text); margin: 0 auto var(--space-9); text-align: center; }
.section-header__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-display-2); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-5); }
.section-header__lede { color: var(--text-on-paper-muted); font-size: var(--fs-body-lg); margin: 0; }
.section-header--dark .section-header__lede { color: var(--text-on-ink-muted); }
.section-header__lede strong { color: var(--text-on-paper); }
.section-header--dark .section-header__lede strong { color: var(--text-on-ink); }

.mono { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.mono-tnum { font-feature-settings: "tnum" 1; }

/* ---------- 5. Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); padding: 0 var(--space-6); height: 48px; border-radius: var(--radius-sm); font: inherit; font-weight: var(--weight-semibold); font-size: 0.9375rem; letter-spacing: var(--tracking-normal); text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform var(--dur-fast) var(--ease-out-quint), background var(--dur-fast) var(--ease-out-quint), box-shadow var(--dur-fast) var(--ease-out-quint), color var(--dur-fast) var(--ease-out-quint); }
.btn:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 3px; }
.btn__icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out-quint); }
.btn:hover .btn__icon { transform: translateX(4px); }
@media (max-width: 768px) { .btn { height: 44px; } }

.btn--primary { background: var(--color-blue); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-blue-deep); box-shadow: var(--shadow-glow-blue); color: var(--color-paper); }

.btn--ghost-light { background: transparent; color: var(--text-on-ink); border-color: rgba(245, 244, 240, 0.40); }
.btn--ghost-light:hover { background: rgba(245, 244, 240, 0.08); color: var(--text-on-ink); }

.btn--ghost-dark { background: transparent; color: var(--text-on-paper); border-color: var(--color-ink); }
.btn--ghost-dark:hover { background: var(--color-ink); color: var(--text-on-ink); }

.btn--gold { background: var(--color-gold); color: var(--color-ink); }
.btn--gold:hover { filter: brightness(1.08); box-shadow: var(--shadow-glow-gold); color: var(--color-ink); }

.btn--magnetic { will-change: transform; transition: transform var(--dur-magnetic) var(--ease-out-back), background var(--dur-fast) var(--ease-out-quint); }
.btn--magnetic.is-pressed { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .btn--magnetic { transition: none; } }

/* ---------- 6. Header ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-6); padding: 0 var(--w-gutter); height: 72px; color: var(--text-on-ink); transition: background var(--dur-base) var(--ease-out-quint), backdrop-filter var(--dur-base) var(--ease-out-quint), border-color var(--dur-base) var(--ease-out-quint), color var(--dur-base) var(--ease-out-quint); border-bottom: 1px solid transparent; }
.site-header.is-frost { background: var(--scrim-paper-80); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); color: var(--text-on-paper); border-bottom-color: var(--color-paper-edge); }

.site-header__logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; font-weight: var(--weight-semibold); color: inherit; }
.site-header__logo:hover { color: inherit; }
.site-header__logo .logo-mark { width: 36px; height: 36px; }
.site-header__wordmark { font-family: var(--font-body); font-size: 1.0625rem; letter-spacing: 0.01em; }
.site-header__logo--mono .site-header__wordmark { color: var(--text-on-ink); }
.site-header.is-frost .site-header__logo--mono .site-header__wordmark { color: var(--text-on-paper); }

.site-nav { margin-inline-start: auto; }
.site-nav ul { display: flex; gap: var(--space-7); list-style: none; }
.site-nav a { color: inherit; text-decoration: none; font-weight: var(--weight-medium); padding: var(--space-3) 0; position: relative; }
.site-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--text-gold); transition: width var(--dur-base) var(--ease-out-quint); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { width: 100%; }
.site-nav a[aria-current="page"] { color: var(--text-gold); }
.site-header.is-frost .site-nav a[aria-current="page"] { color: var(--color-blue); }

.site-header__cta { margin-inline-start: var(--space-6); height: 40px; padding: 0 var(--space-5); }
.site-header__drawer { display: none; background: none; border: 0; color: inherit; cursor: pointer; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-sm); }
.site-header__drawer:hover { background: rgba(245, 244, 240, 0.08); }
.site-header.is-frost .site-header__drawer:hover { background: rgba(14, 15, 18, 0.06); }

@media (max-width: 1023px) {
  .site-nav, .site-header__cta { display: none; }
  .site-header__drawer { display: inline-flex; }
}

.mobile-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-ink); color: var(--text-on-ink); padding: 96px var(--w-gutter) var(--space-7); z-index: var(--z-overlay); display: flex; flex-direction: column; gap: var(--space-5); transform: translateY(-100%); transition: transform var(--dur-base) var(--ease-out-quint); visibility: hidden; }
.mobile-nav.is-open { transform: translateY(0); visibility: visible; }
.mobile-nav a { color: var(--text-on-ink); font-size: var(--fs-h2); font-family: var(--font-display); padding: var(--space-4) 0; border-bottom: 1px solid rgba(245, 244, 240, 0.08); }
.mobile-nav a[aria-current="page"] { color: var(--text-gold); }
.mobile-nav__cta { margin-top: var(--space-6); }
@media (min-width: 1024px) { .mobile-nav { display: none; } }

/* ---------- 7. Hero ---------- */
.hero { position: relative; isolation: isolate; min-height: 100svh; color: var(--text-on-ink); display: flex; align-items: flex-end; padding: var(--space-12) var(--w-gutter) var(--space-11); overflow: hidden; }
.hero--compact { min-height: 70vh; padding-block: var(--space-11); }

.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--parallax-y, 0), 0); will-change: transform; }

.hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--scrim-ink-40) 0%, var(--scrim-ink-60) 65%, var(--color-ink) 100%); }

.hero__content { max-width: 64rem; }
.hero__headline { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-display-1); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-6); }
.hero__headline em { font-style: italic; color: var(--text-gold); }
.hero__lede { font-size: var(--fs-body-lg); line-height: var(--lh-normal); color: var(--text-on-ink-muted); max-width: 40rem; margin: 0 0 var(--space-7); }
.hero__cta-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero__mascot { position: absolute; right: 6vw; bottom: 8vh; width: clamp(120px, 16vw, 240px); pointer-events: none; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45)); }

@media (max-width: 768px) {
  .hero { padding-top: var(--space-11); padding-bottom: var(--space-10); }
  .hero__mascot { width: 88px; right: 4vw; bottom: 12vh; }
}

/* Floating ornaments for hero */
.hero__ornament { position: absolute; pointer-events: none; z-index: -1; }
.hero__ornament--top-left { top: 96px; left: 4vw; width: 64px; opacity: 0.85; }
.hero__ornament--bottom-right { bottom: 16vh; right: 4vw; width: 84px; opacity: 0.85; }

/* split-text kinetic */
[data-split-text] .word { display: inline-block; overflow: hidden; vertical-align: bottom; }
[data-split-text] .char { display: inline-block; transform: translateY(110%); opacity: 0; }
[data-split-text].is-visible .char { transform: translateY(0); opacity: 1; transition: transform 720ms var(--ease-out-quint), opacity 480ms var(--ease-out-quint); }
@media (prefers-reduced-motion: reduce) { [data-split-text] .char { transform: none; opacity: 1; transition: none; } }

/* ---------- 8. Brand strip / value pillars ---------- */
.pillar-row { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pillar-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillar-row { grid-template-columns: repeat(4, 1fr); } }
.pillar { padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-paper-2); border: 1px solid var(--color-paper-edge); }
.pillar__num { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-on-paper-muted); letter-spacing: var(--tracking-wide); margin-bottom: var(--space-4); }
.pillar__title { font-family: var(--font-display); font-size: var(--fs-h2); margin: 0 0 var(--space-3); }
.pillar__body { margin: 0; color: var(--text-on-paper-muted); }

/* ---------- 9. Cards ---------- */
.card { background: var(--color-paper); border: 1px solid var(--color-paper-edge); border-radius: var(--radius-md); padding: var(--space-7); transition: transform var(--dur-base) var(--ease-out-quint), box-shadow var(--dur-base) var(--ease-out-quint), border-color var(--dur-base) var(--ease-out-quint); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: transparent; }

.card--service { display: flex; flex-direction: column; gap: var(--space-4); min-height: 18rem; }
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--color-blue-soft); color: var(--color-blue); margin-bottom: var(--space-3); }
.card__icon img, .card__icon svg { width: 28px; height: 28px; }
.card__title { font-family: var(--font-display); font-size: var(--fs-h2); margin: 0; line-height: var(--lh-snug); }
.card__body { color: var(--text-on-paper-muted); margin: 0; }
.card__link { margin-top: auto; color: var(--text-accent); font-weight: var(--weight-semibold); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.card__link:hover { color: var(--color-blue-deep); }
.card__link span { transition: transform var(--dur-fast) var(--ease-out-quint); }
.card__link:hover span { transform: translateX(4px); }

.card--news { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card__media { aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, var(--color-blue-soft), var(--color-gold-soft)); display: grid; place-items: center; font-size: 3rem; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out-quint); }
.card--news:hover .card__media img { transform: scale(1.04); }
.card__date { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-on-paper-muted); padding: var(--space-5) var(--space-6) 0; margin: 0 0 var(--space-2); }
.card__date .dot { color: var(--color-gold); }
.card--news .card__title { padding: 0 var(--space-6); margin: 0 0 var(--space-3); }
.card--news .card__body { padding: 0 var(--space-6); margin: 0; }
.card--news .card__link { padding: var(--space-5) var(--space-6) var(--space-6); margin-top: auto; }

.card--app { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--app .card__icon { width: 64px; height: 64px; margin: var(--space-6) var(--space-6) var(--space-3); font-size: 1.5rem; background: var(--color-gold-soft); color: var(--color-gold); }

/* ---------- 10. Marquee ---------- */
.marquee { overflow: hidden; padding: var(--space-6) 0; background: var(--color-ink); color: var(--text-on-ink); }
.marquee--light { background: var(--color-paper-2); color: var(--text-on-paper); }
.marquee__track { display: flex; width: max-content; animation: marquee var(--dur-marquee) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__row { display: flex; gap: var(--space-7); list-style: none; padding: 0; align-items: center; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--weight-display); }
.marquee__row li { display: inline-flex; align-items: center; gap: var(--space-7); }
.marquee__row .dot { color: var(--color-gold); font-style: italic; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- 11. Parallax panel / CTA band ---------- */
.parallax-panel { position: relative; isolation: isolate; min-height: 60vh; display: grid; place-items: center; text-align: center; color: var(--text-on-ink); padding: var(--space-11) var(--w-gutter); overflow: hidden; }
.parallax-panel__bg { position: absolute; inset: -10% 0; z-index: -1; overflow: hidden; }
.parallax-panel__bg img { width: 100%; height: 100%; object-fit: cover; transform: translate3d(0, var(--parallax-y, 0), 0); will-change: transform; }
.parallax-panel__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--scrim-ink-40), var(--scrim-ink-60)); }
.parallax-panel__content { max-width: 48rem; }
.parallax-panel__title { font-family: var(--font-display); font-size: var(--fs-display-2); font-weight: var(--weight-display); margin: 0 0 var(--space-5); letter-spacing: var(--tracking-tight); }
.parallax-panel__lede { color: var(--text-on-ink-muted); font-size: var(--fs-body-lg); margin: 0 0 var(--space-7); }

/* ---------- 12. Mascot bubble / animals ---------- */
.mascot { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; --mascot-accent: var(--color-gold); --mascot-bg: var(--color-gold-soft); }
.mascot__bubble { position: absolute; width: 160px; height: 160px; border-radius: var(--radius-blob); background: var(--mascot-bg); z-index: -1; top: 8px; transition: transform var(--dur-base) var(--ease-out-back), background var(--dur-base) var(--ease-out-quint); }
.mascot:hover .mascot__bubble { transform: translateY(-6px) scale(1.04); background: var(--mascot-accent); }
.mascot__art { width: 120px; height: 120px; }
.mascot__caption { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--mascot-accent); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-top: var(--space-4); }

.mascot-row { display: grid; gap: var(--space-7); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .mascot-row { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .mascot-row { grid-template-columns: repeat(8, 1fr); gap: var(--space-5); } }

[data-mascot-idle] { animation: mascot-idle 2.4s var(--ease-in-out-quart) infinite; transform-origin: center bottom; transform: translateY(0) rotate(calc(var(--tilt, 0deg) - 1deg)); }
@keyframes mascot-idle { 0%, 100% { transform: translateY(0) rotate(calc(var(--tilt, 0deg) - 1deg)); } 50% { transform: translateY(-6px) rotate(calc(var(--tilt, 0deg) + 1deg)); } }
@media (prefers-reduced-motion: reduce) { [data-mascot-idle] { animation: none; } }

/* ---------- 13. Eyebrow / progress rail / scroll-progress bar ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-gold), var(--color-coral)); transform-origin: left center; transform: scaleX(var(--p, 0)); z-index: calc(var(--z-sticky) + 1); transition: transform 80ms linear; }

.progress-rail { position: fixed; left: 0; top: 96px; bottom: 96px; width: 1px; background: rgba(245, 244, 240, 0.10); z-index: var(--z-sticky); }
.progress-rail__fill { display: block; width: 1px; height: var(--p, 0%); background: linear-gradient(180deg, var(--color-gold), var(--color-coral)); }
@media (max-width: 1023px) { .progress-rail { display: none; } }

/* ---------- 14. Reveal animation ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); }
[data-reveal].is-visible { opacity: 1; transform: none; transition: opacity 640ms var(--ease-out-quint), transform 640ms var(--ease-out-quint); }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- 15. Footer ---------- */
.site-footer { background: var(--color-ink); color: var(--text-on-ink-muted); }
.site-footer__top { display: grid; gap: var(--space-8); grid-template-columns: 1.5fr 1fr 1fr 1.5fr; padding: var(--space-11) var(--w-gutter) var(--space-9); }
.site-footer__col h4 { color: var(--text-on-ink); font-size: 0.875rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: 0 0 var(--space-5); font-family: var(--font-body); font-weight: var(--weight-semibold); }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer__col a { color: inherit; text-decoration: none; }
.site-footer__col a:hover { color: var(--text-accent-dark); }
.site-footer__col p { margin: var(--space-3) 0; line-height: var(--lh-normal); }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--w-gutter); border-top: 1px solid rgba(245, 244, 240, 0.08); font-size: var(--fs-body-sm); gap: var(--space-5); }
.site-footer__bottom-meta { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.site-footer__legal-links { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.site-footer__legal-links a { color: var(--text-on-ink-muted); }
.site-footer__legal-links a:hover { color: var(--text-accent-dark); }
.site-footer__mascot { width: 64px; height: 64px; flex-shrink: 0; }
@media (max-width: 1023px) { .site-footer__top { grid-template-columns: 1fr 1fr; } .site-footer__col--cta { grid-column: 1 / -1; } .site-footer__bottom { flex-direction: column; gap: var(--space-4); text-align: center; } .site-footer__bottom-meta, .site-footer__legal-links { justify-content: center; } }

/* ---------- 16. Trust / region strip ---------- */
.region-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.region-tag { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-radius: var(--radius-pill); border: 1px solid var(--color-paper-edge); background: var(--color-paper); color: var(--text-on-paper); font-size: var(--fs-body-sm); font-weight: var(--weight-medium); }
.region-tag svg { width: 16px; height: 16px; }
.band--ink .region-tag { background: rgba(245, 244, 240, 0.06); color: var(--text-on-ink); border-color: rgba(245, 244, 240, 0.12); }

/* ---------- 17. Services page specifics ---------- */
.service-block { position: relative; padding: var(--space-11) var(--w-gutter); border-bottom: 1px solid var(--color-paper-edge); }
.service-block:last-of-type { border-bottom: 0; }
.service-block__inner { max-width: var(--w-container); margin-inline: auto; display: grid; gap: var(--space-9); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .service-block__inner { grid-template-columns: 240px 1fr; gap: var(--space-11); } }
.service-block__index { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-on-paper-muted); letter-spacing: var(--tracking-wide); display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.service-block__index::before { content: ""; display: inline-block; width: 32px; height: 1px; background: var(--color-gold); }
.service-block__icon { width: 56px; height: 56px; display: grid; place-items: center; background: var(--color-blue-soft); color: var(--color-blue); border-radius: var(--radius-md); margin-bottom: var(--space-5); }
.service-block__icon svg, .service-block__icon img { width: 32px; height: 32px; }
.service-block__title { font-family: var(--font-display); font-size: var(--fs-h1); line-height: var(--lh-snug); margin: 0 0 var(--space-5); letter-spacing: var(--tracking-tight); }
.service-block__body { margin: 0 0 var(--space-5); font-size: var(--fs-body-lg); color: var(--text-on-paper); }
.service-block__list { list-style: none; padding: 0; margin: 0 0 var(--space-7); display: grid; gap: var(--space-3); }
.service-block__list li { position: relative; padding-left: var(--space-6); color: var(--text-on-paper-muted); }
.service-block__list li::before { content: "→"; position: absolute; left: 0; color: var(--color-blue); }

/* Services mobile apps sub-section */
.apps-banner { padding: var(--space-11) var(--w-gutter); background: var(--color-ink); color: var(--text-on-ink); }
.apps-banner__inner { max-width: var(--w-container); margin-inline: auto; }
.apps-banner h2 { font-size: var(--fs-display-2); margin: 0 0 var(--space-5); }
.apps-banner p { color: var(--text-on-ink-muted); max-width: var(--w-text); font-size: var(--fs-body-lg); margin: 0 0 var(--space-7); }
.format-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 640px) { .format-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .format-grid { grid-template-columns: repeat(4, 1fr); } }
.format-card { padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-ink-2); border: 1px solid rgba(245, 244, 240, 0.08); display: flex; flex-direction: column; gap: var(--space-3); }
.format-card__icon { width: 48px; height: 48px; border-radius: var(--radius-sm); display: grid; place-items: center; background: rgba(31, 111, 235, 0.15); color: var(--text-accent-dark); }
.format-card__icon svg { width: 28px; height: 28px; }
.format-card h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0; color: var(--text-on-ink); }
.format-card p { margin: 0; color: var(--text-on-ink-muted); font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.format-card a { color: var(--text-accent-dark); font-weight: var(--weight-medium); }

/* ---------- 18. Culture page ---------- */
.values-row { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
@media (min-width: 768px) { .values-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .values-row { grid-template-columns: repeat(3, 1fr); } }
.value-card { padding: var(--space-7); border-radius: var(--radius-md); background: var(--color-paper); border: 1px solid var(--color-paper-edge); }
.value-card__art { font-size: 2.5rem; margin-bottom: var(--space-4); display: inline-block; }
.value-card h3 { font-family: var(--font-display); font-size: var(--fs-h2); margin: 0 0 var(--space-4); }
.value-card p { margin: 0; color: var(--text-on-paper-muted); }

.how-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr 1fr; }
@media (min-width: 768px) { .how-grid { grid-template-columns: repeat(4, 1fr); } }
.how-card { padding: var(--space-6); background: var(--color-ink-2); color: var(--text-on-ink); border-radius: var(--radius-md); }
.how-card__icon { width: 56px; height: 56px; margin-bottom: var(--space-4); background: rgba(245, 244, 240, 0.06); border-radius: var(--radius-md); display: grid; place-items: center; }
.how-card__icon svg, .how-card__icon img { width: 32px; height: 32px; color: var(--text-gold); }
.how-card h4 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0 0 var(--space-3); color: var(--text-on-ink); }
.how-card p { color: var(--text-on-ink-muted); font-size: var(--fs-body-sm); margin: 0; }

/* ---------- 19. News chips / filter ---------- */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-7); justify-content: center; }
.chip { padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill); border: 1px solid var(--color-paper-edge); background: transparent; color: var(--text-on-paper); font: inherit; font-size: 0.9375rem; cursor: pointer; transition: all var(--dur-fast) var(--ease-out-quint); }
.chip:hover { border-color: var(--color-ink); }
.chip.is-active { background: var(--color-ink); color: var(--text-on-ink); border-color: var(--color-ink); }
.chip:focus-visible { outline: 2px solid var(--color-blue); outline-offset: 2px; }

.news-grid { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
@media (min-width: 768px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .news-grid { grid-template-columns: repeat(3, 1fr); } }
.news-grid .card--news.is-hidden { display: none; }
.news-empty { text-align: center; padding: var(--space-10) var(--space-5); color: var(--text-on-paper-muted); }
.news-empty__art { font-size: 3rem; margin-bottom: var(--space-4); }

/* ---------- 20. Contact ---------- */
.contact-hero { position: relative; padding: var(--space-12) var(--w-gutter) var(--space-10); background: var(--color-ink); color: var(--text-on-ink); overflow: hidden; }
.contact-hero__inner { max-width: var(--w-container); margin-inline: auto; display: grid; gap: var(--space-9); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .contact-hero__inner { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.contact-hero h1 { font-size: var(--fs-display-1); margin: 0 0 var(--space-6); letter-spacing: var(--tracking-tight); }
.contact-hero p { color: var(--text-on-ink-muted); font-size: var(--fs-body-lg); margin: 0; }
.contact-hero__meta { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-gold); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: 0 0 var(--space-6); }

.contact-grid { display: grid; gap: var(--space-7); grid-template-columns: 1fr; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: repeat(3, 1fr); } }
.contact-card { padding: var(--space-7); background: var(--color-paper); border: 1px solid var(--color-paper-edge); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-4); }
.contact-card__icon { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--color-gold-soft); color: var(--color-gold); display: grid; place-items: center; }
.contact-card__icon svg { width: 28px; height: 28px; }
.contact-card h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0; }
.contact-card a { font-family: var(--font-mono); font-size: var(--fs-body); color: var(--text-accent); word-break: break-word; }
.contact-card__body { color: var(--text-on-paper-muted); margin: 0; font-size: var(--fs-body-sm); }

.contact-block { padding: var(--space-11) var(--w-gutter); }
.contact-block__inner { max-width: var(--w-container); margin-inline: auto; display: grid; gap: var(--space-9); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .contact-block__inner { grid-template-columns: 1fr 1fr; align-items: start; } }

/* ---------- 21. Form ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); max-width: 48rem; }
.form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.form__field--wide { grid-column: 1 / -1; }
.form__field span { font-size: var(--fs-body-sm); color: var(--text-on-paper-muted); font-weight: var(--weight-medium); }
.form__field input, .form__field textarea, .form__field select { font: inherit; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-paper-edge); border-radius: var(--radius-sm); background: var(--color-paper); color: var(--text-on-paper); transition: border-color var(--dur-fast) var(--ease-out-quint), box-shadow var(--dur-fast) var(--ease-out-quint); font-size: var(--fs-body); }
.form__field input:focus, .form__field textarea:focus, .form__field select:focus { outline: none; border-color: var(--color-blue); box-shadow: 0 0 0 4px rgba(31, 111, 235, 0.15); }
.form__field--error input, .form__field--error textarea { border-color: var(--color-danger); box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.12); }
.form__error { font-size: var(--fs-body-sm); color: var(--color-danger); margin-top: var(--space-1); display: none; }
.form__field--error .form__error { display: block; }
.form__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.form__status { color: var(--color-success); font-weight: var(--weight-semibold); font-size: var(--fs-body-sm); display: none; }
.form__status.is-visible { display: inline-flex; align-items: center; gap: var(--space-2); }
.form__status svg { width: 18px; height: 18px; }
@media (max-width: 768px) { .form { grid-template-columns: 1fr; } }

.form-helper { font-size: var(--fs-body-sm); color: var(--text-on-paper-muted); margin: 0; }
.form-helper a { color: var(--text-accent); }

/* ---------- 22. World map ---------- */
.world-map { color: var(--color-paper); }
.world-map svg { width: 100%; height: auto; max-width: 48rem; color: inherit; }
.world-map__dots { fill: currentColor; opacity: 0.45; }
.world-map__pins text { font-family: var(--font-mono); font-size: 12px; fill: currentColor; }
.pin { animation: pin-pulse 1.8s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.pin circle { transform-origin: center; transform-box: fill-box; }
.pin--hq { animation-delay: 0s; }
@keyframes pin-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .pin { animation: none; } }
.world-map__caption { margin-top: var(--space-5); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-on-paper-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* ---------- 23. App store badges ---------- */
.store-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.store-badge { display: inline-flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border: 1px solid rgba(245, 244, 240, 0.18); border-radius: var(--radius-sm); background: rgba(245, 244, 240, 0.04); color: var(--text-on-ink); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.store-badge svg { width: 24px; height: 24px; }
.store-badge:hover { background: rgba(245, 244, 240, 0.12); color: var(--text-on-ink); }

/* ---------- 24. Legal pages (privacy + terms) ---------- */
.legal { max-width: var(--w-prose); margin-inline: auto; padding: var(--space-11) var(--w-gutter) var(--space-12); color: var(--text-on-paper); }
.legal h1 { font-family: var(--font-display); font-size: var(--fs-h1); margin: 0 0 var(--space-5); letter-spacing: var(--tracking-tight); }
.legal h2 { font-family: var(--font-display); font-size: var(--fs-h2); margin: var(--space-9) 0 var(--space-4); letter-spacing: var(--tracking-tight); }
.legal h3 { font-family: var(--font-display); font-size: var(--fs-h3); margin: var(--space-7) 0 var(--space-3); }
.legal h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: var(--weight-semibold); margin: var(--space-5) 0 var(--space-2); }
.legal p, .legal li { line-height: var(--lh-loose); }
.legal ul, .legal ol { padding-left: var(--space-7); margin: 0 0 var(--space-5); }
.legal ul li, .legal ol li { margin-bottom: var(--space-2); }
.legal .legal-meta { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-on-paper-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: var(--space-7); }
.legal .identity-card { padding: var(--space-7); background: var(--color-paper-2); border-radius: var(--radius-md); margin-bottom: var(--space-9); border: 1px solid var(--color-paper-edge); }
.legal .identity-card h2 { margin-top: 0; }
.legal .identity-card dl { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: 0; }
@media (min-width: 640px) { .legal .identity-card dl { grid-template-columns: 200px 1fr; gap: var(--space-3) var(--space-6); } }
.legal .identity-card dt { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--text-on-paper-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.legal .identity-card dd { margin: 0; }
.legal .toc { padding: var(--space-6); background: var(--color-paper-2); border-radius: var(--radius-md); margin-bottom: var(--space-9); border: 1px solid var(--color-paper-edge); display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 640px) { .legal .toc { grid-template-columns: 1fr 1fr; } }
.legal .toc a { font-family: var(--font-body); font-size: var(--fs-body-sm); }
.legal .toc .toc__heading { grid-column: 1 / -1; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--fs-mono); color: var(--color-gold); margin-bottom: var(--space-3); }

.legal-block { padding: var(--space-7) 0; border-top: 1px solid var(--color-paper-edge); }
.legal-block:first-of-type { border-top: 0; }
.legal-block__heading { font-family: var(--font-display); font-size: var(--fs-h2); margin: 0 0 var(--space-4); letter-spacing: var(--tracking-tight); display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.legal-block__num { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--color-gold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.legal-sdk { margin: var(--space-7) 0; padding: var(--space-7); background: var(--color-paper); border: 1px solid var(--color-paper-edge); border-radius: var(--radius-md); }
.legal-sdk__title { font-family: var(--font-display); font-size: var(--fs-h3); margin: 0 0 var(--space-4); display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.legal-sdk__title .legal-sdk__num { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--color-gold); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.legal-sdk dl { margin: 0; display: grid; gap: var(--space-3); }
.legal-sdk dt { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-on-paper); font-weight: var(--weight-semibold); margin-top: var(--space-4); }
.legal-sdk dt:first-of-type { margin-top: 0; }
.legal-sdk dd { margin: 0; line-height: var(--lh-loose); }
.legal-sdk dd a { color: var(--text-accent); word-break: break-word; }

.legal-table { width: 100%; border-collapse: collapse; margin: var(--space-5) 0; font-size: var(--fs-body-sm); }
.legal-table th, .legal-table td { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-paper-edge); text-align: left; vertical-align: top; }
.legal-table th { background: var(--color-paper-2); font-weight: var(--weight-semibold); }
.legal-table td code { font-family: var(--font-mono); background: var(--color-paper-2); padding: 2px 6px; border-radius: var(--radius-xs); font-size: 0.8125rem; word-break: break-word; }

/* Legal page hero (slim) */
.legal-hero { padding: var(--space-11) var(--w-gutter) var(--space-7); background: var(--color-ink); color: var(--text-on-ink); }
.legal-hero__inner { max-width: var(--w-prose); margin-inline: auto; }
.legal-hero .eyebrow { color: var(--text-gold); margin-bottom: var(--space-4); }
.legal-hero h1 { font-family: var(--font-display); font-size: var(--fs-h1); margin: 0 0 var(--space-4); color: var(--text-on-ink); letter-spacing: var(--tracking-tight); }
.legal-hero p { color: var(--text-on-ink-muted); margin: 0; font-size: var(--fs-body-lg); }

/* ---------- 25. 404 ---------- */
.error-band { text-align: center; display: grid; place-items: center; gap: var(--space-5); padding-block: var(--space-12); min-height: 80vh; }
.error-band__art { width: 240px; height: 240px; display: grid; place-items: center; background: rgba(245, 244, 240, 0.06); border-radius: var(--radius-blob); font-size: 5rem; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.45)); }
.error-band__title { font-family: var(--font-display); font-size: var(--fs-display-2); font-weight: var(--weight-display); max-width: 36rem; margin: var(--space-3) 0; letter-spacing: var(--tracking-tight); }
.error-band__body { max-width: 36rem; color: var(--text-on-ink-muted); font-size: var(--fs-body-lg); }

/* ---------- 26. Misc / print ---------- */
.band--coral-soft { background: var(--color-coral-soft); color: var(--text-on-paper); }

.kbd { font-family: var(--font-mono); padding: 2px 6px; border-radius: var(--radius-xs); background: var(--color-paper-2); border: 1px solid var(--color-paper-edge); font-size: 0.8125rem; }

@media print {
  .site-header, .site-footer, .marquee, .btn, .parallax-panel, .scroll-progress { display: none !important; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
}

/* ---------- 27. Responsive type locks ---------- */
@media (min-width: 1280px) {
  .hero { min-height: 100svh; }
}
@media (max-width: 480px) {
  .hero__cta-row { flex-direction: column; align-items: stretch; }
  .hero__cta-row .btn { width: 100%; }
  .site-header { padding: 0 var(--space-4); }
  .region-tag { font-size: var(--fs-mono); }
}

@media (min-width: 1600px) {
  .container { max-width: var(--w-wide); }
}