/* =========================================================
   RUSHABH GLOBAL LOGISTICS
   Main stylesheet
   ---------------------------------------------------------
   Editing guide:
   1. Global colors / fonts: :root
   2. Shared layout: sections / container / buttons
   3. Components: cards / navbar / hero / footer
   4. Responsive rules: bottom of file
   ========================================================= */

:root {
    --primary: #0697d7;
    --primary-dark: #036c9b;
    --primary-soft: #e9f8fe;
    --navy: #071621;
    --navy-2: #0b2233;
    --ink: #11212d;
    --muted: #61717d;
    --line: #dfe8ed;
    --white: #ffffff;
    --surface: #f5f8fa;
    --shadow-sm: 0 10px 30px rgba(7, 22, 33, 0.06);
    --shadow-md: 0 20px 55px rgba(7, 22, 33, 0.10);
    --shadow-lg: 0 35px 90px rgba(7, 22, 33, 0.16);
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 30px;
    --transition: 280ms cubic-bezier(.2,.8,.2,1);
    --display: "Space Grotesk", sans-serif;
    --body: "Manrope", sans-serif;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

body {
    margin: 0;
    color: var(--ink);
    background: var(--white);
    font-family: var(--body);
    line-height: 1.7;
    overflow-x: hidden;
}

body.menu-open {
    overflow: hidden;
}

::selection {
    color: var(--white);
    background: var(--primary);
}

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

img {
    max-width: 100%;
    display: block;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--navy);
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.035em;
}

p:last-child {
    margin-bottom: 0;
}

.container {
    position: relative;
    z-index: 2;
}

.section {
    position: relative;
    padding: 110px 0;
}

.section-soft {
    background: var(--surface);
}

.section-dark {
    color: rgba(255,255,255,.78);
    background:
        radial-gradient(circle at 10% 0%, rgba(6,151,215,.16), transparent 30%),
        radial-gradient(circle at 90% 100%, rgba(6,151,215,.13), transparent 30%),
        var(--navy);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
    color: var(--white);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--primary-dark);
    font-size: .79rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 34px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
}

.section-heading {
    max-width: 760px;
    margin-bottom: 48px;
}

.section-heading h2 {
    margin-bottom: 16px;
    font-size: clamp(2.1rem, 4vw, 3.65rem);
    line-height: 1.03;
}

.section-heading p {
    max-width: 690px;
    color: var(--muted);
    font-size: 1.02rem;
}

.section-dark .section-heading p {
    color: rgba(255,255,255,.66);
}

/* ---------- Utility ---------- */

.text-gradient {
    color: var(--primary);
    background: linear-gradient(100deg, #058bd0 0%, #08bfe6 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.soft-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .25;
    background-image:
        linear-gradient(rgba(7,22,33,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(7,22,33,.035) 1px, transparent 1px);
    background-size: 70px 70px;
    mask-image: linear-gradient(to bottom, black, transparent 80%);
}

.divider {
    width: 100%;
    height: 1px;
    background: var(--line);
}

.btn-rgl {
    --btn-shadow: 0 16px 35px rgba(6,151,215,.22);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--white);
    background: var(--primary);
    box-shadow: var(--btn-shadow);
    font-size: .93rem;
    font-weight: 800;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}

.btn-rgl::before {
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    content: "";
    transition: transform 650ms cubic-bezier(.2,.8,.2,1);
}

.btn-rgl span,
.btn-rgl i {
    position: relative;
    z-index: 2;
}

.btn-rgl:hover {
    color: var(--white);
    background: var(--primary-dark);
    box-shadow: 0 18px 45px rgba(6,151,215,.30);
    transform: translateY(-3px);
}

.btn-rgl:hover::before {
    transform: translateX(120%);
}

.btn-rgl.btn-outline-rgl {
    color: var(--navy);
    border-color: var(--line);
    background: rgba(255,255,255,.78);
    box-shadow: none;
}

.btn-rgl.btn-outline-rgl:hover {
    color: var(--navy);
    border-color: rgba(6,151,215,.32);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.btn-rgl.btn-light-rgl {
    color: var(--navy);
    background: var(--white);
}

.btn-rgl.btn-light-rgl:hover {
    color: var(--navy);
    background: #edfafd;
}

.icon-circle {
    display: inline-grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    color: var(--primary);
    background: var(--primary-soft);
}

/* ---------- Announcement / Header ---------- */

.topline {
    position: relative;
    z-index: 1100;
    color: rgba(255,255,255,.80);
    background: #04111a;
    font-size: .76rem;
}

.topline-inner {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.topline-left,
.topline-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topline a {
    transition: color var(--transition);
}

.topline a:hover {
    color: var(--primary);
}

.site-header {
    position: sticky !important;
    top: 0;
    z-index: 1050;
    border-bottom: 1px solid transparent;
    background: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    transition: background 380ms ease, box-shadow 380ms ease, border-color 380ms ease, backdrop-filter 380ms ease;
}

.site-header.is-scrolled {
    background: rgba(255,255,255,.92);
    border-bottom-color: rgba(7,22,33,.06);
    box-shadow: 0 12px 35px rgba(7,22,33,.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.site-header:not(.is-scrolled) .nav-links a,
.site-header:not(.is-scrolled) .mobile-nav-toggle {
    color: #fff;
}

.navbar-rgl {
    min-height: 84px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.brand-logo-shell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 202px;
    height: 62px;
    padding: 7px 14px;
    overflow: hidden;
    border: 1px solid rgba(6,151,215,.18);
    border-radius: 14px;
    background:
        radial-gradient(circle at 20% 20%, rgba(6,151,215,.10), transparent 60%),
        #fff;
    box-shadow: 0 8px 30px rgba(7,22,33,.05);
}

.brand-logo-shell::after {
    position: absolute;
    width: 90px;
    height: 90px;
    top: -48px;
    right: -25px;
    border-radius: 50%;
    background: rgba(6,151,215,.09);
    content: "";
}

.brand-logo {
    position: relative;
    z-index: 2;
    width: 174px;
    height: auto;
    object-fit: contain;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 14px;
    color: #32434e;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 800;
    transition: color var(--transition), background var(--transition);
}

.nav-links a::after {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 5px;
    height: 2px;
    border-radius: 999px;
    background: var(--primary);
    content: "";
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--navy);
    background: rgba(6,151,215,.07);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

.mobile-nav-toggle {
    width: 46px;
    height: 46px;
    display: none;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--navy);
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    min-height: calc(100vh - 120px);
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--white);
    background:
        linear-gradient(90deg, rgba(4,17,26,.95) 0%, rgba(4,17,26,.73) 46%, rgba(4,17,26,.28) 100%),
        url("https://images.unsplash.com/photo-1494412574643-ff11b0a0d6be?auto=format&fit=crop&w=2200&q=88")
        center / cover no-repeat;
}

.hero::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 74% 28%, rgba(6,151,215,.25), transparent 25%),
        linear-gradient(130deg, rgba(6,151,215,.09), transparent 34%);
    content: "";
}

.hero::after {
    position: absolute;
    inset: auto 0 0 0;
    height: 150px;
    background: linear-gradient(to top, var(--white), transparent);
    opacity: .12;
    content: "";
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 910px;
    padding: 95px 0 105px;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 8px 13px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    color: rgba(255,255,255,.86);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(14px);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-kicker i {
    color: #4fd3ff;
}

.hero h1 {
    max-width: 920px;
    margin-bottom: 22px;
    color: var(--white);
    font-size: clamp(3.1rem, 7vw, 6.35rem);
    line-height: .94;
}

.hero p {
    max-width: 760px;
    margin-bottom: 30px;
    color: rgba(255,255,255,.76);
    font-size: clamp(1rem, 2vw, 1.23rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    max-width: 840px;
    margin-top: 48px;
}

.hero-meta-card {
    padding: 17px 18px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(18px);
}

.hero-meta-card strong {
    display: block;
    margin-bottom: 3px;
    color: var(--white);
    font-size: .98rem;
}

.hero-meta-card span {
    color: rgba(255,255,255,.62);
    font-size: .78rem;
}

.hero-scroll {
    position: absolute;
    z-index: 3;
    right: 35px;
    bottom: 34px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.62);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    transform: rotate(90deg) translateX(100%);
    transform-origin: right bottom;
}

.hero-scroll span {
    width: 48px;
    height: 1px;
    background: currentColor;
}

.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(90,215,255,.58);
    box-shadow: 0 0 18px rgba(90,215,255,.52);
    animation: floatParticle 8s ease-in-out infinite;
}

.hero-particle:nth-child(1) { top: 22%; left: 74%; animation-delay: -1s; }
.hero-particle:nth-child(2) { top: 50%; left: 81%; animation-delay: -3s; }
.hero-particle:nth-child(3) { top: 36%; left: 88%; animation-delay: -5s; }
.hero-particle:nth-child(4) { top: 69%; left: 68%; animation-delay: -2s; }
.hero-particle:nth-child(5) { top: 14%; left: 61%; animation-delay: -4s; }

@keyframes floatParticle {
    0%, 100% { transform: translate3d(0,0,0); opacity: .35; }
    50% { transform: translate3d(14px,-22px,0); opacity: 1; }
}

/* ---------- Trust strip ---------- */

.trust-strip {
    position: relative;
    z-index: 5;
    margin-top: -34px;
}

.trust-strip-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    border: 1px solid rgba(7,22,33,.08);
    border-radius: 24px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--shadow-md);
}

.trust-item {
    position: relative;
    padding: 25px 28px;
}

.trust-item + .trust-item::before {
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 0;
    width: 1px;
    background: var(--line);
    content: "";
}

.trust-item strong {
    display: block;
    color: var(--navy);
    font-family: var(--display);
    font-size: 1.45rem;
    letter-spacing: -.04em;
}

.trust-item span {
    color: var(--muted);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ---------- About ---------- */

.about-grid {
    display: grid;
    grid-template-columns: 1.02fr .98fr;
    gap: 74px;
    align-items: center;
}

.about-visual {
    position: relative;
    min-height: 580px;
}

.about-main-image {
    position: absolute;
    inset: 0 75px 70px 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    transform: translateZ(0);
}

.about-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}

.about-main-image:hover img {
    transform: scale(1.045);
}

/* ---------- Animated info card (hover reveal) ---------- */

.about-flip {
    perspective: 1600px;
}

.about-flip-cover,
.about-flip-content {
    position: absolute;
    inset: 0;
}

.about-flip-cover {
    z-index: 2;
    overflow: hidden;
    transform-origin: left center;
    transition: transform 700ms cubic-bezier(.77,0,.175,1), box-shadow 700ms ease;
    box-shadow: 12px 0 30px rgba(3,10,16,.25);
}

.about-flip-cover img {
    transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}

.about-flip-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(190deg, rgba(4,14,22,0) 45%, rgba(4,14,22,.72) 100%);
}

.about-flip-hint {
    position: absolute;
    left: 22px;
    bottom: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(6,17,26,.55);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .03em;
    transition: opacity 300ms ease;
}

.about-flip-content {
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    padding: 46px 44px;
    background:
        linear-gradient(150deg, rgba(6,151,215,.97), rgba(3,34,51,.98));
    color: #fff;
}

.about-flip-content .eyebrow {
    color: rgba(255,255,255,.85);
    margin-bottom: 10px;
}

.about-flip-content .eyebrow::before {
    background: #fff;
    opacity: .85;
}

.about-flip-content h3 {
    margin: 0;
    font-family: var(--display);
    font-size: 1.5rem;
    line-height: 1.25;
}

.about-flip-content ul {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.about-flip-content li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .92rem;
    line-height: 1.5;
    color: rgba(255,255,255,.9);
}

.about-flip-content li i {
    margin-top: 4px;
    color: #7fe3ff;
}

.about-main-image:hover .about-flip-cover,
.about-main-image:focus-within .about-flip-cover {
    transform: perspective(1600px) rotateY(-78deg) translateX(-6%);
    box-shadow: 40px 0 60px rgba(3,10,16,.4);
}

.about-main-image:hover .about-flip-hint {
    opacity: 0;
}

@media (max-width: 991px) {
    .about-flip-content {
        padding: 30px;
    }

    .about-main-image:hover .about-flip-cover,
    .about-main-image:focus-within .about-flip-cover {
        transform: none;
    }

    .about-flip-cover {
        transition: opacity 400ms ease;
    }

    .about-main-image:active .about-flip-cover {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-flip-cover {
        transition: none;
    }
}

.about-accent {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 48%;
    min-height: 190px;
    display: grid;
    align-content: center;
    gap: 6px;
    padding: 30px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--radius-md);
    color: var(--white);
    background:
        linear-gradient(145deg, rgba(6,151,215,.95), rgba(3,108,155,.96)),
        var(--primary);
    box-shadow: var(--shadow-lg);
}

.about-accent strong {
    color: var(--white);
    font-family: var(--display);
    font-size: 3.4rem;
    line-height: .9;
}

.about-accent span {
    color: rgba(255,255,255,.80);
    font-size: .82rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.about-copy > p {
    color: var(--muted);
    font-size: 1rem;
}

.feature-list {
    display: grid;
    gap: 12px;
    margin-top: 30px;
}

.feature-row {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.feature-row:hover {
    border-color: rgba(6,151,215,.22);
    box-shadow: var(--shadow-sm);
    transform: translateY(-3px);
}

.feature-row h3 {
    margin-bottom: 4px;
    font-size: 1rem;
}

.feature-row p {
    color: var(--muted);
    font-size: .84rem;
}

/* ---------- Stat band ---------- */

.stats-band {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 15%, rgba(90,215,255,.13), transparent 22%),
        radial-gradient(circle at 90% 80%, rgba(90,215,255,.09), transparent 20%),
        var(--navy);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 24px;
    background: rgba(255,255,255,.08);
}

.stat-item {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 28px;
    background: rgba(255,255,255,.03);
}

.stat-number {
    color: var(--white);
    font-family: var(--display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
}

.stat-label {
    margin-top: 10px;
    color: rgba(255,255,255,.58);
    font-size: .80rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------- Services ---------- */

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.service-card {
    position: relative;
    min-height: 305px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: 0 1px 0 rgba(7,22,33,.02);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.service-card::before {
    position: absolute;
    width: 130px;
    height: 130px;
    top: -64px;
    right: -64px;
    border-radius: 50%;
    background: rgba(6,151,215,.08);
    content: "";
    transition: transform 500ms cubic-bezier(.2,.8,.2,1);
}

.service-card:hover {
    border-color: rgba(6,151,215,.22);
    box-shadow: var(--shadow-md);
    transform: translateY(-8px);
}

.service-card:hover::before {
    transform: scale(1.65);
}

.service-icon {
    position: relative;
    z-index: 2;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    margin-bottom: 24px;
    border-radius: 16px;
    color: var(--primary);
    background: var(--primary-soft);
    font-size: 1.15rem;
    transition: transform var(--transition), background var(--transition), color var(--transition);
}

.service-card:hover .service-icon {
    color: var(--white);
    background: var(--primary);
    transform: rotate(-4deg) scale(1.05);
}

.service-card h3 {
    position: relative;
    z-index: 2;
    margin-bottom: 9px;
    font-size: 1.18rem;
}

.service-card p {
    position: relative;
    z-index: 2;
    color: var(--muted);
    font-size: .87rem;
}

.service-link {
    position: absolute;
    right: 26px;
    bottom: 25px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary-dark);
    font-size: .78rem;
    font-weight: 800;
}

/* ---------- Capability / approach ---------- */

.capability-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 60px;
    align-items: start;
}

.capability-panel {
    position: sticky;
    top: 125px;
}

.capability-list {
    display: grid;
    gap: 13px;
}

.capability-item {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    gap: 15px;
    align-items: center;
    padding: 19px 18px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--white);
    transition: transform var(--transition), box-shadow var(--transition);
}

.capability-item:hover {
    box-shadow: var(--shadow-sm);
    transform: translateX(5px);
}

.capability-item .number {
    color: rgba(6,151,215,.44);
    font-family: var(--display);
    font-size: .85rem;
    font-weight: 800;
}

.capability-item h3 {
    margin-bottom: 3px;
    font-size: 1rem;
}

.capability-item p {
    color: var(--muted);
    font-size: .82rem;
}

.capability-item i {
    color: var(--primary);
}

/* ---------- CTA / callout ---------- */

.cta-card {
    position: relative;
    overflow: hidden;
    padding: 56px 58px;
    border-radius: 30px;
    color: var(--white);
    background:
        radial-gradient(circle at 85% 25%, rgba(90,215,255,.25), transparent 18%),
        radial-gradient(circle at 12% 90%, rgba(90,215,255,.14), transparent 24%),
        linear-gradient(135deg, #062030, #0b3a52);
    box-shadow: var(--shadow-lg);
}

.cta-card::before,
.cta-card::after {
    position: absolute;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.cta-card::before {
    width: 360px;
    height: 360px;
    top: -260px;
    right: 4%;
}

.cta-card::after {
    width: 540px;
    height: 540px;
    bottom: -450px;
    left: -80px;
}

.cta-card > * {
    position: relative;
    z-index: 2;
}

.cta-card h2 {
    max-width: 760px;
    margin-bottom: 12px;
    color: var(--white);
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.cta-card p {
    max-width: 720px;
    color: rgba(255,255,255,.68);
}

/* ---------- Industries ---------- */

.industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.industry-card {
    min-height: 175px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    padding: 22px;
    overflow: hidden;
    border-radius: 22px;
    color: var(--white);
    background:
        linear-gradient(to top, rgba(4,17,26,.92), rgba(4,17,26,.05)),
        var(--industry-image) center / cover no-repeat;
    box-shadow: var(--shadow-sm);
    transition: transform 500ms cubic-bezier(.2,.8,.2,1), box-shadow var(--transition);
}

.industry-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-lg);
}

.industry-card h3 {
    position: relative;
    z-index: 2;
    color: var(--white);
    margin-bottom: 4px;
    font-size: 1.2rem;
}

.industry-card p {
    position: relative;
    z-index: 2;
    color: rgba(255,255,255,.68);
    font-size: .79rem;
}

/* ---------- Leadership ---------- */

.people-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.person-card {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
}

.person-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-7px);
}

.person-photo {
    position: relative;
    height: 330px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(6,151,215,.24), rgba(3,35,51,.88)),
        url("https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=900&q=82")
        center / cover no-repeat;
}

.person-photo.person-2 {
    background:
        linear-gradient(135deg, rgba(6,151,215,.24), rgba(3,35,51,.88)),
        url("https://images.unsplash.com/photo-1580489944761-15a19d654956?auto=format&fit=crop&w=900&q=82")
        center / cover no-repeat;
}

.person-photo.person-3 {
    background:
        linear-gradient(135deg, rgba(6,151,215,.24), rgba(3,35,51,.88)),
        url("https://images.unsplash.com/photo-1500648767791-00dcc994a43e?auto=format&fit=crop&w=900&q=82")
        center / cover no-repeat;
}

.person-photo::after {
    position: absolute;
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(to top, rgba(4,17,26,.74), transparent);
    content: "";
}

.person-body {
    padding: 24px;
}

.person-body h3 {
    margin-bottom: 3px;
    font-size: 1.22rem;
}

.person-role {
    color: var(--primary-dark);
    font-size: .77rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.person-body p {
    margin-top: 14px;
    color: var(--muted);
    font-size: .84rem;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}

.tag {
    padding: 6px 8px;
    border-radius: 999px;
    color: #3b4c57;
    background: var(--surface);
    font-size: .68rem;
    font-weight: 800;
}

/* ---------- Gallery / Slider ---------- */

.gallery-wrap {
    position: relative;
}

.gallery-swiper {
    overflow: visible;
    padding-bottom: 50px;
}

.gallery-slide {
    position: relative;
    min-height: 440px;
    overflow: hidden;
    border-radius: 26px;
    background: #102634;
}

.gallery-slide img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    transition: transform 1s cubic-bezier(.2,.8,.2,1);
}

.gallery-slide:hover img {
    transform: scale(1.035);
}

.gallery-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 35px 30px 28px;
    color: var(--white);
    background: linear-gradient(to top, rgba(4,17,26,.90), transparent);
}

.gallery-caption h3 {
    color: var(--white);
    font-size: 1.3rem;
}

.gallery-caption p {
    max-width: 620px;
    color: rgba(255,255,255,.65);
    font-size: .80rem;
}

.swiper-pagination-bullet-active {
    background: var(--primary);
}

/* ---------- Contact ---------- */

.contact-grid {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 28px;
}

.contact-panel {
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}

.contact-panel-dark {
    color: rgba(255,255,255,.72);
    border-color: rgba(255,255,255,.10);
    background: #071d2b;
}

.contact-panel-dark h2,
.contact-panel-dark h3 {
    color: var(--white);
}

.contact-detail {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 14px;
    padding: 17px 0;
    border-bottom: 1px solid var(--line);
}

.contact-panel-dark .contact-detail {
    border-color: rgba(255,255,255,.10);
}

.contact-detail:last-child {
    border-bottom: 0;
}

.contact-detail strong {
    display: block;
    color: var(--navy);
    font-size: .88rem;
}

.contact-panel-dark .contact-detail strong {
    color: var(--white);
}

.contact-detail span,
.contact-detail a {
    color: var(--muted);
    font-size: .82rem;
}

.contact-panel-dark .contact-detail span,
.contact-panel-dark .contact-detail a {
    color: rgba(255,255,255,.58);
}

.form-label {
    color: var(--navy);
    font-size: .77rem;
    font-weight: 800;
}

.form-control,
.form-select {
    min-height: 52px;
    border: 1px solid var(--line);
    border-radius: 13px;
    font-size: .90rem;
    box-shadow: none !important;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(6,151,215,.52);
    box-shadow: 0 0 0 4px rgba(6,151,215,.08) !important;
}

.form-message {
    display: none;
    margin-top: 14px;
    padding: 13px 15px;
    border-radius: 12px;
    font-size: .80rem;
    font-weight: 700;
}

.form-message.success {
    display: block;
    color: #155b41;
    background: #eaf8f1;
}

.form-message.error {
    display: block;
    color: #8a2936;
    background: #fff0f2;
}

/* ---------- Footer ---------- */

.site-footer {
    position: relative;
    padding: 74px 0 25px;
    overflow: hidden;
    color: rgba(255,255,255,.62);
    background: #04111a;
}

.site-footer::before {
    position: absolute;
    width: 500px;
    height: 500px;
    top: -360px;
    right: -70px;
    border-radius: 50%;
    border: 1px solid rgba(6,151,215,.12);
    box-shadow: 0 0 0 70px rgba(6,151,215,.03), 0 0 0 140px rgba(6,151,215,.02);
    content: "";
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 42px;
}

.footer-brand p {
    max-width: 440px;
    margin-top: 19px;
    color: rgba(255,255,255,.52);
    font-size: .82rem;
}

.footer-title {
    margin-bottom: 15px;
    color: var(--white);
    font-size: .79rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-links {
    display: grid;
    gap: 8px;
}

.footer-links a {
    width: fit-content;
    color: rgba(255,255,255,.56);
    font-size: .80rem;
    transition: color var(--transition), transform var(--transition);
}

.footer-links a:hover {
    color: var(--primary);
    transform: translateX(4px);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 58px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,.09);
    font-size: .72rem;
}

.footer-logo {
    width: 188px;
    padding: 8px 10px;
    border-radius: 13px;
    background: rgba(255,255,255,.96);
}

/* ---------- Floating tools ---------- */

.scroll-progress {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #058bd0, #4fd3ff);
    transition: width 50ms linear;
}

.back-to-top {
    position: fixed;
    z-index: 1030;
    right: 22px;
    bottom: 22px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--navy);
    background: rgba(255,255,255,.93);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    transition: opacity var(--transition), visibility var(--transition), transform var(--transition), background var(--transition);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    color: var(--white);
    background: var(--primary);
}

.cursor-glow {
    position: fixed;
    z-index: 0;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6,151,215,.08), transparent 68%);
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 250ms ease;
}

/* ---------- Page hero ---------- */

.inner-hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 100px;
    color: var(--white);
    background:
        linear-gradient(120deg, rgba(4,17,26,.96), rgba(6,66,94,.88)),
        url("https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1900&q=85")
        center / cover no-repeat;
}

.inner-hero h1 {
    margin-bottom: 14px;
    color: var(--white);
    font-size: clamp(2.8rem, 6vw, 5rem);
    line-height: .96;
}

.inner-hero p {
    max-width: 720px;
    color: rgba(255,255,255,.70);
}

/* ---------- Timeline ---------- */

.timeline {
    position: relative;
    display: grid;
    gap: 18px;
}

.timeline::before {
    position: absolute;
    left: 17px;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--line);
    content: "";
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 14px;
}

.timeline-dot {
    position: relative;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(6,151,215,.24);
    border-radius: 50%;
    color: var(--primary);
    background: var(--white);
    font-size: .72rem;
}

.timeline-content {
    padding: 2px 0 24px;
}

.timeline-content h3 {
    margin-bottom: 4px;
    font-size: 1.05rem;
}

.timeline-content p {
    color: var(--muted);
    font-size: .84rem;
}

/* ---------- Reveal helper ---------- */

.js-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 700ms cubic-bezier(.2,.8,.2,1), transform 700ms cubic-bezier(.2,.8,.2,1);
}

.js-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1199px) {
    .nav-links {
        gap: 0;
    }

    .nav-links a {
        padding: 0 10px;
        font-size: .78rem;
    }

    .brand-logo-shell {
        min-width: 185px;
    }

    .brand-logo {
        width: 158px;
    }

    .about-grid,
    .capability-grid {
        gap: 42px;
    }

    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1.3fr 1fr 1fr;
    }

    .footer-grid > :first-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 991px) {
    .topline-left span {
        display: none;
    }

    .navbar-rgl {
        min-height: 76px;
    }

    .mobile-nav-toggle {
        display: grid;
    }

    .nav-links {
        position: fixed;
        z-index: 1200;
        top: 76px;
        left: 16px;
        right: 16px;
        display: grid;
        gap: 3px;
        padding: 13px;
        border: 1px solid var(--line);
        border-radius: 20px;
        background: rgba(255,255,255,.98);
        box-shadow: var(--shadow-lg);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity var(--transition), visibility var(--transition), transform var(--transition);
    }

    .nav-links.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-links a {
        justify-content: flex-start;
        min-height: 46px;
        padding: 0 13px;
    }

    .nav-links .nav-cta {
        margin-top: 5px;
    }

    .hero {
        min-height: auto;
    }

    .hero-content {
        padding: 88px 0 100px;
    }

    .hero-meta {
        grid-template-columns: 1fr;
        max-width: 470px;
    }

    .trust-strip-inner,
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid,
    .capability-grid,
    .contact-grid {
        grid-template-columns: 1fr;
    }

    .capability-panel {
        position: static;
    }

    .about-visual {
        min-height: 530px;
    }

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

    .person-photo {
        height: 410px;
    }
}

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

    .topline-inner {
        justify-content: center;
    }

    .topline-right {
        display: none;
    }

    .brand-logo-shell {
        min-width: 164px;
        height: 56px;
        padding: 6px 10px;
    }

    .brand-logo {
        width: 142px;
    }

    .hero h1 {
        font-size: clamp(2.7rem, 13vw, 4.4rem);
    }

    .hero-scroll {
        display: none;
    }

    .trust-strip {
        margin-top: -18px;
    }

    .trust-strip-inner {
        grid-template-columns: 1fr 1fr;
        border-radius: 18px;
    }

    .trust-item {
        padding: 20px 18px;
    }

    .trust-item:nth-child(3)::before {
        display: none;
    }

    .trust-item strong {
        font-size: 1.15rem;
    }

    .about-visual {
        min-height: 470px;
    }

    .about-main-image {
        inset: 0 34px 65px 0;
    }

    .about-accent {
        width: 58%;
        min-height: 165px;
        padding: 22px;
    }

    .about-accent strong {
        font-size: 2.7rem;
    }

    .service-grid,
    .industry-grid {
        grid-template-columns: 1fr;
    }

    .service-card {
        min-height: 270px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        border-radius: 18px;
    }

    .stat-item {
        min-height: 140px;
        padding: 20px;
    }

    .stat-number {
        font-size: 2.55rem;
    }

    .cta-card {
        padding: 38px 24px;
        border-radius: 22px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px 20px;
    }

    .footer-grid > :first-child {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
    }

    .person-photo {
        height: 340px;
    }
}

@media (max-width: 480px) {
    .hero-actions .btn-rgl {
        width: 100%;
    }

    .trust-strip-inner,
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .trust-item + .trust-item::before {
        top: 0;
        left: 18px;
        right: 18px;
        bottom: auto;
        width: auto;
        height: 1px;
    }

    .trust-item:nth-child(3)::before {
        display: block;
    }

    .about-main-image {
        inset: 0 0 76px 0;
    }

    .about-accent {
        right: 14px;
        width: 66%;
    }

    .contact-panel {
        padding: 24px;
    }

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

    .footer-grid > :first-child {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* =========================================================
   PREMIUM INTERACTION LAYER
   v2 - Advanced UI interactions
   ========================================================= */

/* ---------- Cursor system ---------- */

.cursor-dot {
    position: fixed;
    z-index: 99999;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    pointer-events: none;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 18px rgba(6, 151, 215, 0.55);
    mix-blend-mode: normal;
}

.cursor-ring {
    position: fixed;
    z-index: 99998;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(6, 151, 215, 0.45);
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition:
        width 280ms cubic-bezier(.2,.8,.2,1),
        height 280ms cubic-bezier(.2,.8,.2,1),
        background 280ms ease,
        border-color 280ms ease;
}

body.cursor-hover .cursor-ring {
    width: 70px;
    height: 70px;
    background: rgba(6, 151, 215, 0.08);
    border-color: rgba(6, 151, 215, 0.60);
}

@media (max-width: 991px), (pointer: coarse) {
    .cursor-dot,
    .cursor-ring {
        display: none !important;
    }
}


/* ---------- Premium card spotlight ---------- */

.spotlight-card {
    --mouse-x: 50%;
    --mouse-y: 50%;
    position: relative;
    isolation: isolate;
}

.spotlight-card::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(
            280px circle at var(--mouse-x) var(--mouse-y),
            rgba(6, 151, 215, 0.14),
            transparent 65%
        );
    opacity: 0;
    content: "";
    transition: opacity 250ms ease;
}

.spotlight-card:hover::before {
    opacity: 1;
}


/* ---------- Animated border ---------- */

.premium-border {
    position: relative;
}

.premium-border::before {
    position: absolute;
    z-index: -1;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(
        120deg,
        transparent 10%,
        rgba(6, 151, 215, .35),
        transparent 35%,
        transparent 70%,
        rgba(79, 211, 255, .25),
        transparent 95%
    );
    background-size: 220% 220%;
    opacity: 0;
    content: "";
    transition: opacity 350ms ease;
}

.premium-border:hover::before {
    opacity: 1;
    animation: borderSweep 3s linear infinite;
}

@keyframes borderSweep {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* ---------- Image reveal ---------- */

.reveal-image {
    position: relative;
    overflow: hidden;
}

.reveal-image::after {
    position: absolute;
    z-index: 3;
    inset: 0;
    background: var(--navy);
    content: "";
    transform-origin: right center;
    transform: scaleX(1);
}

.reveal-image.is-revealed::after {
    animation: imageReveal 1100ms cubic-bezier(.77,0,.175,1) forwards;
}

@keyframes imageReveal {
    0% {
        transform: scaleX(1);
    }

    100% {
        transform: scaleX(0);
    }
}


/* ---------- Image zoom ---------- */

.image-depth {
    overflow: hidden;
}

.image-depth img {
    transform: scale(1.015);
    transition: transform 1.4s cubic-bezier(.2,.8,.2,1);
}

.image-depth:hover img {
    transform: scale(1.07);
}


/* ---------- Magnetic button ---------- */

.magnetic-btn {
    will-change: transform;
    transform-style: preserve-3d;
}


/* ---------- Premium heading line ---------- */

.heading-line {
    position: relative;
    display: inline-block;
}

.heading-line::after {
    position: absolute;
    left: 0;
    bottom: -9px;
    width: 58px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), #4fd3ff);
    content: "";
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}

.heading-line.is-active::after {
    transform: scaleX(1);
}


/* ---------- Floating decorative orb ---------- */

.floating-orb {
    position: absolute;
    width: 220px;
    height: 220px;
    border: 1px solid rgba(6,151,215,.12);
    border-radius: 50%;
    pointer-events: none;
    animation: floatingOrb 10s ease-in-out infinite;
}

.floating-orb::after {
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(6,151,215,.08);
    border-radius: 50%;
    content: "";
}

@keyframes floatingOrb {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    50% {
        transform: translate3d(0, -25px, 0) rotate(12deg);
    }
}


/* ---------- Moving gradient background ---------- */

.animated-gradient {
    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(6,151,215,.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(79,211,255,.12),
            transparent 30%
        ),
        var(--navy);
    background-size: 170% 170%;
    animation: gradientDrift 14s ease-in-out infinite alternate;
}

@keyframes gradientDrift {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }
}


/* ---------- Infinite ticker ---------- */

.logistics-ticker {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: #061721;
}

.logistics-ticker-track {
    display: flex;
    width: max-content;
    animation: tickerMove 34s linear infinite;
}

.logistics-ticker-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logistics-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 17px 34px;
    color: rgba(255,255,255,.68);
    font-family: var(--display);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.logistics-ticker-item i {
    color: var(--primary);
}

@keyframes tickerMove {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* V17: strips stay in continuous one-direction motion, never pause on hover */
.logistics-ticker:hover .logistics-ticker-track {
    animation-play-state: running;
}


/* ---------- Section spotlight ---------- */

.section-spotlight {
    position: relative;
    overflow: hidden;
}

.section-spotlight::before {
    position: absolute;
    z-index: 0;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(6,151,215,.10),
        transparent 68%
    );
    content: "";
    transform: translate(-50%, -50%);
    left: var(--spotlight-x, 50%);
    top: var(--spotlight-y, 50%);
    pointer-events: none;
    transition:
        left 600ms cubic-bezier(.2,.8,.2,1),
        top 600ms cubic-bezier(.2,.8,.2,1);
}


/* ---------- Hero depth layers ---------- */

.hero-depth-layer {
    position: absolute;
    pointer-events: none;
    will-change: transform;
}

.hero-grid-overlay {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(79,211,255,.07) 1px, transparent 1px),
        linear-gradient(
            90deg,
            rgba(79,211,255,.07) 1px,
            transparent 1px
        );
    background-size: 90px 90px;
    mask-image: linear-gradient(
        to bottom,
        black,
        transparent 80%
    );
    pointer-events: none;
}


/* ---------- Scroll reveal variants ---------- */



/* ---------- Advanced service card ---------- */

.service-card.advanced-service {
    transform-style: preserve-3d;
}

.service-card.advanced-service .service-icon {
    transform: translateZ(22px);
}

.service-card.advanced-service h3 {
    transform: translateZ(16px);
}

.service-card.advanced-service p {
    transform: translateZ(10px);
}


/* ---------- Navbar light sweep ---------- */

.site-header::after {
    position: absolute;
    top: 0;
    left: -30%;
    width: 20%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(6,151,215,.65),
        transparent
    );
    content: "";
    opacity: 0;
}

.site-header.is-scrolled::after {
    opacity: 1;
    animation: navbarSweep 5s linear infinite;
}

@keyframes navbarSweep {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(700%);
    }
}


/* ---------- Mobile safety ---------- */

@media (max-width: 991px) {
    .floating-orb {
        display: none;
    }

    .section-spotlight::before {
        display: none;
    }

    .logistics-ticker-track {
        animation-duration: 28s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logistics-ticker-track,
    .floating-orb,
    .animated-gradient,
    .site-header.is-scrolled::after {
        animation: none !important;
    }
}

/* ---------- Premium Hero Title ---------- */

.hero-title {
    overflow: hidden;
}

.hero-title-line {
    display: block;
    will-change: transform, opacity;
}

.hero-live-status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 24px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.64);
    background: rgba(255,255,255,.04);
    backdrop-filter: blur(15px);
    font-size: .72rem;
    font-weight: 700;
}

.hero-live-status strong {
    color: rgba(255,255,255,.88);
}

.hero-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #46dd9b;
    box-shadow:
        0 0 0 5px rgba(70,221,155,.10),
        0 0 18px rgba(70,221,155,.55);
    animation: statusPulse 2.2s infinite;
}

@keyframes statusPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(.72);
        opacity: .65;
    }
}

/* =========================================================
   LAYOUT OVERLAP FIX
   ========================================================= */

.hero {
    position: relative;
    z-index: 1;
}

.logistics-ticker {
    position: relative;
    z-index: 5;
    clear: both;
}

.trust-strip {
    position: relative;
    z-index: 10;
    margin-top: 0 !important;
    padding-top: 36px;
}

.trust-strip-inner {
    position: relative;
    z-index: 11;
}

.about-visual {
    min-height: 520px;
}

.about-main-image {
    min-height: 420px;
    background: #071621;
}

.about-main-image img {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
}

/* =========================================================
   TRUST + LOGISTICS TICKER REFINEMENT
   ========================================================= */

.trust-strip {
    margin-top: 0 !important;
    padding-top: 38px;
    padding-bottom: 0;
}

.logistics-ticker {
    margin-top: 0;
    min-height: 54px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #061720;
    border-top: 1px solid rgba(79, 211, 255, 0.12);
    border-bottom: 1px solid rgba(79, 211, 255, 0.12);
}

.logistics-ticker-item {
    padding: 13px 28px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
}

.logistics-ticker-item i {
    font-size: 0.72rem;
}

.logistics-ticker-track {
    min-height: 54px;
    align-items: center;
}


/* =========================================================
   RUSHABH GLOBAL LOGISTICS
   V4 — AWARD / SHOWCASE INTERACTION LAYER
   ---------------------------------------------------------
   This section is intentionally kept at the bottom so the
   advanced layer can be adjusted without hunting through
   the original stylesheet.
   ========================================================= */

/* =========================================================
   01. MOTION / SMOOTH SCROLL FOUNDATION
   ========================================================= */

html {
    scroll-behavior: auto;
}

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

body {
    overscroll-behavior-y: none;
}


/* =========================================================
   02. CUSTOM CURSOR
   ========================================================= */

.cursor-v4-dot,
.cursor-v4-ring {
    position: fixed;
    z-index: 99999;
    pointer-events: none;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.cursor-v4-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 18px rgba(6,151,215,.55);
}

.cursor-v4-ring {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(6,151,215,.45);
    border-radius: 50%;
    transition:
        width .32s cubic-bezier(.2,.8,.2,1),
        height .32s cubic-bezier(.2,.8,.2,1),
        background .32s ease,
        border-color .32s ease;
}

body.cursor-v4-active .cursor-v4-ring {
    width: 74px;
    height: 74px;
    border-color: rgba(6,151,215,.8);
    background: rgba(6,151,215,.08);
}

body.cursor-v4-media .cursor-v4-ring {
    width: 92px;
    height: 92px;
    border-color: rgba(255,255,255,.72);
    background: rgba(6,22,33,.16);
    backdrop-filter: blur(2px);
}

.cursor-v4-ring::after {
    position: absolute;
    inset: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: var(--primary);
    content: "";
    transform: translate(-50%, -50%);
    transition: width .28s ease, height .28s ease;
}

body.cursor-v4-active .cursor-v4-ring::after {
    width: 4px;
    height: 4px;
}

@media (pointer: coarse), (max-width: 991px) {
    .cursor-v4-dot,
    .cursor-v4-ring {
        display: none !important;
    }
}


/* =========================================================
   03. PRELOADER
   ========================================================= */

.site-preloader {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 18% 18%, rgba(6,151,215,.18), transparent 32%),
        radial-gradient(circle at 84% 72%, rgba(79,211,255,.10), transparent 28%),
        #04131d;
}

.site-preloader.is-done {
    pointer-events: none;
    animation: preloaderExit .5s cubic-bezier(.77,0,.18,1) forwards;
}

.preloader-inner {
    width: min(420px, calc(100% - 48px));
}

.preloader-brand {
    width: 174px;
    margin: 0 auto 22px;
    padding: 12px 16px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 20px 70px rgba(0,0,0,.24);
}

.preloader-brand img {
    width: 100%;
    height: auto;
}

.preloader-meta {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
    text-align: center;
}

.preloader-meta span {
    color: rgba(255,255,255,.46);
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: .22em;
}

.preloader-meta strong {
    color: #fff;
    font-family: var(--display);
    font-size: .87rem;
    letter-spacing: .07em;
}

.preloader-progress {
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
}

.preloader-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), #5de0ff);
    animation: preloaderProgress 1.05s cubic-bezier(.2,.8,.2,1) .15s forwards;
}

@keyframes preloaderProgress {
    to {
        width: 100%;
    }
}

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

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


/* =========================================================
   04. PAGE TRANSITIONS
   ========================================================= */

.page-wipe {
    position: fixed;
    z-index: 99990;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
    background: #061924;
    transform: scaleX(0);
    transform-origin: right center;
}

.page-wipe-inner {
    display: grid;
    justify-items: center;
    gap: 13px;
    opacity: 0;
}

.page-wipe-inner img {
    width: 150px;
    padding: 9px 12px;
    border-radius: 14px;
    background: #fff;
}

.page-wipe-inner span {
    color: rgba(255,255,255,.58);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

body.page-is-leaving .page-wipe {
    pointer-events: auto;
    animation: pageWipeIn .68s cubic-bezier(.77,0,.18,1) forwards;
}

body.page-is-leaving .page-wipe-inner {
    animation: wipeBrandIn .35s ease .22s forwards;
}

@keyframes pageWipeIn {
    to {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

@keyframes wipeBrandIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-wipe,
    .site-preloader {
        display: none;
    }
}


/* =========================================================
   05. WORD-BY-WORD TEXT REVEAL
   ========================================================= */

.word-reveal {
    display: inline-block;
    opacity: 0;
    transform: translateY(105%);
    will-change: transform, opacity;
}

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

[data-word-reveal] {
    overflow: hidden;
}

[data-word-reveal] .word-reveal {
    margin-right: .22em;
}

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


/* =========================================================
   06. HERO: CINEMATIC DEPTH
   ========================================================= */

.hero-v4 {
    isolation: isolate;
}

.hero-v4 .hero-depth-media {
    position: absolute;
    z-index: -3;
    inset: -10% -3% -6%;
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
}

.hero-v4 .hero-depth-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.78) contrast(1.06);
    transform: scale(1.08);
}

.hero-v4 .hero-depth-vignette {
    position: absolute;
    z-index: -2;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(4,17,26,.98) 0%, rgba(4,17,26,.84) 38%, rgba(4,17,26,.48) 68%, rgba(4,17,26,.70) 100%),
        radial-gradient(circle at 75% 40%, rgba(6,151,215,.18), transparent 30%);
    pointer-events: none;
}

.hero-v4 .hero-grid-overlay {
    opacity: .10;
}

.hero-v4 .hero-content {
    max-width: 930px;
}

.hero-v4 .hero-meta {
    position: relative;
    max-width: 900px;
    margin-top: 36px;
}

.hero-v4 .hero-meta-card {
    transition:
        transform .35s cubic-bezier(.2,.8,.2,1),
        background .35s ease,
        border-color .35s ease;
}

.hero-v4 .hero-meta-card:hover {
    border-color: rgba(255,255,255,.26);
    background: rgba(255,255,255,.10);
    transform: translateY(-4px);
}


/* =========================================================
   07. STATEMENT MARQUEE
   ========================================================= */

.statement-marquee {
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(6,151,215,.14);
    border-bottom: 1px solid rgba(6,151,215,.14);
    background: #071923;
}

.statement-marquee-track {
    display: flex;
    width: max-content;
    animation: statementMarquee 32s linear infinite;
}

.statement-marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.statement-marquee-group span {
    padding: 18px 26px;
    color: rgba(255,255,255,.60);
    font-family: var(--display);
    font-size: .79rem;
    font-weight: 700;
    letter-spacing: .16em;
    white-space: nowrap;
}

.statement-marquee-group b {
    color: var(--primary);
    font-size: .75rem;
}

/* V17: strips stay in continuous one-direction motion, never pause on hover */
.statement-marquee:hover .statement-marquee-track {
    animation-play-state: running;
}

@keyframes statementMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/* =========================================================
   08. MAGNETIC / HOVER MICRO-INTERACTIONS
   ========================================================= */

.magnetic-btn {
    will-change: transform;
}

.link-lift {
    position: relative;
}

.link-lift::after {
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 1px;
    background: currentColor;
    content: "";
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.link-lift:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
}


/* =========================================================
   09. SERVICE CARD IMAGE REVEAL
   ---------------------------------------------------------
   Add data-hover-image to any .service-card to activate it.
   ========================================================= */

.service-card[data-hover-image] {
    isolation: isolate;
    overflow: hidden;
}

.service-card[data-hover-image]::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(3,17,26,.94) 0%,
            rgba(3,17,26,.52) 48%,
            rgba(3,17,26,.12) 100%
        ),
        var(--service-hover-image) center / cover no-repeat;
    opacity: 0;
    transform: scale(1.08);
    content: "";
    pointer-events: none;
    transition:
        opacity .5s ease,
        transform .8s cubic-bezier(.2,.8,.2,1);
}

.service-card[data-hover-image]:hover::after,
.service-card[data-hover-image]:focus-within::after,
.service-card[data-hover-image].is-hovered::after {
    opacity: 1;
    transform: scale(1);
}

.service-card[data-hover-image] .service-icon,
.service-card[data-hover-image] h3,
.service-card[data-hover-image] p,
.service-card[data-hover-image] .service-link {
    position: relative;
    z-index: 3;
    transition: color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}

.service-card[data-hover-image]:hover h3,
.service-card[data-hover-image]:hover p,
.service-card[data-hover-image]:hover .service-link {
    color: #fff;
    transform: translateY(-2px);
}

.service-card[data-hover-image]:hover .service-icon {
    color: #fff;
    background: rgba(6,151,215,.78);
}


/* =========================================================
   10. GRID-BREAKING / ASYMMETRIC SECTION
   ========================================================= */

.fx-grid-break {
    overflow: hidden;
}

.fx-grid-break .about-grid {
    grid-template-columns: minmax(340px, 1.05fr) minmax(350px, .86fr);
    gap: 0;
    align-items: center;
}

.fx-grid-break .about-visual {
    z-index: 1;
    min-height: 640px;
    padding-right: 100px;
}

.fx-grid-break .about-main-image {
    inset: 18px 84px 46px 0;
    border-radius: 34px 18px 34px 18px;
    box-shadow: 0 40px 120px rgba(7,22,33,.17);
}

.fx-grid-break .about-accent {
    right: 0;
    bottom: 8px;
    width: 46%;
    transform: translateX(14px);
}

.fx-grid-break .about-copy {
    position: relative;
    z-index: 3;
    margin-left: -68px;
    padding: 48px 46px;
    border: 1px solid rgba(255,255,255,.82);
    border-radius: 25px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 28px 80px rgba(7,22,33,.10);
    backdrop-filter: blur(18px);
}

.fx-grid-break .about-copy::before {
    position: absolute;
    z-index: -1;
    width: 120px;
    height: 120px;
    top: -54px;
    right: -30px;
    border: 1px solid rgba(6,151,215,.18);
    border-radius: 50%;
    content: "";
}

.fx-grid-break .feature-row {
    background: rgba(255,255,255,.86);
}

@media (max-width: 991px) {
    .fx-grid-break .about-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .fx-grid-break .about-visual {
        min-height: 500px;
        padding-right: 0;
    }

    .fx-grid-break .about-main-image {
        inset: 0 36px 60px 0;
    }

    .fx-grid-break .about-copy {
        margin-left: 0;
        padding: 34px 28px;
    }
}

@media (max-width: 575px) {
    .fx-grid-break .about-visual {
        min-height: 430px;
    }

    .fx-grid-break .about-main-image {
        inset: 0 0 68px 0;
    }

    .fx-grid-break .about-accent {
        width: 62%;
        transform: none;
    }
}


/* =========================================================
   11. LOCKED / PREMIUM INDUSTRY EXPERIENCE
   ---------------------------------------------------------
   This is the approved industry interaction direction.
   ========================================================= */

.industry-v4 {
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 18%, rgba(6,151,215,.12), transparent 28%),
        radial-gradient(circle at 90% 85%, rgba(6,151,215,.09), transparent 26%),
        #071923;
}

.industry-v4 .section-heading {
    max-width: 760px;
}

.industry-v4-heading h2 {
    color: #fff;
}

.industry-v4-heading p {
    color: rgba(255,255,255,.58);
}

.industry-explorer-v4 {
    display: grid;
    grid-template-columns: .78fr 1.22fr;
    min-height: 560px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;
    background: #061720;
    box-shadow: 0 40px 110px rgba(0,0,0,.18);
}

.industry-menu-v4 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 26px 28px;
    border-right: 1px solid rgba(255,255,255,.08);
}

.industry-menu-item-v4 {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 13px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.52);
    background: transparent;
    text-align: left;
    font-family: var(--body);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        color .3s ease,
        padding .35s cubic-bezier(.2,.8,.2,1);
}

.industry-menu-item-v4:last-child {
    border-bottom: 0;
}

.industry-menu-item-v4 i {
    color: rgba(255,255,255,.30);
    transition: transform .35s ease, color .35s ease;
}

.industry-menu-item-v4:hover,
.industry-menu-item-v4.is-active {
    color: #fff;
    padding-left: 22px;
}

.industry-menu-item-v4.is-active i,
.industry-menu-item-v4:hover i {
    color: var(--primary);
    transform: translateX(6px);
}

.industry-menu-item-v4.is-active::before {
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 38px;
    border-radius: 999px;
    background: var(--primary);
    content: "";
    transform: translateY(-50%);
    box-shadow: 0 0 18px rgba(6,151,215,.55);
}

.industry-display-v4 {
    position: relative;
    min-width: 0;
}

.industry-display-v4-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.industry-display-v4-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .45s ease, transform 1.2s cubic-bezier(.2,.8,.2,1);
    transform: scale(1.02);
}

.industry-display-v4-media.is-swapping img {
    opacity: .1;
    transform: scale(1.06);
}

.industry-display-v4-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(4,17,26,.06) 0%, rgba(4,17,26,.20) 35%, rgba(4,17,26,.92) 100%),
        linear-gradient(90deg, rgba(4,17,26,.12), transparent 55%);
}

.industry-display-v4-content {
    position: absolute;
    z-index: 2;
    right: 50px;
    left: 50px;
    bottom: 44px;
}

.industry-display-v4-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: rgba(255,255,255,.68);
    background: rgba(4,17,26,.28);
    backdrop-filter: blur(10px);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.industry-display-v4-kicker i {
    color: var(--primary);
}

.industry-display-v4-content h3 {
    margin-bottom: 10px;
    color: #fff;
    font-size: clamp(2.7rem, 5vw, 4.5rem);
    line-height: .96;
}

.industry-display-v4-content p {
    max-width: 660px;
    color: rgba(255,255,255,.72);
    font-size: .92rem;
}

.industry-display-v4-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    color: #fff;
    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .04em;
}

.industry-display-v4-link i {
    color: var(--primary);
    transition: transform .3s ease;
}

.industry-display-v4-link:hover i {
    transform: translate(4px, -3px);
}

.industry-display-v4-meta {
    position: absolute;
    z-index: 3;
    left: 26px;
    right: 26px;
    top: 24px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    color: rgba(255,255,255,.46);
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

@media (max-width: 991px) {
    .industry-explorer-v4 {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .industry-menu-v4 {
        flex-direction: row;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.08);
        padding: 8px 14px;
        scrollbar-width: none;
    }

    .industry-menu-v4::-webkit-scrollbar {
        display: none;
    }

    .industry-menu-item-v4 {
        min-width: 190px;
        border-bottom: 0;
        padding: 16px 12px;
        white-space: nowrap;
    }

    .industry-menu-item-v4.is-active::before {
        top: auto;
        left: 12px;
        right: 12px;
        bottom: 0;
        width: auto;
        height: 2px;
        transform: none;
    }

    .industry-display-v4 {
        min-height: 560px;
    }
}

@media (max-width: 575px) {
    .industry-display-v4 {
        min-height: 500px;
    }

    .industry-display-v4-content {
        left: 26px;
        right: 26px;
        bottom: 30px;
    }

    .industry-display-v4-content h3 {
        font-size: 2.65rem;
    }

    .industry-display-v4-meta {
        left: 18px;
        right: 18px;
        top: 18px;
    }
}


/* =========================================================
   12. GRID-BREAKING GLOBAL NETWORK
   ========================================================= */

.network-break-v4 {
    overflow: hidden;
}

.network-break-grid-v4 {
    display: grid;
    grid-template-columns: minmax(300px, .75fr) minmax(480px, 1.25fr);
    gap: 0;
    align-items: center;
}

.network-break-copy-v4 {
    position: relative;
    z-index: 3;
    margin-right: -80px;
    padding: 54px 52px;
    border: 1px solid rgba(7,22,33,.09);
    border-radius: 26px;
    background: rgba(255,255,255,.93);
    box-shadow: 0 30px 90px rgba(7,22,33,.10);
    backdrop-filter: blur(18px);
}

.network-break-copy-v4 h2 {
    margin-bottom: 18px;
    font-size: clamp(2.2rem, 4vw, 4rem);
    line-height: 1;
}

.network-break-copy-v4 p {
    color: var(--muted);
}

.network-route-list-v4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 28px 0;
}

.network-route-list-v4 div {
    padding: 11px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: #31424e;
    background: rgba(245,248,250,.72);
    font-size: .76rem;
    font-weight: 800;
}

.network-route-list-v4 span {
    margin-right: 7px;
    color: var(--primary);
    font-size: .65rem;
}

.network-break-media-v4 {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    border-radius: 26px;
    transform: translateY(42px);
    box-shadow: 0 35px 100px rgba(7,22,33,.16);
}

.network-break-media-v4 img {
    width: 100%;
    height: 100%;
    min-height: 620px;
    object-fit: cover;
    transform: scale(1.05);
    transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
}

.network-break-media-v4:hover img {
    transform: scale(1.09);
}

.network-break-media-v4::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(4,17,26,.72), transparent 60%);
    content: "";
}

.network-glass-v4 {
    position: absolute;
    z-index: 2;
    display: grid;
    gap: 3px;
    padding: 15px 17px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 15px;
    color: #fff;
    background: rgba(4,17,26,.37);
    backdrop-filter: blur(14px);
}

.network-glass-v4 span {
    color: rgba(255,255,255,.53);
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .15em;
}

.network-glass-v4 strong {
    font-family: var(--display);
    font-size: 1rem;
}

.network-glass-top {
    top: 24px;
    right: 24px;
}

.network-glass-bottom {
    left: 26px;
    bottom: 26px;
}

@media (max-width: 991px) {
    .network-break-grid-v4 {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .network-break-copy-v4 {
        margin-right: 0;
    }

    .network-break-media-v4 {
        transform: none;
        min-height: 500px;
    }

    .network-break-media-v4 img {
        min-height: 500px;
    }
}

@media (max-width: 575px) {
    .network-break-copy-v4 {
        padding: 36px 24px;
    }

    .network-route-list-v4 {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   13. THEME PREVIEW LAB
   ========================================================= */

body[data-theme="electric"] {
    --primary: #7c5cff;
    --primary-dark: #6543db;
    --primary-soft: #f1edff;
}

body[data-theme="aqua"] {
    --primary: #00bfa6;
    --primary-dark: #008e7c;
    --primary-soft: #e8fbf7;
}

.theme-lab {
    position: fixed;
    z-index: 9000;
    right: 20px;
    bottom: 20px;
}

.theme-lab-toggle {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(7,22,33,.10);
    border-radius: 50%;
    color: var(--navy);
    background: rgba(255,255,255,.94);
    box-shadow: 0 16px 40px rgba(7,22,33,.14);
    backdrop-filter: blur(14px);
    cursor: pointer;
    transition: transform .3s ease, background .3s ease, color .3s ease;
}

.theme-lab-toggle:hover {
    color: #fff;
    background: var(--primary);
    transform: translateY(-3px) rotate(7deg);
}

.theme-lab-panel {
    position: absolute;
    right: 0;
    bottom: 58px;
    min-width: 170px;
    padding: 14px;
    border: 1px solid rgba(7,22,33,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.95);
    box-shadow: 0 20px 55px rgba(7,22,33,.15);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(.96);
    transform-origin: bottom right;
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
}

.theme-lab.is-open .theme-lab-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.theme-lab-title {
    display: block;
    margin-bottom: 10px;
    color: #61717d;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.theme-swatch-row {
    display: flex;
    gap: 8px;
}

.theme-swatch {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}

.theme-swatch span {
    width: 20px;
    height: 20px;
    display: block;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,.65);
}

.theme-swatch[data-theme-choice="ocean"] span {
    background: #0697d7;
}

.theme-swatch[data-theme-choice="electric"] span {
    background: #7c5cff;
}

.theme-swatch[data-theme-choice="aqua"] span {
    background: #00bfa6;
}

.theme-swatch.is-active {
    border-color: var(--primary);
}

@media (max-width: 575px) {
    .theme-lab {
        right: 14px;
        bottom: 14px;
    }
}


/* =========================================================
   14. ACCESSIBILITY / PERFORMANCE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .statement-marquee-track,
    .preloader-progress span,
    .hero-v4 .hero-depth-media img {
        animation: none !important;
        transition: none !important;
    }

    .hero-v4 .hero-depth-media,
    .network-break-media-v4 {
        transform: none !important;
    }
}



/* =========================================================
   V10 HOME HERO - EDITORIAL + CINEMATIC
   ---------------------------------------------------------
   This is the only hero layer for the current checkpoint.
   It intentionally does not depend on the carousel system.
   ========================================================= */

.hero-v10 {
    position: relative;
    min-height: clamp(740px, calc(100vh - 106px), 900px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    color: #fff;
    background: #041823;
    isolation: isolate;
}

.hero-v10-background {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(circle at 82% 32%, rgba(8, 186, 233, .16), transparent 28%),
        radial-gradient(circle at 15% 80%, rgba(17, 117, 151, .13), transparent 26%),
        linear-gradient(110deg, #03151e 0%, #06212d 52%, #0a3340 100%);
}

.hero-v10-grid {
    position: absolute;
    inset: 0;
    opacity: .32;
    background-image:
        linear-gradient(rgba(125,226,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125,226,255,.045) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 90%);
}

.hero-v10-light {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(20px);
}

.hero-v10-light-a {
    width: 550px;
    height: 550px;
    right: -220px;
    top: -150px;
    background: rgba(29, 194, 238, .11);
}

.hero-v10-light-b {
    width: 360px;
    height: 360px;
    left: 28%;
    bottom: -190px;
    background: rgba(52, 179, 215, .08);
}

.hero-v10-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: clamp(56px, 6vh, 78px);
    padding-bottom: 26px;
}

.hero-v10-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(380px, .82fr) minmax(520px, 1.18fr);
    gap: clamp(44px, 5.4vw, 96px);
    align-items: center;
}

.hero-v10-copy {
    position: relative;
    z-index: 6;
    max-width: 610px;
}

.hero-v10-kicker {
    margin-bottom: 22px;
}

.hero-v10-title {
    margin: 0;
    color: #fff;
    font-family: var(--display);
    font-size: clamp(3.5rem, 6vw, 6.15rem);
    font-weight: 700;
    line-height: .90;
    letter-spacing: -.065em;
}

.hero-v10-line {
    display: block;
    opacity: 0;
    transform: translateY(105%);
    clip-path: inset(0 0 0 0);
    will-change: transform, opacity;
}

.hero-v10-line.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        transform .9s cubic-bezier(.2,.8,.2,1),
        opacity .65s ease;
}

.hero-v10-accent {
    color: #21c0ea;
}

.hero-v10-description {
    max-width: 520px;
    margin: 28px 0 0;
    color: rgba(255,255,255,.68);
    font-size: .94rem;
    line-height: 1.75;
}

.hero-v10-actions {
    margin-top: 24px;
}

.hero-v10-proof {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.hero-v10-proof-card {
    min-width: 125px;
    padding: 10px 11px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 14px;
    background: rgba(255,255,255,.035);
    backdrop-filter: blur(13px);
}

.hero-v10-proof-card strong {
    display: block;
    color: #fff;
    font-size: .73rem;
}

.hero-v10-proof-card span {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.45);
    font-size: .51rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   Right visual
   --------------------------------------------------------- */

.hero-v10-visual {
    position: relative;
    min-width: 0;
    min-height: 600px;
    display: grid;
    place-items: center;
}

.hero-v10-image-wrap {
    position: relative;
    width: min(100%, 720px);
    aspect-ratio: 1.19 / 1;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 34px;
    background: #071c27;
    box-shadow:
        0 40px 120px rgba(0,0,0,.28),
        0 0 0 1px rgba(8,198,239,.04);
    transform:
        perspective(1400px)
        rotateY(-3deg)
        rotateX(1deg);
    transform-style: preserve-3d;
    will-change: transform;
}

.hero-v10-image {
    position: absolute;
    inset: -4%;
    width: 108%;
    height: 108%;
    object-fit: cover;
    object-position: center;
    filter: saturate(.86) contrast(1.04);
    transform: scale(1.045);
    transition: transform 1.2s cubic-bezier(.2,.8,.2,1);
}

.hero-v10-image-wrap:hover .hero-v10-image {
    transform: scale(1.085);
}

.hero-v10-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(3,16,23,.05) 0%,
            rgba(3,16,23,.16) 42%,
            rgba(2,11,17,.90) 100%
        ),
        linear-gradient(
            90deg,
            rgba(3,16,23,.28),
            transparent 54%
        );
}

.hero-v10-corner {
    position: absolute;
    z-index: 3;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.62);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.hero-v10-image-caption {
    position: absolute;
    z-index: 4;
    left: 28px;
    right: 28px;
    bottom: 28px;
}

.hero-v10-caption-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: rgba(255,255,255,.74);
    background: rgba(3,16,23,.36);
    backdrop-filter: blur(12px);
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.hero-v10-caption-pill i {
    color: #6bddff;
}

.hero-v10-image-caption h2 {
    margin: 12px 0 0;
    color: #fff;
    font-family: var(--display);
    font-size: clamp(2.2rem, 3.7vw, 3.65rem);
    line-height: .94;
    letter-spacing: -.055em;
}

.hero-v10-image-caption p {
    max-width: 450px;
    margin: 10px 0 0;
    color: rgba(255,255,255,.66);
    font-size: .76rem;
    line-height: 1.6;
}

.hero-v10-route-line {
    position: absolute;
    z-index: 3;
    left: 8%;
    right: 8%;
    top: 42%;
    height: 120px;
    border-top: 1px solid rgba(101,230,255,.22);
    border-radius: 50%;
    transform: rotate(-2deg);
}

.hero-v10-route-line::before {
    position: absolute;
    top: -4px;
    left: 46%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6de2ff;
    box-shadow:
        0 0 0 6px rgba(109,226,255,.06),
        0 0 18px rgba(109,226,255,.55);
    content: "";
}

.hero-v10-route-line span {
    position: absolute;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(109,226,255,.65);
}

.hero-v10-route-line span:nth-child(1) {
    left: 12%;
}

.hero-v10-route-line span:nth-child(2) {
    left: 71%;
}

.hero-v10-route-line span:nth-child(3) {
    right: 7%;
}


/* Floating visual cards */

.hero-v10-float {
    position: absolute;
    z-index: 10;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
    width: 230px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 16px;
    color: #fff;
    background: rgba(5,28,39,.84);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 46px rgba(0,0,0,.22);
    animation: heroV10Float 6s ease-in-out infinite;
    pointer-events: none;
}

.hero-v10-float-top {
    top: 52px;
    right: -8px;
}

.hero-v10-float-bottom {
    left: -12px;
    bottom: 52px;
    animation-delay: -2.2s;
}

.hero-v10-float-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(91,220,255,.25);
    border-radius: 10px;
    color: #69ddff;
    background: rgba(91,220,255,.08);
}

.hero-v10-float strong {
    display: block;
    font-size: .69rem;
}

.hero-v10-float span:last-child {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.52);
    font-size: .57rem;
    line-height: 1.4;
}

@keyframes heroV10Float {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}


/* Orbit */
.hero-v10-orbit {
    position: absolute;
    z-index: 5;
    right: -10px;
    bottom: -28px;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(81,214,255,.19);
    border-radius: 50%;
    pointer-events: none;
}

.hero-v10-orbit::before,
.hero-v10-orbit::after {
    position: absolute;
    inset: 16%;
    border: 1px solid rgba(81,214,255,.09);
    border-radius: 50%;
    content: "";
}

.hero-v10-orbit::after {
    inset: 31%;
    border-color: rgba(81,214,255,.11);
}

.hero-v10-orbit span {
    position: absolute;
    top: 9px;
    left: 76px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #69ddff;
    box-shadow: 0 0 17px rgba(105,221,255,.60);
    animation: heroV10Orbit 5.5s linear infinite;
}

.hero-v10-orbit span:nth-child(2) {
    top: 77px;
    left: 8px;
    animation-delay: -1.8s;
}

.hero-v10-orbit span:nth-child(3) {
    top: 113px;
    left: 121px;
    animation-delay: -3.6s;
}

@keyframes heroV10Orbit {
    from {
        transform: rotate(0deg) translateX(60px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(60px) rotate(-360deg);
    }
}


/* Bottom capability strip */

.hero-v10-bottom {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    margin-top: 20px;
    color: rgba(255,255,255,.40);
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hero-v10-bottom i {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.13);
}


/* Scroll indicator */
.hero-v10-scroll {
    position: absolute;
    z-index: 8;
    right: 20px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.54);
    font-size: .59rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    text-decoration: none;
    transform: rotate(90deg) translateX(100%);
    transform-origin: right bottom;
}

.hero-v10-scroll:hover {
    color: #fff;
}

.hero-v10-scroll-line {
    width: 38px;
    height: 1px;
    background: currentColor;
}

.hero-v10-scroll i {
    animation: heroV10ScrollBounce 1.8s ease-in-out infinite;
}

@keyframes heroV10ScrollBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 1199px) {

    .hero-v10-layout {
        grid-template-columns:
            minmax(350px, .86fr)
            minmax(475px, 1.14fr);
        gap: 34px;
    }

    .hero-v10-title {
        font-size: clamp(3.05rem, 5.15vw, 5.35rem);
    }

    .hero-v10-visual {
        min-height: 540px;
    }

    .hero-v10-float-top {
        right: 0;
    }

    .hero-v10-float-bottom {
        left: 0;
    }

}

@media (max-width: 991px) {

    .hero-v10 {
        min-height: auto;
    }

    .hero-v10-container {
        padding-top: 56px;
        padding-bottom: 38px;
    }

    .hero-v10-layout {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .hero-v10-copy {
        max-width: 760px;
    }

    .hero-v10-title {
        font-size: clamp(3.15rem, 8.5vw, 5.3rem);
    }

    .hero-v10-visual {
        min-height: auto;
        padding-bottom: 30px;
    }

    .hero-v10-image-wrap {
        width: min(100%, 720px);
    }

    .hero-v10-scroll {
        display: none;
    }

}

@media (max-width: 575px) {

    .hero-v10-container {
        padding-top: 43px;
        padding-bottom: 26px;
    }

    .hero-v10-kicker {
        white-space: normal;
    }

    .hero-v10-title {
        font-size: clamp(2.75rem, 13.2vw, 4rem);
        line-height: .93;
    }

    .hero-v10-description {
        font-size: .84rem;
    }

    .hero-v10-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-v10-actions .btn-rgl {
        width: 100%;
    }

    .hero-v10-proof-card {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
    }

    .hero-v10-image-wrap {
        aspect-ratio: .92 / 1;
        border-radius: 26px;
    }

    .hero-v10-float {
        width: 194px;
        padding: 9px;
    }

    .hero-v10-float-top {
        top: 12px;
        right: 4px;
    }

    .hero-v10-float-bottom {
        left: 4px;
        bottom: 8px;
    }

    .hero-v10-orbit {
        display: none;
    }

    .hero-v10-bottom {
        overflow: hidden;
        white-space: nowrap;
    }

    .hero-v10-bottom span:nth-child(n+5) {
        display: none;
    }

}



/* =========================================================
   V11 HOME HERO - CLEAN / CINEMATIC / FUNCTIONAL
   ---------------------------------------------------------
   The hero is isolated to `.hero-v11`.
   Older hero classes are not touched.
   ========================================================= */

.hero-v11 {
    position: relative;
    min-height: clamp(690px, calc(100vh - 105px), 860px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    color: #fff;
    background: #031923;
}

.hero-v11-background {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 80% 35%, rgba(7, 177, 226, .14), transparent 27%),
        radial-gradient(circle at 22% 83%, rgba(20, 118, 151, .11), transparent 29%),
        linear-gradient(120deg, #02141d 0%, #062330 56%, #0a2d3a 100%);
}

.hero-v11-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(124,222,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,222,255,.04) 1px, transparent 1px);
    background-size: 76px 76px;
    opacity: .45;
    mask-image: linear-gradient(to bottom, black, transparent 90%);
}

.hero-v11-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    pointer-events: none;
}

.hero-v11-glow-a {
    width: 520px;
    height: 520px;
    top: -180px;
    right: -180px;
    background: rgba(31, 187, 231, .10);
}

.hero-v11-glow-b {
    width: 420px;
    height: 420px;
    bottom: -220px;
    left: 10%;
    background: rgba(13, 139, 182, .08);
}

.hero-v11-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: clamp(46px, 5.5vh, 66px);
    padding-bottom: 26px;
}

.hero-v11-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(380px, .82fr) minmax(520px, 1.18fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: center;
}

.hero-v11-copy {
    position: relative;
    z-index: 5;
    min-width: 0;
    max-width: 610px;
}

.hero-v11-kicker {
    width: fit-content;
    margin-bottom: 20px;
}

.hero-v11-title {
    margin: 0;
    max-width: 610px;
    color: #fff;
    font-family: var(--display);
    font-size: clamp(3.25rem, 5.2vw, 5.75rem);
    line-height: .90;
    letter-spacing: -.065em;
}

.hero-v11-title-line {
    display: block;
    overflow: hidden;
}

.hero-v11-accent {
    color: #23bee8;
}

.hero-v11-description {
    max-width: 540px;
    margin: 24px 0 0;
    color: rgba(255,255,255,.70);
    font-size: .92rem;
    line-height: 1.72;
}

.hero-v11-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hero-v11-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 17px;
}

.hero-v11-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 35px;
    padding: 7px 11px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.50);
    background: rgba(255,255,255,.035);
    font: inherit;
    cursor: pointer;
    transition:
        transform .26s ease,
        color .26s ease,
        border-color .26s ease,
        background .26s ease;
}

.hero-v11-control span {
    color: rgba(100, 223, 255, .85);
    font-size: .58rem;
    font-weight: 800;
}

.hero-v11-control strong {
    font-size: .64rem;
    font-weight: 800;
}

.hero-v11-control:hover {
    color: #fff;
    border-color: rgba(100,223,255,.25);
    transform: translateY(-2px);
}

.hero-v11-control.is-active {
    color: #fff;
    border-color: rgba(100,223,255,.34);
    background: rgba(100,223,255,.08);
}

.hero-v11-proof-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 15px;
}

.hero-v11-proof {
    min-width: 118px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    background: rgba(255,255,255,.03);
}

.hero-v11-proof strong {
    display: block;
    color: #fff;
    font-size: .72rem;
    line-height: 1.1;
}

.hero-v11-proof span {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.45);
    font-size: .51rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.hero-v11-visual {
    position: relative;
    z-index: 4;
    width: 100%;
    min-width: 0;
    min-height: 565px;
    display: grid;
    place-items: center;
}

.hero-v11-media {
    position: relative;
    width: min(100%, 730px);
    aspect-ratio: 1.16 / 1;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 30px;
    background: #061b25;
    box-shadow: 0 35px 105px rgba(0,0,0,.30);
    transform-style: preserve-3d;
    --hero-mx: 0px;
    --hero-my: 0px;
    transform:
        perspective(1600px)
        rotateY(var(--hero-mx))
        rotateX(var(--hero-my));
    transition: transform .65s cubic-bezier(.2,.8,.2,1);
}

.hero-v11-slide {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.035);
    transition:
        opacity 700ms ease,
        visibility 700ms ease,
        transform 1100ms cubic-bezier(.2,.8,.2,1);
}

.hero-v11-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.hero-v11-slide-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.04);
    filter: saturate(.90) contrast(1.04);
    transition: transform 1600ms cubic-bezier(.2,.8,.2,1);
}

.hero-v11-slide.is-active .hero-v11-slide-image {
    transform: scale(1);
}

.hero-v11-slide-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(3,15,22,.06),
            rgba(3,15,22,.13) 40%,
            rgba(2,11,16,.91) 100%
        ),
        linear-gradient(
            90deg,
            rgba(2,11,16,.25),
            transparent 53%
        );
}

.hero-v11-slide-top {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 19px;
    right: 19px;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    color: rgba(255,255,255,.62);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.hero-v11-slide-content {
    position: absolute;
    z-index: 4;
    left: 28px;
    right: 28px;
    bottom: 28px;
}

.hero-v11-slide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: rgba(255,255,255,.73);
    background: rgba(4,17,26,.34);
    backdrop-filter: blur(12px);
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.hero-v11-slide-kicker i {
    color: #67ddff;
}

.hero-v11-slide-content h2 {
    margin: 11px 0 0;
    color: #fff;
    font-family: var(--display);
    font-size: clamp(2.25rem, 3.6vw, 3.8rem);
    line-height: .94;
    letter-spacing: -.055em;
}

.hero-v11-slide-content p {
    max-width: 520px;
    margin: 9px 0 0;
    color: rgba(255,255,255,.68);
    font-size: .76rem;
    line-height: 1.55;
}


/* Decorative frames */

.hero-v11-frame {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(91,219,255,.14);
    border-radius: 34px;
}

.hero-v11-frame-one {
    inset: 12px -10px -14px 12px;
    transform: rotate(1.7deg);
}

.hero-v11-frame-two {
    inset: 25px -20px -27px 25px;
    border-color: rgba(91,219,255,.07);
    transform: rotate(3.2deg);
}


/* Floating information cards */

.hero-v11-float {
    position: absolute;
    z-index: 10;
    display: grid;
    grid-template-columns: 34px 1fr;
    align-items: center;
    gap: 10px;
    width: 226px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 15px;
    color: #fff;
    background: rgba(4,26,38,.86);
    backdrop-filter: blur(17px);
    box-shadow: 0 20px 46px rgba(0,0,0,.22);
    pointer-events: none;
    animation: heroV11Float 6s ease-in-out infinite;
}

.hero-v11-float-top {
    top: 34px;
    right: 8px;
}

.hero-v11-float-bottom {
    left: 8px;
    bottom: 34px;
    animation-delay: -2.2s;
}

.hero-v11-float-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(91,220,255,.25);
    border-radius: 10px;
    color: #69ddff;
    background: rgba(91,220,255,.08);
}

.hero-v11-float strong {
    display: block;
    font-size: .68rem;
    line-height: 1.2;
}

.hero-v11-float span:last-child {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.52);
    font-size: .57rem;
    line-height: 1.4;
}

@keyframes heroV11Float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}


/* Orbit */

.hero-v11-orbit {
    position: absolute;
    z-index: 9;
    right: -8px;
    bottom: -30px;
    width: 145px;
    height: 145px;
    border: 1px solid rgba(76,212,255,.18);
    border-radius: 50%;
    pointer-events: none;
}

.hero-v11-orbit::before,
.hero-v11-orbit::after {
    position: absolute;
    inset: 15%;
    border: 1px solid rgba(76,212,255,.08);
    border-radius: 50%;
    content: "";
}

.hero-v11-orbit::after {
    inset: 30%;
    border-color: rgba(76,212,255,.10);
}

.hero-v11-orbit span {
    position: absolute;
    top: 8px;
    left: 70px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #69ddff;
    box-shadow: 0 0 18px rgba(105,221,255,.58);
    animation: heroV11Orbit 5.5s linear infinite;
}

.hero-v11-orbit span:nth-child(2) {
    top: 70px;
    left: 8px;
    animation-delay: -1.7s;
}

.hero-v11-orbit span:nth-child(3) {
    top: 104px;
    left: 113px;
    animation-delay: -3.5s;
}

@keyframes heroV11Orbit {
    from {
        transform: rotate(0deg) translateX(56px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(56px) rotate(-360deg);
    }
}


/* Bottom ribbon */

.hero-v11-ribbon {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    margin-top: 19px;
    color: rgba(255,255,255,.40);
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hero-v11-ribbon i {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.13);
}


/* Scroll indicator */

.hero-v11-scroll {
    position: absolute;
    z-index: 8;
    right: 20px;
    bottom: 28px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.48);
    font-size: .57rem;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
    text-decoration: none;
    transform: rotate(90deg) translateX(100%);
    transform-origin: right bottom;
}

.hero-v11-scroll-line {
    width: 34px;
    height: 1px;
    background: currentColor;
}

.hero-v11-scroll i {
    animation: heroV11Scroll 1.8s ease-in-out infinite;
}

@keyframes heroV11Scroll {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}


/* ---------------------------------------------------------
   Mobile / tablet safety
   --------------------------------------------------------- */

@media (max-width: 1199px) {

    .hero-v11-layout {
        grid-template-columns: minmax(350px, .84fr) minmax(465px, 1.16fr);
        gap: 32px;
    }

    .hero-v11-title {
        font-size: clamp(3.0rem, 5vw, 5.25rem);
    }

    .hero-v11-visual {
        min-height: 520px;
    }

}

@media (max-width: 991px) {

    .hero-v11 {
        min-height: auto;
    }

    .hero-v11-container {
        padding-top: 54px;
        padding-bottom: 38px;
    }

    .hero-v11-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero-v11-copy {
        max-width: 760px;
    }

    .hero-v11-visual {
        min-height: auto;
        padding-bottom: 22px;
    }

    .hero-v11-media {
        width: min(100%, 760px);
    }

}

@media (max-width: 575px) {

    .hero-v11-container {
        padding-top: 40px;
        padding-bottom: 25px;
    }

    .hero-v11-kicker {
        max-width: 100%;
        white-space: normal;
    }

    .hero-v11-title {
        font-size: clamp(2.8rem, 13vw, 4.15rem);
        line-height: .93;
    }

    .hero-v11-description {
        font-size: .84rem;
    }

    .hero-v11-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-v11-actions .btn-rgl {
        width: 100%;
    }

    .hero-v11-controls {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-v11-control {
        justify-content: space-between;
        width: 100%;
    }

    .hero-v11-proof-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hero-v11-proof {
        min-width: 0;
    }

    .hero-v11-visual {
        padding-bottom: 44px;
    }

    .hero-v11-media {
        aspect-ratio: .92 / 1;
    }

    .hero-v11-slide-content {
        left: 20px;
        right: 20px;
        bottom: 20px;
    }

    .hero-v11-slide-content h2 {
        font-size: 2.2rem;
    }

    .hero-v11-slide-content p {
        font-size: .70rem;
    }

    .hero-v11-float {
        width: 194px;
        padding: 9px;
    }

    .hero-v11-float-top {
        top: 8px;
        right: 4px;
    }

    .hero-v11-float-bottom {
        left: 4px;
        bottom: 0;
    }

    .hero-v11-orbit {
        display: none;
    }

    .hero-v11-ribbon {
        overflow: hidden;
        white-space: nowrap;
    }

    .hero-v11-ribbon span:nth-child(n+5) {
        display: none;
    }

    .hero-v11-scroll {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {

    .hero-v11-float,
    .hero-v11-orbit span,
    .hero-v11-scroll i {
        animation: none !important;
    }

    .hero-v11-media,
    .hero-v11-slide,
    .hero-v11-title-line {
        transition: none !important;
    }

}



/* =========================================================
   V12 HOME HERO
   ---------------------------------------------------------
   Clean editorial composition:
   45% copy / 55% visual
   Fixed headline + controlled visual carousel
   No floating elements over the headline
   ========================================================= */

.hero-v12 {
    position: relative;
    min-height: clamp(670px, calc(100vh - 105px), 850px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    color: #fff;
    background: #041923;
}

.hero-v12-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 82% 35%, rgba(12, 180, 226, .13), transparent 28%),
        radial-gradient(circle at 12% 85%, rgba(25, 124, 157, .11), transparent 28%),
        linear-gradient(118deg, #03151f 0%, #062430 55%, #082f3c 100%);
}

.hero-v12-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(124,222,255,.038) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,222,255,.038) 1px, transparent 1px);
    background-size: 74px 74px;
    mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.hero-v12-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(32px);
}

.hero-v12-glow-a {
    width: 520px;
    height: 520px;
    right: -220px;
    top: -180px;
    background: rgba(28, 185, 230, .09);
}

.hero-v12-glow-b {
    width: 400px;
    height: 400px;
    left: 14%;
    bottom: -250px;
    background: rgba(18, 123, 156, .08);
}

.hero-v12-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: clamp(44px, 5vh, 62px);
    padding-bottom: 26px;
}

.hero-v12-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(390px, .85fr) minmax(560px, 1.15fr);
    gap: clamp(40px, 5vw, 84px);
    align-items: center;
}


/* =========================================================
   COPY
   ========================================================= */

.hero-v12-copy {
    position: relative;
    z-index: 5;
    min-width: 0;
    max-width: 610px;
}

.hero-v12-kicker {
    margin-bottom: 20px;
}

.hero-v12-title {
    max-width: 600px;
    margin: 0;
    color: #fff;
    font-family: var(--display);
    font-size: clamp(3.45rem, 5.2vw, 5.75rem);
    font-weight: 700;
    line-height: .90;
    letter-spacing: -.068em;
}

.hero-v12-title span,
.hero-v12-title em {
    display: block;
}

.hero-v12-title em {
    color: #23bee8;
    font-style: normal;
}

.hero-v12-description {
    max-width: 520px;
    margin: 22px 0 0;
    color: rgba(255,255,255,.68);
    font-size: .91rem;
    line-height: 1.72;
}

.hero-v12-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.hero-v12-service-rail {
    display: grid;
    gap: 6px;
    width: min(100%, 475px);
    margin-top: 20px;
}

.hero-v12-service {
    position: relative;
    display: grid;
    grid-template-columns: 32px 1fr auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 7px 10px;
    border: 1px solid transparent;
    border-bottom-color: rgba(255,255,255,.09);
    color: rgba(255,255,255,.45);
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition:
        color .28s ease,
        background .28s ease,
        border-color .28s ease,
        transform .28s ease;
}

.hero-v12-service:last-child {
    border-bottom-color: transparent;
}

.hero-v12-service span {
    color: rgba(101,222,255,.70);
    font-size: .58rem;
    font-weight: 800;
}

.hero-v12-service strong {
    font-size: .69rem;
    font-weight: 800;
}

.hero-v12-service i {
    font-size: .65rem;
    opacity: .40;
    transition: transform .28s ease, opacity .28s ease;
}

.hero-v12-service:hover {
    color: #fff;
    background: rgba(255,255,255,.025);
    transform: translateX(4px);
}

.hero-v12-service:hover i {
    opacity: 1;
    transform: translateX(3px);
}

.hero-v12-service.is-active {
    color: #fff;
    border-color: rgba(91,219,255,.14);
    border-radius: 11px;
    background:
        linear-gradient(
            90deg,
            rgba(91,219,255,.08),
            rgba(91,219,255,.025)
        );
}

.hero-v12-proof-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
}

.hero-v12-proof {
    min-width: 118px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 13px;
    background: rgba(255,255,255,.03);
}

.hero-v12-proof strong {
    display: block;
    color: #fff;
    font-size: .72rem;
    line-height: 1.1;
}

.hero-v12-proof span {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.45);
    font-size: .51rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}


/* =========================================================
   VISUAL
   ========================================================= */

.hero-v12-visual {
    position: relative;
    z-index: 3;
    width: 100%;
    min-width: 0;
    padding: 24px 0 24px 18px;
}

.hero-v12-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1.20 / 1;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 30px;
    background: #061b25;
    box-shadow: 0 38px 105px rgba(0,0,0,.30);
}

.hero-v12-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.035);
    transition:
        opacity 650ms ease,
        visibility 650ms ease,
        transform 1150ms cubic-bezier(.2,.8,.2,1);
}

.hero-v12-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.hero-v12-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.035);
    filter: saturate(.92) contrast(1.05);
    transition: transform 1450ms cubic-bezier(.2,.8,.2,1);
}

.hero-v12-slide.is-active img {
    transform: scale(1);
}

.hero-v12-slide-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(2,13,18,.04),
            rgba(2,13,18,.14) 42%,
            rgba(2,10,15,.92) 100%
        ),
        linear-gradient(
            90deg,
            rgba(2,10,15,.22),
            transparent 55%
        );
}

.hero-v12-slide-meta {
    position: absolute;
    z-index: 2;
    top: 18px;
    left: 19px;
    right: 19px;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.62);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero-v12-slide-content {
    position: absolute;
    z-index: 3;
    left: 27px;
    right: 27px;
    bottom: 26px;
    max-width: 560px;
}

.hero-v12-slide-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: rgba(255,255,255,.72);
    background: rgba(5,18,25,.34);
    backdrop-filter: blur(11px);
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.hero-v12-slide-kicker i {
    color: #69ddff;
}

.hero-v12-slide-content h2 {
    margin: 10px 0 0;
    color: #fff;
    font-family: var(--display);
    font-size: clamp(2rem, 3.5vw, 3.7rem);
    line-height: .96;
    letter-spacing: -.052em;
}

.hero-v12-slide-content p {
    max-width: 500px;
    margin: 8px 0 0;
    color: rgba(255,255,255,.66);
    font-size: .76rem;
    line-height: 1.55;
}


/* Depth frames */
.hero-v12-depth-frame {
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(91,219,255,.12);
    border-radius: 35px;
    pointer-events: none;
}

.hero-v12-depth-one {
    inset: 12px -12px -13px 13px;
    transform: rotate(1.7deg);
}

.hero-v12-depth-two {
    inset: 23px -22px -24px 25px;
    border-color: rgba(91,219,255,.06);
    transform: rotate(3.2deg);
}


/* Controlled info card */
.hero-v12-info-card {
    position: absolute;
    z-index: 10;
    top: 1px;
    right: 24px;
    display: grid;
    grid-template-columns: 35px 1fr;
    align-items: center;
    gap: 10px;
    width: 225px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 15px;
    color: #fff;
    background: rgba(4,25,36,.86);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 44px rgba(0,0,0,.20);
}

.hero-v12-info-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(91,220,255,.24);
    border-radius: 10px;
    color: #69ddff;
    background: rgba(91,220,255,.08);
}

.hero-v12-info-card strong {
    display: block;
    font-size: .67rem;
    line-height: 1.2;
}

.hero-v12-info-card span:last-child {
    display: block;
    margin-top: 3px;
    color: rgba(255,255,255,.50);
    font-size: .56rem;
    line-height: 1.4;
}


/* Arrow controls */
.hero-v12-stage-nav {
    position: absolute;
    z-index: 12;
    right: 0;
    bottom: 0;
    display: flex;
    gap: 6px;
}

.hero-v12-arrow {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 11px;
    color: #fff;
    background: rgba(4,19,27,.82);
    backdrop-filter: blur(12px);
    cursor: pointer;
    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.hero-v12-arrow:hover {
    border-color: rgba(96,220,255,.28);
    background: rgba(9,44,58,.95);
    transform: translateY(-2px);
}


/* Progress */
.hero-v12-progress {
    position: absolute;
    z-index: 13;
    left: 0;
    right: 92px;
    bottom: 0;
    height: 2px;
    overflow: hidden;
    background: rgba(255,255,255,.10);
}

.hero-v12-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #11a7dd, #67ddff);
}


/* Bottom ribbon */
.hero-v12-ribbon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    color: rgba(255,255,255,.38);
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hero-v12-ribbon i {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.12);
}


/* Scroll marker */
.hero-v12-scroll {
    position: absolute;
    z-index: 15;
    right: 22px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.46);
    font-size: .56rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    text-decoration: none;
}

.hero-v12-scroll i {
    animation: heroV12Bounce 1.8s ease-in-out infinite;
}

@keyframes heroV12Bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(5px); }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {

    .hero-v12-layout {
        grid-template-columns:
            minmax(350px, .88fr)
            minmax(490px, 1.12fr);
        gap: 34px;
    }

    .hero-v12-title {
        font-size: clamp(3.0rem, 5vw, 5.2rem);
    }

}

@media (max-width: 991px) {

    .hero-v12 {
        min-height: auto;
    }

    .hero-v12-container {
        padding-top: 50px;
        padding-bottom: 34px;
    }

    .hero-v12-layout {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .hero-v12-copy {
        max-width: 780px;
    }

    .hero-v12-visual {
        padding-left: 0;
        padding-top: 8px;
    }

    .hero-v12-stage {
        width: min(100%, 760px);
        margin: 0 auto;
    }

    .hero-v12-info-card {
        top: -2px;
        right: 12px;
    }

}

@media (max-width: 575px) {

    .hero-v12-container {
        padding-top: 39px;
        padding-bottom: 25px;
    }

    .hero-v12-kicker {
        max-width: 100%;
    }

    .hero-v12-title {
        font-size: clamp(2.75rem, 13.5vw, 4rem);
        line-height: .93;
    }

    .hero-v12-description {
        font-size: .83rem;
    }

    .hero-v12-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-v12-actions .btn-rgl {
        width: 100%;
    }

    .hero-v12-service {
        min-height: 44px;
    }

    .hero-v12-proof-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hero-v12-proof {
        min-width: 0;
    }

    .hero-v12-visual {
        padding-top: 10px;
    }

    .hero-v12-stage {
        aspect-ratio: .92 / 1;
        border-radius: 24px;
    }

    .hero-v12-slide-content {
        left: 19px;
        right: 19px;
        bottom: 20px;
    }

    .hero-v12-slide-content h2 {
        font-size: 2.25rem;
    }

    .hero-v12-slide-content p {
        font-size: .70rem;
    }

    .hero-v12-info-card {
        width: 190px;
        right: 4px;
    }

    .hero-v12-stage-nav {
        right: 5px;
        bottom: 5px;
    }

    .hero-v12-progress {
        right: 92px;
        left: 5px;
        bottom: 5px;
    }

    .hero-v12-ribbon {
        overflow: hidden;
        white-space: nowrap;
    }

    .hero-v12-ribbon span:nth-child(n+5) {
        display: none;
    }

    .hero-v12-scroll {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {

    .hero-v12-scroll i {
        animation: none !important;
    }

    .hero-v12-slide,
    .hero-v12-slide img,
    .hero-v12-service,
    .hero-v12-arrow {
        transition: none !important;
    }

}



/* =========================================================
   V13 HOME HERO
   ---------------------------------------------------------
   Design target:
   - normal browser 100% zoom
   - strong but controlled typography
   - no overlap
   - 2-column hierarchy
   - functional 4.8s carousel
   ========================================================= */

.hero-v13 {
    position: relative;
    min-height: clamp(640px, calc(100vh - 105px), 790px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    color: #fff;
    background: #041923;
}

.hero-v13-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 84% 42%, rgba(15,179,222,.11), transparent 30%),
        radial-gradient(circle at 8% 88%, rgba(16,116,148,.09), transparent 28%),
        linear-gradient(118deg, #03151e 0%, #06212d 56%, #082a35 100%);
}

.hero-v13-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(125,224,255,.032) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125,224,255,.032) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, black 0%, transparent 92%);
}

.hero-v13-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(24px);
}

.hero-v13-glow-a {
    width: 470px;
    height: 470px;
    right: -180px;
    top: -150px;
    background: rgba(20,180,225,.08);
}

.hero-v13-glow-b {
    width: 360px;
    height: 360px;
    left: 7%;
    bottom: -220px;
    background: rgba(18,122,153,.07);
}

.hero-v13-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 48px;
    padding-bottom: 24px;
}

.hero-v13-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(420px, .90fr) minmax(500px, 1.10fr);
    gap: clamp(32px, 4.2vw, 68px);
    align-items: center;
}

.hero-v13-copy {
    position: relative;
    z-index: 5;
    min-width: 0;
    max-width: 575px;
}

.hero-v13-kicker {
    margin-bottom: 17px;
}

.hero-v13-title {
    margin: 0;
    max-width: 575px;
    color: #fff;
    font-family: var(--display);
    font-size: clamp(3.0rem, 4.55vw, 5.05rem);
    line-height: .92;
    letter-spacing: -.063em;
}

.hero-v13-title span,
.hero-v13-title em {
    display: block;
}

.hero-v13-title em {
    color: #20bde8;
    font-style: normal;
}

.hero-v13-description {
    max-width: 505px;
    margin: 19px 0 0;
    color: rgba(255,255,255,.66);
    font-size: .88rem;
    line-height: 1.70;
}

.hero-v13-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.hero-v13-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin-top: 16px;
}

.hero-v13-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 999px;
    color: rgba(255,255,255,.46);
    background: rgba(255,255,255,.025);
    font: inherit;
    cursor: pointer;
    transition:
        color .25s ease,
        border-color .25s ease,
        background .25s ease,
        transform .25s ease;
}

.hero-v13-tab span {
    color: rgba(104,223,255,.83);
    font-size: .56rem;
    font-weight: 800;
}

.hero-v13-tab strong {
    font-size: .62rem;
    font-weight: 800;
}

.hero-v13-tab:hover {
    color: #fff;
    border-color: rgba(104,223,255,.22);
    transform: translateY(-1px);
}

.hero-v13-tab.is-active {
    color: #fff;
    border-color: rgba(104,223,255,.30);
    background: rgba(104,223,255,.07);
}

.hero-v13-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin-top: 14px;
}

.hero-v13-proof {
    min-width: 112px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.hero-v13-proof strong {
    display: block;
    color: #fff;
    font-size: .69rem;
}

.hero-v13-proof span {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.40);
    font-size: .49rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* =========================================================
   VISUAL
   ========================================================= */

.hero-v13-visual {
    position: relative;
    z-index: 4;
    min-width: 0;
    padding: 22px 4px 22px 10px;
}

.hero-v13-stage {
    position: relative;
    width: 100%;
    max-width: 690px;
    margin-left: auto;
    aspect-ratio: 1.22 / 1;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 28px;
    background: #061a24;
    box-shadow: 0 30px 86px rgba(0,0,0,.28);
    transition:
        transform .65s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

.hero-v13-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.045);
    transition:
        opacity 650ms ease,
        visibility 650ms ease,
        transform 1100ms cubic-bezier(.2,.8,.2,1);
}

.hero-v13-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.hero-v13-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.035);
    filter: saturate(.90) contrast(1.04);
    transition: transform 1400ms cubic-bezier(.2,.8,.2,1);
}

.hero-v13-slide.is-active img {
    transform: scale(1);
}

.hero-v13-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(2,12,18,.03),
            rgba(2,12,18,.12) 44%,
            rgba(2,10,15,.92) 100%
        ),
        linear-gradient(
            90deg,
            rgba(2,10,15,.20),
            transparent 55%
        );
}

.hero-v13-meta {
    position: absolute;
    z-index: 2;
    left: 18px;
    right: 18px;
    top: 17px;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.60);
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero-v13-content {
    position: absolute;
    z-index: 3;
    left: 25px;
    right: 25px;
    bottom: 23px;
    max-width: 520px;
}

.hero-v13-content > span {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.68);
    background: rgba(4,17,25,.35);
    backdrop-filter: blur(10px);
    font-size: .51rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.hero-v13-content h2 {
    margin: 9px 0 0;
    color: #fff;
    font-family: var(--display);
    font-size: clamp(2.0rem, 3.0vw, 3.1rem);
    line-height: .97;
    letter-spacing: -.05em;
}

.hero-v13-content p {
    max-width: 470px;
    margin: 7px 0 0;
    color: rgba(255,255,255,.64);
    font-size: .73rem;
    line-height: 1.53;
}

.hero-v13-frame {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(91,219,255,.11);
    border-radius: 32px;
}

.hero-v13-frame-a {
    inset: 10px -9px -12px 11px;
    transform: rotate(1.4deg);
}

.hero-v13-frame-b {
    inset: 20px -18px -20px 20px;
    border-color: rgba(91,219,255,.06);
    transform: rotate(2.5deg);
}

.hero-v13-info {
    position: absolute;
    z-index: 7;
    top: 4px;
    right: 16px;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 9px;
    align-items: center;
    width: 215px;
    padding: 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    background: rgba(4,24,35,.88);
    backdrop-filter: blur(15px);
    box-shadow: 0 18px 42px rgba(0,0,0,.18);
}

.hero-v13-info-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(95,220,255,.23);
    border-radius: 9px;
    color: #69dcff;
    background: rgba(95,220,255,.08);
    font-size: .74rem;
}

.hero-v13-info strong {
    display: block;
    color: #fff;
    font-size: .65rem;
}

.hero-v13-info span:last-child {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.49);
    font-size: .54rem;
    line-height: 1.35;
}

.hero-v13-nav {
    position: absolute;
    z-index: 10;
    right: 12px;
    bottom: 12px;
    display: flex;
    gap: 5px;
}

.hero-v13-nav button {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    color: #fff;
    background: rgba(4,19,27,.82);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition:
        transform .23s ease,
        background .23s ease,
        border-color .23s ease;
}

.hero-v13-nav button:hover {
    transform: translateY(-2px);
    border-color: rgba(96,220,255,.28);
    background: rgba(8,42,56,.95);
}

.hero-v13-progress {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 100px;
    bottom: 12px;
    height: 2px;
    overflow: hidden;
    background: rgba(255,255,255,.10);
}

.hero-v13-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #10a7db, #68ddff);
    box-shadow: 0 0 12px rgba(104,221,255,.28);
}

.hero-v13-bottom-ribbon {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-top: 18px;
    color: rgba(255,255,255,.35);
    font-size: .51rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-v13-bottom-ribbon i {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.11);
}

.hero-v13-scroll {
    position: absolute;
    z-index: 10;
    right: 16px;
    bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.39);
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    text-decoration: none;
}

.hero-v13-scroll i {
    animation: heroV13Scroll 1.7s ease-in-out infinite;
}

@keyframes heroV13Scroll {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1199px) {

    .hero-v13-layout {
        grid-template-columns:
            minmax(350px, .92fr)
            minmax(470px, 1.08fr);
        gap: 30px;
    }

    .hero-v13-title {
        font-size: clamp(3rem, 4.9vw, 4.8rem);
    }

}

@media (max-width: 991px) {

    .hero-v13 {
        min-height: auto;
    }

    .hero-v13-container {
        padding-top: 48px;
        padding-bottom: 34px;
    }

    .hero-v13-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .hero-v13-copy {
        max-width: 760px;
    }

    .hero-v13-visual {
        padding-left: 0;
        padding-top: 0;
    }

    .hero-v13-stage {
        max-width: 760px;
        margin: 0 auto;
    }

}

@media (max-width: 575px) {

    .hero-v13-container {
        padding-top: 38px;
        padding-bottom: 25px;
    }

    .hero-v13-kicker {
        max-width: 100%;
    }

    .hero-v13-title {
        font-size: clamp(2.75rem, 13vw, 4rem);
        line-height: .94;
    }

    .hero-v13-description {
        font-size: .83rem;
    }

    .hero-v13-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-v13-actions .btn-rgl {
        width: 100%;
    }

    .hero-v13-selector {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-v13-tab {
        width: 100%;
        justify-content: space-between;
    }

    .hero-v13-trust {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hero-v13-stage {
        aspect-ratio: .93 / 1;
        border-radius: 23px;
    }

    .hero-v13-info {
        width: 190px;
        right: 4px;
        top: 3px;
    }

    .hero-v13-content {
        left: 19px;
        right: 19px;
        bottom: 20px;
    }

    .hero-v13-content h2 {
        font-size: 2.15rem;
    }

    .hero-v13-content p {
        font-size: .69rem;
    }

    .hero-v13-bottom-ribbon {
        overflow: hidden;
        white-space: nowrap;
    }

    .hero-v13-bottom-ribbon span:nth-child(n+5) {
        display: none;
    }

    .hero-v13-scroll {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {

    .hero-v13-scroll i {
        animation: none !important;
    }

    .hero-v13-stage,
    .hero-v13-slide,
    .hero-v13-slide img,
    .hero-v13-tab,
    .hero-v13-nav button {
        transition: none !important;
    }

}



/* =========================================================
   V14 HERO - EDITORIAL PREMIUM COMPOSITION
   ---------------------------------------------------------
   1. No giant viewport stretch.
   2. Copy and visual have fixed responsibilities.
   3. Decorative elements are contained.
   4. Motion remains restrained and purposeful.
   ========================================================= */

.hero-v14 {
    position: relative;
    min-height: clamp(650px, calc(100vh - 105px), 800px);
    display: flex;
    align-items: stretch;
    overflow: hidden;
    color: #fff;
    background: #041923;
}

.hero-v14-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 86% 38%, rgba(17, 181, 226, .12), transparent 29%),
        radial-gradient(circle at 12% 88%, rgba(18, 119, 150, .08), transparent 26%),
        linear-gradient(120deg, #03151e 0%, #06222e 58%, #082d37 100%);
}

.hero-v14-grid {
    position: absolute;
    inset: 0;
    opacity: .42;
    background-image:
        linear-gradient(rgba(124,222,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124,222,255,.03) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: linear-gradient(to bottom, black, transparent 92%);
}

.hero-v14-radial {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(22px);
}

.hero-v14-radial-a {
    width: 540px;
    height: 540px;
    right: -220px;
    top: -190px;
    background: rgba(31, 184, 229, .08);
}

.hero-v14-radial-b {
    width: 380px;
    height: 380px;
    left: -160px;
    bottom: -220px;
    background: rgba(13, 129, 161, .07);
}

.hero-v14-container {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    padding-top: 38px;
    padding-bottom: 22px;
}

.hero-v14-layout {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(450px, .88fr) minmax(520px, 1.12fr);
    gap: clamp(34px, 4.2vw, 72px);
    align-items: center;
}

.hero-v14-copy {
    min-width: 0;
    max-width: 590px;
    position: relative;
    z-index: 5;
}

.hero-v14-kicker {
    margin-bottom: 18px;
}

.hero-v14-headline-wrap {
    position: relative;
    max-width: 620px;
    padding-right: 40px;
}

.hero-v14-title {
    margin: 0;
    color: #fff;
    font-family: var(--display);
    font-size: clamp(3.15rem, 4.7vw, 5.2rem);
    font-weight: 700;
    line-height: .90;
    letter-spacing: -.065em;
}

.hero-v14-line {
    display: block;
    overflow: hidden;
}

.hero-v14-accent {
    color: #20bde8;
}

.hero-v14-side-note {
    position: absolute;
    right: 0;
    top: 11%;
    display: grid;
    justify-items: center;
    gap: 5px;
    color: rgba(255,255,255,.28);
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .14em;
}

.hero-v14-side-note i {
    width: 1px;
    height: 65px;
    background: rgba(255,255,255,.16);
}

.hero-v14-description {
    max-width: 510px;
    margin: 20px 0 0;
    color: rgba(255,255,255,.66);
    font-size: .89rem;
    line-height: 1.68;
}

.hero-v14-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 20px;
}

.hero-v14-service-rail {
    display: grid;
    gap: 5px;
    width: min(100%, 480px);
    margin-top: 16px;
}

.hero-v14-service {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-bottom-color: rgba(255,255,255,.08);
    color: rgba(255,255,255,.43);
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        border-color .25s ease;
}

.hero-v14-service:last-child {
    border-bottom-color: transparent;
}

.hero-v14-service:hover {
    color: #fff;
    transform: translateX(4px);
}

.hero-v14-service.is-active {
    color: #fff;
    border-color: rgba(100,221,255,.13);
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        rgba(100,221,255,.075),
        rgba(100,221,255,.018)
    );
}

.hero-v14-service-no {
    color: rgba(106,223,255,.78);
    font-size: .56rem;
    font-weight: 800;
}

.hero-v14-service-name {
    font-size: .68rem;
    font-weight: 800;
}

.hero-v14-service i {
    font-size: .64rem;
    opacity: .35;
    transition: transform .25s ease, opacity .25s ease;
}

.hero-v14-service.is-active i,
.hero-v14-service:hover i {
    opacity: .90;
    transform: translateX(3px);
}

.hero-v14-proof-row,
.hero-v14-proof {
    box-sizing: border-box;
}

.hero-v14-proof-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
}

.hero-v14-proof {
    min-width: 113px;
    padding: 8px 9px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
}

.hero-v14-proof strong {
    display: block;
    color: #fff;
    font-size: .69rem;
}

.hero-v14-proof span {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.39);
    font-size: .48rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}


/* =========================================================
   RIGHT VISUAL
   ========================================================= */

.hero-v14-visual {
    position: relative;
    min-width: 0;
    padding: 20px 4px 26px 14px;
    z-index: 4;
}

.hero-v14-stage-shell {
    position: relative;
    width: 100%;
}

.hero-v14-stage {
    position: relative;
    width: min(100%, 730px);
    margin-left: auto;
    aspect-ratio: 1.24 / 1;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 27px;
    background: #061a23;
    box-shadow: 0 28px 85px rgba(0,0,0,.28);
    transform:
        perspective(1400px)
        rotateX(var(--v14-rx, 0deg))
        rotateY(var(--v14-ry, 0deg));
    transition: transform .55s cubic-bezier(.2,.8,.2,1);
    will-change: transform;
}

.hero-v14-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.03);
    transition:
        opacity 650ms ease,
        visibility 650ms ease,
        transform 1100ms cubic-bezier(.2,.8,.2,1);
}

.hero-v14-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

.hero-v14-slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: scale(1.04);
    filter: saturate(.91) contrast(1.04);
    transition: transform 1500ms cubic-bezier(.2,.8,.2,1);
}

.hero-v14-slide.is-active img {
    transform: scale(1);
}

.hero-v14-slide::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(1,11,16,.05),
            rgba(1,11,16,.12) 40%,
            rgba(1,9,14,.94) 100%
        ),
        linear-gradient(
            90deg,
            rgba(1,9,14,.20),
            transparent 55%
        );
    content: "";
}

.hero-v14-topline {
    position: absolute;
    z-index: 3;
    left: 18px;
    right: 18px;
    top: 17px;
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,.58);
    font-size: .53rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.hero-v14-location-pill {
    position: absolute;
    z-index: 3;
    left: 18px;
    top: 55px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.68);
    background: rgba(3,15,21,.35);
    backdrop-filter: blur(10px);
    font-size: .50rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hero-v14-location-pill i {
    color: #64dbff;
}

.hero-v14-slide-content {
    position: absolute;
    z-index: 4;
    left: 26px;
    right: 26px;
    bottom: 24px;
    max-width: 520px;
}

.hero-v14-slide-label {
    display: inline-flex;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.67);
    background: rgba(4,17,24,.35);
    backdrop-filter: blur(10px);
    font-size: .50rem;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
}

.hero-v14-slide-content h2 {
    margin: 10px 0 0;
    color: #fff;
    font-family: var(--display);
    font-size: clamp(2rem, 3.1vw, 3.25rem);
    line-height: .96;
    letter-spacing: -.05em;
}

.hero-v14-slide-content p {
    max-width: 470px;
    margin: 7px 0 0;
    color: rgba(255,255,255,.63);
    font-size: .72rem;
    line-height: 1.52;
}

.hero-v14-frame {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border: 1px solid rgba(86,217,255,.11);
    border-radius: 32px;
}

.hero-v14-frame-a {
    inset: 11px -10px -12px 11px;
    transform: rotate(1.4deg);
}

.hero-v14-frame-b {
    inset: 21px -18px -21px 20px;
    border-color: rgba(86,217,255,.055);
    transform: rotate(2.5deg);
}

.hero-v14-route-card {
    position: absolute;
    z-index: 8;
    top: -7px;
    right: 14px;
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 8px;
    align-items: center;
    width: 215px;
    padding: 9px 10px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 14px;
    background: rgba(4,24,35,.88);
    backdrop-filter: blur(16px);
    box-shadow: 0 18px 44px rgba(0,0,0,.18);
    animation: heroV14Float 6s ease-in-out infinite;
}

.hero-v14-route-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(89,219,255,.23);
    border-radius: 9px;
    color: #69ddff;
    background: rgba(89,219,255,.08);
}

.hero-v14-route-card strong {
    display: block;
    color: #fff;
    font-size: .66rem;
}

.hero-v14-route-card span:last-child {
    display: block;
    margin-top: 2px;
    color: rgba(255,255,255,.49);
    font-size: .54rem;
}

@keyframes heroV14Float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.hero-v14-orbit {
    position: absolute;
    z-index: 6;
    right: -12px;
    bottom: -33px;
    width: 135px;
    height: 135px;
    border: 1px solid rgba(75,212,255,.16);
    border-radius: 50%;
    pointer-events: none;
}

.hero-v14-orbit::before,
.hero-v14-orbit::after {
    position: absolute;
    inset: 15%;
    border: 1px solid rgba(75,212,255,.08);
    border-radius: 50%;
    content: "";
}

.hero-v14-orbit::after {
    inset: 30%;
    border-color: rgba(75,212,255,.10);
}

.hero-v14-orbit span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #68ddff;
    box-shadow: 0 0 15px rgba(104,221,255,.55);
    animation: heroV14Orbit 5.5s linear infinite;
}

.hero-v14-orbit span:nth-child(1) {
    top: 8px;
    left: 65px;
}

.hero-v14-orbit span:nth-child(2) {
    top: 65px;
    left: 8px;
    animation-delay: -1.8s;
}

.hero-v14-orbit span:nth-child(3) {
    bottom: 14px;
    right: 12px;
    animation-delay: -3.5s;
}

@keyframes heroV14Orbit {
    from {
        transform: rotate(0deg) translateX(52px) rotate(0deg);
    }
    to {
        transform: rotate(360deg) translateX(52px) rotate(-360deg);
    }
}

.hero-v14-visual-controls {
    position: absolute;
    z-index: 10;
    right: 16px;
    bottom: 36px;
    display: flex;
    gap: 5px;
}

.hero-v14-arrow {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 10px;
    color: #fff;
    background: rgba(4,18,26,.82);
    backdrop-filter: blur(10px);
    cursor: pointer;
    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease;
}

.hero-v14-arrow:hover {
    transform: translateY(-2px);
    border-color: rgba(100,220,255,.28);
    background: rgba(8,42,56,.95);
}

.hero-v14-progress {
    position: absolute;
    left: 12px;
    right: 115px;
    bottom: 36px;
    z-index: 9;
    height: 2px;
    overflow: hidden;
    background: rgba(255,255,255,.10);
}

.hero-v14-progress span {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #0ba7d9, #68ddff);
}

.hero-v14-ribbon {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    color: rgba(255,255,255,.34);
    font-size: .51rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hero-v14-ribbon i {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.11);
}

.hero-v14-scroll {
    position: absolute;
    z-index: 11;
    right: 17px;
    bottom: 23px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.36);
    font-size: .52rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    text-decoration: none;
}

.hero-v14-scroll i {
    animation: heroV14Scroll 1.7s ease-in-out infinite;
}

@keyframes heroV14Scroll {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(4px); }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {

    .hero-v14-layout {
        grid-template-columns: minmax(420px, .92fr) minmax(500px, 1.08fr);
        gap: 30px;
    }

    .hero-v14-title {
        font-size: clamp(3rem, 4.35vw, 4.65rem);
    }

    .hero-v14-copy {
        max-width: 545px;
    }

}

@media (max-width: 991px) {

    .hero-v14 {
        min-height: auto;
    }

    .hero-v14-container {
        padding-top: 46px;
        padding-bottom: 34px;
    }

    .hero-v14-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hero-v14-copy {
        max-width: 780px;
    }

    .hero-v14-visual {
        padding-left: 0;
        padding-top: 0;
    }

    .hero-v14-stage {
        max-width: 760px;
        margin: 0 auto;
    }

    .hero-v14-route-card {
        right: 5px;
    }

}

@media (max-width: 575px) {

    .hero-v14-container {
        padding-top: 38px;
        padding-bottom: 25px;
    }

    .hero-v14-kicker {
        max-width: 100%;
    }

    .hero-v14-headline-wrap {
        padding-right: 0;
    }

    .hero-v14-side-note {
        display: none;
    }

    .hero-v14-title {
        font-size: clamp(2.7rem, 13vw, 4rem);
        line-height: .93;
    }

    .hero-v14-description {
        font-size: .82rem;
    }

    .hero-v14-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .hero-v14-actions .btn-rgl {
        width: 100%;
    }

    .hero-v14-service-rail {
        width: 100%;
    }

    .hero-v14-service {
        min-height: 42px;
    }

    .hero-v14-proof-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hero-v14-proof {
        min-width: 0;
    }

    .hero-v14-visual {
        padding-top: 6px;
    }

    .hero-v14-stage {
        aspect-ratio: .95 / 1;
        border-radius: 23px;
    }

    .hero-v14-slide-content {
        left: 19px;
        right: 19px;
        bottom: 19px;
    }

    .hero-v14-slide-content h2 {
        font-size: 2.15rem;
    }

    .hero-v14-slide-content p {
        font-size: .68rem;
    }

    .hero-v14-route-card {
        width: 190px;
    }

    .hero-v14-orbit {
        display: none;
    }

    .hero-v14-ribbon {
        overflow: hidden;
        white-space: nowrap;
    }

    .hero-v14-ribbon span:nth-child(n+5) {
        display: none;
    }

    .hero-v14-scroll {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {

    .hero-v14-route-card,
    .hero-v14-orbit span,
    .hero-v14-scroll i {
        animation: none !important;
    }

    .hero-v14-stage,
    .hero-v14-slide,
    .hero-v14-slide img,
    .hero-v14-service,
    .hero-v14-arrow {
        transition: none !important;
    }

}



/* =========================================================
   V16 — ANRAFRICA-INSPIRED ENHANCEMENT LAYER
   ---------------------------------------------------------
   1. Footer wave divider + floating bubbles
   2. "Why Choose Us" sweep-reveal cards + wave section
   3. Flip cards (front / back) for capability grid
   ========================================================= */

/* ---------- 1. Footer wave + bubbles ---------- */

.footer-wave {
    position: relative;
    line-height: 0;
    background: var(--surface);
}

.footer-wave svg {
    display: block;
    width: 100%;
    height: 64px;
}

.footer-wave path {
    fill: #04111a;
}

.footer-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.footer-bubbles span {
    position: absolute;
    bottom: -120px;
    display: block;
    border-radius: 50%;
    background: rgba(6, 151, 215, .10);
    border: 1px solid rgba(6, 151, 215, .22);
    animation: footerBubbleRise linear infinite;
}

.footer-bubbles span:nth-child(1)  { left: 4%;  width: 18px; height: 18px; animation-duration: 13s; animation-delay: 0s; }
.footer-bubbles span:nth-child(2)  { left: 12%; width: 34px; height: 34px; animation-duration: 17s; animation-delay: 2s; }
.footer-bubbles span:nth-child(3)  { left: 21%; width: 12px; height: 12px; animation-duration: 10s; animation-delay: 1s; }
.footer-bubbles span:nth-child(4)  { left: 33%; width: 26px; height: 26px; animation-duration: 15s; animation-delay: 4s; }
.footer-bubbles span:nth-child(5)  { left: 45%; width: 16px; height: 16px; animation-duration: 12s; animation-delay: 0.5s; }
.footer-bubbles span:nth-child(6)  { left: 55%; width: 40px; height: 40px; animation-duration: 19s; animation-delay: 3s; }
.footer-bubbles span:nth-child(7)  { left: 64%; width: 14px; height: 14px; animation-duration: 11s; animation-delay: 5s; }
.footer-bubbles span:nth-child(8)  { left: 73%; width: 22px; height: 22px; animation-duration: 16s; animation-delay: 1.5s; }
.footer-bubbles span:nth-child(9)  { left: 82%; width: 30px; height: 30px; animation-duration: 14s; animation-delay: 2.5s; }
.footer-bubbles span:nth-child(10) { left: 90%; width: 15px; height: 15px; animation-duration: 18s; animation-delay: 6s; }
.footer-bubbles span:nth-child(11) { left: 96%; width: 20px; height: 20px; animation-duration: 12.5s; animation-delay: 3.5s; }
.footer-bubbles span:nth-child(12) { left: 60%; width: 10px; height: 10px; animation-duration: 9s; animation-delay: 7s; }

@keyframes footerBubbleRise {
    0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
    10%  { opacity: 1; }
    50%  { transform: translateY(-260px) translateX(14px) scale(1.05); }
    90%  { opacity: .6; }
    100% { transform: translateY(-560px) translateX(-10px) scale(.9); opacity: 0; }
}

.site-footer .footer-grid,
.site-footer .footer-bottom {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .footer-bubbles span {
        animation: none;
        display: none;
    }
}

/* ---------- 2. Why Choose Us — sweep reveal cards ---------- */

.reason-section {
    position: relative;
    overflow: hidden;
}

.reason-section .reason-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--transition), box-shadow var(--transition);
}

.reason-section .reason-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg, var(--primary), var(--primary-dark) 80%);
    transform: translateY(-104%);
    transition: transform 480ms cubic-bezier(.2,.8,.2,1);
}

.reason-section .reason-card:hover::after,
.reason-section .reason-card:focus-within::after {
    transform: translateY(0);
}

.reason-section .reason-card .service-icon {
    transition: background var(--transition), color var(--transition), transform var(--transition);
}

.reason-section .reason-card:hover .service-icon,
.reason-section .reason-card:focus-within .service-icon {
    background: rgba(255,255,255,.16);
    color: #fff;
    transform: translateY(-4px);
}

.reason-section .reason-card h3,
.reason-section .reason-card p {
    position: relative;
    transition: color var(--transition);
}

.reason-section .reason-card:hover h3,
.reason-section .reason-card:hover p,
.reason-section .reason-card:focus-within h3,
.reason-section .reason-card:focus-within p {
    color: #fff;
}

.reason-section .reason-card:hover,
.reason-section .reason-card:focus-within {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.reason-wave {
    position: relative;
    line-height: 0;
    margin-top: 56px;
}

.reason-wave svg {
    display: block;
    width: 100%;
    height: 70px;
}

.reason-wave .wave-back   { fill: rgba(255,255,255,.10); }
.reason-wave .wave-mid    { fill: rgba(255,255,255,.18); }
.reason-wave .wave-front  { fill: var(--surface); }

.reason-wave .wave-back,
.reason-wave .wave-mid {
    animation: reasonWaveDrift 9s ease-in-out infinite;
}

.reason-wave .wave-mid {
    animation-duration: 12s;
    animation-direction: reverse;
}

@keyframes reasonWaveDrift {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-3%); }
}

@media (prefers-reduced-motion: reduce) {
    .reason-wave .wave-back,
    .reason-wave .wave-mid {
        animation: none;
    }
}

/* ---------- 3. Flip cards ---------- */

.flip-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.flip-card {
    perspective: 1600px;
    height: 300px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: left;
    transition: transform 720ms cubic-bezier(.2,.8,.2,1);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius-md);
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.flip-card-front {
    background-size: cover;
    background-position: center;
    color: #fff;
    box-shadow: var(--shadow-md);
}

.flip-card-front::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4,17,26,.15) 0%, rgba(4,17,26,.86) 100%);
    z-index: 0;
}

.flip-card-front > * {
    position: relative;
    z-index: 1;
}

.flip-card-front .flip-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.3);
    backdrop-filter: blur(6px);
    margin-bottom: 14px;
    font-size: 1.1rem;
}

.flip-card-front h3 {
    color: #fff;
    margin: 0;
    font-size: 1.3rem;
}

.flip-card-front span {
    display: inline-block;
    margin-top: 8px;
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
}

.flip-card-back {
    background: linear-gradient(160deg, var(--navy-2), var(--navy) 85%);
    color: rgba(255,255,255,.82);
    transform: rotateY(180deg);
    justify-content: center;
    border: 1px solid rgba(6,151,215,.25);
}

.flip-card-back h3 {
    color: #fff;
    font-size: 1.15rem;
    margin-bottom: 10px;
}

.flip-card-back p {
    font-size: .92rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.flip-card-back .service-link {
    align-self: flex-start;
}

@media (max-width: 991px) {
    .flip-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .flip-grid {
        grid-template-columns: 1fr;
    }
    .flip-card {
        height: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .flip-card-inner {
        transition: none;
    }
}


/* =========================================================
   V17 — CONTINUOUS MOTION STRIPS + OVERLAP HARDENING
   ---------------------------------------------------------
   1. Every ticker/marquee strip scrolls in one direction,
      permanently, with a soft edge-fade instead of a hard
      text/icon cut at the left and right boundary.
   2. General overlap-safety net for stacked sections,
      absolute media and floating badges.
   ========================================================= */

.statement-marquee-track,
.logistics-ticker-track {
    will-change: transform;
    backface-visibility: hidden;
    animation-play-state: running !important;
    animation-fill-mode: forwards;
}

/* Force GPU-composited, jitter-free translation */
@keyframes statementMarquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@keyframes tickerMove {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Reduced-motion users still get the fade, just no scroll */
@media (prefers-reduced-motion: reduce) {
    .statement-marquee-track,
    .logistics-ticker-track {
        animation: none !important;
    }
}

/* ---------- 2. Overlap-safety net ---------- */

/* Every top-level section gets its own stacking context so
   absolutely-positioned decoration (glows, badges, wave
   dividers) can never bleed into the section above/below.
   NOTE: .site-header is intentionally excluded here — it
   needs to stay `position: sticky` (set in its own rule
   above) so it pins to the top of the viewport on scroll. */
main > section,
.site-footer,
.statement-marquee,
.logistics-ticker {
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.site-header {
    isolation: isolate;
}

/* Any floating badge/card/label anchored inside a relatively
   positioned parent should never escape that parent's box,
   which is what produces the "text cut by an edge" look. */
.about-accent,
.hero-v19-badge,
.industry-v4-badge,
.floating-badge,
.reason-wave,
.footer-wave {
    max-width: 100%;
}

/* Images inside cards/media frames must never overflow their
   rounded frame and spill text/edges outside it. */
.service-card img,
.about-main-image img,
.flip-card-front,
.gallery-item img,
.industry-display-v4-media img {
    max-width: 100%;
    display: block;
}

/* Headings/paragraphs sitting directly on top of a media
   background always get their own readable stacking layer. */
.section-heading,
.hero-content,
.hero-v19-copy,
.industry-v4-heading {
    position: relative;
    z-index: 2;
}


/* =========================================================
   V18 — MARQUEE / TICKER RELIABILITY FIX
   ---------------------------------------------------------
   Problem: on some browsers/devices the CSS keyframe strip
   could render as a static, hard-clipped row of text
   (looked like an overlap/cut-off bug instead of a moving
   ticker). This layer:
   1. Drives the motion from JavaScript (rAF) instead of a
      CSS @keyframes animation, so it is not affected by
      animation timing quirks or reduced-motion overrides
      meant for other elements.
   2. Adds a real two-layer solid-color edge fade (not just
      a CSS mask, which some environments render as a hard
      cut) so text never looks "chopped" at the boundary.
   3. Guarantees a perfectly seamless loop by measuring the
      actual rendered width of one content group instead of
      assuming translateX(-50%) lines up exactly.
   ========================================================= */

.statement-marquee,
.logistics-ticker {
    position: relative;
    overflow: hidden;
}

.statement-marquee-track,
.logistics-ticker-track {
    display: flex;
    width: max-content;
    will-change: transform;
    /* JS takes over the motion; keep a CSS fallback only for
       the rare case JavaScript fails to run. */
}

.js-marquee-ready .statement-marquee-track,
.js-marquee-ready .logistics-ticker-track {
    animation: none !important;
    transform: translate3d(0, 0, 0);
}

.statement-marquee::before,
.statement-marquee::after,
.logistics-ticker::before,
.logistics-ticker::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(28px, 8vw, 110px);
    z-index: 3;
    pointer-events: none;
}

.statement-marquee::before,
.logistics-ticker::before {
    left: 0;
}

.statement-marquee::after,
.logistics-ticker::after {
    right: 0;
    transform: scaleX(-1);
}

.statement-marquee::before,
.statement-marquee::after {
    background: linear-gradient(90deg, #071923 0%, rgba(7, 25, 35, 0) 100%);
}

.logistics-ticker::before,
.logistics-ticker::after {
    background: linear-gradient(90deg, #061720 0%, rgba(6, 23, 32, 0) 100%);
}

@media (max-width: 575px) {
    .statement-marquee::before,
    .statement-marquee::after,
    .logistics-ticker::before,
    .logistics-ticker::after {
        width: 26px;
    }
}


/* =========================================================
   V19 — CLEAN HERO REDESIGN
   ---------------------------------------------------------
   Replaces the old multi-layer hero (scene tabs, progress
   bar, route card, orbit rings, capability ribbon) with a
   single, intuitive composition:
     - one eyebrow badge
     - one clear two-line headline (no clipped line-reveal)
     - one paragraph
     - two actions
     - one compact stat row
     - one visual panel (single image, one caption)
   ========================================================= */

.hero-v19 {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: clamp(560px, calc(100vh - 105px), 780px);
    padding: 64px 0;
    color: #fff;
    background: radial-gradient(120% 140% at 12% 0%, #0d2c3f 0%, #071621 46%, #050f17 100%);
}

.hero-v19-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero-v19-bg span {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .35;
}

.hero-v19-bg span:first-child {
    width: 460px;
    height: 460px;
    top: -160px;
    right: 6%;
    background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
}

.hero-v19-bg span:last-child {
    width: 380px;
    height: 380px;
    bottom: -180px;
    left: -80px;
    background: radial-gradient(circle, #0aa0e0 0%, transparent 70%);
    opacity: .22;
}

.hero-v19-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 5.5fr) minmax(0, 4.5fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

.hero-v19-copy {
    max-width: 600px;
}

.hero-v19-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(12px);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,255,255,.85);
}

.hero-v19-badge i {
    color: #4fd3ff;
}

.hero-v19-title {
    margin: 0 0 20px;
    max-width: 15ch;
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.16;
    font-size: clamp(1.9rem, 2.5vw + .9rem, 2.65rem) !important;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.hero-v19-title span {
    color: var(--primary);
}

.hero-v19-description {
    max-width: 480px;
    margin-bottom: 30px;
    color: rgba(255,255,255,.68);
    font-size: 1.05rem;
    line-height: 1.7;
}

.hero-v19-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 40px;
}

.hero-v19-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(24px, 4vw, 46px);
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,.12);
}

.hero-v19-stat strong {
    display: block;
    margin-bottom: 3px;
    font-family: var(--display);
    font-size: 1.5rem;
    color: #fff;
}

.hero-v19-stat span {
    font-size: .78rem;
    letter-spacing: .04em;
    color: rgba(255,255,255,.55);
}

/* ---------- Visual panel ---------- */

.hero-v19-visual {
    position: relative;
    perspective: 1200px;
    transition: transform 420ms ease-out;
    transform-style: preserve-3d;
}

.hero-v19-frame {
    position: relative;
    aspect-ratio: 4 / 4.6;
    max-height: 560px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(3,10,16,.55);
    border: 1px solid rgba(255,255,255,.12);
}

.hero-v19-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-v19-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(190deg, rgba(4,14,22,0) 40%, rgba(4,14,22,.86) 100%);
}

.hero-v19-caption {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 24px;
    z-index: 2;
}

.hero-v19-caption span {
    display: inline-block;
    margin-bottom: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    backdrop-filter: blur(8px);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
}

.hero-v19-caption h2 {
    margin: 0 0 4px;
    font-size: 1.5rem;
    color: #fff;
}

.hero-v19-caption p {
    margin: 0;
    font-size: .88rem;
    color: rgba(255,255,255,.72);
}

.hero-v19-tag {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(6,17,26,.55);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(10px);
    font-size: .76rem;
    font-weight: 700;
    color: #fff;
}

.hero-v19-tag i {
    color: var(--primary);
}

@media (max-width: 1199px) {
    .hero-v19-layout {
        grid-template-columns: 1fr;
    }

    .hero-v19-copy {
        max-width: 620px;
    }

    .hero-v19-frame {
        max-height: 460px;
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 575px) {
    .hero-v19 {
        padding: 40px 0;
    }

    .hero-v19-stats {
        gap: 22px;
    }

    .hero-v19-frame {
        aspect-ratio: 4 / 3.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-v19-visual {
        transition: none;
    }
}