/* ==========================================================================
   Hero
   ========================================================================== */

/* ==========================================================================
   Base
   ========================================================================== */

.hero {
    --hero-padding-top: clamp(var(--space-600), 10vh, var(--space-700));
    --hero-padding-bottom: clamp(var(--space-400), 7vh, var(--space-600));

    position: relative;

    display: flex;
    flex-direction: column;

    min-height: var(--hero-height);
    padding-top: var(--hero-padding-top);
    padding-bottom: var(--hero-padding-bottom);

    overflow: hidden;
    isolation: isolate;

    background-color: var(--hero-background);
    color: var(--color-white);
}

.hero::before,
.hero::after {
    display: none;
}

/* ==========================================================================
   Background & Orbits
   ========================================================================== */

.hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;
}

.hero__glow {
    position: absolute;
    top: 52%;
    left: 70%;

    width: 1000px;
    height: 900px;
    border-radius: 50%;

    pointer-events: none;

    transform: translate(-50%, -50%);

    background: radial-gradient(
        ellipse at center,
        rgba(184, 212, 223, 0.07) 0%,
        rgba(99, 154, 175, 0.10) 25%,
        rgba(99, 154, 175, 0.045) 48%,
        transparent 70%
    );
}

.hero__orbits-wrapper {
    position: absolute;
    top: 48%;
    left: 118%;

    width: 2000px;
    height: 2000px;

    pointer-events: none;

    transform: translate(-50%, -50%) scale(0.82);
    transform-origin: center center;
}

.hero__orbits-svg {
    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
}

.hero__orbit {
    fill: none;
    vector-effect: non-scaling-stroke;
}

/* Visual Hierarchy across 5 Orbits */
.hero__orbit--1 {
    stroke: rgb(from var(--color-accent) r g b / 12%);
    stroke-width: 1.25px;
}

.hero__orbit--2 {
    stroke: rgb(from var(--color-accent) r g b / 14%);
    stroke-width: 1.25px;
}

.hero__orbit--3 {
    stroke: rgb(from var(--color-accent) r g b / 18%);
    stroke-width: 1.5px;
}

.hero__orbit--4 {
    stroke: rgb(from var(--color-accent) r g b / 14%);
    stroke-width: 1.25px;
}

.hero__orbit--5 {
    stroke: rgb(from var(--color-accent) r g b / 10%);
    stroke-width: 1px;
}

.hero__point {
    fill: var(--color-accent);

    filter: drop-shadow(0 0 2px var(--hero-dot-glow));
}

.hero__ring {
    fill: none;
    stroke: var(--hero-dot-ring);
    stroke-width: 0.9px;
}

/* 14 Moving Points - Restrained Steel-Blue / Blue-Gray Brand Palette */

/* Primary Points (4 total: 8–9px visual diameter, brightest) */
.hero__point--primary-1 {
    fill: #C7E1E8;
    opacity: 0.95;
}

.hero__point--primary-2 {
    fill: #B9DCE6;
    opacity: 0.95;
}

.hero__point--primary-3 {
    fill: #C7E1E8;
    opacity: 0.95;
}

.hero__point--primary-4 {
    fill: #B9DCE6;
    opacity: 0.95;
}

/* Medium Points (4 total: 7–8px visual diameter, mid opacity) */
.hero__point--medium-3 {
    fill: #91C3D3;
    opacity: 0.80;
}

.hero__point--medium-4 {
    fill: #A7CCD8;
    opacity: 0.80;
}

.hero__point--medium-5a {
    fill: #91C3D3;
    opacity: 0.85;
}

.hero__point--medium-5b {
    fill: #A7CCD8;
    opacity: 0.80;
}

/* Subtle Points (4 total: 6–7px visual diameter, lower opacity) */
.hero__point--subtle-1 {
    fill: #79AFC3;
    opacity: 0.65;
}

.hero__point--subtle-2 {
    fill: #639AAF;
    opacity: 0.65;
}

.hero__point--subtle-4 {
    fill: #79AFC3;
    opacity: 0.65;
}

.hero__point--subtle-5 {
    fill: #639AAF;
    opacity: 0.60;
}

.hero__rotator {
    transform-box: view-box;
    transform-origin: 50% 50%;
}

.hero__rotator--1 {
    animation: hero-orbit-rotate-1 20s linear -4s infinite;
}

.hero__rotator--2 {
    animation: hero-orbit-rotate-2 26s linear -9s infinite;
}

.hero__rotator--3 {
    animation: hero-orbit-rotate-3 32s linear -15s infinite;
}

.hero__rotator--4 {
    animation: hero-orbit-rotate-4 38s linear -7s infinite;
}

.hero__rotator--5 {
    animation: hero-orbit-rotate-5 44s linear -22s infinite;
}

@keyframes hero-orbit-rotate-1 {
    from {
        transform: rotate(130deg);
    }
    to {
        transform: rotate(490deg);
    }
}

@keyframes hero-orbit-rotate-2 {
    from {
        transform: rotate(190deg);
    }
    to {
        transform: rotate(-170deg);
    }
}

@keyframes hero-orbit-rotate-3 {
    from {
        transform: rotate(150deg);
    }
    to {
        transform: rotate(510deg);
    }
}

@keyframes hero-orbit-rotate-4 {
    from {
        transform: rotate(40deg);
    }
    to {
        transform: rotate(-320deg);
    }
}

@keyframes hero-orbit-rotate-5 {
    from {
        transform: rotate(90deg);
    }
    to {
        transform: rotate(450deg);
    }
}

.hero.hero--animation-paused .hero__rotator {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .hero__rotator {
        animation: none;
    }
}

/* ==========================================================================
   Layout
   ========================================================================== */

.hero > .container {
    position: relative;
    z-index: 1;

    display: grid;
    grid-template-rows: minmax(0, 1.6fr) auto minmax(0, 0.4fr);

    flex: 1;
}

.hero__inner {
    display: grid;
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-rows: auto auto;
    align-content: start;
    align-items: start;

    width: 100%;

    column-gap: clamp(var(--space-300), 6vw, var(--space-650));
    row-gap: var(--space-400);
}

/* ==========================================================================
   Content
   ========================================================================== */


.hero__text {
    display: flex;
    flex-direction: column;

    gap: var(--space-300);
}

.hero__title {
    max-width: 16ch;

    font-size: var(--font-size-800);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-tight);
    letter-spacing: -0.01em;
    color: var(--color-gray-100);
}

.hero__description {
    max-width: 42ch;

    font-size: var(--font-size-350);
    line-height: var(--line-height-body);
}

/* ==========================================================================
   Actions
   ========================================================================== */

.hero__actions {
    display: flex;
    align-items: center;

    gap: var(--space-300);
}


/* ==========================================================================
   Solutions
   ========================================================================== */

.hero__solutions {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-200);

    justify-self: center;

    width: min(100%, 320px);
    margin: 0;
    padding: 0;

    list-style: none;
}

.hero-solution {
    display: flex;
    align-items: center;

    gap: var(--space-300);

    padding: var(--space-150) var(--space-250);

    border: var(--border-width) solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);

    background-color: rgba(255, 255, 255, 0.05);
}

.hero-solution__icon {
    display: block;

    flex: 0 0 auto;
    width: 32px;
    height: 32px;

    color: var(--color-accent);
}

.hero-solution__content {
    display: flex;
    flex-direction: column;

    gap: var(--space-050);
}

.hero-solution__title {
    color: var(--color-gray-100);

    font-size: var(--font-size-400);
    font-weight: var(--font-weight-550);
    line-height: var(--line-height-heading);
}

.hero-solution__description {
    color: var(--color-gray-300);

    font-size: var(--font-size-300);
    line-height: var(--line-height-heading);
}


/* ==========================================================================
   Responsive
   ========================================================================== */

   @media (min-width: 1440px) and (min-height: 900px) {
       .hero > .container {
           grid-template-rows:
               minmax(0, 1.3fr)
               auto
               minmax(0, 0.7fr);
       }

       .hero__title {
           font-size: var(--font-size-825);
       }

       .hero__glow {
           top: 52%;
           left: 68%;
       }

       .hero__glow {
           width: 1350px;
           height: 1000px;
           background: radial-gradient(
               ellipse at center,
               rgba(184, 212, 223, 0.035) 0%,
               rgba(99, 154, 175, 0.045) 32%,
               rgba(99, 154, 175, 0.018) 58%,
               rgba(99, 154, 175, 0.001) 78%,
               transparent 100%
           );
       }

       .hero__orbits-wrapper {
           left: 110%;
           transform: translate(-50%, -50%) scale(1);
       }
   }


   @media (max-width: 1199px) {

    .hero__title {
        font-size: clamp(
            var(--font-size-650),
            calc(1.25rem + 3vw),
            var(--font-size-750)
        );
    }

    .hero__description {
        font-size: var(--font-size-300);
    }

    .hero-solution__title {
        font-size: var(--font-size-300);
    }

    .hero-solution__description {
        font-size: var(--font-size-250);
    }

    .hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);

        column-gap: var(--space-400);
    }

    .hero__glow {
        top: 58%;
        left: 74%;

        background: radial-gradient(
            ellipse at center,
            rgba(184, 212, 223, 0.065) 0%,
            rgba(99, 154, 175, 0.095) 28%,
            rgba(99, 154, 175, 0.04) 50%,
            transparent 72%
        );
    }

    .hero__orbits-wrapper {
        left: 122%;
        transform: translate(-50%, -50%) scale(0.74);
    }

}

@media (max-width: 1023px) {

    .hero__glow {
        top: 64%;
        left: 58%;

        opacity: 0.9;
    }

    .hero__orbits-wrapper {
        top: 44%;
        left: 140%;
        transform: translate(-50%, -50%) scale(0.50);
    }

    .hero__orbit--1 {
        stroke: rgb(from var(--color-accent) r g b / 16%);
    }

    .hero__orbit--2,
    .hero__orbit--4 {
        stroke: rgb(from var(--color-accent) r g b / 18%);
    }

    .hero__orbit--3 {
        stroke: rgb(from var(--color-accent) r g b / 23%);
    }

    .hero__orbit--5 {
        stroke: rgb(from var(--color-accent) r g b / 13%);
    }

    .hero__point--primary-1,
    .hero__point--primary-2,
    .hero__point--primary-3 {
        r: 5.25px;
    }

    .hero__point--primary-4 {
        r: 5px;
    }

    .hero__point--medium-3,
    .hero__point--medium-4,
    .hero__point--medium-5a,
    .hero__point--medium-5b {
        r: 4.5px;
    }

    .hero__point--subtle-1,
    .hero__point--subtle-2,
    .hero__point--subtle-4 {
        r: 4px;
    }

    .hero__point--subtle-5 {
        r: 3.75px;
    }

    .hero {
        min-height: auto;
        padding-top: max(
            var(--hero-padding-top),
            calc(
                var(--header-offset) +
                var(--header-height) +
                var(--space-300)
            )
        );
    }

    .hero > .container {
        grid-template-rows: auto;
    }

    .hero__inner {
        grid-row: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        align-content: start;

        gap: var(--space-400);
    }

    .hero__text {
        margin-top: var(--space-100);
    }

    .hero__title {
        margin-bottom: var(--space-100);
    }

    .hero__actions {
        flex-wrap: wrap;

        gap: var(--space-200);

        margin-top: var(--space-450);
    }

    .hero__solutions {
        grid-column: 1;
        grid-row: auto;
        justify-self: start;

        grid-template-columns: repeat(
            auto-fit,
            minmax(min(100%, 280px), 1fr)
        );

        width: min(100%, 680px);
        margin-top: var(--space-100);
    }

    .hero-solution__content {
        min-width: 0;
    }

}

@media (max-width: 399px) {

    .hero__glow {
        top: 70%;
        left: 58%;

        opacity: 0.75;
    }

    .hero__orbits-wrapper {
        top: 44%;
        left: 150%;
        transform: translate(-50%, -50%) scale(0.50);
    }

    .hero__text {
        margin-top: var(--space-300);
    }

    .hero__actions {
        flex-wrap: nowrap;

        gap: var(--space-100);
    }

    .hero__actions .button {
        padding-inline: var(--space-150);
    }

    html[lang="en"] .hero__actions > .button--secondary {
        min-width: 130px;
    }

    html[lang="kk"] .hero__actions {
        flex-wrap: wrap;
    }

}

@media (max-width: 359px) {

    html[lang="en"] .hero__actions {
        flex-wrap: wrap;
    }

}