/* ==========================================================================
   Tantoryn AI — Public Website v2
   Design language: dark/charcoal shell, restrained light content surface,
   gold accent, wide editorial grid. No frameworks, no build step.
   ========================================================================== */

:root {
  --color-dark:       #0f1115;
  --color-dark-soft:  #171a20;
  --color-dark-line:  rgba(255,255,255,0.08);
  --color-gold:       #D5A65A;
  --color-gold-light: #E8C97F;
  /* Darkened from the original #b8893a brand gold-dim: same hue/brand
     family, deepened so gold text on the light content surfaces clears
     WCAG AA (4.5:1) for normal text; gold-light on dark surfaces is
     unaffected and keeps the original accent. */
  --color-gold-dim:   #826129;
  --color-white:      #ffffff;
  --color-off-white:  #f7f6f3;
  --color-text:       #1c1d20;
  --color-muted:      #5b5e66;
  --color-border:     #e6e4de;
  --color-accent-bg:  #fbf7ef;

  --font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --radius:    10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(20,20,20,0.06);
  --shadow-md: 0 8px 28px rgba(20,20,20,0.10);

  --container-width: 1320px;
  --section-pad: 96px;
  --section-pad-mobile: 56px;
  --reveal-gap: 48px;
  --side-gutter-min: 32px;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  font-family: var(--font-main);
  color: var(--color-text);
  background-color: var(--color-dark);
  /* Plain url() first as the universal fallback (kept in the cascade by
     browsers that fail to parse image-set() at all); image-set() then
     lets supporting browsers pick AVIF or WebP — both a fraction of the
     PNG's size — over the same full-quality PNG as a last resort. */
  background-image: url("/assets/img/tantoryn-ai-toryn-coin-hero-dark.png");
  background-image: -webkit-image-set(
    url("/assets/img/optimized/tantoryn-ai-toryn-coin-hero-dark.avif") 1x type("image/avif"),
    url("/assets/img/optimized/tantoryn-ai-toryn-coin-hero-dark.webp") 1x type("image/webp"),
    url("/assets/img/tantoryn-ai-toryn-coin-hero-dark.png") 1x type("image/png")
  );
  background-image: image-set(
    url("/assets/img/optimized/tantoryn-ai-toryn-coin-hero-dark.avif") type("image/avif"),
    url("/assets/img/optimized/tantoryn-ai-toryn-coin-hero-dark.webp") type("image/webp"),
    url("/assets/img/tantoryn-ai-toryn-coin-hero-dark.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
@media (max-width: 780px) {
  /* background-attachment: fixed has a long history of jank on mobile
     Safari/Chrome; the dark layer stays the persistent site background,
     it just scrolls with the page instead of staying pinned below 780px. */
  body {
    background-attachment: scroll;
    /* `cover` on a wide (1.78:1) image against a narrow/tall mobile
       viewport forces the crop axis to height, leaving only a thin,
       largely blank vertical sliver of the artwork visible. Match the
       same non-cropping, fit-to-width treatment already used for the
       light content backgrounds: full width, natural aspect ratio,
       anchored under the header instead of zoomed/cropped. */
    background-size: 100% auto;
    background-position: top center;
  }
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
h1, h2, h3 { line-height: 1.22; font-weight: 700; letter-spacing: -0.01em; }
p { color: var(--color-text); }
button { font-family: inherit; }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--color-gold-dim);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-gold);
  color: var(--color-dark);
  padding: 10px 16px;
  z-index: 1000;
  font-weight: 600;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}

/* ---- Container ---- */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---- Sections ----
   .section / .page-hero / .article are the light content surfaces: opaque,
   carry the light artwork, and scroll normally with the page. The dark
   body background (persistent, fixed) is only ever visible in the gap
   this margin opens up between them, and now also in the side gutters
   left where the panel's own max-width caps it short of the viewport —
   never behind readable text. */
.section, .page-hero, .article {
  max-width: min(var(--container-width), calc(100% - var(--side-gutter-min) * 2));
  background-color: var(--color-accent-bg);
  background-image: url("/assets/img/tantoryn-ai-content-background-light.png");
  background-image: -webkit-image-set(
    url("/assets/img/optimized/tantoryn-ai-content-background-light.avif") 1x type("image/avif"),
    url("/assets/img/optimized/tantoryn-ai-content-background-light.webp") 1x type("image/webp"),
    url("/assets/img/tantoryn-ai-content-background-light.png") 1x type("image/png")
  );
  background-image: image-set(
    url("/assets/img/optimized/tantoryn-ai-content-background-light.avif") type("image/avif"),
    url("/assets/img/optimized/tantoryn-ai-content-background-light.webp") type("image/webp"),
    url("/assets/img/tantoryn-ai-content-background-light.png") type("image/png")
  );
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}
main > .section,
main > .page-hero,
main > .article {
  margin: var(--reveal-gap) auto;
}
.section, .page-hero { padding: var(--section-pad) 0; }
.page-hero { padding-top: 64px; padding-bottom: 56px; }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold-dim);
  margin-bottom: 14px;
}
.page-heading { font-size: clamp(32px, 4vw, 46px); margin-bottom: 16px; }
.page-lead { font-size: 19px; color: var(--color-muted); max-width: 760px; }

.section-head { max-width: 780px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 12px; }
.section-lead { font-size: 17px; color: var(--color-muted); }
.section-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.section-head-row h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 8px; }

/* ---- Navigation ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-dark);
  border-bottom: 1px solid var(--color-dark-line);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-logo-img { filter: brightness(0) invert(1); flex-shrink: 0; }
.nav-brand { font-size: 17px; font-weight: 700; color: var(--color-white); letter-spacing: 0.01em; }

.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; }
.nav-link {
  color: rgba(255,255,255,0.72);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav-link:hover { color: var(--color-white); background: rgba(255,255,255,0.07); }
.nav-link.is-active { color: var(--color-gold-light); }

.nav-more { position: relative; }
.nav-more-btn {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,0.72);
  font-size: 14px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--radius);
}
.nav-more-btn:hover { color: var(--color-white); background: rgba(255,255,255,0.07); }
.nav-more-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--color-dark-soft);
  border: 1px solid var(--color-dark-line);
  border-radius: var(--radius);
  padding: 6px;
  min-width: 200px;
  box-shadow: var(--shadow-md);
  flex-direction: column;
}
.nav-more-menu.is-open { display: flex; }
.nav-more-menu a { color: rgba(255,255,255,0.78); font-size: 14px; padding: 8px 10px; border-radius: 6px; }
.nav-more-menu a:hover { background: rgba(255,255,255,0.07); color: #fff; }

.nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.lang-switcher { display: flex; align-items: center; gap: 2px; }
.lang-btn {
  background: none; border: 1px solid transparent;
  color: rgba(255,255,255,0.5);
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
  padding: 5px 9px; border-radius: var(--radius);
}
.lang-btn:hover { color: #fff; border-color: var(--color-dark-line); }
.lang-btn.active { color: var(--color-gold-light); border-color: rgba(213,166,90,0.4); }

.btn-telegram {
  background: var(--color-gold);
  color: var(--color-dark);
  font-size: 13px; font-weight: 700;
  padding: 9px 16px; border-radius: 100px;
  white-space: nowrap;
}
.btn-telegram:hover { background: var(--color-gold-light); }

.mobile-menu-btn {
  display: none;
  background: none; border: none; color: #fff;
  font-size: 22px; cursor: pointer; padding: 4px 8px;
}

.nav-mobile-overlay {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: var(--color-dark-soft);
  padding: 16px 20px 24px;
  border-bottom: 1px solid var(--color-dark-line);
}
.nav-mobile-overlay.is-open { display: flex; }
.nav-mobile-overlay a {
  color: rgba(255,255,255,0.85);
  padding: 12px 6px;
  font-size: 15px;
  border-bottom: 1px solid var(--color-dark-line);
}
.mobile-lang { display: flex; gap: 8px; padding: 12px 6px; }

@media (max-width: 980px) {
  .nav-links { display: none; }
  /* Below 980px the top-right slot swaps the Telegram CTA for the
     EN/RU/UZ language switcher (kept from the desktop nav-right, just
     no longer hidden) so language is reachable without opening the
     menu; Telegram itself moves into .nav-mobile-overlay only. */
  .nav-right .btn-telegram { display: none; }
  .mobile-menu-btn { display: block; }
}

/* Below ~980px only the logo, Telegram button and hamburger remain in
   .nav-inner. RU/UZ button labels ("Telegram-канал" / "Telegram kanali")
   run longer than the EN default and, together with the brand wordmark,
   overflowed the 390px reference width by ~10-11px. Tighten spacing and
   drop the wordmark text (the logo mark alone still identifies the brand)
   before that point is reached, in all three languages equally. */
@media (max-width: 460px) {
  .nav .nav-inner { gap: 10px; padding-left: 16px; padding-right: 16px; }
  .nav-brand { display: none; }
  .btn-telegram { padding: 8px 12px; font-size: 12px; }
}

/* ---- Hero (home) ----
   No image of its own: the persistent dark layer comes from body
   (background-attachment: fixed), the hero only adds a readability
   scrim over it so the artwork's baked-in wordmark never collides
   with the live hero copy. */
.hero {
  background-color: transparent;
  background-image: linear-gradient(100deg, rgba(15,17,21,0.96) 0%, rgba(15,17,21,0.92) 45%, rgba(15,17,21,0.62) 72%, rgba(15,17,21,0.22) 100%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--color-white);
  padding: 100px 0 64px;
}
.hero-inner { max-width: 900px; }
.hero .eyebrow { color: var(--color-gold-light); }
.hero-title { font-size: clamp(42px, 6vw, 68px); color: #fff; margin-bottom: 18px; }
.hero-subhead { font-size: clamp(18px, 2.4vw, 24px); color: rgba(255,255,255,0.88); font-weight: 500; margin-bottom: 18px; }
.hero-supporting { font-size: 17px; color: rgba(255,255,255,0.62); max-width: 760px; margin-bottom: 36px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.btn-primary {
  background: var(--color-gold);
  color: var(--color-dark);
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 100px;
  display: inline-block;
}
.btn-primary:hover { background: var(--color-gold-light); }
.btn-secondary {
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 100px;
  border: 1px solid var(--color-dark-line);
  display: inline-block;
}
.btn-secondary:hover { background: rgba(255,255,255,0.15); }
.btn-ghost {
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 12px;
  display: inline-block;
}
.btn-ghost:hover { color: #fff; }

/* light-surface variants (used outside dark hero) */
.section .btn-secondary, .page-hero .btn-secondary {
  background: var(--color-off-white);
  color: var(--color-text);
  border-color: var(--color-border);
}
.section .btn-secondary:hover, .page-hero .btn-secondary:hover { background: var(--color-accent-bg); }

/* ---- Status strip ---- */
.status-strip { background: var(--color-dark-soft); border-bottom: 1px solid var(--color-dark-line); }
.status-strip-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 22px 28px;
}
.status-chip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 28px;
  border-right: 1px solid var(--color-dark-line);
}
.status-chip:last-child { border-right: none; }
.status-chip-label { font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; }
.status-chip-value { font-size: 15px; font-weight: 700; color: var(--color-gold-light); }
@media (max-width: 780px) {
  .status-chip { border-right: none; border-bottom: 1px solid var(--color-dark-line); padding: 10px 0; width: 100%; }
}

/* ---- Prose ---- */
.prose-grid { display: grid; gap: 20px; max-width: 900px; }
.prose-grid p, .prose-stack p { font-size: 17px; color: var(--color-muted); }
.prose-stack { display: grid; gap: 36px; max-width: 820px; }
.content-block h2 { font-size: 22px; margin-bottom: 12px; }
.content-block p { margin-bottom: 12px; font-size: 16.5px; color: var(--color-muted); }
.legal-stack { max-width: 900px; }

/* ---- Pipeline (architecture) ---- */
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.pipeline-step {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  position: relative;
}
.step-num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-gold-light);
  font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.pipeline-step h3 { font-size: 16px; margin-bottom: 8px; }
.pipeline-step p { font-size: 14.5px; color: var(--color-muted); }
@media (max-width: 1080px) {
  .pipeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pipeline { grid-template-columns: 1fr; }
}

/* ---- Card grids ---- */
.card-grid { display: grid; gap: 20px; }
.card-grid-3 { grid-template-columns: repeat(3, 1fr); }
.card-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 980px) { .card-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .card-grid-3, .card-grid-2 { grid-template-columns: 1fr; } }

.why-card, .topic-card, .contact-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.why-card h3, .topic-card h3, .contact-card h3 { font-size: 17px; margin-bottom: 10px; }
.why-card p, .topic-card p, .contact-card p { font-size: 15px; color: var(--color-muted); }

.contact-card { display: flex; flex-direction: column; gap: 14px; }
.contact-card p { flex: 1; }
.contact-soon { font-size: 13px; color: var(--color-muted); font-style: italic; }

/* ---- Checklist ---- */
.checklist { display: grid; gap: 14px; max-width: 900px; }
.checklist li {
  font-size: 16px; color: var(--color-muted);
  padding-left: 28px; position: relative;
}
.checklist li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-gold);
}
.checklist-plain li::before { background: var(--color-muted); }
.link-arrow { display: inline-block; margin-top: 24px; font-weight: 700; color: var(--color-gold-dim); }
.link-arrow:hover { color: var(--color-gold); }

/* ---- Proof grid ---- */
.proof-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 32px; }
.proof-item { display: flex; gap: 14px; align-items: flex-start; }
.proof-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-gold); margin-top: 7px; flex-shrink: 0; }
.proof-item h3 { font-size: 16px; margin-bottom: 4px; }
.proof-item p { font-size: 14.5px; color: var(--color-muted); }
@media (max-width: 780px) { .proof-grid { grid-template-columns: 1fr; } }

/* ---- News cards ---- */
.news-card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: box-shadow 0.15s, transform 0.15s;
}
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.news-card-cat {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--color-gold-dim);
}
.news-card h3 { font-size: 18px; }
.news-card p { font-size: 14.5px; color: var(--color-muted); flex: 1; }
.news-card-date { font-size: 13px; color: var(--color-muted); }

/* ---- Final CTA ---- */
.final-cta { text-align: center; max-width: 720px; margin: 0 auto; }
.final-cta h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 12px; }
.final-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }

/* ---- Content layout (Technology / with TOC) ---- */
.content-layout { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; }
.toc { position: sticky; top: 92px; }
.toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 12px; }
.toc ul { display: grid; gap: 8px; }
.toc a { font-size: 14px; color: var(--color-muted); }
.toc a:hover { color: var(--color-text); }
.content-main { display: grid; gap: 44px; }
.content-block { scroll-margin-top: 92px; }
@media (max-width: 900px) {
  .content-layout { grid-template-columns: 1fr; }
  .toc { position: static; border-bottom: 1px solid var(--color-border); padding-bottom: 24px; }
}

.callout {
  background: var(--color-dark);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
}
.callout h2 { color: var(--color-gold-light); font-size: 22px; margin-bottom: 12px; }
.callout p { color: rgba(255,255,255,0.75); font-size: 16.5px; }
/* .link-arrow's default color is tuned for AA contrast on the light
   section surfaces it normally sits on (see --color-gold-dim above); on
   .callout's dark surface that same darkened gold would under-contrast,
   so it gets the existing lighter gold used elsewhere on dark surfaces. */
.callout .link-arrow { color: var(--color-gold-light); }
.callout .link-arrow:hover { color: var(--color-gold); }
.callout-center { max-width: 820px; margin: 0 auto; text-align: center; }

/* ---- Status page ---- */
.status-field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.status-field {
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
}
.status-field-label { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 6px; }
.status-field-value { font-size: 19px; font-weight: 700; color: var(--color-gold-dim); }
@media (max-width: 780px) { .status-field-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .status-field-grid { grid-template-columns: 1fr; } }

.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.roadmap-col { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; }
.roadmap-col h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-gold-dim); margin-bottom: 16px; }
.roadmap-col li { font-size: 15px; color: var(--color-muted); padding: 8px 0; border-top: 1px solid var(--color-border); }
.roadmap-col li:first-child { border-top: none; padding-top: 0; }
@media (max-width: 900px) { .roadmap-grid { grid-template-columns: 1fr; } }

/* ---- Ecosystem ---- */
.ecosystem-hero { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.ecosystem-coin { flex-shrink: 0; }
.fine-print { font-size: 14px; color: var(--color-muted); max-width: 820px; }

/* ---- Article ---- */
.article-inner { max-width: 760px; }
.article h1 { font-size: clamp(28px, 4vw, 40px); margin: 14px 0 10px; }
.article-meta { font-size: 14px; color: var(--color-muted); margin-bottom: 18px; }
.article-summary { font-size: 19px; color: var(--color-muted); margin-bottom: 28px; }
.article-body p { font-size: 17px; color: var(--color-text); margin-bottom: 18px; }
.article-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.article-related h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 10px; }
.article-related li { margin-bottom: 6px; }
.article-related a { color: var(--color-gold-dim); font-weight: 600; font-size: 15px; }
.article-related a:hover { color: var(--color-gold); }
.article > .container { padding-top: 48px; padding-bottom: 64px; }

/* ---- Reports (live MAIN/SHADOW virtual-trading reports) ---- */
.reports-mode-callout h2 { letter-spacing: 0.04em; font-size: 15px; text-transform: uppercase; }

.reports-app { max-width: 760px; }

.reports-tabs { display: inline-flex; gap: 4px; background: var(--color-off-white); border: 1px solid var(--color-border); border-radius: 100px; padding: 4px; margin-bottom: 14px; }
.reports-tab {
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-weight: 700;
  font-size: 14px;
  padding: 9px 22px;
  border-radius: 100px;
  cursor: pointer;
}
.reports-tab.is-active { background: var(--color-dark); color: var(--color-gold-light); }
.reports-tab-desc { font-size: 14.5px; color: var(--color-muted); max-width: 620px; margin-bottom: 28px; }
.reports-tab-desc[hidden] { display: none; }

.reports-scopes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.reports-scope-btn {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 100px;
  cursor: pointer;
}
.reports-scope-btn:hover { border-color: var(--color-gold-dim); }
.reports-scope-btn.is-active { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-dark); }

.reports-custom-form { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-bottom: 22px; }
.reports-custom-form[hidden] { display: none; }
.reports-custom-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--color-muted); font-weight: 600; }
.reports-custom-form input[type="date"] {
  font-family: inherit;
  font-size: 14.5px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  background: var(--color-white);
}
.reports-custom-form button { border: 0; cursor: pointer; }

.reports-status { min-height: 22px; font-size: 14.5px; color: var(--color-gold-dim); font-weight: 600; margin-bottom: 18px; }
.reports-status[data-state="error"] { color: #b3401f; }
.reports-status[data-state="empty"] { color: var(--color-muted); font-weight: 500; }

.reports-result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 14px; }
.reports-result-item {
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.reports-result-item dt { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 6px; }
.reports-result-item dd { font-size: 18px; font-weight: 700; color: var(--color-gold-dim); }
@media (max-width: 780px) { .reports-result-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .reports-result-grid { grid-template-columns: 1fr; } }

.reports-floor-note { font-size: 13.5px; color: var(--color-muted); }
.reports-freshness { font-size: 12.5px; color: var(--color-muted); margin-top: 4px; font-style: italic; }

/* ---- Home: evidence/Reports strip ---- */
.evidence-strip { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.evidence-strip .eyebrow { color: var(--color-gold-light); }
.evidence-strip-copy h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: 10px; }
.evidence-strip-copy .btn-primary { margin-top: 20px; display: inline-block; }
.evidence-field-grid { display: grid; gap: 14px; }
.evidence-field {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.evidence-field-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gold-light); margin-bottom: 4px; }
.evidence-field-value { font-size: 14.5px; color: rgba(255,255,255,0.85); }
@media (max-width: 900px) { .evidence-strip { grid-template-columns: 1fr; } }

/* ---- Technology: layered architecture (Input / Responsibility / Output / Safety boundary) ---- */
.layer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.layer-field {
  background: var(--color-off-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.layer-field-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gold-dim); margin-bottom: 4px; }
.layer-field-value { font-size: 14px; color: var(--color-text); line-height: 1.4; }
@media (max-width: 900px) { .layer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .layer-grid { grid-template-columns: 1fr; } }

/* ---- Status: capability maturity matrix ---- */
.maturity-table-wrap { overflow-x: auto; }
.maturity-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.maturity-table th, .maturity-table td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--color-border); }
.maturity-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); }
.maturity-badge { display: inline-block; padding: 4px 12px; border-radius: 100px; font-size: 12.5px; font-weight: 700; }
.maturity-badge-operating { background: #e4f3ec; color: #146c43; }
.maturity-badge-active_r_and_d { background: #fdf1dc; color: var(--color-gold-dim); }
.maturity-badge-future { background: #eef0f3; color: var(--color-muted); }
.maturity-badge-disabled { background: #fbe7e3; color: #b3401f; }
.maturity-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px; font-size: 13.5px; color: var(--color-muted); }
.maturity-legend span { display: inline-flex; align-items: center; gap: 8px; }

/* ---- Research: evidence ladder ---- */
.evidence-ladder { display: grid; gap: 0; max-width: 820px; }
.evidence-ladder-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
}
.evidence-ladder-step:first-child { border-top: none; }
.evidence-ladder-num {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-gold-light);
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.evidence-ladder-step h3 { font-size: 16px; margin-bottom: 4px; }
.evidence-ladder-step p { font-size: 14.5px; color: var(--color-muted); }

/* ---- About: principles triad ---- */
.principles-note { font-size: 14px; color: var(--color-muted); margin-top: 20px; max-width: 820px; }

/* ---- Footer ---- */
.footer { background: var(--color-dark); color: rgba(255,255,255,0.7); }
.footer-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  padding: 64px 0 40px;
  border-bottom: 1px solid var(--color-dark-line);
}
.footer-brand-col { display: flex; flex-direction: column; gap: 14px; }
.footer-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 16px; }
.footer-logo { filter: brightness(0) invert(1); }
.footer-tagline { font-size: 14px; color: rgba(255,255,255,0.55); max-width: 320px; }
.footer-telegram { display: inline-block; font-size: 13px; font-weight: 700; color: var(--color-gold-light); }
.footer-col h3 { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.45); margin-bottom: 14px; }
.footer-col ul { display: grid; gap: 9px; }
.footer-col a { font-size: 14px; color: rgba(255,255,255,0.72); }
.footer-col a:hover { color: #fff; }
.footer-bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 20px 0 32px;
  font-size: 12.5px; color: rgba(255,255,255,0.45);
}
.footer-disclaimer { max-width: 560px; text-align: right; }
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-disclaimer { text-align: left; }
}

/* ---- Root language redirector ---- */
.root-redirect { display: flex; align-items: center; justify-content: center; min-height: 80vh; background: var(--color-dark); }
.root-redirect-inner { text-align: center; color: #fff; }
.root-redirect-inner img { margin: 0 auto 20px; filter: brightness(0) invert(1); }
.root-redirect-inner h1 { font-size: 28px; margin-bottom: 8px; }
.root-redirect-inner p { color: rgba(255,255,255,0.6); margin-bottom: 24px; }
.root-choices { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.root-choice {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--color-dark-line);
  color: #fff;
  padding: 12px 22px;
  border-radius: 100px;
  font-weight: 600;
}
.root-choice:hover { background: var(--color-gold); color: var(--color-dark); border-color: var(--color-gold); }

/* ---- Responsive: page-level scaling ---- */
@media (max-width: 640px) {
  :root { --section-pad: 56px; --reveal-gap: 28px; --side-gutter-min: 16px; }
  .container { padding: 0 20px; }
}