/* sikhay.io — Home (premium light, software-native). Shared work/mock styles live in site.css. */
@import url('./tokens.css?v=5');

/* ===================== HERO ===================== */
.hero {
  position: relative; overflow: hidden;
  min-height: 90vh; padding: 160px var(--gutter) var(--space-9);
  display: flex; align-items: center;
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 52% 42% at 50% -8%, rgba(79,70,229,0.10), transparent 62%),
    radial-gradient(ellipse 60% 50% at 88% 6%, rgba(79,70,229,0.05), transparent 58%);
}
.hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: var(--content-max); margin: 0 auto; }
.hero h1 { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; max-width: 17ch; text-wrap: balance; }
.hero h1 .accent { color: var(--accent); }
.hero-sub { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; color: var(--text-muted); max-width: 56ch; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: var(--space-3); }
.hero-trust { font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: 0.03em; }
.hero-strip { display: flex; gap: 22px; flex-wrap: wrap; margin-top: var(--space-6); font-family: var(--font-mono); font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; }
.hero-strip span { display: inline-flex; align-items: center; gap: 8px; }
.hero-strip span::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }

/* ===================== TRUSTED BY (strip) ===================== */
.trusted { padding-top: var(--space-9); padding-bottom: var(--space-7); }
.trusted .container { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.trusted-label { font-family: var(--font-mono); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); }
.trusted-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-7); }
.trusted-logo { font-size: 18px; font-weight: 600; color: var(--text-muted); letter-spacing: -0.01em; }

/* ===================== CLIENT QUOTE ===================== */
.quote-band { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.pullquote { max-width: var(--editorial-max); margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: var(--space-4); }
.pullquote p { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.4; letter-spacing: -0.02em; font-weight: 500; color: var(--text); }
.pullquote cite { font-family: var(--font-mono); font-size: 13px; font-style: normal; color: var(--text-dim); letter-spacing: 0.03em; }

/* ===================== WHAT WE BUILD ===================== */
.build-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.build-cell { background: var(--bg-elev-1); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: var(--space-6); display: flex; flex-direction: column; gap: 12px; min-height: 180px; box-shadow: var(--shadow-sm); transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur); }
.build-cell:hover { border-color: var(--accent-line); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.build-cell .idx { font-family: var(--font-mono); font-size: 12px; color: var(--accent); }
.build-cell h3 { font-size: 19px; }
.build-cell p { font-size: 15px; color: var(--text-muted); line-height: 1.55; }

/* ===================== HOW WE WORK ===================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { display: flex; flex-direction: column; gap: 12px; padding: var(--space-6); background: var(--bg-elev-1); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.step-num { font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.step h3 { font-size: 19px; }
.step p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px) { .build-grid, .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .hero { min-height: auto; padding-top: 130px; } }
@media (max-width: 560px) { .build-grid, .steps { grid-template-columns: 1fr; } }