:root {
    --blue: #1456c2;
    --red: #e3242b;
    --yellow: #ffc107;
    --gray: #4a4a4a;
    --radius-pill: 50px;
}

/* Logo wordmark font — used only on .logo__title, nowhere else on the site */
@font-face {
    font-family: 'Pedro';
    src: url('../font/Pedro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--blue);
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
}

ul {
    list-style: none;
}

/* Navbar */
.navbar {
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar__inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
    gap: 24px;
}

/* Logo */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    width: fit-content;
    /* border-bottom: 2px solid var(--blue); */
    padding-bottom: 6px;
}

.logo__img {
    width: 60px;
    /* height: 40px; */
    object-fit: contain;
    flex-shrink: 0;
}

.logo__wordmark {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.logo__title {
    font-family: 'Pedro', 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.01em;
    color: var(--blue);
    white-space: nowrap;
}

.logo__sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Pedro', 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.3em;
    color: var(--blue);
    margin-top: 4px;
}

.logo__sub::before,
.logo__sub::after {
    content: '';
    width: 8px;
    height: 1px;
    background: currentColor;
}

/* Light variant for use on dark backgrounds (e.g. footer) */
.logo__wordmark--light .logo__title {
    color: #fff;
}

.logo__wordmark--light .logo__sub {
    color: #9db8f0;
}

.nav {
    margin-left: 20px;
}

/* Nav links */
.nav__list {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav__item {
    position: relative;
}

.nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--blue);
    padding: 10px 0;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.nav__link--active,
.nav__link:hover {
    color: var(--red);
}

.caret {
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
}

/* Dropdown */
.dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: all 0.2s ease;
    z-index: 50;
}

.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown li a {
    display: block;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    color: var(--gray);
}

.dropdown li a:hover {
    color: var(--red);
    background: #fdecea;
}

/* Nested sub-dropdown (e.g. Products > Battery > Lithium Battery (Helios)).
   Expands inline, inside the same dropdown panel, directly under "Battery"
   -- pushing "Inverter"/"Online UPS" down -- instead of floating on top of
   them as a separate overlapping box. */
.dropdown li.has-submenu>a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.caret--sub {
    flex-shrink: 0;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.25s ease, opacity 0.2s ease;
}

.has-submenu:hover>.submenu {
    max-height: 200px;
    opacity: 1;
}

.submenu li a {
    display: block;
    padding: 9px 20px 9px 34px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--gray);
}

.submenu li a:hover {
    color: var(--red);
    background: #fdecea;
}

/* Get A Quote button */
.btn-quote {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--blue);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 8px 12px 24px;
    border-radius: var(--radius-pill);
    flex-shrink: 0;
}

.btn-quote--mobile {
    display: none;
}

.btn-quote__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--yellow);
    color: var(--blue);
    font-size: 16px;
}

/* Mobile toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.nav-toggle span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--blue);
}

/* Responsive — slightly wider than the hero/about breakpoints below so
   tablet-landscape widths (~1024px) also get the hamburger instead of a
   cramped 6-link + logo + CTA row. */
@media (max-width: 1100px) {
    .navbar__inner {
        justify-content: flex-start;
        padding: 12px 16px;
        gap: 10px;
    }

    .logo__img {
        width: 46px;
    }

    .brand-toggle {
        margin-left: 16px !important;
    }

    .nav-toggle {
        display: flex;
        order: 2;
    }

    .nav {
        order: 4;
        flex-basis: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    .nav.is-open {
        max-height: 500px;
    }

    .nav__list {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 10px 0 20px;
    }

    .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
        box-shadow: none;
        padding-left: 16px;
        width: 100%;
    }

    .has-dropdown.is-open .dropdown {
        display: block;
    }

    .submenu {
        max-height: none;
        opacity: 1;
        overflow: visible;
    }

    /* Below the breakpoint the pill CTA moves inside the collapsible menu
       (as the last nav item) instead of sitting in the top bar, where it
       would otherwise wrap onto its own row next to the logo + hamburger
       on narrow phones. */
    .btn-quote--desktop {
        display: none;
    }

    .nav__item--cta {
        margin-top: 8px;
        padding-top: 12px;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        width: 100%;
    }

    .btn-quote--mobile {
        display: inline-flex;
    }
}

/* ============================================================
   HERO SECTION — scroll-scrubbed 128-frame sequence
   ------------------------------------------------------------
   Structure:
   .hero__stage-wrapper  -> tall spacer (300vh) that creates the
                             scroll distance the scrub reads from
     .hero__sticky        -> position: sticky, pins for 100vh
       .hero__media        -> full-bleed <canvas> + darkening scrim
       .hero__rail          -> thin progress indicator, right edge
       .hero__inner          -> copy panel, left-aligned, on top

   JS (js/script.js) turns "how far scrolled through the wrapper"
   into a 0->1 progress value, maps it to one of 128 pre-rendered
   frames (image/hero/frames/frame-000.jpg...frame-127.jpg) and
   draws that frame on the canvas — so scrolling steps through the
   real footage frame-by-frame instead of seeking a <video>. The
   same progress value also swaps the eyebrow/title/description
   text to match whichever phase is currently on screen, and fills
   the .hero__rail-fill indicator.
   ============================================================ */

.hero {
    position: relative;
    background: #060b14;
}

.hero__stage-wrapper {
    position: relative;
    height: 450vh;
}

.hero__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* ---- Full-bleed frame-sequence background ---- */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Canvas is sized in JS (backing-store pixels = CSS size * devicePixelRatio)
   and each frame is drawn into it pre-cropped to a "cover" fit, so no
   CSS object-fit is needed here — the bitmap already matches the box. */
.hero__canvas {
    display: block;
    width: 100%;
    height: 100%;
    background: #060b14;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, rgba(13, 83, 228, 0.72) 0%, rgba(13, 83, 228, 0.48) 35%, rgba(13, 83, 228, 0.12) 58%, rgba(13, 83, 228, 0.36) 100%),
        linear-gradient(0deg, rgba(13, 83, 228, 0.4) 0%, transparent 18%, transparent 82%, rgba(13, 83, 228, 0.4) 100%);
}

/* ---- Floating particles (ambient energy motes over the video) ---- */
.hero__particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero__bubble {
    position: absolute;
    bottom: -10%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(120, 190, 255, 0.6);
    box-shadow: 0 0 6px rgba(120, 190, 255, 0.7);
    animation: bubbleRise linear infinite;
    opacity: 0;
}

@keyframes bubbleRise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.7;
    }

    90% {
        opacity: 0.35;
    }

    100% {
        transform: translateY(-520px) translateX(var(--drift, 20px));
        opacity: 0;
    }
}

/* ---- Vertical scroll-progress rail ---- */
.hero__rail {
    position: absolute;
    top: 50%;
    right: 28px;
    transform: translateY(-50%);
    width: 2px;
    height: 160px;
    background: rgba(255, 255, 255, 0.15);
    z-index: 2;
    border-radius: 2px;
}

.hero__rail-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: var(--yellow);
    border-radius: 2px;
    transition: height 0.1s linear;
}

/* ---- Copy panel ---- */
.hero__inner {
    position: relative;
    z-index: 2;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
}

.hero__copy {
    max-width: 540px;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--yellow);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: opacity 0.25s ease;
}

.hero__title {
    color: #fff;
    font-size: clamp(34px, 4.5vw, 56px);
    line-height: 1.12;
    font-weight: 800;
    margin: 18px 0 20px;
    text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    transition: opacity 0.25s ease;
}

.hero__accent {
    color: var(--yellow);
}

.hero__desc {
    color: #cfd7e2;
    font-size: 16px;
    line-height: 1.7;
    max-width: 460px;
    margin-bottom: 28px;
    transition: opacity 0.25s ease;
}

.hero__desc strong {
    color: #fff;
}

.hero__copy.is-changing .hero__eyebrow,
.hero__copy.is-changing .hero__title,
.hero__copy.is-changing .hero__desc {
    opacity: 0;
}

.hero__cta {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 40px;
}

.hero__link {
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    padding-bottom: 4px;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.hero__link:hover {
    color: var(--yellow);
    border-color: var(--yellow);
}

.hero__stats {
    display: flex;
    gap: 36px;
}

.hero__stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hero__stat strong {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
}

.hero__stat span {
    color: #aab6c6;
    font-size: 13px;
}

/* ---- Scroll cue ---- */
.hero__scroll-cue {
    position: relative;
    z-index: 2;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #8b97a8;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-bottom: 26px;
    transition: opacity 0.3s ease;
}

.hero__mouse {
    width: 20px;
    height: 32px;
    border: 1.5px solid #8b97a8;
    border-radius: 12px;
    display: inline-flex;
    justify-content: center;
    padding-top: 5px;
}

.hero__mouse span {
    width: 3px;
    height: 7px;
    background: var(--yellow);
    border-radius: 2px;
    animation: mouseScroll 1.6s ease-in-out infinite;
}

@keyframes mouseScroll {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    70% {
        transform: translateY(8px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 0;
    }
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .hero__stage-wrapper {
        height: 390vh;
    }

    /* overflow:hidden + a fixed 100vh box was slicing the bottom off the
       copy block on shorter phones. Let the box grow to fit its content
       instead of clipping it — min-height keeps the background full-bleed
       on tall/short screens alike. */
    .hero__sticky {
        height: auto;
        min-height: 100vh;
        overflow: visible;
        padding: 90px 0;
    }

    .hero__copy {
        max-width: 100%;
        text-align: center;
        margin: 0 auto;
    }

    .hero__desc {
        margin: 0 auto 24px;
    }

    .hero__cta,
    .hero__stats {
        justify-content: center;
    }

    .hero__rail {
        display: none;
    }
}

@media (max-width: 560px) {
    .hero__cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .hero__cta,
    .hero__stats {
        align-items: center;
    }

    .hero__stage-wrapper {
        height: 330vh;
    }

    /* Copy block was taller than the 100vh sticky viewport, so it got
       clipped/overlapped top and bottom (overflow: hidden + centered).
       Tighten type scale and spacing so it actually fits, and drop the
       scroll cue since there's no room for it. */
    .hero__eyebrow {
        font-size: 12px;
    }

    .hero__title {
        font-size: clamp(26px, 8vw, 32px);
        line-height: 1.2;
        margin: 12px 0 12px;
    }

    .hero__desc {
        font-size: 14px;
        line-height: 1.55;
        margin-bottom: 18px;
    }

    .hero__cta {
        margin-bottom: 22px;
    }

    .hero__stats {
        gap: 22px;
    }

    .hero__stat strong {
        font-size: 20px;
    }

    .hero__stat span {
        font-size: 11px;
    }

    .hero__scroll-cue {
        display: none;
    }
}

/* Shorter phones (e.g. iPhone SE) still didn't have room for the full
   stack — squeeze further so the stats row isn't cropped. */
@media (max-width: 560px) and (max-height: 700px) {
    .hero__title {
        font-size: clamp(22px, 7.5vw, 28px);
        margin: 8px 0 8px;
    }

    .hero__desc {
        font-size: 13px;
        line-height: 1.45;
        margin-bottom: 14px;
    }

    .hero__cta {
        margin-bottom: 16px;
    }

    .hero__stats {
        gap: 16px;
    }

    .hero__stat strong {
        font-size: 17px;
    }

    .hero__stat span {
        font-size: 10px;
    }
}

/* Respect reduced-motion: keep the video paused on its poster frame, drop particles */
@media (prefers-reduced-motion: reduce) {
    .hero__bubble {
        animation: none;
        display: none;
    }

    .hero__eyebrow,
    .hero__title,
    .hero__desc {
        transition: none;
    }
}

/* ============================================================
   ABOUT / WHY CHOOSE US SECTION
   ------------------------------------------------------------
   .about__inner   -> two-column grid: product shot | copy
   .about__media   -> framed image with a warranty badge and
                      two accent dots (red/yellow) peeking out
   .about__features -> 2x2 grid of engineering callouts, each
                      sliding/fading in on scroll via the
                      .reveal / .reveal--visible classes toggled
                      by an IntersectionObserver in js/script.js
   ============================================================ */

.about {
    background: #f7f8fb;
    padding: 110px 0;
    overflow: hidden;
}

.about__inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: 70px;
    align-items: center;
}

/* ---- Media column ---- */
.about__media {
    position: relative;
}

.about__media-frame {
    position: relative;
    background: #0c1422;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    box-shadow: 0 30px 60px rgba(20, 86, 194, 0.18);
}

.about__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about__media-badge {
    position: absolute;
    bottom: -22px;
    left: -22px;
    width: 92px;
    height: 92px;
    background: var(--blue);
    color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 14px 30px rgba(20, 86, 194, 0.35);
}

.about__media-badge strong {
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.about__media-badge span {
    font-size: 10px;
    line-height: 1.2;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.about__media-dot {
    position: absolute;
    border-radius: 50%;
    z-index: -1;
}

.about__media-dot--yellow {
    top: -24px;
    right: -24px;
    width: 110px;
    height: 110px;
    background: var(--yellow);
    opacity: 0.85;
}

.about__media-dot--red {
    bottom: 30px;
    right: -36px;
    width: 60px;
    height: 60px;
    background: var(--red);
    opacity: 0.85;
}

/* ---- Copy column ---- */
.about__eyebrow {
    color: var(--red);
}

.about__title {
    color: var(--blue);
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.15;
    font-weight: 800;
    margin: 16px 0 18px;
}

.about__accent {
    color: var(--red);
}

.about__desc {
    color: var(--gray);
    font-size: 16px;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 36px;
}

.about__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
    margin-bottom: 40px;
}

.about__feature {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.about__feature h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 6px;
}

.about__feature p {
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gray);
}

.about__feature-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
}

.about__feature-icon--blue {
    background: var(--blue);
}

.about__feature-icon--red {
    background: var(--red);
}

.about__feature-icon--yellow {
    background: var(--yellow);
    color: var(--blue);
}

.about__cta {
    display: inline-flex;
}

/* ---- Scroll-reveal (driven by js/script.js via IntersectionObserver) ---- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
    .about {
        padding: 80px 0;
    }

    .about__inner {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about__media {
        max-width: 380px;
        margin: 0 auto;
    }

    .about__copy {
        text-align: center;
    }

    .about__desc {
        margin-left: auto;
        margin-right: auto;
    }

    .about__features {
        text-align: left;
    }
}

@media (max-width: 560px) {
    .about__features {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   SOLUTIONS SECTION — product/service category grid
   ------------------------------------------------------------
   Dark backdrop (matches the hero) with a 4-up card grid. Cards
   reuse the same .reveal/.reveal--visible scroll-in mechanism as
   the About section (driven by the IntersectionObserver already
   set up in js/script.js — no extra JS needed here), staggered
   per-card via nth-child transition-delay so they cascade in
   rather than popping together. Hover lifts the card and scales
   its icon badge, both pure CSS.
   ============================================================ */

.solutions {
    background: #060b14;
    padding: 110px 0;
}

.solutions__inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
    text-align: center;
}

.solutions__eyebrow {
    justify-content: center;
}

.solutions__title {
    color: #fff;
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    margin: 16px 0 50px;
}

.solutions__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.solutions__card {
    background: #0c1530;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    padding: 36px 26px;
    text-align: left;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.solutions__card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.solutions__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    margin-bottom: 22px;
    color: #fff;
    transition: transform 0.35s ease;
}

.solutions__card:hover .solutions__icon {
    transform: scale(1.1) rotate(-4deg);
}

.solutions__icon svg {
    width: 28px;
    height: 28px;
}

.solutions__icon--blue {
    background: var(--blue);
}

.solutions__icon--red {
    background: var(--red);
}

.solutions__icon--yellow {
    background: var(--yellow);
    color: var(--blue);
}

.solutions__card h3 {
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}

.solutions__card p {
    color: #aab6c6;
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 22px;
}

.solutions__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--yellow);
    font-size: 14px;
    font-weight: 600;
    transition: gap 0.2s ease;
}

.solutions__link:hover {
    gap: 12px;
}

/* Staggered scroll-reveal cascade */
.solutions__card.reveal {
    transition-delay: 0s;
}

.solutions__grid .solutions__card:nth-child(2) {
    transition-delay: 0.1s;
}

.solutions__grid .solutions__card:nth-child(3) {
    transition-delay: 0.2s;
}

.solutions__grid .solutions__card:nth-child(4) {
    transition-delay: 0.3s;
}

@media (max-width: 992px) {
    .solutions {
        padding: 80px 0;
    }

    .solutions__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .solutions__grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   FEATURED PRODUCTS SECTION — product catalog grid
   ============================================================ */
.products {
    background: #060b14;
    padding: 110px 0 120px;
}

.products__inner {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 30px;
}

.products__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 46px;
}

.products__title {
    color: #fff;
    font-size: clamp(26px, 3.2vw, 36px);
    font-weight: 800;
    line-height: 1.2;
    margin-top: 14px;
}

.products__view-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cdd6e4;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: color 0.2s ease, gap 0.2s ease;
}

.products__view-all:hover {
    color: var(--yellow);
    gap: 12px;
}

.products__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

.products__card {
    background: #0c1530;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.products__card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
}

.products__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    background: linear-gradient(160deg, #eef2f8, #dbe2ee);
    overflow: hidden;
}

.products__media svg {
    width: 84px;
    height: 84px;
    transition: transform 0.4s ease;
}

.products__media--blue svg {
    color: var(--blue);
}

.products__media--red svg {
    color: var(--red);
}

.products__media--yellow svg {
    color: #c98a00;
}

.products__card:hover .products__media svg {
    transform: scale(1.08) translateY(-4px);
}

.products__cart {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -46px;
    border: 0;
    border-radius: var(--radius-pill);
    padding: 11px 0;
    background: var(--blue);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: bottom 0.3s ease, background 0.2s ease;
}

.products__cart:hover {
    background: var(--red);
}

.products__card:hover .products__cart {
    bottom: 14px;
}

.products__body {
    padding: 22px 22px 26px;
}

.products__body h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 10px;
}

.products__price {
    display: inline-block;
    color: var(--yellow);
    font-size: 21px;
    font-weight: 800;
}

/* Staggered scroll-reveal cascade */
.products__grid .products__card:nth-child(2) {
    transition-delay: 0.1s;
}

.products__grid .products__card:nth-child(3) {
    transition-delay: 0.2s;
}

.products__grid .products__card:nth-child(4) {
    transition-delay: 0.3s;
}

@media (max-width: 992px) {
    .products {
        padding: 80px 0;
    }

    .products__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .products__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .products__grid {
        grid-template-columns: 1fr;
    }
}

.luminous-logo {
    width: 220px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.brand-toggle {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.brand__text {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--blue);
    white-space: nowrap;
}

.brand__logo {
    height: 26px;
    width: auto;
    object-fit: contain;
}

@media (max-width: 480px) {
    .brand__logo {
        height: 18px;
    }

    .navbar__inner {
        padding: 14px 16px;
        gap: 12px;
    }

    .luminous-logo {
        width: 140px;
    }

    .brand__text {
        font-size: 15px;
    }
}

/* Desktop only — push the LUMINOUS label to the far right of the navbar,
   after the Get A Quote button. Mobile keeps it next to the logo/hamburger. */
@media (min-width: 1101px) {
    .brand-toggle {
        order: 5;
    }
}