/* ============================================================
   HOME — hero, status panel, services, stats band
   ============================================================ */

/* ---------- hero ---------- */
.hero {
    min-height: clamp(540px, 88vh, 860px);
    display: flex;
    align-items: center;
    padding-block: var(--sp-8) calc(var(--sp-8) + 60px);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: -12% 0;
    overflow: hidden;
    will-change: transform; /* JS parallax lives here */
    z-index: -2;
}

/* Ambient "living background": slow Ken Burns drift on the image,
   a periodic light sweep along the filaments, and a soft pulsing
   glow. All transform/opacity based — cheap to composite, and
   disabled automatically by the reduced-motion rules in base.css. */
.hero-bg-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    animation: hero-drift 32s ease-in-out infinite alternate;
}
@keyframes hero-drift {
    from { transform: scale(1) translate3d(0, 0, 0); }
    to   { transform: scale(1.09) translate3d(-1.6%, 1.2%, 0); }
}

.hero-glow {
    position: absolute;
    right: 2%;
    bottom: 8%;
    width: 46%;
    aspect-ratio: 1;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--c-primary) 22%, transparent),
        color-mix(in srgb, var(--c-accent) 10%, transparent) 45%,
        transparent 68%);
    filter: blur(34px);
    mix-blend-mode: screen;
    animation: hero-glow-pulse 8s ease-in-out infinite alternate;
}
@keyframes hero-glow-pulse {
    from { opacity: 0.35; transform: scale(0.94); }
    to   { opacity: 0.85; transform: scale(1.06); }
}

.hero-shimmer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    mix-blend-mode: screen;
}
.hero-shimmer::before {
    content: "";
    position: absolute;
    top: -25%;
    bottom: -25%;
    left: 0;
    width: 55%;
    background: linear-gradient(100deg,
        transparent 5%,
        rgba(125, 180, 255, 0.11) 40%,
        rgba(43, 217, 169, 0.09) 60%,
        transparent 95%);
    transform: skewX(-14deg) translateX(-130%);
    animation: hero-shimmer-sweep 13s ease-in-out infinite;
}
@keyframes hero-shimmer-sweep {
    0%, 52%   { transform: skewX(-14deg) translateX(-130%); }
    88%, 100% { transform: skewX(-14deg) translateX(330%); }
}
.hero-veil {
    position: absolute;
    inset: 0;
    background: var(--hero-veil);
    z-index: -1;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-7);
    align-items: center;
}

.hero-headline { max-width: 13ch; }
.hero-sub {
    color: var(--text-muted);
    font-size: var(--fs-500);
    max-width: 52ch;
    margin-top: var(--sp-5);
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
}

.hero-rating {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-6);
    color: var(--text-muted);
    font-size: var(--fs-300);
}
.hero-rating .rating-number {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin-right: 0.3rem;
}

/* ---------- signature: systems monitor panel ---------- */
.status-panel {
    padding: var(--sp-5);
    max-width: 460px;
    width: 100%;
    justify-self: center;
}
.status-head {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
    color: var(--text-muted);
}
.status-clock { margin-left: auto; font-variant-numeric: tabular-nums; }

.status-rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding-block: 0.85rem;
    border-bottom: 1px dashed var(--line);
    font-size: var(--fs-300);
}
.status-rows li:last-child { border-bottom: 0; }
.status-ok {
    display: inline-flex;
    align-items: center;
    color: var(--c-accent);
    white-space: nowrap;
}

.status-foot {
    display: flex;
    justify-content: space-between;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    color: var(--text-muted);
}
.status-foot strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- services ---------- */
.services { padding-block: var(--sp-8); }

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-5);
}

.service-card {
    background: var(--bg-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    box-shadow: var(--shadow-sm);
    transition: transform var(--speed) var(--ease-out), box-shadow var(--speed) var(--ease-out),
                border-color var(--speed) ease,
                opacity 0.7s var(--ease-out) var(--reveal-delay, 0s);
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: color-mix(in srgb, var(--c-primary) 35%, var(--line));
}

.service-icon {
    width: 52px; height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--c-primary) 11%, transparent);
    color: var(--c-primary);
    transition: transform var(--speed) var(--ease-out), background-color var(--speed) ease, color var(--speed) ease;
}
.service-icon svg { width: 26px; height: 26px; }
.service-card:hover .service-icon {
    background: var(--c-primary);
    color: #fff;
    transform: scale(1.08) rotate(-4deg);
}

.service-card p { color: var(--text-muted); font-size: var(--fs-300); flex-grow: 1; }

.service-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: var(--fs-300);
    width: fit-content;
}
.service-link svg { width: 16px; height: 16px; transition: transform var(--speed) var(--ease-out); }
.service-link:hover svg { transform: translateX(4px); }
.service-link:hover { text-decoration: none; }

/* ---------- stats band (diagonal) ---------- */
.stats-band {
    margin-block: var(--sp-7);
    padding-block: var(--sp-8);
    background:
        radial-gradient(700px 300px at 12% 0%, color-mix(in srgb, var(--c-primary) 28%, transparent), transparent 60%),
        linear-gradient(110deg, var(--c-secondary), color-mix(in srgb, var(--c-secondary) 78%, var(--c-primary)));
    clip-path: polygon(0 0, 100% clamp(0px, 3.5vw, 52px), 100% 100%, 0 calc(100% - clamp(0px, 3.5vw, 52px)));
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-6) var(--sp-4);
    text-align: center;
}

.stat-number {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
    color: #fff;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.stat-unit { font-size: 0.45em; font-weight: 600; margin-left: 0.15em; color: var(--c-accent); }
.stat-label {
    margin-top: var(--sp-2);
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--fs-300);
}

/* ---------- breakpoints ---------- */
@media (min-width: 768px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .hero-grid { grid-template-columns: 1.25fr 1fr; }
    .status-panel { justify-self: end; }
}

@media (min-width: 1440px) {
    .hero { min-height: 800px; }
    .services-grid { grid-template-columns: repeat(4, 1fr); }
}