/* =========================================================
   Aviox Blog — About Page
   Extends style.css + blog.css + author.css tokens/components.
   ========================================================= */

/* ---------- Hero ---------- */
.about-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 3.5rem;
  overflow: hidden;
}
.about-hero::before {
  content: "";
  position: absolute; inset: -10% -10% auto -10%;
  height: 140%;
  background: var(--grad-mesh);
  z-index: -2;
  pointer-events: none;
}
.about-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3.5rem;
  align-items: center;
}
@media (max-width: 991.98px) { .about-hero-grid { grid-template-columns: 1fr; } }

.about-hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.1;
  margin-bottom: 1.3rem;
}
.about-hero .mission {
  font-size: 1.12rem;
  color: var(--clr-gray);
  max-width: 480px;
  margin-bottom: 0;
}

/* editorial illustration (pure CSS/SVG, no raster) */
.about-illustration { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; }
.about-illustration svg { width: 100%; max-width: 420px; height: auto; }

/* ---------- Our story timeline ---------- */
.story-timeline { max-width: 720px; margin: 0 auto; }
.story-timeline .timeline { padding-left: 2.4rem; }
.story-timeline .timeline-item::before { left: -2.4rem; }
.story-timeline .timeline-item h4 { font-size: 1.15rem; }
.story-timeline .timeline-item p { font-size: 0.98rem; }

/* ---------- Core values (glass cards) ---------- */
.values-section {
  position: relative;
  overflow: hidden;
}
.values-section::before {
  content: "";
  position: absolute; inset: -20% -10% auto -10%;
  height: 160%;
  background: var(--grad-mesh);
  z-index: -1;
  pointer-events: none;
}
.value-card {
  position: relative;
  height: 100%;
  padding: 2rem 1.75rem;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--clr-surface) 60%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--clr-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-premium), box-shadow 0.4s var(--ease-premium);
}
.value-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.value-card .v-icon {
  width: 54px; height: 54px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-primary); color: #fff; font-size: 1.4rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-glow);
}
.value-card h4 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.value-card p { color: var(--clr-gray); font-size: 0.92rem; margin: 0; }

/* ---------- Brands marquee ---------- */
.brands-wrap { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.brands-track {
  display: flex;
  gap: 3.5rem;
  width: max-content;
  align-items: center;
  animation: brands-scroll 28s linear infinite;
}
.brands-track:hover { animation-play-state: paused; }
@keyframes brands-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.brand-logo {
  display: flex; align-items: center; gap: 0.55rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--clr-gray);
  opacity: 0.6;
  filter: grayscale(1);
  transition: opacity 0.3s, filter 0.3s, color 0.3s;
  white-space: nowrap;
}
.brand-logo:hover { opacity: 1; filter: grayscale(0); color: var(--clr-primary); }
.brand-logo i { font-size: 1.5rem; }