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

html {
    scroll-behavior: smooth;
}

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

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

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

body {
    font-family: "Manrope", sans-serif;
    background: #020810;
    color: #fff;
}

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

.bayou-whatsapp {
    position: fixed;
    z-index: 9990;
    right: 22px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 20px 0 16px;
    border-radius: 999px;
    background: #0f9bf2;
    color: #021428;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.02em;
    box-shadow: 0 10px 28px rgba(15, 155, 242, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.bayou-whatsapp svg {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.bayou-whatsapp:hover {
    transform: translateY(-2px);
    background: #0c87d4;
    box-shadow: 0 14px 34px rgba(15, 155, 242, 0.45);
}

@media (max-width: 600px) {
    .bayou-whatsapp {
        right: 14px;
        bottom: 18px;
        min-height: 44px;
        padding: 0 16px 0 14px;
        font-size: 14px;
        gap: 8px;
    }

    .bayou-whatsapp svg {
        width: 20px;
        height: 20px;
    }
}

/* =========================
   HERO
========================= */

.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 50% 55%,
            rgba(15, 155, 242, 0.34) 0%,
            rgba(2, 51, 115, 0.28) 30%,
            transparent 57%
        ),
        linear-gradient(
            180deg,
            #01060c 0%,
            #021018 50%,
            #032044 100%
        );
}

/* Decorative background shapes */

.hero::before {
    content: "";
    position: absolute;
    width: 1050px;
    height: 1050px;

    top: -550px;
    right: -250px;

    border-radius: 50%;

    background: rgba(15, 155, 242, 0.16);

    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;

    width: 1200px;
    height: 600px;

    left: -420px;
    top: 200px;

    transform: rotate(-24deg);

    background: rgba(0, 0, 0, 0.48);

    border-radius: 50%;

    pointer-events: none;
}

.background-shape {
    position: absolute;

    width: 900px;
    height: 1200px;

    right: -220px;
    top: -120px;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.38);

    transform: rotate(-15deg);

    pointer-events: none;
}

/* =========================
   NAVBAR
========================= */

.navbar {
    position: relative;
    z-index: 20;

    width: min(1280px, calc(100% - 80px));
    height: 110px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 700;
}

.logo-mark {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex: 0 0 auto;
    display: block;
}

.logo-wordmark {
    width: 110px;
    height: auto;
    max-width: 110px;
    object-fit: contain;
    display: block;
}

.logo-icon {
    width: 23px;
    height: 23px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 50%;

    background: #0f9bf2;

    font-size: 12px;
    font-weight: 800;
    background: radial-gradient(black, transparent);
    margin-right: 17px;
}

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

    color: #8aa0b4;

    font-size: 15px;
    font-weight: 500;
}

.nav-links a {
    position: relative;
    transition: color .25s ease;
}

.nav-links a:hover {
    color: #fff;
}

.nav-links--desktop a.is-active {
    color: #0f9bf2;
}

.nav-links--desktop a.is-active:hover {
    color: #3db0f7;
}

.nav-links--desktop a.is-active::before,
.nav-links--desktop a.is-active::after {
    display: inline-block;
    color: #0f9bf2;
    font-weight: 600;
    animation: navActiveMark 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nav-links--desktop a.is-active::before {
    content: "[";
    margin-right: 7px;
}

.nav-links--desktop a.is-active::after {
    content: "]";
    margin-left: 7px;
    animation-delay: 0.08s;
}

@keyframes navActiveMark {
    from {
        opacity: 0;
        transform: translateY(6px) scale(0.75);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav-links--desktop a.is-active::before,
    .nav-links--desktop a.is-active::after {
        animation: none;
    }
}

.navbar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    background: rgba(8, 16, 24, 0.55);
    cursor: pointer;
    place-items: center;
    gap: 5px;
    flex-direction: column;
    justify-content: center;
}

.nav-backdrop,
.nav-drawer {
    display: none;
}

.nav-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.client-link {
    display: flex;
    gap: 10px;
    align-items: center;
}

.arrow {
    font-size: 12px;
}

.call-button {
    background: #0f9bf2;
    color: #021428;

    padding: 16px 21px;

    border-radius: 8px;

    font-size: 14px;
    font-weight: 700;

    transition: .25s;
    white-space: nowrap;
}

.call-button__short {
    display: none;
}

.call-button:hover {
    transform: translateY(-2px);
    background: #0c87d4;
    box-shadow: 0 10px 30px rgba(15, 155, 242, .4);
}

/* =========================
   HEADER ORB BADGE
========================= */

.header-orb {
    position: absolute;
    top: 130px;
    right: max(36px, calc((100% - 1280px) / 2 + 8px));
    z-index: 25;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(8, 16, 24, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.header-orb:hover {
    transform: scale(1.05);
    box-shadow: 0 16px 48px rgba(15, 155, 242, 0.22);
}

.header-orb-ring {
    position: absolute;
    inset: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    overflow: visible;
    animation: headerOrbSpin 12s linear infinite;
}

.header-orb-ring text {
    fill: #fff;
    font-size: 15.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-family: "Manrope", sans-serif;
}

.header-orb-ring textPath {
    dominant-baseline: middle;
}

.header-orb-star {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    color: #0f9bf2;
    display: grid;
    place-items: center;
    filter: drop-shadow(0 0 10px rgba(15, 155, 242, 0.55));
}

.header-orb-star svg {
    width: 100%;
    height: 100%;
}

@keyframes headerOrbSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 980px) {
    .header-orb {
        top: auto;
        bottom: 28px;
        right: 20px;
        width: 96px;
        height: 96px;
    }

    .header-orb-star {
        width: 28px;
        height: 28px;
    }

    .header-orb-ring text {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .header-orb {
        width: 84px;
        height: 84px;
        right: 14px;
        bottom: 18px;
    }
}

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

/* =========================
   HERO CONTENT
========================= */

.hero-content {
    position: relative;
    z-index: 10;

    flex: 1;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: min(1100px, 100%);

    margin: 0 auto;

    text-align: center;

    padding: 28px 25px 36px;
}

/* =========================
   HERO PROJECT SHOWCASE
========================= */

.hero-showcase {
    position: relative;
    z-index: 10;
    width: 100%;
    margin-top: auto;
    padding: 10px 0 48px;
    overflow: hidden;
    mask-image: linear-gradient(
        90deg,
        transparent,
        #000 7%,
        #000 93%,
        transparent
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        #000 7%,
        #000 93%,
        transparent
    );
}

.hero-showcase-track {
    display: flex;
    width: max-content;
    animation: heroShowcaseScroll 38s linear infinite;
}

.hero-showcase-group {
    display: flex;
    align-items: stretch;
    gap: 22px;
    padding-right: 22px;
    flex-shrink: 0;
}

.hero-showcase-card {
    position: relative;
    flex: 0 0 auto;
    width: min(380px, 72vw);
    aspect-ratio: 16 / 10;
    border-radius: 22px;
    overflow: hidden;
    background: #061018;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(15, 155, 242, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-showcase-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow:
        0 24px 50px rgba(0, 0, 0, 0.42),
        0 0 28px rgba(15, 155, 242, 0.22);
}

.hero-showcase-card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes heroShowcaseScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

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

.eyebrow {
    color: #0f9bf2;

    font-size: 20px;
    font-weight: 500;

    margin-bottom: 22px;
}

.hero-title {
    font-size: clamp(55px, 6.4vw, 94px);

    line-height: 1.02;

    letter-spacing: -5px;

    font-weight: 800;

    text-transform: uppercase;
}

.hero-title span {
    display: block;

    margin-top: 5px;

    color: #0f9bf2;
}

.hero-description {
    max-width: 720px;

    margin: 27px auto 0;

    font-size: 19px;
    line-height: 1.4;

    font-weight: 700;
}

/* =========================
   YELLOW CTA
========================= */

.project-cta {
    position: relative;

    display: inline-flex;

    margin-top: 34px;

    padding: 15px 29px;

    background: #0f9bf2;
    color: #021428;

    border-radius: 10px;

    font-size: 20px;
    font-weight: 700;

    transform: rotate(4deg);

    box-shadow: 0 10px 20px rgba(0,0,0,.25);

    transition: .25s;
}

.project-cta:hover {
    transform: rotate(1deg) scale(1.04);
}

/* folded corner */



/* =========================
   MOBILE
========================= */

@media (max-width: 1000px) {

    .navbar {
        width: calc(100% - 32px);
        height: 78px;
        gap: 12px;
    }

    .logo-mark {
        width: 38px;
        height: 38px;
    }

    .logo-wordmark {
        width: 96px;
        max-width: 96px;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .nav-links--desktop {
        display: none !important;
    }

    .nav-drawer {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10050;
        width: 100vw;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        margin: 0;
        padding: 110px 28px calc(40px + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: #061018;
        border: 0;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transform: none;
    }

    .nav-drawer-close {
        position: absolute;
        top: calc(18px + env(safe-area-inset-top, 0px));
        right: 18px;
        width: 48px;
        height: 48px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        background: #0b1722;
        cursor: pointer;
        display: grid;
        place-items: center;
        padding: 0;
    }

    .nav-drawer-close span {
        position: absolute;
        width: 18px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
    }

    .nav-drawer-close span:first-child {
        transform: rotate(45deg);
    }

    .nav-drawer-close span:last-child {
        transform: rotate(-45deg);
    }

    .nav-drawer a {
        display: block;
        padding: 18px 2px;
        font-size: 22px;
        font-weight: 700;
        color: #f2f7fb;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-decoration: none;
    }

    .nav-drawer a.is-active,
    .nav-drawer a:hover {
        color: #0f9bf2;
    }

    .nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 10040;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: rgba(2, 6, 13, 0.78);
        border: 0;
        padding: 0;
        cursor: pointer;
    }

    body.nav-is-open {
        overflow: hidden !important;
    }

    body.nav-is-open .navbar {
        z-index: 10060;
        position: relative;
    }

    body.nav-is-open .nav-toggle {
        position: relative;
        z-index: 10070;
        background: #0b1722;
    }

    body.nav-is-open .nav-drawer {
        display: flex !important;
    }

    body.nav-is-open .nav-backdrop {
        display: block;
    }

    body.nav-is-open .nav-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    body.nav-is-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.nav-is-open .nav-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .call-button__full {
        display: none;
    }

    .call-button__short {
        display: inline;
    }

    .call-button {
        padding: 12px 14px;
        font-size: 12px;
    }

    .header-orb {
        display: none;
    }

    .bayou-section--hero > .navbar {
        width: calc(100% - 32px);
        height: 78px;
    }

    .hero-title {
        letter-spacing: -3px;
    }
}

@media (max-width: 700px) {

    .hero {
        min-height: 100vh;
    }

    .navbar {
        height: 72px;
    }

    .bayou-section--hero > .navbar {
        height: 72px;
    }

    .logo-mark {
        width: 34px;
        height: 34px;
    }

    .logo-wordmark {
        width: 84px;
        max-width: 84px;
    }

    .call-button {
        padding: 11px 12px;
        font-size: 11px;
        border-radius: 7px;
    }

    .nav-toggle {
        width: 40px;
        height: 40px;
    }

    .hero-content {
        padding: 20px 20px 28px;
    }

    .eyebrow {
        font-size: 15px;
    }

    .hero-title {
        font-size: 47px;
        line-height: 1.05;
        letter-spacing: -2.5px;
    }

    .hero-description {
        font-size: 16px;
        max-width: 480px;
    }

    .project-cta {
        font-size: 16px;
    }

    .hero-showcase {
        padding-bottom: 36px;
    }

    .hero-showcase-group {
        gap: 14px;
        padding-right: 14px;
    }

    .hero-showcase-card {
        width: min(280px, 78vw);
        border-radius: 16px;
    }

    .hero-showcase-track {
        animation-duration: 28s;
    }
}

@media (max-width: 480px) {

    .navbar {
        width: calc(100% - 24px);
        height: 68px;
        gap: 8px;
    }

    .bayou-section--hero > .navbar {
        width: calc(100% - 24px);
        height: 68px;
    }

    .logo {
        gap: 8px;
    }

    .logo-mark {
        width: 30px;
        height: 30px;
    }

    .logo-wordmark {
        width: 76px;
        max-width: 76px;
    }

    .navbar-actions {
        gap: 8px;
    }

    .call-button {
        padding: 10px 11px;
        font-size: 11px;
    }

    .hero-title {
        font-size: 39px;
    }

    .hero-description br {
        display: none;
    }
}




/* ========================================
CLIENTS / SOCIAL PROOF
========================================= */

.clients-section {
position: relative;
z-index: 20;

min-height: 385px;

padding: 72px 40px 80px;

background:
    radial-gradient(ellipse 80% 55% at 50% -10%, rgba(15, 155, 242, 0.12), transparent 55%),
    linear-gradient(180deg, #02060d 0%, #061018 55%, #08141f 100%);

text-align: center;

overflow: hidden;
color: #d7e3ef;
}


/* =========================
AVATARS
========================= */

.client-avatars {
display: flex;
align-items: center;
justify-content: center;

margin-bottom: 15px;
}

.client-avatars img {
width: 42px;
height: 42px;

object-fit: cover;

border-radius: 50%;
border: 2px solid rgba(15, 155, 242, 0.45);
box-shadow: 0 0 0 1px rgba(2, 6, 13, 0.65);

margin-left: -11px;
}

.client-avatars img:first-child {
margin-left: 0;
}


/* =========================
TITLE
========================= */

.clients-title {
color: #eef5fb;

font-size: 27px;
line-height: 1.3;

font-weight: 600;

letter-spacing: -0.7px;

margin: 0;
}


/* =========================
LOGOS
========================= */

.client-logos {
width: 100%;
margin: 55px auto 0;
overflow: hidden;
mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
);
-webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
);
}

.client-logos-track {
display: flex;
width: max-content;
animation: clientLogosScroll 32s linear infinite;
}

.client-logos-group {
display: flex;
align-items: center;
gap: 55px;
padding-right: 55px;
flex-shrink: 0;
}

.client-logos img {
display: block;
width: auto;
max-width: 190px;
height: 70px;
object-fit: contain;
flex-shrink: 0;
opacity: 0.62;
filter: grayscale(0.15) brightness(1.15) contrast(1.05);
transition:
opacity .3s ease,
filter .3s ease,
transform .3s ease;
}

.client-logos img:hover {
opacity: 1;
filter: grayscale(0) brightness(1.2) contrast(1.05);
transform: translateY(-3px);
}

@keyframes clientLogosScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}

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


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

@media (max-width: 1000px) {

.clients-section {
padding-left: 25px;
padding-right: 25px;
}

.client-logos-group {
gap: 36px;
padding-right: 36px;
}

.client-logos img {
max-width: 150px;
height: 60px;
}
}


@media (max-width: 600px) {

.clients-section {
min-height: auto;

padding:
    60px
    20px
    65px;
}

.clients-title {
font-size: 21px;
}

.client-avatars img {
width: 38px;
height: 38px;
}

.client-logos {
margin-top: 45px;
}

.client-logos-group {
gap: 28px;
padding-right: 28px;
}

.client-logos img {
max-width: 120px;
height: 48px;
}

.client-logos-track {
animation-duration: 22s;
}
}
















/* ========================================
PORTFOLIO SECTION
========================================= */

.portfolio-section {
background: #fff;
padding: 80px 30px 100px;
color: #181818;
}


/* =========================
HEADING
========================= */

.portfolio-heading {
text-align: center;

margin-bottom: 62px;
}

.portfolio-eyebrow {
margin: 0 0 18px;

color: #0f9bf2;

font-size: 17px;
font-weight: 500;

letter-spacing: -0.2px;
}

.portfolio-title {
margin: 0 auto;

font-size: clamp(40px, 4.1vw, 58px);

line-height: 1.12;

letter-spacing: -2.5px;

font-weight: 800;

text-transform: uppercase;
}

.portfolio-title span {
display: block;
}


/* =========================
GRID
========================= */

.portfolio-grid {
width: min(1010px, 100%);

margin: 0 auto;

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 27px;
}


/* =========================
CARD
========================= */

.portfolio-card {
padding: 19px 19px 17px;

background: #fff;

border: 1px solid #d8d8d8;

border-radius: 9px;
}


/* =========================
PROJECT IMAGE
========================= */

.portfolio-image {
width: 100%;
height: 377px;

overflow: hidden;

border-radius: 5px;

background: #eee;
}

.portfolio-image img {
display: block;

width: 100%;
height: 100%;

object-fit: cover;

transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.portfolio-card:hover .portfolio-image img {
transform: scale(1.025);
}


/* =========================
CARD BOTTOM
========================= */

.portfolio-card-bottom {
padding-top: 19px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;
}

.portfolio-card-bottom h3 {
margin: 0;

color: #171717;

font-size: 22px;

line-height: 1.2;

font-weight: 500;

letter-spacing: -0.6px;
}


/* =========================
PURPLE BUTTON
========================= */

.portfolio-button {
flex-shrink: 0;

min-height: 42px;

padding: 0 14px 0 18px;

display: inline-flex;

align-items: center;

justify-content: center;

gap: 9px;

border-radius: 50px;

background: #0f9bf2;

color: #021428;

font-size: 12px;

font-weight: 600;

text-transform: uppercase;

transition:
transform .25s ease,
box-shadow .25s ease,
background .25s ease;
}

.portfolio-arrow {
font-size: 25px;

line-height: 0;

margin-top: -2px;

transition: transform .25s ease;
}

.portfolio-button:hover {
background: #0c87d4;

transform: translateY(-2px);

box-shadow: 0 8px 22px rgba(15, 155, 242, .35);
}

.portfolio-button:hover .portfolio-arrow {
transform: translateX(3px);
}


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

@media (max-width: 900px) {

.portfolio-section {
padding-top: 70px;
}

.portfolio-heading {
margin-bottom: 45px;
}

.portfolio-title {
font-size: 44px;
}

.portfolio-grid {
gap: 18px;
}

.portfolio-image {
height: 330px;
}

}


@media (max-width: 700px) {

.portfolio-section {
padding:
    60px
    18px
    70px;
}

.portfolio-eyebrow {
font-size: 15px;
}

.portfolio-title {
font-size: 36px;

line-height: 1.08;

letter-spacing: -1.7px;
}

.portfolio-grid {
grid-template-columns: 1fr;

max-width: 500px;
}

.portfolio-image {
height: 390px;
}

}


@media (max-width: 450px) {

.portfolio-title {
font-size: 31px;
}

.portfolio-card {
padding: 12px;
}

.portfolio-image {
height: 310px;
}

.portfolio-card-bottom {
padding: 16px 3px 3px;
}

.portfolio-card-bottom h3 {
font-size: 19px;
}

.portfolio-button {
min-height: 39px;

padding:
    0
    12px
    0
    15px;

font-size: 10px;
}

}












/* ========================================
WOW / STATS SECTION
========================================= */

.wow-section {
position: relative;

background: #023373;

padding: 88px 30px 88px;

overflow: hidden;

color: #fff;
}

.wow-section::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
top: -180px;
right: -120px;
border-radius: 50%;
background: rgba(15, 155, 242, 0.18);
pointer-events: none;
animation: wowGlowDrift 8s ease-in-out infinite;
}

.wow-section::after {
content: "";
position: absolute;
width: 420px;
height: 420px;
bottom: -160px;
left: -100px;
border-radius: 50%;
background: rgba(15, 155, 242, 0.12);
pointer-events: none;
animation: wowGlowDrift 10s ease-in-out infinite reverse;
}

.wow-container {
width: min(1380px, 100%);

margin: 0 auto;
}


/* ========================================
HEADING
========================================= */

.wow-heading {
text-align: center;

margin-bottom: 72px;

opacity: 0;
transform: translateY(28px);
transition:
opacity 0.7s ease,
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.wow-section.is-visible .wow-heading {
opacity: 1;
transform: translateY(0);
}

.wow-eyebrow {
margin: 0 0 18px;

font-size: 20px;
line-height: 1.3;

font-weight: 400;

color: #fff;
}

.wow-title {
max-width: 1050px;

margin: 0 auto;

font-size: clamp(46px, 4.5vw, 68px);

line-height: 1.22;

letter-spacing: -2.5px;

font-weight: 800;

text-transform: uppercase;

color: #fff;
}

.wow-title span {
display: block;
}


/* ========================================
GRID
========================================= */

.wow-grid {
display: grid;

grid-template-columns:
repeat(4, 1fr);

gap: 18px;
}


/* ========================================
CARD
========================================= */

.wow-card {
position: relative;

height: 210px;

display: flex;

align-items: center;

justify-content: center;

background: #0f9bf2;

border-radius: 17px;

overflow: hidden;

color: #023373;

opacity: 0;
transform: translateY(36px) scale(0.96);
transition:
opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.3s ease;
transition-delay: var(--wow-delay, 0ms);
}

.wow-section.is-visible .wow-card {
opacity: 1;
transform: translateY(0) scale(1);
}

.wow-card-content {
position: relative;

z-index: 5;

text-align: center;
}

.wow-card p {
margin: 12px 0 0;

font-size: 27px;

line-height: 1.12;

font-weight: 400;

letter-spacing: -1px;
}


/* ========================================
CARD 01
========================================= */

.wow-number {
color: #023373;

font-size: 57px;

line-height: 1;

font-weight: 800;
}


/* ========================================
CARD 02 — WOW
========================================= */

.wow-word {
color: #fff;

font-size: 54px;

line-height: 1;

font-weight: 800;

letter-spacing: -5px;

transform: rotate(-5deg);

text-shadow:
1px 1px 0 #023373,
2px 2px 0 #023373,
3px 3px 0 #023373,
4px 4px 0 #01264a,
5px 5px 0 #011e3d;
}

.wow-section.is-visible .wow-word {
animation: wowWordBounce 2.8s ease-in-out 0.8s infinite;
}


/* ========================================
CARD 03 — AVATARS
========================================= */

.wow-avatars {
height: 58px;

display: flex;

align-items: center;

justify-content: center;

margin-bottom: 7px;
}

.wow-avatars img {
width: 57px;
height: 57px;

object-fit: cover;

border-radius: 50%;

margin-left: -10px;

background: #eee;

opacity: 0;
transform: scale(0.6);
}

.wow-section.is-visible .wow-avatars img {
animation: wowAvatarPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.wow-section.is-visible .wow-avatars img:nth-child(1) {
animation-delay: 0.45s;
}

.wow-section.is-visible .wow-avatars img:nth-child(2) {
animation-delay: 0.58s;
}

.wow-section.is-visible .wow-avatars img:nth-child(3) {
animation-delay: 0.71s;
}

.wow-avatars img:nth-child(1) {
margin-left: 0;

background: #9fd8fb;
}

.wow-avatars img:nth-child(2) {
background: #d6faff;
}

.wow-avatars img:nth-child(3) {
background: #023373;
}


/* ========================================
CARD 04 — EXPERIENCE
========================================= */

.wow-experience {
isolation: isolate;
}

.big-ten {
position: absolute;

z-index: 1;

left: 50%;

top: 50%;

transform:
translate(-50%, -50%)
rotate(8deg);

font-size: 190px;

line-height: 1;

font-weight: 800;

letter-spacing: -20px;

color: #023373;

opacity: .35;
}

.wow-section.is-visible .big-ten {
animation: wowTenFloat 5s ease-in-out 0.9s infinite;
}

.big-ten::after {
content: "";

position: absolute;

left: 20px;

right: 0;

top: 70%;

height: 90px;

background:
linear-gradient(
    to bottom,
    rgba(15, 155, 242, 0),
    #0f9bf2
);
}

.experience-text {
position: relative;

z-index: 5;

margin-top: 20px;

text-align: center;

font-size: 27px;

line-height: 1.05;

letter-spacing: -1px;
}

.experience-text span {
display: block;

font-size: 25px;

margin-bottom: 2px;
}


/* ========================================
CARD HOVER
========================================= */

.wow-section.is-visible .wow-card:hover {
transform: translateY(-6px) scale(1);

box-shadow:
0 20px 35px
rgba(2, 30, 60, .18);
}

@keyframes wowGlowDrift {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(-30px, 20px) scale(1.08); }
}

@keyframes wowWordBounce {
0%, 100% { transform: rotate(-5deg) translateY(0); }
50% { transform: rotate(-3deg) translateY(-6px); }
}

@keyframes wowAvatarPop {
to {
opacity: 1;
transform: scale(1);
}
}

@keyframes wowTenFloat {
0%, 100% {
transform: translate(-50%, -50%) rotate(8deg) scale(1);
}
50% {
transform: translate(-50%, -54%) rotate(6deg) scale(1.04);
}
}

@media (prefers-reduced-motion: reduce) {
.wow-section::before,
.wow-section::after,
.wow-section.is-visible .wow-word,
.wow-section.is-visible .big-ten,
.wow-section.is-visible .wow-avatars img {
animation: none;
}

.wow-heading,
.wow-card,
.wow-avatars img {
opacity: 1;
transform: none;
transition: none;
}
}


/* ========================================
RESPONSIVE — TABLET
========================================= */

@media (max-width: 1050px) {

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

.wow-card {
height: 220px;
}

}


/* ========================================
RESPONSIVE — MOBILE
========================================= */

@media (max-width: 600px) {

.wow-section {
padding:
    65px
    18px
    65px;
}

.wow-heading {
margin-bottom: 45px;
}

.wow-eyebrow {
font-size: 16px;
}

.wow-title {
font-size: 37px;

line-height: 1.12;

letter-spacing: -1.7px;
}

.wow-grid {
grid-template-columns: 1fr;

gap: 14px;
}

.wow-card {
height: 200px;
}

.wow-number {
font-size: 54px;
}

.wow-word {
font-size: 52px;
}

.wow-card p {
font-size: 25px;
}

}


/* ========================================
SMALL MOBILE
========================================= */

@media (max-width: 400px) {

.wow-title {
font-size: 32px;
}

}



/* ========================================
TESTIMONIALS
========================================= */

.testimonials-section {
position: relative;

background:
linear-gradient(
    120deg,
    #01264a 0%,
    #023373 50%,
    #0a5ea3 100%
);

padding: 95px 25px 55px;

overflow: hidden;
}


/* ========================================
WRAPPER
========================================= */

.testimonials-wrapper {
width: min(850px, 100%);

margin: 0 auto;
}


/* ========================================
SLIDER
========================================= */

.testimonials-slider {
position: relative;

min-height: 410px;
}

.testimonial-slide {
display: none;

grid-template-columns: 350px 1fr;

min-height: 410px;

overflow: hidden;

border-radius: 26px;

background: #1c1d1e;

color: #fff;

animation: testimonialFade .45s ease;
}

.testimonial-slide.active {
display: grid;
}

@keyframes testimonialFade {

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

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


/* ========================================
LEFT
========================================= */

.testimonial-person {
display: flex;

align-items: flex-start;

gap: 25px;

padding: 36px 30px 35px 35px;

background: #1b1c1d;
}

.testimonial-avatar {
flex-shrink: 0;

width: 70px;
height: 70px;

overflow: hidden;

border-radius: 50%;

background: #0f9bf2;
}

.testimonial-avatar img {
width: 100%;
height: 100%;

display: block;

object-fit: cover;
}

.testimonial-person-info {
padding-top: 1px;
}

.testimonial-person-info h3 {
margin: 0 0 4px;

font-size: 24px;

line-height: 1.2;

font-weight: 500;

letter-spacing: -0.8px;
}

.testimonial-person-info p {
margin: 0;

color: #dedede;

font-size: 20px;

line-height: 1.45;

font-weight: 400;
}


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

.testimonial-content {
display: flex;

flex-direction: column;

align-items: flex-start;

padding: 35px 35px 34px;

background: #232425;

border-radius: 26px;
}

.testimonial-text {
max-width: 420px;

margin: 0;

color: #fff;

font-size: 25px;

line-height: 1.27;

letter-spacing: -0.8px;

font-weight: 400;
}


/* ========================================
BUTTON
========================================= */

.testimonial-button {
display: inline-flex;

align-items: center;

justify-content: center;

min-height: 58px;

margin-top: auto;

padding: 0 27px;

background: #0f9bf2;

border-radius: 8px;

color: #021428;

font-size: 14px;

font-weight: 700;

transition:
transform .25s ease,
background .25s ease,
box-shadow .25s ease;
}

.testimonial-button:hover {
background: #0c87d4;

transform: translateY(-2px);

box-shadow:
0 10px 25px
rgba(15, 155, 242, .3);
}


/* ========================================
DOTS
========================================= */

.testimonial-dots {
display: flex;

align-items: center;

justify-content: center;

gap: 17px;

margin-top: 50px;
}

.testimonial-dot {
width: 18px;
height: 18px;

padding: 0;

border: 0;

border-radius: 50%;

background: #3e3e3e;

cursor: pointer;

transition:
background .25s ease,
transform .25s ease;
}

.testimonial-dot.active {
background: #fff;
}

.testimonial-dot:hover {
transform: scale(1.15);
}


/* ========================================
TABLET
========================================= */

@media (max-width: 800px) {

.testimonials-wrapper {
max-width: 600px;
}

.testimonials-slider {
min-height: auto;
}

.testimonial-slide {
grid-template-columns: 1fr;

min-height: auto;
}

.testimonial-person {
padding: 28px;
}

.testimonial-content {
min-height: 350px;

padding: 30px;

border-radius: 0 0 26px 26px;
}

}


/* ========================================
MOBILE
========================================= */

@media (max-width: 550px) {

.testimonials-section {
padding:
    60px
    18px
    40px;
}

.testimonial-slide {
border-radius: 20px;
}

.testimonial-person {
gap: 17px;

padding: 25px 22px;
}

.testimonial-avatar {
width: 58px;
height: 58px;
}

.testimonial-person-info h3 {
font-size: 20px;
}

.testimonial-person-info p {
font-size: 16px;
}

.testimonial-content {
min-height: 320px;

padding: 27px 22px;

border-radius: 0 0 20px 20px;
}

.testimonial-text {
font-size: 21px;

line-height: 1.3;
}

.testimonial-button {
min-height: 50px;

padding: 0 20px;

font-size: 12px;
}

.testimonial-dots {
margin-top: 32px;

gap: 13px;
}

.testimonial-dot {
width: 14px;
height: 14px;
}

}








/* ========================================
ROADMAP SECTION
========================================= */

.roadmap-section {
position: relative;
overflow: hidden;

padding: 72px 30px 65px;

color: #fff;

background:
radial-gradient(
    circle at 50% 100%,
    rgba(15, 155, 242, .55) 0%,
    rgba(2, 51, 115, .4) 34%,
    transparent 63%
),
linear-gradient(
    180deg,
    #020810 0%,
    #031422 48%,
    #042848 100%
);
}


/* Decorative black curve */

.roadmap-section::before {
content: "";

position: absolute;

width: 1500px;
height: 850px;

left: 50%;
top: 240px;

transform: translateX(-50%);

border-radius: 50% 50% 0 0;

background: rgba(0, 0, 0, .57);

pointer-events: none;
}


/* right purple shape */

.roadmap-bg-shape {
position: absolute;

width: 700px;
height: 1200px;

right: -350px;
top: -200px;

transform: rotate(-17deg);

border-radius: 50%;

background: rgba(15, 155, 242, .16);

pointer-events: none;
}


.roadmap-container {
position: relative;
z-index: 5;

width: min(1420px, 100%);

margin: 0 auto;
}


/* ========================================
HEADING
========================================= */

.roadmap-heading {
position: relative;
z-index: 4;

text-align: center;

margin-bottom: 80px;
}


.roadmap-eyebrow {
margin: 0 0 16px;

color: #fff;

font-size: 20px;

font-weight: 400;
}


.roadmap-title {
max-width: 1000px;

margin: 0 auto;

color: #f4fbff;

font-size: clamp(45px, 4.5vw, 67px);

line-height: 1.16;

letter-spacing: -2.5px;

font-weight: 800;

text-transform: uppercase;
}


.roadmap-title span {
display: block;
}


/* ========================================
TIMELINE
========================================= */

.roadmap-timeline {
position: relative;

width: calc(100% - 110px);

height: 35px;

margin: 0 auto;
}


.roadmap-line {
position: absolute;

left: 0;
right: 0;

top: 50%;

height: 1px;

background: rgba(255,255,255,.3);
}


.roadmap-point {
position: absolute;

top: 50%;

width: 15px;
height: 15px;

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

border-radius: 50%;

border: 1px solid #707070;

background: #090909;
}


.roadmap-point:nth-of-type(1) {
left: 0;
}

.roadmap-point:nth-of-type(2) {
left: 25%;
}

.roadmap-point:nth-of-type(3) {
left: 50%;
}

.roadmap-point:nth-of-type(4) {
left: 75%;
}

.roadmap-point:nth-of-type(5) {
left: 100%;
}


.roadmap-point.active {
border-color: #0f9bf2;

background: #0b0b0b;
}


/* ========================================
CARDS GRID
========================================= */

.roadmap-grid {
display: grid;

grid-template-columns:
repeat(5, 1fr);

gap: 24px;
}


/* ========================================
CARD
========================================= */

.roadmap-card {
position: relative;

min-width: 0;

min-height: 430px;

padding: 19px;

border-radius: 16px;

background:
linear-gradient(
    180deg,
    rgba(8, 24, 42, .92) 0%,
    rgba(2, 51, 115, .88) 100%
);

transition:
transform .3s ease,
border-color .3s ease,
box-shadow .3s ease;

border: 1px solid transparent;
}


.roadmap-card:hover {
transform: translateY(-7px);
}


/* Active card */

.roadmap-card-active {
border-color: #0f9bf2;

background:
linear-gradient(
    180deg,
    rgba(10, 32, 56, .95) 0%,
    rgba(15, 120, 190, .88) 100%
);
}


/* ========================================
IMAGE
========================================= */

.roadmap-image {
width: 100%;

height: 150px;

margin-bottom: 17px;

display: flex;

align-items: center;

justify-content: center;

overflow: hidden;

border-radius: 15px;

background: #fff;
}


.roadmap-image img {
width: 100%;
height: 100%;

display: block;

object-fit: contain;
}


/* ========================================
STEP LABEL
========================================= */

.roadmap-step {
display: block;

margin-bottom: 13px;

color: #0f9bf2;

font-size: 13px;

line-height: 1;

font-weight: 800;

text-transform: uppercase;
}


/* ========================================
CARD TITLE
========================================= */

.roadmap-card h3 {
margin: 0 0 8px;

color: #fff;

font-size: 19px;

line-height: 1.17;

letter-spacing: -.4px;

font-weight: 800;

text-transform: uppercase;
}


/* ========================================
DESCRIPTION
========================================= */

.roadmap-card p {
margin: 0;

color: rgba(255,255,255,.85);

font-size: 15px;

line-height: 1.45;

font-weight: 400;
}


/* ========================================
CTA
========================================= */

.roadmap-cta-wrapper {
margin-top: 65px;

display: flex;

justify-content: center;
}


.roadmap-cta {
position: relative;

display: inline-flex;

align-items: center;

justify-content: center;

min-height: 60px;

padding: 0 31px;

border-radius: 10px;

background: #0f9bf2;

color: #021428;

font-size: 22px;

font-weight: 700;

letter-spacing: -.8px;

transform: rotate(4deg);

box-shadow:
0 10px 0 rgba(2, 20, 48, .45);

transition:
transform .25s ease,
box-shadow .25s ease;
}







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

@media (max-width: 1200px) {

.roadmap-grid {
gap: 15px;
}

.roadmap-card {
padding: 14px;
}

.roadmap-image {
height: 135px;
}

.roadmap-card h3 {
font-size: 17px;
}

.roadmap-card p {
font-size: 14px;
}

}


@media (max-width: 950px) {

.roadmap-timeline {
display: none;
}

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

.roadmap-card {
min-height: 420px;
}

.roadmap-image {
height: 200px;
}

}


@media (max-width: 600px) {

.roadmap-section {
padding:
    60px
    18px
    60px;
}

.roadmap-heading {
margin-bottom: 45px;
}

.roadmap-eyebrow {
font-size: 16px;
}

.roadmap-title {
font-size: 36px;

line-height: 1.1;

letter-spacing: -1.6px;
}

.roadmap-grid {
grid-template-columns: 1fr;

max-width: 450px;

margin: 0 auto;

gap: 16px;
}

.roadmap-card {
min-height: auto;

padding: 18px;
}

.roadmap-image {
height: 220px;
}

.roadmap-card h3 {
font-size: 21px;
}

.roadmap-card p {
font-size: 16px;
}

.roadmap-cta-wrapper {
margin-top: 45px;
}

.roadmap-cta {
min-height: 55px;

padding: 0 24px;

font-size: 18px;
}

}







/* ========================================
BENEFITS SECTION
========================================= */

.benefits-section {
position: relative;

padding: 90px 30px 18px;

background: #023373;

color: #111;

overflow: hidden;
padding-bottom: 100px;
}


.benefits-container {
width: min(1425px, 100%);

margin: 0 auto;
}


/* ========================================
HEADING
========================================= */

.benefits-heading {
text-align: center;

margin-bottom: 70px;
}


.benefits-eyebrow {
margin: 0 0 18px;

color: #fff;

font-size: 20px;

line-height: 1.3;

font-weight: 400;
}


.benefits-title {
max-width: 950px;

margin: 0 auto;

color: #f4fbff;

font-size: clamp(46px, 4.5vw, 67px);

line-height: 1.17;

letter-spacing: -2.5px;

font-weight: 800;

text-transform: uppercase;
}


.benefits-title span {
display: block;
}


/* ========================================
CARDS GRID
========================================= */

.benefits-grid {
display: grid;

grid-template-columns:
repeat(4, minmax(0, 1fr));

gap: 32px;

align-items: stretch;
}


/* ========================================
CARD
========================================= */

.benefit-card {
position: relative;

min-height: 390px;

padding:
130px
30px
30px;

background: #0f9bf2;

border-radius: 16px;

color: #021428;

overflow: visible;

transition:
transform .3s ease,
box-shadow .3s ease;
}


.benefit-card:hover {
transform: translateY(-7px);

box-shadow:
0 20px 40px
rgba(2, 51, 115, .2);
}


/* ========================================
3D IMAGE
========================================= */

.benefit-visual {
position: absolute;

z-index: 3;

top: -52px;
left: 25px;

width: 170px;
height: 170px;

display: flex;

align-items: center;

justify-content: center;

pointer-events: none;
}


.benefit-visual img {
display: block;

width: 100%;
height: 100%;

object-fit: contain;

/*
مهم إذا كانت صورتك PNG / WEBP transparent
*/
filter:
drop-shadow(
    0 14px 8px
    rgba(2, 30, 60, .2)
);
}


/* اختلاف بسيط في أماكن الصور
حتى تبدو مثل المرجع */

.benefit-card:nth-child(1) .benefit-visual {
width: 190px;
height: 190px;

top: -65px;
left: 23px;
}


.benefit-card:nth-child(2) .benefit-visual {
width: 160px;
height: 160px;

top: -48px;
left: 25px;
}


.benefit-card:nth-child(3) .benefit-visual {
width: 155px;
height: 155px;

top: -50px;
left: 28px;
}


.benefit-card:nth-child(4) .benefit-visual {
width: 175px;
height: 175px;

top: -50px;
left: 25px;
}


/* ========================================
CARD TITLE
========================================= */

.benefit-card h3 {
margin: 0 0 27px;

color: #021428;

font-size: 27px;

line-height: 1.13;

letter-spacing: -1px;

font-weight: 800;
}


/* ========================================
DESCRIPTION
========================================= */

.benefit-card p {
margin: 0;

color: #023373;

font-size: 16px;

line-height: 1.65;

font-weight: 400;
}


/* ========================================
TABLET
========================================= */

@media (max-width: 1100px) {

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

gap:
    80px
    25px;
}


.benefit-card {
min-height: 370px;
}

}


/* ========================================
MOBILE
========================================= */

@media (max-width: 650px) {

.benefits-section {
padding:
    65px
    18px
    60px;
}


.benefits-heading {
margin-bottom: 100px;
}


.benefits-eyebrow {
font-size: 16px;
}


.benefits-title {
font-size: 37px;

line-height: 1.1;

letter-spacing: -1.6px;
}


.benefits-grid {
grid-template-columns: 1fr;

max-width: 450px;

margin: 0 auto;

gap: 85px;
}


.benefit-card {
min-height: auto;

padding:
    125px
    25px
    30px;
}


.benefit-card h3 {
font-size: 25px;

margin-bottom: 20px;
}


.benefit-card p {
font-size: 16px;

line-height: 1.55;
}

}


/* ========================================
FAQ SECTION
========================================= */

.faq-section {
background: #fff;

padding: 70px 25px 85px;

color: #181818;
}


.faq-container {
width: min(830px, 100%);

margin: 0 auto;
}


/* ========================================
HEADING
========================================= */

.faq-heading {
text-align: center;
margin-bottom: 65px;
display: flex;
flex-direction: column;
align-items: center;
}


.faq-eyebrow {
margin: 0 0 20px;
color: #0f9bf2;
font-size: 18px;
line-height: 1.3;
font-weight: 500;
letter-spacing: 0.02em;
}


.faq-title {
margin: 0;
color: #181818;
font-size: clamp(42px, 4.2vw, 64px);
line-height: 0.98;
letter-spacing: -0.04em;
font-weight: 800;
text-transform: uppercase;
text-align: center;
}


.faq-title span {
display: block;
color: #0f9bf2;
}

.faq-title-row {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
width: 100%;
max-width: 720px;
}

.faq-title-star {
width: clamp(64px, 8vw, 96px);
height: auto;
flex: 0 0 auto;
display: block;
filter: drop-shadow(0 8px 28px rgba(15, 155, 242, 0.35));
animation: faqStarFloat 4.2s ease-in-out infinite;
}

@keyframes faqStarFloat {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-8px) rotate(8deg); }
}

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

@media (min-width: 651px) {
.faq-title-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    justify-content: center;
    column-gap: 22px;
    row-gap: 0;
    text-align: left;
    width: auto;
    max-width: none;
}

.faq-title-star {
    grid-row: 1;
    width: clamp(78px, 9vw, 108px);
}

.faq-title {
    text-align: left;
    grid-column: 2;
}
}


/* ========================================
FAQ LIST
========================================= */

.faq-list {
display: flex;

flex-direction: column;

gap: 15px;
}


/* ========================================
FAQ ITEM
========================================= */

.faq-item {
position: relative;

overflow: hidden;

border: 1px solid #bfc0c8;

border-radius: 16px;

background: #fff;

transition:
background .3s ease,
border-color .3s ease;
}


/* OPEN ITEM */

.faq-item.active {
border-color: transparent;

background: #e7f4fd;
}


/* ========================================
QUESTION
========================================= */

.faq-question {
width: 100%;

min-height: 72px;

padding: 0 24px;

display: flex;

align-items: center;

justify-content: space-between;

gap: 25px;

border: 0;

background: transparent;

color: #181818;

font-family: inherit;

font-size: 16px;

line-height: 1.35;

font-weight: 600;

text-align: left;

cursor: pointer;
}


/* ========================================
PLUS / CLOSE BUTTON
========================================= */

.faq-icon {
flex: 0 0 auto;

width: 38px;
height: 38px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 50%;

background: #d7eefc;

color: #0f9bf2;

font-size: 23px;

line-height: 1;

font-weight: 300;

transition:
transform .3s ease,
background .3s ease;
}


.faq-question:hover .faq-icon {
transform: scale(1.08);
}


/* Open icon */

.faq-item.active .faq-icon {
color: #023373;

background: #c5e6f8;
}


/* ========================================
ANSWER
========================================= */

.faq-answer {
display: grid;

grid-template-rows: 0fr;

transition:
grid-template-rows .35s ease;
}


.faq-item.active .faq-answer {
grid-template-rows: 1fr;
}


.faq-answer-inner {
min-height: 0;

overflow: hidden;

padding:
0
24px;

color: #5e7384;

font-size: 16px;

line-height: 1.5;

transition:
padding .35s ease;
}


.faq-item.active .faq-answer-inner {
padding:
0
70px
28px
24px;
}


/*
عندما يكون العنصر مفتوحاً
نقلل المسافة تحت السؤال
*/

.faq-item.active .faq-question {
min-height: 53px;

padding-top: 10px;
}


/* ========================================
MOBILE
========================================= */

@media (max-width: 650px) {

.faq-section {
padding:
    60px
    18px
    65px;
}


.faq-heading {
margin-bottom: 42px;
}


.faq-eyebrow {
font-size: 15px;
margin-bottom: 14px;
}


.faq-title {
font-size: clamp(32px, 9vw, 40px);
line-height: 1.02;
letter-spacing: -0.035em;
}

.faq-title-row {
gap: 10px;
}

.faq-title-star {
width: 58px;
}


.faq-list {
gap: 11px;
}


.faq-item {
border-radius: 13px;
}


.faq-question {
min-height: 68px;

padding:
    0
    16px;

gap: 15px;

font-size: 15px;
}


.faq-icon {
width: 35px;
height: 35px;

font-size: 21px;
}


.faq-answer-inner {
font-size: 14px;
}


.faq-item.active .faq-answer-inner {
padding:
    0
    55px
    22px
    16px;
}

}











/* ========================================
CONTACT CTA
========================================= */

.contact-cta-section {
background: #fff;
padding: 45px 25px 100px;
}

.contact-cta-box {
width: min(1045px, 100%);
margin: 0 auto;

padding: 55px 46px 57px;

background: #023373;

border-radius: 23px;
}


/* TITLE */

.contact-cta-title {
margin: 0 0 43px;

text-align: center;

color: #fff;

font-size: 42px;
line-height: 1.27;

letter-spacing: -1.7px;

font-weight: 800;

text-transform: uppercase;
}

.contact-cta-title span {
display: block;
}


/* ========================================
BUTTONS
========================================= */

.contact-cta-actions {
display: grid;

grid-template-columns: 1fr 1fr;

gap: 19px;
}


.contact-action {
min-height: 79px;

padding: 0 35px;

display: flex;

align-items: center;

justify-content: center;

gap: 16px;

border-radius: 15px;

font-size: 23px;

line-height: 1;

font-weight: 500;

transition:
transform .25s ease,
box-shadow .25s ease;
}


.contact-action svg {
width: 26px;
height: 26px;

flex: 0 0 auto;

fill: none;

stroke: currentColor;

stroke-width: 1.8;

stroke-linecap: round;

stroke-linejoin: round;
}


.contact-action:hover {
transform: translateY(-3px);

box-shadow:
0 12px 30px
rgba(2, 51, 115, .2);
}


/* CALENDAR */

.contact-calendar {
background: #0f9bf2;

color: #021428;
}


/* WHATSAPP */

.contact-whatsapp {
background: #fff;

color: #151515;
}

.contact-whatsapp svg {
color: #00c96b;
}


/* ========================================
TABLET
========================================= */

@media (max-width: 800px) {

.contact-cta-box {
padding:
    50px
    30px;
}

.contact-cta-title {
font-size: 36px;
}

.contact-action {
padding:
    0
    20px;

font-size: 19px;
}

}


/* ========================================
MOBILE
========================================= */

@media (max-width: 600px) {

.contact-cta-section {
padding:
    25px
    18px
    65px;
}

.contact-cta-box {
padding:
    42px
    20px
    22px;

border-radius: 18px;
}

.contact-cta-title {
margin-bottom: 32px;

font-size: 31px;

line-height: 1.15;

letter-spacing: -1.2px;
}

.contact-cta-actions {
grid-template-columns: 1fr;

gap: 12px;
}

.contact-action {
min-height: 66px;

border-radius: 12px;

font-size: 18px;
}

.contact-action svg {
width: 23px;
height: 23px;
}

}





/* ========================================
YELLOW BANNER CTA
========================================= */

.yellow-banner {
padding: 90px 40px 110px;
background: #fff;
overflow: visible;
}

.yellow-banner-shell {
position: relative;
width: min(1320px, 100%);
margin: 0 auto;
}

.yellow-banner-box {
position: relative;
min-height: 520px;
padding: 110px 80px 100px;
background: #0f9bf2;
border: 5px solid #023373;
border-radius: 40px;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}

.yellow-banner-content {
position: relative;
z-index: 3;
width: min(900px, 100%);
margin: 0 auto;
}

.yellow-banner-content h2 {
margin: 0;
color: #fff;
font-size: clamp(36px, 5.4vw, 68px);
line-height: 1.08;
letter-spacing: -2.2px;
font-weight: 800;
text-transform: uppercase;
}

.yellow-banner-content h2 span {
display: block;
}

.yellow-banner-content p {
max-width: 720px;
margin: 28px auto 0;
color: rgba(255, 255, 255, 0.94);
font-size: clamp(18px, 1.7vw, 22px);
line-height: 1.55;
font-weight: 600;
}

.yellow-banner-cta {
display: inline-flex;
align-items: center;
gap: 16px;
margin-top: 40px;
padding: 16px 18px 16px 34px;
background: #023373;
color: #fff;
border-radius: 999px;
font-size: 20px;
font-weight: 800;
transition: transform 0.25s ease, background 0.25s ease;
}

.yellow-banner-cta:hover {
transform: translateY(-3px) scale(1.03);
background: #01264a;
}

.yellow-banner-cta-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: #fff;
flex: 0 0 auto;
}

.yellow-banner-cta-icon svg {
width: 24px;
height: 24px;
fill: #023373;
}

.yellow-banner-badge {
position: absolute;
z-index: 6;
width: 120px;
height: 120px;
pointer-events: none;
}

.yellow-banner-badge svg,
.yellow-banner-badge img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}

.yellow-banner-star {
fill: #023373;
}

.yellow-banner-badge-bottom {
bottom: -55px;
left: -45px;
width: 200px;
height: 170px;
animation: yellowBadgeSpin 10s linear infinite;
}

.yellow-banner-ribbons {
position: absolute;
right: -12%;
bottom: -22%;
width: 55%;
min-width: 380px;
height: 240px;
z-index: 2;
pointer-events: none;
transform: rotate(-30deg);
transform-origin: center;
}

.yellow-banner-ribbon {
width: 160%;
margin-left: -20%;
padding: 12px 0;
overflow: hidden;
font-size: 13px;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}

.yellow-banner-ribbon-track {
display: flex;
width: max-content;
animation: yellowRibbonScroll 20s linear infinite;
}

.yellow-banner-ribbon-track span {
flex: 0 0 auto;
white-space: nowrap;
padding-right: 0.35em;
}

.yellow-banner-ribbon-light {
background: #fff;
color: #023373;
border-block: 3px solid #023373;
margin-bottom: 12px;
}

.yellow-banner-ribbon-dark {
background: #023373;
color: #fff;
border-block: 3px solid #01264a;
}

.yellow-banner-ribbon-dark .yellow-banner-ribbon-track {
animation-direction: reverse;
animation-duration: 24s;
}

@keyframes yellowBadgeSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

@keyframes yellowRibbonScroll {
from { transform: translateX(0); }
to { transform: translateX(-25%); }
}

@media (max-width: 1000px) {
.yellow-banner {
    padding: 70px 24px 90px;
}

.yellow-banner-box {
    min-height: 440px;
    padding: 90px 40px 85px;
    border-radius: 32px;
}

.yellow-banner-content h2 {
    letter-spacing: -1.4px;
}

.yellow-banner-ribbons {
    width: 58%;
    min-width: 300px;
    bottom: -20%;
}
}

@media (max-width: 700px) {
.yellow-banner {
    padding: 56px 16px 80px;
}

.yellow-banner-box {
    min-height: 380px;
    padding: 72px 22px 70px;
    border-width: 4px;
    border-radius: 26px;
}

.yellow-banner-content h2 {
    letter-spacing: -1px;
}

.yellow-banner-content p {
    font-size: 16px;
    margin-top: 20px;
}

.yellow-banner-cta {
    margin-top: 28px;
    font-size: 16px;
    padding: 12px 14px 12px 24px;
}

.yellow-banner-cta-icon {
    width: 44px;
    height: 44px;
}

.yellow-banner-badge-bottom {
    width: 150px;
    height: 128px;
    bottom: -36px;
    left: -24px;
}

.yellow-banner-ribbons {
    width: 70%;
    min-width: 240px;
    height: 160px;
    right: -12%;
    bottom: -16%;
}

.yellow-banner-ribbon {
    font-size: 11px;
    padding: 9px 0;
}
}

@media (prefers-reduced-motion: reduce) {
.yellow-banner-badge-bottom,
.yellow-banner-ribbon-track {
    animation: none;
}
}


/* ========================================
FOOTER
========================================= */

.site-footer {
position: relative;
width: 100%;
background: #061018;
padding: 0 30px 0;
overflow: hidden;
}

.footer-cube {
position: absolute;
top: 28px;
right: max(28px, calc((100% - 1280px) / 2));
z-index: 3;
width: clamp(88px, 10vw, 140px);
height: auto;
pointer-events: none;
user-select: none;
animation: footerCubeFloat 4.2s ease-in-out infinite;
filter: drop-shadow(0 12px 28px rgba(15, 155, 242, 0.18));
}

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

.footer-talk {
position: relative;
width: min(1280px, 100%);
margin: 0 auto;
padding: 72px 0 42px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
isolation: isolate;
}

.footer-talk-glow {
position: absolute;
left: -8%;
top: -90px;
width: min(820px, 95vw);
height: 220px;
z-index: 0;
pointer-events: none;
background: linear-gradient(
    90deg,
    rgba(15, 155, 242, 0.55) 0%,
    rgba(56, 176, 255, 0.35) 28%,
    rgba(2, 51, 115, 0.45) 58%,
    transparent 100%
);
filter: blur(42px);
opacity: 0.9;
}

.footer-talk-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px 40px;
flex-wrap: wrap;
}

.footer-talk-brand {
display: flex;
align-items: center;
gap: 18px 22px;
flex-wrap: wrap;
min-width: 0;
}

.footer-talk-title {
font-size: clamp(52px, 8vw, 92px);
font-weight: 800;
letter-spacing: -0.055em;
line-height: 0.95;
color: #f2f7fb;
text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12),
    0 18px 40px rgba(0, 0, 0, 0.35);
transition: color 0.25s ease;
}

.footer-talk-title:hover {
color: #0f9bf2;
}

.footer-talk-bubbles {
width: clamp(72px, 9vw, 120px);
height: auto;
flex: 0 0 auto;
filter: drop-shadow(0 12px 28px rgba(15, 155, 242, 0.28));
animation: footerTalkBubbles 4.4s ease-in-out infinite;
}

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

.footer-talk-star {
width: 28px;
height: 28px;
color: #0f9bf2;
flex: 0 0 auto;
display: grid;
place-items: center;
filter: drop-shadow(0 0 12px rgba(15, 155, 242, 0.55));
}

.footer-talk-star svg {
width: 100%;
height: 100%;
}

.footer-talk-contact {
display: flex;
flex-direction: column;
gap: 8px;
align-items: flex-end;
text-align: right;
}

.footer-talk-contact a {
color: #e8f1f8;
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 600;
letter-spacing: -0.02em;
transition: color 0.25s ease;
}

.footer-talk-contact a:hover {
color: #0f9bf2;
}

.site-footer > .footer-inner {
padding-top: 56px;
}

.footer-bottom {
position: relative;
height: 210px;
margin-top: 8px;
margin-left: -30px;
margin-right: -30px;
width: calc(100% + 60px);
border-top: 1px solid rgba(255, 255, 255, 0.06);
overflow: hidden;
}

.footer-glow {
position: absolute;
left: 50%;
bottom: 0;
width: min(640px, 100vw);
height: 110px;
transform: translate(-50%, 45%);
border-radius: 50%;
pointer-events: none;
background: #00d4ff;
opacity: 0.55;
filter: blur(48px);
z-index: 0;
}

.footer-walker {
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: auto;
height: 200px;
max-width: none;
pointer-events: none;
user-select: none;
will-change: left;
animation: footerWalker 16s ease-in-out infinite alternate;
}

@keyframes footerWalker {
from {
    left: calc(100% - 150px);
}
to {
    left: 20px;
}
}


.footer-inner {
width: min(900px, 100%);

margin: 0 auto;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;
}


/* ========================================
LOGO
========================================= */

.footer-logo {
display: block;

margin-bottom: 48px;
}


.footer-logo img {
display: block;

width: auto;
height: 80px;

max-width: 100%;

object-fit: contain;
}


/* ========================================
NAVIGATION
========================================= */

.footer-nav {
display: flex;

align-items: center;

justify-content: center;

flex-wrap: wrap;

gap: 42px;
}


.footer-nav a {
display: inline-flex;

align-items: center;

gap: 10px;

color: #8aa0b3;

font-size: 19px;

line-height: 1;

font-weight: 400;

transition:
color .25s ease,
transform .25s ease;
}


.footer-nav a:hover {
color: #fff;

transform: translateY(-2px);
}


/* ========================================
SIGNATURE
========================================= */

.footer-signature {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 48px;
padding: 0 20px 28px;
}

.footer-signature-glow {
position: absolute;
left: 50%;
top: 42%;
width: min(420px, 70vw);
height: 140px;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(
    circle,
    rgba(15, 155, 242, 0.28) 0%,
    rgba(15, 155, 242, 0.08) 42%,
    transparent 72%
);
filter: blur(8px);
pointer-events: none;
z-index: 0;
animation: footerGlowPulse 5s ease-in-out infinite;
}

.footer-signature-brand {
position: relative;
z-index: 1;
display: flex;
align-items: baseline;
justify-content: center;
flex-wrap: wrap;
gap: 0;
margin: 0;
color: #fff;
font-size: clamp(42px, 7vw, 72px);
font-weight: 800;
letter-spacing: -0.055em;
line-height: 1;
text-transform: lowercase;
}

.footer-signature-brand > span {
display: inline-block;
animation: footerLetterFloat 3.8s ease-in-out infinite;
animation-delay: calc(var(--i) * 0.12s);
}

.footer-signature-brand i {
display: inline-block;
width: 3px;
height: 0.72em;
margin: 0 0.28em 0 0.18em;
border-radius: 99px;
background: linear-gradient(180deg, #0f9bf2 0%, rgba(15, 155, 242, 0.2) 100%);
transform: translateY(0.08em);
animation: footerBarPulse 2.8s ease-in-out infinite;
}

.footer-signature-brand em {
font-style: normal;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.55);
}

.footer-signature-meta {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px 22px;
margin: 18px 0 0;
color: #6f8496;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}

.footer-signature-meta span {
position: relative;
}

.footer-signature-meta span:not(:last-child)::after {
content: "";
position: absolute;
top: 50%;
right: -13px;
width: 4px;
height: 4px;
border-radius: 50%;
background: #0f9bf2;
transform: translateY(-50%);
opacity: 0.7;
}

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

@keyframes footerBarPulse {
0%, 100% { opacity: 0.55; transform: translateY(0.08em) scaleY(1); }
50% { opacity: 1; transform: translateY(0.08em) scaleY(1.12); }
}

@keyframes footerGlowPulse {
0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
.footer-cube,
.footer-talk-bubbles,
.footer-walker,
.footer-signature-glow,
.footer-signature-brand > span,
.footer-signature-brand i {
    animation: none;
}

.footer-walker {
    left: 50%;
    transform: translateX(-50%);
}
}

@media (max-width: 480px) {
    @keyframes footerWalker {
        from { left: calc(100% - 100px); }
        to { left: 8px; }
    }
}


/* ========================================
DROPDOWN ARROW
========================================= */

.footer-client-link svg {
width: 15px;
height: 15px;

fill: none;

stroke: currentColor;

stroke-width: 2;

stroke-linecap: round;

stroke-linejoin: round;
}


/* ========================================
TABLET
========================================= */

@media (max-width: 800px) {

.site-footer {
padding: 0 25px 0;
}

.footer-talk {
padding: 56px 0 34px;
}

.footer-talk-inner {
flex-direction: column;
align-items: flex-start;
gap: 22px;
}

.footer-talk-contact {
align-items: flex-start;
text-align: left;
}

.footer-signature {
margin-top: 40px;
padding: 0 16px 22px;
}

.footer-bottom {
height: 180px;
margin-left: -25px;
margin-right: -25px;
width: calc(100% + 50px);
}

.footer-walker {
height: 170px;
}

.footer-logo {
margin-bottom: 42px;
}


.footer-logo img {
height: 70px;
}


.footer-nav {
gap:
    28px
    35px;
}


.footer-nav a {
font-size: 17px;
}

}


/* ========================================
MOBILE
========================================= */

@media (max-width: 550px) {

.site-footer {
padding: 0 20px 0;
}

.footer-talk {
padding: 48px 0 28px;
}

.footer-cube {
top: 18px;
right: 14px;
width: 72px;
}

.footer-talk-title {
font-size: clamp(44px, 12vw, 64px);
}

.footer-signature {
margin-top: 32px;
padding: 0 14px 18px;
}

.footer-bottom {
height: 150px;
margin-left: -20px;
margin-right: -20px;
width: calc(100% + 40px);
}

.footer-walker {
height: 140px;
}

.footer-glow {
width: min(520px, 110vw);
height: 88px;
transform: translate(-50%, 42%);
}

.footer-signature-meta {
gap: 12px 18px;
font-size: 11px;
letter-spacing: 0.16em;
}


.footer-logo {
margin-bottom: 35px;
}


.footer-logo img {
height: 55px;
}


.footer-nav {
max-width: 350px;

gap:
    22px
    28px;
}


.footer-nav a {
font-size: 15px;
}

}

/* ========================================
   BOOKING
========================================= */

.booking-page {
    position: relative;
    isolation: isolate;
    overflow-x: clip;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 70% 40% at 50% 28%, rgba(15, 155, 242, 0.12), transparent 55%),
        linear-gradient(180deg, #02060d 0%, #061018 45%, #08141f 100%);
    color: #f2f7fb;
}

.booking-page .header-orb {
    top: 100px;
    right: max(20px, calc((100% - 1280px) / 2 + 8px));
}

.works-hero--booking {
    min-height: clamp(380px, 50vh, 500px);
    overflow: hidden;
    background-image:
        linear-gradient(180deg, rgba(2, 6, 13, 0.28) 0%, rgba(2, 6, 13, 0.55) 70%, rgba(2, 6, 13, 0.92) 100%),
        url("images/hero-bg.jpg");
}

.works-hero--booking .works-hero__content {
    padding-bottom: 64px;
}

.works-hero--booking .works-hero__text {
    max-width: 540px;
}

.booking-main {
    position: relative;
    z-index: 2;
    width: min(820px, calc(100% - 32px));
    margin: 32px auto 0;
    padding: 0 0 80px;
}

.booking-main::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 50%;
    top: -32px;
    bottom: 0;
    width: 100vw;
    translate: -50% 0;
    pointer-events: none;
    opacity: 0.1;
    background: url("images/dsq.png") center / cover no-repeat;
}

@media (max-width: 1000px) {
    .booking-page .header-orb {
        display: none;
    }
}

.booking-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.booking-progress-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 10px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 18, 28, 0.72);
    color: #8aa0b4;
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.booking-progress-item span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(2, 8, 16, 0.55);
    color: #d7e3ef;
    flex: 0 0 auto;
}

.booking-progress-item.is-current,
.booking-progress-item.is-done {
    color: #f2f7fb;
    border-color: rgba(15, 155, 242, 0.35);
    background: rgba(15, 155, 242, 0.12);
}

.booking-progress-item.is-current span,
.booking-progress-item.is-done span {
    background: #0f9bf2;
    border-color: #0f9bf2;
    color: #021428;
}

.booking-card {
    background:
        linear-gradient(180deg, rgba(18, 32, 48, 0.96) 0%, rgba(10, 18, 28, 0.98) 100%);
    color: #f2f7fb;
    border-radius: 24px;
    padding: 34px 32px 28px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.booking-step {
    display: none;
}

.booking-step.is-active {
    display: block;
}

.booking-step h2 {
    margin: 0 0 8px;
    font-size: 28px;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: #f2f7fb;
}

.booking-step > p {
    margin: 0 0 24px;
    color: #8aa0b4;
    font-size: 15px;
    line-height: 1.5;
}

.booking-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 14px;
}

.booking-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.booking-field-wide {
    grid-column: 1 / -1;
}

.booking-field label,
.question-block legend {
    font-size: 13px;
    font-weight: 700;
    color: #b7c9d8;
}

.booking-field label span,
.booking-field label span[style] {
    color: #6f8496 !important;
}

.booking-field input,
.booking-field select,
.booking-field textarea,
.question-block input[type="text"],
.question-block select,
.question-block textarea {
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(2, 8, 16, 0.55);
    color: #f2f7fb;
    font: inherit;
    font-size: 15px;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.booking-field input::placeholder,
.booking-field textarea::placeholder,
.question-block textarea::placeholder {
    color: #6f8496;
}

.booking-field select,
.question-block select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #8aa0b4 50%),
        linear-gradient(135deg, #8aa0b4 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 12px) calc(50% - 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 36px;
}

.booking-field select option,
.question-block select option {
    background: #0b1520;
    color: #f2f7fb;
}

.booking-field textarea,
.question-block textarea {
    min-height: 110px;
    resize: vertical;
}

.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus,
.question-block input:focus,
.question-block select:focus,
.question-block textarea:focus {
    border-color: rgba(15, 155, 242, 0.7);
    background: rgba(15, 155, 242, 0.08);
    box-shadow: 0 0 0 4px rgba(15, 155, 242, 0.16);
}

.booking-field input.is-invalid,
.booking-field select.is-invalid,
.booking-field textarea.is-invalid,
.choice-row.is-invalid,
.service-grid.is-invalid {
    border-color: #e15a5a;
}

.booking-alert {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(225, 90, 90, 0.12);
    border: 1px solid rgba(225, 90, 90, 0.28);
    color: #ffb4b4;
    font-size: 14px;
    font-weight: 600;
}

.booking-alert[hidden] {
    display: none;
}

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

.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 168px;
    padding: 18px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: rgba(2, 8, 16, 0.45);
    color: #f2f7fb;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.service-card input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.service-card strong {
    font-size: 16px;
    letter-spacing: -0.3px;
    color: #f2f7fb;
}

.service-card span {
    color: #8aa0b4;
    font-size: 13px;
    line-height: 1.4;
}

.service-card i {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 155, 242, 0.14);
    color: #0f9bf2;
    font-style: normal;
    font-weight: 800;
}

.service-card:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 155, 242, 0.35);
}

.service-card:has(input:checked) {
    border-color: rgba(15, 155, 242, 0.7);
    background: rgba(15, 155, 242, 0.14);
    box-shadow: 0 0 0 1px rgba(15, 155, 242, 0.2);
}

.service-card:has(input:focus-visible) {
    outline: 3px solid rgba(15, 155, 242, 0.35);
}

.question-block {
    display: none;
    margin-top: 16px;
    padding: 18px 18px 8px;
    border-radius: 16px;
    background: rgba(2, 8, 16, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.question-block.is-visible {
    display: block;
}

.question-block h3 {
    margin: 0 0 14px;
    font-size: 18px;
    letter-spacing: -0.4px;
    color: #f2f7fb;
}

.question-block .booking-field {
    margin-bottom: 14px;
}

.choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.choice-row label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(2, 8, 16, 0.45);
    color: #d7e3ef;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.choice-row label:has(input:checked) {
    border-color: rgba(15, 155, 242, 0.65);
    background: rgba(15, 155, 242, 0.14);
    color: #f2f7fb;
}

.choice-row input {
    accent-color: #0f9bf2;
}

.booking-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.booking-prev,
.booking-next,
.booking-submit {
    min-height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.booking-prev {
    background: rgba(255, 255, 255, 0.06);
    color: #d7e3ef;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.booking-prev[hidden],
.booking-next[hidden],
.booking-submit[hidden] {
    display: none;
}

.booking-next,
.booking-submit {
    margin-left: auto;
    background: #0f9bf2;
    color: #021428;
    box-shadow: 0 12px 30px rgba(15, 155, 242, 0.28);
}

.booking-next:hover,
.booking-submit:hover,
.booking-prev:hover {
    transform: translateY(-2px);
}

.booking-next:hover,
.booking-submit:hover {
    background: #38b0ff;
}

.booking-note {
    margin: 16px 0 0;
    color: #6f8496;
    font-size: 13px;
}

.booking-honey {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

.booking-success {
    text-align: center;
    padding: 28px 10px 16px;
}

.booking-success h2 {
    margin: 0 0 10px;
    font-size: 32px;
    letter-spacing: -1px;
    color: #f2f7fb;
}

.booking-success p {
    margin: 0 auto;
    max-width: 460px;
    color: #8aa0b4;
    font-size: 16px;
    line-height: 1.5;
}

.booking-success a {
    display: inline-flex;
    margin-top: 22px;
    min-height: 50px;
    padding: 0 18px;
    align-items: center;
    border-radius: 12px;
    background: #0f9bf2;
    color: #021428;
    font-weight: 700;
}

@media (max-width: 720px) {
    .works-hero--booking {
        min-height: clamp(340px, 54vh, 440px);
    }

    .works-hero--booking .works-hero__content {
        padding-bottom: 48px;
    }

    .works-hero--booking .works-hero__text {
        max-width: 100%;
    }

    .booking-main {
        width: calc(100% - 24px);
        margin-top: 24px;
        padding: 0 0 56px;
    }

    .booking-progress {
        gap: 8px;
        margin-bottom: 16px;
    }

    .booking-progress-item {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        font-size: 11px;
        padding: 10px 6px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    .booking-progress-item.is-current {
        background: rgba(15, 155, 242, 0.14);
        border-color: rgba(15, 155, 242, 0.35);
    }

    .booking-progress-item span {
        width: 28px;
        height: 28px;
        font-size: 13px;
    }

    .booking-progress-item small {
        display: block;
        font-size: 11px;
        line-height: 1.2;
        font-weight: 600;
        letter-spacing: 0;
    }

    .booking-card {
        padding: 20px 16px 18px;
        border-radius: 18px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22);
    }

    .booking-step h2 {
        font-size: 22px;
        letter-spacing: -0.5px;
    }

    .booking-step > p {
        font-size: 14px;
        margin-bottom: 18px;
    }

    .booking-grid,
    .service-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .booking-field input,
    .booking-field select,
    .booking-field textarea,
    .question-block input[type="text"],
    .question-block select,
    .question-block textarea {
        min-height: 52px;
        font-size: 16px;
        border-radius: 14px;
        padding: 14px 14px;
    }

    .booking-field textarea,
    .question-block textarea {
        min-height: 120px;
    }

    .service-card {
        min-height: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 10px 12px;
        padding: 16px 14px;
        border-radius: 14px;
    }

    .service-card i {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        font-size: 13px;
    }

    .service-card strong {
        flex: 1 1 calc(100% - 50px);
        font-size: 15px;
        padding-top: 6px;
    }

    .service-card span {
        flex: 1 1 100%;
        font-size: 13px;
        padding-left: 46px;
        margin-top: -4px;
    }

    .question-block {
        padding: 16px 14px 6px;
        border-radius: 14px;
    }

    .question-block h3 {
        font-size: 16px;
    }

    .choice-row {
        gap: 8px;
    }

    .choice-row label {
        min-height: 44px;
        padding: 10px 14px;
        font-size: 14px;
        border-radius: 12px;
        flex: 1 1 auto;
        justify-content: center;
    }

    .booking-actions {
        flex-direction: column-reverse;
        gap: 10px;
        margin-top: 20px;
        position: sticky;
        bottom: 12px;
        z-index: 5;
    }

    .booking-prev,
    .booking-next,
    .booking-submit {
        width: 100%;
        margin-left: 0;
        min-height: 54px;
        border-radius: 14px;
        font-size: 15px;
    }

    .booking-next,
    .booking-submit {
        box-shadow: 0 12px 28px rgba(15, 155, 242, 0.24);
    }

    .booking-actions {
        background: linear-gradient(180deg, transparent, rgba(2, 6, 13, 0.92) 30%);
        padding-top: 18px;
        margin-left: -4px;
        margin-right: -4px;
        padding-left: 4px;
        padding-right: 4px;
    }

    .booking-prev {
        order: 2;
    }

    .booking-next,
    .booking-submit {
        order: 1;
    }

    .booking-note {
        text-align: center;
        font-size: 12px;
        margin-top: 12px;
    }

    .booking-success {
        padding: 28px 8px 18px;
    }

    .booking-success h2 {
        font-size: 26px;
    }

    .booking-success a {
        width: 100%;
        justify-content: center;
        min-height: 54px;
        border-radius: 14px;
    }
}

@media (max-width: 480px) {
    .booking-main {
        width: calc(100% - 16px);
        margin-top: 20px;
        padding-bottom: 40px;
    }

    .booking-card {
        padding: 18px 14px 16px;
        border-radius: 16px;
    }

    .booking-progress-item small {
        font-size: 10px;
    }

    .service-card span {
        padding-left: 0;
    }
}

/* ========================================
   WORKS PAGE
========================================= */

.works-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: clamp(420px, 62vh, 620px);
    background-color: #02060d;
    background-image:
        linear-gradient(180deg, rgba(2, 6, 13, 0.35) 0%, rgba(2, 6, 13, 0.2) 45%, rgba(2, 6, 13, 0.72) 100%),
        url("images/hero-bg.jpg");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    color: #f2f7fb;
}

.works-hero > .navbar {
    position: relative;
    z-index: 5;
    width: min(1360px, calc(100% - 40px));
    margin: 0 auto;
    height: 88px;
    flex: 0 0 auto;
}

.works-hero__glow {
    position: absolute;
    width: min(620px, 80vw);
    height: min(620px, 80vw);
    right: -12%;
    bottom: -35%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 155, 242, 0.28) 0%, transparent 68%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}

.works-hero__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.22;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
}

.works-hero__content {
    position: relative;
    z-index: 2;
    width: min(1360px, calc(100% - 40px));
    margin: auto;
    padding: 28px 0 72px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.works-hero__brand {
    margin: 0 0 18px;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #0f9bf2;
}

.works-hero__title {
    margin: 0;
    font-family: "Barlow Condensed", Impact, sans-serif;
    font-size: clamp(64px, 12vw, 128px);
    font-weight: 800;
    line-height: 0.86;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: #f2f7fb;
}

.works-hero__outline {
    display: block;
    -webkit-text-stroke: 1.5px rgba(242, 247, 251, 0.92);
    color: transparent;
}

.works-hero__title em {
    display: block;
    font-style: normal;
    color: #0f9bf2;
}

.works-hero__text {
    margin: 22px 0 0;
    max-width: 420px;
    font-family: "DM Sans", "Manrope", sans-serif;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 500;
    color: #8aa0b4;
}

.works-hero--about .works-hero__content {
    position: relative;
}

.works-hero--about .works-hero__orb {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: -4%;
    right: auto;
    translate: 0 -52%;
    width: min(420px, 52vw);
    aspect-ratio: 1;
    pointer-events: none;
    opacity: 0.9;
}

.works-hero--about .works-hero__orb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(16, 16, 16, 0.4) 0%, #101010 66.01%);
    pointer-events: none;
}

.works-hero--about .works-hero__orb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: worksHeroOrbSpin 28s linear infinite;
}

.works-hero--about .works-hero__brand,
.works-hero--about .works-hero__title,
.works-hero--about .works-hero__text {
    position: relative;
    z-index: 1;
}

.works-hero--about .works-hero__title {
    font-size: clamp(52px, 10vw, 108px);
}

.works-hero--about .works-hero__text {
    max-width: 460px;
}

@keyframes worksHeroOrbSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
    .works-hero--about .works-hero__title {
        font-size: clamp(46px, 13vw, 68px);
    }

    .works-hero--about .works-hero__orb {
        width: min(280px, 72vw);
        left: -8%;
        right: auto;
        top: 42%;
        opacity: 0.75;
    }
}

@media (prefers-reduced-motion: reduce) {
    .works-hero--about .works-hero__orb img {
        animation: none;
    }
}

.nav-links a.is-active {
    color: #0f9bf2;
}

.work-meta {
    min-width: 0;
}

.work-tag {
    margin: 0 0 4px;
    color: #0f9bf2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.works-cta {
    display: flex;
    justify-content: center;
    margin-top: 42px;
}

@media (max-width: 1000px) {
    .works-hero > .navbar {
        width: calc(100% - 30px);
        height: 78px;
    }
}

@media (max-width: 700px) {
    .works-hero {
        min-height: clamp(380px, 70vh, 520px);
    }

    .works-hero > .navbar {
        width: calc(100% - 24px);
        height: 72px;
    }

    .works-hero__content {
        width: calc(100% - 28px);
        padding: 20px 0 56px;
    }

    .works-hero__brand {
        margin-bottom: 14px;
        font-size: 12px;
        letter-spacing: 0.18em;
    }

    .works-hero__title {
        font-size: clamp(56px, 16vw, 78px);
    }

    .works-hero__text {
        margin-top: 16px;
        font-size: 15px;
        max-width: 320px;
    }
}

/* ========================================
   ABOUT PAGE
========================================= */

.bayou-about {
    --bayou-about-accent: #0f9bf2;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 88px 20px 110px;
    background:
        radial-gradient(ellipse 50% 55% at 88% 8%, rgba(15, 155, 242, 0.18), transparent 70%),
        radial-gradient(ellipse 42% 48% at 6% 92%, rgba(2, 51, 115, 0.45), transparent 72%),
        linear-gradient(rgba(6, 16, 24, 0.72), rgba(6, 16, 24, 0.82)),
        url("images/misc/mountain.webp") center / cover no-repeat,
        #061018;
    color: #f2f7fb;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
}

.bayou-about__glow {
    position: absolute;
    width: min(520px, 70vw);
    height: min(520px, 70vw);
    left: 50%;
    top: 42%;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 155, 242, 0.12) 0%, transparent 68%);
    filter: blur(28px);
    pointer-events: none;
    z-index: 0;
}

.bayou-about__wrap {
    position: relative;
    z-index: 1;
    width: min(1360px, 100%);
    margin: 0 auto;
}

.bayou-about__intro {
    max-width: 820px;
    margin-bottom: 56px;
}

.bayou-about__eyebrow {
    margin: 0 0 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bayou-about-accent);
}

.bayou-about__eyebrow::before {
    content: "✦";
    font-size: 14px;
}

.bayou-about__lead {
    margin: 0 0 22px;
    font-family: "Barlow Condensed", Impact, sans-serif;
    font-size: clamp(40px, 6.2vw, 68px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: #f2f7fb;
}

.bayou-about__lead em {
    font-style: normal;
    color: var(--bayou-about-accent);
}

.bayou-about__text {
    margin: 0;
    max-width: 560px;
    font-size: clamp(16px, 1.3vw, 19px);
    line-height: 1.55;
    font-weight: 500;
    color: rgba(242, 247, 251, 0.68);
}

.bayou-about__stats {
    list-style: none;
    margin: 0 0 64px;
    padding: 28px 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bayou-about__stats li {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.bayou-about__stats strong {
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.bayou-about__stats span {
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: rgba(242, 247, 251, 0.55);
    max-width: 160px;
}

.bayou-about__services {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 52px;
}

.bayou-about__service {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 18px 28px;
    align-items: start;
    padding: 28px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bayou-about__service:first-child {
    border-top: none;
}

.bayou-about__index {
    font-family: "Barlow Condensed", Impact, sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--bayou-about-accent);
    line-height: 1;
    padding-top: 4px;
}

.bayou-about__service-body {
    display: grid;
    grid-template-columns: minmax(120px, 180px) minmax(0, 1.1fr) minmax(0, 1.4fr);
    gap: 16px 28px;
    align-items: start;
}

.bayou-about__tag {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 247, 251, 0.45);
    padding-top: 6px;
}

.bayou-about__service h3 {
    margin: 0;
    font-size: clamp(22px, 2.2vw, 28px);
    line-height: 1.15;
    letter-spacing: -0.035em;
    font-weight: 800;
    color: #fff;
}

.bayou-about__service-body > p:last-child {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 500;
    color: rgba(242, 247, 251, 0.62);
}

.bayou-about__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.bayou-about__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 26px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.bayou-about__btn svg {
    width: 16px;
    height: 16px;
}

.bayou-about__btn--primary {
    background: #fff;
    color: #08090c;
}

.bayou-about__btn--primary:hover {
    transform: translateY(-2px);
    background: #e8eef3;
}

.bayou-about__btn--ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.bayou-about__btn--ghost:hover {
    transform: translateY(-2px);
    border-color: var(--bayou-about-accent);
    color: var(--bayou-about-accent);
}

@media (max-width: 900px) {
    .bayou-about__service-body {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .bayou-about__tag {
        padding-top: 0;
    }
}

@media (max-width: 700px) {
    .bayou-about {
        padding: 64px 20px 80px;
    }

    .bayou-about__intro {
        margin-bottom: 40px;
    }

    .bayou-about__stats {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
        padding: 24px 0;
        margin-bottom: 40px;
    }

    .bayou-about__stats span {
        max-width: none;
    }

    .bayou-about__service {
        grid-template-columns: 48px 1fr;
        gap: 12px 16px;
        padding: 22px 0;
    }

    .bayou-about__index {
        font-size: 22px;
    }

    .bayou-about__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bayou-about__btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bayou-about__btn {
        transition: none;
    }
}

/* ========================================
   START / CONSULTATION
========================================= */

.start-page {
    background: #fff;
    color: #1a1f27;
}

.start-limit {
    margin: 0;
    padding: 16px 20px;
    background: linear-gradient(270deg, #0754e7, #3e84ff);
    color: #fff;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
}

.start-hero {
    min-height: auto;
    background: #0e131d;
    color: #fff;
}

.start-hero::before,
.start-hero::after,
.start-hero .background-shape {
    display: none;
}

.start-hero .logo,
.start-page .site-footer .logo {
    color: #fff;
}

.start-hero .eyebrow {
    color: #f1ca04;
}

.start-hero .call-button {
    background: #f1ca04;
    color: #111;
}

.start-hero .call-button:hover {
    background: #d4af03;
    box-shadow: none;
}

.start-hero .navbar {
    margin: 0 auto;
    flex: 0 0 auto;
}

.start-hero-grid {
    position: relative;
    z-index: 10;
    width: min(1180px, calc(100% - 64px));
    margin: 10px auto 0;
    padding: 20px 0 90px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 40px;
    align-items: center;
}

.start-hero-copy h1 {
    margin: 0;
    max-width: 520px;
    font-size: clamp(26px, 2.2vw, 34px);
    line-height: 1.35;
    letter-spacing: -0.4px;
    font-weight: 800;
}

.start-hero-copy h1 span {
    display: block;
    color: #fff;
}

.start-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    padding: 16px 26px;
    background: #f1ca04;
    color: #111;
    border: 0;
    border-radius: 4px;
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.25s;
}

.start-cta:hover {
    background: #d4af03;
    transform: translateY(-2px);
    box-shadow: none;
}

.start-cta-light {
    background: #f1ca04;
    color: #111;
    flex: 0 0 auto;
}

.start-cta-light:hover {
    background: #d4af03;
}

.start-hero-art {
    position: relative;
    min-height: 420px;
}

.start-art-chart {
    position: absolute;
    width: min(100%, 420px);
    right: 0;
    top: 36px;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.28));
}

.start-art-chart-b {
    position: absolute;
    width: 250px;
    left: 0;
    bottom: 18px;
}

.start-art-box {
    position: absolute;
    width: 120px;
    right: 18px;
    top: 0;
}

.start-art-box-sm {
    position: absolute;
    width: 72px;
    left: 28px;
    top: 48px;
}

.start-wrap {
    width: min(1100px, calc(100% - 48px));
    margin: 0 auto;
}

.start-kicker {
    margin: 0 0 12px;
    color: #0b59eb;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.start-tried,
.start-social,
.start-questions,
.start-answers {
    padding: 88px 0;
}

.start-tried h2,
.start-social h2,
.start-questions h2,
.start-answers h2,
.start-fit h2,
.start-consult h2,
.start-opinion h2,
.start-fail h2 {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.15;
    letter-spacing: -1.2px;
    font-weight: 800;
}

.start-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.start-tried p,
.start-social p,
.start-answers p,
.start-fit p,
.start-consult p {
    color: #d5e4ef;
    font-size: 17px;
    line-height: 1.6;
    font-weight: 500;
}

.start-tried {
    background: #fff;
    color: #1a1f27;
    padding: 92px 0 28px;
    text-align: center;
}

.start-tried h2 {
    max-width: 680px;
    margin: 0 auto 64px;
    color: #1a1f27;
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.35;
    letter-spacing: -0.5px;
}

.start-tried-row {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 36px;
    align-items: center;
    text-align: left;
}

.start-tried-copy p {
    margin: 0 0 16px;
    color: #5c6774;
    font-size: 15.5px;
    line-height: 1.8;
    font-weight: 500;
}

.start-pill {
    display: inline-block;
    margin: 0 0 18px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #0b59eb;
    color: #fff !important;
    font-size: 14.5px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

.start-illu {
    width: min(100%, 460px);
    justify-self: center;
}

.start-facts {
    padding: 36px 0 96px;
    background: #fff;
}

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

.start-facts article {
    padding: 8px 18px 0;
    background: none;
    border: 0;
    text-align: center;
}

.start-facts span {
    display: block;
    color: #9aa3ad;
    font-size: 15px;
    font-weight: 600;
}

.start-facts strong {
    display: block;
    margin: 4px 0 10px;
    color: #0b59eb;
    font-size: clamp(48px, 5.4vw, 64px);
    line-height: 1;
    letter-spacing: -1.5px;
    font-weight: 800;
}

.start-facts p {
    margin: 0 auto;
    max-width: 220px;
    color: #6b7582;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
}

.start-fail {
    padding: 64px 0;
    background: #0e131d;
    color: #fff;
}

.start-fail-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;
}

.start-fail p {
    max-width: 640px;
    margin: 14px 0 0;
    color: #fff;
    font-size: 17px;
    line-height: 1.55;
}

.start-social {
    background: #0b59eb;
    color: #fff;
}

.start-social .start-kicker,
.start-social h2,
.start-social p {
    color: #fff;
}

.start-checks {
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.start-checks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    color: #fff;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 600;
}

.start-checks img {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    flex: 0 0 auto;
}

.start-opinion {
    padding: 20px 0 90px;
    background: #fff;
    color: #1a1f27;
    text-align: center;
}

.start-opinion h2 span {
    display: block;
    color: #1a1f27;
}

.start-opinion-line {
    max-width: 640px;
    margin: 18px auto 0;
    color: #333;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
}

.start-reasons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 48px;
    text-align: center;
}

.start-reasons article {
    padding: 8px 10px 0;
}

.start-reasons img {
    width: 92px;
    height: 92px;
    object-fit: contain;
}

.start-reasons p {
    margin: 12px 0 0;
    color: #333;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 600;
}

.start-questions {
    background: #0e131d;
    color: #fff;
}

.start-questions .start-kicker,
.start-questions h2 {
    color: #fff;
}

.start-questions h2 span {
    color: #f1ca04;
}

.start-question-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 34px;
}

.start-question {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 180px;
    padding: 22px;
    border-radius: 18px;
    background: transparent;
    border: 1px solid transparent;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
}

.start-question:hover,
.start-question:has(input:checked) {
    border-color: #f1ca04;
    background: rgba(241, 202, 4, 0.08);
}

.start-question input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.start-question img {
    width: 42px;
    height: 36px;
}

.start-question span {
    font-size: 17px;
    line-height: 1.4;
    font-weight: 700;
}

.start-answers {
    background: #fff;
    color: #1a1f27;
}

.start-answers h2,
.start-answers p {
    color: #333;
}

.start-answers-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.start-answers-head img {
    width: 54px;
    margin-top: 8px;
    flex: 0 0 auto;
}

.start-answers-head p {
    max-width: 760px;
    margin: 14px 0 0;
}

.start-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 42px;
}

.start-services article {
    padding: 28px 24px 30px;
    border-radius: 0;
    background: transparent;
    color: #1a1f27;
    text-align: center;
}

.start-services img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.start-services h3 {
    margin: 16px 0 8px;
    font-size: 24px;
    letter-spacing: -0.6px;
}

.start-services p {
    margin: 0;
    color: #333 !important;
    font-size: 16px !important;
    line-height: 1.5;
}

.start-fit {
    padding: 88px 0;
    background: #0b59eb;
    color: #fff;
}

.start-fit h2,
.start-fit .start-fit-intro {
    text-align: center;
    color: #fff;
}

.start-fit-intro {
    max-width: 640px;
    margin: 14px auto 0;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.start-fit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 40px;
    align-items: stretch;
}

.start-fit article {
    padding: 32px 30px;
    border-radius: 22px;
}

.start-fit h3 {
    margin: 0 0 8px;
    font-size: 28px;
    letter-spacing: -0.7px;
}

.start-fit ul {
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.start-fit li {
    position: relative;
    margin-bottom: 12px;
    padding-left: 28px;
    font-size: 17px;
    line-height: 1.45;
    font-weight: 600;
}

.start-fit-no li::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
}

.start-fit-yes li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 16px;
    height: 16px;
    background: url("start/icons/check.svg") center / contain no-repeat;
}

.start-fit-no {
    background: transparent;
    color: #fff;
}

.start-fit-yes {
    background: #fff;
    color: #111;
}

.start-fit-yes .start-cta {
    width: 100%;
    margin-top: 18px;
}

.start-consult {
    padding: 88px 0 40px;
    background: #0e131d;
    color: #fff;
    text-align: center;
}

.start-consult h2,
.start-consult p {
    color: #fff;
}

.start-consult-inner {
    width: min(640px, calc(100% - 48px));
}

.start-consult-lead {
    margin-top: 16px;
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

.start-form,
.start-success {
    margin-top: 32px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    text-align: left;
}

.start-form label {
    display: block;
    margin: 14px 0 7px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.start-form input {
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border: 2px solid #333;
    border-radius: 5px;
    background: #1a1a1a;
    color: #fff;
    font: inherit;
    font-size: 16px;
}

.start-form input::placeholder {
    color: #888;
}

.start-form input:focus {
    outline: none;
    border-color: #f1ca04;
    box-shadow: 0 0 5px rgba(241, 202, 4, 0.3);
}

.start-phone {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 6px 6px 6px 14px;
    border: 2px solid #333;
    border-radius: 5px;
    background: #1a1a1a;
}

.start-phone span {
    flex: 0 0 auto;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    direction: ltr;
}

.start-phone input,
.start-phone input:focus {
    border: 0;
    box-shadow: none;
    background: transparent;
    min-height: 40px;
    padding: 8px;
    outline: none;
}

.start-phone:focus-within {
    outline: none;
    border-color: #f1ca04;
    box-shadow: 0 0 5px rgba(241, 202, 4, 0.3);
}

.start-form .start-cta {
    width: 100%;
    margin-top: 20px;
}

.start-error {
    margin: 0 0 8px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fff1f1;
    color: #9d1c1c;
    font-size: 14px;
    font-weight: 700;
}

.start-success h3 {
    margin: 0 0 8px;
    font-size: 26px;
    letter-spacing: -0.6px;
}

.start-success {
    text-align: center;
}

.start-success h3,
.start-success p {
    color: #fff !important;
}

.start-success p {
    margin: 0;
}

.start-page .site-footer {
    background: #0e131d;
}

.start-honey {
    position: absolute;
    left: -9999px;
    height: 0;
    overflow: hidden;
}

.footer-brand {
    margin-bottom: 28px;
    font-size: 18px;
}

@media (max-width: 980px) {
    .start-hero-grid,
    .start-split,
    .start-tried-row,
    .start-reasons,
    .start-question-grid,
    .start-services,
    .start-fit-grid,
    .start-fail-inner {
        grid-template-columns: 1fr;
        display: grid;
    }

    .start-fail-inner {
        display: grid;
    }

    .start-hero-art {
        min-height: 300px;
        order: -1;
    }

    .start-art-chart {
        width: min(100%, 340px);
    }

    .start-hero-grid {
        width: calc(100% - 36px);
        padding-bottom: 56px;
    }

    .start-reasons {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .start-wrap,
    .start-consult-inner {
        width: calc(100% - 32px);
    }

    .start-tried,
    .start-social,
    .start-questions,
    .start-answers,
    .start-fit {
        padding: 56px 0;
    }

    .start-reasons,
    .start-question-grid,
    .start-services,
    .start-facts-grid {
        grid-template-columns: 1fr;
    }

    .start-hero-copy h1 {
        letter-spacing: -1px;
    }

    .start-hero-art {
        min-height: 240px;
    }

    .start-art-chart-b,
    .start-art-box-sm {
        display: none;
    }
}

/* =========================
   PRELOADER
========================= */

html.is-loading,
html.is-loading body {
    overflow: hidden;
}

.preloader {
    position: fixed;
    inset: 0;
    z-index: 10000;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            circle at 50% 46%,
            rgba(15, 155, 242, 0.22) 0%,
            rgba(2, 51, 115, 0.08) 32%,
            transparent 58%
        ),
        #01060c;

    transition: opacity 0.75s ease, visibility 0.75s ease;
}

.preloader.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader.is-leaving .preloader-stage {
    transform: scale(1.08);
    opacity: 0;
}

.preloader-glow {
    position: absolute;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(15, 155, 242, 0.34) 0%,
        rgba(15, 155, 242, 0.08) 42%,
        transparent 70%
    );
    filter: blur(6px);
    animation: preloaderGlow 2.8s ease-in-out infinite;
    pointer-events: none;
}

.preloader-stage {
    position: relative;
    width: 220px;
    height: 220px;
    display: grid;
    place-items: center;
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.75s ease;
}

.preloader-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.preloader-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.12);
    stroke-width: 1.4;
}

.preloader-progress {
    fill: none;
    stroke: #0f9bf2;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 414.69;
    stroke-dashoffset: 414.69;
    transform: rotate(-90deg);
    transform-origin: 100px 100px;
    filter: drop-shadow(0 0 8px rgba(15, 155, 242, 0.75));
}

.preloader-comet {
    fill: #fff;
    transform-box: view-box;
    transform-origin: center;
    animation: preloaderSpin 1.7s linear infinite;
    filter: drop-shadow(0 0 6px rgba(15, 155, 242, 1));
}

.preloader-logo {
    width: 90%;
    height: 90%;
    object-fit: contain;
    animation:
        preloaderLogoIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both,
        preloaderLogoPulse 2.6s ease-in-out 0.9s infinite;
    filter: drop-shadow(0 10px 24px rgba(15, 155, 242, 0.28));
}

@keyframes preloaderSpin {
    to { transform: rotate(360deg); }
}

@keyframes preloaderGlow {
    0%, 100% {
        transform: scale(0.9);
        opacity: 0.65;
    }
    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}

@keyframes preloaderLogoIn {
    from {
        opacity: 0;
        transform: scale(0.82);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes preloaderLogoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.045); }
}

@media (max-width: 600px) {
    .preloader-stage {
        width: 180px;
        height: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .preloader-glow,
    .preloader-comet,
    .preloader-logo {
        animation: none;
    }
}


/* ========================================
   BAYOU CREATIVE SECTION
======================================== */

.bayou-section {
    --bayou-bg: #061018;
    --bayou-line: rgba(255, 255, 255, 0.055);
    --bayou-white: #f2f7fb;
    --bayou-muted: #8aa0b4;
    --bayou-acid: #0f9bf2;
    --bayou-orange: #023373;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 785px;
    background: var(--bayou-bg);
    display: flex;
    align-items: center;
    color: var(--bayou-white);
    font-family: "DM Sans", Arial, sans-serif;
}

.bayou-section--hero {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100vh;
    padding-top: 0;
    padding-bottom: 24px;
    background-color: #02060d;
    background-image:
        linear-gradient(180deg, rgba(2, 6, 13, 0.28) 0%, rgba(2, 6, 13, 0.12) 40%, rgba(2, 6, 13, 0.55) 100%),
        url("images/hero-bg.jpg");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
}

.bayou-hero-clients {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
    margin-top: auto;
    padding: 18px 0 28px;
}

.bayou-clients__head {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    margin: 0 0 28px;
}

.bayou-clients__head h2,
.bayou-clients__head p {
    margin: 0;
    flex: 0 0 auto;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #0f9bf2;
    white-space: nowrap;
}

.bayou-clients__line {
    display: block;
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
}

.bayou-clients {
    position: relative;
    padding: 64px 24px 80px;
    background: #061018;
    color: #f2f7fb;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
}

.bayou-clients__wrap {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.bayou-clients .client-logos {
    margin: 0;
}

.bayou-clients .client-logos img {
    opacity: 0.72;
    filter: grayscale(1) brightness(1.35) contrast(1.05);
    mix-blend-mode: screen;
}

.bayou-clients .client-logos img:hover {
    opacity: 1;
    filter: grayscale(1) brightness(1.55) contrast(1.05);
    mix-blend-mode: screen;
    transform: none;
}

@media (max-width: 700px) {
    .bayou-clients {
        padding: 48px 18px 64px;
    }

    .bayou-clients__head {
        gap: 12px;
        margin-bottom: 22px;
    }

    .bayou-clients__head h2,
    .bayou-clients__head p {
        font-size: 10px;
        letter-spacing: 0.1em;
        white-space: normal;
        text-align: center;
        max-width: 180px;
    }
}

.bayou-section--hero .client-logos {
    margin: 0 auto;
    width: min(1280px, calc(100% - 48px));
}

.bayou-section--hero .client-logos img {
    height: 52px;
    max-width: 150px;
    opacity: 0.72;
    filter: grayscale(1) brightness(1.35) contrast(1.05);
    mix-blend-mode: screen;
}

.bayou-section--hero .client-logos img:hover {
    opacity: 1;
    filter: grayscale(1) brightness(1.55) contrast(1.05);
    mix-blend-mode: screen;
}

.bayou-section--hero .client-logos-group {
    gap: 48px;
    padding-right: 48px;
}

@media (max-width: 850px) {
    .bayou-hero-clients {
        padding: 10px 0 18px;
        order: 3;
    }

    .bayou-section--hero {
        display: flex;
    }

    .bayou-section--hero > .bayou-wrap {
        order: 1;
    }

    .bayou-section--hero .client-logos {
        width: calc(100% - 24px);
    }

    .bayou-section--hero .client-logos img {
        height: 40px;
        max-width: 120px;
    }

    .bayou-section--hero .client-logos-group {
        gap: 32px;
        padding-right: 32px;
    }
}

.bayou-section--hero::before {
    opacity: 0.18;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 20%, transparent 75%);
}

.bayou-hero-space {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: 0.45;
}

.bayou-section--hero > .navbar,
.bayou-section--hero > .bayou-wrap {
    position: relative;
    z-index: 2;
}

.bayou-section--hero > .header-orb {
    position: absolute;
    z-index: 25;
}

.bayou-section--hero > .bayou-side-word {
    z-index: 2;
}

.bayou-hero-space__nebula {
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 22% 45%, rgba(15, 155, 242, 0.22) 0%, transparent 42%),
        radial-gradient(circle at 78% 28%, rgba(80, 120, 255, 0.16) 0%, transparent 38%),
        radial-gradient(circle at 55% 85%, rgba(2, 51, 115, 0.4) 0%, transparent 45%);
    filter: blur(8px);
    animation: bayouSpaceNebula 18s ease-in-out infinite alternate;
}

.bayou-hero-space__glow {
    position: absolute;
    width: min(520px, 70vw);
    height: min(520px, 70vw);
    left: 8%;
    bottom: 5%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 155, 242, 0.2) 0%, transparent 68%);
    filter: blur(20px);
    animation: bayouSpaceGlow 10s ease-in-out infinite;
}

.bayou-hero-space__stars,
.bayou-hero-space__stars--drift {
    position: absolute;
    inset: 0;
    background-repeat: repeat;
    background-size: 320px 320px;
    opacity: 0.85;
}

.bayou-hero-space__stars {
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, rgba(255, 255, 255, 0.95), transparent),
        radial-gradient(1px 1px at 80px 120px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 160px 60px, rgba(180, 220, 255, 0.9), transparent),
        radial-gradient(1px 1px at 240px 180px, rgba(255, 255, 255, 0.55), transparent),
        radial-gradient(2px 2px at 280px 40px, rgba(15, 155, 242, 0.85), transparent),
        radial-gradient(1px 1px at 50px 220px, rgba(255, 255, 255, 0.65), transparent),
        radial-gradient(1.5px 1.5px at 200px 250px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 300px 100px, rgba(200, 230, 255, 0.6), transparent);
    animation: bayouSpaceTwinkle 4.5s ease-in-out infinite;
}

.bayou-hero-space__stars--drift {
    background-size: 480px 480px;
    opacity: 0.55;
    background-image:
        radial-gradient(1px 1px at 40px 80px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 140px 200px, rgba(15, 155, 242, 0.75), transparent),
        radial-gradient(1px 1px at 260px 40px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 360px 300px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 420px 160px, rgba(180, 220, 255, 0.65), transparent),
        radial-gradient(1px 1px at 100px 360px, rgba(255, 255, 255, 0.45), transparent);
    animation: bayouSpaceDrift 60s linear infinite;
}

@keyframes bayouSpaceTwinkle {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.95; }
}

@keyframes bayouSpaceDrift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-80px, 40px, 0); }
}

@keyframes bayouSpaceNebula {
    from { transform: scale(1) translate(0, 0); opacity: 0.85; }
    to { transform: scale(1.08) translate(2%, -2%); opacity: 1; }
}

@keyframes bayouSpaceGlow {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .bayou-hero-space__nebula,
    .bayou-hero-space__stars,
    .bayou-hero-space__stars--drift,
    .bayou-hero-space__glow {
        animation: none;
    }
}

.bayou-section--hero > .navbar {
    flex: 0 0 auto;
    width: min(1280px, calc(100% - 30px));
    height: 88px;
    margin: 0 auto;
    padding-top: 0;
}

.bayou-section--hero > .bayou-wrap {
    flex: 1 1 auto;
    min-height: 0;
    width: min(1400px, calc(100% - 100px));
    margin: 0 auto;
    padding-bottom: 40px;
}

.bayou-section--hero .header-orb {
    top: 120px;
}

.bayou-section--hero h1.bayou-title {
    margin: 0;
}

.bayou-visual--scene {
    position: relative;
    height: auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bayou-hero-globe {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 0;
    width: min(92%, 620px);
    max-width: 620px;
    height: auto;
    transform: translate(-50%, -50%);
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
    mix-blend-mode: screen;
    filter: blur(0.1px) saturate(1.05);
    animation: bayouHeroGlobeSpin 80s linear infinite;
}

.bayou-hero-scene {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    max-width: 680px;
    height: auto;
    object-fit: contain;
}

.bayou-hero-scene--astro {
    filter: drop-shadow(0 24px 60px rgba(15, 155, 242, 0.18));
    transform: rotate(-40deg);
    animation: bayouHeroSceneFloat 5.5s ease-in-out infinite;
    will-change: transform;
}

.bayou-hero-scene--neon {
    display: none;
    max-width: 100%;
    filter: drop-shadow(0 18px 48px rgba(15, 155, 242, 0.28));
}

@keyframes bayouHeroGlobeSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes bayouHeroSceneFloat {
    0%, 100% { transform: rotate(-40deg) translateY(0); }
    50% { transform: rotate(-40deg) translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
    .bayou-hero-scene--astro {
        animation: none;
        transform: rotate(-40deg);
    }

    .bayou-hero-globe {
        animation: none;
    }
}

.bayou-section--hero .bayou-visual--scene {
    height: auto;
    transform: none;
    width: 100%;
}

@media (max-width: 1150px) {
    .bayou-section--hero .bayou-visual--scene {
        transform: none;
        width: 100%;
        height: auto;
    }
}

@media (max-width: 850px) {
    .bayou-section--hero {
        min-height: unset;
        padding-bottom: 28px;
        overflow: hidden;
    }

    .bayou-section--hero > .bayou-wrap {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: calc(100% - 40px);
        margin: 0 auto;
        padding: 4px 0 28px;
        gap: 8px;
        min-height: unset;
    }

    .bayou-section--hero .bayou-visual--scene,
    .bayou-section--hero .bayou-visual {
        order: 2;
        position: relative;
        left: auto;
        width: 100%;
        height: auto;
        min-height: 0;
        margin: 0;
        padding-top: 75px;
        transform: none;
        transform-origin: center center;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: visible;
    }

    .bayou-section--hero .bayou-content {
        order: 1;
    }

    .bayou-section--hero .bayou-hero-scene--neon {
        display: none;
    }

    .bayou-section--hero .bayou-hero-globe {
        display: block;
        width: min(78%, 280px);
        max-width: 280px;
        top: 42%;
        opacity: 0.14;
    }

    .bayou-section--hero .bayou-hero-scene--astro {
        display: block;
        width: min(58vw, 240px);
        max-width: 240px;
        margin: 0 auto;
        transform: rotate(-28deg);
        animation: bayouHeroSceneFloatMobile 5.5s ease-in-out infinite;
    }

    @keyframes bayouHeroSceneFloatMobile {
        0%, 100% { transform: rotate(-28deg) translateY(0); }
        50% { transform: rotate(-28deg) translateY(-10px); }
    }

    .bayou-section--hero .bayou-content {
        padding-top: 55px;
        width: 100%;
    }

    .bayou-section--hero .bayou-eyebrow {
        margin-bottom: 16px;
    }

    .bayou-section--hero .bayou-eyebrow span {
        font-size: 11px;
        padding: 7px 14px;
    }

    .bayou-section--hero .bayou-title {
        font-size: clamp(52px, 13vw, 72px);
        line-height: 0.9;
        letter-spacing: -1px;
    }

    .bayou-section--hero .bayou-intro {
        font-size: 15px;
        line-height: 1.65;
        margin: 18px 0 22px;
        max-width: none;
    }

    .bayou-section--hero .bayou-benefits {
        margin-bottom: 22px;
    }

    .bayou-section--hero .bayou-benefit {
        gap: 14px;
        padding: 16px 0;
    }

    .bayou-section--hero .bayou-benefit + .bayou-benefit {
        border-left: 0;
        border-top: 1px solid rgba(15, 155, 242, 0.18);
        padding-left: 0;
    }

    .bayou-section--hero .bayou-benefits {
        grid-template-columns: 1fr;
    }

    .bayou-section--hero .bayou-benefit-icon {
        width: 44px;
        height: 44px;
    }

    .bayou-section--hero .bayou-benefit h3 {
        font-size: 18px;
        line-height: 1.1;
    }

    .bayou-section--hero .bayou-bottom-row {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    .bayou-section--hero .bayou-section-cta {
        width: 100%;
        justify-content: center;
        min-height: 52px;
        padding: 15px 20px;
        font-size: 12px;
    }

    .bayou-section--hero .bayou-founder {
        margin-left: 0;
        justify-content: center;
    }

    .bayou-section--hero .bayou-side-word {
        display: none;
    }

    .bayou-section--hero .bayou-hero-space__glow {
        width: min(340px, 90vw);
        height: min(340px, 90vw);
        left: 50%;
        bottom: auto;
        top: 12%;
        transform: translateX(-50%);
        opacity: 0.7;
    }
}

@media (max-width: 480px) {
    .bayou-section--hero > .bayou-wrap {
        width: calc(100% - 28px);
        padding: 0 0 20px;
        gap: 2px;
    }

    .bayou-section--hero .bayou-visual--scene,
    .bayou-section--hero .bayou-visual {
        padding-top: 75px;
        height: auto;
        width: 100%;
        left: auto;
        margin: 0;
        transform: none;
    }

    .bayou-section--hero .bayou-hero-globe {
        width: min(72%, 230px);
        max-width: 230px;
        opacity: 0.12;
    }

    .bayou-section--hero .bayou-hero-scene--astro {
        width: min(52vw, 200px);
        max-width: 200px;
        transform: rotate(-24deg);
        animation-name: bayouHeroSceneFloatMobileSm;
    }

    @keyframes bayouHeroSceneFloatMobileSm {
        0%, 100% { transform: rotate(-24deg) translateY(0); }
        50% { transform: rotate(-24deg) translateY(-8px); }
    }

    .bayou-section--hero .bayou-content {
        padding-top: 55px;
    }

    .bayou-section--hero .bayou-eyebrow {
        margin-bottom: 14px;
    }

    .bayou-section--hero .bayou-title {
        font-size: clamp(46px, 12.5vw, 60px);
        line-height: 0.92;
    }

    .bayou-section--hero .bayou-intro {
        font-size: 14px;
        line-height: 1.6;
        margin: 14px 0 18px;
    }

    .bayou-section--hero .bayou-benefits {
        margin-bottom: 18px;
    }

    .bayou-section--hero .bayou-benefit {
        padding: 14px 0;
        gap: 12px;
    }

    .bayou-section--hero .bayou-benefit + .bayou-benefit {
        padding: 14px 0;
    }

    .bayou-section--hero .bayou-benefit-icon {
        width: 40px;
        height: 40px;
    }

    .bayou-section--hero .bayou-benefit-icon svg {
        width: 20px;
        height: 20px;
    }

    .bayou-section--hero .bayou-benefit h3 {
        font-size: 16px;
    }

    .bayou-section--hero .bayou-bottom-row {
        gap: 16px;
    }

    .bayou-section--hero .bayou-section-cta {
        min-height: 50px;
        font-size: 11px;
        letter-spacing: 0.03em;
        gap: 14px;
    }

    .bayou-section--hero .bayou-founder-text {
        font-size: 11px;
    }
}

.bayou-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, var(--bayou-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--bayou-line) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: linear-gradient(180deg, #000 0%, transparent 94%);
}

.bayou-section::after {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    bottom: -430px;
    right: -140px;
    border-radius: 100%;
    background: #0f9bf2;
    filter: blur(150px);
    opacity: 0.12;
    z-index: -1;
}

.bayou-wrap {
    width: min(1400px, calc(100% - 100px));
    margin: auto;
    display: grid;
    grid-template-columns: 47% 53%;
    align-items: center;
    gap: 25px;
    min-height: 785px;
}

.bayou-visual {
    height: 680px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bayou-big-disc {
    position: absolute;
    width: 468px;
    height: 468px;
    left: 6%;
    top: 105px;
    border-radius: 50%;
    background: var(--bayou-acid);
    transform: rotate(-16deg);
}

.bayou-big-disc::after {
    content: "";
    position: absolute;
    inset: 47px;
    border: 2px dashed #023373;
    border-radius: 50%;
    opacity: 0.55;
}

.bayou-big-disc::before {
    content: "";
    position: absolute;
    inset: 92px;
    border-radius: 50%;
    background: var(--bayou-bg);
}

.bayou-spark {
    position: absolute;
    font: 700 20px "DM Sans", sans-serif;
    color: var(--bayou-acid);
    z-index: 5;
}

.bayou-spark-a { top: 70px; left: 20%; }
.bayou-spark-b { bottom: 72px; right: 13%; }

.bayou-browser {
    position: absolute;
    left: 14%;
    top: 175px;
    width: 460px;
    height: 336px;
    background: #f4f0e8;
    border: 8px solid #262f31;
    border-radius: 19px;
    box-shadow: 0 30px 65px #0008;
    transform: rotate(-8deg);
    overflow: hidden;
    z-index: 2;
}

.bayou-browser-toolbar {
    height: 34px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    gap: 5px;
}

.bayou-dot {
    width: 7px;
    height: 7px;
    background: #e9a3a0;
    border-radius: 50%;
}

.bayou-dot:nth-child(2) { background: #f4ca78; }
.bayou-dot:nth-child(3) { background: #a4d4b9; }

.bayou-url {
    margin-left: auto;
    margin-right: auto;
    width: 128px;
    height: 13px;
    background: #f0f0ee;
    border-radius: 6px;
}

.bayou-mock-body {
    height: calc(100% - 34px);
    background: #e8ede7;
    position: relative;
    padding: 20px 30px;
    overflow: hidden;
}

.bayou-mock-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    color: #172321;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.bayou-mock-nav b {
    font-size: 18px;
    letter-spacing: -1px;
}

.bayou-mock-nav b span { color: #0f9bf2; }

.bayou-mock-nav span { word-spacing: 12px; }

.bayou-mock-head {
    font: 900 73px / 0.79 "Barlow Condensed", Impact, sans-serif;
    color: #182520;
    position: absolute;
    top: 76px;
    left: 32px;
    z-index: 3;
    letter-spacing: -1px;
}

.bayou-mock-head i {
    color: #0f9bf2;
    font-style: normal;
}

.bayou-mock-desc {
    position: absolute;
    top: 242px;
    left: 34px;
    z-index: 4;
    color: #273b34;
    font-size: 8px;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.bayou-mock-ball {
    position: absolute;
    width: 280px;
    height: 280px;
    background: #0f9bf2;
    border-radius: 50%;
    top: 67px;
    right: -105px;
}

.bayou-mock-ball::before {
    content: "";
    position: absolute;
    inset: 25px;
    border: 1px dashed rgba(255, 255, 255, 0.45);
    border-radius: 50%;
}

.bayou-mock-pill {
    position: absolute;
    bottom: 26px;
    right: 27px;
    background: #192b23;
    color: #fff;
    padding: 10px 15px;
    border-radius: 30px;
    font-size: 8px;
    font-weight: 700;
    z-index: 5;
}

.bayou-float-tag {
    position: absolute;
    top: 139px;
    right: 3%;
    z-index: 5;
    background: #f9f7f0;
    color: #172222;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 16px 25px #0004;
    transform: rotate(8deg);
    font: 800 19px "Barlow Condensed", sans-serif;
    letter-spacing: 0.4px;
}

.bayou-float-tag span {
    display: block;
    font: 600 10px "DM Sans", sans-serif;
    margin-top: 4px;
    color: #64716d;
}

.bayou-float-card {
    position: absolute;
    left: 0;
    bottom: 110px;
    z-index: 4;
    width: 195px;
    background: #273535;
    border: 1px solid #53605b;
    border-radius: 14px;
    padding: 17px;
    transform: rotate(7deg);
    box-shadow: 0 15px 28px #0004;
}

.bayou-float-card > span {
    font-size: 10px;
    letter-spacing: 0.07em;
    color: #b4c3bf;
}

.bayou-float-card strong {
    display: block;
    font: 800 52px / 0.95 "Barlow Condensed", sans-serif;
    color: var(--bayou-acid);
    margin: 7px 0;
}

.bayou-float-card small {
    font-size: 10px;
    color: #d8e0da;
}

.bayou-visual-caption {
    position: absolute;
    bottom: 35px;
    left: 18%;
    letter-spacing: 0.27em;
    color: #78908a;
    font-size: 10px;
    text-transform: uppercase;
}

.bayou-content {
    padding: 85px 0 75px 16px;
    position: relative;
    z-index: 6;
}

.bayou-eyebrow {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 24px;
}

.bayou-eyebrow span {
    border: 1px solid var(--bayou-acid);
    color: var(--bayou-acid);
    border-radius: 60px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 700;
    transform: rotate(-5deg);
}

.bayou-eyebrow::after {
    content: "";
    width: 60px;
    height: 1px;
    background: var(--bayou-acid);
    opacity: 0.6;
}

.bayou-title {
    margin: 0;
    font: 800 clamp(64px, 5.6vw, 100px) / 0.88 "Barlow Condensed", Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: -1.3px;
    color: var(--bayou-white);
}

.bayou-title em {
    font-style: normal;
    color: var(--bayou-acid);
}

.bayou-outline {
    -webkit-text-stroke: 1px var(--bayou-white);
    color: transparent;
}

.bayou-intro {
    max-width: 575px;
    color: var(--bayou-muted);
    font-size: 16px;
    line-height: 1.85;
    margin: 27px 0 30px;
}

.bayou-intro strong {
    color: #ecf0e9;
    font-weight: 600;
}

.bayou-benefits {
    border-top: 1px solid rgba(15, 155, 242, 0.18);
    border-bottom: 1px solid rgba(15, 155, 242, 0.18);
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 34px;
}

.bayou-benefit {
    display: flex;
    align-items: center;
    gap: 17px;
    padding: 23px 14px 23px 0;
}

.bayou-benefit + .bayou-benefit {
    border-left: 1px solid rgba(138, 160, 180, 0.35);
    padding-left: 27px;
}

.bayou-benefit-icon {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border: 1px solid rgba(15, 155, 242, 0.45);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--bayou-acid);
    background: rgba(15, 155, 242, 0.1);
}

.bayou-benefit-icon svg {
    width: 25px;
    height: 25px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bayou-benefit h3 {
    font: 700 22px / 1.05 "Barlow Condensed", sans-serif;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin: 0;
    color: var(--bayou-white);
}

.bayou-bottom-row {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

.bayou-section-cta {
    background: var(--bayou-acid);
    color: #021428;
    padding: 16px 22px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.25s, background 0.25s;
}

.bayou-section-cta:hover {
    transform: translateY(-4px);
    background: #38b0ff;
}

.bayou-section-cta svg {
    width: 18px;
    height: 18px;
}

.bayou-founder {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bayou-avatars {
    display: flex;
    padding-left: 8px;
}

.bayou-avatars span {
    width: 36px;
    height: 36px;
    margin-left: -8px;
    border: 3px solid var(--bayou-bg);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #0f9bf2;
    font-weight: 800;
    color: #061018;
}

.bayou-avatars span:nth-child(2) { background: #5bbcf5; }
.bayou-avatars span:nth-child(3) { background: #023373; color: #fff; }

.bayou-founder-text {
    font: 700 17px / 1.1 "Barlow Condensed", sans-serif;
    text-transform: uppercase;
    color: var(--bayou-white);
}

.bayou-founder-text small {
    font: 400 11px "DM Sans", sans-serif;
    text-transform: none;
    color: var(--bayou-muted);
    display: block;
    margin-top: 5px;
}

.bayou-side-word {
    position: absolute;
    right: -7px;
    bottom: 16px;
    transform: rotate(-90deg) translateX(100%);
    transform-origin: right bottom;
    color: #566363;
    font-size: 9px;
    letter-spacing: 0.4em;
    opacity: 0.7;
}

@media (max-width: 1150px) {
    .bayou-wrap {
        width: min(1100px, calc(100% - 58px));
        grid-template-columns: 45% 55%;
    }

    .bayou-visual {
        transform: scale(0.8);
        transform-origin: left center;
        width: 125%;
    }

    .bayou-content { padding-left: 0; }

    .bayou-title { font-size: 76px; }

    .bayou-benefit h3 { font-size: 19px; }
}

@media (max-width: 850px) {
    .bayou-section { min-height: unset; }

    .bayou-wrap {
        width: min(650px, calc(100% - 38px));
        grid-template-columns: 1fr;
        gap: 0;
        min-height: unset;
    }

    .bayou-visual {
        height: 470px;
        transform: scale(0.75);
        transform-origin: center top;
        width: 100%;
        margin-bottom: -75px;
    }

    .bayou-big-disc {
        left: 50%;
        transform: translateX(-50%) rotate(-16deg);
        top: 35px;
    }

    .bayou-browser {
        left: 50%;
        transform: translateX(-50%) rotate(-8deg);
        top: 100px;
    }

    .bayou-float-tag {
        top: 55px;
        right: -8%;
    }

    .bayou-float-card {
        left: -4%;
        bottom: 35px;
    }

    .bayou-visual-caption { display: none; }

    .bayou-content { padding: 0 0 65px; }

    .bayou-title { font-size: clamp(60px, 11vw, 95px); }

    .bayou-intro { font-size: 15px; }

    .bayou-side-word { display: none; }
}

@media (max-width: 480px) {
    .bayou-visual {
        transform: scale(0.57);
        width: 175%;
        left: -37%;
        height: 360px;
        margin-bottom: -55px;
    }

    .bayou-content { padding-bottom: 55px; }

    .bayou-eyebrow { margin-bottom: 23px; }

    .bayou-title { font-size: clamp(54px, 15vw, 72px); }

    .bayou-intro { margin: 22px 0; }

    .bayou-benefits { grid-template-columns: 1fr; }

    .bayou-benefit { padding: 17px 0; }

    .bayou-benefit + .bayou-benefit {
        border-left: 0;
        border-top: 1px solid rgba(15, 155, 242, 0.18);
        padding: 17px 0;
    }

    .bayou-bottom-row { gap: 23px; }

    .bayou-section-cta {
        width: 100%;
        justify-content: center;
    }

    .bayou-founder { margin-left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .bayou-section-cta { transition: none; }
}

/* ========================================
   BAYOU MARQUEE
======================================== */

.bayou-marquee {
    --bayou-marquee-bg: #0f9bf2;
    background: var(--bayou-marquee-bg);
    color: #021428;
    overflow: hidden;
    width: 100%;
    padding: 24px 0;
    position: relative;
    font-family: "Outfit", "Manrope", Arial, sans-serif;
}

.bayou-marquee__track {
    display: flex;
    width: max-content;
    animation: bayou-marquee-scroll 28s linear infinite;
    will-change: transform;
}

.bayou-marquee__group {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.bayou-marquee__item {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: clamp(24px, 2.4vw, 38px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.045em;
}

.bayou-marquee__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15em;
    font-weight: 500;
    padding: 0 32px;
    line-height: 1;
}

@keyframes bayou-marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.bayou-marquee:hover .bayou-marquee__track {
    animation-play-state: paused;
}

@media (max-width: 767px) {
    .bayou-marquee {
        padding: 19px 0;
    }

    .bayou-marquee__star {
        padding: 0 22px;
    }

    .bayou-marquee__track {
        animation-duration: 22s;
    }
}

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

/* ========================================
   BAYOU SERVICES CAROUSEL
======================================== */

.bayou-svc {
    padding: 68px 0 70px;
    overflow: hidden;
    min-height: 850px;
    color: #fff;
    font-family: "DM Sans", "Manrope", Arial, sans-serif;
    background:
        radial-gradient(ellipse at 2% 35%, rgba(15, 155, 242, 0.28) 0%, rgba(2, 51, 115, 0.45) 24%, transparent 61%),
        radial-gradient(ellipse at 62% 75%, rgba(15, 155, 242, 0.12), transparent 48%),
        linear-gradient(105deg, #0a1524 0%, #061018 49%, #020810 100%);
}

.bayou-svc-container {
    width: min(1320px, calc(100% - 64px));
    margin: auto;
}

.bayou-svc-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 30px;
    margin-bottom: 46px;
}

.bayou-svc-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.025em;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.85);
}

.bayou-svc-star {
    color: #0f9bf2;
    font-size: 30px;
    line-height: 0.5;
    font-weight: 400;
}

.bayou-svc-head h2 {
    font-size: clamp(42px, 5vw, 72px);
    font-weight: 800;
    letter-spacing: -0.073em;
    line-height: 0.96;
    margin: 0;
    max-width: 530px;
    color: #fff;
}

.bayou-svc-controls {
    display: flex;
    gap: 7px;
    padding-bottom: 6px;
}

.bayou-svc-nav {
    background: #1a2836;
    color: #fff;
    border: 0;
    width: 52px;
    height: 52px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.bayou-svc-nav:hover {
    background: #0f9bf2;
    color: #021428;
    transform: translateY(-2px);
}

.bayou-svc-nav svg {
    width: 21px;
    height: 21px;
}

.bayou-svc-viewport {
    overflow: visible;
}

.bayou-svc-track {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    padding: 0 max(32px, calc((100vw - 1320px) / 2)) 24px;
    scroll-padding-inline: max(32px, calc((100vw - 1320px) / 2));
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
}

.bayou-svc-track::-webkit-scrollbar {
    display: none;
}

.bayou-svc-card {
    scroll-snap-align: start;
    flex: 0 0 clamp(300px, 30vw, 415px);
    height: 518px;
    border-radius: 19px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 34px 36px;
    display: flex;
    flex-direction: column;
    color: #fff;
}

.bayou-svc-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 22%, rgba(3, 3, 9, 0.04) 65%, rgba(3, 3, 9, 0.19));
    pointer-events: none;
    z-index: -1;
}

.bayou-svc-card h3 {
    font-size: clamp(25px, 2vw, 32px);
    letter-spacing: -0.065em;
    line-height: 1.08;
    margin: 0 0 15px;
    font-weight: 800;
    color: #fff;
}

.bayou-svc-card p {
    font-size: 15px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.77);
    margin: 0;
    max-width: 310px;
    font-weight: 500;
}

.bayou-svc-image {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 63%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: -1;
    overflow: hidden;
}

.bayou-svc-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

.bayou-svc-placeholder {
    width: 70%;
    height: 65%;
    border-radius: 15px;
    border: 1.5px dashed rgba(255, 255, 255, 0.33);
    background: rgba(255, 255, 255, 0.055);
    display: grid;
    place-content: center;
    text-align: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    letter-spacing: 0.02em;
}

.bayou-svc-placeholder svg {
    width: 32px;
    height: 32px;
    margin: auto;
    opacity: 0.7;
}

.bayou-svc-link {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.17);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: grid;
    place-items: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 2;
}

.bayou-svc-link:hover {
    background: rgba(15, 155, 242, 0.85);
    transform: translate(2px, -2px);
}

.bayou-svc-link svg {
    width: 19px;
    height: 19px;
}

.bayou-svc-card-1 { background: linear-gradient(153deg, #1a2838, #0b1520 78%); }
.bayou-svc-card-2 { background: linear-gradient(160deg, #3a6ea5, #6b8fb8 90%); }
.bayou-svc-card-3 { background: linear-gradient(160deg, #023373, #0f9bf2 95%); }
.bayou-svc-card-4 { background: linear-gradient(160deg, #1e4d6b, #3d8fb8 100%); }
.bayou-svc-card-5 { background: linear-gradient(160deg, #2a4558, #0f9bf2 100%); }
.bayou-svc-card-6 { background: linear-gradient(160deg, #0f6ea8, #023373 100%); }

.bayou-svc-card--photo {
    background: #0b1520;
}

.bayou-svc-card--photo h3,
.bayou-svc-card--photo p {
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.bayou-svc-image--bg {
    inset: 0;
    height: 100%;
    z-index: 0;
}

.bayou-svc-image--bg img {
    object-fit: cover;
    object-position: center top;
}

.bayou-svc-card--photo::after {
    background: linear-gradient(
        180deg,
        rgba(3, 8, 16, 0.35) 0%,
        transparent 28%,
        transparent 70%,
        rgba(3, 8, 16, 0.2) 100%
    );
    z-index: 1;
}

@media (max-width: 850px) {
    .bayou-svc {
        padding: 65px 0 55px;
        min-height: auto;
    }

    .bayou-svc-container {
        width: calc(100% - 40px);
    }

    .bayou-svc-head {
        margin-bottom: 35px;
    }

    .bayou-svc-track {
        padding-left: 20px;
        padding-right: 20px;
        scroll-padding-left: 20px;
        gap: 16px;
    }

    .bayou-svc-card {
        flex-basis: min(79vw, 390px);
        height: 480px;
        padding: 28px;
    }

    .bayou-svc-head h2 {
        font-size: clamp(42px, 8vw, 64px);
    }
}

@media (max-width: 540px) {
    .bayou-svc-eyebrow {
        font-size: 10px;
        margin-bottom: 20px;
    }

    .bayou-svc-head h2 {
        font-size: 42px;
    }

    .bayou-svc-controls {
        gap: 5px;
    }

    .bayou-svc-nav {
        width: 41px;
        height: 41px;
        border-radius: 9px;
    }

    .bayou-svc-card {
        height: 450px;
        flex-basis: 85vw;
    }

    .bayou-svc-card h3 {
        font-size: 28px;
    }

    .bayou-svc-card p {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bayou-svc-nav,
    .bayou-svc-link {
        transition: none;
    }
}

/* ========================================
   BAYOU BUILD CTA SECTION
======================================== */

.bayou-build {
    --bayou-build-accent: #0f9bf2;
    position: relative;
    isolation: isolate;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 760px;
    padding: 160px 24px 200px;
    background:
        radial-gradient(ellipse 33% 47% at 17% 80%, rgba(15, 155, 242, 0.55), transparent 88%),
        radial-gradient(ellipse 36% 57% at 46% 76%, rgba(2, 51, 115, 0.5), transparent 82%),
        radial-gradient(ellipse 32% 44% at 40% 100%, rgba(56, 176, 255, 0.28), transparent 83%),
        radial-gradient(ellipse 34% 52% at 66% 82%, rgba(15, 155, 242, 0.22), transparent 85%),
        radial-gradient(ellipse 45% 45% at 65% 12%, rgba(2, 51, 115, 0.35), transparent 90%),
        radial-gradient(ellipse 42% 48% at 4% 46%, rgba(15, 155, 242, 0.25), transparent 90%),
        linear-gradient(rgba(6, 16, 24, 0.78), rgba(6, 16, 24, 0.78)),
        url("images/misc/h1-bg.gif") center / cover no-repeat,
        #061018;
    color: #fff;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
}

.bayou-build::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 65%, rgba(0, 0, 0, 0.44)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.12), transparent 60%, rgba(0, 0, 0, 0.18));
}

.bayou-build__content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 950px;
    margin: 0 auto;
}

.bayou-build__eyebrow {
    font-size: 12px;
    letter-spacing: 0.01em;
    font-weight: 700;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-bottom: 35px;
}

.bayou-build__eyebrow span {
    font-size: 28px;
    color: var(--bayou-build-accent);
    font-weight: 400;
    line-height: 0;
}

.bayou-build h2 {
    font-size: clamp(44px, 4.6vw, 70px);
    line-height: 1.035;
    letter-spacing: -0.074em;
    font-weight: 800;
    margin: 0 auto 34px;
    max-width: 850px;
    color: #fff;
}

.bayou-build__description {
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.48;
    font-weight: 500;
    letter-spacing: -0.035em;
    max-width: 640px;
    margin: 0 auto 31px;
    color: rgba(255, 255, 255, 0.88);
}

.bayou-build__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.bayou-build__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 53px;
    padding: 0 29px;
    background: #fff;
    color: #08090c;
    border-radius: 9px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    transition: transform 0.2s, background 0.2s;
}

.bayou-build__arrow {
    width: 53px;
    height: 53px;
    background: var(--bayou-build-accent);
    color: #fff;
    border-radius: 9px;
    display: grid;
    place-items: center;
    text-decoration: none;
    transition: transform 0.2s, background 0.2s;
}

.bayou-build__btn:hover,
.bayou-build__arrow:hover {
    transform: translateY(-3px);
}

.bayou-build__arrow:hover {
    background: #38b0ff;
}

.bayou-build__arrow svg {
    width: 19px;
    height: 19px;
}

.bayou-build__shape {
    position: absolute;
    z-index: 1;
    display: block;
    max-width: none;
    pointer-events: none;
    user-select: none;
}

.bayou-build__shape--top {
    width: 205px;
    top: 24px;
    right: 8%;
    filter: drop-shadow(0 20px 26px rgba(0, 0, 0, 0.18));
    animation: bayouBuildFloat 4.5s ease-in-out infinite;
}

.bayou-build__shape--bottom {
    width: 465px;
    bottom: 12px;
    left: -40px;
    filter: drop-shadow(10px 20px 28px rgba(0, 0, 0, 0.25));
    animation: bayouBuildFloatAlt 5.4s ease-in-out infinite;
}

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

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

@media (min-width: 1500px) {
    .bayou-build {
        min-height: 760px;
    }

    .bayou-build__shape--bottom {
        width: 485px;
    }

    .bayou-build__shape--top {
        right: 10.5%;
    }
}

@media (max-width: 900px) {
    .bayou-build {
        min-height: 680px;
        padding: 140px 25px 200px;
    }

    .bayou-build__shape--top {
        width: 140px;
        right: 3%;
        top: 18px;
    }

    .bayou-build__shape--bottom {
        width: 320px;
        left: -50px;
        bottom: 8px;
    }

    .bayou-build__content {
        max-width: 670px;
    }

    .bayou-build h2 {
        max-width: 600px;
    }
}

@media (max-width: 600px) {
    .bayou-build {
        min-height: 680px;
        padding: 150px 20px 210px;
    }

    .bayou-build__shape--top {
        width: 110px;
        top: 16px;
        right: 8px;
        opacity: 0.95;
    }

    .bayou-build__shape--bottom {
        width: 260px;
        left: -40px;
        bottom: 6px;
    }

    .bayou-build__eyebrow {
        font-size: 10px;
        margin-bottom: 26px;
    }

    .bayou-build h2 {
        font-size: 29px;
        line-height: 40px;
        letter-spacing: -0.06em;
        margin-bottom: 23px;
    }

    .bayou-build__description {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 26px;
    }

    .bayou-build__btn {
        font-size: 12px;
        padding: 0 17px;
        min-height: 50px;
    }

    .bayou-build__arrow {
        height: 50px;
        width: 50px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bayou-build {
        background:
            radial-gradient(ellipse 33% 47% at 17% 80%, rgba(15, 155, 242, 0.55), transparent 88%),
            radial-gradient(ellipse 36% 57% at 46% 76%, rgba(2, 51, 115, 0.5), transparent 82%),
            radial-gradient(ellipse 32% 44% at 40% 100%, rgba(56, 176, 255, 0.28), transparent 83%),
            radial-gradient(ellipse 34% 52% at 66% 82%, rgba(15, 155, 242, 0.22), transparent 85%),
            radial-gradient(ellipse 45% 45% at 65% 12%, rgba(2, 51, 115, 0.35), transparent 90%),
            radial-gradient(ellipse 42% 48% at 4% 46%, rgba(15, 155, 242, 0.25), transparent 90%),
            #061018;
    }

    .bayou-build__btn,
    .bayou-build__arrow,
    .bayou-build__shape--top,
    .bayou-build__shape--bottom {
        transition: none;
        animation: none;
    }
}

/* ========================================
   BAYOU RECENT PROJECTS
======================================== */

.bayou-rp {
    --bayou-rp-bg: #ecefed;
    --bayou-rp-text: #0c0d0f;
    --bayou-rp-muted: #5e646b;
    --bayou-rp-accent: #0f9bf2;
    --bayou-rp-tag-bg: rgba(6, 16, 24, 0.72);
    --bayou-rp-tag-border: rgba(255, 255, 255, 0.1);

    padding: 72px 20px 90px;
    background: var(--bayou-rp-bg);
    color: var(--bayou-rp-text);
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
}

.bayou-rp--portfolio .works-cta {
    margin-top: 48px;
}

.bayou-rp__container {
    max-width: 1360px;
    margin: 0 auto;
}

.bayou-rp__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.bayou-rp__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 800;
    color: #6a7078;
    margin-bottom: 14px;
}

.bayou-rp__eyebrow::before {
    content: "✦";
    color: var(--bayou-rp-accent);
    font-size: 16px;
}

.bayou-rp__head h2 {
    margin: 0;
    font-size: clamp(26px, 4vw, 52px);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-weight: 900;
    color: var(--bayou-rp-text);
}

.bayou-rp__title-row {
    display: block;
    font-size: clamp(26px, 4vw, 52px);
}

.bayou-rp__trophy {
    display: inline-block;
    width: 100px;
    height: auto;
    margin-left: 10px;
    vertical-align: middle;
    object-fit: contain;
}

@media (max-width: 700px) {
    .bayou-rp__head h2,
    .bayou-rp__title-row {
        font-size: 28px;
    }

    .bayou-rp__trophy {
        width: 30px;
        margin-left: 6px;
    }
}

.bayou-rp__head p {
    margin: 0;
    max-width: 510px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--bayou-rp-muted);
    font-weight: 500;
}

.bayou-rp__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.bayou-rp__card {
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bayou-rp__media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 650 / 415;
    border-radius: 24px;
    overflow: hidden;
    background: #d6d8da;
    flex-shrink: 0;
}

.bayou-rp__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.bayou-rp__card:hover .bayou-rp__media img {
    transform: scale(1.03);
}

.bayou-rp__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.28) 100%);
    pointer-events: none;
}

.bayou-rp__tags {
    position: absolute;
    left: 28px;
    bottom: 18px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    z-index: 2;
}

.bayou-rp__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 8px;
    background: var(--bayou-rp-tag-bg);
    border: 1px solid var(--bayou-rp-tag-border);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    backdrop-filter: blur(8px);
}

.bayou-rp__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    padding: 14px 28px;
    background: #fff;
    flex-shrink: 0;
}

.bayou-rp__title {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--bayou-rp-text);
}

.bayou-rp__link {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bayou-rp-accent);
    font-size: 26px;
    border-radius: 50%;
    transition: transform 0.25s ease, background 0.25s ease;
}

.bayou-rp__card:hover .bayou-rp__link {
    transform: translate(2px, -2px);
    background: rgba(15, 155, 242, 0.1);
}

@media (max-width: 991px) {
    .bayou-rp {
        padding: 56px 16px 70px;
    }

    .bayou-rp__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .bayou-rp__head {
        margin-bottom: 26px;
    }

    .bayou-rp__head p {
        font-size: 15px;
    }

    .bayou-rp__card {
        border-radius: 18px;
    }

    .bayou-rp__media {
        border-radius: 18px;
    }

    .bayou-rp__tags {
        left: 16px;
        right: 16px;
        bottom: 14px;
    }

    .bayou-rp__tag {
        font-size: 12px;
        min-height: 31px;
        padding: 0 10px;
    }

    .bayou-rp__content {
        padding: 14px 18px;
        min-height: 62px;
    }

    .bayou-rp__title {
        font-size: 17px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bayou-rp__media img,
    .bayou-rp__link {
        transition: none;
    }
}

/* ========================================
   PORTFOLIO: VIDEOS + IMAGES
========================================= */

.works-hero__jumps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.works-hero__jumps a {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.06);
    color: #f2f7fb;
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    backdrop-filter: blur(10px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.works-hero__jumps a:hover {
    background: #0f9bf2;
    border-color: #0f9bf2;
    color: #021428;
    transform: translateY(-1px);
}

#videos,
#photos,
#portfolio {
    scroll-margin-top: 16px;
}

.bayou-rp--films {
    --bayou-rp-bg: #07090c;
    --bayou-rp-text: #f2f7fb;
    --bayou-rp-muted: #8aa0b4;
    --bayou-rp-tag-bg: rgba(6, 16, 24, 0.72);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.bayou-rp--films::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.2;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 80%);
}

.bayou-rp--films::after {
    content: "";
    position: absolute;
    width: min(520px, 70vw);
    height: min(520px, 70vw);
    right: -8%;
    top: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(15, 155, 242, 0.2) 0%, transparent 68%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 0;
}

.bayou-rp--films .bayou-rp__eyebrow {
    color: #8aa0b4;
}

.bayou-rp--films .bayou-rp__container,
.bayou-rp--shots .bayou-rp__container {
    position: relative;
    z-index: 1;
}

.bayou-rp--films .bayou-rp__content {
    background: #11151b;
}

.bayou-rp--films .bayou-rp__link {
    font-size: 14px;
}

.bayou-films__card:hover .bayou-rp__link {
    transform: translate(2px, -2px);
    background: rgba(15, 155, 242, 0.1);
}

.bayou-films__media .bayou-rp__tags {
    pointer-events: none;
}

.bayou-films {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.bayou-films__card {
    background: #11151b;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    cursor: pointer;
}

.bayou-films__card--featured {
    grid-column: 1 / -1;
}

.bayou-films__card:not(.bayou-films__card--featured) .bayou-films__play {
    width: 56px;
    height: 56px;
}

.bayou-films__card:not(.bayou-films__card--featured) .bayou-films__play svg {
    width: 22px;
    height: 22px;
}

.bayou-films__card:not(.bayou-films__card--featured) .bayou-rp__tags {
    left: 12px;
    right: 12px;
    bottom: 12px;
    gap: 6px;
}

.bayou-films__card:not(.bayou-films__card--featured) .bayou-rp__tag {
    font-size: 11px;
    min-height: 26px;
    padding: 0 8px;
}

.bayou-films__card:not(.bayou-films__card--featured) .bayou-rp__content {
    padding: 12px 14px;
    min-height: 52px;
}

.bayou-films__card:not(.bayou-films__card--featured) .bayou-rp__title {
    font-size: 15px;
}

.bayou-films__media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0;
    padding: 0;
    overflow: hidden;
    background: #161b22;
    cursor: pointer;
    color: inherit;
    font: inherit;
    appearance: none;
}

.bayou-films__card--featured .bayou-films__media {
    aspect-ratio: 16 / 8;
}

.bayou-films__card--featured .bayou-films__media img {
    object-position: center 30%;
}

.bayou-films__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.bayou-films__card:hover .bayou-films__media img {
    transform: scale(1.04);
}

.bayou-films__shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at center, transparent 28%, rgba(0, 0, 0, 0.18) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04) 40%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

.bayou-films__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0f9bf2;
    color: #021428;
    box-shadow: 0 12px 40px rgba(15, 155, 242, 0.38);
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.25s ease, background 0.25s ease;
}

.bayou-films__play svg {
    width: 28px;
    height: 28px;
    margin-left: 3px;
}

.bayou-films__card:hover .bayou-films__play {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}

.bayou-films__card--featured .bayou-films__play {
    width: 88px;
    height: 88px;
}

.bayou-films__card--featured .bayou-films__play svg {
    width: 32px;
    height: 32px;
}

.bayou-films__time {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    min-height: 30px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    border-radius: 8px;
    background: rgba(6, 16, 24, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
}

.bayou-rp--shots {
    background: #e4e8e6;
}

.bayou-shots {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.bayou-shots__item {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 22px;
    overflow: hidden;
    background: #cfd4d2;
    cursor: zoom-in;
    color: inherit;
    font: inherit;
    appearance: none;
}

.bayou-shots__item img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.bayou-shots__item--dark {
    background: #07090c;
}

.bayou-shots__item--dark img {
    object-fit: contain;
    padding: 18px;
}

.bayou-films__media:focus-visible,
.bayou-shots__item:focus-visible {
    outline: 2px solid #0f9bf2;
    outline-offset: 3px;
}

.bayou-shots__item:hover img {
    transform: scale(1.05);
}

.bayou-shots__item--dark:hover img {
    transform: scale(1.03);
}

.bayou-shots__meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 48px 18px 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    background: linear-gradient(180deg, transparent 0%, rgba(7, 9, 12, 0.72) 100%);
    color: #fff;
    text-align: left;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.bayou-shots__item:hover .bayou-shots__meta,
.bayou-shots__item:focus-visible .bayou-shots__meta {
    opacity: 1;
    transform: translateY(0);
}

.bayou-shots__title {
    font-family: "Manrope", "DM Sans", sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.bayou-shots__tags {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.78);
}

.works-lb {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: grid;
    place-items: center;
    padding: 24px;
}

.works-lb[hidden] {
    display: none;
}

.works-lb__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(4, 8, 14, 0.86);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.works-lb__dialog {
    position: relative;
    z-index: 1;
    width: min(1080px, 100%);
    outline: none;
}

.works-lb__stage {
    background: #0c1016;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.works-lb__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #05070c;
}

.works-lb__media img,
.works-lb__media video,
.works-lb__media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.works-lb__media img,
.works-lb__media video {
    object-fit: contain;
}

.works-lb__meta {
    padding: 18px 24px 22px;
    color: #f2f7fb;
}

.works-lb__tags {
    margin: 0 0 6px;
    color: #0f9bf2;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.works-lb__meta h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.works-lb__close,
.works-lb__nav {
    position: absolute;
    z-index: 2;
    border: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.2s ease, transform 0.2s ease;
}

.works-lb__close {
    top: -14px;
    right: -8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 32px;
    line-height: 1;
}

.works-lb__nav {
    top: 42%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 32px;
    line-height: 1;
}

.works-lb__nav--prev { left: -18px; }
.works-lb__nav--next { right: -18px; }

.works-lb__close:hover,
.works-lb__nav:hover {
    background: #0f9bf2;
    color: #021428;
    transform: scale(1.05);
}

body.works-lb-open {
    overflow: hidden;
}

body.works-lb-open .bayou-whatsapp {
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 991px) {
    .bayou-films {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bayou-shots {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bayou-films__card--featured .bayou-films__media {
        aspect-ratio: 16 / 10;
    }

    .bayou-shots__meta {
        opacity: 1;
        transform: none;
    }

    .works-lb {
        padding: 16px;
    }

    .works-lb__nav--prev { left: 8px; }
    .works-lb__nav--next { right: 8px; }
    .works-lb__close {
        top: 8px;
        right: 8px;
        background: rgba(4, 8, 14, 0.72);
    }
}

@media (max-width: 640px) {
    .works-hero__jumps {
        margin-top: 22px;
    }

    .bayou-films {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .bayou-films__media {
        aspect-ratio: 16 / 10;
    }

    .bayou-films__play,
    .bayou-films__card--featured .bayou-films__play {
        width: 64px;
        height: 64px;
    }

    .bayou-films__card,
    .bayou-shots__item {
        border-radius: 18px;
    }

    .works-lb__meta {
        padding: 14px 16px 18px;
    }

    .works-lb__meta h3 {
        font-size: 18px;
    }

    .works-lb__nav {
        width: 40px;
        height: 40px;
        top: 38%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .works-hero__jumps a,
    .bayou-films__media img,
    .bayou-films__play,
    .bayou-shots__item img,
    .bayou-shots__meta,
    .works-lb__close,
    .works-lb__nav {
        transition: none;
    }
}

/* ========================================
   SERVICES PAGE
========================================= */

.works-hero--services .works-hero__text {
    max-width: 460px;
}

#strategie,
#design,
#web,
#video {
    scroll-margin-top: 24px;
}

.bayou-offer {
    padding: 80px 20px 40px;
    background: #ecefed;
    color: #0c0d0f;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
}

.bayou-offer__container {
    max-width: 1360px;
    margin: 0 auto;
}

.bayou-offer__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: 24px 48px;
    align-items: end;
    margin-bottom: 12px;
    padding-bottom: 36px;
}

.bayou-offer__lead {
    margin: 0;
    font-family: "Barlow Condensed", Impact, sans-serif;
    font-size: clamp(42px, 6vw, 72px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    color: #0c0d0f;
}

.bayou-offer__intro p {
    margin: 0;
    max-width: 460px;
    font-size: 17px;
    line-height: 1.7;
    font-weight: 500;
    color: #5e646b;
    justify-self: end;
}

.bayou-offer__block {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 48px 64px;
    align-items: center;
    padding: 64px 0;
    border-top: 1px solid rgba(12, 13, 15, 0.08);
}

.bayou-offer__copy {
    min-width: 0;
}

.bayou-offer__block:nth-of-type(even) .bayou-offer__media {
    order: 2;
}

.bayou-offer__media {
    border-radius: 28px;
    overflow: hidden;
    background: #d6d8da;
    aspect-ratio: 16 / 11;
}

.bayou-offer__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

#design .bayou-offer__media img,
#video .bayou-offer__media img {
    object-position: center 55%;
}

.bayou-offer__block:hover .bayou-offer__media img {
    transform: scale(1.03);
}

.bayou-offer__kicker {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #6a7078;
}

.bayou-offer__kicker span {
    color: #0f9bf2;
    letter-spacing: 0.04em;
    font-family: "Barlow Condensed", Impact, sans-serif;
    font-size: 20px;
}

.bayou-offer__body h3 {
    margin: 0 0 16px;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    font-weight: 900;
    color: #0c0d0f;
}

.bayou-offer__lead-text {
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    color: #0c0d0f;
}

.bayou-offer__text {
    margin: 0 0 22px;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
    color: #5e646b;
}

.bayou-offer__points {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.bayou-offer__points li {
    position: relative;
    padding-left: 22px;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
    color: #0c0d0f;
}

.bayou-offer__points li::before {
    content: "✦";
    position: absolute;
    left: 0;
    top: 0;
    color: #0f9bf2;
    font-size: 12px;
}

.bayou-offer__body .call-button {
    display: inline-flex;
}

.bayou-way {
    padding: 80px 20px 90px;
    background: #061018;
    color: #f2f7fb;
    font-family: "Manrope", "DM Sans", Arial, sans-serif;
}

.bayou-way__container {
    max-width: 1360px;
    margin: 0 auto;
}

.bayou-way__head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 20px 48px;
    align-items: end;
    margin-bottom: 48px;
}

.bayou-way__head h2 {
    margin: 0;
    font-family: "Barlow Condensed", Impact, sans-serif;
    font-size: clamp(40px, 5.5vw, 68px);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.bayou-way .bayou-rp__eyebrow {
    color: #8aa0b4;
}

.bayou-way__head p {
    margin: 0;
    max-width: 420px;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 500;
    color: rgba(242, 247, 251, 0.62);
    justify-self: end;
}

.bayou-way__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.bayou-way__grid li {
    padding: 28px 24px 26px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.bayou-way__num {
    display: block;
    margin-bottom: 28px;
    font-family: "Barlow Condensed", Impact, sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #0f9bf2;
}

.bayou-way__grid h3 {
    margin: 0 0 10px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.bayou-way__grid p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    color: rgba(242, 247, 251, 0.62);
}

@media (max-width: 991px) {
    .bayou-offer {
        padding: 56px 16px 20px;
    }

    .bayou-offer__intro,
    .bayou-way__head,
    .bayou-offer__block,
    .bayou-offer__block:nth-of-type(even) {
        grid-template-columns: 1fr;
    }

    .bayou-offer__intro p,
    .bayou-way__head p {
        justify-self: start;
    }

    .bayou-offer__block {
        gap: 24px;
        padding: 40px 0;
    }

    .bayou-offer__block:nth-of-type(even) {
        display: flex;
        flex-direction: column;
    }

    .bayou-offer__block:nth-of-type(even) .bayou-offer__copy {
        display: contents;
    }

    .bayou-offer__block:nth-of-type(even) .bayou-offer__kicker {
        order: 1;
        margin-bottom: 0;
    }

    .bayou-offer__block:nth-of-type(even) .bayou-offer__media {
        order: 2;
        width: 100%;
    }

    .bayou-offer__block:nth-of-type(even) .bayou-offer__body {
        order: 3;
        width: 100%;
    }

    .bayou-offer__media {
        aspect-ratio: 16 / 11;
        border-radius: 20px;
    }

    #design .bayou-offer__media img,
    #video .bayou-offer__media img {
        object-position: center 58%;
    }

    .bayou-way {
        padding: 56px 16px 70px;
    }

    .bayou-way__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .bayou-way__grid {
        grid-template-columns: 1fr;
    }

    .bayou-offer__lead-text {
        font-size: 17px;
    }

    .bayou-offer__body .call-button {
        width: 100%;
        justify-content: center;
    }
}

.has-reveal .js-reveal {
    opacity: 0;
}

.has-reveal .bayou-offer__intro {
    transform: translateY(36px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.has-reveal .bayou-offer__block .bayou-offer__media {
    opacity: 0;
    transform: translateX(-56px) scale(0.94);
    clip-path: inset(10% 8% 10% 8% round 28px);
    transition:
        opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
        clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.has-reveal .bayou-offer__block:nth-of-type(even) .bayou-offer__media {
    transform: translateX(56px) scale(0.94);
}

.has-reveal .bayou-offer__block .bayou-offer__copy {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}

.has-reveal .bayou-way__head {
    transform: translateY(28px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.has-reveal .bayou-way__grid li {
    transform: translateY(32px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.has-reveal .bayou-way__grid li:nth-child(2) { transition-delay: 0.08s; }
.has-reveal .bayou-way__grid li:nth-child(3) { transition-delay: 0.16s; }
.has-reveal .bayou-way__grid li:nth-child(4) { transition-delay: 0.24s; }

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

.has-reveal .bayou-offer__block.is-in .bayou-offer__media {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0 round 28px);
}

.has-reveal .bayou-offer__block.is-in .bayou-offer__copy {
    opacity: 1;
    transform: none;
}

@media (max-width: 991px) {
    .has-reveal .bayou-offer__block .bayou-offer__media,
    .has-reveal .bayou-offer__block:nth-of-type(even) .bayou-offer__media {
        transform: translateY(40px) scale(0.96);
        clip-path: inset(8% 6% 8% 6% round 20px);
    }

    .has-reveal .bayou-offer__block.is-in .bayou-offer__media {
        clip-path: inset(0 0 0 0 round 20px);
    }

    .has-reveal .bayou-offer__block:nth-of-type(even) .bayou-offer__copy {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .has-reveal .bayou-offer__block:nth-of-type(even) .bayou-offer__kicker,
    .has-reveal .bayou-offer__block:nth-of-type(even) .bayou-offer__body {
        opacity: 0;
        transform: translateY(28px);
        transition:
            opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s,
            transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
    }

    .has-reveal .bayou-offer__block:nth-of-type(even).is-in .bayou-offer__kicker,
    .has-reveal .bayou-offer__block:nth-of-type(even).is-in .bayou-offer__body {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bayou-offer__media img,
    .has-reveal .js-reveal,
    .has-reveal .bayou-offer__block .bayou-offer__media,
    .has-reveal .bayou-offer__block .bayou-offer__copy,
    .has-reveal .bayou-offer__block .bayou-offer__kicker,
    .has-reveal .bayou-offer__block .bayou-offer__body,
    .has-reveal .bayou-way__head,
    .has-reveal .bayou-way__grid li {
        opacity: 1;
        transform: none;
        clip-path: none;
        transition: none;
    }
}