/* Hero */
.hero {
  background: var(--ink);
  color: white;
  padding: var(--space-7) 0 var(--space-7);
  position: relative;
  overflow: hidden;
}
.hero .container { position: relative; z-index: 2; }
.hero .eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; color: var(--accent); text-transform: uppercase; margin-bottom: var(--space-3); }
.hero h1 {
  font-size: var(--fs-display);
  font-weight: 600;
  color: white;
  letter-spacing: -1.5px;
  max-width: 860px;
  margin-bottom: var(--space-3);
  line-height: 1.05;
}
.hero .sub {
  font-size: 19px;
  color: rgba(255,255,255,0.7);
  max-width: 620px;
  line-height: 1.55;
  margin-bottom: var(--space-4);
}
.hero .cta-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-5); }
.hero .stats { font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,0.55); letter-spacing: 0.3px; }
@media (max-width: 768px) {
  .hero h1 { font-size: 36px; }
  .hero .sub { font-size: 17px; }
}

/* Section headings */
.section-head { max-width: 720px; margin-bottom: var(--space-4); }
.section-head .label { margin-bottom: var(--space-2); }
.section-head h2 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.8px; }
.section-head p { margin-top: var(--space-3); color: var(--muted); font-size: 17px; line-height: 1.55; }

.bone { background: var(--bone); }

.dark { background: var(--ink); color: white; }
.dark h2 { color: white; }
.dark .section-head p { color: rgba(255,255,255,0.7); }

/* Warm photographic moment */
.warm {
  min-height: 480px;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(90deg, rgba(10,13,18,0.85) 0%, rgba(10,13,18,0.55) 60%, rgba(10,13,18,0.2) 100%), url('../img/hero-hk-architecture.jpg');
  color: white;
  display: flex;
  align-items: center;
  padding: var(--space-7) 0;
}
.warm .label { color: var(--accent); }
.warm .stat-big { font-family: var(--font-body); font-size: 64px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; margin: var(--space-2) 0; }
.warm .caption { font-size: 18px; color: rgba(255,255,255,0.7); max-width: 480px; line-height: 1.5; }
@media (max-width: 768px) { .warm .stat-big { font-size: 44px; } }

/* Product screenshots */
.product-shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.product-shots img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 12px 32px rgba(10,13,18,0.08); }
@media (max-width: 768px) { .product-shots { grid-template-columns: 1fr; } }

/* Split demo */
.split-demo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 960px) { .split-demo { grid-template-columns: 1fr; } }

/* Explainer split for homepage */
.explainer-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-4); }
.explainer-col { padding: var(--space-4); background: var(--bone); border: 1px solid var(--line); border-radius: var(--radius); }
.explainer-col-qpv { background: var(--ink); color: white; border-color: var(--ink); }
.explainer-col-qpv .explainer-label { color: var(--accent); }
.explainer-col-qpv .explainer-flow li { color: rgba(255,255,255,0.85); }
.explainer-col-qpv .explainer-flow li::before { background: var(--accent); color: var(--ink); }
.explainer-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; color: var(--muted); text-transform: uppercase; margin-bottom: var(--space-3); font-weight: 600; }
.explainer-flow { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.explainer-flow li { padding: 10px 0 10px 36px; font-size: 14px; line-height: 1.55; position: relative; counter-increment: step; border-bottom: 1px solid rgba(0,0,0,0.06); }
.explainer-flow li:last-child { border-bottom: 0; }
.explainer-col-qpv .explainer-flow li { border-bottom-color: rgba(255,255,255,0.08); }
.explainer-flow li::before { content: counter(step); position: absolute; left: 0; top: 10px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); font-family: var(--font-mono); font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
@media (max-width: 768px) { .explainer-split { grid-template-columns: 1fr; } }

/* Pillar grid on homepage */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.pillar { padding: var(--space-4); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); text-decoration: none; color: inherit; display: block; transition: all var(--dur) var(--ease); }
.pillar:hover { border-color: var(--ink); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(10,13,18,0.06); }
.pillar-num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent-dim); letter-spacing: 2px; margin-bottom: var(--space-2); }
.pillar h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: var(--space-2); }
.pillar p { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: var(--space-3); }
.pillar-cta { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0.5px; }
@media (max-width: 960px) { .pillar-grid { grid-template-columns: 1fr; } }

/* Proof strip */
.proof-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
.proof-tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); text-align: center; }
.proof-num { font-family: var(--font-mono); font-size: 38px; font-weight: 600; color: var(--ink); letter-spacing: -0.8px; line-height: 1; }
.proof-cap { margin-top: var(--space-2); font-size: 13px; color: var(--muted); line-height: 1.45; }
@media (max-width: 768px) { .proof-strip { grid-template-columns: repeat(2, 1fr); } }

/* Team teaser */
.team-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.team-teaser-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color var(--dur) var(--ease); }
.team-teaser-card:hover { border-color: var(--ink); }
.team-teaser-card h3 { font-size: 17px; font-weight: 700; margin: 0; }
.team-teaser-card .role { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-top: 2px; }
@media (max-width: 640px) { .team-teaser { grid-template-columns: 1fr; } }