/* ═══════════════════════════════════
   TOKENS
═══════════════════════════════════ */
        :root {
            --blue: #0A73FD;
            --blue-dark: #064597;
            --blue-hover: #1A81FF;
            --blue-dim: rgba(10, 115, 253, 0.12);
            --blue-border: rgba(10, 115, 253, 0.28);
            --blue-glow: rgba(10, 115, 253, 0.35);
            --ink: #1E1E1E;
            --ink-mid: #262626;
            --ink-deep: #1A191F;
            --ink-foot: #0E0D12;
            --white: #FFFFFF;
            --white-dim: hwb(0 89% 11% / 0.882);
            --gray-light: #F8FAFC;
            --gray-100: #F1F5F9;
            --gray-200: #E2E8F0;
            --gray-400: #94A3B8;
            --gray-600: #64748B;

            --font-head: 'Space Grotesk', system-ui, sans-serif;
            --font-body: 'DM Sans', system-ui, sans-serif;

            --radius-sm: 8px;
            --radius-md: 16px;
            --radius-lg: 24px;
            --radius-xl: 32px;

            --shadow-sm: 0 2px 12px rgba(0, 0, 0, .06);
            --shadow-md: 0 8px 32px rgba(0, 0, 0, .10);
            --shadow-lg: 0 20px 60px rgba(0, 0, 0, .14);
            --shadow-blue: 0 8px 32px rgba(10, 115, 253, .32);

            --ease: cubic-bezier(0.4, 0, 0.2, 1);
            --dur: 0.32s;

               --t: 0.32s;
        }

        /* ═══════════════════════════════════
   RESET
═══════════════════════════════════ */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }

        body {
            font-family: var(--font-body);
            color: var(--ink);
            background: var(--white);
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

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

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

        button {
            cursor: pointer;
            border: none;
            background: none;
            font-family: inherit;
        }

        ul {
            list-style: none;
        }

        /* ═══════════════════════════════════
   LAYOUT
═══════════════════════════════════ */
        .wrap {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 48px;
        }

        /* ═══════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════ */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
        }

        a:focus-visible,
        button:focus-visible {
            outline: 2px solid var(--blue);
            outline-offset: 3px;
            border-radius: var(--radius-sm);
        }

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

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ═══════════════════════════════════
   SHARED BUTTONS
═══════════════════════════════════ */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--font-body);
            font-weight: 600;
            border-radius: var(--radius-sm);
            transition: all var(--dur) var(--ease);
            white-space: nowrap;
            cursor: pointer;
        }

        .btn-primary {
            background: var(--blue);
            color: var(--white);
            font-size: 15px;
            padding: 13px 26px;
            border: 1px solid transparent;
        }

        .btn-primary:hover {
            background: var(--blue-hover);
            box-shadow: var(--shadow-blue);
            transform: translateY(-2px);
        }

        .btn-primary svg {
            transition: transform var(--dur) var(--ease);
        }

        .btn-primary:hover svg {
            transform: translateX(3px);
        }

        .btn-ghost {
            background: transparent;
            color: rgba(255, 255, 255, .72);
            font-size: 15px;
            padding: 13px 22px;
            border: 1px solid rgba(255, 255, 255, .16);
        }

        .btn-ghost:hover {
            color: var(--white);
            border-color: rgba(255, 255, 255, .34);
            background: rgba(255, 255, 255, .06);
        }

        .btn-sm {
            font-size: 13px;
            padding: 9px 18px;
            border-radius: 6px;
        }

        /* ═══════════════════════════════════
   SECTION HEADER
═══════════════════════════════════ */
        .sec-head {
            text-align: center;
            max-width: 620px;
            margin: 0 auto 72px;
        }

        .eyebrow {
            display: inline-block;
            font-family: var(--font-body);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--blue);
            margin-bottom: 16px;
        }

        .sec-title {
            font-family: var(--font-head);
            font-size: clamp(28px, 3.4vw, 44px);
            font-weight: 700;
            letter-spacing: -1px;
            color: var(--ink);
            line-height: 1.15;
            margin-bottom: 16px;
        }

        .sec-sub {
            font-family: var(--font-body);
            font-size: 17px;
            color: var(--gray-600);
            line-height: 1.70;
        }

        /* ═══════════════════════════════════
   ANIMATION SEEDS (GSAP overrides)
═══════════════════════════════════ */
        .anim-up {
            opacity: 0;
            transform: translateY(30px);
        }

        .anim-fade {
            opacity: 0;
        }

        .anim-right {
            opacity: 0;
            transform: translateX(36px);
        }

        /* ═══════════════════════════════════
   NAVBAR
═══════════════════════════════════ */
        .nav {
            position: fixed;
            inset: 0 0 auto;
            z-index: 900;
            padding: 22px 0;
            transition: padding var(--dur) var(--ease),
                background var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
        }

        .nav.nav--scrolled {
            padding: 14px 0;
            background: rgba(26, 25, 31, .78);
            backdrop-filter: blur(22px);
            -webkit-backdrop-filter: blur(22px);
            border-bottom: 1px solid rgba(255, 255, 255, .07);
            box-shadow: 0 4px 32px rgba(0, 0, 0, .22);
        }

        .nav__row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        /* Logo */
        .nav__logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font-head);
            font-size: 21px;
            font-weight: 700;
            color: var(--white);
            letter-spacing: -.5px;
            flex-shrink: 0;
        }

        .nav__mark {
            width: 34px;
            height: 34px;
            background: var(--blue);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            flex-shrink: 0;
        }

        /* Menu links */
        .nav__menu {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .nav__menu a {
            font-family: var(--font-body);
            font-size: 14px;
            font-weight: 500;
            color: rgba(255, 255, 255, .68);
            padding: 8px 14px;
            border-radius: 6px;
            transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
        }

        .nav__menu a:hover {
            color: var(--white);
            background: rgba(255, 255, 255, .08);
        }

        /* Right controls */
        .nav__controls {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        /* Language toggle */
        .nav__lang {
            display: flex;
            background: rgba(255, 255, 255, .08);
            border: 1px solid rgba(255, 255, 255, .12);
            border-radius: 6px;
            padding: 3px;
            gap: 2px;
        }

        .nav__lang button {
            font-family: var(--font-body);
            font-size: 12px;
            font-weight: 700;
            color: rgba(255, 255, 255, .44);
            padding: 5px 11px;
            border-radius: 4px;
            letter-spacing: .02em;
            transition: all var(--dur) var(--ease);
        }

        .nav__lang button.is-active {
            background: var(--white);
            color: var(--ink-deep);
        }

        /* Hamburger */
        .nav__burger {
            display: none;
            flex-direction: column;
            gap: 5px;
            padding: 6px;
        }

        .nav__burger span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--white);
            border-radius: 2px;
            transition: all var(--dur) var(--ease);
        }

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

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

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

        /* Mobile drawer */
        .nav__drawer {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(26, 25, 31, .97);
            backdrop-filter: blur(24px);
            z-index: 850;
            padding: 96px 32px 48px;
            flex-direction: column;
            gap: 4px;
        }

        .nav__drawer.is-open {
            display: flex;
        }

        .nav__drawer a {
            font-family: var(--font-head);
            font-size: 26px;
            font-weight: 600;
            color: rgba(255, 255, 255, .65);
            padding: 14px 0;
            border-bottom: 1px solid rgba(255, 255, 255, .07);
            transition: color var(--dur) var(--ease);
        }

        .nav__drawer a:hover {
            color: var(--white);
        }

        .nav__drawer .btn-primary {
            margin-top: 28px;
            justify-content: center;
            font-size: 16px;
        }

        /* ═══════════════════════════════════
   HERO
═══════════════════════════════════ */
        .hero {
            min-height: 100vh;
            background: var(--ink-deep);
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            padding: 130px 0 90px;
        }

        /* Grid texture */
        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(10, 115, 253, .04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(10, 115, 253, .04) 1px, transparent 1px);
            background-size: 56px 56px;
            pointer-events: none;
        }

        /* Ambient orbs */
        .hero__orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            pointer-events: none;
        }

        .hero__orb-a {
            width: 520px;
            height: 520px;
            background: rgba(10, 115, 253, .16);
            top: -130px;
            right: -90px;
        }

        .hero__orb-b {
            width: 320px;
            height: 320px;
            background: rgba(6, 69, 151, .18);
            bottom: 60px;
            left: 6%;
        }

        /* Layout */
        .hero__grid {
            display: grid;
            grid-template-columns: 1.05fr 1fr;
            align-items: center;
            gap: 80px;
            position: relative;
            z-index: 1;
        }

        /* Left */
        .hero__badge {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: rgba(10, 115, 253, .12);
            border: 1px solid rgba(10, 115, 253, .30);
            color: #93C5FD;
            font-family: var(--font-body);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            padding: 7px 16px;
            border-radius: 100px;
            margin-bottom: 30px;
        }

        .hero__badge-dot {
            width: 6px;
            height: 6px;
            background: #60A5FA;
            border-radius: 50%;
            flex-shrink: 0;
            animation: blink 2.2s ease-in-out infinite;
        }

        @keyframes blink {

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

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

        .hero__h1 {
            font-family: var(--font-head);
            font-size: clamp(38px, 5.2vw, 66px);
            font-weight: 700;
            line-height: 1.06;
            letter-spacing: -2px;
            color: var(--white);
            margin-bottom: 26px;
        }

        .hero__h1 em {
            font-style: normal;
            background: linear-gradient(118deg, #93C5FD 0%, var(--blue) 55%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero__lead {
            font-family: var(--font-body);
            font-size: 18px;
            font-weight: 400;
            line-height: 1.70;
            color: rgba(255, 255, 255, .50);
            max-width: 460px;
            margin-bottom: 44px;
        }

        .hero__ctas {
            display: flex;
            align-items: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        /* Right mosaic */
        .hero__visual {
            position: relative;
            height: 560px;
        }

        /* 3-image editorial composition */
        .mosaic__img {
            position: absolute;
            overflow: hidden;
            box-shadow: 0 24px 64px rgba(0, 0, 0, .40);
        }

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

        .mosaic__img--a {
            width: 63%;
            height: 58%;
            top: 0;
            right: 0;
            border-radius: 20px 20px 6px 20px;
            /* Blue halo */
            outline: 1px solid rgba(10, 115, 253, .20);
            outline-offset: 6px;
        }

        .mosaic__img--b {
            width: 50%;
            height: 46%;
            bottom: 0;
            left: 0;
            border-radius: 20px 6px 20px 20px;
        }

        .mosaic__img--c {
            width: 36%;
            height: 34%;
            bottom: 8%;
            right: 3%;
            border-radius: 14px;
            border: 3px solid var(--ink-deep);
            z-index: 3;
        }

        /* Floating metric card */
        .hero__metric {
            position: absolute;
            top: 34%;
            left: -22px;
            background: rgba(20, 19, 26, .92);
            backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, .10);
            border-radius: 16px;
            padding: 18px 22px;
            min-width: 176px;
            z-index: 4;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .40),
                inset 0 1px 0 rgba(255, 255, 255, .06);
        }

        .hero__metric-val {
            font-family: var(--font-head);
            font-size: 30px;
            font-weight: 700;
            color: var(--white);
            letter-spacing: -1.5px;
            line-height: 1;
            margin-bottom: 5px;
        }

        .hero__metric-val span {
            color: var(--blue);
        }

        .hero__metric-label {
            font-family: var(--font-body);
            font-size: 12px;
            font-weight: 500;
            color: rgba(255, 255, 255, .44);
        }

        /* Tag pill */
        .hero__tag {
            position: absolute;
            top: 6%;
            left: 12%;
            background: var(--blue);
            color: var(--white);
            font-family: var(--font-body);
            font-size: 12px;
            font-weight: 600;
            padding: 9px 18px;
            border-radius: 100px;
            z-index: 4;
            box-shadow: var(--shadow-blue);
            letter-spacing: .02em;
        }

        /* SVG geometric accents */
        .hero__geo {
            position: absolute;
            pointer-events: none;
            z-index: 2;
        }

        .hero__geo--tl {
            top: -20px;
            left: -16px;
            width: 110px;
            height: 110px;
            opacity: .13;
        }

        .hero__geo--br {
            bottom: 42px;
            right: -8px;
            width: 90px;
            height: 90px;
            opacity: .09;
        }

        /* ═══════════════════════════════════
   CREDIBILITY
═══════════════════════════════════ */
        .cred {
            background: var(--gray-light);
            border-top: 1px solid var(--gray-200);
            border-bottom: 1px solid var(--gray-200);
        }

        .cred__row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
        }

        .cred__stat {
            padding: 56px 28px;
            text-align: center;
            position: relative;
        }

        .cred__stat:not(:last-child)::after {
            content: '';
            position: absolute;
            right: 0;
            top: 28%;
            bottom: 28%;
            width: 1px;
            background: var(--gray-200);
        }

        .cred__num {
            font-family: var(--font-head);
            font-size: 54px;
            font-weight: 700;
            letter-spacing: -2.5px;
            color: var(--ink);
            line-height: 1;
            margin-bottom: 10px;
        }

        .cred__num .val {
            color: var(--ink);
        }

        .cred__num .suf {
            color: var(--blue);
        }

        .cred__label {
            font-family: var(--font-body);
            font-size: 14px;
            font-weight: 500;
            color: var(--gray-600);
            line-height: 1.50;
        }

        /* ═══════════════════════════════════
   SERVICES
═══════════════════════════════════ */
        .services {
            padding: 120px 0;
            background: var(--white);
        }

        /* Bento grid */
        .svc-bento {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: 260px 260px;
            gap: 18px;
        }

        .svc-card {
            position: relative;
            border-radius: var(--radius-xl);
            overflow: hidden;
            cursor: pointer;
            transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
        }

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

        /* Grid placement */
        .svc-card--web {
            grid-column: 1 / 7;
            grid-row: 1 / 3;
        }

        .svc-card--tech {
            grid-column: 7 / 10;
            grid-row: 1 / 2;
        }

        .svc-card--mkt {
            grid-column: 10 / 13;
            grid-row: 1 / 2;
        }

        .svc-card--brand {
            grid-column: 7 / 13;
            grid-row: 2 / 3;
        }

        /* Image layer */
        .svc-bg {
            position: absolute;
            inset: 0;
            overflow: hidden;
        }

        .svc-bg img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(100%) brightness(.30);
            transition: filter .60s cubic-bezier(.4, 0, .2, 1),
                transform .60s cubic-bezier(.4, 0, .2, 1);
        }

        .svc-card:hover .svc-bg img {
            filter: grayscale(0%) brightness(.32);
            transform: scale(1.07);
        }

        /* Color overlay */
        .svc-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(155deg,
                    rgba(10, 115, 253, .07) 0%,
                    rgba(0, 0, 0, .78) 100%);
            transition: background var(--dur) var(--ease);
        }

        .svc-card:hover .svc-overlay {
            background: linear-gradient(155deg,
                    rgba(10, 115, 253, .14) 0%,
                    rgba(0, 0, 0, .62) 100%);
        }

        /* Base backgrounds (visible before hover image) */
        .svc-card--web {
            background: var(--ink-deep);
        }

        .svc-card--tech {
            background: #0E1A2D;
        }

        .svc-card--mkt {
            background: #0D1420;
        }

        .svc-card--brand {
            background: #0A1318;
        }

        /* Card content */
        .svc-body {
            position: relative;
            z-index: 1;
            padding: 36px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }

        .svc-card--web .svc-body {
            padding: 44px;
        }

        .svc-icon {
            width: 48px;
            height: 48px;
            background: rgba(10, 115, 253, .16);
            border: 1px solid rgba(10, 115, 253, .24);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            flex-shrink: 0;
        }

        .svc-icon svg {
            width: 22px;
            height: 22px;
            stroke: #93C5FD;
        }

        .svc-eyebrow {
            font-family: var(--font-body);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .10em;
            text-transform: uppercase;
            color: rgba(147, 197, 253, .72);
            margin-bottom: 9px;
        }

        .svc-name {
            font-family: var(--font-head);
            font-weight: 700;
            color: var(--white);
            line-height: 1.18;
            letter-spacing: -.5px;
            margin-bottom: 11px;
        }

        .svc-card--web .svc-name {
            font-size: clamp(20px, 2.2vw, 28px);
        }

        .svc-card:not(.svc-card--web) .svc-name {
            font-size: 19px;
        }

        .svc-desc {
            font-family: var(--font-body);
            font-size: 14px;
            color: rgba(255, 255, 255, .50);
            line-height: 1.68;
        }

        .svc-card--web .svc-desc {
            font-size: 15px;
            max-width: 360px;
        }

        .svc-arrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 24px;
            font-family: var(--font-body);
            font-size: 13px;
            font-weight: 600;
            color: var(--blue);
            transition: gap var(--dur) var(--ease);
        }

        .svc-card:hover .svc-arrow {
            gap: 14px;
        }

        /* ═══════════════════════════════════
   WHY KAMBA+
═══════════════════════════════════ */
        .why {
            padding: 120px 0;
            background: var(--gray-light);
        }

        .why__stack {
            display: flex;
            flex-direction: column;
            position: relative;
            gap: 32px;
            max-width: 900px;
        }

        .why__card {
            background: var(--white-dim);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-xl);
            padding: 40px 44px;
            display: grid;
            grid-template-columns: 72px 1fr;
            gap: 32px;
            align-items: start;
            position: relative;
            box-shadow: var(--shadow-sm);
            transition: box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
            max-width: 740px;
        }

        .why__card:hover {
            box-shadow: var(--shadow-md);
            transform: translateX(8px);
        }

        /* Cascade staircase */
        .why__card:nth-child(1) {
            margin-left: 0;
            margin-bottom: -18px;
            z-index: 4;
        }

        .why__card:nth-child(2) {
            margin-left: 80px;
            margin-bottom: -18px;
            z-index: 3;
        }

        .why__card:nth-child(3) {
            margin-left: 160px;
            margin-bottom: -18px;
            z-index: 2;
        }

        .why__card:nth-child(4) {
            margin-left: 240px;
            z-index: 1;
        }

        .why__left {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .why__num {
            font-family: var(--font-head);
            font-size: 36px;
            font-weight: 700;
            color: var(--blue);
            opacity: .18;
            letter-spacing: -2px;
            line-height: 1;
        }

        .why__icon {
            width: 50px;
            height: 50px;
            background: var(--blue-dim);
            border-radius: 13px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .why__icon svg {
            width: 22px;
            height: 22px;
            stroke: var(--blue);
        }

        .why__card-title {
            font-family: var(--font-head);
            font-size: 20px;
            font-weight: 700;
            letter-spacing: -.5px;
            color: var(--ink);
            margin-bottom: 10px;
        }

        .why__card-desc {
            font-family: var(--font-body);
            font-size: 15px;
            color: var(--gray-600);
            line-height: 1.72;
        }

        /* ═══════════════════════════════════
   PROCESS
═══════════════════════════════════ */
        .process {
            padding: 120px 0;
            background: var(--white);
        }

        .process__steps {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            position: relative;
        }

        /* Horizontal connecting line */
        .process__steps::before {
            content: '';
            position: absolute;
            top: 39px;
            left: calc(12.5% + 22px);
            right: calc(12.5% + 22px);
            height: 2px;
            background: linear-gradient(90deg,
                    var(--blue) 0%,
                    rgba(10, 115, 253, .22) 100%);
            z-index: 0;
        }

        .proc-step {
            padding: 0 20px;
            text-align: center;
            position: relative;
            z-index: 1;
        }

        .proc-step__bubble {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px;
            transition: all .40s var(--ease);
            background: var(--blue);
            box-shadow: 0 8px 26px rgba(10, 115, 253, .40);
            border-color: var(--blue);
        }

        .proc-step:first-child .proc-step__bubble {
            background: var(--blue);
            box-shadow: 0 8px 26px rgba(10, 115, 253, .40);
        }

        /* .proc-step:not(:first-child) .proc-step__bubble {
            background: var(--white);
            border: 2px solid var(--gray-200);
        } */

        .proc-step__bubble svg {
            width: 28px;
            height: 28px;
            stroke: rgba(255, 255, 255, .50);
        }

        .proc-step:first-child .proc-step__bubble svg {
            stroke: var(--white);
        }

        /* .proc-step:hover .proc-step__bubble {
            background: var(--blue);
            box-shadow: 0 8px 26px rgba(10, 115, 253, .40);
            border-color: var(--blue);
        }

        .proc-step:hover .proc-step__bubble svg {
            stroke: var(--white);
        } */

        .proc-step__num {
            font-family: var(--font-body);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--blue);
            margin-bottom: 8px;
        }

        .proc-step__title {
            font-family: var(--font-head);
            font-size: 18px;
            font-weight: 700;
            color: var(--ink);
            letter-spacing: -.4px;
            margin-bottom: 12px;
        }

        .proc-step__desc {
            font-family: var(--font-body);
            font-size: 14px;
            color: var(--gray-600);
            line-height: 1.68;
        }

        /* ═══════════════════════════════════
   CTA FINAL
═══════════════════════════════════ */
        .cta-final {
            padding: 130px 0;
            background: var(--ink-deep);
            position: relative;
            overflow: hidden;
        }

        /* Radial glow from bottom */
        .cta-final::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 65% 70% at 50% 115%,
                    rgba(10, 115, 253, .30) 0%,
                    transparent 70%);
            pointer-events: none;
        }

        /* SVG rings */
        .cta-rings {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 680px;
            height: 680px;
            pointer-events: none;
            opacity: .06;
        }

        .cta-inner {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 700px;
            margin: 0 auto;
        }

        .cta-pre {
            display: inline-block;
            font-family: var(--font-body);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: rgba(147, 197, 253, .72);
            margin-bottom: 24px;
        }

        .cta-title {
            font-family: var(--font-head);
            font-size: clamp(32px, 4.6vw, 56px);
            font-weight: 700;
            color: var(--white);
            letter-spacing: -1.8px;
            line-height: 1.09;
            margin-bottom: 20px;
        }

        .cta-title em {
            font-style: normal;
            background: linear-gradient(100deg, #93C5FD 0%, var(--blue) 55%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .cta-sub {
            font-family: var(--font-body);
            font-size: 17px;
            color: rgba(255, 255, 255, .46);
            line-height: 1.70;
            margin-bottom: 48px;
        }

        .cta-btns {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 16px;
            flex-wrap: wrap;
        }

        /* ═══════════════════════════════════
   FOOTER
═══════════════════════════════════ */
        .footer {
            background: var(--ink-foot);
            padding: 84px 0 0;
            border-top: 1px solid rgba(255, 255, 255, .05);
        }

        .footer__grid {
            display: grid;
            grid-template-columns: 1.9fr 1fr 1fr 1.5fr;
            gap: 60px;
            padding-bottom: 72px;
        }

        /* Brand column */
        .f-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 16px;
        }

        .f-logo-mark {
            width: 34px;
            height: 34px;
            background: var(--blue);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .f-logo-name {
            font-family: var(--font-head);
            font-size: 20px;
            font-weight: 700;
            color: var(--white);
            letter-spacing: -.5px;
        }

        .f-tagline {
            font-family: var(--font-body);
            font-size: 14px;
            color: rgba(255, 255, 255, .36);
            line-height: 1.70;
            max-width: 250px;
            margin-bottom: 28px;
        }

        .f-social {
            display: flex;
            gap: 8px;
        }

        .f-social a {
            width: 36px;
            height: 36px;
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(255, 255, 255, .10);
            border-radius: var(--radius-sm);
            display: flex;
            align-items: center;
            justify-content: center;
            color: rgba(255, 255, 255, .46);
            transition: all var(--dur) var(--ease);
        }

        .f-social a:hover {
            background: var(--blue);
            border-color: var(--blue);
            color: var(--white);
        }

        /* Columns */
        .f-col-title {
            font-family: var(--font-head);
            font-size: 13px;
            font-weight: 600;
            color: var(--white);
            letter-spacing: .02em;
            margin-bottom: 20px;
        }

        .f-links {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .f-links a {
            font-family: var(--font-body);
            font-size: 14px;
            color: rgba(255, 255, 255, .38);
            transition: color var(--dur) var(--ease);
        }

        .f-links a:hover {
            color: rgba(255, 255, 255, .80);
        }

        /* Contact items */
        .f-contact-item {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 16px;
        }

        .f-contact-ico {
            width: 30px;
            height: 30px;
            background: rgba(10, 115, 253, .14);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .f-contact-ico svg {
            width: 13px;
            height: 13px;
            stroke: var(--blue);
        }

        .f-contact-txt {
            font-family: var(--font-body);
            font-size: 13px;
            color: rgba(255, 255, 255, .38);
            line-height: 1.55;
        }

        .f-contact-txt strong {
            display: block;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: .06em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .60);
            margin-bottom: 3px;
        }

        /* Bottom bar */
        .footer__bar {
            border-top: 1px solid rgba(255, 255, 255, .06);
            padding: 24px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
        }

        .footer__copy {
            font-family: var(--font-body);
            font-size: 13px;
            color: rgba(255, 255, 255, .22);
        }

        .footer__bar-links {
            display: flex;
            gap: 24px;
        }

        .footer__bar-links a {
            font-family: var(--font-body);
            font-size: 13px;
            color: rgba(255, 255, 255, .22);
            transition: color var(--dur) var(--ease);
        }

        .footer__bar-links a:hover {
            color: rgba(255, 255, 255, .55);
        }

        /* WhatsApp button */
        .btn-wa {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: #25D366;
            color: var(--white);
            font-family: var(--fb);
            font-size: 15px;
            font-weight: 600;
            padding: 13px 26px;
            border-radius: var(--radius-sm);
            border: 1px solid transparent;
            transition: all var(--t) var(--ease);
        }

        .btn-wa:hover {
            background: #22c55e;
            box-shadow: 0 8px 28px rgba(37, 211, 102, .35);
            transform: translateY(-2px);
        }

        /* ═══════════════════════════════════
   RESPONSIVE — TABLET 1024px
═══════════════════════════════════ */
        @media (max-width: 1024px) {
            .wrap {
                padding: 0 32px;
            }

            /* Hero */
            .hero__grid {
                grid-template-columns: 1fr;
                gap: 60px;
            }

            .hero__copy {
                height: 380px;
                order: -1;
            }

            .hero__metric {
                left: 4px;
            }

            .hero__h1 {
                font-size: clamp(34px, 6vw, 50px);
            }

            /* Cred */
            .cred__row {
                grid-template-columns: 1fr 1fr;
            }

            .cred__stat:nth-child(2)::after {
                display: none;
            }

            /* Services bento → 2 col */
            .svc-bento {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto;
            }

            .svc-card--web {
                grid-column: 1 / 3;
                grid-row: auto;
                min-height: 300px;
            }

            .svc-card--tech {
                grid-column: 1;
                grid-row: auto;
                min-height: 220px;
            }

            .svc-card--mkt {
                grid-column: 2;
                grid-row: auto;
                min-height: 220px;
            }

            .svc-card--brand {
                grid-column: 1 / 3;
                grid-row: auto;
                min-height: 220px;
            }

            /* Why */
            .why__card:nth-child(2) {
                margin-left: 44px;
            }

            .why__card:nth-child(3) {
                margin-left: 88px;
            }

            .why__card:nth-child(4) {
                margin-left: 132px;
            }

            /* Process */
            .process__steps {
                grid-template-columns: 1fr 1fr;
                row-gap: 52px;
            }

            .process__steps::before {
                display: none;
            }

            /* Footer */
            .footer__grid {
                grid-template-columns: 1fr 1fr;
                gap: 44px;
            }
        }

        /* ═══════════════════════════════════
   RESPONSIVE — MOBILE 768px
═══════════════════════════════════ */
        @media (max-width: 768px) {
            .wrap {
                padding: 0 20px;
            }

            /* Nav */
            .nav__menu,
            .nav__lang,
            .nav__controls .btn-primary {
                display: none;
            }

            .nav__burger {
                display: flex;
            }

            /* Hero */
            .hero {
                padding: 100px 0 60px;
            }

            .hero__visual {
                height: 280px;
            }

            .hero__badge {
                font-size: 11px;
            }

            .hero__h1 {
                font-size: 32px;
                letter-spacing: -1px;
            }

            .hero__lead {
                font-size: 16px;
            }

            .hero__tag {
                display: none;
            }

            /* Cred */
            .cred__stat {
                padding: 36px 16px;
            }

            .cred__num {
                font-size: 40px;
                letter-spacing: -2px;
            }

            /* Services */
            .svc-bento {
                grid-template-columns: 1fr;
            }

            .svc-card--web,
            .svc-card--tech,
            .svc-card--mkt,
            .svc-card--brand {
                grid-column: 1;
                min-height: 260px;
            }

            /* Why */
            .why__card {
                grid-template-columns: 1fr;
                margin-left: 0 !important;
                margin-bottom: 12px !important;
                padding: 28px 24px;
            }

            .why__left {
                flex-direction: row;
                align-items: center;
            }

            /* Process */
            .process__steps {
                grid-template-columns: 1fr;
                row-gap: 44px;
            }

            /* Section headers */
            .sec-head {
                margin-bottom: 48px;
            }

            /* Footer */
            .footer__grid {
                grid-template-columns: 1fr;
                gap: 36px;
            }

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

        /* ═══════════════════════════════════
   RESPONSIVE — SMALL 480px
═══════════════════════════════════ */
        @media (max-width: 480px) {
            .hero__ctas {
                flex-direction: column;
            }

            .hero__ctas .btn,
            .hero__ctas a {
                width: 100%;
                justify-content: center;
            }

            .cta-btns {
                flex-direction: column;
            }

            .cta-btns a {
                width: 100%;
                justify-content: center;
            }

            .mosaic__img--c {
                display: none;
            }
        }

@view-transition{
    navigation: auto;
}

/* ══════════════════════════════════════
   HOME SECTIONS MOVED FROM INDEX <style>
══════════════════════════════════════ */

/* ══════════════════════════════════════════
   @VIEW TRANSITION — Page navigation morph
══════════════════════════════════════════ */

        /* ══════════════════════════════════════════
   REDESIGNED SECTIONS — Custom styles
   (supplement main.css without conflict)
══════════════════════════════════════════ */
        :root {
            --blue: #0A73FD;
            --blue-dim: rgba(10, 115, 253, .10);
            --blue-bdr: rgba(10, 115, 253, .25);
            --ink: #1E1E1E;
            --ink-mid: #262626;
            --ink-deep: #1A191F;
            --white: #FFFFFF;
            --gray-50: #F8FAFC;
            --gray-100: #F1F5F9;
            --gray-200: #E2E8F0;
            --gray-600: #64748B;
            --fh: 'Space Grotesk', system-ui, sans-serif;
            --fb: 'DM Sans', system-ui, sans-serif;
            --ease: cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* ── SVG CARD ANIMATIONS ─────────────────── */

        /* Web Dev: code lines type in */
        @keyframes code-type {

            0%,
            20% {
                transform: scaleX(0);
                opacity: 0;
            }

            50%,
            100% {
                transform: scaleX(1);
                opacity: 1;
            }
        }

        .code-l {
            transform-origin: left center;
            animation: code-type 3.2s ease-in-out infinite;
            animation-delay: var(--d, 0s);
        }

        /* Cursor blink */
        @keyframes blink {

            0%,
            49% {
                opacity: 1;
            }

            50%,
            100% {
                opacity: 0;
            }
        }

        .blink-cursor {
            animation: blink 1.1s step-end infinite;
        }

        /* Tech: network dash flow */
        @keyframes dash-flow {
            to {
                stroke-dashoffset: -24;
            }
        }

        .net-dash {
            animation: dash-flow 2.4s linear infinite;
            animation-delay: var(--d, 0s);
        }

        /* Tech: hub pulse */
        @keyframes hub-pulse {

            0%,
            100% {
                opacity: .6;
                transform: scale(1);
            }

            50% {
                opacity: .25;
                transform: scale(1.18);
            }
        }

        .hub-ring {
            transform-origin: 130px 80px;
            animation: hub-pulse 2.6s ease-in-out infinite;
        }

        /* Marketing: bars grow */
        @keyframes bar-grow {
            from {
                transform: scaleY(0);
                opacity: 0;
            }

            to {
                transform: scaleY(1);
                opacity: 1;
            }
        }

        .mkt-bar {
            transform-origin: bottom center;
            transform: scaleY(0);
            opacity: 0;
        }

        .feat-card--mkt:hover .mkt-bar,
        .feat-card--mkt.is-visible .mkt-bar {
            animation: bar-grow 1s cubic-bezier(.4, 0, .2, 1) forwards;
            animation-delay: var(--d, 0s);
        }

        /* Marketing: trend line draw */
        @keyframes line-draw {
            to {
                stroke-dashoffset: 0;
            }
        }

        .mkt-trend {
            stroke-dashoffset: 300;
        }

        .feat-card--mkt:hover .mkt-trend,
        .feat-card--mkt.is-visible .mkt-trend {
            animation: line-draw 1.2s ease forwards .4s;
        }

        /* Marketing: dot appear */
        @keyframes dot-pop {
            from {
                r: 0;
                opacity: 0;
            }

            to {
                r: 4;
                opacity: 1;
            }
        }

        .mkt-dot {
            r: 0;
            opacity: 0;
        }

        .feat-card--mkt:hover .mkt-dot,
        .feat-card--mkt.is-visible .mkt-dot {
            animation: dot-pop .35s ease forwards;
            animation-delay: var(--d, .5s);
        }

        /* Branding: rings spin */
        @keyframes spin-cw {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes spin-ccw {
            to {
                transform: rotate(-360deg);
            }
        }

        .ring-cw {
            transform-origin: 130px 80px;
            animation: spin-cw 18s linear infinite;
        }

        .ring-ccw {
            transform-origin: 130px 80px;
            animation: spin-ccw 11s linear infinite;
        }

        /* ── NEW SERVICES SECTION ────────────────── */
        .new-services {
            padding: 120px 0;
            background: var(--white);
        }

        .feat-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }

        .feat-card {
            background: var(--ink-deep);
            border: 1px solid rgba(255, 255, 255, .07);
            border-radius: 28px;
            overflow: hidden;
            position: relative;
            cursor: pointer;
            transition: border-color .38s var(--ease), box-shadow .38s var(--ease), transform .38s var(--ease);
            --mx: 50%;
            --my: 50%;
        }

        /* Spotlight follow */
        .feat-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle 220px at var(--mx) var(--my), rgba(10, 115, 253, .13), transparent);
            opacity: 0;
            transition: opacity .3s;
            pointer-events: none;
            border-radius: inherit;
            z-index: 0;
        }

        .feat-card:hover {
            border-color: rgba(10, 115, 253, .38);
            box-shadow: 0 0 52px rgba(10, 115, 253, .12);
            transform: translateY(-4px);
        }

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

        /* SVG area */
        .feat-svg-area {
            position: relative;
            z-index: 1;
            height: 180px;
            background: rgba(255, 255, 255, .02);
            border-bottom: 1px solid rgba(255, 255, 255, .06);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* Subtle dot grid bg for svg area */
        .feat-svg-area::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: radial-gradient(rgba(10, 115, 253, .08) 1px, transparent 1px);
            background-size: 22px 22px;
        }

        .feat-svg-area svg {
            position: relative;
            z-index: 1;
        }

        /* Card body */
        .feat-body {
            position: relative;
            z-index: 1;
            padding: 28px 32px 32px;
        }

        .feat-cat {
            font-family: var(--fb);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .10em;
            text-transform: uppercase;
            color: rgba(10, 115, 253, .75);
            margin-bottom: 10px;
            display: block;
        }

        .feat-title {
            font-family: var(--fh);
            font-size: 20px;
            font-weight: 700;
            color: var(--white);
            letter-spacing: -.5px;
            line-height: 1.22;
            margin-bottom: 10px;
        }

        .feat-desc {
            font-size: 14px;
            color: rgba(255, 255, 255, .48);
            line-height: 1.70;
            margin-bottom: 20px;
        }

        .feat-items {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 7px;
            margin-bottom: 22px;
        }

        .feat-items li {
            font-size: 13px;
            color: rgba(255, 255, 255, .55);
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .feat-items li::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--blue);
            flex-shrink: 0;
        }

        .feat-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-family: var(--fb);
            font-size: 13px;
            font-weight: 600;
            color: var(--blue);
            transition: gap .28s var(--ease);
        }

        .feat-card:hover .feat-link {
            gap: 12px;
        }

        .feat-link svg {
            transition: transform .28s var(--ease);
        }

        .feat-card:hover .feat-link svg {
            transform: translateX(3px);
        }

        /* ── WHY KAMBA+ V2 — Tab Panel ───────────── */
        .why-v2 {
            padding: 120px 0;
            background: var(--gray-50);
        }

        .why-v2 .sec-head {
            text-align: center;
            max-width: 620px;
            margin: 0 auto 64px;
        }

        .why-v2 .eyebrow {
            display: inline-block;
            font-family: var(--fb);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--blue);
            margin-bottom: 14px;
        }

        .why-v2 .sec-title {
            font-family: var(--fh);
            font-size: clamp(26px, 3.2vw, 42px);
            font-weight: 700;
            letter-spacing: -.9px;
            color: var(--ink);
            line-height: 1.18;
            margin-bottom: 16px;
        }

        .why-v2 .sec-sub {
            font-size: 17px;
            color: var(--gray-600);
            line-height: 1.70;
        }

        .why-panel {
            display: grid;
            grid-template-columns: 260px 1fr;
            border: 1px solid var(--gray-200);
            border-radius: 28px;
            overflow: hidden;
            box-shadow: 0 8px 40px rgba(0, 0, 0, .06);
        }

        .why-tabs {
            background: var(--white);
            border-right: 1px solid var(--gray-200);
            display: flex;
            flex-direction: column;
        }

        .why-tab {
            padding: 28px 24px;
            text-align: left;
            border-bottom: 1px solid var(--gray-200);
            display: flex;
            align-items: center;
            gap: 16px;
            cursor: pointer;
            background: transparent;
            border-left: 3px solid transparent;
            transition: background .25s var(--ease), border-color .25s var(--ease);
            position: relative;
        }

        .why-tab:last-child {
            border-bottom: none;
        }

        .why-tab.is-active {
            background: var(--gray-50);
            border-left-color: var(--blue);
        }

        .why-tab__ico {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: var(--blue-dim);
            border: 1px solid var(--blue-bdr);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: background .25s, border-color .25s;
        }

        .why-tab__ico svg {
            width: 18px;
            height: 18px;
            stroke: var(--blue);
        }

        .why-tab.is-active .why-tab__ico {
            background: var(--blue);
            border-color: var(--blue);
        }

        .why-tab.is-active .why-tab__ico svg {
            stroke: var(--white);
        }

        .why-tab__text {}

        .why-tab__num {
            font-family: var(--fb);
            font-size: 10px;
            font-weight: 700;
            letter-spacing: .10em;
            text-transform: uppercase;
            color: var(--blue);
            display: block;
            margin-bottom: 3px;
        }

        .why-tab__name {
            font-family: var(--fh);
            font-size: 14px;
            font-weight: 600;
            color: var(--gray-600);
            transition: color .25s;
        }

        .why-tab.is-active .why-tab__name {
            color: var(--ink);
        }

        /* Content panels */
        .why-panels {
            position: relative;
            min-height: 420px;
        }

        .why-pane {
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity .38s var(--ease);
            display: grid;
            grid-template-columns: 1fr 1fr;
            overflow: hidden;
        }

        .why-pane.is-active {
            opacity: 1;
            pointer-events: auto;
        }

        .why-pane__visual {
            background: var(--ink-deep);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 48px;
            position: relative;
            overflow: hidden;
        }

        /* Grid texture in pane visual */
        .why-pane__visual::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(10, 115, 253, .05) 1px, transparent 1px),
                linear-gradient(90deg, rgba(10, 115, 253, .05) 1px, transparent 1px);
            background-size: 40px 40px;
        }

        .why-pane__visual svg {
            position: relative;
            z-index: 1;
        }

        .why-pane__body {
            padding: 52px 48px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .why-pane__tag {
            font-family: var(--fb);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .10em;
            text-transform: uppercase;
            color: var(--blue);
            margin-bottom: 12px;
            display: block;
        }

        .why-pane__title {
            font-family: var(--fh);
            font-size: 26px;
            font-weight: 700;
            letter-spacing: -.6px;
            color: var(--ink);
            line-height: 1.25;
            margin-bottom: 16px;
        }

        .why-pane__desc {
            font-size: 16px;
            color: var(--gray-600);
            line-height: 1.75;
            margin-bottom: 28px;
        }

        .why-pane__points {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .why-pane__points li {
            font-size: 14px;
            font-weight: 500;
            color: var(--ink);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .why-pane__points li::before {
            content: '';
            width: 22px;
            height: 22px;
            border-radius: 7px;
            flex-shrink: 0;
            background: var(--blue-dim);
            border: 1px solid var(--blue-bdr);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A73FD' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
        }

        /* Why pane SVG animations */
        @keyframes pane-float-a {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-8px)
            }
        }

        @keyframes pane-float-b {

            0%,
            100% {
                transform: translateY(-4px)
            }

            50% {
                transform: translateY(6px)
            }
        }

        .pane-svg-a {
            animation: pane-float-a 3.4s ease-in-out infinite;
        }

        .pane-svg-b {
            animation: pane-float-b 2.8s ease-in-out infinite .6s;
        }

        @keyframes spark-draw {
            to {
                stroke-dashoffset: 0;
            }
        }

        .spark-line {
            stroke-dasharray: 40;
            stroke-dashoffset: 40;
            animation: spark-draw .8s ease forwards;
            animation-delay: var(--d, 0s);
        }

        .why-pane.is-active .spark-line {
            animation-play-state: running;
        }

        @keyframes shield-fill {
            from {
                opacity: 0;
                transform: scale(.85);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .shield-fill {
            animation: shield-fill .6s ease forwards;
            opacity: 0;
        }

        .why-pane.is-active .shield-fill {
            animation-play-state: running;
        }

        /* ── PARALLAX BELT ───────────────────────── */
        .para-belt {
            position: relative;
            height: 420px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .para-belt__img {
            position: absolute;
            inset: -80px 0;
            will-change: transform;
        }

        .para-belt__img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .para-belt__overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom,
                    rgba(15, 14, 20, .82) 0%,
                    rgba(15, 14, 20, .78) 50%,
                    rgba(15, 14, 20, .88) 100%);
        }

        .para-belt__inner {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 780px;
            padding: 0 48px;
        }

        .para-belt__rule {
            width: 40px;
            height: 2px;
            background: var(--blue);
            margin: 0 auto 32px;
            opacity: .7;
        }

        .para-belt__quote {
            font-family: var(--fh);
            font-size: clamp(22px, 3.2vw, 38px);
            font-weight: 700;
            color: var(--white);
            letter-spacing: -1px;
            line-height: 1.25;
            font-style: normal;
        }

        .para-belt__quote em {
            font-style: normal;
            background: linear-gradient(110deg, #93C5FD, var(--blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ── CTA V2 — Animated gradient ─────────── */
        @keyframes gradient-shift {

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

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

        @keyframes kplus-float {

            0%,
            100% {
                transform: translateY(0) rotate(-4deg);
                opacity: .06;
            }

            50% {
                transform: translateY(-18px) rotate(-4deg);
                opacity: .10;
            }
        }

        .cta-v2 {
            padding: 128px 0;
            position: relative;
            overflow: hidden;
            background: linear-gradient(-40deg, #0A0E18, #061030, #0A0E18, #030A28);
            background-size: 400% 400%;
            animation: gradient-shift 9s ease infinite;
        }

        .cta-v2::after {
            content: 'K+';
            position: absolute;
            bottom: -40px;
            right: 4%;
            z-index: 0;
            font-family: var(--fh);
            font-size: clamp(220px, 22vw, 340px);
            font-weight: 700;
            letter-spacing: -10px;
            color: var(--white);
            line-height: 1;
            animation: kplus-float 6s ease-in-out infinite;
            pointer-events: none;
        }

        /* Radial from bottom glow */
        .cta-v2::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 65% 70% at 50% 110%, rgba(10, 115, 253, .28), transparent 68%);
            pointer-events: none;
        }

        .cta-v2 .cta-rings {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 720px;
            height: 720px;
            pointer-events: none;
            opacity: .04;
        }

        .cta-v2 .cta-inner {
            position: relative;
            z-index: 1;
            text-align: center;
            max-width: 700px;
            margin: 0 auto;
        }

        .cta-v2 .cta-pre {
            display: inline-block;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: rgba(147, 197, 253, .72);
            margin-bottom: 24px;
        }

        .cta-v2 .cta-title {
            font-family: var(--fh);
            font-size: clamp(30px, 4.5vw, 54px);
            font-weight: 700;
            color: var(--white);
            letter-spacing: -1.8px;
            line-height: 1.10;
            margin-bottom: 20px;
        }

        .cta-v2 .cta-title em {
            font-style: normal;
            background: linear-gradient(100deg, #93C5FD, var(--blue));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .cta-v2 .cta-sub {
            font-size: 17px;
            color: rgba(255, 255, 255, .46);
            line-height: 1.72;
            margin-bottom: 48px;
        }

        .cta-v2 .cta-btns {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;
        }

        .btn-wa {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: #25D366;
            color: var(--white);
            font-family: var(--fb);
            font-size: 15px;
            font-weight: 600;
            padding: 13px 26px;
            border-radius: 8px;
            text-decoration: none;
            transition: all .3s var(--ease);
        }

        .btn-wa:hover {
            background: #22c55e;
            box-shadow: 0 8px 28px rgba(37, 211, 102, .35);
            transform: translateY(-2px);
        }

        /* ── RESPONSIVE NEW SECTIONS ─────────────── */
        @media (max-width:1024px) {
            .feat-grid {
                grid-template-columns: 1fr;
            }

            .why-panel {
                grid-template-columns: 220px 1fr;
            }

            .why-pane {
                grid-template-columns: 1fr 1fr;
            }

        }

        @media (max-width:768px) {

            .new-services,
            .why-v2 {
                padding: 80px 0;
            }

            .why-panel {
                grid-template-columns: 1fr;
                border-radius: 20px;
            }

            .why-tabs {
                flex-direction: row;
                overflow-x: auto;
                border-right: none;
                border-bottom: 1px solid var(--gray-200);
            }

            .why-tab {
                min-width: 140px;
                border-bottom: none;
                border-left: none;
                border-bottom: 3px solid transparent;
            }

            .why-tab.is-active {
                border-left-color: transparent;
                border-bottom-color: var(--blue);
                background: var(--gray-50);
            }

            .why-panels {
                min-height: 560px;
            }

            .why-pane {
                grid-template-columns: 1fr;
                position: relative;
                top: auto;
            }

            .why-pane__visual {
                height: 200px;
            }

            .para-belt {
                height: 320px;
            }

            .para-belt__inner {
                padding: 0 24px;
            }

            .feat-svg-area {
                height: 150px;
            }

            .cta-v2 {
                padding: 80px 0;
            }

            .cta-v2::after {
                display: none;
            }
        }

        @media (max-width:480px) {
            .feat-body {
                padding: 24px;
            }

            .why-pane__body {
                padding: 32px 24px;
            }
        }

        /* ── PACKAGES — Planos KAMBA+ ───────────────── */
.packages {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 75% 18%, rgba(10, 115, 253, .12), transparent 34rem),
        linear-gradient(180deg, #F8FAFC 0%, #EEF3F8 100%);
}

.packages::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .38;
    background-image:
        linear-gradient(rgba(10, 115, 253, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(10, 115, 253, .04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(circle at 50% 18%, black, transparent 72%);
}

.packages::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .12;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.packages .wrap {
    position: relative;
    z-index: 1;
}

.packages__head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 64px;
}

.packages__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 32px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(15, 23, 42, .10);
    box-shadow: 0 18px 54px rgba(15, 23, 42, .08);
    overflow: hidden;
    transition:
        transform .34s var(--ease),
        box-shadow .34s var(--ease),
        border-color .34s var(--ease);
}

.package-card::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10, 115, 253, .08), transparent 34%),
        radial-gradient(circle at 85% 8%, rgba(10, 115, 253, .13), transparent 34%);
    opacity: .75;
}

.package-card:hover {
    transform: translateY(-6px);
    border-color: rgba(10, 115, 253, .28);
    box-shadow: 0 28px 72px rgba(15, 23, 42, .14);
}

.package-card.is-featured {
    background: #1A191F;
    border-color: rgba(10, 115, 253, .42);
    box-shadow: 0 28px 90px rgba(10, 115, 253, .18);
    transform: translateY(-14px);
}

.package-card.is-featured:hover {
    transform: translateY(-20px);
}

.package-card.is-featured::before {
    background:
        radial-gradient(circle at 70% 0%, rgba(10, 115, 253, .28), transparent 42%),
        linear-gradient(180deg, rgba(255,255,255,.08), transparent 38%);
}

.package-card__badge {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 2;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--blue);
    color: var(--white);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.package-card__top,
.package-list,
.package-card__cta {
    position: relative;
    z-index: 1;
}

.package-card__top {
    margin-bottom: 28px;
}

.package-card__label {
    display: inline-block;
    margin-bottom: 12px;
    color: var(--blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.package-card__title {
    font-family: var(--fh);
    font-size: clamp(30px, 3.2vw, 46px);
    font-weight: 700;
    line-height: .95;
    letter-spacing: -.06em;
    color: var(--ink);
    margin-bottom: 14px;
}

.package-card__subtitle {
    color: var(--gray-600);
    font-size: 15px;
    line-height: 1.65;
}

.package-card.is-featured .package-card__title,
.package-card.is-featured .package-card__subtitle,
.package-card.is-featured .package-list span,
.package-card.is-featured .package-list strong {
    color: var(--white);
}

.package-card.is-featured .package-card__subtitle,
.package-card.is-featured .package-list span {
    opacity: .62;
}

.package-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 30px;
}

.package-list li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid rgba(15, 23, 42, .09);
}

.package-card.is-featured .package-list li {
    border-bottom-color: rgba(255, 255, 255, .10);
}

.package-list span {
    color: var(--gray-600);
    font-size: 13px;
    line-height: 1.45;
}

.package-list strong {
    max-width: 48%;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.45;
    text-align: right;
}

.package-card__cta {
    margin-top: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 46px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--ink-deep);
    color: var(--white);
    font-size: 14px;
    font-weight: 800;
    transition:
        background .28s var(--ease),
        transform .28s var(--ease),
        box-shadow .28s var(--ease);
}

.package-card__cta:hover {
    background: var(--blue);
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(10, 115, 253, .24);
}

.package-card.is-featured .package-card__cta {
    background: var(--blue);
}

.package-card.is-featured .package-card__cta:hover {
    background: #1A81FF;
}

@media (max-width: 1024px) {
    .packages__grid {
        grid-template-columns: 1fr;
    }

    .package-card.is-featured {
        transform: none;
    }

    .package-card.is-featured:hover {
        transform: translateY(-6px);
    }
}

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

    .packages__head {
        margin-bottom: 42px;
    }

    .package-card {
        padding: 26px;
        border-radius: 24px;
    }

    .package-list li {
        gap: 12px;
    }

    .package-list strong {
        max-width: 52%;
    }
}

@media (max-width: 480px) {
    .package-list li {
        flex-direction: column;
        gap: 4px;
    }

    .package-list strong {
        max-width: none;
        text-align: left;
    }
}

/* Services section header moved from inline attributes */
.new-services .sec-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 64px;
}

.new-services .eyebrow {
  display: inline-block;
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}

.new-services .sec-title {
  font-family: var(--fh);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 700;
  letter-spacing: -.9px;
  color: var(--ink);
  line-height: 1.18;
  margin-bottom: 16px;
}

.new-services .sec-sub {
  font-size: 17px;
  color: var(--gray-600);
  line-height: 1.70;
}

/* ══════════════════════════════════════
   PATCH — CSS em falta para o index atual
   Cola no fim de assets/css/main.css
══════════════════════════════════════ */

/* Logo real usado no header/footer */
.nav__logo-img {
  display: block;
  width: auto;
  height: 40px;
  max-width: 150px;
  object-fit: contain;
}

.nav__logo-img-footer {
  display: block;
  width: auto;
  height: 38px;
  max-width: 150px;
  object-fit: contain;
}

/* Estado ativo do botão de idioma: o HTML usa class="on" */
.nav__lang button.on,
.nav__lang button.is-active {
  background: var(--white);
  color: var(--ink-deep);
}

/* Pequena proteção para o texto do hero */
.hero__copy {
  position: relative;
  z-index: 2;
  max-width: 620px;
}

/* Classes auxiliares usadas pelo JS/HTML */
.counter {
  font-variant-numeric: tabular-nums;
}

.drw-link {
  display: block;
}

/* Variações dos cards de serviços: não mudam layout, só refinam atmosfera */
.feat-card--web::after,
.feat-card--tech::after,
.feat-card--mkt::after,
.feat-card--brand::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  background: radial-gradient(circle at 80% 0%, rgba(10, 115, 253, .14), transparent 38%);
}

.feat-card--tech::after {
  background: radial-gradient(circle at 70% 10%, rgba(102, 166, 255, .13), transparent 40%);
}

.feat-card--mkt::after {
  background: radial-gradient(circle at 85% 0%, rgba(10, 115, 253, .12), transparent 42%);
}

.feat-card--brand::after {
  background: radial-gradient(circle at 75% 8%, rgba(96, 165, 250, .14), transparent 42%);
}

/* Variações dos pacotes: mantém o layout e adiciona identidade visual leve */
.package-card--star .package-card__label {
  color: var(--blue);
}

.package-card--growth .package-card__label {
  color: #93C5FD;
}

.package-card--premium::before {
  background:
    linear-gradient(180deg, rgba(10, 115, 253, .10), transparent 34%),
    radial-gradient(circle at 85% 8%, rgba(10, 115, 253, .18), transparent 38%);
}

/* Responsivo extra para impedir overflow nas listas dos pacotes */
@media (max-width: 560px) {
  .package-card__badge {
    position: static;
    display: inline-flex;
    width: fit-content;
    margin-bottom: 18px;
  }

  .packages__grid {
    gap: 16px;
  }
}

/* ── PARTNERS — logos dos parceiros ───────────────── *//* ── PARTNERS ───────────────────────────── */
.partners {
  position: relative;
  padding: 92px 0 72px;
  background:
    radial-gradient(circle at 50% 0%, rgba(10, 115, 253, .08), transparent 32rem),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

.partners .wrap {
  position: relative;
  z-index: 1;
}

.partners__head {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.partners__title {
  margin-bottom: 14px;
}

.partners__sub {
  max-width: 680px;
  margin: 0 auto;
}

.partners__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.partner-card {
  position: relative;
  min-height: 170px;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
  transition:
    transform .28s var(--ease),
    box-shadow .28s var(--ease),
    border-color .28s var(--ease);
}

.partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .24);
  border-color: rgba(10, 115, 253, .26);
}

.partner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 38%),
    radial-gradient(circle at 50% 0%, rgba(10, 115, 253, .08), transparent 50%);
  opacity: .8;
}

.partner-card__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 220px;

  object-fit: contain;
  object-position: center;
  border-radius: 10px;
}

/* fundos por tipo de logo */
.partner-card--dark {
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    #0B0B10;
}

.partner-card--light {
  background:
    linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.3)),
    #F5F7FA;
  border-color: rgba(15, 23, 42, .08);
}

.partner-card--teal {
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    #0D4B4A;
}

/* logos com fundo claro podem precisar de mais contraste visual */
.partner-card--light .partner-card__logo {
  /*box-shadow: 0 6px 18px rgba(15, 23, 42, .05);*/
}

/* responsivo */
@media (max-width: 1024px) {
  .partners__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .partners {
    padding: 72px 0 56px;
  }

  .partners__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .partner-card {
    min-height: 150px;
    padding: 18px;
    border-radius: 20px;
  }

  .partner-card__logo {
    max-width: 200px;
    max-height: 82px;
  }
}

/* ══════════════════════════════════════
   HOME PATCH — Why images + mobile fix + WhatsApp float
   Scope: only .why-v2 and .whatsapp-float
   Does not touch header/nav or partners
══════════════════════════════════════ */

/* WHY — image visuals replacing SVGs */
.why-v2 .why-pane__visual {
  padding: 0;
  min-height: 100%;
  background: var(--ink-deep, #1A191F);
  overflow: hidden;
}

.why-v2 .why-pane__image-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
}

.why-v2 .why-pane__image-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26, 25, 31, .08), rgba(26, 25, 31, .62)),
    radial-gradient(circle at 72% 18%, rgba(10, 115, 253, .24), transparent 44%);
}

.why-v2 .why-pane__image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

.why-v2 .why-pane__image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%) contrast(1.08) brightness(.78);
  transform: scale(1.03);
  transition: transform .7s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), filter .7s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.why-v2 .why-pane.is-active .why-pane__image {
  transform: scale(1);
}

.why-v2 .why-pane:hover .why-pane__image {
  filter: grayscale(18%) contrast(1.05) brightness(.88);
  transform: scale(1.06);
}

.why-v2 .why-pane__image-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 13px;
  border-radius: 999px;
  color: var(--white, #fff);
  background: rgba(10, 115, 253, .74);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

.why-v2 .why-pane__image-badge::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 16px rgba(255, 255, 255, .65);
}

/* WHY — mobile repair: only active pane occupies space */
@media (max-width: 768px) {
  .why-v2 .why-panel {
    overflow: visible;
  }

  .why-v2 .why-panels {
    min-height: 0 !important;
  }

  .why-v2 .why-pane {
    position: relative !important;
    inset: auto !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    opacity: 1 !important;
    pointer-events: none;
    overflow: hidden;
  }

  .why-v2 .why-pane.is-active {
    display: grid !important;
    pointer-events: auto;
  }

  .why-v2 .why-pane__visual {
    min-height: 220px;
  }

  .why-v2 .why-pane__image-wrap {
    min-height: 220px;
  }

  .why-v2 .why-pane__body {
    padding: 32px 24px 36px;
  }

  .why-v2 .why-pane__image-badge {
    left: 18px;
    bottom: 18px;
    font-size: 11px;
    padding: 8px 11px;
  }
}

@media (max-width: 480px) {
  .why-v2 .why-pane__visual,
  .why-v2 .why-pane__image-wrap {
    min-height: 190px;
  }

  .why-v2 .why-pane__body {
    padding: 28px 20px 32px;
  }

  .why-v2 .why-pane__title {
    font-size: 22px;
  }

  .why-v2 .why-pane__desc {
    font-size: 15px;
    line-height: 1.68;
  }
}

/* Floating WhatsApp — right side */
.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 24px;
  z-index: 950;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  color: #fff;
  background: #25D366;
  box-shadow: 0 18px 44px rgba(37, 211, 102, .30), 0 8px 24px rgba(0, 0, 0, .22);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .28s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), box-shadow .28s var(--ease, cubic-bezier(0.4, 0, 0.2, 1)), background .28s var(--ease, cubic-bezier(0.4, 0, 0.2, 1));
}

.whatsapp-float:hover {
  transform: translateY(-3px);
  background: #22C55E;
  box-shadow: 0 24px 58px rgba(37, 211, 102, .38), 0 12px 30px rgba(0, 0, 0, .26);
}

.whatsapp-float__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
}

.whatsapp-float__icon svg {
  width: 28px;
  height: 28px;
}

.whatsapp-float__text {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .whatsapp-float {
    right: 16px;
    bottom: 18px;
    width: 54px;
    height: 54px;
    min-height: 54px;
    padding: 0;
    justify-content: center;
  }

  .whatsapp-float__text {
    display: none;
  }
}
/* ── Floating WhatsApp Button ───────────────── */
.wa-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 13px 18px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  font-family: var(--fb, 'DM Sans', system-ui, sans-serif);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow:
    0 18px 42px rgba(37, 211, 102, .28),
    0 8px 20px rgba(0, 0, 0, .18);
  transition:
    transform .28s var(--ease, cubic-bezier(.22, 1, .36, 1)),
    box-shadow .28s var(--ease, cubic-bezier(.22, 1, .36, 1)),
    background .28s var(--ease, cubic-bezier(.22, 1, .36, 1));
}

.wa-float:hover {
  background: #22C55E;
  transform: translateY(-4px);
  box-shadow:
    0 24px 54px rgba(37, 211, 102, .34),
    0 12px 28px rgba(0, 0, 0, .22);
}

.wa-float:focus-visible {
  outline: 3px solid rgba(37, 211, 102, .35);
  outline-offset: 4px;
}

.wa-float__icon {
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
}

.wa-float__text {
  line-height: 1;
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 640px) {
  .wa-float {
    right: 18px;
    bottom: 18px;
    width: 54px;
    height: 54px;
    min-height: 54px;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
  }

  .wa-float__text {
    display: none;
  }

  .wa-float__icon {
    width: 27px;
    height: 27px;
  }
}