/* ── Homepage-specific styles ─────────────────────────────────────────────── */

/* HERO */
.hero {
  border-bottom: 2px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 580px;
}
.hero__left {
  padding: 80px var(--pad);
  border-right: 2px solid var(--rule);
  display: flex; flex-direction: column; justify-content: center;
}
.hero__right {
  padding: 80px var(--pad);
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start;
  background: var(--bg);
}
.hero__eyebrow { margin-bottom: 24px; }
.hero__headline {
  font-size: 72px; font-weight: 700; letter-spacing: -0.04em;
  line-height: 1.0; margin-bottom: 28px;
}
.hero__headline em { color: var(--accent); font-style: normal; }
.hero__sub {
  font-size: 18px; color: var(--ink-mid); line-height: 1.6;
  max-width: 440px; margin-bottom: 48px;
}
.hero__actions { display: flex; gap: 12px; align-items: center; }
.hero__actions .btn { font-size: 14px; }
.hero__aside { font-size: 13px; color: var(--ink-low); margin-top: 20px; }

/* Animated definition card */
.def-card { opacity: 0; }
.def-card__word span {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.def-card__phonetic,
.def-card__pos,
.def-card__def,
.def-card__example {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.def-card.animate { opacity: 1; }
.def-card.animate .def-card__word span { opacity: 1; transform: translateY(0); }
.def-card.animate .def-card__phonetic { opacity: 1; transform: translateY(0); }
.def-card.animate .def-card__pos      { opacity: 1; transform: translateY(0); }
.def-card.animate .def-card__def      { opacity: 1; transform: translateY(0); }
.def-card.animate .def-card__example  { opacity: 1; transform: translateY(0); }

/* MANIFESTO */
.manifesto-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 220px 1fr 1fr;
  border-bottom: 2px solid var(--rule);
}
.manifesto__label {
  padding: 80px 0 80px 64px;
  border-right: 2px solid var(--rule);
}
.manifesto__body {
  padding: 80px 48px;
  border-right: 2px solid var(--rule);
}
.manifesto__lines p {
  font-size: 18px; font-weight: 300; color: var(--ink-mid);
  line-height: 1.7; margin-bottom: 20px;
}
.manifesto__lines p.kicker {
  font-size: 28px; font-weight: 700; color: var(--ink);
  letter-spacing: -0.02em; margin-top: 32px; margin-bottom: 0;
}
.manifesto__rule { width: 40px; height: 3px; background: var(--accent); margin-bottom: 20px; }
.manifesto__diagram { padding: 64px 64px 64px 48px; display: flex; flex-direction: column; gap: 32px; justify-content: center; }
.manifesto__divider { height: 1px; background: rgba(17,17,17,0.12); }
.diagram-label {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-low); margin-bottom: 14px;
}
.diagram-label--accent { color: var(--accent); font-weight: 700; }
.diagram-bars { display: flex; align-items: flex-end; gap: 4px; height: 60px; margin-bottom: 8px; }
.diagram-bars div { flex: 1; }
.diagram-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--ink-low); }
.diagram-desc { font-size: 13px; color: var(--ink-mid); margin-top: 10px; line-height: 1.5; }

/* PRODUCTS */
.products-section { border-bottom: 2px solid var(--rule); }
.products-header {
  max-width: var(--max); margin: 0 auto;
  padding: 64px 64px 48px;
  border-bottom: 2px solid var(--rule);
  display: flex; justify-content: space-between; align-items: flex-end;
}
.products-header__title { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.products-header__link {
  font-size: 13px; font-weight: 700; color: var(--accent);
  text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase;
}
.products-grid {
  max-width: var(--max); margin: 0 auto; padding: 0 64px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
}
.products-grid .product-card {
  border: none; border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule);
}
.products-grid .product-card:nth-child(3n) { border-right: none; }
.app-thumb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; width: 200px; }
.app-thumb-tile { height: 44px; }
.product-card--coming {
  display: flex; align-items: center; justify-content: center;
  min-height: 340px; flex-direction: column; gap: 12px;
  border: 2px dashed rgba(17,17,17,0.2) !important;
  color: var(--ink-low); text-align: center; padding: 40px;
}
.product-card--coming h4 { font-size: 16px; font-weight: 600; color: var(--ink-mid); }
.product-card--coming p  { font-size: 13px; line-height: 1.5; }

/* WHY WE EXIST */
.why { background: var(--bg-dark); color: #f5f1ea; border-bottom: 2px solid var(--rule); }
.why__inner {
  max-width: var(--max); margin: 0 auto; padding: var(--pad);
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;
}
.why__title { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; margin-bottom: 32px; }
.why__title em { color: var(--accent); font-style: normal; }
.why__stat { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.why__body p { font-size: 17px; font-weight: 300; color: rgba(245,241,234,0.65); line-height: 1.75; margin-bottom: 20px; }
.why__body p:last-child { margin-bottom: 0; }
.why__body p.why__strong { font-weight: 700; color: #f5f1ea; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero__left { border-right: none; border-bottom: 2px solid var(--rule); }
  .hero__headline { font-size: 48px; }
  .manifesto-grid { grid-template-columns: 1fr; }
  .manifesto__label { border-right: none; border-bottom: 2px solid var(--rule); padding: 40px 64px; }
  .manifesto__body { border-right: none; border-bottom: 2px solid var(--rule); }
  .why__inner { grid-template-columns: 1fr; gap: 40px; }
  :root { --pad: 24px; }
}