/*
 * Cinematic interface layer.
 * The original design remains entirely in styles.css and is available with ?style=legacy.
 */

.cinematic-ui {
    color-scheme: dark;
    --color-bg: #06101a;
    --color-bg-alt: #081522;
    --color-primary: #8be8ff;
    --color-primary-dark: #22a8d6;
    --color-primary-light: #d8f8ff;
    --color-accent: #63ddff;
    --color-text: #f3f8fa;
    --color-text-muted: #9aaab6;
    --color-border: rgba(171, 229, 245, 0.18);
    --color-glass: rgba(8, 24, 37, 0.62);
    --color-glass-border: rgba(197, 240, 252, 0.2);
    --color-card-bg: rgba(8, 22, 34, 0.84);
    --shadow-sm: 0 8px 30px rgba(0, 0, 0, 0.16);
    --shadow-md: 0 20px 70px rgba(0, 0, 0, 0.26);
    --shadow-lg: 0 30px 100px rgba(0, 0, 0, 0.38);
    --shadow-xl: 0 40px 130px rgba(0, 0, 0, 0.48);
    --shadow-glow: 0 0 70px rgba(67, 201, 241, 0.18);
    --radius-sm: 0.8rem;
    --radius-md: 1.25rem;
    --radius-lg: 2rem;
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.cinematic-ui body {
    min-width: 0;
    color: var(--color-text);
    background:
        radial-gradient(circle at 82% 2%, rgba(42, 145, 183, 0.14), transparent 28rem),
        #050d16;
    letter-spacing: -0.012em;
}

.cinematic-ui body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    opacity: 0.025;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255, 255, 255, 0.32) 3px),
        repeating-linear-gradient(90deg, transparent 0, transparent 4px, rgba(255, 255, 255, 0.16) 5px);
    mix-blend-mode: normal;
}

.cinematic-ui ::selection {
    color: #001018;
    background: #a7efff;
}

.cinematic-ui .container {
    max-width: 1280px;
    padding-inline: clamp(1.25rem, 4vw, 4.5rem);
}

/* Navigation */
.cinematic-ui .header {
    top: 1.1rem;
    left: 50%;
    width: min(calc(100% - 2rem), 1220px);
    border: 1px solid rgba(209, 243, 250, 0.12);
    border-radius: 999px;
    background: rgba(4, 10, 17, 0.34);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px) saturate(125%);
    transform: translateX(-50%);
    transition: top 350ms ease, background 350ms ease, border-color 350ms ease, box-shadow 350ms ease;
}

.cinematic-ui .header.scrolled {
    top: 0.65rem;
    border-color: rgba(209, 243, 250, 0.18);
    background: rgba(3, 8, 14, 0.78);
    box-shadow: 0 18px 80px rgba(0, 0, 0, 0.42);
}

.cinematic-ui .nav {
    height: 4.15rem;
    padding-inline: 1.4rem;
}

.cinematic-ui .nav__logo {
    gap: 0.7rem;
    color: #f4fbfd;
    font-size: 0.92rem;
    font-weight: 550;
    letter-spacing: 0.04em;
}

.cinematic-ui .logo__icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    color: #c9f5ff;
    font-size: 1rem;
    border: 1px solid rgba(184, 239, 252, 0.25);
    border-radius: 50%;
    box-shadow: inset 0 0 16px rgba(139, 232, 255, 0.09);
}

.cinematic-ui .nav__list {
    gap: clamp(1.15rem, 2.4vw, 2.4rem);
}

.cinematic-ui .nav__link {
    color: rgba(225, 240, 244, 0.62);
    font-size: 0.78rem;
    font-weight: 450;
    letter-spacing: 0.035em;
}

.cinematic-ui .nav__link:hover,
.cinematic-ui .nav__link.active {
    color: #f6fdff;
}

.cinematic-ui .nav__link:not(.nav__link--cta)::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -0.6rem;
    left: 0;
    height: 1px;
    background: #b8f2ff;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 300ms ease;
}

.cinematic-ui .nav__link:not(.nav__link--cta):hover::after,
.cinematic-ui .nav__link:not(.nav__link--cta).active::after {
    transform: scaleX(1);
    transform-origin: left;
}

.cinematic-ui .nav__link--cta,
.cinematic-ui[data-theme='dark'] .nav__link--cta {
    padding: 0.68rem 1.2rem;
    color: #061018 !important;
    background: rgba(235, 250, 253, 0.94);
    box-shadow: 0 8px 28px rgba(171, 235, 250, 0.13);
}

.cinematic-ui .nav__link--cta:hover,
.cinematic-ui[data-theme='dark'] .nav__link--cta:hover {
    color: #00080d !important;
    background: #b9f1ff;
    box-shadow: 0 10px 36px rgba(124, 224, 249, 0.26);
    transform: translateY(-1px);
}

.cinematic-ui .theme-toggle {
    display: none;
}

/* Hero scene */
.cinematic-ui .hero {
    isolation: isolate;
    min-height: max(780px, 100svh);
    padding: 9rem 0 4.5rem;
    background: #030912;
}

.cinematic-ui .hero__bg {
    z-index: 0;
}

.cinematic-ui .hero__gradient {
    background:
        linear-gradient(90deg, rgba(3, 9, 16, 0.84) 0%, rgba(3, 10, 18, 0.44) 43%, rgba(3, 10, 18, 0.03) 76%),
        radial-gradient(ellipse 70% 80% at 83% 31%, rgba(28, 132, 181, 0.24), transparent 68%),
        radial-gradient(ellipse 55% 45% at 29% 18%, rgba(33, 113, 151, 0.15), transparent 72%),
        linear-gradient(180deg, #091827 0%, #030a12 63%, #050d16 100%);
}

.cinematic-ui .hero__cinematic {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    overflow: hidden;
    pointer-events: none;
}

.cinematic-ui .hero__airflow {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    opacity: 1;
    filter: saturate(112%);
    contain: strict;
}

.cinematic-ui .hero__unit-wrap {
    position: absolute;
    z-index: 2;
    top: 1.5%;
    right: max(0px, calc((100vw - 1280px) / 2));
    width: min(32.5vw, 520px);
    aspect-ratio: 1073 / 612;
    transform: none;
}

.cinematic-ui .hero__unit {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    image-rendering: auto;
    opacity: 0.98;
    filter: brightness(1.03) contrast(1.055) saturate(0.96) drop-shadow(0 34px 58px rgba(0, 0, 0, 0.66));
    transform: none;
}

.cinematic-ui .hero__unit-brand {
    position: absolute;
    top: 59.7%;
    left: 7.8%;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 0.32em;
    color: rgba(4, 39, 48, 0.72);
    font-size: clamp(0.6rem, 0.86vw, 0.8rem);
    font-weight: 600;
    font-kerning: normal;
    letter-spacing: 0.055em;
    line-height: 1;
    text-rendering: geometricPrecision;
    text-transform: uppercase;
    white-space: nowrap;
    mix-blend-mode: multiply;
    filter: blur(0.08px) drop-shadow(0 0.7px 0 rgba(255, 255, 255, 0.4));
    transform: rotate(-6.5deg) skewX(-1deg) scaleY(0.92);
    transform-origin: left center;
}

.cinematic-ui .hero__unit-brand-mark {
    display: grid;
    width: 1em;
    height: 1em;
    place-items: center;
    font-size: 0.8em;
    letter-spacing: 0;
    opacity: 0.82;
}

.cinematic-ui .hero__unit-brand-name {
    transform: translateY(-0.01em);
}

/* One-word rollback: change data-brand-treatment="oem" to "classic" in index.html. */
.cinematic-ui .hero__unit-brand[data-brand-treatment='classic'] {
    top: 60.5%;
    left: 7%;
    gap: 0.42em;
    color: rgba(1, 28, 38, 0.97);
    font-weight: 700;
    letter-spacing: 0.09em;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28));
    transform: rotate(-7deg) skewX(-2deg) scaleY(0.94);
}

.cinematic-ui .hero__unit-brand[data-brand-treatment='classic'] .hero__unit-brand-mark {
    width: 1.15em;
    height: 1.15em;
    font-size: 0.95em;
    opacity: 1;
}

.cinematic-ui .hero__unit-brand[data-brand-treatment='classic'] .hero__unit-brand-name {
    transform: translateY(-0.02em);
}

.cinematic-ui .hero__unit-initials {
    position: absolute;
    top: 33.7%;
    left: 63.1%;
    z-index: 4;
    color: #18bde7;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: clamp(0.72rem, 1.24vw, 1.18rem);
    font-weight: 600;
    font-kerning: normal;
    letter-spacing: 0.075em;
    line-height: 1;
    text-rendering: geometricPrecision;
    white-space: nowrap;
    opacity: 0.94;
    text-shadow:
        0 0 0.08em rgba(236, 253, 255, 0.98),
        0 0 0.3em rgba(67, 218, 255, 0.88),
        0 0 0.68em rgba(12, 164, 220, 0.42);
    filter: saturate(1.12);
    transform: perspective(125px) rotate3d(1, -1, 0, 14deg) rotate(-5.6deg) skewX(-2deg) scaleY(0.94);
    transform-origin: center;
}

.cinematic-ui .hero__unit-glow {
    position: absolute;
    top: 66%;
    left: 18%;
    width: 72%;
    height: 20%;
    border-radius: 50%;
    background: rgba(83, 220, 255, 0.2);
    filter: blur(58px);
    opacity: 0.76;
}

.cinematic-ui .hero__floor {
    position: absolute;
    right: -5%;
    bottom: -15%;
    width: 79%;
    height: 42%;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 68% 4%, rgba(81, 206, 242, 0.17), transparent 34%),
        linear-gradient(180deg, rgba(14, 50, 69, 0.16), transparent 58%);
    filter: blur(10px);
    transform: perspective(700px) rotateX(67deg);
    opacity: 0.76;
}

.cinematic-ui .hero__floor::before {
    content: '';
    position: absolute;
    top: 6%;
    right: 13%;
    width: 58%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(166, 235, 252, 0.5), transparent);
    filter: blur(2px);
}

.cinematic-ui .hero__content {
    position: relative;
    z-index: 4;
    width: 100%;
    max-width: 1280px;
    padding-right: min(46vw, 650px);
}

.cinematic-ui .hero .fade-in {
    opacity: 1;
    transform: none;
}

.cinematic-ui .hero__badge {
    gap: 0.7rem;
    margin-bottom: 1.8rem;
    padding: 0;
    color: rgba(210, 238, 244, 0.62);
    font-size: 0.72rem;
    font-weight: 450;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: transparent;
    border: 0;
    backdrop-filter: none;
    animation: hero-copy-in 900ms 120ms both cubic-bezier(0.16, 1, 0.3, 1);
}

.cinematic-ui .hero__badge span:first-child {
    color: #a8eefe;
    filter: drop-shadow(0 0 10px rgba(118, 226, 252, 0.58));
}

.cinematic-ui .hero__title {
    max-width: 780px;
    margin-bottom: 1.65rem;
    color: #f4f8fa;
    font-size: clamp(3.35rem, 5.2vw, 5.65rem);
    font-weight: 430;
    line-height: 0.98;
    letter-spacing: -0.062em;
    text-wrap: balance;
    text-shadow: 0 10px 45px rgba(0, 0, 0, 0.36);
    animation: hero-copy-in 1000ms 200ms both cubic-bezier(0.16, 1, 0.3, 1);
}

.cinematic-ui .hero__title .text-gradient {
    display: inline;
    color: #bceeff;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.88em;
    font-style: normal;
    font-weight: 300;
    letter-spacing: -0.05em;
    background: linear-gradient(112deg, #e5fbff 5%, #96dff4 48%, #d9f7ff 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cinematic-ui .hero__description {
    max-width: 570px;
    margin-bottom: 2rem;
    color: rgba(198, 216, 222, 0.66);
    font-size: clamp(0.98rem, 1.3vw, 1.13rem);
    font-weight: 350;
    line-height: 1.75;
    animation: hero-copy-in 1000ms 300ms both cubic-bezier(0.16, 1, 0.3, 1);
}

.cinematic-ui .hero__buttons {
    gap: 0.8rem;
    margin-bottom: 3.5rem;
    animation: hero-copy-in 1000ms 380ms both cubic-bezier(0.16, 1, 0.3, 1);
}

.cinematic-ui .btn {
    min-height: 3.35rem;
    padding: 0.88rem 1.5rem;
    font-size: 0.84rem;
    font-weight: 520;
    letter-spacing: 0.015em;
    border: 1px solid transparent;
}

.cinematic-ui .btn--primary,
.cinematic-ui[data-theme='dark'] .btn--primary {
    color: #061016;
    background: #ecfbff;
    box-shadow: 0 12px 44px rgba(134, 225, 248, 0.15);
}

.cinematic-ui .btn--primary:hover,
.cinematic-ui[data-theme='dark'] .btn--primary:hover {
    background: #acf0ff;
    box-shadow: 0 16px 54px rgba(96, 218, 249, 0.26);
    transform: translateY(-3px);
}

.cinematic-ui .btn--secondary,
.cinematic-ui[data-theme='dark'] .btn--secondary {
    color: rgba(232, 246, 249, 0.8);
    background: rgba(9, 20, 30, 0.28);
    border-color: rgba(205, 240, 249, 0.17);
    backdrop-filter: blur(13px);
}

.cinematic-ui .btn--secondary:hover,
.cinematic-ui[data-theme='dark'] .btn--secondary:hover {
    color: #fff;
    background: rgba(164, 230, 246, 0.09);
    border-color: rgba(205, 240, 249, 0.34);
    transform: translateY(-3px);
}

.cinematic-ui .hero__stats,
.cinematic-ui[data-theme='dark'] .hero__stats {
    gap: 1.8rem;
    padding: 1rem 1.25rem;
    border: 0;
    border-top: 1px solid rgba(203, 237, 245, 0.14);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    animation: hero-copy-in 1000ms 460ms both cubic-bezier(0.16, 1, 0.3, 1);
}

.cinematic-ui .stat {
    min-width: 7.2rem;
    text-align: left;
}

.cinematic-ui .stat__number {
    color: #e9faff;
    font-size: 1.5rem;
    font-weight: 420;
    letter-spacing: -0.04em;
}

.cinematic-ui .stat__label {
    color: rgba(189, 213, 220, 0.48);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cinematic-ui .stat__divider {
    height: 2.4rem;
    background: rgba(203, 237, 245, 0.12);
}

/* Content rhythm */
.cinematic-ui main > section:not(.hero) {
    position: relative;
    padding: clamp(6.5rem, 11vw, 10rem) 0;
    background: #050d16;
    border-top: 1px solid rgba(194, 232, 242, 0.1);
}

.cinematic-ui main > section:not(.hero)::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 45% at 85% 10%, rgba(38, 146, 191, 0.12), transparent 70%);
}

.cinematic-ui main > section:nth-of-type(odd):not(.hero),
.cinematic-ui .faq {
    background: #07121d !important;
}

.cinematic-ui .section__header {
    max-width: 780px;
    margin-bottom: clamp(3.2rem, 6vw, 5.5rem);
}

.cinematic-ui .section__subtitle {
    margin-bottom: 1.2rem;
    color: rgba(139, 232, 255, 0.88);
    font-size: 0.68rem;
    font-weight: 520;
    letter-spacing: 0.22em;
}

.cinematic-ui .section__title {
    margin-bottom: 1.35rem;
    color: #edf6f8;
    font-size: clamp(2.65rem, 5.2vw, 5.35rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.cinematic-ui .section__desc,
.cinematic-ui .section__desc[style] {
    max-width: 650px !important;
    margin-top: 1.25rem !important;
    color: rgba(193, 215, 222, 0.68) !important;
    font-size: 1rem;
    font-weight: 350;
    line-height: 1.8;
}

.cinematic-ui .fade-in {
    transform: translateY(35px) scale(0.99);
    transition: opacity 900ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cinematic-ui .fade-in.visible {
    transform: translateY(0) scale(1);
}

/* Services */
.cinematic-ui .services__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(200, 235, 244, 0.09);
    border-radius: 2rem;
    background: rgba(200, 235, 244, 0.09);
}

.cinematic-ui .service-card,
.cinematic-ui[data-theme='dark'] .service-card {
    min-height: 285px;
    padding: 2.2rem;
    border: 0;
    border-radius: 0;
    background:
        radial-gradient(circle at 90% 5%, rgba(88, 207, 239, 0.1), transparent 34%),
        #081522;
    box-shadow: none;
    backdrop-filter: none;
}

.cinematic-ui .service-card::before,
.cinematic-ui[data-theme='dark'] .service-card::before {
    content: '';
    position: absolute;
    inset: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 30% 0%, rgba(126, 229, 255, 0.13), transparent 55%);
    opacity: 0;
    transition: opacity 500ms ease;
}

.cinematic-ui .service-card:hover,
.cinematic-ui[data-theme='dark'] .service-card:hover {
    z-index: 1;
    border-color: transparent;
    background: #0d2030;
    box-shadow: inset 0 0 0 1px rgba(145, 229, 250, 0.16), 0 28px 70px rgba(0, 0, 0, 0.32);
    transform: translateY(-4px);
}

.cinematic-ui .service-card:hover::before {
    opacity: 1;
}

.cinematic-ui .service-card__icon {
    width: 3.1rem;
    height: 3.1rem;
    margin-bottom: 3.2rem;
    color: #9eeaff;
    background: rgba(109, 217, 245, 0.11);
    border: 1px solid rgba(151, 228, 248, 0.2);
    border-radius: 50%;
}

.cinematic-ui .service-card:hover .service-card__icon {
    background: rgba(109, 217, 245, 0.12);
    transform: scale(1.08) rotate(-4deg);
}

.cinematic-ui .service-card h3 {
    color: #edf8fa;
    font-size: 1.18rem;
    font-weight: 480;
    letter-spacing: -0.025em;
}

.cinematic-ui .service-card p {
    max-width: 31ch;
    color: rgba(190, 213, 220, 0.62);
    font-size: 0.86rem;
    line-height: 1.75;
}

/* Brand partners */
.cinematic-ui .brands__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.cinematic-ui .brands .section__desc {
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center;
}

.cinematic-ui .brand-card,
.cinematic-ui[data-theme='dark'] .brand-card {
    min-width: 0;
    min-height: 230px;
    justify-content: center;
    padding: 2rem;
    border: 1px solid rgba(191, 231, 241, 0.16);
    border-radius: 1.4rem;
    background: rgba(9, 26, 40, 0.68);
    box-shadow: none;
}

.cinematic-ui .brand-card:hover,
.cinematic-ui[data-theme='dark'] .brand-card:hover {
    border-color: rgba(161, 229, 247, 0.25);
    background: rgba(14, 38, 55, 0.88);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.25);
    transform: translateY(-6px);
}

.cinematic-ui .brand-card__logo,
.cinematic-ui[data-theme='dark'] .brand-card__logo,
.cinematic-ui .brand-card__logo--dark-invert,
.cinematic-ui[data-theme='dark'] .brand-card__logo--dark-invert {
    max-width: 135px;
    filter: saturate(1.08) contrast(1.04) drop-shadow(0 8px 20px rgba(0, 0, 0, 0.18));
    opacity: 1;
}

.cinematic-ui .brand-card:hover .brand-card__logo,
.cinematic-ui[data-theme='dark'] .brand-card:hover .brand-card__logo,
.cinematic-ui .brand-card:hover .brand-card__logo--dark-invert,
.cinematic-ui[data-theme='dark'] .brand-card:hover .brand-card__logo--dark-invert {
    filter: saturate(1.16) brightness(1.07) contrast(1.04) drop-shadow(0 10px 24px rgba(0, 0, 0, 0.22));
    opacity: 1;
}

.cinematic-ui .brand-card__cta {
    color: rgba(190, 218, 226, 0.54);
    font-size: 0.7rem;
}

/* About */
.cinematic-ui .about__wrapper {
    grid-template-columns: minmax(330px, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(3rem, 8vw, 8rem);
}

.cinematic-ui .about__image-frame,
.cinematic-ui[data-theme='dark'] .about__image-frame {
    aspect-ratio: auto;
    align-items: stretch;
}

.cinematic-ui .about__profile-img {
    max-width: none;
    aspect-ratio: 4 / 5;
    border-radius: 2.4rem;
    filter: saturate(0.84) contrast(1.03);
    box-shadow: 0 35px 120px rgba(0, 0, 0, 0.46);
}

.cinematic-ui .about__name {
    color: rgba(228, 243, 247, 0.75);
    font-size: 0.78rem;
    font-weight: 450;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cinematic-ui .about__content .section__title {
    font-size: clamp(2.7rem, 4.9vw, 5.1rem);
}

.cinematic-ui .about__content p {
    max-width: 62ch;
    color: rgba(193, 214, 221, 0.68);
    font-size: 0.98rem;
    font-weight: 350;
    line-height: 1.8;
}

.cinematic-ui .about__features {
    gap: 0;
    margin: 2.4rem 0 2.8rem;
    border-top: 1px solid rgba(195, 231, 240, 0.1);
}

.cinematic-ui .feature {
    padding: 1rem 0;
    color: rgba(224, 239, 243, 0.76);
    font-size: 0.82rem;
    font-weight: 430;
    border-bottom: 1px solid rgba(195, 231, 240, 0.1);
}

/* Reasons */
.cinematic-ui .why-us__grid {
    gap: 1rem;
}

.cinematic-ui .why-us__card,
.cinematic-ui[data-theme='dark'] .why-us__card {
    min-height: 270px;
    padding: 2.1rem 1.35rem;
    border: 1px solid rgba(194, 232, 242, 0.14);
    border-radius: 1.5rem;
    background: rgba(9, 24, 37, 0.66);
    box-shadow: none;
}

.cinematic-ui .why-us__card:hover,
.cinematic-ui[data-theme='dark'] .why-us__card:hover {
    border-color: rgba(168, 233, 250, 0.24);
    background: rgba(13, 35, 51, 0.82);
    box-shadow: 0 26px 80px rgba(0, 0, 0, 0.3);
    transform: translateY(-6px);
}

.cinematic-ui .why-us__icon {
    width: 2.65rem;
    height: 2.65rem;
    margin: 0 auto 3.4rem;
    color: rgba(152, 232, 252, 0.94);
}

.cinematic-ui .why-us__card h3 {
    color: #eaf5f7;
    font-size: 1rem;
    font-weight: 470;
}

.cinematic-ui .why-us__card p {
    color: rgba(187, 211, 218, 0.59);
    font-size: 0.8rem;
    line-height: 1.7;
}

/* FAQ */
.cinematic-ui .faq__grid[style] {
    max-width: 900px !important;
    gap: 0 !important;
    border-top: 1px solid rgba(195, 231, 240, 0.12);
}

.cinematic-ui .faq details[style] {
    padding: 1.8rem 0 !important;
    color: #edf7f9;
    background: transparent !important;
    border-bottom: 1px solid rgba(195, 231, 240, 0.12);
    border-radius: 0 !important;
    box-shadow: none !important;
}

.cinematic-ui .faq summary {
    gap: 2rem;
    color: rgba(233, 246, 249, 0.88);
    font-size: clamp(1rem, 1.55vw, 1.18rem);
    font-weight: 450 !important;
    letter-spacing: -0.02em;
}

.cinematic-ui .faq summary span {
    display: grid;
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    place-items: center;
    color: #8de7ff !important;
    border: 1px solid rgba(164, 231, 248, 0.17);
    border-radius: 50%;
    transition: transform 350ms ease, background 350ms ease;
}

.cinematic-ui .faq details[open] summary span {
    background: rgba(125, 221, 247, 0.08);
    transform: rotate(45deg);
}

.cinematic-ui .faq details p[style] {
    max-width: 72ch;
    margin-top: 1.2rem !important;
    color: rgba(182, 203, 209, 0.56) !important;
    font-size: 0.92rem;
    font-weight: 350 !important;
    line-height: 1.8 !important;
}

/* Contact */
.cinematic-ui .contact__wrapper {
    max-width: 920px;
    gap: 3rem;
}

.cinematic-ui .contact__info {
    text-align: center;
}

.cinematic-ui .contact__info > p {
    color: rgba(193, 214, 221, 0.65);
}

.cinematic-ui .contact__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: 3rem;
    text-align: left;
}

.cinematic-ui .contact__details > .contact__item {
    grid-column: 1 / -1;
}

.cinematic-ui .contact__item,
.cinematic-ui[data-theme='dark'] .contact__item,
.cinematic-ui .copy-btn,
.cinematic-ui[data-theme='dark'] .copy-btn {
    min-height: 5.1rem;
    color: rgba(197, 221, 227, 0.7);
    background: rgba(9, 25, 38, 0.68);
    border-color: rgba(194, 232, 242, 0.16);
    border-radius: 1.2rem;
}

.cinematic-ui .contact__item:hover,
.cinematic-ui .copy-btn:hover,
.cinematic-ui[data-theme='dark'] .copy-btn:hover {
    color: #b7effd;
    background: rgba(15, 40, 57, 0.82);
    border-color: rgba(159, 229, 247, 0.25);
}

.cinematic-ui .contact__item div span {
    color: rgba(177, 200, 207, 0.42);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cinematic-ui .contact__item div strong {
    color: rgba(236, 247, 249, 0.86);
    font-size: 0.9rem;
    font-weight: 450;
}

.cinematic-ui .contact__icon {
    color: #8de8ff;
}

/* Footer */
.cinematic-ui .footer,
.cinematic-ui[data-theme='dark'] .footer {
    padding-top: 5.5rem;
    background: #030a11;
    border-top: 1px solid rgba(194, 232, 242, 0.08);
}

.cinematic-ui .footer__logo {
    font-weight: 480;
}

.cinematic-ui .footer__brand p,
.cinematic-ui .footer__links a,
.cinematic-ui .footer__contact p {
    color: rgba(201, 220, 225, 0.43);
    font-size: 0.82rem;
}

.cinematic-ui .footer h4 {
    color: rgba(240, 249, 251, 0.84);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.cinematic-ui .footer__social a {
    width: 2.75rem;
    height: 2.75rem;
}

.cinematic-ui .footer__social a:focus-visible,
.cinematic-ui .footer__links a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

/* Reversible design switch */
.style-switcher {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 9999;
    padding: 0.65rem 0.9rem;
    color: rgba(236, 248, 250, 0.68);
    font: 500 0.68rem/1 'Inter', system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-decoration: none;
    border: 1px solid rgba(188, 232, 243, 0.14);
    border-radius: 999px;
    background: rgba(5, 12, 19, 0.66);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(14px);
    opacity: 0.72;
    transition: opacity 250ms ease, border-color 250ms ease, transform 250ms ease;
}

.style-switcher:hover {
    color: #fff;
    border-color: rgba(166, 234, 251, 0.32);
    opacity: 1;
    transform: translateY(-2px);
}

/* Animation */
@keyframes hero-copy-in {
    from { opacity: 0; transform: translateY(28px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@media (min-width: 1051px) {
    .cinematic-ui .header {
        top: 1rem;
        left: max(1rem, calc((100vw - 1280px) / 2));
        width: min(calc(100% - 2rem), 510px);
        transform: none;
    }

    .cinematic-ui .header.scrolled {
        top: 0.65rem;
    }

    .cinematic-ui .nav {
        height: 3.75rem;
        justify-content: flex-start;
        padding-inline: 1.05rem;
    }

    .cinematic-ui .nav__logo {
        display: none;
    }

    .cinematic-ui .nav__menu {
        width: 100%;
    }

    .cinematic-ui .nav__list {
        width: 100%;
        justify-content: space-between;
        gap: 0.8rem;
    }

    .cinematic-ui .nav__link {
        font-size: 0.75rem;
    }

    .cinematic-ui .nav__link--cta,
    .cinematic-ui[data-theme='dark'] .nav__link--cta {
        padding: 0.58rem 1rem;
    }

}

/* Tablet */
@media (max-width: 1050px) {
    .cinematic-ui .hero__content {
        padding-right: 52vw;
    }

    .cinematic-ui .hero__title {
        font-size: clamp(3.2rem, 6.4vw, 4.9rem);
    }

    .cinematic-ui .hero__unit-wrap {
        top: clamp(.75rem, 1.5vw, 1.1rem);
        width: 36vw;
    }

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

    .cinematic-ui .why-us__grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .cinematic-ui .why-us__card:nth-child(4),
    .cinematic-ui .why-us__card:nth-child(5) {
        grid-column: auto;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .cinematic-ui .header {
        top: 0.65rem;
        width: calc(100% - 1rem);
        border-radius: 1.4rem;
    }

    .cinematic-ui .nav {
        height: 3.9rem;
        padding-inline: 0.85rem;
    }

    .cinematic-ui .nav__logo {
        font-size: 0.78rem;
    }

    .cinematic-ui .logo__icon {
        width: 1.8rem;
        height: 1.8rem;
    }

    .cinematic-ui .nav__toggle {
        color: #eaf8fa;
    }

    .cinematic-ui .nav__toggle span {
        background: rgba(235, 248, 251, 0.8);
    }

    .cinematic-ui .nav__menu,
    .cinematic-ui[data-theme='dark'] .nav__menu {
        top: 0;
        height: 100dvh;
        padding: 6.5rem 2rem;
        border-left: 1px solid rgba(189, 231, 241, 0.1);
        background: rgba(3, 8, 14, 0.97);
        backdrop-filter: blur(25px);
    }

    .cinematic-ui .nav__list {
        gap: 1.9rem;
    }

    .cinematic-ui .nav__link {
        font-size: 1.1rem;
    }

    .cinematic-ui .nav__link--cta {
        padding: 0.8rem 1.3rem;
    }

    .cinematic-ui .nav__close {
        color: #e8f7fa;
    }

    .cinematic-ui .hero {
        min-height: 920px;
        align-items: flex-end;
        padding: 26rem 0 3rem;
    }

    .cinematic-ui .hero__gradient {
        background:
            linear-gradient(180deg, rgba(3, 9, 16, 0.04) 0%, rgba(3, 10, 18, 0.13) 36%, rgba(3, 10, 18, 0.9) 61%, #030a12 100%),
            radial-gradient(ellipse 110% 58% at 75% 20%, rgba(35, 148, 194, 0.26), transparent 67%),
            #081725;
    }

    .cinematic-ui .hero__content {
        padding-right: 1.25rem;
        transform: translateY(-5.5rem);
    }

    .cinematic-ui .hero__unit-wrap {
        top: 0.5rem;
        width: min(74%, 405px);
    }

    .cinematic-ui .hero__floor {
        right: -35%;
        bottom: 42%;
        width: 140%;
        opacity: 0.4;
    }

    .cinematic-ui .hero__title {
        max-width: 9.5em;
        font-size: clamp(3.05rem, 13.5vw, 4.6rem);
        line-height: 0.98;
    }

    .cinematic-ui .hero__description {
        font-size: 0.94rem;
        line-height: 1.7;
    }

    .cinematic-ui .hero__buttons {
        margin-bottom: 2.5rem;
    }

    .cinematic-ui .hero__stats {
        flex-direction: row;
        align-items: center;
        width: fit-content;
    }

    .cinematic-ui .stat__divider {
        display: none;
    }

    .cinematic-ui .stat {
        min-width: 6.3rem;
    }

    .cinematic-ui main > section:not(.hero) {
        padding: 6rem 0;
    }

    .cinematic-ui .section__title {
        font-size: clamp(2.45rem, 12vw, 4rem);
    }

    .cinematic-ui .services__grid,
    .cinematic-ui .why-us__grid,
    .cinematic-ui .contact__details {
        grid-template-columns: 1fr;
    }

    .cinematic-ui .brands__grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .cinematic-ui .brand-card {
        min-width: 65vw;
        max-width: 65vw;
        flex: 0 0 65vw;
    }

    .cinematic-ui .service-card {
        min-height: 250px;
    }

    .cinematic-ui .about__wrapper {
        grid-template-columns: 1fr;
    }

    .cinematic-ui .about__image {
        max-width: none;
    }

    .cinematic-ui .about__profile-img {
        max-height: 650px;
    }

    .cinematic-ui .about__features {
        grid-template-columns: 1fr;
    }

    .cinematic-ui .why-us__card {
        min-height: 230px;
    }

    .cinematic-ui .contact__details > .contact__item {
        grid-column: auto;
    }

    .cinematic-ui .footer__content {
        gap: 2.8rem;
    }

    .style-switcher {
        right: 0.7rem;
        bottom: 0.7rem;
    }
}

@media (max-width: 430px) {
    .cinematic-ui .hero {
        min-height: 880px;
        padding-top: 23rem;
    }

    .cinematic-ui .hero__buttons {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cinematic-ui .hero__buttons .btn {
        justify-content: center;
    }

    .cinematic-ui .hero__stats {
        gap: 1rem;
        padding-inline: 0;
    }

    .cinematic-ui .stat {
        min-width: 5.5rem;
    }
}

/* Unified minimalist navigation */
.cinematic-ui .header,
.cinematic-ui .header.scrolled {
    left: max(1rem, calc((100vw - 1280px) / 2));
    width: min(calc(100% - 2rem), 10.75rem);
    transform: none;
}

.cinematic-ui .header {
    top: 1rem;
}

.cinematic-ui .header.scrolled {
    top: 0.65rem;
}

.cinematic-ui .nav {
    height: 3.65rem;
    justify-content: space-between;
    padding-inline: 0.48rem;
}

.cinematic-ui .nav__logo {
    display: none;
}

.cinematic-ui .nav__toggle {
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    order: initial;
    place-content: center;
    gap: 0.27rem;
    color: #d9f6fb;
    border: 1px solid rgba(194, 238, 248, 0.14);
    border-radius: 50%;
    background: rgba(164, 224, 239, 0.035);
    transition: border-color 220ms ease, background 220ms ease;
}

.cinematic-ui .nav__toggle:hover {
    border-color: rgba(194, 238, 248, 0.3);
    background: rgba(164, 224, 239, 0.08);
}

.cinematic-ui .nav__toggle span {
    display: block;
    width: 1.2rem;
    height: 1px;
    margin: 0;
    background: currentColor;
    transition: transform 220ms ease, opacity 180ms ease;
}

.cinematic-ui .nav__toggle[aria-expanded='true'] span:nth-child(1) {
    transform: translateY(0.3375rem) rotate(45deg);
}

.cinematic-ui .nav__toggle[aria-expanded='true'] span:nth-child(2) {
    opacity: 0;
}

.cinematic-ui .nav__toggle[aria-expanded='true'] span:nth-child(3) {
    transform: translateY(-0.3375rem) rotate(-45deg);
}

.cinematic-ui .nav__quick-contact {
    display: inline-flex;
    min-height: 2.55rem;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    color: #061018;
    font-size: 0.76rem;
    font-weight: 550;
    letter-spacing: 0.025em;
    border-radius: 999px;
    background: rgba(235, 250, 253, 0.95);
    box-shadow: 0 8px 28px rgba(171, 235, 250, 0.12);
    transition: background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.cinematic-ui .nav__quick-contact:hover {
    color: #00080d;
    background: #b9f1ff;
    box-shadow: 0 10px 32px rgba(124, 224, 249, 0.22);
    transform: translateY(-1px);
}

.cinematic-ui .nav__menu,
.cinematic-ui[data-theme='dark'] .nav__menu {
    position: absolute;
    top: calc(100% + 0.65rem);
    right: auto;
    left: 0;
    width: min(17rem, calc(100vw - 2rem));
    max-width: none;
    height: auto;
    padding: 0.72rem;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    border: 1px solid rgba(204, 238, 246, 0.13);
    border-radius: 1.35rem;
    background: rgba(3, 10, 17, 0.94);
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(24px) saturate(125%);
    transform: translateY(-0.45rem) scale(0.985);
    transform-origin: top left;
    transition: visibility 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.cinematic-ui .nav__menu.show-menu,
.cinematic-ui[data-theme='dark'] .nav__menu.show-menu {
    right: auto;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.cinematic-ui .nav__list {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.18rem;
}

.cinematic-ui .nav__menu .nav__link {
    display: flex;
    padding: 0.78rem 0.9rem;
    color: rgba(226, 242, 246, 0.72);
    font-size: 0.84rem;
    border-radius: 0.9rem;
}

.cinematic-ui .nav__menu .nav__link:hover,
.cinematic-ui .nav__menu .nav__link.active {
    color: #f7fdff;
    background: rgba(172, 231, 245, 0.08);
}

.cinematic-ui .nav__menu .nav__link::after,
.cinematic-ui .nav__close {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .cinematic-ui .hero__unit-wrap {
        animation: none;
    }

    .cinematic-ui .hero__badge,
    .cinematic-ui .hero__title,
    .cinematic-ui .hero__description,
    .cinematic-ui .hero__buttons,
    .cinematic-ui .hero__stats {
        animation-duration: 1ms;
    }
}

/* Cinematic theme control */
.cinematic-ui .header,
.cinematic-ui .header.scrolled {
    width: min(calc(100% - 2rem), 6.4rem);
}

.cinematic-ui .nav {
    justify-content: flex-start;
    gap: 0.3rem;
}

.cinematic-ui .nav__toggle,
.cinematic-ui .theme-toggle {
    flex: 0 0 2.55rem;
    order: initial;
}

.cinematic-ui .nav__quick-contact {
    order: initial;
}

.cinematic-ui .theme-toggle {
    display: grid;
    width: 2.55rem;
    height: 2.55rem;
    margin: 0;
    place-items: center;
    color: #d9f6fb;
    border: 1px solid rgba(194, 238, 248, 0.14);
    background: rgba(164, 224, 239, 0.035);
    box-shadow: none;
    backdrop-filter: none;
    transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.cinematic-ui .theme-toggle:hover {
    color: #f4fdff;
    border-color: rgba(194, 238, 248, 0.3);
    background: rgba(164, 224, 239, 0.08);
    box-shadow: none;
}

.cinematic-ui .theme-toggle__icon {
    width: 1.05rem;
    height: 1.05rem;
}

.cinematic-ui .nav__quick-contact {
    flex: 1 1 auto;
    padding-inline: 0.78rem;
}

/* Light cinematic variant: a bright, frosted atmosphere rather than the legacy palette. */
.cinematic-ui[data-theme='light'] {
    color-scheme: light;
    --color-bg: #edf8fc;
    --color-bg-alt: #e4f3f9;
    --color-primary: #087da9;
    --color-primary-dark: #075d82;
    --color-primary-light: #55c9ea;
    --color-accent: #0aa6d2;
    --color-text: #102d3b;
    --color-text-muted: #587482;
    --color-border: rgba(22, 112, 147, 0.16);
    --color-glass: rgba(255, 255, 255, 0.72);
    --color-glass-border: rgba(255, 255, 255, 0.82);
    --color-card-bg: rgba(248, 253, 255, 0.9);
    --shadow-sm: 0 8px 30px rgba(21, 91, 119, 0.08);
    --shadow-md: 0 20px 65px rgba(20, 91, 120, 0.11);
    --shadow-lg: 0 28px 90px rgba(20, 91, 120, 0.15);
    --shadow-xl: 0 36px 110px rgba(20, 91, 120, 0.19);
    --shadow-glow: 0 0 70px rgba(32, 170, 210, 0.13);
}

.cinematic-ui[data-theme='light'] body {
    color: var(--color-text);
    background:
        radial-gradient(circle at 82% 2%, rgba(64, 183, 221, 0.16), transparent 30rem),
        #edf8fc;
}

.cinematic-ui[data-theme='light'] body::before {
    opacity: 0.018;
    background-image:
        repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(13, 72, 95, 0.32) 3px),
        repeating-linear-gradient(90deg, transparent 0, transparent 4px, rgba(13, 72, 95, 0.14) 5px);
}

.cinematic-ui[data-theme='light'] ::selection {
    color: #062331;
    background: #8fe4f7;
}

.cinematic-ui[data-theme='light'] .header,
.cinematic-ui[data-theme='light'] .header.scrolled {
    border-color: rgba(21, 102, 132, 0.15);
    background: rgba(244, 252, 255, 0.72);
    box-shadow: 0 16px 55px rgba(25, 89, 112, 0.13);
    backdrop-filter: blur(20px) saturate(130%);
}

.cinematic-ui[data-theme='light'] .header.scrolled {
    background: rgba(247, 253, 255, 0.92);
    box-shadow: 0 16px 58px rgba(25, 89, 112, 0.17);
}

.cinematic-ui[data-theme='light'] .nav__toggle,
.cinematic-ui[data-theme='light'] .theme-toggle {
    color: #174e63;
    border-color: rgba(20, 105, 139, 0.18);
    background: rgba(255, 255, 255, 0.48);
}

.cinematic-ui[data-theme='light'] .nav__toggle:hover,
.cinematic-ui[data-theme='light'] .theme-toggle:hover {
    color: #063a50;
    border-color: rgba(13, 117, 157, 0.34);
    background: rgba(255, 255, 255, 0.88);
}

.cinematic-ui[data-theme='light'] .nav__quick-contact {
    color: #f6fdff;
    background: #0c6688;
    box-shadow: 0 9px 25px rgba(7, 100, 137, 0.2);
}

.cinematic-ui[data-theme='light'] .nav__quick-contact:hover {
    color: #fff;
    background: #087da9;
    box-shadow: 0 11px 31px rgba(7, 100, 137, 0.26);
}

.cinematic-ui[data-theme='light'] .nav__menu {
    border-color: rgba(22, 104, 135, 0.14);
    background: rgba(247, 253, 255, 0.96);
    box-shadow: 0 24px 70px rgba(22, 77, 99, 0.18);
}

.cinematic-ui[data-theme='light'] .nav__menu .nav__link {
    color: rgba(24, 65, 82, 0.72);
}

.cinematic-ui[data-theme='light'] .nav__menu .nav__link:hover,
.cinematic-ui[data-theme='light'] .nav__menu .nav__link.active {
    color: #0b4056;
    background: rgba(30, 153, 194, 0.09);
}

.cinematic-ui[data-theme='light'] .hero {
    background: #e7f5fa;
}

.cinematic-ui[data-theme='light'] .hero__gradient {
    background:
        linear-gradient(90deg, rgba(242, 251, 254, 0.96) 0%, rgba(235, 248, 252, 0.77) 42%, rgba(222, 243, 250, 0.2) 76%),
        radial-gradient(ellipse 72% 82% at 84% 30%, rgba(55, 181, 222, 0.23), transparent 68%),
        radial-gradient(ellipse 55% 48% at 25% 16%, rgba(255, 255, 255, 0.92), transparent 72%),
        linear-gradient(180deg, #f8fdff 0%, #dff3f9 64%, #eaf7fb 100%);
}

.cinematic-ui[data-theme='light'] .hero__airflow {
    opacity: 0.76;
    filter: saturate(132%) contrast(1.09) brightness(1.02);
    mix-blend-mode: multiply;
}

.cinematic-ui[data-theme='light'] .hero__unit {
    opacity: 1;
    filter: brightness(1.025) contrast(1.04) saturate(0.9) drop-shadow(0 30px 45px rgba(25, 87, 108, 0.26));
}

.cinematic-ui[data-theme='light'] .hero__unit-glow {
    opacity: 0.55;
    mix-blend-mode: multiply;
}

.cinematic-ui[data-theme='light'] .hero__floor {
    opacity: 0.32;
    filter: saturate(0.9);
}

.cinematic-ui[data-theme='light'] .hero__floor::before {
    background: linear-gradient(90deg, transparent, rgba(18, 136, 176, 0.35), transparent);
}

.cinematic-ui[data-theme='light'] .hero__badge {
    color: rgba(31, 78, 96, 0.64);
}

.cinematic-ui[data-theme='light'] .hero__badge span:first-child {
    color: #087da9;
    filter: drop-shadow(0 0 10px rgba(31, 168, 207, 0.28));
}

.cinematic-ui[data-theme='light'] .hero__title {
    color: #102d3b;
    text-shadow: 0 12px 38px rgba(68, 131, 151, 0.08);
}

.cinematic-ui[data-theme='light'] .hero__title .text-gradient {
    color: #0c7197;
    background: linear-gradient(112deg, #174e63 5%, #0789b6 48%, #155e78 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cinematic-ui[data-theme='light'] .hero__description {
    color: rgba(39, 77, 93, 0.72);
}

.cinematic-ui[data-theme='light'] .btn--primary {
    color: #f8fdff;
    background: #0b6d91;
    box-shadow: 0 12px 38px rgba(6, 111, 151, 0.2);
}

.cinematic-ui[data-theme='light'] .btn--primary:hover {
    color: #fff;
    background: #0788b6;
    box-shadow: 0 16px 48px rgba(6, 111, 151, 0.28);
}

.cinematic-ui[data-theme='light'] .btn--secondary {
    color: #174e63;
    background: rgba(255, 255, 255, 0.48);
    border-color: rgba(16, 103, 136, 0.2);
}

.cinematic-ui[data-theme='light'] .btn--secondary:hover {
    color: #092f40;
    background: rgba(255, 255, 255, 0.84);
    border-color: rgba(16, 103, 136, 0.36);
}

.cinematic-ui[data-theme='light'] .hero__stats {
    border-top-color: rgba(26, 107, 138, 0.16);
}

.cinematic-ui[data-theme='light'] .stat__number {
    color: #123e50;
}

.cinematic-ui[data-theme='light'] .stat__label {
    color: rgba(35, 78, 95, 0.56);
}

.cinematic-ui[data-theme='light'] .stat__divider {
    background: rgba(26, 107, 138, 0.15);
}

.cinematic-ui[data-theme='light'] main > section:not(.hero) {
    background: #edf8fc;
    border-top-color: rgba(21, 103, 136, 0.11);
}

.cinematic-ui[data-theme='light'] main > section:not(.hero)::before {
    background: radial-gradient(ellipse 55% 45% at 85% 10%, rgba(51, 169, 207, 0.13), transparent 70%);
}

.cinematic-ui[data-theme='light'] main > section:nth-of-type(odd):not(.hero),
.cinematic-ui[data-theme='light'] .faq {
    background: #e5f3f8 !important;
}

.cinematic-ui[data-theme='light'] .section__subtitle {
    color: #075d82;
}

.cinematic-ui[data-theme='light'] .section__title {
    color: #123647;
}

.cinematic-ui[data-theme='light'] .section__desc,
.cinematic-ui[data-theme='light'] .section__desc[style] {
    color: rgba(43, 80, 95, 0.7) !important;
}

.cinematic-ui[data-theme='light'] .services__grid {
    border-color: rgba(20, 103, 135, 0.11);
    background: rgba(20, 103, 135, 0.11);
    box-shadow: 0 25px 75px rgba(19, 84, 108, 0.1);
}

.cinematic-ui[data-theme='light'] .service-card {
    background:
        radial-gradient(circle at 90% 5%, rgba(66, 185, 222, 0.12), transparent 34%),
        rgba(249, 253, 255, 0.92);
}

.cinematic-ui[data-theme='light'] .service-card::before {
    background: radial-gradient(circle at 30% 0%, rgba(38, 170, 210, 0.13), transparent 55%);
}

.cinematic-ui[data-theme='light'] .service-card:hover {
    background: #fafdff;
    box-shadow: inset 0 0 0 1px rgba(17, 125, 164, 0.16), 0 24px 58px rgba(21, 86, 111, 0.14);
}

.cinematic-ui[data-theme='light'] .service-card__icon {
    color: #087da9;
    background: rgba(46, 174, 215, 0.11);
    border-color: rgba(24, 132, 171, 0.2);
}

.cinematic-ui[data-theme='light'] .service-card h3,
.cinematic-ui[data-theme='light'] .why-us__card h3 {
    color: #123647;
}

.cinematic-ui[data-theme='light'] .service-card p,
.cinematic-ui[data-theme='light'] .why-us__card p {
    color: rgba(43, 80, 95, 0.67);
}

.cinematic-ui[data-theme='light'] .brand-card,
.cinematic-ui[data-theme='light'] .why-us__card,
.cinematic-ui[data-theme='light'] .contact__item,
.cinematic-ui[data-theme='light'] .copy-btn {
    border-color: rgba(21, 105, 138, 0.15);
    background: rgba(250, 254, 255, 0.76);
    box-shadow: 0 18px 55px rgba(19, 84, 108, 0.08);
}

.cinematic-ui[data-theme='light'] .brand-card:hover,
.cinematic-ui[data-theme='light'] .why-us__card:hover,
.cinematic-ui[data-theme='light'] .contact__item:hover,
.cinematic-ui[data-theme='light'] .copy-btn:hover {
    color: #075d82;
    border-color: rgba(14, 126, 168, 0.28);
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 25px 65px rgba(19, 84, 108, 0.13);
}

.cinematic-ui[data-theme='light'] .brand-card__cta {
    color: rgba(38, 79, 95, 0.58);
}

.cinematic-ui[data-theme='light'] .about__profile-img {
    box-shadow: 0 30px 90px rgba(22, 91, 116, 0.2);
}

.cinematic-ui[data-theme='light'] .about__name,
.cinematic-ui[data-theme='light'] .about__content p,
.cinematic-ui[data-theme='light'] .contact__info > p {
    color: #466b79;
}

.cinematic-ui[data-theme='light'] .about__features,
.cinematic-ui[data-theme='light'] .feature {
    border-color: rgba(23, 106, 138, 0.13);
}

.cinematic-ui[data-theme='light'] .feature {
    color: rgba(27, 70, 87, 0.76);
}

.cinematic-ui[data-theme='light'] .why-us__icon,
.cinematic-ui[data-theme='light'] .contact__icon {
    color: #087da9;
}

.cinematic-ui[data-theme='light'] .faq__grid[style],
.cinematic-ui[data-theme='light'] .faq details[style] {
    border-color: rgba(23, 106, 138, 0.14);
}

.cinematic-ui[data-theme='light'] .faq details[style] {
    color: #123647;
}

.cinematic-ui[data-theme='light'] .faq summary {
    color: rgba(18, 54, 71, 0.9);
}

.cinematic-ui[data-theme='light'] .faq summary span {
    color: #087da9 !important;
    border-color: rgba(20, 126, 166, 0.2);
}

.cinematic-ui[data-theme='light'] .faq details[open] summary span {
    background: rgba(22, 155, 196, 0.09);
}

.cinematic-ui[data-theme='light'] .faq details p[style] {
    color: #466b79 !important;
}

.cinematic-ui[data-theme='light'] .contact__item,
.cinematic-ui[data-theme='light'] .copy-btn {
    color: #3d6271;
}

.cinematic-ui[data-theme='light'] .contact__item div span {
    color: #3d6271;
}

.cinematic-ui[data-theme='light'] .contact__item div strong {
    color: #153f50;
}

.cinematic-ui[data-theme='light'] .copy-btn {
    border-color: rgba(7, 93, 130, 0.65);
}

.cinematic-ui[data-theme='light'] .contact__item:hover {
    border-color: rgba(7, 93, 130, 0.48);
}

.cinematic-ui[data-theme='light'] .copy-btn:hover {
    border-color: #087da9;
}

.cinematic-ui[data-theme='light'] .contact__item:focus-visible,
.cinematic-ui[data-theme='light'] .copy-btn:focus-visible {
    outline: 2px solid #075d82;
    outline-offset: 3px;
}

.cinematic-ui[data-theme='light'] .footer {
    background: #dceff6;
    border-top-color: rgba(22, 104, 136, 0.12);
}

.cinematic-ui[data-theme='light'] .footer__logo,
.cinematic-ui[data-theme='light'] .footer h4 {
    color: #123647;
}

.cinematic-ui[data-theme='light'] .footer__brand p,
.cinematic-ui[data-theme='light'] .footer__links a,
.cinematic-ui[data-theme='light'] .footer__contact p {
    color: #3d6271;
}

.cinematic-ui[data-theme='light'] .footer__links a:hover,
.cinematic-ui[data-theme='light'] .footer__links a:focus-visible {
    color: #075d82;
}

.cinematic-ui[data-theme='light'] .footer__social a {
    color: #075d82;
    border-color: rgba(7, 93, 130, 0.7);
    background: rgba(255, 255, 255, 0.42);
}

.cinematic-ui[data-theme='light'] .footer__social a:hover,
.cinematic-ui[data-theme='light'] .footer__social a:focus-visible {
    color: #fff;
    border-color: #075d82;
    background: #075d82;
    box-shadow: 0 10px 28px rgba(7, 93, 130, 0.2);
}

.cinematic-ui[data-theme='light'] .footer__bottom {
    border-top-color: rgba(18, 54, 71, 0.18);
}

.cinematic-ui[data-theme='light'] .footer__bottom p {
    color: #3d6271;
}

.cinematic-ui[data-theme='light'] .style-switcher {
    color: #16485c;
    border-color: rgba(7, 93, 130, 0.62);
    background: rgba(247, 253, 255, 0.78);
    box-shadow: 0 12px 38px rgba(22, 77, 99, 0.14);
    opacity: 1;
}

.cinematic-ui[data-theme='light'] .style-switcher:hover {
    color: #0b4056;
    border-color: #087da9;
}

/* Direction-aware compact navigation */
.cinematic-ui .header,
.cinematic-ui .header.scrolled {
    transition:
        top 350ms ease,
        width 520ms cubic-bezier(.22, 1, .36, 1),
        background 350ms ease,
        border-color 350ms ease,
        border-radius 520ms cubic-bezier(.22, 1, .36, 1),
        box-shadow 350ms ease;
    will-change: width;
}

.cinematic-ui .nav {
    transition: gap 420ms cubic-bezier(.22, 1, .36, 1);
}

.cinematic-ui .nav__quick-contact {
    flex-basis: 4.35rem;
    min-width: 4.35rem;
    max-width: 5.2rem;
    overflow: hidden;
    opacity: 1;
    white-space: nowrap;
    transform-origin: left center;
    transition:
        color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease,
        opacity 180ms ease,
        transform 420ms cubic-bezier(.22, 1, .36, 1),
        flex-basis 500ms cubic-bezier(.22, 1, .36, 1),
        min-width 500ms cubic-bezier(.22, 1, .36, 1),
        max-width 500ms cubic-bezier(.22, 1, .36, 1),
        padding 420ms cubic-bezier(.22, 1, .36, 1);
}

.cinematic-ui .theme-toggle {
    min-width: 2.55rem;
    max-width: 2.55rem;
    overflow: hidden;
    opacity: 1;
    transform-origin: left center;
    transition:
        color 220ms ease,
        border-color 220ms ease,
        background 220ms ease,
        opacity 160ms ease,
        transform 420ms cubic-bezier(.22, 1, .36, 1),
        flex-basis 500ms cubic-bezier(.22, 1, .36, 1),
        min-width 500ms cubic-bezier(.22, 1, .36, 1),
        max-width 500ms cubic-bezier(.22, 1, .36, 1),
        width 500ms cubic-bezier(.22, 1, .36, 1),
        border-width 300ms ease;
}

.cinematic-ui .header.header--compact {
    width: 3.65rem;
    border-radius: 50%;
}

.cinematic-ui .header.header--compact .nav {
    gap: 0;
}

.cinematic-ui .header.header--compact .nav__quick-contact,
.cinematic-ui .header.header--compact .theme-toggle {
    width: 0;
    min-width: 0;
    max-width: 0;
    flex-basis: 0;
    padding-inline: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-0.55rem) scale(0.74);
}

.cinematic-ui .header.header--compact .theme-toggle {
    border-width: 0;
}

.cinematic-ui[data-theme='light'] .header.header--compact {
    background: rgba(247, 253, 255, 0.94);
    box-shadow: 0 14px 42px rgba(25, 89, 112, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .cinematic-ui .header,
    .cinematic-ui .header.scrolled,
    .cinematic-ui .nav,
    .cinematic-ui .nav__quick-contact,
    .cinematic-ui .theme-toggle {
        transition-duration: 1ms !important;
    }
}

@media (max-width: 768px) {
    .cinematic-ui .footer__bottom {
        padding-bottom: 3.25rem;
    }
}

/* Tiny phones: keep the first screen focused on the scene and primary message. */
@media (max-width: 390px) {
    .cinematic-ui .header,
    .cinematic-ui .header.scrolled,
    .cinematic-ui .header.header--compact {
        width: 3.2rem;
        border-radius: 50%;
    }

    .cinematic-ui .nav,
    .cinematic-ui .header.header--compact .nav {
        height: 3.2rem;
        gap: 0;
        justify-content: center;
        padding-inline: 0;
    }

    .cinematic-ui .header .nav__toggle,
    .cinematic-ui .header .nav__toggle:hover {
        width: 2.25rem;
        min-width: 2.25rem;
        max-width: 2.25rem;
        height: 2.25rem;
        flex-basis: 2.25rem;
        border: 0;
        background: transparent;
        box-shadow: none;
    }

    .cinematic-ui .nav__quick-contact {
        display: none;
    }

    .cinematic-ui .header .theme-toggle,
    .cinematic-ui .header.header--compact .theme-toggle {
        display: none;
    }

    .cinematic-ui .nav__menu.show-menu .nav__list > li:first-child .nav__link {
        padding-right: 3.8rem;
    }

    .cinematic-ui .header .nav__toggle[aria-expanded='true'] + .theme-toggle {
        position: absolute;
        top: calc(100% + 1.37rem);
        right: auto;
        left: calc(min(17rem, calc(100vw - 2rem)) - 3.27rem);
        z-index: 1002;
        display: grid;
        width: 2.55rem;
        min-width: 2.55rem;
        max-width: 2.55rem;
        height: 2.55rem;
        flex-basis: 2.55rem;
        padding: 0;
        opacity: 1;
        pointer-events: auto;
        border-width: 1px;
        transform: none;
    }

    .cinematic-ui .nav__contact-item {
        display: list-item;
    }

    .cinematic-ui .hero__content {
        transform: translateY(-7rem);
    }
}