/*
Theme Name: Blocksy Child
Description: First Tech Security Inc - custom styles
/* =========================
   GLOBAL FONT
========================= */
:root {
    --fts-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --fts-accent: #37B9FF;
    --fts-header-top: #162735;
    --fts-header-sticky: #1A364B;

    --fts-footer-bg-top: #0b111c;
    --fts-footer-bg-bottom: #070a10;

    --fts-white-92: rgba(255, 255, 255, .92);
    --fts-white-82: rgba(255, 255, 255, .82);
    --fts-white-72: rgba(255, 255, 255, .72);
    --fts-white-62: rgba(255, 255, 255, .62);
    --fts-border: rgba(255, 255, 255, .10);
    --fts-border-soft: rgba(255, 255, 255, .08);
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
textarea,
select {
    font-family: var(--fts-font) !important;
}

img {
    max-width: 100%;
    height: auto;
}

html {
    scroll-behavior: smooth;
}


/* =========================================================
   HEADER (Blocksy) — TOP vs STICKY + INSTANT SWITCH
========================================================= */

/* TOP header row (default) */
#header [data-row="middle"],
#header [data-row="middle"]>div {
    background-color: var(--fts-header-top) !important;
}

/* STICKY header row */
#header [data-sticky*="yes"] [data-row="middle"],
#header [data-sticky*="yes"] [data-row="middle"]>div {
    background-color: var(--fts-header-sticky) !important;
}

/* No smooth transitions on header background */
#header,
#header [data-row],
#header [data-row="middle"],
#header [data-sticky*="yes"] [data-row="middle"],
#header [data-row]>div,
#header [data-row="middle"]>div {
    transition: none !important;
}

/* Header text always white */
#header,
#header a,
#header .ct-menu-link,
#header .menu-link {
    color: #ffffff !important;
}

/* Active menu item */
#header .menu-item.current-menu-item>a,
#header .menu-item.current_page_item>a,
#header .menu-item.current-menu-ancestor>a,
#header .menu-item.current-page-ancestor>a,
#header .ct-menu-link[aria-current="page"] {
    color: var(--fts-accent) !important;
    font-weight: 600;
}

/* underline for active item */
#header .menu-item.current-menu-item>a::after,
#header .menu-item.current_page_item>a::after,
#header .ct-menu-link[aria-current="page"]::after {
    content: "";
    display: block;
    width: 100%;
    height: 2px;
    margin-top: 6px;
    background: var(--fts-accent);
    border-radius: 2px;
}

/* Mobile header button */
@media (max-width: 768px) {

    #header .ct-button,
    #header a.ct-button,
    #header .wp-block-button__link {
        padding: 7px 11px !important;
        font-size: 11.5px !important;
        border-radius: 11px !important;
        min-height: 32px !important;
        line-height: 1 !important;
    }
}

/* Back to top */
.ct-back-to-top {
    width: 40px;
    height: 40px;
    border-radius: 14px !important;
    background: rgba(20, 32, 55, .72) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
}

/* Light theme content only */
html[data-theme="light"] .site-main {
    color: rgba(0, 0, 0, 0.88) !important;
}

html[data-theme="light"] .site-main h2,
html[data-theme="light"] .site-main h3,
html[data-theme="light"] .site-main p {
    color: #0b111c;
}


/* =========================================================
   REVEAL TITLE — SLIDE + SOFT PULSE
========================================================= */

.reveal-title {
    opacity: 0;
    transform: translateX(-80px);
    will-change: transform, opacity;
}

.reveal-title.is-visible {
    opacity: 1;
    transform: translateX(0);
    transition:
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.6s ease-out;
}

.reveal-title__inner {
    display: inline-block;
    will-change: transform;
}

.reveal-title.is-visible .reveal-title__inner {
    animation: revealSoftPulse 0.6s ease-out 0.9s 1 both;
}

@keyframes revealSoftPulse {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.035);
    }

    100% {
        transform: scale(1);
    }
}

/* Different delays for headings */
h1.reveal-title {
    transition-delay: 0s;
}

h1.reveal-title.is-visible .reveal-title__inner {
    animation-delay: 0.8s;
}

h2.reveal-title {
    transition-delay: 0.12s;
}

h2.reveal-title.is-visible .reveal-title__inner {
    animation-delay: 0.95s;
}

h3.reveal-title {
    transition-delay: 0.22s;
}

h3.reveal-title.is-visible .reveal-title__inner {
    animation-delay: 1.1s;
}

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

    .reveal-title__inner {
        animation: none !important;
    }
}

/* =========================================================
   FOOTER — DESKTOP (4 columns) PREMIUM
========================================================= */

#footer,
.ct-footer,
.ct-footer [data-row],
.ct-footer [data-row]>div {
    background: linear-gradient(180deg, var(--fts-footer-bg-top) 0%, var(--fts-footer-bg-bottom) 100%) !important;
}

.ct-footer {
    position: relative;
    border-top: 1px solid var(--fts-border-soft);
}

/* subtle top glow */
.ct-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(55, 185, 255, .35), transparent);
}

/* spacing */
.ct-footer .ct-container {
    padding-top: 58px;
    padding-bottom: 22px;
}

/* force grid for middle row columns */
.ct-footer [data-row="middle"] .ct-container {
    column-gap: 40px !important;
    row-gap: 26px !important;
}

/* Titles */
.ct-footer .widget-title,
.ft-footer-title {
    color: rgba(255, 255, 255, .95) !important;
    font-size: 14px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0 0 14px 0;
}

/* Base text */
.ct-footer,
.ct-footer p,
.ct-footer li,
.ct-footer span {
    color: var(--fts-white-72) !important;
    line-height: 1.65;
    font-size: 14px;
}

/* Links hover smooth */
.ct-footer a {
    color: var(--fts-white-82) !important;
    text-decoration: none !important;
    transition: color .22s ease, transform .22s ease, opacity .22s ease;
}

.ct-footer a:hover {
    color: var(--fts-accent) !important;
    opacity: .95;
    transform: translateX(2px);
}

/* Lists */
.ct-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ct-footer li {
    margin: 8px 0;
}

/* Contact lines */
.ft-contact-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 10px 0;
}

.ft-contact-line strong {
    color: var(--fts-white-92) !important;
    font-weight: 600;
}

/* Working hours (ONE LINE / aligned) */
.ft-hours-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ft-hours-list li {
    display: flex;
    justify-content: flex-start;
    /* <- important */
    align-items: center;
    gap: 14px;
    margin: 10px 0;
}

.ft-hours-list .day {
    min-width: 92px;
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
    white-space: nowrap;
}

.ft-hours-list .time {
    color: rgba(255, 255, 255, .92);
    white-space: nowrap;
}

.ft-hours-list .time.closed {
    opacity: .85;
}

/* Bottom row */
.ct-footer [data-row="bottom"] {
    border-top: 1px solid var(--fts-border);
}

.ct-footer [data-row="bottom"] p,
.ct-footer [data-row="bottom"] span {
    font-size: 13px !important;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, .55) !important;
}

/* =========================================================
   FOOTER — MOBILE ACCORDION (CLEAN, NO DEFAULT OPEN)
   Uses structure: .ft-acc > button.ft-acc__btn + .ft-acc__panel
========================================================= */

@media (max-width: 768px) {

    /* single column on mobile */
    .ct-footer [data-row="middle"] .ct-container {
        grid-template-columns: 1fr !important;
        row-gap: 0 !important;
    }

    .ct-footer .ct-container {
        padding-top: 22px;
        padding-bottom: 14px;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* each section becomes accordion item */
    .ft-acc {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        padding: 12px 0;
    }

    /* accordion button row */
    .ft-acc__btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;

        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;

        color: var(--fts-white-92);
        text-transform: uppercase;
        letter-spacing: 0.12em;
        font-weight: 700;
        font-size: 12.5px;
    }

    /* arrow button */
    .ft-acc__icon {
        width: 34px;
        height: 34px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, .12);
        background: rgba(255, 255, 255, .04);
        display: grid;
        place-items: center;
        transition: transform .22s ease;
        flex: 0 0 auto;
    }

    .ft-acc.is-open .ft-acc__icon {
        transform: rotate(180deg);
    }

    /* panel hidden by default */
    .ft-acc__panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height .28s ease;
    }

    .ft-acc__inner {
        padding-top: 10px;
        padding-bottom: 6px;
    }

    /* tighter lists on mobile */
    .ct-footer li {
        margin: 6px 0;
    }

    .ft-contact-line {
        margin: 8px 0;
    }

    /* mobile hours aligned */
    .ft-hours-list li {
        display: grid;
        grid-template-columns: 92px 1fr;
        gap: 10px;
        margin: 6px 0;
    }

    /* bottom copyright */
    .ct-footer [data-row="bottom"] {
        margin-top: 18px;
        padding-top: 12px;
    }

    .ct-footer [data-row="bottom"] p {
        margin: 0 !important;
        text-align: center !important;
        font-size: 12px !important;
        color: var(--fts-white-62) !important;
    }

    .ct-footer .ft-footer-logo {
        margin-bottom: 55px !important;
        padding-top: 20px;
    }

    .ct-footer [data-column] {
        display: block;
    }
}

/* Desktop footer: remove accordion button look */
@media (min-width: 769px) {
    .ft-acc__btn {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
        cursor: default !important;
    }

    .ft-acc__icon {
        display: none !important;
        /* hide arrow on desktop */
    }

    /* Panels always visible on desktop */
    .ft-acc__panel {
        max-height: none !important;
        overflow: visible !important;
        padding: 0 !important;
    }
}


/* Footer logo */
.ft-footer-brand {
    margin: 0 0 18px;
}

.ft-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.ft-footer-logo img {
    width: 170px;
    height: auto;
    display: block;
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
    opacity: .95;
}

.ft-footer-logo img {
    width: 170px;
    height: auto;
    max-width: 100%;
}

.ct-footer .ct-widget:not(:first-child) {
    margin-top: var(--widgets-gap, -20px) !important;
}

/* =========================
   FOOTER (DESKTOP) — CLEAN GRID
========================= */
@media (min-width: 992px) {

    /* Remove weird extra spacing between widgets */
    .ct-footer [data-row="middle"] .widget {
        margin: 0 !important;
    }

    .first-ft-acc {
        display: none;
    }
}

/* If logo is inside first widget area, reduce padding on top */
.ct-footer [data-row="middle"] [class*="widget-area"]:first-child {
    padding-top: 0 !important;
}

/* =========================
   Layout: Container (content width)
   ========================= */

.ft-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* =========================
   Buttons (shared)
   ========================= */



.ft-btn:focus-visible {
    outline: 3px solid rgba(59, 180, 255, .55);
    outline-offset: 3px;
}

.ft-btn--primary {
    background: #3bb4ff;
    border: 1px solid rgba(255, 255, 255, .14);
    color: #061018;
    /* always readable on primary */
    box-shadow: 0 10px 26px rgba(59, 180, 255, .22);
}

.ft-btn--primary:hover {
    transform: translateY(-3px) ! important;
    background: #55c0ff ! important;
    color: #000 !important;
}

.ft-btn--ghost {
    background: rgb(255 255 255 / 37%);
    border: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .92);
}

.ft-btn--ghost:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
}

/* Light theme tweaks (keep readable) */
html[data-theme="light"] .ft-btn--ghost,
body[data-theme="light"] .ft-btn--ghost {
    background: rgb(188, 188, 188);
    border-color: rgba(0, 0, 0, .14);
    color: rgb(255, 255, 255);
}

html[data-theme="light"] .ft-btn--ghost:hover,
body[data-theme="light"] .ft-btn--ghost:hover {
    background: rgba(0, 0, 0, .25) ! important;
    color: rgba(8, 18, 34, 1) ! important;
    transform: translateY(-3px);
    transition: opacity .55s ease, transform .55s ease;
}

/* =========================
   HERO (unified)
   - Full-bleed (100vw) inside Blocksy/Gutenberg content
   - Home hero can be full screen height
   - Light/Dark theme readability
   ========================= */

/* Hero image variable (update the URL if you change the image) */
:root {
    --ft-hero-image: url("/wp-content/uploads/2025/12/hero-home.jpg");
}

/* Admin bar height (WordPress) */
body {
    --fts-adminbar-h: 0px;
}

body.admin-bar {
    --fts-adminbar-h: 32px;
}

@media (max-width: 782px) {
    body.admin-bar {
        --fts-adminbar-h: 46px;
    }
}

/* Full-bleed hero (break out of content container) */
.entry-content>.ft-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Remove default top spacing above custom HTML blocks */
.entry-content>.wp-block-html,
.entry-content>.ft-hero {
    margin-top: 0 !important;
}

/* Base hero wrapper */
.ft-hero {
    position: relative;
    overflow: hidden;
    background: #081321;
    /* fallback */
    border-top: 1px solid rgba(58, 140, 255, 0.35);
    display: flex;
    align-items: center;
}

/* Default (non-fullscreen) height */
.ft-hero:not(.ft-hero--home) {
    min-height: clamp(460px, 58vh, 640px);
}


/* Background image */
.ft-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: var(--ft-hero-image);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 20% 45%;
    transform: scale(1.02);
}

/* Overlay (dark theme default) */
.ft-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(900px 520px at 30% 45%, rgba(0, 0, 0, .18), rgba(0, 0, 0, .58)),
        linear-gradient(180deg,
            rgba(35, 125, 255, 0.46) 0%,
            rgba(35, 125, 255, 0.42) 55%,
            rgba(35, 125, 255, 0.50) 100%);
}

/* Content */
.ft-hero__content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.ft-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(44px, 6vh, 88px) 24px;
    text-align: center;
}

/* Typography (dark theme) */
.ft-hero__kicker {
    margin: 0 0 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 13px;
    color: rgba(255, 255, 255, .86);
}

.ft-hero__title {
    margin: 0 0 16px;
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: 1.05;
    font-weight: 800;
    color: #ffffff;
}

.ft-hero__subtitle {
    margin: 0 auto 26px;
    max-width: 900px;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .88);
}

.ft-hero__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* LIGHT theme (About: black text, slightly more visible image) */
html[data-theme="light"] .ft-hero__overlay,
body[data-theme="light"] .ft-hero__overlay {
    background:
        radial-gradient(900px 520px at 30% 45%, rgba(255, 255, 255, .70), rgba(255, 255, 255, .28)),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.58) 55%,
            rgba(255, 255, 255, 0.76) 100%);
}

html[data-theme="light"] .ft-hero__bg,
body[data-theme="light"] .ft-hero__bg {
    filter: saturate(1.05) contrast(1.02);
    opacity: 0.95;
}

html[data-theme="light"] .ft-hero .ft-hero__kicker,
html[data-theme="light"] .ft-hero .ft-hero__title,
html[data-theme="light"] .ft-hero .ft-hero__subtitle,
body[data-theme="light"] .ft-hero .ft-hero__kicker,
body[data-theme="light"] .ft-hero .ft-hero__title,
body[data-theme="light"] .ft-hero .ft-hero__subtitle {
    color: #0b111c !important;
}

/* Mobile */
@media (max-width: 768px) {
    body.home .ft-hero--home {
        --fts-header-h: var(--header-height, 78px);
    }

    .ft-hero__bg {
        background-position: 40% 20%;
    }

    .ft-hero__inner {
        padding: 44px 18px;
    }

    .ft-hero__subtitle {
        font-size: 16px;
    }

    .ft-btn {
        width: 100%;
        max-width: 320px;
    }
}

/* =========================
   Premium Scroll Reveal (slower + smoother)
   ========================= */
:root {
    --ft-reveal-distance: 72px;
    /* заметнее (как на рефе) */
    --ft-reveal-duration: 1.45s;
    /* медленнее */
    --ft-reveal-ease: cubic-bezier(.16, 1, .3, 1);
    /* very smooth stop */
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {}

/* =========================
   SERVICES (Block #2)
   ========================= */

.ft-services {
    position: relative;
    padding: clamp(44px, 6vw, 84px) 0;
    /* background: #0b1a2a;
     fits dark site */
}

.ft-services__head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 28px;
}

.ft-services__kicker {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(234, 241, 255, .72);
}

.ft-services__title {
    margin: 0 0 10px;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.12;
    color: #fff;
}

.ft-services__subtitle {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(234, 241, 255, .82);
}

/* Grid */
.ft-services__grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

@media (max-width: 1100px) {
    .ft-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .ft-services__grid {
        grid-template-columns: 1fr;
    }
}

/* Card */
.ft-service-card {
    position: relative;
    border-radius: 18px;
    padding: 20px 18px 18px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.ft-service-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .085);
    border-color: rgba(58, 140, 255, .35);
}

.ft-service-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(58, 140, 255, .18);
    border: 1px solid rgba(58, 140, 255, .35);
    color: #bfe2ff;
    margin-bottom: 14px;
}

.ft-service-card__icon svg {
    width: 22px;
    height: 22px;
}

.ft-service-card__title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
}

.ft-service-card__text {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(234, 241, 255, .80);
}

.ft-service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    color: #8fd0ff;
    text-decoration: none;
}

.ft-service-card__link:hover {
    color: #cfeeff;
    text-decoration: underline;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {}


/* =========================
   SERVICES Hover Styles
   Uses data-theme="dark" / "light"
   ========================= */

/* Base smooth transition */
.ft-service-card {
    transition:
        transform 1.0s cubic-bezier(.22, .8, .26, 1),
        background .45s ease,
        border-color .45s ease,
        box-shadow .45s ease,
        color .45s ease;
}


/* Lift effect (like reference) */
.ft-service-card:hover {
    transform: translateY(-10px);
}

/* =========================
   DARK THEME
   data-theme="dark"
   ========================= */
[data-theme="dark"] .ft-services .ft-service-card {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
}

/* Dark hover — blue fill */
[data-theme="dark"] .ft-services .ft-service-card:hover {
    background: linear-gradient(180deg,
            rgb(50 187 255) 0%,
            rgba(20, 90, 205, 0.92) 100%);
    border-color: rgba(140, 200, 255, 0.55);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .35),
        0 18px 50px rgba(35, 125, 255, .28);
}


/* Dark hover text */
[data-theme="dark"] .ft-services .ft-service-card:hover .ft-service-card__title,
[data-theme="dark"] .ft-services .ft-service-card:hover .ft-service-card__text,
[data-theme="dark"] .ft-services .ft-service-card:hover .ft-service-card__link {
    color: #ffffff;
}

/* Dark hover icon */
[data-theme="dark"] .ft-services .ft-service-card:hover .ft-service-card__icon {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .35);
    color: #ffffff;
}

/* Dark hover link underline */
[data-theme="dark"] .ft-services .ft-service-card:hover .ft-service-card__link {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* =========================
   LIGHT THEME
   data-theme="light"
   ========================= */
[data-theme="light"] .ft-services .ft-service-card {
    background: #f6f6f6;
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .08);
    backdrop-filter: none;
}

/* Light default text */
[data-theme="light"] .ft-services .ft-service-card__title {
    color: #111;
}

[data-theme="light"] .ft-services .ft-service-card__text {
    color: rgba(17, 17, 17, .72);
}

[data-theme="light"] .ft-services .ft-service-card__link {
    color: #237dff;
}

/* ✅ Light hover — BLUE (same brand as dark) */
[data-theme="light"] .ft-services .ft-service-card:hover {
    background: linear-gradient(180deg,
            rgb(50 187 255) 0%,
            rgba(20, 90, 205, 0.92) 100%);
    border-color: rgba(120, 180, 255, 0.55);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, .18),
        0 18px 50px rgba(35, 125, 255, .30);
}

/* Light hover text */
[data-theme="light"] .ft-services .ft-service-card:hover .ft-service-card__title,
[data-theme="light"] .ft-services .ft-service-card:hover .ft-service-card__text,
[data-theme="light"] .ft-services .ft-service-card:hover .ft-service-card__link {
    color: #ffffff;
}

/* Light icons */
[data-theme="light"] .ft-services .ft-service-card__icon {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, .06);
    color: #237dff;
}

/* Light hover icon */
[data-theme="light"] .ft-services .ft-service-card:hover .ft-service-card__icon {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .35);
    color: #ffffff;
}




/* =========================
   FIX: Text visibility + faster hover
   ========================= */

/* Faster & snappier hover */
.ft-service-card {
    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        color .22s ease;
}

/* Make ALL text white on hover (dark + light) */
[data-theme="dark"] .ft-services .ft-service-card:hover *,
[data-theme="light"] .ft-services .ft-service-card:hover * {
    color: #ffffff !important;
}

/* Ensure links are fully visible */
[data-theme="dark"] .ft-services .ft-service-card:hover .ft-service-card__link,
[data-theme="light"] .ft-services .ft-service-card:hover .ft-service-card__link {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Icon SVG inherits white properly */
[data-theme="dark"] .ft-services .ft-service-card:hover svg,
[data-theme="light"] .ft-services .ft-service-card:hover svg {
    stroke: currentColor;
}


/* =========================
   STATS (Block #3)
   ========================= */
.ft-stats {
    padding: clamp(56px, 7vw, 60px) 0;
}

.ft-stats__wrap {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
}

@media (max-width: 900px) {
    .ft-stats__wrap {
        grid-template-columns: 1fr;
    }

    .ft-cta__right {
        justify-content: center !important;
    }
}

/* Left content */
.ft-stats__kicker {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: #5da9ff;
}

.ft-stats__title {
    margin: 0 0 14px;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.12;
}

.ft-stats__text {
    max-width: 520px;
    font-size: 16px;
    line-height: 1.6;
}

/* =========================
   Glass stats card
   ========================= */
.ft-stats__card {
    border-radius: 22px;
    padding: 34px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition: transform .3s ease, box-shadow .3s ease;
}

.ft-stats__card:hover {
    transform: translateY(-6px);
}

/* Grid inside card */
.ft-stats__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 18px;
}

.ft-stat {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #fff;
}

.ft-stat__num {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
}

.ft-stat__label {
    font-size: 14px;
    opacity: .85;
}

/* =========================
   THEMES via data-theme
   ========================= */

/* DARK */
[data-theme="dark"] .ft-stats__title,
[data-theme="dark"] .ft-stat__num {
    color: #ffffff;
}

[data-theme="dark"] .ft-stats__text,
[data-theme="dark"] .ft-stat__label {
    color: rgba(234, 241, 255, .8);
}

[data-theme="dark"] .ft-stats__card:hover {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .45);
}

[data-theme="light"] .ft-stats__card:hover {
    background: rgb(208 204 204 / 75%);
    border: 1px solid rgba(0, 0, 0, .06);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .10);
}

/* =========================
   STATS card hover (blue)
   ========================= */

/* Smooth hover */
.ft-stats__card {
    transition:
        transform .6s cubic-bezier(.22, .8, .26, 1),
        background .45s ease,
        border-color .45s ease,
        box-shadow .45s ease;
}

/* Hover lift */
.ft-stats__card:hover {
    transform: translateY(-10px);
}

/* Hover background — BLUE (same brand style) */
[data-theme="dark"] .ft-stats__card {
    background: rgba(58, 140, 255, 0.3);
    border-color: rgba(58, 140, 255, 0.55);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

[data-theme="light"] .ft-stats__card {
    background: rgba(58, 140, 255, 0.7);
    border-color: rgba(58, 140, 255, 0.55);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

/* Make ALL text white on hover */
[data-theme="dark"] .ft-stats__card:hover * {
    color: #ffffff !important;
}


[data-theme="light"] .ft-stats__card:hover * {
    color: rgba(17, 17, 17, .75);
}


/* =========================
   CTA (Full width) - Base styles for CTA #1 and CTA #2
   ========================= */

/* Force full width even inside WP constrained layout */
.ft-cta {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    padding: clamp(44px, 6vw, 84px) 0;
}

/* Background layer */
.ft-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.5;
    /* если сейчас больше */
    filter: blur(0.3px);
}


/* Optional SVG pattern overlay (can be tuned per theme below) */
.ft-cta__bg::before {
    content: "";
    position: absolute;
    inset: -2px;
    background-image: url("/wp-content/uploads/2025/12/bg-gaf.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.22;
}

/* Inner container */
.ft-cta__inner {
    position: relative;
    z-index: 1;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(18px, 3vw, 36px);
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
    gap: 22px;
}

/* Left */
.ft-cta__kicker {
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.ft-cta__title {
    margin: 0 0 14px;
    font-size: clamp(30px, 4vw, 56px);
    line-height: 1.05;
}

.ft-cta__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.65;
    max-width: 58ch;
}

/* Right */
.ft-cta__right {
    display: flex;
    justify-content: flex-end;
}

/* Button */
.ft-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 26px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .01em;
    text-decoration: none;
    transition: transform .6s cubic-bezier(.22, .8, .26, 1), box-shadow .6s ease, filter .6s ease;
    will-change: transform;
}

.ft-cta__btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
}

/* =========================
   THEME: DARK
   ========================= */
[data-theme="dark"] .ft-cta__bg {
    background: radial-gradient(1200px 520px at 30% 45%,
            rgba(35, 125, 255, .30) 0%,
            rgba(10, 22, 36, .92) 52%,
            rgba(8, 16, 26, .96) 100%);
}

[data-theme="dark"] .ft-cta__kicker {
    color: rgba(234, 241, 255, .75);
}

[data-theme="dark"] .ft-cta__title {
    color: #ffffff;
}

[data-theme="dark"] .ft-cta__text {
    color: rgba(234, 241, 255, .86);
}

[data-theme="dark"] .ft-cta__btn {
    color: #ffffff;
    background: linear-gradient(180deg, #62d0ff 0%, #2f86ff 100%);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .35);
}

[data-theme="dark"] .ft-cta__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 50px rgba(58, 168, 255, .28);
    color: #000000;
}

/* SVG visibility in dark */
[data-theme="dark"] .ft-cta__bg::before {
    opacity: 0.22;
}

/* =========================
   THEME: LIGHT (soft blue like you asked)
   ========================= */
[data-theme="light"] .ft-cta__bg {
    background: radial-gradient(1200px 520px at 30% 45%,
            rgba(120, 200, 255, .55) 0%,
            rgba(235, 246, 255, .95) 55%,
            rgba(245, 251, 255, .98) 100%);
}

[data-theme="light"] .ft-cta__kicker {
    color: rgba(10, 30, 60, .72);
}

[data-theme="light"] .ft-cta__title {
    color: #0b1220;
}

[data-theme="light"] .ft-cta__text {
    color: rgba(15, 25, 40, .78);
}

[data-theme="light"] .ft-cta__btn {
    color: #ffffff;
    background: linear-gradient(180deg, #62d0ff 0%, #2f86ff 100%);
    box-shadow: 0 18px 55px rgba(10, 20, 40, .18);
}

/* SVG visibility in light */
[data-theme="light"] .ft-cta__bg::before {
    opacity: 0.16;
}

/* =========================
   CTA #2 Modifier (Different look, does NOT affect CTA #1)
   ========================= */
.ft-cta.ft-cta--secondary .ft-cta__bg {
    /* slightly different mood, still in your palette */
    filter: saturate(1.08) contrast(1.02);
}

[data-theme="dark"] .ft-cta.ft-cta--secondary .ft-cta__bg {
    background: radial-gradient(1200px 520px at 70% 45%,
            rgba(35, 125, 255, .28) 0%,
            rgba(9, 18, 30, .95) 56%,
            rgba(7, 14, 22, .98) 100%);
}

[data-theme="light"] .ft-cta.ft-cta--secondary .ft-cta__bg {
    background: radial-gradient(1200px 520px at 70% 45%,
            rgba(120, 200, 255, .50) 0%,
            rgba(232, 245, 255, .96) 58%,
            rgba(248, 252, 255, .99) 100%);
}

/* Why – stagger cards feel smoother (optional premium) */
.ft-why-mini.ft-reveal {
    will-change: transform, opacity, filter;
}

.ft-why-mini.is-revealed {
    filter: none;
}


/* =========================
   Responsive
   ========================= */
@media (max-width: 900px) {
    .ft-cta__inner {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .ft-cta__right {
        justify-content: flex-start;
    }
}

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


/* ========================================
   HOW IT WORKS – NO BACKGROUND (Block #4)
   ======================================== */

.ft-process--circles {
    background: transparent !important;
    padding-top: clamp(60px, 7vw, 90px);
    padding-bottom: clamp(60px, 7vw, 90px);
}


/* Head */
.ft-process__head {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 34px;
}

.ft-process__kicker {
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.ft-process__title {
    margin: 0 0 10px;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.12;
}

.ft-process__subtitle {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    max-width: 720px;
    margin-inline: auto;
}

/* Grid row */
.ft-process__row {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 26px);
    align-items: start;
}

@media (max-width: 1100px) {
    .ft-process__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .ft-process__row {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

/* Step */
.ft-step {
    text-align: center;
    padding: 8px 10px;
}

.ft-step__circle {
    /* slightly smaller + more premium balance */
    width: clamp(148px, 10.5vw, 186px);
    height: clamp(148px, 10.5vw, 186px);

    border-radius: 999px;
    margin: 0 auto 16px;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;

    transition:
        transform 1.05s cubic-bezier(.22, .8, .26, 1),
        box-shadow 1.05s ease,
        border-color 1.05s ease,
        background 1.05s ease;
}

/* number inside */
.ft-step__num {
    font-weight: 800;
    letter-spacing: .06em;
    font-size: clamp(32px, 2.6vw, 44px);
}


/* Titles / text */
.ft-step__title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.2;
}

.ft-step__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    max-width: 280px;
    margin-inline: auto;
}

/* Hover – lift + color shift */
.ft-step:hover .ft-step__circle {
    transform: translateY(-6px);
}

.ft-step:hover .ft-step__title,
.ft-step:hover .ft-step__text {
    color: #ffffff;
}

/* =========================
   THEME: DARK
   ========================= */
[data-theme="dark"] .ft-process--circles {
    background: radial-gradient(1200px 520px at 50% 0%,
            rgba(58, 140, 255, 0.12) 0%,
            rgba(11, 23, 36, 0.0) 56%),
        linear-gradient(180deg, #0a1622 0%, #08121e 100%);
}

[data-theme="dark"] .ft-process__kicker {
    color: rgba(143, 208, 255, .85);
}

[data-theme="dark"] .ft-process__title {
    color: #ffffff;
}

[data-theme="dark"] .ft-process__subtitle {
    color: rgba(234, 241, 255, .82);
}

[data-theme="dark"] .ft-step__circle {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

[data-theme="dark"] .ft-step__num {
    color: rgba(143, 208, 255, .75);
}

[data-theme="dark"] .ft-step__title {
    color: rgba(255, 255, 255, .92);
}

[data-theme="dark"] .ft-step__text {
    color: rgba(234, 241, 255, .75);
}

[data-theme="dark"] .ft-step:hover .ft-step__circle {
    background: rgba(58, 140, 255, 0.22);
    border-color: rgba(58, 140, 255, 0.55);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
}

/* =========================
   THEME: LIGHT
   ========================= */
[data-theme="light"] .ft-process--circles {
    background: linear-gradient(180deg,
            #f6fbff 0%,
            #eef6ff 50%,
            #e8f2ff 100%);
}

[data-theme="light"] .ft-process__kicker {
    color: #3e6ea8;
}

[data-theme="light"] .ft-process__title {
    color: #0b1a2a;
}

[data-theme="light"] .ft-process__subtitle {
    color: #36506c;
}

[data-theme="light"] .ft-step__circle {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(11, 26, 42, 0.10);
    box-shadow: 0 18px 55px rgba(11, 26, 42, 0.10);
}

[data-theme="light"] .ft-step__num {
    color: rgba(58, 140, 255, 0.85);
}

[data-theme="light"] .ft-step__title {
    color: #0b1a2a;
}

[data-theme="light"] .ft-step__text {
    color: #36506c;
}

[data-theme="light"] .ft-step:hover .ft-step__circle {
    background: rgba(58, 140, 255, 0.18);
    border-color: rgba(58, 140, 255, 0.45);
    box-shadow: 0 26px 70px rgba(58, 140, 255, 0.20);
}

[data-theme="light"] .ft-step:hover .ft-step__title,
[data-theme="light"] .ft-step:hover .ft-step__text {
    color: #0b1a2a;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {}


/* =========================
   WHY CHOOSE US (Block #5)
   ========================= */

.ft-why {
    position: relative;
    padding-top: clamp(24px, 3.5vw, 46px);
    padding-bottom: clamp(44px, 6vw, 92px);
}

/* If previous section adds margin-bottom */
.ft-process+.ft-why {
    margin-top: 0 !important;
}


/* Layout */
.ft-why__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: clamp(22px, 3vw, 44px);
    align-items: center;
}

@media (max-width: 980px) {
    .ft-why__grid {
        grid-template-columns: 1fr;
    }
}

/* Head */
.ft-why__kicker {
    margin: 0 0 12px;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgba(143, 208, 255, .9);
}

.ft-why__title {
    margin: 0 0 14px;
    font-size: clamp(30px, 3.2vw, 52px);
    line-height: 1.05;
    color: var(--ft-text, #fff);
}

.ft-why__subtitle {
    margin: 0;
    max-width: 58ch;
    font-size: 16px;
    line-height: 1.7;
    color: rgba(234, 241, 255, .82);
}

/* Bullets */
.ft-why__bullets {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.ft-why-bullet {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: rgba(234, 241, 255, .86);
    line-height: 1.6;
}

.ft-why-bullet__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-top: 7px;
    background: rgba(58, 140, 255, .95);
    box-shadow: 0 0 0 6px rgba(58, 140, 255, .12);
}

.ft-why-bullet__text strong {
    color: #fff;
    font-weight: 800;
}

/* Right glass card */
.ft-why-card {
    border-radius: 22px;
    padding: clamp(18px, 2.2vw, 26px);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .32);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ft-why-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 560px) {
    .ft-why-card__grid {
        grid-template-columns: 1fr;
    }
}

/* Mini cards */
.ft-why-mini {
    border-radius: 18px;
    padding: 16px 16px 14px;
    background: rgba(255, 255, 255, .045);
    border: 1px solid rgba(255, 255, 255, .08);
    transition:
        transform .95s cubic-bezier(.22, .8, .26, 1),
        background .95s cubic-bezier(.22, .8, .26, 1),
        border-color .95s cubic-bezier(.22, .8, .26, 1),
        box-shadow .95s cubic-bezier(.22, .8, .26, 1),
        color .95s cubic-bezier(.22, .8, .26, 1);
}

.ft-why-mini__icon {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(58, 140, 255, .16);
    border: 1px solid rgba(58, 140, 255, .30);
    color: rgba(190, 226, 255, .95);
    margin-bottom: 12px;
}

.ft-why-mini__icon svg {
    width: 22px;
    height: 22px;
}

.ft-why-mini__title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 900;
    color: #fff;
}

.ft-why-mini__text {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: rgba(234, 241, 255, .80);
}

/* Hover: blue fill + white text */
.ft-why-mini:hover {
    transform: translateY(-6px);
    background: rgba(58, 140, 255, .62);
    border-color: rgba(58, 140, 255, .75);
    box-shadow: 0 22px 60px rgba(58, 140, 255, .18);
}

.ft-why-mini:hover .ft-why-mini__icon {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

.ft-why-mini:hover .ft-why-mini__title,
.ft-why-mini:hover .ft-why-mini__text {
    color: #fff;
}

/* Light theme support (same hover blue) */
[data-theme="light"] .ft-why__title {
    color: #0b1220;
}

[data-theme="light"] .ft-why__subtitle {
    color: rgba(15, 25, 45, .75);
}

[data-theme="light"] .ft-why-bullet {
    color: rgba(15, 25, 45, .75);
}

[data-theme="light"] .ft-why-bullet__text strong {
    color: #0b1220;
}

[data-theme="light"] .ft-why-card {
    background: rgba(255, 255, 255, .72);
    border-color: rgba(10, 25, 45, .08);
    box-shadow: 0 18px 50px rgba(10, 25, 45, .12);
}

[data-theme="light"] .ft-why-mini {
    background: rgba(255, 255, 255, .9);
    border-color: rgba(10, 25, 45, .08);
}

[data-theme="light"] .ft-why-mini__title {
    color: #0b1220;
}

[data-theme="light"] .ft-why-mini__text {
    color: rgba(15, 25, 45, .72);
}

[data-theme="light"] .ft-why-mini:hover .ft-why-mini__title,
[data-theme="light"] .ft-why-mini:hover .ft-why-mini__text {
    color: #fff;
}

/* Fix: hover should look identical in dark & light */
.ft-why-mini {
    transform: translateZ(0);
    will-change: transform;
}

/* Keep sizing stable (no layout shift) */
.ft-why-mini,
.ft-why-mini__icon {
    box-sizing: border-box;
}

/* Light theme: consistent hover */
[data-theme="light"] .ft-why-mini:hover {
    background: rgba(58, 140, 255, .62) !important;
    border-color: rgba(58, 140, 255, .75) !important;
    box-shadow: 0 22px 60px rgba(58, 140, 255, .18) !important;
    transform: translateY(-6px);
}

[data-theme="light"] .ft-why-mini:hover .ft-why-mini__icon {
    background: rgba(255, 255, 255, .16) !important;
    border-color: rgba(255, 255, 255, .22) !important;
    color: #fff !important;
}

[data-theme="light"] .ft-why-mini:hover .ft-why-mini__title,
[data-theme="light"] .ft-why-mini:hover .ft-why-mini__text {
    color: #fff !important;
}


/* =========================
   VISUAL PROOF (DAY / NIGHT)
   ========================= */

.ft-visual {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

.ft-visual__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 80px;
    align-items: center;
}

/* TEXT */
.ft-visual__kicker {
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #7fc7ff;
    margin-bottom: 16px;
}

.ft-visual__title {
    font-size: clamp(34px, 4vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 20px;
}

.ft-visual__text {
    font-size: 17px;
    line-height: 1.7;
    max-width: 520px;
    opacity: 0.9;
    margin-bottom: 32px;
}

/* BUTTON */
.ft-btn-primary {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 999px;
    background: linear-gradient(180deg, #5cc4ff, #2f86ff);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 14px 40px rgba(0, 140, 255, 0.35);
    transition: transform .25s ease, box-shadow .25s ease;
}

.ft-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 60px rgba(0, 140, 255, 0.45);
}

/* IMAGE */
.ft-visual__media {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
}

.ft-visual__img {
    width: 100%;
    height: auto;
    display: none;
}

/* THEME SWITCH */
html[data-theme="dark"] .ft-visual__img--night {
    display: block;
}

html[data-theme="light"] .ft-visual__img--day {
    display: block;
}

/* LIGHT THEME COLORS */
html[data-theme="light"] .ft-visual__title,
html[data-theme="light"] .ft-visual__text {
    color: #0c1622;
}

html[data-theme="light"] .ft-visual {
    background: #f4f9ff;
}

/* DARK THEME COLORS */
html[data-theme="dark"] .ft-visual {
    background: transparent;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .ft-visual__inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .ft-visual__media {
        order: -1;
    }
}


/* =========================
   FULL WIDTH INSTALLATIONS
   ========================= */

.ft-installations-wrap {
    width: 100%;
    margin: 0;
}

.ft-installations {
    width: 100%;
    padding: 120px 0;
    position: relative;
    overflow: hidden;
}

html[data-theme="light"] .ft-installations-wrap {
    background: linear-gradient(180deg, #f5faff 0%, #eef6fc 100%);
    max-width: 100%;
}

html[data-theme="dark"] .ft-installations-wrap {
    background:
        radial-gradient(1200px 600px at 15% 50%, rgba(40, 120, 210, 0.25), transparent 70%),
        linear-gradient(180deg, #071523 0%, #040c15 100%);
    max-width: 100%;
}

.ft-installations__container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 80px;
    align-items: center;
}

/* Text */
.ft-kicker {
    font-size: 12px;
    letter-spacing: 0.22em;
    margin-bottom: 16px;
}

.ft-title {
    font-size: clamp(36px, 4vw, 52px);
    line-height: 1.1;
    margin-bottom: 20px;
}

.ft-text {
    font-size: 18px;
    max-width: 520px;
    margin-bottom: 32px;
}

html[data-theme="dark"] .ft-text {
    color: rgba(255, 255, 255, 0.75);
}

html[data-theme="light"] .ft-text {
    color: #475569;
}

/* Image */
.ft-installations__image img {
    width: 100%;
    border-radius: 18px;
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
}

html[data-theme="light"] .img-night {
    display: none;
}

html[data-theme="dark"] .img-day {
    display: none;
}

/* Mobile */
@media (max-width: 900px) {
    .ft-installations__container {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}


/* =========================
   Real Installations block
   Full-width background + hover zoom + staged reveal
   ========================= */

.ft-install {
    position: relative;
    width: 100%;
    padding: clamp(56px, 6vw, 60px) 0;
    overflow: hidden;
}

/* Full width background per theme */
html[data-theme="dark"] .ft-install {
    background: radial-gradient(1200px 420px at 25% 15%, rgb(21 36 50), transparent 60%), linear-gradient(180deg, #152331 0%, #23323e 100%);
    border-radius: 0 0 15px 15px;
    margin-bottom: 60px;
}

html[data-theme="light"] .ft-install {
    background: radial-gradient(1100px 420px at 30% 15%, rgb(255 255 255), transparent 60%), linear-gradient(180deg, #ffffff 0%, #9eccff 100%);
    border-radius: 0 0 15px 15px;
    margin-bottom: 60px;
}

/* Keep your site container width */
.ft-install__inner {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

/* Left */
.ft-install__kicker {
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0 0 14px;
    opacity: 0.9;
}

html[data-theme="dark"] .ft-install__kicker {
    color: rgba(180, 220, 255, 0.9);
}

html[data-theme="light"] .ft-install__kicker {
    color: rgba(10, 22, 35, 0.65);
}

.ft-install__title {
    margin: 0 0 16px;
    line-height: 1.05;
    font-weight: 800;
    font-size: clamp(34px, 4vw, 58px);
}

html[data-theme="dark"] .ft-install__title {
    color: #ffffff;
}

html[data-theme="light"] .ft-install__title {
    color: #0c1622;
}

.ft-install__text {
    margin: 0 0 22px;
    max-width: 560px;
    line-height: 1.6;
    font-size: 18px;
}

html[data-theme="dark"] .ft-install__text {
    color: rgba(234, 241, 255, 0.82);
}

html[data-theme="light"] .ft-install__text {
    color: rgba(12, 22, 34, 0.78);
}

/* Button (use your existing style idea) */
.ft-install__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 28px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: 0.01em;
    transition: transform 220ms ease, box-shadow 220ms ease, filter 220ms ease;
    background: linear-gradient(180deg, #6ed0ff 0%, #2e86ff 100%);
    color: #ffffff;
    box-shadow: 0 16px 46px rgba(18, 92, 255, 0.35);
}

.ft-install__btn:hover {
    transform: translateY(-2px);
    filter: saturate(1.05);
    box-shadow: 0 22px 60px rgba(18, 92, 255, 0.42);
    color: #000000;
}

/* Right media frame */
.ft-install__media {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    /* IMPORTANT: zoom stays inside frame */
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.06);
}

html[data-theme="light"] .ft-install__media {
    box-shadow: 0 28px 70px rgba(12, 24, 38, 0.20);
    background: rgba(12, 24, 38, 0.06);
}

/* Images */
.ft-install__img {
    width: 100%;
    height: clamp(260px, 24vw, 380px);
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

/* Hover zoom inside frame */
.ft-install__media:hover .ft-install__img {
    transform: scale(1.06);
}

/* Theme-based image switching */
.ft-show--light {
    display: none;
}

.ft-show--dark {
    display: none;
}

html[data-theme="light"] .ft-show--light {
    display: block;
}

html[data-theme="dark"] .ft-show--dark {
    display: block;
}

/* Bottom text INSIDE background */
.ft-install__bottom {
    grid-column: 1 / -1;
    margin-top: clamp(16px, 2vw, 22px);
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.02em;
}

html[data-theme="dark"] .ft-install__bottom {
    color: rgba(234, 241, 255, 0.72);
}

html[data-theme="light"] .ft-install__bottom {
    color: rgba(12, 22, 34, 0.62);
}

.ft-install__bottom p {
    margin: 4px 0;
}

/* Responsive */
@media (max-width: 980px) {
    .ft-install__inner {
        grid-template-columns: 1fr;
    }

    .ft-install__right {
        order: 2;
    }

    .ft-install__bottom {
        order: 3;
    }
}


/* =========================
   QUICK ESTIMATE (ft-est) — FULL WIDTH + FIXED BG
   ========================= */

/* =========================================================
   FULL WIDTH FIX for Blocksy / WP constrained layouts
   (this fixes the "right edge shows white" problem)
   ========================================================= */
html,
body {
    overflow-x: hidden;
}

/* Make real alignfull behave like 100vw even inside constrained layout */
.entry-content.is-layout-constrained>.alignfull,
.wp-site-blocks .is-layout-constrained>.alignfull,
.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* =========================================================
   QUICK ESTIMATE (ft-est)
   Theme-aware + FULL WIDTH background + FIXED
   ========================================================= */
:root {
    --ft-accent: #3aa8ff;

    /* dark */
    --ft-d-card: rgba(12, 20, 30, .72);
    --ft-d-border: rgba(255, 255, 255, .08);
    --ft-d-text: rgba(255, 255, 255, .92);
    --ft-d-muted: rgba(255, 255, 255, .70);

    /* light */
    --ft-l-card: rgba(255, 255, 255, .92);
    --ft-l-border: rgba(15, 25, 40, .10);
    --ft-l-text: rgba(10, 18, 30, .92);
    --ft-l-muted: rgba(10, 18, 30, .66);
}

/* Section (inherits full width from .alignfull wrapper) */
.ft-est {
    position: relative;
    width: 100%;
    margin: 0;
    padding: clamp(34px, 5.2vw, 72px) 0;
    overflow: hidden;
}

/* Background image + overlay (fixed) */
.ft-est.ft-calc {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

/* Dark / Light backgrounds (your images) */
html[data-theme="dark"] .ft-est.ft-calc,
body[data-theme="dark"] .ft-est.ft-calc {
    background-image:
        linear-gradient(180deg, rgba(6, 18, 32, .70) 0%, rgba(6, 18, 32, .88) 100%),
        url("/wp-content/uploads/2026/01/calc-dark.jpg");
}

html[data-theme="light"] .ft-est.ft-calc,
body[data-theme="light"] .ft-est.ft-calc {
    background-image:
        linear-gradient(180deg, rgba(245, 249, 255, .72) 0%, rgba(245, 249, 255, .90) 100%),
        url("/wp-content/uploads/2026/01/calc-light.jpg");
}

/* Mobile fix: background-attachment: fixed is unreliable */
@media (max-width: 980px) {
    .ft-est.ft-calc {
        background-attachment: scroll;
        background-position: center top;
    }
}

/* Inner container */
.ft-est__container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Layout */
.ft-est__wrap {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(18px, 3vw, 34px);
    align-items: center;
}

/* Left */
.ft-est__kicker {
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    margin: 0 0 12px;
}

.ft-est__title {
    margin: 0 0 14px;
    line-height: 1.06;
    font-weight: 800;
    font-size: clamp(30px, 3.6vw, 52px);
}

.ft-est__lead {
    margin: 0 0 18px;
    max-width: 54ch;
    font-size: 16px;
    line-height: 1.55;
}

.ft-est__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.ft-est__list li {
    position: relative;
    padding-left: 18px;
    font-size: 16px;
}

.ft-est__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--ft-accent);
    box-shadow: 0 0 0 4px rgba(58, 168, 255, .18);
}

/* Right card */
.ft-est__card {
    border-radius: 18px;
    padding: clamp(16px, 2.2vw, 22px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Card theme */
html[data-theme="dark"] .ft-est__card,
body[data-theme="dark"] .ft-est__card {
    border: 1px solid var(--ft-d-border);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .40);
}

html[data-theme="light"] .ft-est__card,
body[data-theme="light"] .ft-est__card {
    background: rgb(255 255 255 / 35%);
    border: 1px solid var(--ft-l-border);
    box-shadow: 0 14px 50px rgba(10, 18, 30, .14);
}

/* Text theme */
html[data-theme="dark"] .ft-est,
body[data-theme="dark"] .ft-est {
    color: var(--ft-d-text);
}

html[data-theme="dark"] .ft-est__kicker,
body[data-theme="dark"] .ft-est__kicker {
    color: rgba(255, 255, 255, .72);
}

html[data-theme="dark"] .ft-est__lead,
body[data-theme="dark"] .ft-est__lead {
    color: var(--ft-d-muted);
}

html[data-theme="dark"] .ft-est__list li,
body[data-theme="dark"] .ft-est__list li {
    color: rgba(255, 255, 255, .82);
}

html[data-theme="light"] .ft-est,
body[data-theme="light"] .ft-est {
    color: var(--ft-l-text);
}

html[data-theme="light"] .ft-est__kicker,
body[data-theme="light"] .ft-est__kicker {
    color: rgba(10, 18, 30, .62);
}

html[data-theme="light"] .ft-est__lead,
body[data-theme="light"] .ft-est__lead {
    color: var(--ft-l-muted);
}

html[data-theme="light"] .ft-est__list li,
body[data-theme="light"] .ft-est__list li {
    color: rgba(10, 18, 30, .82);
}

/* Form grid */
.ft-est__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ft-field {
    display: grid;
    gap: 8px;
}

.ft-field__label {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: .75;
}

.ft-field__control {
    width: 100%;
    height: 46px;
    border-radius: 12px;
    padding: 0 14px;
    outline: none;
    font: inherit;
}

/* Inputs theme */
html[data-theme="dark"] .ft-field__control,
body[data-theme="dark"] .ft-field__control {
    background: rgba(0, 0, 0, .20);
    border: 1px solid rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .92);
}

html[data-theme="dark"] .ft-field__control:focus,
body[data-theme="dark"] .ft-field__control:focus {
    border-color: rgba(58, 168, 255, .55);
    box-shadow: 0 0 0 4px rgba(58, 168, 255, .16);
}

html[data-theme="light"] .ft-field__control,
body[data-theme="light"] .ft-field__control {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(15, 25, 40, .14);
    color: rgba(10, 18, 30, .92);
}

html[data-theme="light"] .ft-field__control:focus,
body[data-theme="light"] .ft-field__control:focus {
    border-color: rgba(58, 168, 255, .65);
    box-shadow: 0 0 0 4px rgba(58, 168, 255, .14);
}

/* Checks */
.ft-est__checks {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.ft-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.ft-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--ft-accent);
}

/* Result */
.ft-est__result {
    margin-top: 14px;
    border-radius: 14px;
    padding: 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: center;
}

html[data-theme="dark"] .ft-est__result,
body[data-theme="dark"] .ft-est__result {
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .08);
}

html[data-theme="light"] .ft-est__result,
body[data-theme="light"] .ft-est__result {
    background: rgba(58, 168, 255, .06);
    border: 1px solid rgba(58, 168, 255, .18);
}

.ft-est__result-k {
    font-weight: 800;
    font-size: 13px;
    opacity: .78;
    margin-bottom: 4px;
}

.ft-est__result-s {
    font-size: 13px;
    opacity: .72;
    line-height: 1.35;
}

.ft-est__result-price {
    font-weight: 900;
    font-size: 26px;
    white-space: nowrap;
}

/* Buttons */
.ft-est__actions {
    margin-top: 14px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 18px;
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: .04em;
    font-size: 13px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

.ft-btn--primary {
    background: var(--ft-accent);
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(58, 168, 255, .25);
}

.ft-btn--primary:hover {
    transform: translateY(-1px);
}

.ft-btn--ghost {
    background: rgba(255, 255, 255, .25);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, .14);
}

html[data-theme="light"] .ft-btn--ghost,
body[data-theme="light"] .ft-btn--ghost {
    background: rgba(10, 18, 30, .40);
    border: 1px solid rgba(10, 18, 30, .10);
}

/* Responsive */
@media (max-width: 980px) {
    .ft-est__wrap {
        grid-template-columns: 1fr;
    }

    .ft-est__grid {
        grid-template-columns: 1fr;
    }
}

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



/* =========================================================
   FIX SELECT ARROW (ONE ARROW ONLY, ALWAYS VISIBLE)
   - Remove repeating arrow pattern inside select (№1)
   - Remove my extra arrow (№2)
   - Keep ONE arrow at right inside field, always visible (№3)
   Paste at VERY END of your CSS
   ========================================================= */

/* 1) Kill any previous pseudo-arrow you may have */
.ft-field::after,
.ft-field__control-wrap::after,
.ft-field__control-wrap::before,
.ft-field__control+.ft-select-arrow,
.ft-select-arrow {
    content: none !important;
    display: none !important;
}

/* 2) Clean select: remove ALL old background images/patterns */
.ft-field select.ft-field__control,
.ft-field__control.ft-select,
.ft-field__control select,
select.ft-field__control {
    background-image: none !important;
    /* removes the repeating pattern (№1) */
    background-repeat: no-repeat !important;
}

/* 3) Add ONE custom arrow INSIDE the select (always visible) */
.ft-field select.ft-field__control,
select.ft-field__control {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    /* space for arrow */
    padding-right: 44px !important;

    /* one arrow (SVG) on the right */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 14px 14px !important;
}

/* 4) Hover/focus: border turns blue like your example */
html[data-theme="light"] select.ft-field__control,
body[data-theme="light"] select.ft-field__control {
    border: 1px solid rgba(15, 25, 40, .18) !important;
    /* grey default */
}

html[data-theme="dark"] select.ft-field__control,
body[data-theme="dark"] select.ft-field__control {
    border: 1px solid rgba(255, 255, 255, .14) !important;
    /* grey default */
}

select.ft-field__control:hover {
    border-color: rgba(58, 168, 255, .55) !important;
}

select.ft-field__control:focus {
    border-color: rgba(58, 168, 255, .65) !important;
    box-shadow: 0 0 0 4px rgba(58, 168, 255, .14) !important;
    outline: none !important;
}

/* 5) Arrow color slightly stronger on hover/focus (still single arrow) */
select.ft-field__control:hover,
select.ft-field__control:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%233aa8ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}


/* =========================
   INCLUDED BLOCK (ft-inc)
   ========================= */

:root {
    --ft-accent: #3aa8ff;

    --ft-d-text: rgba(255, 255, 255, .92);
    --ft-d-muted: rgba(255, 255, 255, .70);
    --ft-d-card: rgba(12, 20, 30, .70);
    --ft-d-border: rgba(255, 255, 255, .08);

    --ft-l-text: rgba(10, 18, 30, .92);
    --ft-l-muted: rgba(10, 18, 30, .66);
    --ft-l-card: rgba(255, 255, 255, .92);
    --ft-l-border: rgba(15, 25, 40, .10);
}

/* Layout */
.ft-inc {
    position: relative;
    padding: clamp(38px, 5.2vw, 76px) 0;
}

.ft-inc__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.ft-inc__wrap {
    display: grid;
    grid-template-columns: 1.12fr .88fr;
    gap: clamp(18px, 3vw, 34px);
    align-items: start;
}

/* Left */
.ft-inc__kicker {
    margin: 0 0 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 12px;
    opacity: .88;
}

.ft-inc__title {
    margin: 0 0 12px;
    line-height: 1.08;
    font-weight: 900;
    font-size: clamp(26px, 3.2vw, 40px);
}

.ft-inc__lead {
    margin: 0 0 16px;
    max-width: 64ch;
    font-size: 16px;
    line-height: 1.62;
}

.ft-inc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.ft-inc__list li {
    position: relative;
    padding-left: 18px;
    font-size: 16px;
    line-height: 1.48;
}

.ft-inc__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55em;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--ft-accent);
    box-shadow: 0 0 0 4px rgba(58, 168, 255, .18);
}

.ft-inc__note {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    opacity: .95;
}

.ft-inc__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(58, 168, 255, .95);
    box-shadow: 0 0 0 6px rgba(58, 168, 255, .14);
}

/* Card */
.ft-inc__card {
    position: relative;
    border-radius: 18px;
    padding: clamp(16px, 2.2vw, 22px);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    transform-style: preserve-3d;
}

.ft-inc__glow {
    position: absolute;
    inset: -2px;
    pointer-events: none;
    opacity: .0;
    transition: opacity .35s ease;
    background:
        radial-gradient(600px 280px at 25% 20%, rgba(58, 168, 255, .22), rgba(0, 0, 0, 0) 55%),
        radial-gradient(520px 260px at 90% 85%, rgba(58, 168, 255, .14), rgba(0, 0, 0, 0) 55%);
}

.ft-inc__card:hover .ft-inc__glow {
    opacity: 1;
}

.ft-inc__badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    border: 1px solid transparent;
    margin-bottom: 10px;
}

.ft-inc__cardTitle {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 900;
}

.ft-inc__cardText {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.55;
    opacity: .92;
}

.ft-inc__ticks {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    font-size: 14px;
}

.ft-inc__ticks li {
    position: relative;
    padding-left: 22px;
    opacity: .94;
}

.ft-inc__ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .35em;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: rgba(58, 168, 255, .18);
    border: 1px solid rgba(58, 168, 255, .35);
    box-shadow: 0 10px 24px rgba(58, 168, 255, .10);
}

.ft-inc__ticks li::after {
    content: "";
    position: absolute;
    left: 4px;
    top: .62em;
    width: 6px;
    height: 3px;
    border-left: 2px solid rgba(58, 168, 255, .95);
    border-bottom: 2px solid rgba(58, 168, 255, .95);
    transform: rotate(-45deg);
}

/* Buttons */
.ft-inc__cta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.ft-inc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 16px;
    border-radius: 12px;
    font-weight: 900;
    text-decoration: none;
    font-size: 13px;
    letter-spacing: .02em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
    border: 1px solid transparent;
}

.ft-inc__btn:active {
    transform: translateY(1px);
}

.ft-inc__btn--primary {
    background: var(--ft-accent);
    color: #ffffff;
    box-shadow: 0 18px 38px rgba(58, 168, 255, .22);
}

.ft-inc__btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 50px rgba(58, 168, 255, .28);
    color: #000000;
}

.ft-inc__btn--ghost {
    background: transparent;
}

/* Optional photos */
.ft-inc__shots {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.ft-inc__shot {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid transparent;
}

.ft-inc__shot img {
    width: 100%;
    height: 86px;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform .35s ease;
}

.ft-inc__shot:hover img {
    transform: scale(1.06);
}

/* Theme */
html[data-theme="dark"] .ft-inc,
body[data-theme="dark"] .ft-inc {
    color: var(--ft-d-text);
}

html[data-theme="dark"] .ft-inc__lead,
body[data-theme="dark"] .ft-inc__lead {
    color: var(--ft-d-muted);
}

html[data-theme="dark"] .ft-inc__card,
body[data-theme="dark"] .ft-inc__card {
    background: var(--ft-d-card);
    border: 1px solid var(--ft-d-border);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .38);
}

html[data-theme="dark"] .ft-inc__badge,
body[data-theme="dark"] .ft-inc__badge {
    background: rgba(58, 168, 255, .10);
    border-color: rgba(58, 168, 255, .18);
    color: rgba(234, 241, 255, .92);
}

html[data-theme="dark"] .ft-inc__btn--ghost,
body[data-theme="dark"] .ft-inc__btn--ghost {
    border-color: rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .90);
}

html[data-theme="dark"] .ft-inc__btn--ghost:hover,
body[data-theme="dark"] .ft-inc__btn--ghost:hover {
    border-color: rgba(58, 168, 255, .40);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
    transform: translateY(-1px);
}

html[data-theme="dark"] .ft-inc__shot,
body[data-theme="dark"] .ft-inc__shot {
    border-color: rgba(255, 255, 255, .10);
}

html[data-theme="light"] .ft-inc,
body[data-theme="light"] .ft-inc {
    color: var(--ft-l-text);
}

html[data-theme="light"] .ft-inc__lead,
body[data-theme="light"] .ft-inc__lead {
    color: var(--ft-l-muted);
}

html[data-theme="light"] .ft-inc__card,
body[data-theme="light"] .ft-inc__card {
    background: var(--ft-l-card);
    border: 1px solid var(--ft-l-border);
    box-shadow: 0 14px 50px rgba(10, 18, 30, .12);
}

html[data-theme="light"] .ft-inc__badge,
body[data-theme="light"] .ft-inc__badge {
    background: rgba(58, 168, 255, .10);
    border-color: rgba(58, 168, 255, .16);
    color: rgba(10, 18, 30, .82);
}

html[data-theme="light"] .ft-inc__btn--ghost,
body[data-theme="light"] .ft-inc__btn--ghost {
    border-color: rgba(15, 25, 40, .16);
    color: rgba(10, 18, 30, .86);
}

html[data-theme="light"] .ft-inc__btn--ghost:hover,
body[data-theme="light"] .ft-inc__btn--ghost:hover {
    border-color: rgba(58, 168, 255, .45);
    box-shadow: 0 18px 44px rgba(10, 18, 30, .10);
    transform: translateY(-1px);
}

html[data-theme="light"] .ft-inc__shot,
body[data-theme="light"] .ft-inc__shot {
    border-color: rgba(15, 25, 40, .12);
}

/* Responsive */
@media (max-width: 980px) {
    .ft-inc__wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .ft-inc__shots {
        grid-template-columns: 1fr;
    }

    .ft-inc__shot img {
        height: 110px;
    }
}

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

/* =========================================================
   SCROLL REVEAL — GLOBAL (single source of truth)
   - Stronger motion: 100px travel
   - Smooth premium easing
   - Supports: .ft-reveal + optional data-delay="1..4" (stagger)
   ========================================================= */

:root {
    --ft-reveal-distance: 100px;
    --ft-reveal-duration: 1.15s;
    --ft-reveal-ease: cubic-bezier(.16, 1, .3, 1);
}

.ft-reveal {
    opacity: 0;
    transform: translate3d(0, var(--ft-reveal-distance), 0) scale(.985);
    filter: blur(6px);
    transition:
        opacity var(--ft-reveal-duration) ease,
        transform var(--ft-reveal-duration) var(--ft-reveal-ease),
        filter var(--ft-reveal-duration) ease;
    will-change: opacity, transform, filter;
}

.ft-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
    max-width: 100%;
}

/* Stagger presets (used by JS + also works without JS if set as attributes) */
.ft-reveal[data-delay="1"] {
    transition-delay: 120ms;
}

.ft-reveal[data-delay="2"] {
    transition-delay: 260ms;
}

.ft-reveal[data-delay="3"] {
    transition-delay: 420ms;
}

.ft-reveal[data-delay="4"] {
    transition-delay: 580ms;
}

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

    .ft-reveal,
    .ft-reveal.is-visible {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}


/* =========================================
   Estimate card thumbnails (3 images)
   ========================================= */


.ft-est__thumb {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}

html[data-theme="light"] .ft-est__thumb,
body[data-theme="light"] .ft-est__thumb {
    border: 1px solid rgba(10, 18, 30, .10);
    background: rgba(255, 255, 255, .6);
    box-shadow: 0 10px 26px rgba(10, 18, 30, .12);
}

.ft-est__thumb img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform .55s ease;
}

.ft-est__thumb:hover img {
    transform: scale(1.08);
}

@media (max-width: 980px) {
    .ft-est__thumb img {
        height: 86px;
    }
}


.ft-est__thumbs {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.ft-est__thumb {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(0, 0, 0, .12);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .25);
}

.ft-est__thumb:hover img {
    transform: scale(1.08);
}

@media (max-width: 980px) {
    .ft-est__thumb img {
        height: 86px;
    }
}


/* Fix: glow overlay should NOT cover card content */
.ft-inc__card {
    position: relative;
    overflow: hidden;
}

.ft-inc__glow {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Bring all real content above glow */
.ft-inc__card>*:not(.ft-inc__glow) {
    position: relative;
    z-index: 2;
}


/* --- Fix: thumbs sometimes not painted until reflow (GPU hint) --- */
.ft-est__thumbs {
    position: relative;
    z-index: 3;
    transform: translateZ(0);
}

.ft-est__thumb {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.ft-est__thumb img {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* =========================
   Image modal
   ========================= */
.ft-imgmodal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
}

.ft-imgmodal.is-open {
    display: block;
}

.ft-imgmodal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity .25s ease;
}

.ft-imgmodal__dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -46%) scale(.98);
    width: min(980px, calc(100% - 28px));
    max-height: calc(100% - 28px);
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(10, 18, 30, .65);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
}

.ft-imgmodal__img {
    width: 100%;
    height: auto;
    max-height: calc(100vh - 28px);
    object-fit: contain;
    display: block;
}

.ft-imgmodal__close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .35);
    color: #fff;
    cursor: pointer;
}

.ft-imgmodal.is-open .ft-imgmodal__overlay {
    opacity: 1;
}

.ft-imgmodal.is-open .ft-imgmodal__dialog {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}


/* =========================
   Modal navigation arrows
   ========================= */
.ft-imgmodal__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
    z-index: 5;
}

.ft-imgmodal__nav:hover {
    background: rgba(0, 0, 0, .65);
}

.ft-imgmodal__nav--prev {
    left: 14px;
}

.ft-imgmodal__nav--next {
    right: 14px;
}


/* =========================
   FIX: CTA button visible under 900px
   ========================= */
@media (max-width: 900px) {
    .ft-cta__right {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .ft-cta__btn {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
    }
}


/* =========================================
   Make thumbnail text clearly visible
   ========================================= */

.ft-est__thumb {
    position: relative;
}

/* ТЕКСТ ПО ЦЕНТРУ — ВИДЕН ВСЕГДА */
.ft-est__thumb::after {
    content: "View";
    position: absolute;
    inset: 0;

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

    font-size: 14px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: #ffffff;

    /* ⬇️ ВАЖНО: тёмная подложка */
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, .35),
            rgba(0, 0, 0, .55));

    opacity: .75;
    /* видно сразу */
    pointer-events: none;
    transition: opacity .25s ease;
}

/* БЕЙДЖ В УГЛУ — тоже всегда виден */
.ft-est__thumb::before {
    content: "Tap to zoom";
    position: absolute;
    top: 8px;
    right: 8px;

    padding: 6px 10px;
    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #fff;

    background: rgba(0, 0, 0, .75);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .3);

    opacity: .95;
    pointer-events: none;
}

/* ПРИ НАВЕДЕНИИ — ЧУТЬ СИЛЬНЕЕ */
.ft-est__thumb:hover::after {
    opacity: .95;
}

/* МОБИЛКА — ещё контрастнее */
@media (hover: none) {
    .ft-est__thumb::after {
        opacity: .85;
    }
}


/* =========================
   FAQ (Premium)
   ========================= */

.ft-faq {
    position: relative;
    padding: clamp(56px, 6vw, 90px) 0;
    background: radial-gradient(1200px 600px at 15% 0%, rgba(68, 161, 255, 0.12), rgba(0, 0, 0, 0));
}

.ft-faq__container {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}

.ft-faq__head {
    text-align: left;
    margin-bottom: 26px;
}

.ft-faq__kicker {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-weight: 700;
    opacity: .8;
    margin: 0 0 10px;
}

.ft-faq__title {
    font-size: clamp(28px, 4.2vw, 44px);
    line-height: 1.08;
    margin: 0 0 10px;
}

.ft-faq__lead {
    max-width: 720px;
    opacity: .85;
    margin: 0;
}

.ft-faq__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 22px;
}

.ft-faq__col {
    display: grid;
    gap: 14px;
}

.ft-faq__item {
    border-radius: 18px;
    background: rgba(10, 18, 30, 0.55);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ft-faq__q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 16px;
    background: transparent;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.25;
}

.ft-faq__q:hover {
    background: rgba(255, 255, 255, .04);
}

.ft-faq__icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .25);
    position: relative;
}

.ft-faq__icon::before,
.ft-faq__icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    background: rgba(234, 241, 255, .95);
    transform: translate(-50%, -50%);
    border-radius: 2px;
}

.ft-faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform .22s ease, opacity .22s ease;
}

/* Answer panel */
.ft-faq__a {
    padding: 0 16px 16px;
}

.ft-faq__aInner {
    padding-top: 10px;
    opacity: .9;
    font-size: 14px;
    line-height: 1.55;
}

/* Open state (set by JS) */
.ft-faq__item.is-open .ft-faq__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scale(.9);
}

/* Smooth height animation using CSS grid trick */
.ft-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}

.ft-faq__a[hidden] {
    display: none;
}

.ft-faq__item.is-open .ft-faq__a {
    display: grid;
    grid-template-rows: 1fr;
    background-color: #1D3D68;
}

.ft-faq__aInner {
    overflow: hidden;
}

/* Footer CTA */
.ft-faq__foot {
    margin-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 16px;
    border-radius: 18px;
    background: rgba(10, 18, 30, 0.45);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.ft-faq__footText {
    margin: 0;
    opacity: .9;
}

.ft-faq__footCta {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.ft-faq__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 14px;
    border-radius: 12px;
    font-weight: 800;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(0, 0, 0, .18);
    color: rgba(234, 241, 255, .95);
}

.ft-faq__btn--primary {
    background: rgba(68, 161, 255, 0.95);
    border-color: rgba(68, 161, 255, 0.15);
}

.ft-faq__btn--primary:hover {
    background: rgba(52, 149, 247, 0.95);
    color: rgba(2, 3, 5, 0.872);
}

.ft-faq__btn--ghost:hover {
    background: rgba(255, 255, 255, .06);
    color: #c2c2c2;
}

/* Responsive: 1 column */
@media (max-width: 900px) {
    .ft-faq__grid {
        grid-template-columns: 1fr;
    }

    .ft-faq__foot {
        flex-direction: column;
        align-items: flex-start;
    }

    .ft-faq__footCta {
        justify-content: flex-start;
    }
}


/* =========================================
   FAQ — Premium States Styling
   ========================================= */

/* Question button — default */
.ft-faq__q {
    transition: background-color .25s ease;
}

/* Hover on question */
.ft-faq__q:hover {
    background-color: #1E2834;
}

/* Open state: question background */
.ft-faq__item.is-open .ft-faq__q {
    background-color: #1E2834;
}


/* Smooth visual separation */
.ft-faq__aInner {
    transition: background-color .25s ease;
}

/* Icon circle when open */
.ft-faq__item.is-open .ft-faq__icon {
    background: rgba(0, 0, 0, .35);
    border-color: rgba(255, 255, 255, .22);
}


/* =========================================
   FAQ: Light Theme ONLY (Blocksy)
   Applies only when: html[data-theme="light"]
   ========================================= */

html[data-theme="light"] .ft-faq {
    background: #ffffff !important;
}

html[data-theme="light"] .ft-faq__kicker,
html[data-theme="light"] .ft-faq__title,
html[data-theme="light"] .ft-faq__lead {
    color: #0b1220 !important;
}

/* Card shell */
html[data-theme="light"] .ft-faq__item {
    background: #E6E6E6 !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .10) !important;
}

/* Question */
html[data-theme="light"] .ft-faq__q {
    color: #0b1220 !important;
    background: rgba(255, 255, 255, .35) !important;
}

/* Hover on question */
html[data-theme="light"] .ft-faq__q:hover {
    background: #D8D8D8 !important;
}

/* Open state: question background (light) */
html[data-theme="light"] .ft-faq__item.is-open .ft-faq__q {
    background: #BFC3C7 !important;
}

/* Answer text */
html[data-theme="light"] .ft-faq__aInner {
    color: #0b1220 !important;
}

/* Answer background (light) */
html[data-theme="light"] .ft-faq__item.is-open .ft-faq__aInner,
html[data-theme="light"] .ft-faq__item.is-open .ft-faq__a {
    background: #F2F2F2 !important;
}

html[data-theme="light"] .ft-faq__btn--primary {
    color: #ffffff;
}

html[data-theme="light"] .ft-faq__btn--primary:hover {
    color: rgba(4, 5, 8, 0.934) !important;
}

html[data-theme="light"] .ft-faq__btn--ghost:hover {
    background: rgba(255, 255, 255, .06);
    color: #716e6e;
}

/* Plus/minus circle */
html[data-theme="light"] .ft-faq__icon {
    background: rgba(255, 255, 255, .45) !important;
    border-color: rgba(15, 23, 42, .18) !important;
}

html[data-theme="light"] .ft-faq__icon::before,
html[data-theme="light"] .ft-faq__icon::after {
    background: rgba(15, 23, 42, .75) !important;
}

/* Footer strip */
html[data-theme="light"] .ft-faq__foot {
    background: #DADADA !important;
    border: 1px solid rgba(15, 23, 42, .12) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .10) !important;
}

html[data-theme="light"] .ft-faq__footText {
    color: #0b1220 !important;
}


/* =========================
   Reviews / Trust – Base
   ========================= */

.ft-reviews {
    padding: clamp(72px, 8vw, 110px) 0;
}

.ft-reviews__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}

.ft-reviews__kicker {
    display: inline-block;
    margin-bottom: 12px;
    letter-spacing: .18em;
    font-size: 12px;
    opacity: .7;
}

.ft-reviews__title {
    font-size: clamp(28px, 4vw, 40px);
    margin-bottom: 12px;
}

.ft-reviews__lead {
    max-width: 640px;
    margin: 0 auto 48px;
    opacity: .85;
}

.ft-reviews__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.ft-review {
    border-radius: 20px;
    padding: 28px;
    text-align: left;
    transition: transform .35s ease, box-shadow .35s ease;
}

.ft-review:hover {
    transform: translateY(-6px);
}

.ft-review__stars {
    color: #4aa3ff;
    font-size: 18px;
    margin-bottom: 14px;
}

.ft-review__text {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 20px;
}

.ft-review__author strong {
    display: block;
    font-size: 14px;
}

.ft-review__author span {
    font-size: 13px;
    opacity: .7;
}

.ft-reviews__trust {
    margin-top: 36px;
    font-size: 13px;
    opacity: .75;
}

/* Responsive */
@media (max-width: 900px) {
    .ft-reviews__grid {
        grid-template-columns: 1fr;
    }
}


/* Dark */
html[data-theme="dark"] .ft-review {
    background: linear-gradient(180deg, #0f1b2b, #0b1523);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .ft-reviews {
    background: radial-gradient(1200px 400px at top, rgba(90, 170, 255, .08), transparent);
}

/* Light */
html[data-theme="light"] .ft-review {
    background: #f4f6f8;
    box-shadow: 0 18px 40px rgba(20, 30, 50, .12);
}

html[data-theme="light"] .ft-reviews {
    background: linear-gradient(180deg, #ffffff, #f2f4f7);
}


/* =========================
   Reviews: subtle featured card
   ========================= */

.ft-reviews__grid {
    align-items: stretch;
}

/* Base card (safety if needed) */
.ft-review {
    position: relative;
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
    will-change: transform;
}

/* Featured (middle) */
.ft-review.is-featured {
    transform: translateY(-10px);
    border-color: rgba(80, 170, 255, 0.22);
    box-shadow:
        0 22px 70px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(80, 170, 255, 0.10) inset;
    background:
        linear-gradient(180deg, rgba(32, 55, 85, 0.70), rgba(14, 22, 34, 0.72));
}

/* Soft glow (very subtle) */
.ft-review.is-featured::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(600px 220px at 40% 0%,
            rgba(80, 170, 255, 0.18),
            transparent 55%);
    opacity: .9;
    filter: blur(0px);
}

/* Stars a bit brighter only on featured */
.ft-review.is-featured .ft-review__stars {
    opacity: 1;
    text-shadow: 0 10px 26px rgba(60, 160, 255, 0.18);
}

/* Hover: everyone lifts a bit, featured lifts slightly less (so it stays “premium” not jumpy) */
.ft-review:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .42);
}

.ft-review.is-featured:hover {
    transform: translateY(-12px);
    box-shadow:
        0 26px 85px rgba(0, 0, 0, .52),
        0 0 0 1px rgba(80, 170, 255, 0.14) inset;
}

/* Mobile: reduce the lift so it doesn’t look “broken” */
@media (max-width: 900px) {
    .ft-review.is-featured {
        transform: translateY(-6px);
    }

    .ft-review.is-featured:hover {
        transform: translateY(-8px);
    }
}


/* =========================
   Reviews – Full Width Fix
   ========================= */

/* =========================
   Reviews — Full-width background (safe method)
   ========================= */

.ft-reviews {
    position: relative;
    z-index: 0;
    /* блок остается в контейнере, фон рисуем отдельно */
}

.ft-reviews::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;

    /* full width background */
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);

    z-index: -1;
    pointer-events: none;
}

/* DARK background */
html[data-theme="dark"] .ft-reviews::before {
    background:
        radial-gradient(1200px 500px at top, rgba(90, 170, 255, .08), transparent),
        linear-gradient(180deg, #0b1523, #0a1320);
}

/* LIGHT background */
html[data-theme="light"] .ft-reviews::before {
    background: linear-gradient(180deg, #ffffff, #f2f4f7);
}

.ft-reviews.ft-reveal.is-visible {
    margin-bottom: 0 !important;
}

[data-vertical-spacing*=bottom] {
    padding-bottom: 0 !important;
}

[data-vertical-spacing*=top] {
    padding-top: 0 !important;
}

/* =========================
   FINAL CTA: Trust line + micro note
   ========================= */

.ft-cta__trust {
    margin-top: 14px;
    font-size: 13px;
    letter-spacing: .02em;
    opacity: .85;
}

html[data-theme="dark"] .ft-cta__trust {
    color: rgba(234, 241, 255, .86);
}

html[data-theme="light"] .ft-cta__trust {
    color: rgba(11, 18, 32, .72);
}

.ft-cta__micro {
    display: inline-block;
    margin-top: 12px;
    font-size: 12.5px;
    opacity: .78;
}

html[data-theme="dark"] .ft-cta__micro {
    color: rgba(234, 241, 255, .74);
}

html[data-theme="light"] .ft-cta__micro {
    color: rgba(11, 18, 32, .62);
}


/* =========================
   FINAL CTA: Extra subtle glow behind button
   ========================= */

.ft-cta__btn {
    position: relative;
}

.ft-cta__btn::before {
    content: "";
    position: absolute;
    inset: -18px -26px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(90, 170, 255, .28), transparent 60%);
    filter: blur(10px);
    opacity: .55;
    z-index: -1;
    transition: opacity .35s ease;
}

.ft-cta__btn:hover::before {
    opacity: .85;
}


/* =========================
   CTA right side – make it premium
   ========================= */

.ft-cta__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* the "chip" container */
.ft-cta__action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    padding: 22px 22px 18px;
    border-radius: 22px;

    background: rgba(255, 255, 255, .035);
    /* было .04 */
    border: 1px solid rgba(255, 255, 255, .08);
    /* было .10 */
    box-shadow: 0 18px 55px rgba(0, 0, 0, .35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* soft glow behind chip */
.ft-cta__action::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 26px;
    background: radial-gradient(circle at 40% 40%, rgba(90, 170, 255, .22), transparent 60%);
    filter: blur(14px);
    opacity: .75;
    z-index: -1;
    pointer-events: none;
}

/* micro text under button */
.ft-cta__micro {
    margin-top: 0;
    /* cancel old spacing */
    text-align: center;
    max-width: 240px;
    line-height: 1.3;
    opacity: .88;
    /* было .82 */
}

/* on small screens center it */
@media (max-width: 900px) {
    .ft-cta__right {
        justify-content: center;
    }

    .ft-cta__action {
        width: 100%;
        max-width: 420px;
    }
}


/* =========================
   FINAL CTA Button Animation
   ========================= */

.ft-cta__btn,
.ft-install__btn {
    position: relative;
    overflow: hidden;
    animation: ctaPulse 3.8s ease-in-out infinite;
    box-shadow: 0 10px 30px rgba(64, 164, 255, 0.35);
    transition: transform .35s ease, box-shadow .35s ease;
}

/* soft breathing */
@keyframes ctaPulse {
    0% {
        box-shadow: 0 10px 30px rgba(64, 164, 255, 0.30);
    }

    50% {
        box-shadow: 0 16px 42px rgba(64, 164, 255, 0.55);
    }

    100% {
        box-shadow: 0 10px 30px rgba(64, 164, 255, 0.30);
    }
}

/* hover — more confidence */
.ft-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 60px rgba(64, 164, 255, 0.75);
}

.ft-faq__btn--primary,
.ft-inc__btn--primary,
.ft-btn--primary,
.ft-install__btn,
.ft-btn--primary,
.ft-srvhero__btn--primary,
.ft-srv3__btn--primary {
    position: relative;
    overflow: hidden;
}

/* shine sweep */
.ft-cta__btn::after,
.ft-faq__btn--primary::after,
.ft-inc__btn--primary::after,
.ft-btn--primary::after,
.ft-install__btn::after,
.ft-btn--primary::after,
.ft-srvhero__btn--primary::after,
.ft-srv3__btn--primary::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -120%;
    width: 80px;
    height: 200%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.35),
            transparent);
    transform: rotate(25deg);
    animation: ctaShine 3s ease-in-out infinite;
}

@keyframes ctaShine {
    0% {
        left: -120%;
    }

    40% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}

/* =========================================================
   HOW IT WORKS (Circles) — Premium polish (override)
   ========================================================= */

/* Reveal delays used in this block */
.ft-process--circles .ft-reveal[data-delay="220"] {
    transition-delay: 220ms;
}

.ft-process--circles .ft-reveal[data-delay="420"] {
    transition-delay: 420ms;
}

/* Circle: glass depth + subtle ring */
.ft-process--circles .ft-step__circle {
    position: relative;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateZ(0);
}

.ft-process--circles .ft-step__circle::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    opacity: .85;
    background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, 0) 70%);
}

.ft-process--circles .ft-step__circle::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    padding: 2px;
    background: radial-gradient(70% 70% at 50% 30%, rgba(58, 140, 255, .55), rgba(58, 140, 255, .14) 55%, rgba(58, 140, 255, 0) 78%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity .65s ease;
    pointer-events: none;
}

/* Step hover: premium lift + ring (no flat fill) */
.ft-process--circles .ft-step {
    transition: transform .65s cubic-bezier(.22, .8, .26, 1);
    will-change: transform;
}

.ft-process--circles .ft-step:hover {
    transform: translateY(-6px);
}

.ft-process--circles .ft-step:hover .ft-step__circle {
    transform: translateY(-10px) scale(1.03);
}

.ft-process--circles .ft-step:hover .ft-step__circle::after {
    opacity: 1;
}

/* Number + text micro polish */
.ft-process--circles .ft-step__num {
    text-shadow: 0 10px 35px rgba(0, 0, 0, .35);
    transition: color .55s ease, transform .55s ease;
}

.ft-process--circles .ft-step:hover .ft-step__num {
    transform: translateY(-1px);
}

.ft-process--circles .ft-step__title {
    position: relative;
    display: inline-block;
}

.ft-process--circles .ft-step__title::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(58, 140, 255, 0), rgba(58, 140, 255, .65), rgba(58, 140, 255, 0));
    transition: width .55s ease;
    opacity: .9;
}

.ft-process--circles .ft-step:hover .ft-step__title::after {
    width: 64px;
}

/* Theme-specific tuning */
html[data-theme="dark"] .ft-process--circles .ft-step__circle {
    background: rgba(255, 255, 255, .035) !important;
    border-color: rgba(255, 255, 255, .12) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .42) !important;
}

html[data-theme="dark"] .ft-process--circles .ft-step:hover .ft-step__circle {
    border-color: rgba(58, 140, 255, .42) !important;
    box-shadow: 0 34px 95px rgba(0, 0, 0, .55) !important;
    background: rgba(255, 255, 255, .04) !important;
    /* keep premium glass, no blue fill */
}

html[data-theme="dark"] .ft-process--circles .ft-step:hover .ft-step__title,
html[data-theme="dark"] .ft-process--circles .ft-step:hover .ft-step__text {
    color: rgba(255, 255, 255, .95) !important;
}

html[data-theme="light"] .ft-process--circles .ft-step__circle {
    background: rgba(255, 255, 255, .82) !important;
    border-color: rgba(11, 26, 42, .10) !important;
    box-shadow: 0 18px 55px rgba(11, 26, 42, .12) !important;
}

html[data-theme="light"] .ft-process--circles .ft-step:hover .ft-step__circle {
    border-color: rgba(58, 140, 255, .38) !important;
    box-shadow: 0 26px 70px rgba(58, 140, 255, .18) !important;
    background: rgba(255, 255, 255, .86) !important;
    /* keep light premium */
}


/* =========================
   Services — premium image accent inside cards
========================= */

.ft-service-card {
    position: relative;
    overflow: hidden;
}

/* image container */
.ft-service-card__media {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
}

/* image */
.ft-service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.95) contrast(.98);
}

/* subtle overlay ONLY (no frame) */
.ft-service-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(10, 16, 26, .35) 0%,
            rgba(10, 16, 26, .45) 100%);
}

/* hover — very soft */
.ft-service-card:hover .ft-service-card__media img {
    transform: scale(1.03);
}

/* ensure content is above image */
.ft-service-card>* {
    position: relative;
    z-index: 1;
}

/* hover: micro motion (premium) */
.ft-service-card:hover .ft-service-card__media {
    opacity: .30;
}

/* optional: small corner glow on hover (very subtle) */
.ft-service-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(420px 220px at 22% 18%, rgba(74, 168, 255, .16), transparent 60%);
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
    z-index: 1;
}

.ft-service-card:hover::after {
    opacity: 1;
}

/* mobile: slightly less image so it stays clean */
@media (max-width: 768px) {
    .ft-service-card__media {
        opacity: .75;
    }

    .ft-service-card:hover .ft-service-card__media {
        opacity: .22;
    }

    .ft-install__actions.ft-reveal.is-visible {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .ft-est__actions {
        justify-content: space-evenly;
    }

    .ft-inc__cta,
    .ft-faq__footCta,
    .ft-about-intro__actions {
        justify-content: center !important;
    }

    .ft-about-intro__badge {
        bottom: -50px;
        left: 0;
        padding: 10px 8px;
    }
}


/* =========================
   Services — LIGHT THEME OVERRIDE
========================= */

html[data-theme="light"] .ft-service-card:hover .ft-service-card__media {
    opacity: .18;
}

/* reduce glow on light (more premium) */
html[data-theme="light"] .ft-service-card::after {
    background: radial-gradient(420px 220px at 22% 18%, rgba(74, 168, 255, .10), transparent 60%);
}

html[data-theme="light"] .ft-service-card {
    background: #ffffff;
    box-shadow:
        0 8px 24px rgba(16, 24, 40, 0.06),
        0 2px 6px rgba(16, 24, 40, 0.04);
}

/* image wrapper */
html[data-theme="light"] .ft-service-card__media {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 18px;
}

html[data-theme="light"] .ft-service-card__media::after {
    background: none;
}

/* image */
html[data-theme="light"] .ft-service-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.92) contrast(.96);
    transform: scale(1);
}

/* very soft overlay (important) */
html[data-theme="light"] .ft-service-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgb(255 255 255 / 40%) 0%,
            rgb(255 255 255 / 0%) 100%);
}

/* hover – minimal, premium */
html[data-theme="light"] .ft-service-card:hover .ft-service-card__media img {
    transform: scale(1.035);
}

/* icon bubble – slightly stronger on light */
html[data-theme="light"] .ft-service-card__icon {
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.08);
}

/* links */
html[data-theme="light"] .ft-service-card__link {
    color: #1a73ff;
}

html[data-theme="light"] .ft-service-card__link:hover {
    text-decoration: underline;
}


/* =========================
   ABOUT HERO (Day/Night)
   ========================= */

.ft-hero--about {
    position: relative;
    overflow: hidden;
    background: #0b111c;
}

.ft-hero--about .ft-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.ft-hero--about .ft-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(900px 500px at 10% 25%, rgba(245, 196, 0, .18), transparent 60%),
        radial-gradient(720px 460px at 90% 18%, rgba(80, 170, 255, .18), transparent 62%),
        linear-gradient(180deg, rgba(11, 17, 28, .25), rgba(11, 17, 28, .92));
}

html[data-theme="dark"] .ft-hero--about .ft-hero__overlay {
    /* Dark cinematic veil + subtle brand glow */
    background:
        radial-gradient(900px 520px at 12% 18%, rgba(245, 196, 0, .14), transparent 60%),
        radial-gradient(760px 520px at 88% 25%, rgba(80, 170, 255, .18), transparent 65%),
        linear-gradient(180deg, rgba(11, 17, 28, .58), rgba(11, 17, 28, .92));
}

.ft-hero--about .ft-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(74px, 7.5vw, 118px) 18px 90px;
}

.ft-hero__kicker {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(234, 241, 255, .72);
    margin-bottom: 12px;
}

.ft-hero--about .ft-hero__title {
    margin: 0 0 14px;
    font-size: clamp(34px, 4.3vw, 58px);
    line-height: 1.04;
    color: rgba(234, 241, 255, .98);
    text-shadow: 0 12px 38px rgba(0, 0, 0, .55);
    max-width: 18ch;
}

.ft-hero--about .ft-hero__lead {
    margin: 0 0 22px;
    max-width: 70ch;
    font-size: clamp(16px, 1.55vw, 19px);
    line-height: 1.6;
    color: rgba(234, 241, 255, .78);
}

.ft-hero--about .ft-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 18px;
}

.ft-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Day / Night images via data-theme */

/* DARK (night) */
html[data-theme="dark"] .ft-hero--about .ft-hero__bg {

    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(0, 0, 0, .08)),
        url("https://images.unsplash.com/photo-1580894908361-967195033215?auto=format&fit=crop&w=2000&q=80");
}

/* LIGHT (day) */
html[data-theme="light"] .ft-hero--about {
    background: #f7faff;
}

html[data-theme="light"] .ft-hero--about .ft-hero__title {
    color: #0b111c !important;
    text-shadow: 0 12px 38px rgba(9, 30, 66, .18);
}

html[data-theme="light"] .ft-hero--about .ft-hero__lead,
html[data-theme="light"] .ft-hero__kicker {
    color: rgba(11, 17, 28, .72);
}

/* Make the day image slightly more visible */
html[data-theme="light"] .ft-hero--about .ft-hero__bg {
    background-image: linear-gradient(180deg, rgb(255 255 255 / 40%), rgb(255 255 255 / 50%)),
        url(https://images.unsplash.com/photo-1580894908361-967195033215?auto=format&fit=crop&w=2000&q=80);
    filter: brightness(.96) contrast(1.10) saturate(1.08);
}

/* Mobile */
@media (max-width: 560px) {
    .ft-hero--about .ft-hero__inner {
        padding: 66px 16px 52px;
    }

    .ft-hero--about .ft-hero__title {
        max-width: 100%;
    }

    .ft-hero--about .ft-hero__actions .ft-btn {
        width: 100%;
    }
}

/* =========================
   About: Who We Are (Day/Night via data-theme)
   ========================= */
/* Move badge inside image */
.ft-about-intro {
    position: relative;
    padding: 72px 0;
}

.ft-about-intro__media {
    position: relative;
}

.ft-about-intro__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    gap: 28px;
    align-items: center;
}

/* Typography helpers (safe if you already have them) */
.ft-kicker {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    opacity: .78;
    margin-bottom: 10px;
}

.ft-h2 {
    margin: 0 0 12px;
    font-size: clamp(26px, 2.6vw, 40px);
    line-height: 1.12;
}

.ft-p {
    margin: 0 0 18px;
    line-height: 1.6;
    max-width: 62ch;
    opacity: .88;
}

/* Checklist */
.ft-checklist {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px;
}

.ft-checklist li {
    position: relative;
    padding-left: 26px;
    line-height: 1.45;
    opacity: .9;
}

.ft-checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 900;
}

/* Media */
.ft-about-intro__frame {
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
    background: rgba(255, 255, 255, .03);
}

.ft-about-intro__img {
    width: 100%;
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    transition: transform .55s ease;
}

.ft-about-intro__frame:hover .ft-about-intro__img {
    transform: scale(1.08);
}

.ft-about-intro__badge {
    position: absolute;
    bottom: 14px;
    left: 14px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(11, 17, 28, .45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.ft-about-intro__badgeTitle {
    font-weight: 800;
}

.ft-about-intro__badgeText {
    opacity: .85;
    font-size: 13px;
}

/* Actions spacing */
.ft-about-intro__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* -------------------------
   Day / Night theming
   ------------------------- */

/* DARK */
html[data-theme="dark"] .ft-about-intro .ft-kicker,
html[data-theme="dark"] .ft-about-intro .ft-p {
    color: rgba(234, 241, 255, .82);
}

html[data-theme="dark"] .ft-checklist li::before {
    color: var(--ft-accent, #f5c400);
}

/* Dark image */
html[data-theme="dark"] .ft-about-intro__img {
    background-image:
        linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .52)),
        url("https://images.unsplash.com/photo-1523966211575-eb4a01e7dd51?auto=format&fit=crop&w=1600&q=80");
}

/* LIGHT */
html[data-theme="light"] .ft-about-intro {
    background: #ffffff;
    color: #0b111c;
}

html[data-theme="light"] .ft-about-intro .ft-kicker {
    color: rgba(11, 17, 28, .65);
}

html[data-theme="light"] .ft-about-intro .ft-p {
    color: rgba(11, 17, 28, .78);
}

html[data-theme="light"] .ft-about-intro__frame {
    border-color: rgba(11, 17, 28, .10);
    box-shadow: 0 18px 60px rgba(9, 30, 66, .12);
    background: rgba(0, 0, 0, .02);
}

/* Light theme fine-tuning */
html[data-theme="light"] .ft-about-intro__badge {
    background: rgba(255, 255, 255, .85);
    border-color: rgba(11, 17, 28, .12);
    box-shadow: 0 12px 30px rgba(9, 30, 66, .18);
}

html[data-theme="light"] .ft-checklist li::before {
    color: #1d6eff;
}

/* Light image */
html[data-theme="light"] .ft-about-intro__img {
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .08)),
        url("https://images.unsplash.com/photo-1563206767-5b18f218e8de?auto=format&fit=crop&w=1600&q=80");
}

/* Responsive */
@media (max-width: 920px) {
    .ft-about-intro__inner {
        grid-template-columns: 1fr;
    }
}


/* =========================
   ABOUT HERO — LIGHT THEME (clean & readable)
   ========================= */

/* Делаем текст ЧЁРНЫМ */
html[data-theme="light"] .ft-hero--about .ft-hero__kicker {
    color: rgba(11, 17, 28, .55) !important;
}

html[data-theme="light"] .ft-hero--about .ft-hero__lead {
    color: rgba(11, 17, 28, .75);
    text-shadow: none;
}


/* =========================================
   ABOUT HERO — Final tuning (dark image visible + light black text)
   ========================================= */

/* ---------- DARK: image visible but overall dark ---------- */
html[data-theme="dark"] .ft-hero--about .ft-hero__bg {
    /* Keep your dark hero image, but make it more readable/visible */
    filter: brightness(.78) contrast(1.12) saturate(1.05);
}


/* Optional: make hero text extra crisp on dark */
html[data-theme="dark"] .ft-hero--about .ft-hero__title {
    text-shadow: 0 16px 44px rgba(0, 0, 0, .62);
}

html[data-theme="dark"] .ft-hero--about .ft-hero__lead {
    text-shadow: 0 12px 28px rgba(0, 0, 0, .45);
}


/* ---------- LIGHT: black text + slightly more visible image ---------- */


html[data-theme="light"] .ft-hero--about .ft-hero__overlay {
    /* Light veil (not too strong) so image stays visible but text stays clean */
    background:
        radial-gradient(900px 520px at 10% 18%, rgba(29, 110, 255, .10), transparent 60%),
        radial-gradient(760px 520px at 85% 25%, rgba(245, 196, 0, .12), transparent 65%),
        linear-gradient(180deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .50));
}

/* Black text for readability */
html[data-theme="light"] .ft-hero--about .ft-hero__lead {
    color: rgba(11, 17, 28, .75);
    text-shadow: none;
}

/* Light theme ghost button to match black text */
html[data-theme="light"] .ft-hero--about .ft-btn--ghost {
    background: rgb(48 48 48 / 50%);
}

html[data-theme="light"] .ft-hero--about .ft-btn--ghost:hover {
    background: rgb(48 48 48 / 30%) !important;
    transform: translateY(-3px) !important;
    transition: opacity .55s ease, transform .55s ease !important;
}


/* =========================================
   FULL-WIDTH HERO FIX (Home + About)
   Makes hero full-bleed even inside a constrained WP container
   ========================================= */

.ft-hero.ft-hero--home,
.ft-hero.ft-hero--about {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    min-height: clamp(590px, 58vh, 640px) !important;
}


/* Keep content nicely centered (do NOT stretch text to full width) */
.ft-hero.ft-hero--home .ft-hero__inner,
.ft-hero.ft-hero--about .ft-hero__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 18px;
    padding-right: 18px;
}



/* =========================================
   HERO PILLS — visible in dark & light
   ========================================= */

.ft-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}

.ft-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .02em;
    user-select: none;
    white-space: nowrap;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
}

.ft-pill:hover {
    transform: translateY(-1px);
}

/* DARK */
html[data-theme="dark"] .ft-pill {
    color: rgba(234, 241, 255, .92);
    background: rgba(255, 255, 255, .08) ! important;
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .ft-pill:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}

/* Mobile: keep pills readable */
@media (max-width: 520px) {
    .ft-pill {
        font-size: 12px;
        padding: 9px 10px;
    }
}

/* =========================================
   HERO PILLS — LIGHT THEME FIX (contrast)
   ========================================= */

html[data-theme="light"] .ft-pill {
    color: rgba(234, 241, 255, .92);
    background: #0b122052;
    border: 1px solid #0b122052;
}

html[data-theme="light"] .ft-pill:hover {
    background: #0b122052;
    border: 1px solid rgb(0 0 0);
    box-shadow: 0 5px 10px rgb(65 65 65 / 99%);
    transform: translateY(-3px);
    transition: opacity .55s ease, transform .55s ease;
}


/* =========================================
   HERO Buttons — stagger reveal (uses .ft-reveal system)
   ========================================= */

.ft-hero__actions>* {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s ease;
    will-change: transform, opacity;
}

.ft-hero__actions.is-visible>* {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger order */
.ft-hero__actions.is-visible> :nth-child(1) {
    transition-delay: 0ms;
}

.ft-hero__actions.is-visible> :nth-child(2) {
    transition-delay: 140ms;
}

.ft-hero__actions.is-visible> :nth-child(3) {
    transition-delay: 280ms;
}

.ft-hero__actions.is-visible> :nth-child(4) {
    transition-delay: 420ms;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ft-hero__actions>* {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================
   HERO Buttons — stagger reveal (no HTML changes)
   ========================================= */

/* Initial state */
.ft-hero__actions .ft-btn,
.ft-hero__actions .ft-btn--ghost,
.ft-hero__actions a {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .55s ease, transform .55s ease;
    will-change: transform, opacity;
}

/* When the actions block becomes visible */
.ft-hero__actions.is-visible .ft-btn,
.ft-hero__actions.is-visible .ft-btn--ghost,
.ft-hero__actions.is-visible a {
    opacity: 1;
    transform: translateY(0);
}


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    .ft-hero__actions .ft-btn,
    .ft-hero__actions .ft-btn--ghost,
    .ft-hero__actions a {
        transition: none;
        transform: none;
        opacity: 1;
    }
}






/* =========================
   WHY CHOOSE US — 4 cards (Day/Night)
   ========================= */

.ft-why {
    padding: 76px 0;
}

.ft-why__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px;
}

.ft-why__head {
    text-align: center;
    margin-bottom: 26px;
}

.ft-why__lead {
    margin: 12px auto 0;
    max-width: 72ch;
    line-height: 1.6;
    opacity: .88;
}

.ft-why__grid_ab {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ft-whyCard {
    position: relative;
    border-radius: 22px;
    padding: 18px 16px 18px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
    transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease;
    overflow: hidden;
}

.ft-whyCard__icon {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
    margin-bottom: 12px;
}

.ft-whyCard__icon svg {
    width: 22px;
    height: 22px;
    color: currentColor;
}

.ft-whyCard__title {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.2;
}

.ft-whyCard__text {
    margin: 0;
    line-height: 1.55;
    opacity: .86;
}

/* Hover */
.ft-whyCard:hover {
    transform: translateY(-4px);
}

/* DARK */
html[data-theme="dark"] .ft-why {
    background: #0b111c;
    color: rgba(234, 241, 255, .96);
}

html[data-theme="dark"] .ft-whyCard {
    border-color: rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
}

html[data-theme="dark"] .ft-whyCard:hover {
    border-color: rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 22px 70px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .ft-whyCard__icon {
    color: rgba(234, 241, 255, .92);
}

/* LIGHT */
html[data-theme="light"] .ft-why {
    background: #ffffff;
    color: #0b111c;
}

html[data-theme="light"] .ft-whyCard {
    border-color: rgba(11, 17, 28, .10);
    background: rgba(255, 255, 255, .90);
    box-shadow: 0 18px 50px rgba(9, 30, 66, .10);
}

html[data-theme="light"] .ft-whyCard__icon {
    color: rgba(11, 17, 28, .90);
    border-color: rgba(11, 17, 28, .12);
    background: rgba(0, 0, 0, .03);
}

/* Responsive */
@media (max-width: 1020px) {
    .ft-why__grid_ab {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .ft-why {
        padding: 64px 0;
    }

    .ft-why__grid_ab {
        grid-template-columns: 1fr;
    }
}



/* =========================================
   WHY CHOOSE US — FULL WIDTH + LIGHT BG + HOVER like screenshots
   ========================================= */

/* Full-width background */
.ft-why {
    width: 100%;
    margin: 0;
    padding: 84px 0;
}

/* Keep content centered */
.ft-why__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 18px;
}

/* DARK: full width dark panel */
html[data-theme="dark"] .ft-why {
    background: linear-gradient(180deg, rgb(18 31 44) 0%, rgb(18 47 75) 100%) !important;
    color: rgba(234, 241, 255, .96);
}

/* LIGHT: background like screenshot #1 */
html[data-theme="light"] .ft-why {
    background: linear-gradient(180deg,
            #f4f9ff 0%,
            #d5ecff 100%);
}


/* Cards base */
.ft-whyCard {
    border-radius: 22px;
    padding: 18px 16px 18px;
    transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease, color .22s ease;
}

/* DARK cards */
html[data-theme="dark"] .ft-whyCard {
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 18px 55px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .ft-whyCard:hover {
    transform: translateY(-6px);
    background: linear-gradient(180deg, rgb(50 187 255) 0%, rgba(20, 90, 205, 0.92) 100%);
    border-color: rgba(140, 200, 255, 0.55);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35), 0 18px 50px rgba(35, 125, 255, .28);
}

/* LIGHT cards default */
html[data-theme="light"] .ft-whyCard {
    border: 1px solid rgba(11, 17, 28, .10);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 18px 50px rgba(9, 30, 66, .10);
    color: #0b111c;
}

/* LIGHT hover like screenshot #2 */
html[data-theme="light"] .ft-whyCard:hover {
    background: linear-gradient(180deg, #87c6f9 0%, #2697f2 100%);
    border-color: rgba(20, 90, 255, 0.25);
    transform: translateY(-6px);
    box-shadow: 0 30px 80px rgb(18 74 188 / 53%);
}

html[data-theme="light"] .ft-whyCard:hover h3,
html[data-theme="light"] .ft-whyCard:hover p,
html[data-theme="light"] .ft-whyCard:hover a {
    color: #fff !important;
}



/* Make text readable on blue hover */
html[data-theme="light"] .ft-whyCard:hover .ft-whyCard__text {
    opacity: .92;
}

/* Icon bubble adapts on hover */
html[data-theme="light"] .ft-whyCard__icon {
    border: 1px solid rgba(11, 17, 28, .12);
    background: rgba(0, 0, 0, .03);
    color: rgba(11, 17, 28, .92);
}

html[data-theme="light"] .ft-whyCard:hover .ft-whyCard__icon {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .16);
    color: rgba(255, 255, 255, .96);
}

.ft-why {
    max-width: none !important;
}

.ft-why {
    padding-left: 0 !important;
    padding-right: 0 !important;
}






/* =========================
   About Block #1 (UNIQUE): ft-ab1-
   ========================= */

.ft-ab1 {
    position: relative;
    padding: clamp(56px, 7vw, 96px) 0;
}

/* Full-width background per theme */
[data-theme="dark"] .ft-ab1 {
    background: linear-gradient(180deg, rgba(10, 17, 24, 1) 0%, rgba(1, 2, 4, 1) 100%) !important;
}

[data-theme="light"] .ft-ab1 {
    background: radial-gradient(1200px 520px at 35% 35%, rgba(115, 178, 255, 0.32) 0%, rgba(115, 178, 255, 0.12) 45%, rgba(255, 255, 255, 0) 70%),
        linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
}

.ft-ab1__wrap {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.ft-ab1__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(18px, 3vw, 44px);
    align-items: center;
}

/* Text colors per theme */
[data-theme="dark"] .ft-ab1__kicker {
    color: rgba(255, 255, 255, 0.68);
}

[data-theme="dark"] .ft-ab1__title {
    color: rgba(255, 255, 255, 0.96);
}

[data-theme="dark"] .ft-ab1__lead,
[data-theme="dark"] .ft-ab1__text {
    color: rgba(234, 241, 255, 0.78);
}

[data-theme="light"] .ft-ab1__kicker {
    color: rgba(5, 18, 35, 0.55);
}

[data-theme="light"] .ft-ab1__title {
    color: rgba(5, 18, 35, 0.96);
}

[data-theme="light"] .ft-ab1__lead,
[data-theme="light"] .ft-ab1__text {
    color: rgba(5, 18, 35, 0.70);
}

.ft-ab1__kicker {
    letter-spacing: 0.22em;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ft-ab1__title {
    font-size: clamp(34px, 3.4vw, 52px);
    line-height: 1.08;
    margin: 0 0 14px;
}

.ft-ab1__lead {
    font-size: 18px;
    line-height: 1.55;
    margin: 0 0 12px;
}

.ft-ab1__text {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 18px;
}

.ft-ab1__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    display: grid;
    gap: 10px;
}

.ft-ab1__bullet {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 600;
}

.ft-ab1__check {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 22px;
    margin-top: 1px;
    font-size: 14px;
}

[data-theme="dark"] .ft-ab1__check {
    background: rgba(80, 168, 255, 0.20);
    color: rgba(160, 210, 255, 0.95);
    border: 1px solid rgba(80, 168, 255, 0.35);
}

[data-theme="light"] .ft-ab1__check {
    background: rgba(80, 168, 255, 0.14);
    color: rgba(10, 70, 140, 0.90);
    border: 1px solid rgba(80, 168, 255, 0.22);
}

/* Buttons */
.ft-ab1__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.ft-ab1__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.02em;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.ft-ab1__btn--primary {
    background: #48a6ff;
    color: #0b1220;
    box-shadow: 0 18px 40px rgba(72, 166, 255, 0.26);
}

.ft-ab1__btn--primary:hover {
    transform: translateY(-1px);
}

.ft-ab1__btn--ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
}

[data-theme="dark"] .ft-ab1__btn--ghost {
    color: rgba(255, 255, 255, 0.88);
}

[data-theme="light"] .ft-ab1__btn--ghost {
    border-color: rgba(5, 18, 35, 0.16);
    color: rgba(5, 18, 35, 0.88);
}

.ft-ab1__btn--ghost:hover {
    transform: translateY(-1px);
}

/* Media */
.ft-ab1__mediaFrame {
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18);
}

.ft-ab1__img {
    width: 100%;
    height: clamp(280px, 30vw, 420px);
    object-fit: cover;
    display: block;
    transform: scale(1.02);
}

[data-theme="dark"] .ft-ab1__mediaFrame {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="light"] .ft-ab1__mediaFrame {
    border: 1px solid rgba(5, 18, 35, 0.10);
    background: rgba(255, 255, 255, 0.80);
}

.ft-ab1__badge {
    width: fit-content;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

[data-theme="dark"] .ft-ab1__badge {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.88);
}

[data-theme="light"] .ft-ab1__badge {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(5, 18, 35, 0.10);
    color: rgba(5, 18, 35, 0.86);
}

.ft-ab1__badgeTitle {
    font-weight: 900;
    font-size: 16px;
    margin-bottom: 2px;
}

.ft-ab1__badgeSub {
    font-size: 13px;
    opacity: 0.85;
}

/* Responsive */
@media (max-width: 920px) {
    .ft-ab1__grid {
        grid-template-columns: 1fr;
    }

    .ft-ab1__media {
        order: -1;
    }
}

/* =========================
   Block 1: Our Story (ft-story1-*)
   ========================= */

.ft-story1 {
    position: relative;
    overflow: hidden;
    padding: clamp(56px, 6vw, 96px) 0;
    isolation: isolate;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
}

/* Full-width background layer */
.ft-story1__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(0deg, #f4f9ff 0%, #d5ecff 100%);
}

/* Content wrapper */
.ft-story1__wrap {
    position: relative;
    z-index: 1;
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.ft-story1__grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(22px, 3.5vw, 44px);
    align-items: center;
}

.ft-story1__kicker {
    letter-spacing: .22em;
    font-weight: 700;
    font-size: 12px;
    opacity: .7;
    text-transform: uppercase;
}

.ft-story1__title {
    margin: 10px 0 14px;
    line-height: 1.02;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 800;
}

.ft-story1__lead {
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1.55;
    max-width: 58ch;
}

.ft-story1__text {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.65;
    opacity: .92;
    max-width: 68ch;
}

/* List */
.ft-story1__list {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
    display: grid;
    gap: 10px;
}

.ft-story1__li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-weight: 600;
}

.ft-story1__check {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(76, 159, 255, .18);
    border: 1px solid rgba(76, 159, 255, .28);
    flex: 0 0 22px;
}

/* Buttons */
.ft-story1__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ft-story1__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
    will-change: transform;
}

.ft-story1__btn:hover {
    transform: translateY(-2px);
}

.ft-story1__btn--primary {
    background: #4c9fff;
    color: #08131f;
    box-shadow: 0 14px 30px rgba(76, 159, 255, .28);
}

.ft-story1__btn--ghost {
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(0, 0, 0, .10);
    color: #0b1320;
    backdrop-filter: blur(10px);
}

/* Media */
.ft-story1__right {
    position: relative;
}

.ft-story1__media {
    border-radius: 26px;
    overflow: hidden;
    /* IMPORTANT: zoom only inside рамки */
    box-shadow: 0 24px 80px rgba(0, 0, 0, .22);
    background: rgba(255, 255, 255, .15);
    width: 100%;
    max-width: 720px;
    /* можно увеличить до 760 если хочешь */
}

.ft-story1__img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1);
    transition: transform .55s ease;
    will-change: transform;
    object-fit: cover;
}

/* пункт 2: zoom on hover */
.ft-story1__media:hover .ft-story1__img {
    transform: scale(1.08);
}

/* Tag card */
.ft-story1__tag {
    margin-top: 14px;
    width: fit-content;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(0, 0, 0, .10);
    backdrop-filter: blur(10px);
}

.ft-story1__tagTitle {
    font-weight: 900;
    font-size: 16px;
    line-height: 1.2;
}

.ft-story1__tagSub {
    margin-top: 4px;
    opacity: .78;
    font-weight: 700;
    font-size: 13px;
}

/* =========================
   пункт 3: Light theme gradient (dark -> light, opposite of top block)
   DEFAULT is light. (we already set dark->light)
   ========================= */

/* =========================
   пункт 4: Dark theme gradient (dark -> light, but overall dark)
   Supports multiple dark selectors
   ========================= */
body.theme-dark .ft-story1__bg,
body.is-dark .ft-story1__bg,
body.dark .ft-story1__bg,
html[data-theme="dark"] .ft-story1__bg,
body[data-theme="dark"] .ft-story1__bg {
    background: linear-gradient(0deg, rgb(18 31 44) 0%, rgb(18 47 75) 100%) !important;
    color: rgba(234, 241, 255, .96);
}

body.theme-dark .ft-story1,
body.is-dark .ft-story1,
body.dark .ft-story1,
html[data-theme="dark"] .ft-story1,
body[data-theme="dark"] .ft-story1 {
    color: rgba(240, 246, 255, .92);
}

body.theme-dark .ft-story1__btn--ghost,
body.is-dark .ft-story1__btn--ghost,
body.dark .ft-story1__btn--ghost,
html[data-theme="dark"] .ft-story1__btn--ghost,
body[data-theme="dark"] .ft-story1__btn--ghost {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .14);
    color: rgba(240, 246, 255, .92);
}

body.theme-dark .ft-story1__tag,
body.is-dark .ft-story1__tag,
body.dark .ft-story1__tag,
html[data-theme="dark"] .ft-story1__tag,
body[data-theme="dark"] .ft-story1__tag {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .14);
}

/* Responsive */
@media (max-width: 980px) {
    .ft-story1__grid {
        grid-template-columns: 1fr;
    }

    .ft-story1__wrap {
        width: min(1100px, calc(100% - 32px));
    }

    .ft-story1__tag {
        margin-left: 0;
    }
}





/* =========================
   SERVICES 4-CARDS (UNIQUE): ft-svc4-*
   ========================= */

.ft-svc4 {
    position: relative;
    overflow: hidden;
    padding: clamp(64px, 7vw, 104px) 0;
}

/* full width background layer */
.ft-svc4__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Light: vertical soft gradient */
html[data-theme="light"] .ft-svc4__bg {
    background: linear-gradient(180deg, #f6fbff 0%, #d7ecff 100%);
}

/* Dark: vertical gradient dark->slightly lighter */
html[data-theme="dark"] .ft-svc4__bg {
    background: linear-gradient(180deg, rgb(18 31 44) 0%, rgb(18 47 75) 100%) !important;
}

.ft-svc4__wrap {
    position: relative;
    z-index: 1;
    width: min(1200px, calc(100% - 48px));
    margin: 0 auto;
}

.ft-svc4__head {
    text-align: center;
    margin-bottom: 26px;
}

.ft-svc4__kicker {
    letter-spacing: .22em;
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    opacity: .72;
    margin-bottom: 10px;
}

.ft-svc4__title {
    margin: 0 0 12px;
    font-size: clamp(32px, 3.4vw, 50px);
    line-height: 1.08;
}

.ft-svc4__lead {
    margin: 0 auto;
    max-width: 76ch;
    line-height: 1.6;
    opacity: .86;
}

/* Grid */
.ft-svc4__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.ft-svc4__card {
    border-radius: 24px;
    overflow: hidden;
    transform: translateZ(0);
}

.ft-svc4__link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Media top */
.ft-svc4__media {
    height: 160px;
    overflow: hidden;
    /* zoom stays inside */
    position: relative;
}

.ft-svc4__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform .6s ease;
    will-change: transform;
}

/* Body */
.ft-svc4__body {
    position: relative;
    padding: 16px 16px 18px;
    transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* Icon bubble */
.ft-svc4__icon {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: -34px;
    border: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .18);
}

.ft-svc4__icon svg {
    width: 22px;
    height: 22px;
}

.ft-svc4__h {
    margin: 10px 0 8px;
    font-size: 18px;
    line-height: 1.2;
    font-weight: 900;
}

.ft-svc4__p {
    margin: 0 0 12px;
    line-height: 1.55;
    opacity: .86;
}

.ft-svc4__cta {
    font-weight: 900;
    letter-spacing: .01em;
    opacity: .9;
}

/* Base styles per theme */
html[data-theme="light"] .ft-svc4 {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
}

html[data-theme="light"] .ft-svc4__body {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(11, 17, 28, .10);
    box-shadow: 0 18px 55px rgba(9, 30, 66, .10);
}

html[data-theme="light"] .ft-svc4__icon {
    background: rgba(255, 255, 255, .78);
    color: rgba(11, 17, 28, .92);
    border-color: rgba(11, 17, 28, .12);
}

html[data-theme="dark"] .ft-svc4 {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
}

html[data-theme="dark"] .ft-svc4__body {
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .10);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .30);
}

html[data-theme="dark"] .ft-svc4__icon {
    background: rgba(255, 255, 255, .08);
    color: rgba(234, 241, 255, .92);
    border-color: rgba(255, 255, 255, .14);
}

/* Hover: image zoom + card lift */
.ft-svc4__card:hover .ft-svc4__img {
    transform: scale(1.10);
}

.ft-svc4__card:hover .ft-svc4__body {
    transform: translateY(-2px);
}

/* LIGHT hover: blue gradient + white text */
html[data-theme="light"] .ft-svc4__card:hover .ft-svc4__body {
    background: linear-gradient(180deg, #87c6f9 0%, #2697f2 100%);
    border-color: rgba(20, 90, 255, .25);
    color: #fff;
    box-shadow: 0 26px 80px rgba(16, 70, 180, .22);
}

html[data-theme="light"] .ft-svc4__card:hover .ft-svc4__p,
html[data-theme="light"] .ft-svc4__card:hover .ft-svc4__h {
    opacity: .92;
    color: #fff !important;
}

html[data-theme="light"] .ft-svc4__card:hover .ft-svc4__icon {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

/* DARK hover: glass brighter */
html[data-theme="dark"] .ft-svc4__card:hover .ft-svc4__body {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .42);
}

/* Footer button */
.ft-svc4__footer {
    margin-top: 22px;
    display: flex;
    justify-content: center;
}

.ft-svc4__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: .02em;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

html[data-theme="light"] .ft-svc4__btn {
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(11, 17, 28, .12);
    color: #0b111c;
    box-shadow: 0 18px 55px rgba(9, 30, 66, .10);
}

html[data-theme="dark"] .ft-svc4__btn {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: rgba(234, 241, 255, .92);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .30);
}

.ft-svc4__btn:hover {
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1080px) {
    .ft-svc4__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .ft-svc4__wrap {
        width: min(1200px, calc(100% - 32px));
    }

    .ft-svc4__grid {
        grid-template-columns: 1fr;
    }

    .ft-svc4__media {
        height: 170px;
    }
}




/* =========================================
   FT SVC4 — Equal card heights + aligned bottom CTA
   (works with your exact HTML structure)
   ========================================= */

/* Make grid items stretch to same height */
.ft-svc4__grid {
    align-items: stretch;
}

/* Card takes full available height */
.ft-svc4__card {
    height: 100%;
}

/* IMPORTANT: <a> is the real container (it wraps everything) */
.ft-svc4__link {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Media fixed height so all cards match at top */
.ft-svc4__media {
    height: 200px;
    /* you can change: 180–230 */
    overflow: hidden;
    border-radius: 22px 22px 0 0;
    /* keep rounded only on top */
    flex: 0 0 auto;
}

.ft-svc4__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    transition: transform .55s ease;
}

/* Zoom image inside frame on hover */
.ft-svc4__card:hover .ft-svc4__img {
    transform: scale(1.07);
}

/* Body fills the rest of card height */
.ft-svc4__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Push "Learn more" to the bottom so it's aligned in all cards */
.ft-svc4__cta {
    margin-top: auto;
}




/* =========================
   CTA Block (Variant 1) - ft-cta1
   No image, premium gradient, full-width
   ========================= */

.ft-cta1 {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: clamp(56px, 6vw, 90px) 0;
}

/* Background layer (full width) */
.ft-cta1__bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(1200px 500px at 20% 20%, rgba(78, 178, 255, 0.24), rgba(78, 178, 255, 0) 55%),
        radial-gradient(900px 400px at 80% 65%, rgba(13, 92, 255, 0.16), rgba(13, 92, 255, 0) 55%),
        linear-gradient(180deg, #f6fbff 0%, #cfe8ff 45%, #eef7ff 100%);
}

/* Inner layout */
.ft-cta1__inner {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Premium glass card */
.ft-cta1__card {
    border-radius: 28px;
    padding: clamp(26px, 3.2vw, 44px);
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
        0 28px 80px rgba(2, 12, 24, 0.12),
        0 10px 30px rgba(2, 12, 24, 0.10);
}

/* Typography */
.ft-cta1__kicker {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.70);
    margin-bottom: 12px;
}

.ft-cta1__title {
    margin: 0 0 12px 0;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    font-size: clamp(28px, 3.3vw, 46px);
    color: #0b1320;
}

.ft-cta1__text {
    margin: 0 0 18px 0;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(15, 23, 42, 0.78);
    max-width: 72ch;
}

/* Bullets */
.ft-cta1__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 22px 0;
    display: grid;
    gap: 10px;
}

.ft-cta1__li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(15, 23, 42, 0.80);
    font-weight: 600;
}

.ft-cta1__dot {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.20);
    border: 1px solid rgba(56, 189, 248, 0.35);
    box-shadow: 0 10px 20px rgba(56, 189, 248, 0.15);
    position: relative;
}

.ft-cta1__dot::after {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 999px;
    background: rgba(56, 189, 248, 0.85);
}

/* Actions */
.ft-cta1__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.ft-cta1__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 800;
    letter-spacing: 0.01em;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    user-select: none;
    will-change: transform;
}

.ft-cta1__btn--primary {
    background: linear-gradient(180deg, #47b7ff 0%, #1e88ff 100%);
    color: #ffffff;
    box-shadow: 0 18px 40px rgba(30, 136, 255, 0.30);
}

.ft-cta1__btn--ghost {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(15, 23, 42, 0.16);
    color: rgba(15, 23, 42, 0.88);
}

.ft-cta1__btn:hover {
    transform: translateY(-2px);
}

.ft-cta1__btn--primary:hover {
    box-shadow: 0 22px 54px rgba(30, 136, 255, 0.40);
    color: #000;
}

.ft-cta1__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.70);
    border-color: rgba(15, 23, 42, 0.22);
}

/* Meta line */
.ft-cta1__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 18px;
    color: rgba(15, 23, 42, 0.62);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.ft-cta1__sep {
    opacity: .6;
}

/* Responsive */
@media (max-width: 720px) {
    .ft-cta1__inner {
        width: min(1200px, calc(100% - 26px));
    }

    .ft-cta1__card {
        border-radius: 22px;
    }
}

/* =========================
   Dark theme support (safe selectors)
   Try multiple selectors to match your theme toggle
   ========================= */

body[data-theme="dark"] .ft-cta1__bg,
body.theme-dark .ft-cta1__bg,
body.dark .ft-cta1__bg,
body.is-dark .ft-cta1__bg,
html[data-theme="dark"] .ft-cta1__bg {
    background: radial-gradient(1200px 500px at 20% 20%, rgba(78, 178, 255, 0.20), rgba(78, 178, 255, 0) 55%),
        radial-gradient(900px 400px at 80% 65%, rgba(13, 92, 255, 0.14), rgba(13, 92, 255, 0) 55%),
        linear-gradient(180deg, rgb(18 33 48) 0%, rgb(18 46 74) 100%);
}

body[data-theme="dark"] .ft-cta1__card,
body.theme-dark .ft-cta1__card,
body.dark .ft-cta1__card,
body.is-dark .ft-cta1__card,
html[data-theme="dark"] .ft-cta1__card {
    background: rgba(8, 12, 18, 0.58);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.55),
        0 12px 34px rgba(0, 0, 0, 0.35);
}

body[data-theme="dark"] .ft-cta1__kicker,
body.theme-dark .ft-cta1__kicker,
body.dark .ft-cta1__kicker,
body.is-dark .ft-cta1__kicker,
html[data-theme="dark"] .ft-cta1__kicker {
    color: rgba(234, 241, 255, 0.70);
}

body[data-theme="dark"] .ft-cta1__title,
body.theme-dark .ft-cta1__title,
body.dark .ft-cta1__title,
body.is-dark .ft-cta1__title,
html[data-theme="dark"] .ft-cta1__title {
    color: rgba(255, 255, 255, 0.96);
}

body[data-theme="dark"] .ft-cta1__text,
body.theme-dark .ft-cta1__text,
body.dark .ft-cta1__text,
body.is-dark .ft-cta1__text,
html[data-theme="dark"] .ft-cta1__text {
    color: rgba(234, 241, 255, 0.72);
}

body[data-theme="dark"] .ft-cta1__li,
body.theme-dark .ft-cta1__li,
body.dark .ft-cta1__li,
body.is-dark .ft-cta1__li,
html[data-theme="dark"] .ft-cta1__li {
    color: rgba(234, 241, 255, 0.80);
}

body[data-theme="dark"] .ft-cta1__btn--ghost,
body.theme-dark .ft-cta1__btn--ghost,
body.dark .ft-cta1__btn--ghost,
body.is-dark .ft-cta1__btn--ghost,
html[data-theme="dark"] .ft-cta1__btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(234, 241, 255, 0.88);
}

body[data-theme="dark"] .ft-cta1__btn--ghost:hover,
body.theme-dark .ft-cta1__btn--ghost:hover,
body.dark .ft-cta1__btn--ghost:hover,
body.is-dark .ft-cta1__btn--ghost:hover,
html[data-theme="dark"] .ft-cta1__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.20);
}

body[data-theme="dark"] .ft-cta1__meta,
body.theme-dark .ft-cta1__meta,
body.dark .ft-cta1__meta,
body.is-dark .ft-cta1__meta,
html[data-theme="dark"] .ft-cta1__meta {
    color: rgba(234, 241, 255, 0.56);
}




/* =========================
   SERVICES HERO — ft-srvhero (UNIQUE)
   ========================= */

/* =========================
   SERVICES HERO — ft-srvhero (UNIQUE)
   ========================= */

.ft-srvhero {
    position: relative;
    min-height: 100vh;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* Dark theme */
html[data-theme="dark"] .ft-srvhero__bg {
    background-image:
        linear-gradient(180deg, rgba(1, 2, 4, .75) 0%, rgba(10, 17, 24, .65) 100%),
        url("https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=2000&q=80");
}

/* Inner */
.ft-srvhero__inner {
    position: relative;
    z-index: 1;
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    text-align: center;
}


/* Text */
.ft-srvhero__kicker {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .7;
}

.ft-srvhero__title {
    margin: 0 0 16px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    font-weight: 900;
}

.ft-srvhero__text {
    max-width: 72ch;
    margin: 0 auto 26px;
    font-size: 17px;
    line-height: 1.6;
    opacity: .85;
}

/* Buttons */
.ft-srvhero__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ft-srvhero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .02em;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.ft-srvhero__btn--primary {
    background: linear-gradient(180deg, #47b7ff 0%, #1e88ff 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(30, 136, 255, .35);
}

.ft-srvhero__btn--ghost {
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(0, 0, 0, .14);
    color: #0b111c;
}

/* Dark text & buttons */
html[data-theme="dark"] .ft-srvhero {
    color: rgba(234, 241, 255, .96);
}

html[data-theme="dark"] .ft-srvhero__btn--ghost {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .16);
    color: rgba(234, 241, 255, .9);
}

/* Responsive */
@media (max-width: 640px) {
    .ft-srvhero__inner {
        width: min(1200px, calc(100% - 28px));
    }
}



/* =========================
   SERVICES HERO — FIX (LIGHT + HEIGHT)
   ========================= */

/* LIGHT theme: stop washing out the image */
html[data-theme="light"] .ft-srvhero__bg {
    /* a little darker overlay so image stays visible + text readable */
    background-image:
        linear-gradient(180deg,
            rgba(245, 250, 255, 0.35) 0%,
            rgba(230, 245, 255, 0.15) 45%,
            rgba(255, 255, 255, 0.10) 100%),
        url("https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=2400&q=80");

    /* IMPORTANT: убираем твой filter, он и “убивает” картинку */
    filter: none !important;
}

/* LIGHT theme: text should be dark (so it looks premium and readable) */
html[data-theme="light"] .ft-srvhero {
    color: #0b111c;
    margin-bottom: 0;
}

html[data-theme="light"] .ft-srvhero__kicker {
    opacity: .75;
}

html[data-theme="light"] .ft-srvhero__text {
    opacity: .82;
}

/* LIGHT theme: buttons */
html[data-theme="light"] .ft-srvhero__btn--ghost {
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(11, 17, 28, .16);
    color: #0b111c;
}

/* If you are logged in (WP admin bar adds extra height) */
body.admin-bar .ft-srvhero {
    min-height: calc(100svh - 142px);
    min-height: calc(100vh - 142px);
}

/* Responsive: smaller header height */
@media (max-width: 768px) {
    .ft-srvhero {
        min-height: calc(100svh - 86px);
        min-height: calc(100vh - 86px);
        padding: 28px 0;
    }

    body.admin-bar .ft-srvhero {
        min-height: calc(100svh - 118px);
        min-height: calc(100vh - 118px);
    }
}


/* =========================================================
   SERVICES HERO — match style like provided banner (A+)
   Scope: .ft-srvhero only
   ========================================================= */

.ft-srvhero {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    display: flex;
    align-items: center;

    /* height fits screen like the banner */
    min-height: calc(100svh - 110px);
    min-height: calc(100vh - 110px);
    padding: 48px 0;
}

body.admin-bar .ft-srvhero {
    min-height: calc(100svh - 142px);
    min-height: calc(100vh - 142px);
    margin-bottom: 0;
}

/* BG layer must exist in HTML: <div class="ft-srvhero__bg"></div> */
.ft-srvhero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

/* Optional extra overlay layer if you use it */
.ft-srvhero__overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* Inner on top */
.ft-srvhero__inner {
    position: relative;
    z-index: 1;
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
    text-align: center;
}

/* Typography = same vibe as your banner */
.ft-srvhero__kicker {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .22em;
    text-transform: uppercase;
    opacity: .7;
}

.ft-srvhero__text {
    max-width: 72ch;
    margin: 0 auto 26px;
    font-size: 17px;
    line-height: 1.6;
    opacity: .85;
}

/* Buttons */
.ft-srvhero__actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ft-srvhero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 22px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .02em;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.ft-srvhero__btn--primary {
    background: linear-gradient(180deg, #47b7ff 0%, #1e88ff 100%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(30, 136, 255, .35);
}

.ft-srvhero__btn--ghost {
    background: rgba(255, 255, 255, .55);
    border: 1px solid rgba(0, 0, 0, .14);
    color: #0b111c;
}

.ft-srvhero__btn:hover {
    transform: translateY(-3px);
    color: #000000;
}

/* -------------------------
   LIGHT theme (like banner)
   Soft bright overlay + DARK text
   ------------------------- */
html[data-theme="light"] .ft-srvhero {
    color: #0b111c;
}

html[data-theme="light"] .ft-srvhero__bg {
    background-image: linear-gradient(180deg,
            rgb(255 255 255 / 70%),
            rgb(255 255 255 / 80%)),
        url("https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&w=2400&q=80");
    filter: brightness(.96) contrast(1.10) saturate(1.08);
    /* важно: не “убивать” картинку */
}


html[data-theme="light"] .ft-srvhero__btn--ghost {
    background: rgba(255, 255, 255, .62);
    border-color: rgba(11, 17, 28, .16);
    color: #0b111c;
}

html[data-theme="light"] .ft-srvhero__btn--ghost:hover {
    background: rgba(255, 255, 255, .32);
}

html[data-theme="light"] .ft-srvhero__title {
    color: #162735;
}

/* -------------------------
   DARK theme (like banner)
   Deep overlay + WHITE text
   ------------------------- */
html[data-theme="dark"] .ft-srvhero {
    color: rgba(234, 241, 255, .96);
}

html[data-theme="dark"] .ft-srvhero__btn--ghost {
    background: rgb(215 215 215 / 60%);
    border-color: rgba(255, 255, 255, .16);
    color: rgba(234, 241, 255, .9);
}

html[data-theme="dark"] .ft-srvhero__btn--ghost:hover {
    background: rgb(215 215 215 / 30%);
}

/* Responsive */
@media (max-width: 768px) {
    .ft-srvhero {
        min-height: calc(100svh - 86px);
        min-height: calc(100vh - 86px);
        padding: 34px 0;
    }

    body.admin-bar .ft-srvhero {
        min-height: calc(100svh - 118px);
        min-height: calc(100vh - 118px);
    }

    .ft-srvhero__inner {
        width: min(1200px, calc(100% - 28px));
    }
}











/* =========================================================
   ft-srv3 — Desktop tabs + Panel, Mobile 4 stacked blocks
   Full-width background + Reveal-ready
   ========================================================= */

.ft-srv3,
.ft-srv3 * {
    box-sizing: border-box;
}

.ft-srv3 {
    position: relative;
    margin-bottom: 0;
}

.ft-srv3__inner {
    width: min(1200px, calc(100% - 56px));
    margin: 0 auto;
}

/* ===== Full-width background inside boxed WP containers ===== */
.ft-srv3__headwrap,
.ft-srv3__desktop,
.ft-srv3m {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* ===== Head ===== */
.ft-srv3__headwrap {
    padding: 70px 0 22px;
    text-align: center;
}

.ft-srv3__kicker {
    display: inline-block;
    letter-spacing: .22em;
    font-weight: 900;
    font-size: 12px;
    opacity: .75;
}

.ft-srv3__title {
    margin: 14px 0 12px;
    font-size: clamp(34px, 4.4vw, 62px);
    line-height: 1.02;
    font-weight: 900;
}

.ft-srv3__subtitle {
    margin: 0 auto;
    max-width: 860px;
    font-size: 16px;
    line-height: 1.7;
    opacity: .82;
}

/* ===== Theme backgrounds (match screenshot) ===== */
html[data-theme="dark"] .ft-srv3__headwrap,
html[data-theme="dark"] .ft-srv3__desktop {
    background:
        radial-gradient(900px 420px at 18% 12%, rgba(71, 183, 255, .18), transparent 60%),
        linear-gradient(180deg, #0b1523 0%, #0e2237 50%, #0b1523 100%);
    color: rgba(234, 241, 255, .96);
}

html[data-theme="light"] .ft-srv3__headwrap,
html[data-theme="light"] .ft-srv3__desktop {
    background:
        radial-gradient(900px 420px at 18% 12%, rgba(71, 183, 255, .18), transparent 60%),
        linear-gradient(180deg, #eef6ff 0%, #e8f3ff 55%, #f6fbff 100%);
    color: #0b111c;
}

.ft-srv3__desktop {
    padding: 10px 0 72px;
}

/* ===== Desktop layout ===== */
.ft-srv3__layout {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 18px;
    align-items: start;
    margin-top: 26px;
}

/* Tabs */
.ft-srv3__tabs {
    position: sticky;
    top: 110px;
}

.ft-srv3__tab {
    width: 100%;
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 14px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 18px;
    cursor: pointer;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: inherit;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
    margin-bottom: 14px;
}

html[data-theme="light"] .ft-srv3__tab {
    border-color: rgba(11, 17, 28, .10);
    background: rgba(255, 255, 255, .70);
}

.ft-srv3__tab:hover {
    transform: translateY(-2px);
}

.ft-srv3__tab.is-active {
    background: rgba(71, 183, 255, .14) !important;
    border-color: rgba(71, 183, 255, .42) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, .22) !important;
}

.ft-srv3__tabIcon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(71, 183, 255, .12);
    border: 1px solid rgba(71, 183, 255, .25);
    font-size: 18px;
}

.ft-srv3__tabText strong {
    display: block;
    font-weight: 900;
    font-size: 17px;
}

.ft-srv3__tabText em {
    display: block;
    font-style: normal;
    font-size: 13px;
    opacity: .78;
    margin-top: 3px;
}

/* Panel */
.ft-srv3__panelWrap {
    min-width: 0;
}

.ft-srv3__panel {
    display: none;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .26);
    padding: 18px 18px 18px;
}

.ft-srv3__panel.is-active {
    display: block;
}

html[data-theme="light"] .ft-srv3__panel {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(11, 17, 28, .10);
    box-shadow: 0 30px 80px rgba(11, 17, 28, .14);
}

.ft-srv3__panelTitle {
    margin: 4px 0 8px;
    font-size: 30px;
    font-weight: 900;
}

.ft-srv3__panelLead {
    margin: 0 0 16px;
    opacity: .82;
    line-height: 1.7;
}

.ft-srv3__panelGrid {
    display: grid;
    grid-template-columns: 1.25fr .95fr;
    gap: 14px;
}

/* Boxes in panel */
.ft-srv3__box {
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .03);
    padding: 16px;
}

html[data-theme="light"] .ft-srv3__box {
    border-color: rgba(11, 17, 28, .08);
    background: rgba(255, 255, 255, .62);
}

.ft-srv3__box--cta {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.ft-srv3__label {
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .12em;
    opacity: .80;
    margin: 2px 0 10px;
}

.ft-srv3__list {
    margin: 0 0 14px 18px;
    padding: 0;
    line-height: 1.75;
    opacity: .92;
}

.ft-srv3__pill {
    display: inline-flex;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid rgba(71, 183, 255, .28);
    background: rgba(71, 183, 255, .10);
    font-weight: 900;
    font-size: 13px;
    margin-bottom: 10px;
}

/* CTA buttons (aligned like screenshot) */
.ft-srv3__cta {
    display: flex;
    gap: 12px;
    align-items: stretch;
    margin-top: 14px;
}

.ft-srv3__btn {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 16px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 900;
    white-space: nowrap;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.ft-srv3__btn--primary {
    color: #fff;
    background: linear-gradient(90deg, #47b7ff 0%, #1e88ff 100%);
    box-shadow: 0 18px 40px rgba(30, 136, 255, .35);
}

.ft-srv3__btn--primary:hover {
    transform: translateY(-3px);
    color: #000;
}

.ft-srv3__btn--ghost {
    color: inherit;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
}

.ft-srv3__btn--ghost:hover {
    background: rgb(255 255 255 / 20%);
    transform: translateY(-3px);
    color: #F2F2F2;
}

html[data-theme="light"] .ft-srv3__btn--ghost {
    background: rgba(255, 255, 255, .70);
    border-color: rgba(11, 17, 28, .16);
}

html[data-theme="light"] .ft-srv3__btn--ghost:hover {
    background: rgb(94 94 94 / 70%);
}

.ft-srv3__note {
    margin: 10px 0 0;
    font-size: 12px;
    opacity: .76;
    line-height: 1.5;
}

/* ===== Mobile blocks ===== */
.ft-srv3__mobile {
    display: none;
}

.ft-srv3m {
    padding: 56px 0;
}

html[data-theme="dark"] .ft-srv3m--main {
    background:
        radial-gradient(900px 420px at 18% 12%, rgba(71, 183, 255, .18), transparent 60%),
        linear-gradient(180deg, #0b1523 0%, #0e2237 50%, #0b1523 100%);
    color: rgba(234, 241, 255, .96);
}

html[data-theme="dark"] .ft-srv3m--alt {
    background:
        radial-gradient(880px 420px at 82% 18%, rgba(6, 56, 165, .22), transparent 58%),
        radial-gradient(700px 360px at 14% 10%, rgba(71, 183, 255, .12), transparent 60%),
        linear-gradient(180deg, #08101b 0%, #0b1a2b 60%, #08101b 100%);
    color: rgba(234, 241, 255, .96);
}

html[data-theme="light"] .ft-srv3m--main {
    background:
        radial-gradient(900px 420px at 18% 12%, rgba(71, 183, 255, .18), transparent 60%),
        linear-gradient(180deg, #eef6ff 0%, #e8f3ff 55%, #f6fbff 100%);
    color: #0b111c;
}

html[data-theme="light"] .ft-srv3m--alt {
    background:
        radial-gradient(880px 420px at 82% 18%, rgba(71, 183, 255, .16), transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #eef7ff 60%, #ffffff 100%);
    color: #0b111c;
}

.ft-srv3m__h3 {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ft-srv3m__h3Icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(71, 183, 255, .12);
    border: 1px solid rgba(71, 183, 255, .25);
    flex: 0 0 40px;
    font-size: 18px;
}

.ft-srv3m__lead {
    margin: 0 0 16px;
    opacity: .82;
    line-height: 1.7;
}

.ft-srv3m__card {
    border-radius: 24px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .24);
}

html[data-theme="light"] .ft-srv3m__card {
    background: rgba(255, 255, 255, .78);
    border-color: rgba(11, 17, 28, .10);
    box-shadow: 0 30px 80px rgba(11, 17, 28, .14);
}

/* ===== Reveal animation ===== */
.ft-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
}

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

/* ===== Breakpoint ===== */
@media (max-width: 912px) {
    .ft-srv3__inner {
        width: min(1200px, calc(100% - 32px));
    }

    .ft-srv3__desktop {
        display: none;
    }

    .ft-srv3__mobile {
        display: block;
    }

    .ft-srv3__headwrap {
        padding: 54px 0 16px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .ft-srv3__title {
        font-size: 34px;
    }

    .ft-srv3m {
        padding: 46px 0;
    }

    .ft-srv3m__h3 {
        font-size: 24px;
    }

    .ft-srv3m__h3Icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 16px;
    }

    .ft-srv3__btn {
        height: 46px;
    }
}





/* =========================================================
   ft-srvwhy — compact premium trust block (full width)
   ========================================================= */
.ft-srvwhy,
.ft-srvwhy * {
    box-sizing: border-box;
}

.ft-srvwhy {
    position: relative;
    overflow-x: hidden;
    width: 100vw;
    max-width: 100vw;
    padding: clamp(64px, 8vw, 96px) 0;
}

.ft-srvwhy__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}


/* Theme backgrounds (match your home block vibe) */
html[data-theme="dark"] .ft-srvwhy {
    background:
        radial-gradient(900px 520px at 16% 18%, rgba(71, 183, 255, .18), transparent 60%),
        linear-gradient(357deg, #1c3047 0%, #0b1d31 55%, #1c3048 100%);
    color: rgba(234, 241, 255, .96);
}

html[data-theme="light"] .ft-srvwhy {
    background:
        radial-gradient(900px 520px at 16% 18%, rgba(71, 183, 255, .18), transparent 60%),
        linear-gradient(180deg, #eef6ff 0%, #e8f3ff 55%, #f6fbff 100%);
    color: #0b111c;
    margin-bottom: 0;
}

.ft-srvwhy__grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
    align-items: center;
}

.ft-srvwhy__kicker {
    display: inline-block;
    letter-spacing: .22em;
    font-weight: 900;
    font-size: 12px;
    opacity: .75;
}

.ft-srvwhy__title {
    margin: 12px 0 12px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.03;
    font-weight: 900;
}

.ft-srvwhy__lead {
    margin: 0 0 18px;
    max-width: 560px;
    line-height: 1.75;
    opacity: .85;
}

.ft-srvwhy__bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 18px;
    display: grid;
    gap: 10px;
}

.ft-srvwhy__bullets li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    line-height: 1.6;
    opacity: .92;
}

.ft-srvwhy__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    margin-top: 6px;
    background: rgba(71, 183, 255, .9);
    box-shadow: 0 0 0 6px rgba(71, 183, 255, .12);
    flex: 0 0 10px;
}

.ft-srvwhy__mini {
    font-size: 13px;
    opacity: .80;
}

/* Cards */
.ft-srvwhy__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 18px;
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
}

html[data-theme="light"] .ft-srvwhy__cards {
    border-color: rgba(11, 17, 28, .10);
    background: rgba(255, 255, 255, .70);
    box-shadow: 0 30px 80px rgba(11, 17, 28, .14);
}

.ft-srvwhy__card {
    border-radius: 20px;
    padding: 16px 16px 14px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .03);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
    min-height: 132px;
}

html[data-theme="light"] .ft-srvwhy__card {
    border-color: rgba(11, 17, 28, .08);
    background: rgba(255, 255, 255, .60);
}

.ft-srvwhy__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
    border-color: rgba(71, 183, 255, .30);
}

.ft-srvwhy__ico {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(71, 183, 255, .12);
    border: 1px solid rgba(71, 183, 255, .25);
    margin-bottom: 10px;
    color: rgba(71, 183, 255, .95);
}

.ft-srvwhy__ico svg {
    width: 22px;
    height: 22px;
}

.ft-srvwhy__h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 900;
}

.ft-srvwhy__p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    opacity: .82;
}

/* ===== Responsive ===== */
@media (max-width: 912px) {
    .ft-srvwhy {
        padding: 56px 0;
    }

    .ft-srvwhy__inner {
        width: min(1200px, calc(100% - 32px));
    }

    .ft-srvwhy__grid {
        grid-template-columns: 1fr;
    }

    .ft-srvwhy__lead {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .ft-srvwhy__cards {
        grid-template-columns: 1fr;
        padding: 14px;
    }
}

/* ===== Reveal (if not already globally defined) ===== */
.ft-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
}







/* =========================================================
   CONTACT PAGE — First Tech Security
   Blocks: ft-cthero / ft-ctcards / ft-ctform / ft-cttrust
   ========================================================= */
.ft-cthero,
.ft-ctcards,
.ft-ctform,
.ft-cttrust,
.ft-cthero *,
.ft-ctcards *,
.ft-ctform *,
.ft-cttrust * {
    box-sizing: border-box;
}

/* ---------- Shared full-width section behavior ---------- */
.ft-cthero,
.ft-ctcards,
.ft-ctform,
.ft-cttrust {
    position: relative;
    overflow-x: hidden;
    width: 100vw;
    max-width: 100vw;
}

/* ---------- Theme backgrounds (same vibe as Services) ---------- */
html[data-theme="dark"] .ft-cthero,
html[data-theme="dark"] .ft-ctcards,
html[data-theme="dark"] .ft-ctform,
html[data-theme="dark"] .ft-cttrust {
    color: rgba(234, 241, 255, .96);
    background:
        radial-gradient(900px 520px at 18% 18%, rgba(71, 183, 255, .18), transparent 60%),
        radial-gradient(700px 420px at 88% 30%, rgba(6, 56, 165, .18), transparent 55%),
        linear-gradient(180deg, #0b1523 0%, #0e2237 55%, #0b1523 100%);
}

html[data-theme="light"] .ft-cthero,
html[data-theme="light"] .ft-ctcards,
html[data-theme="light"] .ft-ctform,
html[data-theme="light"] .ft-cttrust {
    color: #0b111c;
    background:
        radial-gradient(900px 520px at 18% 18%, rgba(71, 183, 255, .14), transparent 60%),
        radial-gradient(700px 420px at 88% 30%, rgba(71, 183, 255, .10), transparent 55%),
        linear-gradient(180deg, #f6fbff 0%, #eaf5ff 55%, #ffffff 100%);
}

/* ---------- Inner container ---------- */
.ft-cthero__inner,
.ft-ctcards__inner,
.ft-ctform__inner,
.ft-cttrust__inner {
    width: min(1200px, calc(100% - 56px));
    margin: 0 auto;
}

/* =========================================================
   1) HERO
   ========================================================= */
.ft-cthero {
    padding: clamp(64px, 8vw, 92px) 0 32px;
}

.ft-cthero__kicker {
    display: inline-block;
    letter-spacing: .22em;
    font-weight: 900;
    font-size: 12px;
    opacity: .78;
}

.ft-cthero__title {
    margin: 14px 0 12px;
    font-size: clamp(34px, 4.2vw, 60px);
    line-height: 1.04;
    font-weight: 900;
}

.ft-cthero__lead {
    margin: 0;
    max-width: 760px;
    line-height: 1.75;
    opacity: .86;
}

/* =========================================================
   2) CONTACT METHODS
   ========================================================= */
.ft-ctcards {
    padding: 80px 0;
    margin-bottom: 0;
}

.ft-ctcards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.ft-ctcard {
    border-radius: 22px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 22px 60px rgba(0, 0, 0, .18);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

html[data-theme="light"] .ft-ctcard {
    border-color: rgba(11, 17, 28, .10);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 22px 60px rgba(11, 17, 28, .12);
}

.ft-ctcard:hover {
    transform: translateY(-6px);
    background: linear-gradient(180deg, rgb(50 187 255) 0%, rgba(20, 90, 205, 0.92) 100%);
    border-color: rgba(140, 200, 255, 0.55);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35), 0 18px 50px rgba(35, 125, 255, .28);
}

html[data-theme="light"] .ft-ctcard:hover {
    background: linear-gradient(180deg, #87c6f9 0%, #2697f2 100%);
    border-color: rgba(20, 90, 255, 0.25);
    transform: translateY(-6px);
    box-shadow: 0 30px 80px rgb(18 74 188 / 53%);
}

html[data-theme="light"] .ft-ctcard:hover .ft-ctcard__h3,
html[data-theme="light"] .ft-ctcard:hover .ft-ctcard__p,
html[data-theme="light"] .ft-ctcard:hover .ft-ctcard__link {
    color: #ffffff;
}

html[data-theme="light"] .ft-ctcard .ft-ctcard__link:hover {
    color: #87c6f9;
}

html[data-theme="light"] .ft-ctcard:hover .ft-ctcard__icon,
html[data-theme="dark"] .ft-ctcard:hover .ft-ctcard__icon {
    color: rgb(255 255 255 / 95%);
    background: rgb(255 255 255 / 36%);
    border: 1px solid rgb(255 255 255 / 41%);
}

.ft-ctcard__icon {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    color: rgba(71, 183, 255, .95);
    background: rgba(71, 183, 255, .12);
    border: 1px solid rgba(71, 183, 255, .25);
    margin-bottom: 10px;
}

.ft-ctcard__icon svg {
    width: 22px;
    height: 22px;
}

.ft-ctcard__h3 {
    margin: 0 0 6px;
    font-weight: 900;
    font-size: 16px;
}

.ft-ctcard__p {
    margin: 0 0 10px;
    opacity: .84;
    line-height: 1.65;
    font-size: 13px;
}

.ft-ctcard__link {
    color: inherit;
    text-decoration: none;
    font-weight: 900;
    border-bottom: 1px dashed rgba(71, 183, 255, .55);
}

.ft-ctcard__link:hover {
    border-bottom-style: solid;
}

.ft-ctcard__tag {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(71, 183, 255, .26);
    background: rgba(71, 183, 255, .10);
    font-weight: 900;
    font-size: 12px;
    opacity: .92;
}

/* =========================================================
   3) FORM SECTION (WPForms styling scoped)
   ========================================================= */
.ft-ctform {
    padding: 80px 0;
    margin-bottom: 0;
}

.ft-ctform__wrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
    align-items: start;
}

.ft-ctform__kicker {
    display: inline-block;
    letter-spacing: .22em;
    font-weight: 900;
    font-size: 12px;
    opacity: .78;
}

.ft-ctform__title {
    margin: 12px 0 10px;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 900;
    line-height: 1.1;
}

.ft-ctform__lead {
    margin: 0 0 14px;
    line-height: 1.75;
    opacity: .86;
    max-width: 640px;
}

.ft-ctform__bullets {
    margin: 0;
    padding-left: 18px;
    line-height: 1.9;
    opacity: .92;
}

.ft-ctform__bullets li {
    margin: 6px 0;
}

.ft-ctform__card {
    border-radius: 26px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .26);
}

html[data-theme="light"] .ft-ctform__card {
    border-color: rgba(11, 17, 28, .10);
    background: rgba(255, 255, 255, .80);
    box-shadow: 0 30px 80px rgba(11, 17, 28, .14);
}

/* WPForms scoped styling */
.ft-ctform .wpforms-container {
    margin: 0 !important;
}

.ft-ctform .wpforms-field-label {
    font-weight: 900 !important;
}

.ft-ctform input[type="text"],
.ft-ctform input[type="email"],
.ft-ctform input[type="tel"],
.ft-ctform textarea {
    width: 100% !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    background: rgba(255, 255, 255, .06) !important;
    color: inherit !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
}

html[data-theme="light"] .ft-ctform input[type="text"],
html[data-theme="light"] .ft-ctform input[type="email"],
html[data-theme="light"] .ft-ctform input[type="tel"],
html[data-theme="light"] .ft-ctform textarea {
    border-color: rgba(11, 17, 28, .14) !important;
    background: rgba(255, 255, 255, .88) !important;
}

.ft-ctform textarea {
    min-height: 120px !important;
    resize: vertical;
}

.ft-ctform input:focus,
.ft-ctform textarea:focus {
    outline: none !important;
    border-color: rgba(71, 183, 255, .55) !important;
    box-shadow: 0 0 0 6px rgba(71, 183, 255, .14) !important;
}

/* WPForms submit button */
.ft-ctform .wpforms-submit {
    width: 100% !important;
    height: 50px !important;
    border-radius: 999px !important;
    border: 0 !important;
    font-weight: 900 !important;
    background: linear-gradient(90deg, #47b7ff 0%, #1e88ff 100%) !important;
    box-shadow: 0 18px 40px rgba(30, 136, 255, .35) !important;
}

.ft-ctform .wpforms-submit:hover {
    transform: translateY(-2px);
}

.ft-ctform .wpforms-submit:active {
    transform: translateY(0);
}

/* =========================================================
   4) TRUST LINE
   ========================================================= */
.ft-cttrust {
    padding: 50px 0 clamp(48px, 6vw, 58px);
}

.ft-cttrust__line {
    text-align: center;
    font-size: 13px;
    opacity: .82;
    padding-top: 10px;
}

/* =========================================================
   Responsive (912 -> 480)
   ========================================================= */
@media (max-width: 912px) {

    .ft-cthero__inner,
    .ft-ctcards__inner,
    .ft-ctform__inner,
    .ft-cttrust__inner {
        width: min(1200px, calc(100% - 32px));
    }

    .ft-ctcards__grid {
        grid-template-columns: 1fr;
    }

    .ft-ctform__wrap {
        grid-template-columns: 1fr;
    }

    .ft-ctform__lead {
        max-width: none;
    }
}







/* =========================================================
   Contact Hero (Home-like) — ft-cthero2
   ========================================================= */
.ft-cthero2,
.ft-cthero2 * {
    box-sizing: border-box;
}

/* =========================================
   CONTACT HERO — FULL SCREEN
========================================= */
.ft-cthero2 {
    position: relative;
    overflow: hidden;
    min-height: 100svh !important;
    min-height: clamp(590px, 58vh, 640px) !important;
    display: grid;
    place-items: center;
    padding: 0;
    margin-bottom: 0;
    width: 100vw;
    max-width: 100vw;
}

.ft-cthero2__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

html[data-theme="light"] .ft-cthero2__bg::after {
    background:
        linear-gradient(180deg,
            rgba(6, 25, 45, 0.35) 0%,
            rgba(6, 25, 45, 0.45) 55%,
            rgba(6, 25, 45, 0.55) 100%);
}

html[data-theme="dark"] .ft-cthero2__bg::after {
    background:
        radial-gradient(900px 520px at 22% 18%, rgba(71, 183, 255, .18), transparent 60%),
        radial-gradient(700px 420px at 85% 28%, rgba(6, 56, 165, .12), transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, .44) 0%, rgba(0, 0, 0, .52) 45%, rgba(0, 0, 0, .60) 100%);
}




/* =========================================
   CONTACT HERO — TEXT
========================================= */
.ft-cthero2__inner {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    text-align: center;
    padding: 80px 0;
    /* безопасно для мобилки */
}

@media (max-width: 768px) {
    .ft-cthero2__inner {
        padding: 64px 0;
    }
}


.ft-cthero2,
.ft-cthero2 * {
    color: #ffffff;
}

.ft-cthero2 h1 {
    font-size: clamp(34px, 5vw, 64px);
    line-height: 1.05;
    margin-bottom: 16px;
}

.ft-cthero2 p {
    font-size: 18px;
    max-width: 720px;
    margin: 0 auto;
    opacity: 0.9;
}



/* Overlay shade (dark glass like Home) */
.ft-cthero2__shade {
    position: absolute;
}

/* Inner container */
.ft-cthero2__inner {
    position: relative;
    z-index: 2;
    width: min(1200px, calc(100% - 56px));
    margin: 0 auto;
    text-align: center;
    padding: clamp(70px, 9vh, 110px) 0;
    color: rgba(234, 241, 255, .96);
}

.ft-cthero2__kicker {
    display: inline-block;
    letter-spacing: .26em;
    font-weight: 900;
    font-size: 12px;
    opacity: .85;
    text-transform: uppercase;
}

.ft-cthero2__title {
    margin: 14px 0 12px;
    font-size: clamp(36px, 4.4vw, 64px);
    line-height: 1.04;
    font-weight: 900;
    text-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.ft-cthero2__lead {
    margin: 0 auto;
    max-width: 860px;
    font-size: clamp(14px, 1.55vw, 18px);
    line-height: 1.75;
    opacity: .86;
    text-shadow: 0 14px 32px rgba(0, 0, 0, .30);
}

/* ================
   Theme images
   Put your image URLs here
================ */

html[data-theme="dark"] .ft-cthero2__bg {
    background-image:
        linear-gradient(180deg,
            rgba(1, 2, 4, .75) 0%,
            rgba(10, 17, 24, .65) 100%),
        url("https://images.unsplash.com/photo-1558346490-a72e53ae2d4f?auto=format&fit=crop&w=2400&q=80");
}

html[data-theme="light"] .ft-cthero2__bg {
    background-image:
        linear-gradient(180deg,
            rgb(255 255 255 / 70%),
            rgb(255 255 255 / 80%)),
        url("https://images.unsplash.com/photo-1558346490-a72e53ae2d4f?auto=format&fit=crop&w=2400&q=80");
    filter: brightness(.96) contrast(1.10) saturate(1.08);
}

html[data-theme="light"] .ft-cthero2__inner .ft-cthero2__kicker,
html[data-theme="light"] .ft-cthero2__inner .ft-cthero2__title {
    color: #000000;
}


/* Responsive */
@media (max-width: 912px) {
    .ft-cthero2__inner {
        width: min(1200px, calc(100% - 32px));
    }
}

@media (max-width: 520px) {
    .ft-cthero2__title {
        line-height: 1.06;
    }

    .ft-cthero2__lead {
        max-width: 520px;
    }
}



/* =========================================================
   CONTACT — Service Area (no map)
   ========================================================= */
.ft-ctarea,
.ft-ctarea * {
    box-sizing: border-box;
}

.ft-ctarea {
    position: relative;
    overflow-x: hidden;
    width: 100vw;
    max-width: 100vw;
    padding: 80px 0;
    margin-bottom: 0;
}

/* Same background vibe as Services (auto theme) */
html[data-theme="dark"] .ft-ctarea {
    color: rgba(234, 241, 255, .96);
    background:
        radial-gradient(900px 520px at 18% 18%, rgba(71, 183, 255, .16), transparent 60%),
        radial-gradient(700px 420px at 88% 30%, rgba(6, 56, 165, .14), transparent 55%),
        linear-gradient(180deg, #0b1523 0%, #0e2237 55%, #0b1523 100%);
}

html[data-theme="light"] .ft-ctarea {
    color: #0b111c;
    background:
        radial-gradient(900px 520px at 18% 18%, rgba(71, 183, 255, .12), transparent 60%),
        radial-gradient(700px 420px at 88% 30%, rgba(71, 183, 255, .10), transparent 55%),
        linear-gradient(180deg, #f6fbff 0%, #eaf5ff 55%, #ffffff 100%);
}

.ft-ctarea__inner {
    width: min(1200px, calc(100% - 56px));
    margin: 0 auto;
}

.ft-ctarea__wrap {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 16px;
    align-items: start;
}

.ft-ctarea__kicker {
    display: inline-block;
    letter-spacing: .26em;
    font-weight: 900;
    font-size: 12px;
    opacity: .82;
}

.ft-ctarea__title {
    margin: 12px 0 10px;
    font-size: clamp(26px, 3.0vw, 40px);
    font-weight: 900;
    line-height: 1.12;
}

.ft-ctarea__lead {
    margin: 0 0 14px;
    line-height: 1.75;
    opacity: .86;
    max-width: 720px;
}

/* Chips */
.ft-ctarea__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.ft-ctchip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 12px;
    border: 1px solid rgba(71, 183, 255, .24);
    background: rgba(71, 183, 255, .10);
    color: inherit;
    opacity: .96;
}

html[data-theme="light"] .ft-ctchip {
    border-color: rgba(11, 17, 28, .12);
    background: rgba(255, 255, 255, .74);
}

.ft-ctarea__note {
    margin-top: 14px;
    font-size: 13px;
    opacity: .82;
}

/* Right card */
.ft-ctarea__card {
    border-radius: 26px;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(255, 255, 255, .04);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .24);
}

html[data-theme="light"] .ft-ctarea__card {
    border-color: rgba(11, 17, 28, .10);
    background: rgba(255, 255, 255, .80);
    box-shadow: 0 30px 80px rgba(11, 17, 28, .14);
}

/* Badge */
.ft-ctarea__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(71, 183, 255, .26);
    background: rgba(71, 183, 255, .10);
    font-weight: 900;
    font-size: 12px;
    margin-bottom: 12px;
}

.ft-ctarea__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #47b7ff;
    box-shadow: 0 0 0 6px rgba(71, 183, 255, .18);
}

.ft-ctarea__h3 {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 900;
}

.ft-ctarea__p {
    margin: 0 0 12px;
    opacity: .84;
    line-height: 1.65;
    font-size: 13px;
}

/* Rows */
.ft-ctarea__list {
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .10);
    padding-top: 12px;
}

html[data-theme="light"] .ft-ctarea__list {
    border-top-color: rgba(11, 17, 28, .10);
}

.ft-ctarea__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

html[data-theme="light"] .ft-ctarea__row {
    border-bottom-color: rgba(11, 17, 28, .10);
}

.ft-ctarea__label {
    font-weight: 900;
    opacity: .92;
    min-width: 92px;
}

.ft-ctarea__val {
    text-align: right;
    opacity: .82;
}

.ft-ctarea__mini {
    margin-top: 12px;
    font-size: 12px;
    opacity: .78;
}

/* Responsive */
@media (max-width: 912px) {
    .ft-ctarea__inner {
        width: min(1200px, calc(100% - 32px));
    }

    .ft-ctarea__wrap {
        grid-template-columns: 1fr;
    }

    .ft-ctarea__val {
        text-align: left;
    }
}









/* =========================================================
   WPForms Free — Contact Form #288 (First Tech Security)
   FIX: layout must be applied to .wpforms-field-container
   ========================================================= */

/* Safety: only form 288 */
#wpforms-288 {
    margin: 0 !important;
}

/* 1) Fields layout (the real wrapper inside the form) */
#wpforms-288 form#wpforms-form-288 .wpforms-field-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
    row-gap: 14px !important;
    align-items: start !important;
}

/* Reset WPForms spacing */
#wpforms-288 form#wpforms-form-288 .wpforms-field {
    padding: 0 !important;
    margin: 0 !important;
}

/* 2) Exact field positions */
#wpforms-288-field_1-container {
    grid-column: 1 / -1 !important;
}

/* Full Name */
#wpforms-288-field_2-container {
    grid-column: 1 / 2 !important;
}

/* Email */
#wpforms-288-field_4-container {
    grid-column: 2 / 3 !important;
}

/* Phone */
#wpforms-288-field_3-container {
    grid-column: 1 / -1 !important;
}

/* Message */

/* 3) Labels */
#wpforms-288 form#wpforms-form-288 .wpforms-field-label {
    display: inline-block !important;
    margin: 0 0 8px !important;
    font-size: 14px !important;
    letter-spacing: .02em !important;
    color: rgba(255, 255, 255, 0.92) !important;
}

#wpforms-288 form#wpforms-form-288 .wpforms-required-label {
    color: #5bbcff !important;
}

/* 4) Inputs + textarea */
#wpforms-288 form#wpforms-form-288 input[type="text"],
#wpforms-288 form#wpforms-form-288 input[type="email"],
#wpforms-288 form#wpforms-form-288 textarea {
    width: 100% !important;
    box-sizing: border-box !important;

    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    /* TEXT WHITE */
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 14px !important;

    padding: 14px 14px !important;
    min-height: 48px !important;

    outline: none !important;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;

    transition: border-color .2s ease, box-shadow .2s ease !important;
}

/* Placeholder */
#wpforms-288 form#wpforms-form-288 input::placeholder,
#wpforms-288 form#wpforms-form-288 textarea::placeholder {
    color: rgba(255, 255, 255, 0.42) !important;
}

/* Focus */
#wpforms-288 form#wpforms-form-288 input[type="text"]:focus,
#wpforms-288 form#wpforms-form-288 input[type="email"]:focus,
#wpforms-288 form#wpforms-form-288 textarea:focus {
    border-color: rgba(91, 188, 255, 0.55) !important;
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.34),
        0 0 0 4px rgba(91, 188, 255, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

/* Textarea */
#wpforms-288 form#wpforms-form-288 textarea {
    min-height: 150px !important;
    resize: vertical !important;
    padding-top: 12px !important;
}

/* Email description (small text) */
#wpforms-288 form#wpforms-form-288 .wpforms-field-description {
    margin: 8px 0 0 !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.62) !important;
}

/* 5) Submit */
#wpforms-288 form#wpforms-form-288 .wpforms-submit-container {
    margin-top: 10px !important;
    padding: 0 !important;
}

#wpforms-submit-288 {
    width: 100% !important;
    border-radius: 999px !important;
    padding: 16px 18px !important;

    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    background: linear-gradient(180deg, rgba(84, 195, 255, 1) 0%, rgba(34, 132, 255, 1) 100%) !important;
    color: #fff !important;

    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: .02em !important;

    box-shadow:
        0 18px 40px rgba(0, 120, 255, 0.22),
        0 10px 24px rgba(0, 0, 0, 0.30) !important;

    transition: transform .15s ease, filter .2s ease !important;
}

#wpforms-submit-288:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.03) !important;
}

/* 6) Text under the form (your custom class) */
.ft-ctform__card-text {
    margin: 12px 0 0 !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    letter-spacing: .01em !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

/* 7) Tablet / Mobile: stack */
@media (max-width: 912px) {
    #wpforms-288 form#wpforms-form-288 .wpforms-field-container {
        grid-template-columns: 1fr !important;
        row-gap: 12px !important;
    }

    #wpforms-288-field_1-container,
    #wpforms-288-field_2-container,
    #wpforms-288-field_4-container,
    #wpforms-288-field_3-container {
        grid-column: 1 / -1 !important;
    }
}


/* =========================================
   Make inputs FULL width inside their blocks
   (matches your red frames)
   ========================================= */

/* Target only this form (ID 288) */
#wpforms-form-288 .wpforms-field input[type="text"],
#wpforms-form-288 .wpforms-field input[type="email"],
#wpforms-form-288 .wpforms-field input[type="tel"],
#wpforms-form-288 .wpforms-field textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Remove WPForms "medium" limit (it caps width) */
#wpforms-form-288 .wpforms-field-medium {
    width: 100% !important;
    max-width: 100% !important;
}



html[data-theme="light"] .ft-ctform input,
html[data-theme="light"] .ft-ctform textarea {
    background: #ffffff;
    color: #0b1526;
}


html[data-theme="light"] #wpforms-288 form#wpforms-form-288 .wpforms-field-label,
html[data-theme="light"] .ft-ctform__card-text {
    color: rgb(36 36 36 / 92%) !important;
}

html[data-theme="light"] #wpforms-288 form#wpforms-form-288 input[type="text"],
html[data-theme="light"] #wpforms-288 form#wpforms-form-288 input[type="email"],
html[data-theme="light"] #wpforms-288 form#wpforms-form-288 textarea {
    color: #4b4b4b !important;
}


html[data-theme="light"] #wpforms-288 form#wpforms-form-288 .wpforms-field-description {
    color: rgb(49 46 46 / 62%) !important;
}









/* =========================================
   FT — Modal (id="ft-consultation-modal") + WPForms 309
   Paste into: Customize → Additional CSS
   ========================================= */
.ft-modal {
    position: fixed;
    inset: 0;
    display: none;
    z-index: 9999;
}

.ft-modal.is-open {
    display: block;
}

.ft-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 20, 40, 0.6);
    backdrop-filter: blur(6px);
}

.ft-modal__dialog {
    position: relative;
    max-width: 520px;
    margin: 4vh auto;
    background: #fff;
    border-radius: 18px;
    padding: 32px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
    animation: modalIn .35s ease;
}

@keyframes modalIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.97);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.ft-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
}






/* =========================================
   FT — Modal (id="ft-consultation-modal") + WPForms 309
   Paste into: Customize → Additional CSS
   ========================================= */

/* 1) Modal wrapper (full screen) */
#ft-consultation-modal.ft-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: none;
    padding: 24px;
    /* space on mobile */
}

/* when open */
#ft-consultation-modal.ft-modal.is-open,
#ft-consultation-modal.ft-modal[aria-hidden="false"] {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* 2) Overlay */
#ft-consultation-modal .ft-modal__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 18, 32, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 3) Dialog card */
#ft-consultation-modal .ft-modal__dialog {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    border-radius: 22px;
    padding: 26px 26px 22px;

    background: rgba(18, 32, 52, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* 4) Close */
#ft-consultation-modal .ft-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

#ft-consultation-modal .ft-modal__close:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
}

/* 5) Title + subtitle */
#ft-consultation-modal .ft-modal__title {
    margin: 0 52px 10px 0;
    color: #fff;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-size: clamp(22px, 2.1vw, 34px);
}

#ft-consultation-modal .ft-modal__subtitle {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.55;
}

/* 6) WPForms inside */
#ft-consultation-modal .wpforms-container {
    margin: 0 !important;
}

#ft-consultation-modal .wpforms-form .wpforms-field {
    margin: 0 0 14px !important;
}

#ft-consultation-modal .wpforms-form label {
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-bottom: 8px !important;
}

#ft-consultation-modal .wpforms-form textarea {
    min-height: 140px !important;
    resize: vertical;
}

/* Placeholder */
#ft-consultation-modal .wpforms-form ::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Focus */
#ft-consultation-modal .wpforms-form input:focus,
#ft-consultation-modal .wpforms-form textarea:focus {
    border-color: rgba(70, 175, 255, 0.9) !important;
    box-shadow: 0 0 0 4px rgba(55, 165, 255, 0.22);
    background: rgba(255, 255, 255, 0.14) !important;
}

/* Description */
#ft-consultation-modal .wpforms-field-description {
    color: rgba(255, 255, 255, 0.68) !important;
    font-size: 13px !important;
    margin-top: 6px !important;
    line-height: 1.35 !important;
}

/* Submit button */
#ft-consultation-modal .wpforms-submit {
    width: 100% !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 14px 18px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px;
    color: #fff !important;
    background: linear-gradient(135deg, #2aa8ff, #2b6bff) !important;
    box-shadow: 0 18px 40px rgba(46, 140, 255, 0.28);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

#ft-consultation-modal .wpforms-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 22px 46px rgba(46, 140, 255, 0.34);
    filter: brightness(1.02);
}

/* Mobile */
@media (max-width: 640px) {
    #ft-consultation-modal.ft-modal {
        padding: 14px;
    }

    #ft-consultation-modal .ft-modal__dialog {
        padding: 20px 18px 18px;
        max-height: calc(100vh - 28px);
    }
}





/* =========================================================
   FT Modal (Consultation) — Fullscreen overlay + Dark/Light
   ========================================================= */

/* 1) Overlay must cover the whole viewport */
#ft-consultation-modal.ft-modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    display: none;
}

#ft-consultation-modal.ft-modal.is-open {
    display: block;
}

#ft-consultation-modal .ft-modal__overlay {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 10, 18, 0.62);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 2) Center dialog */
#ft-consultation-modal .ft-modal__dialog {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%) scale(0.985);
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    overflow: auto;
    /* safety for tiny screens */
    border-radius: 22px;
    padding: 22px 22px 18px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: transform 220ms ease, opacity 220ms ease;
}

#ft-consultation-modal.is-open .ft-modal__dialog {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* Close button */
#ft-consultation-modal .ft-modal__close {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

/* Titles */
#ft-consultation-modal .ft-modal__title {
    margin: 0 54px 6px 0;
    font-size: 34px;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

#ft-consultation-modal .ft-modal__subtitle {
    margin: 0 0 14px 0;
    opacity: 0.9;
}

/* 3) WPForms — compact spacing */
#ft-consultation-modal .wpforms-container {
    margin: 0 !important;
}

#ft-consultation-modal .wpforms-form .wpforms-field {
    padding: 10px 0 !important;
    margin: 0 !important;
}

#ft-consultation-modal .wpforms-form .wpforms-field-label {
    margin: 0 0 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

#ft-consultation-modal .wpforms-form .wpforms-field-description {
    margin-top: 6px !important;
    font-size: 12px !important;
    opacity: 0.85;
}

/* Inputs */
#ft-consultation-modal .wpforms-form input[type="text"],
#ft-consultation-modal .wpforms-form input[type="email"],
#ft-consultation-modal .wpforms-form input[type="tel"],
#ft-consultation-modal .wpforms-form textarea,
#ft-consultation-modal .wpforms-form select {
    width: 100% !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    border: 1px solid transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Textarea compact */
#ft-consultation-modal .wpforms-form textarea {
    min-height: 120px !important;
    resize: vertical;
    /* user-friendly */
}

/* Button */
#ft-consultation-modal .wpforms-form button[type="submit"] {
    width: 100% !important;
    border-radius: 999px !important;
    padding: 14px 18px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em;
    border: 0 !important;
}

/* 4) DARK THEME */
html[data-theme="dark"] #ft-consultation-modal .ft-modal__dialog {
    background: rgba(11, 20, 34, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(235, 244, 255, 0.96);
}

html[data-theme="dark"] #ft-consultation-modal .wpforms-form .wpforms-field-label,
html[data-theme="dark"] #ft-consultation-modal .wpforms-form .wpforms-field-description {
    color: rgba(235, 244, 255, 0.92) !important;
}

html[data-theme="dark"] #ft-consultation-modal .wpforms-form input[type="text"],
html[data-theme="dark"] #ft-consultation-modal .wpforms-form input[type="email"],
html[data-theme="dark"] #ft-consultation-modal .wpforms-form input[type="tel"],
html[data-theme="dark"] #ft-consultation-modal .wpforms-form textarea,
html[data-theme="dark"] #ft-consultation-modal .wpforms-form select {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(235, 244, 255, 0.96) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
}

html[data-theme="dark"] #ft-consultation-modal .wpforms-form input::placeholder,
html[data-theme="dark"] #ft-consultation-modal .wpforms-form textarea::placeholder {
    color: rgba(235, 244, 255, 0.55) !important;
}

html[data-theme="dark"] #ft-consultation-modal .wpforms-form input:focus,
html[data-theme="dark"] #ft-consultation-modal .wpforms-form textarea:focus,
html[data-theme="dark"] #ft-consultation-modal .wpforms-form select:focus {
    border-color: rgba(96, 187, 255, 0.9) !important;
    box-shadow: 0 0 0 4px rgba(58, 167, 255, 0.22) !important;
}

html[data-theme="dark"] #ft-consultation-modal .wpforms-form button[type="submit"] {
    background: linear-gradient(180deg, #49B9FF, #2E86FF) !important;
    color: #fff !important;
    box-shadow: 0 18px 40px rgba(46, 134, 255, 0.35) !important;
}

/* 5) LIGHT THEME (all NOT dark) */
html[data-theme="light"] #ft-consultation-modal .ft-modal__overlay {
    background: rgba(10, 18, 28, 0.22);
    backdrop-filter: blur(8px);
}

html[data-theme="light"] #ft-consultation-modal .ft-modal__dialog {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.07);
    color: rgba(12, 18, 28, 0.94);
    box-shadow: 0 26px 70px rgba(12, 18, 28, 0.18);
}

html[data-theme="light"] #ft-consultation-modal .ft-modal__close {
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.04);
    color: rgba(12, 18, 28, 0.9);
}

html[data-theme="light"] #ft-consultation-modal .wpforms-form .wpforms-field-label,
html[data-theme="light"] #ft-consultation-modal .wpforms-form .wpforms-field-description,
html[data-theme="light"] #ft-consultation-modal .ft-modal__title,
html[data-theme="light"] #ft-consultation-modal .ft-modal__subtitle {
    color: rgba(12, 18, 28, 0.78) !important;
}

html[data-theme="light"] #ft-consultation-modal .wpforms-form input::placeholder,
html[data-theme="light"] #ft-consultation-modal .wpforms-form textarea::placeholder {
    color: #9CA0A6 !important;
    opacity: 1 !important;
}

/* Extra safety for some WPForms fields */
html[data-theme="light"] #ft-consultation-modal .wpforms-form input::-webkit-input-placeholder,
html[data-theme="light"] #ft-consultation-modal .wpforms-form textarea::-webkit-input-placeholder {
    color: #9CA0A6 !important;
}

html[data-theme="light"] #ft-consultation-modal .wpforms-form input:-ms-input-placeholder,
html[data-theme="light"] #ft-consultation-modal .wpforms-form textarea:-ms-input-placeholder {
    color: #9CA0A6 !important;
}

html[data-theme="light"] #ft-consultation-modal .wpforms-form input[type="text"],
html[data-theme="light"] #ft-consultation-modal .wpforms-form input[type="email"],
html[data-theme="light"] #ft-consultation-modal .wpforms-form input[type="tel"],
html[data-theme="light"] #ft-consultation-modal .wpforms-form textarea,
html[data-theme="light"] #ft-consultation-modal .wpforms-form select {
    background: rgba(0, 0, 0, 0.04) !important;
    color: rgba(12, 18, 28, 0.92) !important;
    border-color: rgba(0, 0, 0, 0.07) !important;
}

html[data-theme="light"] #ft-consultation-modal .wpforms-form input:focus,
html[data-theme="light"] #ft-consultation-modal .wpforms-form textarea:focus,
html[data-theme="light"] #ft-consultation-modal .wpforms-form select:focus {
    border-color: rgba(46, 134, 255, 0.55) !important;
    box-shadow: 0 0 0 4px rgba(46, 134, 255, 0.14) !important;
}

html[data-theme="light"] #ft-consultation-modal .wpforms-form button[type="submit"] {
    background: linear-gradient(180deg, #49B9FF, #2E86FF) !important;
    color: #fff !important;
    box-shadow: 0 18px 40px rgba(46, 134, 255, 0.28) !important;
}

/* 6) Mobile tweaks (reduce scroll) */
@media (max-width: 560px) {
    #ft-consultation-modal .ft-modal__dialog {
        width: calc(100vw - 18px);
        max-height: calc(100vh - 18px);
        padding: 16px 16px 14px;
        border-radius: 18px;
    }

    #ft-consultation-modal .ft-modal__title {
        font-size: 28px;
    }

    #ft-consultation-modal .wpforms-form textarea {
        min-height: 96px !important;
    }
}

/* Lock page scroll when modal open */
body.ft-modal-open {
    overflow: hidden !important;
}


/* ===============================
   WPForms Modal Layout Fix
   Full Name = full width
   Email + Phone = one row
================================ */

/* Base grid for WPForms inside modal */
.ft-modal .wpforms-form .wpforms-field-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 3px;
}

/* Full Name — full width */
.ft-modal .wpforms-form .wpforms-field-name {
    grid-column: 1 / -1;
}

/* Email + Phone — one row */
.ft-modal .wpforms-form .wpforms-field-email,
.ft-modal .wpforms-form .wpforms-field-phone {
    grid-column: span 1;
}

/* Message — full width */
.ft-modal .wpforms-form .wpforms-field-textarea {
    grid-column: 1 / -1;
}

/* Submit button — full width */
.ft-modal .wpforms-form .wpforms-submit-container {
    grid-column: 1 / -1;
}

/* Reduce vertical spacing (no scroll) */
.ft-modal .wpforms-form .wpforms-field {
    margin-bottom: 0 !important;
}

/* Helper text under email (align nicely) */
.ft-modal .wpforms-form .wpforms-field-email .wpforms-field-description {
    grid-column: 1 / -1;
    margin-top: 4px;
}

/* ===============================
   Mobile — stack everything
================================ */
@media (max-width: 640px) {
    .ft-modal .wpforms-form .wpforms-field-container {
        grid-template-columns: 1fr;
    }

    .ft-modal {
        padding: 12px;
    }

    .ft-modal__dialog {
        max-height: calc(100vh - 24px);
    }
}



/* ===============================
   FINAL MODAL FORM POLISH
================================ */

/* Make dialog a bit higher visually */
.ft-modal__dialog {
    padding-top: 28px;
    padding-bottom: 28px;
}

/* Tighten spacing between title & form */
.ft-modal__title {
    margin-bottom: 6px;
}

.ft-modal__subtitle {
    margin-bottom: 18px;
}

/* Inputs full visual width */
.ft-modal .wpforms-form input[type="text"],
.ft-modal .wpforms-form input[type="email"],
.ft-modal .wpforms-form input[type="tel"],
.ft-modal .wpforms-form textarea {
    width: 100%;
}

/* Reduce height a bit (more compact, no scroll) */
.ft-modal .wpforms-form input,
.ft-modal .wpforms-form textarea {
    min-height: 46px;
}

/* Message textarea slightly shorter */
.ft-modal .wpforms-form textarea {
    min-height: 110px;
}

/* Button spacing */
.ft-modal .wpforms-submit-container {
    margin-top: 14px;
}

/* Equal top & bottom breathing */
.ft-modal__dialog>*:last-child {
    margin-bottom: 0;
}

/* Mobile micro-tuning */
@media (max-width: 640px) {
    .ft-modal__dialog {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .ft-modal .wpforms-form textarea {
        min-height: 96px;
    }
}

.wpforms-container input.wpforms-field-medium,
.wpforms-container select.wpforms-field-medium,
.wpforms-container .wpforms-field-row.wpforms-field-medium,
.wp-core-ui div.wpforms-container input.wpforms-field-medium,
.wp-core-ui div.wpforms-container select.wpforms-field-medium,
.wp-core-ui div.wpforms-container .wpforms-field-row.wpforms-field-medium {
    max-width: 100% !important;
}


/* =========================
   WPForms success confirmation (FT)
   ========================= */
.ft-confirm {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(10, 16, 28, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 14px 45px rgba(0, 0, 0, .25);
}

html[data-theme="light"] .ft-confirm {
    background: rgba(255, 255, 255, .86);
    border-color: rgba(12, 18, 28, .10);
    box-shadow: 0 14px 45px rgba(12, 18, 28, .10);
}

.ft-confirm__text strong {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    margin: 0 0 6px;
}

.ft-confirm__text p {
    margin: 0;
    opacity: .85;
    font-size: 14px;
    line-height: 1.35;
}

/* Animated check icon */
.ft-confirm__icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 34px;
    position: relative;
    background: linear-gradient(180deg, rgba(70, 176, 255, .95), rgba(34, 115, 255, .95));
    box-shadow: 0 10px 25px rgba(46, 140, 255, .25);
    transform: scale(.85);
    animation: ftPop .35s ease-out forwards;
}

html[data-theme="light"] .ft-confirm__icon {
    box-shadow: 0 10px 25px rgba(46, 140, 255, .18);
}

.ft-confirm__icon::before {
    content: "";
    width: 14px;
    height: 8px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg) scale(0);
    transform-origin: center;
    animation: ftCheck .35s .12s ease-out forwards;
}

@keyframes ftPop {
    0% {
        transform: scale(.7);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes ftCheck {
    0% {
        transform: rotate(-45deg) scale(0);
        opacity: 0;
    }

    100% {
        transform: rotate(-45deg) scale(1);
        opacity: 1;
    }
}



.ft-success {
    text-align: center;
    animation: ftFadeUp .4s ease forwards;
}

.ft-success__icon {
    font-size: 42px;
    color: #22c55e;
    margin-bottom: 12px;
    animation: ftPop .35s ease;
}

@keyframes ftFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes ftPop {
    0% {
        transform: scale(.6);
    }

    100% {
        transform: scale(1);
    }
}


/* Hide calculator summary field in WPForms (Lite workaround) */
.wpforms-form .ft-calc-summary-field {
    display: none !important;
}