/* ==========================================================================
   SIT Services · homepage layout
   Page-specific composition only; every value is a token.
   ========================================================================== */

/* ---------- Hero ---------- */
.hero { padding-block: clamp(var(--space-7), 6vw, var(--space-9)) var(--section-gap); }
.hero__grid { display: grid; gap: var(--space-7); align-items: center; }
.hero h1 { max-width: 20ch; }
.hero .t-lead { margin-top: var(--space-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero__clouds { margin-top: var(--space-6); font-size: var(--fs-small); color: var(--color-ink-3); }
.hero__clouds strong { color: var(--color-ink); font-weight: var(--fw-semibold); }
.hero__figure { width: 100%; max-width: 520px; margin-inline: auto; }
@media (min-width: 960px) {
  .hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: var(--space-7); }
}
@media (max-width: 559px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__figure { max-width: 380px; }
}

/* Hero first-load: the copy rises in sequence, once */
.js .hero .rise { opacity: 0; transform: translateY(14px); animation: rise var(--dur-reveal) var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .hero .rise { transform: none; animation-delay: 0ms; } }

/* ---------- Circuit diagram (from the existing site, now themed) ---------- */
.circuit { width: 100%; height: auto; overflow: visible; }
.circuit .base { fill: none; stroke: var(--circuit-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.circuit .pulse {
  fill: none; stroke: var(--circuit-pulse); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 18 400; stroke-dashoffset: 18; opacity: 0;
  animation: pulse 2.6s var(--ease-in-out) 3 both;   /* runs three times after load, then rests */
}
@keyframes pulse { 0% { stroke-dashoffset: 18; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -400; opacity: 0; } }
.circuit .node { fill: var(--color-bg); stroke: var(--circuit-node); stroke-width: 2; }
.circuit text { fill: var(--circuit-label); font-family: var(--font-body); font-size: 14px; font-weight: var(--fw-semibold); }
.circuit .ring-a { fill: none; stroke: var(--circuit-node); stroke-width: 3; }
.circuit .ring-b { fill: var(--color-accent-soft); stroke: var(--circuit-line); stroke-width: 2; }
.circuit .core { fill: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .circuit .pulse { animation: none; opacity: 0; } }

/* ---------- Services ---------- */
.services__head { display: grid; gap: var(--space-5); margin-bottom: var(--space-8); }
@media (min-width: 960px) { .services__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; } }

/* ---------- Why us ---------- */
.why__grid { display: grid; gap: var(--space-7); }
.why__grid .t-lead { margin-top: var(--space-5); }
.why__grid .btn { margin-top: var(--space-6); }
@media (min-width: 960px) { .why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-9); align-items: start; } }

/* ---------- Blog ---------- */
.post { gap: var(--space-2); }
.post time { font-size: var(--fs-small); color: var(--color-ink-3); }
.post .tag { align-self: flex-start; margin-top: var(--space-3); }

/* ---------- Contact ---------- */
.contact__grid { display: grid; gap: var(--space-7); }
.contact__grid .t-lead { margin-top: var(--space-4); }
.contact__grid .info-list { margin-top: var(--space-7); }
@media (min-width: 960px) { .contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-9); } }

@media (max-width: 559px) {
  .band__actions .btn { flex: 1 1 100%; }
}

/* ---------- Blog card ---------- */
.post__link { color: var(--color-ink); text-decoration: none; }
.post__excerpt { color: var(--color-ink-2); }
.post__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; }

/* ---------- A second, independent link inside a stretched-link card (sits above the overlay) */
.card__aside { position: relative; z-index: 1; font-size: var(--fs-small); }
.card__aside a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-ink-2); }
.card__aside a:hover { color: var(--color-accent-text); }

/* Featured post: full width, its summary beside what the reader will learn */
.post--featured { gap: var(--space-6); }
.post--featured .post__main { display: flex; flex-direction: column; gap: var(--space-3); }
.post--featured .post__points { padding: var(--space-5); background: var(--color-surface); border-radius: var(--radius-md); }
.post--featured .post__points ul { margin-top: var(--space-3); padding-left: 1.2em; list-style: disc; display: grid; gap: var(--space-2); color: var(--color-ink); }
.post--featured .post__points li::marker { color: var(--color-accent-text); }
@media (min-width: 900px) {
  .post--featured { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; padding: var(--space-7); }
}
.post__meta .tag { margin-top: 0; }