/* ============================================
   ENTOMO — White + Red + Collage Design System
   ============================================ */

/* --- CSS Variables / Design Tokens --- */
:root {
  /* Colors */
  --bg-primary: #f7f5f0;
  --bg-white: #ffffff;
  --bg-alt: #f0f0f0;
  --bg-dark: #1a1a1a;
  --bg-red: #c41e1e;
  --bg-red-dark: #a31919;
  
  --text-primary: #1a1a1a;
  --text-body: #333333;
  --text-muted: rgba(0, 0, 0, 0.45);
  --text-white: #ffffff;
  --text-red: #c41e1e;
  
  --accent: #c41e1e;
  --accent-hover: #a31919;
  --accent-light: rgba(196, 30, 30, 0.08);
  
  --border: #e5e5e5;
  --border-light: #eeeeee;
  --border-red: #c41e1e;
  
  /* Typography */
  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
  
  /* Type Scale — fluid clamp */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.875rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --text-xl: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  --text-2xl: clamp(1.8rem, 1.4rem + 2vw, 2.5rem);
  --text-3xl: clamp(2.2rem, 1.6rem + 3vw, 3.5rem);
  --text-hero: clamp(2.8rem, 2rem + 4vw, 5rem);
  
  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  
  /* Layout */
  --max-width: 1200px;
  --content-width: 720px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 20px;
  --radius-full: 9999px;
  
  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-med: 300ms;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-body);
  letter-spacing: 0.01em;
  background: linear-gradient(135deg, #f7f5f0 0%, #ede9e3 50%, #f0ece5 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

@supports (-webkit-touch-callout: none) {
  body {
    background-attachment: scroll;
  }
}

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

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

a:hover {
  color: var(--accent-hover);
}

ul, ol { list-style: none; }

/* --- Utility Classes --- */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.content-width {
  max-width: var(--content-width);
}

.section {
  padding: var(--space-20) 0;
}

.section--red {
  background: rgba(196, 30, 30, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-white);
}

.section--dark {
  background: rgba(26, 26, 26, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-white);
  border-radius: 0;
}

.section--alt {
  background: rgba(240, 240, 240, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.text-red { color: var(--text-red); }
.text-muted { color: var(--text-muted); }
.text-white { color: var(--text-white); }
.text-center { text-align: center; }
.text-upper { text-transform: uppercase; }

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  font-weight: 400; /* Bebas Neue is already bold-looking */
}

.section--red h1, .section--red h2, .section--red h3,
.section--dark h1, .section--dark h2, .section--dark h3 {
  color: var(--text-white);
}

h1 { font-size: var(--text-hero); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p {
  max-width: 70ch;
  margin-bottom: var(--space-4);
}

.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

/* --- Navigation --- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 240, 0.75);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: var(--space-4) 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text-primary);
}

.nav__logo svg {
  width: 36px;
  height: 36px;
}

.nav__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-body);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
  position: relative;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width var(--duration-fast) var(--ease-out);
}

.nav__link:hover {
  color: var(--accent);
}

.nav__link:hover::after {
  width: 100%;
}

.nav__link--active {
  color: var(--accent);
}

.nav__link--active::after {
  width: 100%;
}

/* Mobile nav toggle */
.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-2);
}

.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  margin: 5px 0;
  transition: all var(--duration-fast) var(--ease-out);
}

@media (max-width: 768px) {
  .nav__toggle { display: block; }
  
  .nav__links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    padding: var(--space-6);
    gap: var(--space-5);
  }
  
  .nav__links.active {
    display: flex;
  }
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-8);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
  text-decoration: none;
  line-height: 1.2;
}

.btn--red {
  background: var(--accent);
  color: var(--text-white);
  border-color: var(--accent);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(196, 30, 30, 0.25);
}

.btn--red:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--text-white);
}

.btn--outline {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--accent);
  border-color: rgba(196, 30, 30, 0.2);
  border-radius: var(--radius-md);
}

.btn--outline:hover {
  background: var(--accent);
  color: var(--text-white);
}

.btn--white-outline {
  background: transparent;
  color: var(--text-white);
  border-color: var(--text-white);
}

.btn--white-outline:hover {
  background: var(--text-white);
  color: var(--accent);
}

.btn--sm {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5);
}

/* --- Hero Section --- */
.hero {
  padding: var(--space-24) 0 var(--space-16);
  position: relative;
}

.hero__content {
  max-width: 900px;
}

.hero__title {
  font-size: var(--text-hero);
  line-height: 0.95;
  margin-bottom: var(--space-6);
}

.hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  color: var(--text-muted);
  text-transform: none;
  font-weight: 400;
  max-width: 560px;
  margin-bottom: var(--space-8);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* --- Collage Image Container --- */
.collage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
}

.collage--tilt {
  transform: rotate(-1.5deg);
}

.collage--tilt-right {
  transform: rotate(1.5deg);
}

@media (max-width: 768px) {
  .collage--tilt,
  .collage--tilt-right {
    transform: none;
  }
}

.collage__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Duotone red effect via CSS */
  filter: grayscale(100%) contrast(1.2) brightness(0.9);
}

.collage--dark-bg .collage__image,
.collage--red-bg .collage__image {
  mix-blend-mode: multiply;
}

.collage__overlay {
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0.45;
  pointer-events: none;
}

.collage__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
  opacity: 0.3;
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* Halftone dots effect */
.collage__halftone {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(0,0,0,0.15) 1px, transparent 1px);
  background-size: 4px 4px;
  pointer-events: none;
  opacity: 0.5;
}

/* Tape marks */
.collage__tape {
  position: absolute;
  width: 40px;
  height: 16px;
  background: var(--accent);
  opacity: 0.7;
}

.collage__tape--tl { top: 8px; left: 8px; transform: rotate(-5deg); }
.collage__tape--tr { top: 8px; right: 8px; transform: rotate(5deg); }
.collage__tape--bl { bottom: 8px; left: 8px; transform: rotate(3deg); }
.collage__tape--br { bottom: 8px; right: 8px; transform: rotate(-3deg); }

/* Torn edge (CSS clip-path) */
.collage--torn {
  clip-path: polygon(
    0% 2%, 3% 0%, 7% 3%, 11% 0%, 15% 2%, 19% 0%, 23% 3%, 27% 1%, 
    31% 0%, 35% 2%, 39% 0%, 43% 3%, 47% 1%, 51% 0%, 55% 2%, 59% 0%, 
    63% 3%, 67% 1%, 71% 0%, 75% 2%, 79% 0%, 83% 3%, 87% 1%, 91% 0%, 
    95% 2%, 100% 0%,
    100% 98%, 97% 100%, 93% 97%, 89% 100%, 85% 98%, 81% 100%, 77% 97%, 
    73% 99%, 69% 100%, 65% 98%, 61% 100%, 57% 97%, 53% 99%, 49% 100%, 
    45% 98%, 41% 100%, 37% 97%, 33% 99%, 29% 100%, 25% 98%, 21% 100%, 
    17% 97%, 13% 99%, 9% 100%, 5% 98%, 0% 100%
  );
}

/* Dark bg collage container (for images to pop on white page) */
.collage--dark-bg {
  background: var(--bg-dark);
}

.collage--red-bg {
  background: var(--bg-red);
}

/* --- Category Tags (Sticker style) --- */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid rgba(196, 30, 30, 0.2);
  color: var(--accent);
  background: rgba(196, 30, 30, 0.06);
  border-radius: var(--radius-pill);
  transform: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.tag:hover {
  background: var(--accent);
  color: var(--text-white);
}

.tag--filled {
  background: var(--accent);
  color: var(--text-white);
  border-color: var(--accent);
}

.tag--white {
  border-color: var(--text-white);
  color: var(--text-white);
  background: transparent;
}

/* --- Article Cards --- */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .cards-grid {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  transition: all var(--duration-med) var(--ease-out);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.card:hover {
  border-color: rgba(196, 30, 30, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #2a1010;
}

.card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-med) var(--ease-out);
}

.card:hover .card__image-wrap img {
  transform: scale(1.03);
}

.card__image-overlay {
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0.08;
  pointer-events: none;
}

.card__body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: var(--space-3);
}

.card__title a {
  color: inherit;
  text-decoration: none;
}

.card__title a:hover {
  color: var(--accent);
}

.card__excerpt {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

.card__footer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.card__read-more {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- Featured Article (Large Card) --- */
.featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  padding: var(--space-12) 0;
}

@media (max-width: 768px) {
  .featured {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

.featured__image {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-dark);
  aspect-ratio: 4/3;
}

.featured__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.featured__content {
  max-width: 520px;
}

.featured__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}

.featured__title {
  font-size: var(--text-3xl);
  margin-bottom: var(--space-4);
}

.featured__excerpt {
  font-size: var(--text-base);
  color: var(--text-body);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.featured--reverse {
  direction: rtl;
}

.featured--reverse > * {
  direction: ltr;
}

@media (max-width: 768px) {
  .featured--reverse {
    direction: ltr;
  }
}

/* --- Stats Bar --- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  text-align: center;
  padding: var(--space-12) 0;
}

.stats--5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1024px) {
  .stats--5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }
  .stats--5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .stats--5 {
    grid-template-columns: 1fr;
  }
}

.stat__number {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  color: var(--text-white);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.stat__growth {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.stat__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.75);
}

/* --- Newsletter Section --- */
.newsletter {
  padding: var(--space-16) 0;
  text-align: center;
}

.newsletter h2 {
  color: var(--text-white);
  margin-bottom: var(--space-3);
}

.newsletter p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 auto var(--space-8);
  max-width: 500px;
}

.newsletter__form {
  display: flex;
  gap: var(--space-3);
  max-width: 460px;
  margin: 0 auto;
}

.newsletter__input {
  flex: 1;
  padding: var(--space-3) var(--space-5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.newsletter__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter__input:focus {
  border-color: var(--text-white);
}

.newsletter__btn {
  padding: var(--space-3) var(--space-6);
  background: var(--text-white);
  color: var(--accent);
  border: 1px solid var(--text-white);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.newsletter__btn:hover {
  background: transparent;
  color: var(--text-white);
}

@media (max-width: 500px) {
  .newsletter__form {
    flex-direction: column;
  }
}

/* --- Footer --- */
.footer {
  background: rgba(26, 26, 26, 0.95);
  color: rgba(255, 255, 255, 0.7);
  padding: var(--space-12) 0 var(--space-8);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

@media (max-width: 480px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
}

.footer__brand {
  max-width: 300px;
}

.footer__brand-name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--text-white);
  margin-bottom: var(--space-3);
}

.footer__brand p {
  font-size: var(--text-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}

.footer__col-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-white);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
  letter-spacing: 0.05em;
}

.footer__col a {
  display: block;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__col a:hover {
  color: var(--text-white);
}

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer__copyright {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
}

.footer__attribution a {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  transition: color var(--duration-fast) var(--ease-out);
}

.footer__attribution a:hover {
  color: var(--text-white);
}

/* --- Article Page --- */
.article-header {
  padding: var(--space-12) 0 var(--space-8);
}

.article-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}

.article-header__title {
  font-size: var(--text-3xl);
  max-width: 800px;
  margin-bottom: var(--space-5);
}

.article-header__info {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.article-header__author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.article-header__author-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}

.article-header__author-name {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.article-header__author-role {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.article-header__detail {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Article hero image */
.article-hero {
  position: relative;
  overflow: hidden;
  background: var(--bg-dark);
  margin-bottom: var(--space-12);
  max-height: clamp(200px, 50vw, 500px);
}

.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Article body */
.article-body {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-bottom: var(--space-16);
}

.article-body h2 {
  font-size: var(--text-2xl);
  margin: var(--space-10) 0 var(--space-5);
}

.article-body h3 {
  font-size: var(--text-xl);
  margin: var(--space-8) 0 var(--space-4);
}

.article-body p {
  font-size: var(--text-base);
  line-height: 1.75;
  margin-bottom: var(--space-5);
  color: var(--text-body);
}

.article-body ul, .article-body ol {
  margin: var(--space-4) 0 var(--space-5) var(--space-6);
}

.article-body li {
  font-size: var(--text-base);
  line-height: 1.75;
  margin-bottom: var(--space-2);
  list-style: disc;
  color: var(--text-body);
}

.article-body ol li {
  list-style: decimal;
}

/* Pull quote */
.pull-quote {
  border-left: 4px solid rgba(196, 30, 30, 0.5);
  padding: var(--space-5) var(--space-8);
  margin: var(--space-8) 0;
  background: rgba(196, 30, 30, 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
}

.pull-quote p {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 0;
  max-width: none;
}

.pull-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Red pull quote variant */
.pull-quote--red {
  background: var(--accent);
  border-left: none;
  padding: var(--space-8);
}

.pull-quote--red p {
  color: var(--text-white);
}

.pull-quote--red cite {
  color: rgba(255, 255, 255, 0.7);
}

/* Contact block */
.contact-block {
  margin-top: var(--space-10);
  padding: var(--space-6) var(--space-8);
  background: var(--bg-primary);
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
}
.contact-block__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-3);
}
.contact-block p {
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
}
.contact-block p:last-child {
  margin-bottom: 0;
}
.contact-block a {
  color: var(--accent);
  text-decoration: underline;
}

/* --- Related Articles --- */
.related {
  border-top: 1px solid var(--border);
  padding-top: var(--space-12);
}

.related h2 {
  margin-bottom: var(--space-8);
}

/* --- About Page --- */
.about-hero {
  padding: var(--space-16) 0 var(--space-12);
}

.about-hero h1 {
  margin-bottom: var(--space-6);
}

.about-hero p {
  font-size: var(--text-lg);
  color: var(--text-body);
  max-width: 680px;
  line-height: 1.6;
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12);
  padding: var(--space-12) 0;
}

@media (max-width: 768px) {
  .about-content {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.about-content h3 {
  margin-bottom: var(--space-4);
}

.about-content p {
  line-height: 1.7;
}

/* Founder card */
.founder-card {
  display: flex;
  gap: var(--space-8);
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

@media (max-width: 600px) {
  .founder-card {
    flex-direction: column;
    gap: var(--space-5);
  }
}

.founder-card__avatar {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  font-family: var(--font-display);
  font-size: 3rem;
}

.founder-card__info h4 {
  margin-bottom: var(--space-2);
}

.founder-card__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: var(--space-4);
}

.founder-card__bio {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.6;
}

/* Partners grid */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

@media (max-width: 768px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.partner-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  transition: all var(--duration-med) var(--ease-out);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.partner-card:hover {
  border-color: rgba(196, 30, 30, 0.2);
  transform: translateY(-2px);
}

.partner-card__icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--space-4);
  background: var(--accent-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.partner-card__icon svg {
  width: 24px;
  height: 24px;
  fill: var(--accent);
}

.partner-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--text-primary);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.partner-card__desc {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- Section Headers --- */
.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-4);
}

.section-header h2 {
  margin-bottom: 0;
}

.section-header__line {
  flex: 1;
  height: 2px;
  background: var(--border);
  margin: 0 var(--space-6);
  min-width: 40px;
}

/* --- Scroll Animations --- */
.fade-in {
  opacity: 0;
  transition: opacity 0.6s var(--ease-out);
}

.fade-in.visible {
  opacity: 1;
}

/* --- Decorative Elements --- */
.red-line {
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin-bottom: var(--space-5);
}

.red-line--center {
  margin-left: auto;
  margin-right: auto;
}

/* --- Print --- */
@media print {
  .nav, .footer, .newsletter { display: none; }
  body { background: white; color: black; }
}

/* ============================================
   ENTOMO v4 — New Page Styles
   ============================================ */

/* --- Video Page --- */
.video-hero {
  padding: var(--space-16) 0 var(--space-12);
}

.video-hero h1 {
  margin-bottom: var(--space-4);
}

.video-hero p {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 600px;
}

.featured-video {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bg-dark);
  overflow: hidden;
  cursor: pointer;
}

.featured-video__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  transition: background var(--duration-fast) var(--ease-out);
}

.featured-video:hover .featured-video__overlay {
  background: rgba(196, 30, 30, 0.5);
}

.featured-video__play {
  width: 80px;
  height: 80px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--duration-fast) var(--ease-out);
}

.featured-video:hover .featured-video__play {
  transform: scale(1.1);
}

.featured-video__play svg {
  width: 32px;
  height: 32px;
  fill: white;
  margin-left: 4px;
}

.featured-video__info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-6);
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  color: white;
}

.featured-video__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  color: white;
  margin-bottom: var(--space-2);
}

.featured-video__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.75;
}

/* Filter bar */
.filter-bar {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-6) 0;
}

.filter-bar .tag {
  cursor: pointer;
  transform: none;
}

.filter-bar .tag--active {
  background: var(--accent);
  color: var(--text-white);
  border-color: var(--accent);
}

/* Video grid */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
}

.video-card {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--duration-med) var(--ease-out);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.video-card:hover {
  border-color: rgba(196, 30, 30, 0.2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.video-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.video-card__thumb-play {
  width: 48px;
  height: 48px;
  background: var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  transition: transform var(--duration-fast) var(--ease-out);
}

.video-card:hover .video-card__thumb-play {
  transform: scale(1.1);
}

.video-card__thumb-play svg {
  width: 20px;
  height: 20px;
  fill: white;
  margin-left: 2px;
}

.video-card__duration {
  position: absolute;
  bottom: var(--space-2);
  right: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 2px 6px;
  z-index: 2;
}

.video-card__body {
  padding: var(--space-5);
}

.video-card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: var(--space-2);
}

.video-card__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.video-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* Stats bar (3-col variant) */
.stats--3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .stats--3 {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* --- Upload Page --- */
.upload-hero {
  padding: var(--space-16) 0 var(--space-10);
  text-align: center;
}

.upload-hero h1 {
  margin-bottom: var(--space-4);
}

.upload-hero p {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
}

/* Pipeline steps */
.pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-8) 0 var(--space-12);
  position: relative;
}

.pipeline::before {
  content: '';
  position: absolute;
  top: 56px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}

@media (max-width: 768px) {
  .pipeline {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
  .pipeline::before {
    display: none;
  }
}

@media (max-width: 480px) {
  .pipeline {
    grid-template-columns: 1fr;
  }
}

.pipeline__step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.pipeline__number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
}

.pipeline__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.pipeline__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

.pipeline__icons {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
}

/* Upload form */
.upload-form {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  max-width: 720px;
  margin: 0 auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.dropzone {
  border: 3px dashed var(--accent);
  padding: var(--space-12) var(--space-8);
  text-align: center;
  background: var(--accent-light);
  margin-bottom: var(--space-6);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.dropzone:hover {
  background: rgba(196, 30, 30, 0.12);
  border-color: var(--accent-hover);
}

.dropzone__icons {
  font-size: 2.5rem;
  margin-bottom: var(--space-4);
  display: flex;
  justify-content: center;
  gap: var(--space-4);
}

.dropzone__text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.dropzone__formats {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.form-group {
  margin-bottom: var(--space-5);
}

.form-group label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.form-input,
.form-select {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border);
  background: var(--bg-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-body);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.form-input:focus,
.form-select:focus {
  border-color: var(--accent);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.lang-toggle {
  display: flex;
  gap: 0;
  border: 2px solid var(--border);
  display: inline-flex;
}

.lang-toggle__btn {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--duration-fast) var(--ease-out);
}

.lang-toggle__btn--active {
  background: var(--accent);
  color: white;
}

/* Draft preview */
.draft-preview {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  position: relative;
  overflow: hidden;
  max-width: 720px;
  margin: var(--space-10) auto 0;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.draft-preview__watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 8rem);
  color: var(--accent);
  opacity: 0.1;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
}

.draft-preview__content {
  position: relative;
  z-index: 2;
}

.draft-preview__tag {
  display: inline-block;
  background: var(--accent);
  color: white;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-4);
}

/* --- Map Page --- */
.map-hero {
  padding: var(--space-16) 0 var(--space-10);
}

.map-hero h1 {
  margin-bottom: var(--space-4);
}

.map-hero p {
  font-size: var(--text-lg);
  color: var(--text-muted);
  max-width: 600px;
}

.map-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 900px) {
  .map-layout {
    grid-template-columns: 1fr;
  }
}

.map-container {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.map-container svg {
  width: 100%;
  height: auto;
}

.map-tooltip {
  position: fixed;
  background: var(--bg-dark);
  color: white;
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.map-tooltip--visible {
  opacity: 1;
}

.map-tooltip__count {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--accent);
  margin-right: var(--space-2);
}

/* Leaderboard sidebar */
.leaderboard {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.leaderboard__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--accent);
}

.leaderboard__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
}

.leaderboard__item:last-child {
  border-bottom: none;
}

.leaderboard__rank {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  width: 24px;
  flex-shrink: 0;
}

.leaderboard__country {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  flex: 1;
  margin-left: var(--space-2);
}

.leaderboard__count {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--accent);
  flex-shrink: 0;
}

/* --- Article Rating System --- */
.card__rating {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.rating-stars {
  display: inline-flex;
  gap: 2px;
}

.rating-star {
  font-size: var(--text-lg);
  color: var(--border);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
  line-height: 1;
  user-select: none;
}

.rating-star--filled {
  color: var(--accent);
}

.rating-star--user {
  color: var(--accent);
}

.rating-star--hover {
  color: var(--accent) !important;
  transform: scale(1.15);
}

.rating-star:hover {
  transform: scale(1.15);
}

.rating-avg {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--accent);
  line-height: 1;
  margin-left: var(--space-1);
}

.rating-count-wrap {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Top articles grid — 3 col */
.cards-grid--top {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 768px) {
  .cards-grid--top {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .cards-grid--top {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================
   v4.2 — Formulas, Docs, Comments, Views, Share
   ============================================ */

/* --- Formula Copy Block --- */
.formula-block {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  margin: var(--space-8) 0;
  overflow: hidden;
}

.formula-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-dark);
  color: var(--text-white);
}

.formula-block__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}

.formula-block__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--accent);
  color: white;
  border: none;
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.formula-block__copy-btn:hover {
  background: var(--accent-hover);
}

.formula-block__copy-btn svg {
  width: 14px;
  height: 14px;
}

.formula-block__copy-btn.copied {
  background: #2d7d32;
}

.formula-block__body {
  padding: var(--space-5);
}

.formula-block__formula {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.8;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.formula-block__formula .formula-var {
  color: var(--accent);
  font-weight: 700;
}

.formula-block__formula .formula-comment {
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* --- Evidence Badge (Hypothesis / Proven) --- */
.evidence-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1.5px solid;
  line-height: 1.4;
}

.evidence-badge--proven {
  color: #2d7d32;
  border-color: #2d7d32;
  background: rgba(45, 125, 50, 0.06);
}

.evidence-badge--hypothesis {
  color: #e67e22;
  border-color: #e67e22;
  background: rgba(230, 126, 34, 0.06);
}

.evidence-badge--review {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-light);
}

.evidence-badge svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* --- Attached Documents --- */
.docs-section {
  margin: var(--space-8) 0;
  padding: var(--space-5);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
}

.docs-section__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.docs-section__title svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.doc-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  margin-bottom: var(--space-2);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.doc-item:hover {
  border-color: var(--accent);
}

.doc-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-light);
  color: var(--accent);
}

.doc-item__icon svg {
  width: 18px;
  height: 18px;
}

.doc-item__info {
  flex: 1;
  min-width: 0;
}

.doc-item__name {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.doc-item__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.doc-item__download {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color var(--duration-fast);
}

.doc-item__download:hover {
  color: var(--accent);
}

.doc-item__download svg {
  width: 16px;
  height: 16px;
}

/* --- Article Stats Bar (Views / Comments / Share) --- */
.article-stats {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: var(--space-6) 0;
}

.article-stats__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.article-stats__item svg {
  width: 16px;
  height: 16px;
}

.article-stats__item--count {
  font-weight: 700;
  color: var(--text-primary);
}

.article-stats__share {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid var(--border);
  background: var(--bg-white);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--duration-fast) var(--ease-out);
}

.share-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.share-btn svg {
  width: 14px;
  height: 14px;
}

/* --- Comments Section --- */
.comments-section {
  margin: var(--space-10) 0;
}

.comments-section__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-primary);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.comments-section__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-weight: 400;
}

/* Comment form */
.comment-form {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  align-items: flex-start;
}

.comment-form__avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
}

.comment-form__input-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.comment-form__textarea {
  width: 100%;
  min-height: 72px;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border);
  background: var(--bg-white);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-body);
  resize: vertical;
  transition: border-color var(--duration-fast);
  outline: none;
}

.comment-form__textarea:focus {
  border-color: var(--accent);
}

.comment-form__textarea::placeholder {
  color: var(--text-muted);
}

.comment-form__submit {
  align-self: flex-end;
  padding: var(--space-2) var(--space-5);
  background: var(--accent);
  color: white;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.comment-form__submit:hover {
  background: var(--accent-hover);
}

/* Comment items */
.comment {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border-light);
}

.comment__avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.comment__body {
  flex: 1;
  min-width: 0;
}

.comment__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
}

.comment__author {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.comment__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.comment__text {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.6;
}

.comment__actions {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.comment__action {
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: color var(--duration-fast);
}

.comment__action:hover {
  color: var(--accent);
}

/* Mobile adjustments for stats */
@media (max-width: 640px) {
  .article-stats {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .article-stats__share {
    margin-left: 0;
    width: 100%;
    justify-content: flex-start;
  }
  .comment-form {
    flex-direction: column;
  }
  .comment-form__avatar {
    display: none;
  }
}

@media (max-width: 480px) {
  .article-header__info {
    gap: var(--space-3);
  }
  .article-header__title {
    font-size: var(--text-2xl);
  }
  .article-header {
    padding: var(--space-6) 0 var(--space-4);
  }
  .pull-quote {
    padding: var(--space-4) var(--space-5);
  }
  .pull-quote p {
    font-size: var(--text-lg);
  }
  .insight-box {
    padding: var(--space-3) var(--space-4);
  }
  .article-photo img {
    border-radius: 8px;
    max-height: 300px;
  }
}

@media (max-width: 320px) {
  .container {
    padding: 0 var(--space-3);
  }
  .article-header__info {
    gap: var(--space-2);
  }
  .article-stats__item {
    font-size: 11px;
  }
  .share-btn {
    padding: var(--space-1) var(--space-2);
    font-size: 11px;
  }
}

/* ============================================
   v4.3 — Auth Modal + AI Search + Article Images
   ============================================ */

/* --- Auth Modal --- */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-med) var(--ease-out);
}

.auth-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.auth-modal {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  width: 100%;
  max-width: 420px;
  margin: var(--space-4);
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.auth-modal__stripe {
  height: 5px;
  background: var(--accent);
}

.auth-modal__body {
  padding: var(--space-8) var(--space-8) var(--space-6);
  text-align: center;
}

.auth-modal__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.auth-modal__logo-text {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--accent);
  letter-spacing: 0.08em;
}

.auth-modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.auth-modal__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
  line-height: 1.5;
}

.auth-modal__google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-white);
  border: 2px solid var(--border);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.auth-modal__google-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.auth-modal__google-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.auth-modal__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.auth-modal__divider::before,
.auth-modal__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-modal__divider span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.auth-modal__email-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-modal__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border);
  background: var(--bg-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration-fast);
}

.auth-modal__input:focus {
  border-color: var(--accent);
}

.auth-modal__input::placeholder {
  color: var(--text-muted);
}

.auth-modal__submit {
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: white;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.auth-modal__submit:hover {
  background: var(--accent-hover);
}

.auth-modal__footer {
  padding: var(--space-3) var(--space-8);
  background: var(--bg-primary);
  text-align: center;
  border-top: 1px solid var(--border-light);
}

.auth-modal__footer-text {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.auth-modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-fast);
  z-index: 1;
}

.auth-modal__close:hover {
  color: var(--accent);
}

.auth-modal__close svg {
  width: 18px;
  height: 18px;
}

/* Logged in header state */
.nav__user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: border-color var(--duration-fast);
}

.nav__user:hover {
  border-color: var(--accent);
}

.nav__user-avatar {
  width: 28px;
  height: 28px;
  background: var(--accent);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  border-radius: 50%;
}

.nav__user-name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

.nav__auth-btn {
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  background: var(--accent);
  color: white;
  border: none;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.nav__auth-btn:hover {
  background: var(--accent-hover);
}

/* --- Floating AI Widget --- */
.ai-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1000;
  width: 56px;
  height: 56px;
  background: var(--bg-dark);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  transition: transform 0.2s cubic-bezier(0.16,1,0.3,1), box-shadow 0.2s;
}

.ai-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(0,0,0,0.35);
}

.ai-fab__icon {
  width: 24px;
  height: 24px;
  color: white;
  transition: opacity 0.2s, transform 0.2s;
}

.ai-fab__icon--close {
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg);
}

.ai-fab.active .ai-fab__icon--search {
  opacity: 0;
  transform: rotate(90deg);
}

.ai-fab.active .ai-fab__icon--close {
  opacity: 1;
  transform: rotate(0);
}

.ai-fab__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  padding: 1px 5px;
  background: var(--accent);
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.05em;
}

/* Panel */
.ai-panel {
  position: fixed;
  bottom: 96px;
  right: 28px;
  z-index: 999;
  width: 400px;
  max-height: calc(100vh - 140px);
  border: 2px solid var(--bg-dark);
  background: var(--bg-primary);
  box-shadow: 0 8px 40px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 0.25s cubic-bezier(0.16,1,0.3,1),
              transform 0.25s cubic-bezier(0.16,1,0.3,1),
              visibility 0.25s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ai-panel__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-dark);
  color: var(--text-white);
  flex-shrink: 0;
}

.ai-panel__header svg {
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}

.ai-panel__title {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.ai-panel__badge {
  margin-left: auto;
  padding: 1px 6px;
  background: var(--accent);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.ai-panel__body {
  padding: var(--space-4);
  overflow-y: auto;
  flex: 1;
}

.ai-panel__form {
  display: flex;
  gap: var(--space-2);
}

.ai-panel__input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1.5px solid var(--border);
  background: var(--bg-white);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration-fast);
}

.ai-panel__input:focus {
  border-color: var(--accent);
}

.ai-panel__input::placeholder {
  color: var(--text-muted);
  font-size: 11px;
}

.ai-panel__submit {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  background: var(--accent);
  color: white;
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.ai-panel__submit:hover {
  background: var(--accent-hover);
}

.ai-panel__submit svg {
  width: 16px;
  height: 16px;
}

.ai-panel__examples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-top: var(--space-3);
}

.ai-panel__example {
  padding: 3px var(--space-2);
  border: 1px solid var(--border);
  background: var(--bg-white);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.ai-panel__example:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* AI response area */
.ai-panel__response {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-white);
  border: 1px solid var(--border);
  display: none;
}

.ai-panel__response.active {
  display: block;
}

.ai-panel__response-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.ai-panel__response-icon {
  width: 22px;
  height: 22px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}

.ai-panel__response-icon svg {
  width: 12px;
  height: 12px;
  color: white;
}

.ai-panel__response-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
}

.ai-panel__response-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-body);
  line-height: 1.65;
}

.ai-panel__response-text strong {
  color: var(--text-primary);
}

/* Typing indicator */
.ai-panel__typing {
  display: flex;
  gap: 4px;
  padding: var(--space-2) 0;
}

.ai-panel__typing span {
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: typingDot 1.4s infinite both;
}

.ai-panel__typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-panel__typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}

/* --- Article Figure / Inline Images --- */
.article-figure {
  margin: var(--space-8) calc(-1 * var(--space-6));
  position: relative;
}

.article-figure img {
  width: 100%;
  display: block;
  filter: grayscale(60%) contrast(1.1);
}

.article-figure::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(196, 30, 30, 0.1);
  pointer-events: none;
}

.article-figure figcaption {
  padding: var(--space-2) var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
}

@media (max-width: 768px) {
  .article-figure {
    margin-left: calc(-1 * var(--space-4));
    margin-right: calc(-1 * var(--space-4));
  }
  .ai-panel {
    width: calc(100% - 24px);
    max-width: 380px;
    right: 12px;
    left: 12px;
    bottom: 80px;
  }
  .ai-fab {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
  }
  .ai-panel__examples {
    display: none;
  }
  .auth-modal {
    max-width: 100%;
    margin: var(--space-4);
  }
}

/* ============================================
   v4.4 — AI News Feed Styles
   ============================================ */

/* --- News Feed --- */
.news-feed {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.news-item {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--duration-fast) var(--ease-out);
}

.news-item:first-child {
  border-top: 1px solid var(--border);
}

.news-item:hover {
  background: var(--accent-light);
  margin: 0 calc(-1 * var(--space-4));
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.news-item__date {
  flex-shrink: 0;
  width: 48px;
  text-align: center;
  padding-top: var(--space-1);
}

.news-item__day {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--accent);
  line-height: 1;
}

.news-item__month {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.news-item__content {
  flex: 1;
  min-width: 0;
}

.news-item__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.news-item__source {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.news-item__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: var(--space-2);
}

.news-item__excerpt {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: var(--space-3);
  max-width: 680px;
}

.news-item__ai-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.05em;
}

.news-item__ai-tag svg {
  flex-shrink: 0;
  color: var(--accent);
}

@media (max-width: 640px) {
  .news-item {
    flex-direction: column;
    gap: var(--space-2);
  }
  .news-item__date {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    width: auto;
  }
  .news-item:hover {
    margin: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* ============================================
   ENTOMO Industry Pulse — Index Block
   ============================================ */

.pulse {
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
}

.pulse__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: var(--text-white);
}

.pulse__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: 0.04em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pulse__title-dot {
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  animation: pulse-blink 2s ease-in-out infinite;
}

@keyframes pulse-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.pulse__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  opacity: 0.6;
}

.pulse__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.pulse__card {
  padding: var(--space-8) var(--space-6);
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  transition: background var(--duration-fast) var(--ease-out);
  background: rgba(255, 255, 255, 0.03);
}

.pulse__card:last-child {
  border-right: none;
}

.pulse__card:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pulse__card-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(196, 30, 30, 0.5);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

.pulse__card-icon svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

.pulse__card-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.2rem);
  line-height: 1;
  color: var(--text-white);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-2);
}

.pulse__card-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

.pulse__card-detail {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.pulse__card-detail strong {
  color: var(--accent);
  font-weight: 600;
}

.pulse__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

.pulse__footer-sources {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.pulse__footer-sources a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.pulse__footer-sources a:hover {
  border-bottom-color: var(--accent);
}

.pulse__footer-link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.05em;
  color: var(--accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: gap var(--duration-fast) var(--ease-out);
}

.pulse__footer-link:hover {
  gap: var(--space-3);
}

@media (max-width: 900px) {
  .pulse__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pulse__card:nth-child(2) {
    border-right: none;
  }
  .pulse__card:nth-child(1),
  .pulse__card:nth-child(2) {
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 600px) {
  .pulse__grid {
    grid-template-columns: 1fr;
  }
  .pulse__card {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: var(--space-6) var(--space-5);
  }
  .pulse__card:last-child {
    border-bottom: none;
  }
  .pulse__header {
    padding: var(--space-5) var(--space-5);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .pulse__footer {
    padding: var(--space-4) var(--space-5);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ============================================
   v4.7 — Ticker / Marquee Component
   ============================================ */

.ticker {
  background: rgba(26, 26, 26, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  position: relative;
  padding: var(--space-3) 0;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.ticker:active {
  cursor: grabbing;
}

.ticker__track {
  display: flex;
  gap: 0;
  white-space: nowrap;
  will-change: transform;
  animation: ticker-scroll 25s linear infinite;
}

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

.ticker__items {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  padding-right: 0;
}

.ticker__item {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-white);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0;
}

.ticker__value {
  color: var(--accent);
  font-weight: 700;
}

.ticker__dot {
  color: var(--accent);
  margin: 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  .ticker {
    padding: var(--space-2) 0;
  }
}

/* ============================================
   v4.8 — New Sections: Auth, AI Chat, Guide,
   Articles Filter, Growth Chart, Gamification
   ============================================ */

/* --- Nav Login Button --- */
.nav__login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  min-height: 44px;
  background: var(--accent);
  color: var(--text-white);
  border: none;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
  line-height: 1.2;
}

.nav__login-btn:hover {
  background: var(--accent-hover);
}

/* --- Auth Modal v4.8 --- */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-med) var(--ease-out);
}

.auth-modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.auth-modal-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
  width: 100%;
  max-width: 440px;
  margin: var(--space-4);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.auth-modal-card__stripe {
  height: 5px;
  background: var(--accent);
}

.auth-modal-card__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-fast);
  z-index: 2;
}

.auth-modal-card__close:hover {
  color: var(--accent);
}

.auth-modal-card__close svg {
  width: 20px;
  height: 20px;
}

.auth-modal-card__body {
  padding: var(--space-8) var(--space-8) var(--space-6);
}

.auth-modal-card__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  margin-bottom: var(--space-6);
  text-align: center;
}

.auth-modal-card__google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-5);
  background: var(--bg-white);
  border: 2px solid var(--border);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.auth-modal-card__google-btn:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}

.auth-modal-card__google-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.auth-modal-card__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
}

.auth-modal-card__divider::before,
.auth-modal-card__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.auth-modal-card__divider span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.auth-modal-card__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.auth-modal-card__input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border);
  background: var(--bg-primary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--duration-fast);
}

.auth-modal-card__input:focus {
  border-color: var(--accent);
}

.auth-modal-card__input::placeholder {
  color: var(--text-muted);
}

.auth-modal-card__submit-btn {
  padding: var(--space-3) var(--space-5);
  background: var(--accent);
  color: white;
  border: none;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--duration-fast);
  margin-top: var(--space-1);
}

.auth-modal-card__submit-btn:hover {
  background: var(--accent-hover);
}

.auth-modal-card__switch {
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: var(--space-5);
  margin-bottom: 0;
}

.auth-modal-card__switch a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.auth-modal-card__switch a:hover {
  text-decoration: underline;
}

/* --- AI Chat Floating Button --- */
.ai-chat-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 1000;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(196, 30, 30, 0.35), 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
}

.ai-chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(196, 30, 30, 0.45);
}

.ai-chat-fab__icon {
  width: 24px;
  height: 24px;
  color: white;
  transition: opacity 0.2s, transform 0.2s;
}

.ai-chat-fab__icon--close {
  position: absolute;
  opacity: 0;
  transform: rotate(-90deg);
}

.ai-chat-fab.active .ai-chat-fab__icon--chat {
  opacity: 0;
  transform: rotate(90deg);
}

.ai-chat-fab.active .ai-chat-fab__icon--close {
  opacity: 1;
  transform: rotate(0);
}

/* --- AI Chat Panel --- */
.ai-chat-panel {
  position: fixed;
  bottom: 96px;
  right: 28px;
  z-index: 999;
  width: 360px;
  height: 480px;
  display: flex;
  flex-direction: column;
  background: rgba(26, 26, 26, 0.9);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.95);
  transform-origin: bottom right;
  transition: opacity 0.3s var(--ease-out),
              transform 0.3s var(--ease-out),
              visibility 0.3s;
  overflow: hidden;
}

.ai-chat-panel.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.ai-chat-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-dark);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.ai-chat-panel__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--text-white);
  letter-spacing: 0.06em;
}

.ai-chat-panel__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast);
}

.ai-chat-panel__close:hover {
  color: var(--text-white);
}

.ai-chat-panel__close svg {
  width: 18px;
  height: 18px;
}

.ai-chat-panel__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ai-chat-msg {
  display: flex;
  max-width: 85%;
}

.ai-chat-msg--user {
  align-self: flex-end;
}

.ai-chat-msg--bot {
  align-self: flex-start;
}

.ai-chat-msg__bubble {
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.55;
  border-radius: var(--radius-lg);
}

.ai-chat-msg--user .ai-chat-msg__bubble {
  background: var(--accent);
  color: var(--text-white);
  border-bottom-right-radius: var(--radius-sm);
}

.ai-chat-msg--bot .ai-chat-msg__bubble {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.9);
  border-bottom-left-radius: var(--radius-sm);
}

.ai-chat-panel__input-bar {
  display: flex;
  gap: 0;
  padding: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.ai-chat-panel__input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-right: none;
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-white);
  outline: none;
  transition: border-color var(--duration-fast);
}

.ai-chat-panel__input:focus {
  border-color: var(--accent);
}

.ai-chat-panel__input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.ai-chat-panel__send {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border: none;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.ai-chat-panel__send:hover {
  background: var(--accent-hover);
}

.ai-chat-panel__send svg {
  width: 18px;
  height: 18px;
  color: white;
}

@media (max-width: 768px) {
  .ai-chat-panel {
    width: calc(100% - 24px);
    max-width: 380px;
    right: 12px;
    left: 12px;
    bottom: 80px;
    height: min(420px, calc(100vh - 140px));
    height: min(420px, calc(100dvh - 140px));
  }
  .ai-chat-fab {
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 480px) {
  .ai-chat-panel {
    right: 8px;
    left: 8px;
    bottom: 72px;
    width: auto;
    max-width: none;
  }
}

/* --- Guide Grid (Как устроен ENTOMO) --- */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.guide-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (min-width: 601px) and (max-width: 1024px) {
  .guide-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .guide-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .guide-grid,
  .guide-grid--4 {
    grid-template-columns: 1fr;
  }
}

.guide-item {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  transition: all var(--duration-med) var(--ease-out);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.guide-item--card {
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-decoration: none;
  color: inherit;
  border-left: none;
  border-top: 3px solid var(--accent);
  padding: var(--space-8) var(--space-5) var(--space-6);
  position: relative;
}

.guide-item:hover {
  border-color: rgba(196, 30, 30, 0.2);
  border-left-color: var(--accent);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.guide-item--card:hover {
  border-top-color: var(--accent);
  border-left-color: rgba(196, 30, 30, 0.2);
}

.guide-item--card:hover .guide-item__btn {
  background: var(--accent);
  color: white;
}

.guide-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-item__icon-circle {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(196, 30, 30, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  transition: all var(--duration-med) var(--ease-out);
}

.guide-item--card:hover .guide-item__icon-circle {
  background: var(--accent);
}

.guide-item__icon-circle svg {
  width: 24px;
  height: 24px;
  color: var(--accent);
  transition: color var(--duration-med) var(--ease-out);
}

.guide-item--card:hover .guide-item__icon-circle svg {
  color: white;
}

.guide-item__icon svg {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.guide-item__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.guide-item__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.5;
}

.guide-item__btn {
  display: inline-block;
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-pill);
  transition: all var(--duration-med) var(--ease-out);
}

/* --- Articles Filter --- */
.articles-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.articles-filter__tags {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-1);
  -webkit-overflow-scrolling: touch;
}

.articles-filter__tag {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.articles-filter__tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.articles-filter__tag--active {
  background: var(--accent);
  color: var(--text-white);
  border-color: var(--accent);
  border-radius: var(--radius-pill);
}

.articles-filter__sort {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.articles-filter__sort-btn {
  padding: var(--space-1) var(--space-3);
  border: none;
  background: none;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--duration-fast);
}

.articles-filter__sort-btn:hover {
  color: var(--accent);
}

.articles-filter__sort-btn--active {
  color: var(--accent);
  font-weight: 700;
}

/* Article card filter transitions */
#articles-grid .card {
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

@media (max-width: 600px) {
  .articles-filter {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* --- Growth Chart --- */
.growth-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}

.growth-chart-wrap {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  max-width: 800px;
  margin: 0 auto var(--space-6);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.growth-ministats {
  display: flex;
  justify-content: center;
  gap: var(--space-8);
  max-width: 800px;
  margin: 0 auto;
}

.growth-ministat {
  text-align: center;
}

.growth-ministat__value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  color: var(--accent);
  line-height: 1.1;
  margin-bottom: var(--space-1);
}

.growth-ministat__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

@media (max-width: 600px) {
  .growth-ministats {
    flex-direction: column;
    gap: var(--space-4);
    align-items: center;
  }
}

/* --- Gamification / Expert Level --- */
.expert-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: var(--space-6);
}

.expert-progress {
  max-width: 600px;
  margin-bottom: var(--space-8);
}

.expert-progress__bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}

.expert-progress__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.6s var(--ease-out);
}

.expert-badges {
  display: flex;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.expert-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 80px;
}

.expert-badge__hex {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.expert-badge:hover .expert-badge__hex {
  transform: scale(1.08);
}

.expert-badge--unlocked .expert-badge__hex {
  background: var(--accent);
}

.expert-badge--unlocked .expert-badge__hex svg {
  width: 24px;
  height: 24px;
  color: white;
}

.expert-badge--locked .expert-badge__hex {
  background: #444;
}

.expert-badge--locked .expert-badge__hex svg {
  width: 24px;
  height: 24px;
  color: #888;
}

.expert-badge__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-white);
  text-align: center;
}

.expert-badge--locked .expert-badge__label {
  color: rgba(255, 255, 255, 0.35);
}

.expert-badge__req {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.3);
  text-align: center;
}

.expert-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.05em;
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .expert-badges {
    gap: var(--space-4);
  }
  .expert-badge__hex {
    width: 52px;
    height: 52px;
  }
  .expert-badge__hex svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================
   v5.0 — Article Pages: Insight Boxes, Tables
   ============================================ */

/* --- Insight Boxes (Knowledge Entries) --- */
.insight-box {
  border-left: 4px solid #2d7d32;
  background: rgba(45, 125, 50, 0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-6) 0;
  position: relative;
}

.insight-box--fact {
  border-left-color: #2d7d32;
  background: rgba(45, 125, 50, 0.04);
}

.insight-box--opinion {
  border-left-color: #e67e22;
  background: rgba(230, 126, 34, 0.04);
}

.insight-box--case {
  border-left-color: #2563eb;
  background: rgba(37, 99, 235, 0.04);
}

.insight-box__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: var(--space-2);
}

.insight-box--fact .insight-box__label {
  color: #2d7d32;
}

.insight-box--opinion .insight-box__label {
  color: #e67e22;
}

.insight-box--case .insight-box__label {
  color: #2563eb;
}

.insight-box__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--text-body);
  margin-bottom: 0;
  max-width: none;
}

/* --- Article Tables --- */
.article-table-wrap {
  overflow-x: auto;
  margin: var(--space-6) 0;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--bg-primary) 30%, transparent),
    linear-gradient(to left, var(--bg-primary) 30%, transparent),
    linear-gradient(to right, rgba(0,0,0,.15), transparent 15px),
    linear-gradient(to left, rgba(0,0,0,.15), transparent 15px);
  background-position: left center, right center, left center, right center;
  background-size: 20px 100%, 20px 100%, 15px 100%, 15px 100%;
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.5;
  table-layout: fixed;
}

/* Any table inside article-body — contain + scroll */
.article-body table {
  max-width: 100%;
}

.article-body img {
  max-width: 100%;
  height: auto;
}

.article-body figure {
  max-width: 100%;
}

.article-body figure img {
  max-width: 100%;
  height: auto;
}
.article-body .article-table-wrap {
  overflow-x: auto;
  margin: var(--space-6) 0;
}

.article-table thead {
  background: var(--accent);
  color: var(--text-white);
}

.article-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: normal;
  word-break: break-word;
}

.article-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-body);
  word-break: break-word;
}

.article-table tbody tr:hover {
  background: var(--accent-light);
}

.article-table tbody tr:last-child td {
  border-bottom: 2px solid var(--accent);
}

@media (max-width: 640px) {
  .article-table {
    font-size: var(--text-xs);
  }
  .article-table th,
  .article-table td {
    padding: var(--space-2) var(--space-3);
  }
}


/* ============================================
   v5.0 — Content Type Badges + Glass Extras
   ============================================ */

/* --- Body Noise/Grain Overlay --- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  opacity: 0.4;
  mix-blend-mode: overlay;
}

/* --- Content Type Badges --- */
.content-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.4;
  white-space: nowrap;
}

.content-type-badge--fact {
  background: rgba(46, 125, 50, 0.12);
  color: #2e7d32;
}

.content-type-badge--research {
  background: rgba(21, 101, 192, 0.12);
  color: #1565c0;
}

.content-type-badge--case {
  background: rgba(230, 81, 0, 0.12);
  color: #e65100;
}

.content-type-badge--analytics {
  background: rgba(106, 27, 154, 0.12);
  color: #6a1b9a;
}

.content-type-badge--opinion {
  background: rgba(245, 127, 23, 0.12);
  color: #f57f17;
}

.content-type-badge__icon {
  font-size: 11px;
  line-height: 1;
}

/* --- Content Type Filter Row --- */
.type-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.type-filter__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-right: var(--space-1);
}

.type-filter__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-1) var(--space-3);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.type-filter__btn:hover {
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text-primary);
}

.type-filter__btn--active {
  color: var(--text-white);
  border-color: transparent;
}

/* Type filter active states by type */
.type-filter__btn--active[data-type-filter="all-types"],
.type-filter__btn--active[data-type-filter="все-типы"] {
  background: var(--bg-dark);
  color: var(--text-white);
}

.type-filter__btn--active[data-type-filter="fact"],
.type-filter__btn--active[data-type-filter="факт"] {
  background: #2e7d32;
  color: white;
}

.type-filter__btn--active[data-type-filter="research"],
.type-filter__btn--active[data-type-filter="исследование"] {
  background: #1565c0;
  color: white;
}

.type-filter__btn--active[data-type-filter="case"],
.type-filter__btn--active[data-type-filter="кейс"] {
  background: #e65100;
  color: white;
}

.type-filter__btn--active[data-type-filter="analytics"],
.type-filter__btn--active[data-type-filter="аналитика"] {
  background: #6a1b9a;
  color: white;
}

.type-filter__btn--active[data-type-filter="opinion"],
.type-filter__btn--active[data-type-filter="мнение"] {
  background: #f57f17;
  color: white;
}

.type-filter__btn-icon {
  font-size: 11px;
  line-height: 1;
}

/* --- Article Body Glass Card --- */
.article-body {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Override article-body max-width and padding from original */
.article-body {
  max-width: var(--content-width);
  padding-bottom: var(--space-16);
}

/* --- Collage softened --- */
.collage {
  border-radius: var(--radius-lg);
}

/* --- Card image wrap radius --- */
.card__image-wrap {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* --- Card footer softer border --- */
.card__footer {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Section header line softer --- */
.section-header__line {
  background: rgba(0, 0, 0, 0.08);
}

/* --- Dropzone softer --- */
.dropzone {
  border-radius: var(--radius-lg);
  border: 3px dashed rgba(196, 30, 30, 0.3);
}

/* --- Form inputs rounded --- */
.form-input,
.form-select {
  border-radius: var(--radius-md);
  border: 1.5px solid rgba(0, 0, 0, 0.1);
}

/* --- Share btn rounded --- */
.share-btn {
  border-radius: var(--radius-pill);
  border: 1.5px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.5);
}

/* --- Comment form textarea rounded --- */
.comment-form__textarea {
  border-radius: var(--radius-md);
}

/* --- Auth modal inputs rounded --- */
.auth-modal__input,
.auth-modal-card__input {
  border-radius: var(--radius-md);
}

.auth-modal__submit,
.auth-modal-card__submit-btn {
  border-radius: var(--radius-md);
}

.auth-modal__google-btn,
.auth-modal-card__google-btn {
  border-radius: var(--radius-md);
}

/* --- Newsletter input/btn radius already set above --- */

/* --- AI Chat message bubbles glass --- */
.ai-chat-msg--bot .ai-chat-msg__bubble {
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  border-bottom-left-radius: var(--radius-sm);
}

.ai-chat-msg--user .ai-chat-msg__bubble {
  border-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-sm);
}

/* --- AI Chat input bar rounded --- */
.ai-chat-panel__input {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.ai-chat-panel__send {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* --- Mobile nav links glass --- */
@media (max-width: 768px) {
  .nav__links {
    background: rgba(247, 245, 240, 0.9);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
}

/* --- Leaderboard title softer border --- */
.leaderboard__title {
  border-bottom: 2px solid rgba(196, 30, 30, 0.3);
}

/* --- Evidence badge rounded --- */
.evidence-badge {
  border-radius: var(--radius-pill);
}

/* --- Nav login btn rounded --- */
.nav__login-btn {
  border-radius: var(--radius-md);
}

.nav__auth-btn {
  border-radius: var(--radius-md);
}

/* --- Red line softened --- */
.red-line {
  border-radius: 2px;
}

/* --- Pipeline number keeps circle --- */

/* --- Article stats bar softer borders --- */
.article-stats {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- Auth modal stripe rounded top --- */
.auth-modal-card__stripe,
.auth-modal__stripe {
  border-radius: 24px 24px 0 0;
}

/* --- Article table rounded --- */
.article-table-wrap {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* --- News item hover softer --- */
.news-item:hover {
  background: rgba(196, 30, 30, 0.04);
  border-radius: var(--radius-md);
}

/* --- Pulse card label color for dark bg --- */
.pulse__card-label {
  color: rgba(255, 255, 255, 0.5);
}

/* --- Card meta flex wrap for badges --- */
.card__meta {
  flex-wrap: wrap;
}

/* --- Article inline photos --- */
.article-photo {
  margin: 2rem 0;
  padding: 0;
}
.article-photo img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.article-photo figcaption {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #888;
  text-align: center;
}

/* --- Publications card thumbnail --- */
.card-thumb {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
  display: block;
  margin-bottom: 0.75rem;
}