/* HERO WRAPPER */
.hero-shell {
    position: relative;
    z-index: 2;
    padding: 8px 0 8px;
    background: transparent !important;
}

.hero-shell__container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    background: transparent !important;
}

.hero-shell--full .hero-shell__container {
    max-width: none;
    padding: 0;
}

/* HERO BANNER */
.hero-banner {
    position: relative;
    min-height: 484px;
    border-radius: 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255,255,255,0.03);
    background: transparent !important;
}

.hero-banner__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

.hero-banner__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4,8,18,0.10) 0%, rgba(4,8,18,0.02) 35%, rgba(4,8,18,0.05) 100%),
        radial-gradient(circle at 77% 27%, rgba(84, 135, 255, 0.06), transparent 30%);
    pointer-events: none;
}

/* POSITIONING */
.hero-banner__content {
    position: absolute;
    inset: 0;
    display: flex;
    padding: 32px;
    z-index: 2;
}

.hero-banner__content--left {
    justify-content: flex-start;
}

.hero-banner__content--center {
    justify-content: center;
}

.hero-banner__content--right {
    justify-content: flex-end;
}

.hero-banner__content--v-top {
    align-items: flex-start;
}

.hero-banner__content--v-center {
    align-items: center;
}

.hero-banner__content--v-bottom {
    align-items: flex-end;
}

/* GLASS CARD */
.hero-card {
    width: min(100%, 490px);
    max-width: 490px;
    border-radius: 26px;
    padding: 28px 30px 24px;
    background: linear-gradient(
        180deg,
        rgba(14, 23, 44, 0.24),
        rgba(9, 15, 31, 0.10)
    );
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.04),
        0 20px 60px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.hero-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(228, 236, 255, 0.80);
}

.hero-card__eyebrow-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #6b9bff;
    box-shadow: 0 0 12px rgba(107, 155, 255, 0.85);
    flex: 0 0 9px;
}

.hero-card__title {
    margin: 0 0 16px;
    max-width: none;
    width: 100%;
    font-size: 34px !important;
    line-height: 0.96;
    font-weight: 800;
    letter-spacing: -0.035em;
    white-space: nowrap;
}

.hero-card__title-text {
    position: relative;
    display: inline-block;
    color: #dce8ff;
}

.hero-card__title-text--shine {color:var(--hero-title-color,#dce8ff)}
.hero-card__title-text--shine::after {
    content:attr(data-shine-text); position:absolute; inset:0; pointer-events:none;
    background-image:linear-gradient(110deg, transparent 38%, var(--shine-color,#fff) 50%, transparent 62%);
    background-size:250% 100%; background-repeat:no-repeat;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
    opacity:var(--shine-opacity,1);
    filter:brightness(var(--shine-brightness,1.6)) drop-shadow(0 0 var(--shine-glow,12px) var(--shine-color,#fff));
    animation:heroTitleSweep var(--shine-duration,3s) linear infinite;
}
@keyframes heroTitleSweep {
    0% {background-position: 100% 0;}
    85%, 100% {background-position: 0% 0;}
}

.hero-card__subtitle {
    margin: 0 0 22px;
    max-width: 31ch;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(224, 232, 247, 0.78);
}

/* ACTIONS */
.hero-card__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}

.hero-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.03em;
    overflow: hidden;
    transition:
        transform 0.22s ease,
        opacity 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease,
        box-shadow 0.22s ease;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 10px 26px rgba(0,0,0,0.18);
    white-space: nowrap;
    appearance: none;
    cursor: pointer;
    background: transparent;
    color: #eef7ff;
}

.hero-btn__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: 0 0 10px;
}

.hero-btn__label {
    position: relative;
    z-index: 2;
}

.hero-btn::after {
    content: "";
    position: absolute;
    top: -140%;
    left: -42%;
    width: 26%;
    height: 360%;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.24) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: rotate(18deg);
    transition: left 0.78s ease;
    pointer-events: none;
}

.hero-btn:hover::after {
    left: 118%;
}

.hero-btn:hover {
    transform: translateY(-1px);
    opacity: 0.98;
}

.hero-btn--primary {
    color: #eef7ff;
    background: rgba(56, 79, 131, 0.42);
    border-color: rgba(88, 124, 210, 0.20);
}

.hero-btn--primary .hero-btn__dot {
    background: #5dffd8;
    box-shadow: 0 0 12px rgba(93, 255, 216, 0.95);
}

.hero-btn--primary:hover {
    background: rgba(67, 94, 154, 0.52);
}

.hero-btn--secondary,
.hero-btn--ghost {
    color: rgba(233, 240, 255, 0.88);
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

.hero-btn--secondary .hero-btn__dot,
.hero-btn--ghost .hero-btn__dot {
    background: rgba(255,255,255,0.24);
    box-shadow: 0 0 10px rgba(255,255,255,0.14);
}

.hero-btn--secondary:hover,
.hero-btn--ghost:hover {
    background: rgba(255,255,255,0.065);
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    .hero-banner {
        min-height: 440px;
    }

    .hero-card {
        width: min(100%, 500px);
        max-width: 500px;
    }

    .hero-card__title {
        font-size: 32px !important;
    }
}

@media (max-width: 860px) {
    .hero-shell__container {
        padding: 0 16px;
    }

    .hero-banner {
        min-height: 640px;
    }

    .hero-banner__content {
        justify-content: center !important;
        align-items: flex-end !important;
        padding: 18px;
    }

    .hero-card {
        width: 100%;
        max-width: 100%;
        padding: 24px 20px 22px;
    }

    .hero-card__title {
        max-width: none;
        font-size: 30px !important;
    }

    .hero-card__subtitle {
        max-width: none;
        font-size: 15px;
    }

    .hero-btn {
        min-height: 44px;
        padding: 0 16px;
        font-size: 13px;
    }
}
/* Independent decorative layer, positioned within a ten-by-five grid. */
.hero-element-grid {position:absolute; inset:24px; z-index:1; pointer-events:none}
.hero-element {position:absolute; width:var(--element-width); left:var(--element-x); top:var(--element-y); transform:translate(calc(-1 * var(--element-x)), calc(-1 * var(--element-y))); font-size:clamp(16px, 2.5vw, 32px); font-weight:700; overflow-wrap:anywhere}
.hero-element img {display:block; width:100%; max-height:360px; object-fit:contain}
.hero-element div {margin-top:12px}
.hero-card__title {white-space:normal; overflow-wrap:anywhere; line-height:1.1}
.cms-slider__slide[hidden], .cms-slider__controls[hidden] {display:none}
.cms-slider__controls {display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:12px 20px 24px}
.cms-slider__controls button {min-width:40px; min-height:40px; border:1px solid currentColor; border-radius:24px; background:transparent; color:var(--site-text); cursor:pointer; padding:8px 14px}
.cms-slider__controls button[aria-pressed=true] {background:var(--site-accent); color:#fff}
.cms-slider__controls button:focus-visible, .hero-btn:focus-visible {outline:3px solid var(--site-accent); outline-offset:4px}
.advantages {position:relative; z-index:2; max-width:1180px; margin:32px auto; padding:24px; color:var(--advantages-text)}
.advantages h2 {font-size:clamp(26px, 4vw, 42px); margin:0 0 16px; overflow-wrap:anywhere}
.advantages__subtitle {margin:0 0 28px; line-height:1.6}
.advantages__grid {display:grid; grid-template-columns:repeat(var(--advantages-columns), minmax(0,1fr)); gap:20px}
.advantages__card {background:var(--advantages-bg); border:1px solid #ffffff20; border-radius:24px; padding:28px; overflow-wrap:anywhere}
.advantages__card img {object-fit:contain}
.advantages__card h3 {font-size:22px; margin:20px 0 12px}
.advantages__card p {line-height:1.65; margin:0}
.advantages__number {color:var(--advantages-accent); font-size:32px; font-weight:700}
@media(max-width:860px) {
  .hero-banner:has(.hero-element-grid) .hero-element-grid {position:relative; inset:auto; height:240px; margin:20px}
  .hero-banner__content {position:relative; min-height:600px}
  .hero-banner:has(.hero-element-grid) .hero-banner__content {min-height:0}
  .hero-element img {max-height:180px}
  .advantages__grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px) {.advantages__grid {grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce) {.hero-card__title-text--shine::after {animation-duration:max(8s,var(--shine-duration,3s))}}

.hero-banner__content--grid {inset:32px; padding:0; display:block; pointer-events:none}
.hero-banner__content--grid .hero-card {position:absolute; left:var(--text-x); top:var(--text-y); transform:translate(calc(-1 * var(--text-x)), calc(-1 * var(--text-y))); pointer-events:auto; box-sizing:border-box}
@media(max-width:860px) {
 .hero-banner__content--grid {inset:auto; padding:18px; display:flex}
 .hero-banner__content--grid .hero-card {position:relative; left:auto; top:auto; transform:none}
}

/* Explicit dimensions prevent flex stretching and keep the card within the banner. */
.hero-banner__content--grid .hero-card {width:min(100%, var(--card-width,490px)); max-width:none; min-height:var(--card-min-height,0px); padding:var(--card-padding,28px); height:auto; align-self:center}
.hero-banner:has(.hero-banner__content--grid) {min-height:max(484px, calc(var(--card-min-height,0px) + 64px))}
@media(max-width:860px) {
 .hero-banner__content--grid .hero-card {width:100%; min-height:0; padding:min(var(--card-padding,28px),32px)}
}

/* Card media is edge-to-edge; only the text area has padding. */
.advantages__card {position:relative; padding:0; overflow:hidden; min-width:0}
.advantages__card .advantages__image {display:block; width:100%; height:var(--advantage-image-height,220px); object-fit:cover}
.advantages__content {position:relative; padding:28px}
.advantages__content > h3:first-child {margin-top:0}
.advantages__card--background {min-height:var(--advantage-image-height,220px); display:flex; align-items:flex-end; isolation:isolate}
.advantages__card--background .advantages__image {position:absolute; inset:0; width:100%; height:100%; z-index:-1}
.advantages__card--background .advantages__content {width:100%; box-sizing:border-box}
.advantages__html {margin-top:20px; overflow-wrap:anywhere}
.advantages__html--section {margin-top:28px}
.advantages__html img, .advantages__html video, .advantages__html iframe {max-width:100%}

.advantages__card--glass {
 background:color-mix(in srgb, var(--advantages-bg) 24%, transparent);
 border:1px solid rgba(255,255,255,.3);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 16px 40px rgba(0,0,0,.18);
 backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
}
.advantages__card--glass.advantages__card--background .advantages__content {
 background:color-mix(in srgb, var(--advantages-bg) 24%, transparent);
 backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
 border-top:1px solid rgba(255,255,255,.25);
}

/* A single scrollable row, with a configurable number of visible cards. */
.advantages__grid {grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:calc((100% - (var(--advantages-columns) - 1) * 20px) / var(--advantages-columns)); overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding-bottom:12px; overscroll-behavior-x:contain}
.advantages__card {scroll-snap-align:start; display:flex; flex-direction:column}
.advantages__content {flex:1; display:flex; flex-direction:column}
.advantages__copy {flex:0 0 auto}
.advantages__content--center .advantages__copy {margin-top:auto; margin-bottom:auto}
.advantages__content--bottom .advantages__copy {margin-top:auto}
.advantages__footer {display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; padding-top:24px}
.advantages__footer--center {justify-content:center}
.advantages__footer--right {justify-content:flex-end}
.advantages__copy .advantages__card-subtitle {margin:0 0 14px}
.advantages__intro {margin:0 0 28px; line-height:1.65}
.advantages__controls {display:flex; justify-content:flex-end; gap:10px; margin-bottom:14px}
.advantages__controls[hidden] {display:none}
.advantages__controls button {width:44px; height:44px; border:1px solid currentColor; border-radius:50%; color:var(--advantages-text); background:transparent; cursor:pointer; font-size:24px}
.advantages__controls button:disabled {opacity:.3; cursor:default}
.advantages__controls button:focus-visible, .advantages__grid:focus-visible {outline:2px solid var(--advantages-accent); outline-offset:3px}
.advantages__card--glass::after {content:""; position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:inherit; background:linear-gradient(120deg,rgba(255,255,255,.3),rgba(255,255,255,.04) 22%,transparent 38%,rgba(255,255,255,.17) 48%,transparent 60%); background-size:220% 100%; background-position:100% 0; transition:background-position 1s ease}
.advantages__card--glass:hover::after, .advantages__card--glass:focus-within::after {background-position:0 0}
@media(max-width:860px) {.advantages__grid {grid-auto-columns:calc((100% - 20px) / 2)}}
@media(max-width:560px) {.advantages__grid {grid-auto-columns:100%}}
@media(prefers-reduced-motion:reduce) {.advantages__card--glass::after {transition:none}}

/* Optional pointer-controlled 3D surface. */
.advantages__grid:has([data-tilt]) {padding-top:20px; padding-bottom:24px}
.advantages__card--tilt {transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); transition:transform .22s ease-out; transform-origin:center; isolation:isolate}
.advantages__card--tilt.is-tilting {transition:transform .08s linear; will-change:transform; z-index:3}
.advantages__card--tilt > .advantages__glare {position:absolute; inset:0; z-index:4; border-radius:inherit; pointer-events:none; opacity:var(--tilt-glare,0); background:radial-gradient(circle at var(--glare-x,50%) var(--glare-y,50%),rgba(255,255,255,.7),rgba(255,255,255,.2) 28%,transparent 65%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); transition:opacity .2s}
@media(prefers-reduced-motion:reduce) {
 .advantages__card--tilt.is-tilting {transition:transform .2s ease-out}
}

.advantages__footer {position:relative; z-index:5}
.advantages__footer .hero-btn {flex-shrink:0}

/* Keep footer controls on a normal paint layer inside glass/3D cards.
   Nested backdrop filters can lose their surface in Firefox compositing. */
.advantages__footer .hero-btn {
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}
/* Slider motion stays outside the element's grid-position transform. */
.cms-slider__slides {position:relative;isolation:isolate;overflow:hidden}
.cms-slider__slide.is-outgoing {position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:1}
.cms-slider__slide.is-incoming {position:relative;z-index:2}
.hero-element .hero-element__motion {position:relative;margin:0}
.hero-element .hero-element__pieces {position:absolute;inset:0;margin:0;pointer-events:none}
.hero-element__pieces img {position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.cms-slider__controls {gap:6px;padding:12px 20px 22px}
.cms-slider__controls button {display:inline-flex;align-items:center;justify-content:center;min-width:34px;min-height:34px;padding:7px 10px;background:#ffffff05;border:1px solid #ffffff26;color:#eef3ff99;backdrop-filter:blur(10px);font-size:12px;transition:background .2s,color .2s,border-color .2s}
.cms-slider__controls button[aria-pressed=true] {background:#ffffff18;color:#eef3ffcc;border-color:#ffffff44}
.cms-slider__controls button:hover {background:#ffffff24;color:#fff}
.cms-slider__controls [data-pause] {width:34px;padding:8px}
.slider-icon-play {display:none}
[data-pause][aria-pressed=true] .slider-icon-play {display:block}
[data-pause][aria-pressed=true] .slider-icon-stop {display:none}