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

        :root {
            --blue: #3B6BF5;
            --blue-hover: #2B57D6;
            --blue-light: #EBF0FF;
            --blue-50: #F5F7FF;
            --blue-100: #DBE4FF;
            --green: #10B981;
            --green-bg: #ECFDF5;
            --text: #0F1729;
            --text-2: #4A5568;
            --text-3: #8896AB;
            --white: #FFFFFF;
            --border: #E8ECF4;
            --border-light: #F0F2F7;
            --max-w: 1280px;
        }

        html {
            overflow-x: hidden;
            width: 100%;
            -webkit-text-size-adjust: 100%
        }

        body {
            font-family: 'Inter', system-ui, sans-serif;
            background: #fff;
            color: var(--text);
            overflow-x: hidden;
            width: 100%;
            -webkit-font-smoothing: antialiased
        }

        .header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 16px 0;
            transition: all .4s cubic-bezier(.16, 1, .3, 1)
        }

        .header.scrolled {
            background: rgba(255, 255, 255, .92);
            backdrop-filter: blur(24px);
            border-bottom: 1px solid var(--border-light);
            padding: 11px 0;
            box-shadow: 0 1px 12px rgba(15, 23, 41, .04)
        }

        .header-inner {
            max-width: var(--max-w);
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px
        }

        .header-logo img {
            height: 30px
        }

        .header-logo a {
            display: flex;
            align-items: center;
            text-decoration: none;
            position: relative;
            overflow: hidden;
            width: 170px;
            height: 30px;
            transition: width .6s cubic-bezier(.4, 0, .2, 1)
        }

        .logo-full,
        .logo-icon {
            position: absolute;
            top: 0;
            will-change: opacity, transform;
            transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1)
        }

        .logo-full {
            left: 0;
            opacity: 1;
            transform: scale(1)
        }

        .logo-icon {
            left: -7px;
            height: 30px;
            width: auto;
            opacity: 0;
            transform: scale(.8)
        }

        .header.scrolled .logo-full {
            opacity: 0;
            pointer-events: none
        }

        .header.scrolled .logo-icon {
            opacity: 1;
            transform: scale(1)
        }

        .header.scrolled .header-logo a {
            width: 42px
        }

        .header-cta {
            display: flex;
            align-items: center;
            position: relative;
            min-width: 148px;
            height: 38px
        }

        .header-btn-enter,
        .header-btn-cta {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            white-space: nowrap;
            min-width: 148px;
            text-align: center;
            justify-content: center;
            transition: opacity .4s cubic-bezier(.16, 1, .3, 1), transform .4s cubic-bezier(.16, 1, .3, 1)
        }

        .header-btn-enter {
            opacity: 1;
            transform: translateY(-50%) scale(1)
        }

        .header.scrolled .header-btn-enter {
            opacity: 0;
            pointer-events: none;
            transform: translateY(-50%) scale(.88)
        }

        .header-btn-cta {
            opacity: 0;
            pointer-events: none;
            transform: translateY(-50%) scale(.88)
        }

        .header.scrolled .header-btn-cta {
            opacity: 1;
            pointer-events: all;
            transform: translateY(-50%) scale(1)
        }

        .btn-ghost {
            padding: 9px 20px;
            border: 1px solid var(--border);
            border-radius: 12px;
            background: 0;
            color: var(--text-2);
            font-family: inherit;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: .25s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center
        }

        .btn-ghost:hover {
            border-color: var(--blue);
            color: var(--blue);
            background: var(--blue-50)
        }

        .btn-cta {
            padding: 9px 24px;
            background: var(--blue);
            color: #fff;
            border: none;
            border-radius: 12px;
            font-family: inherit;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: .3s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px
        }

        .btn-cta:hover {
            background: var(--blue-hover);
            transform: translateY(-1px);
            box-shadow: 0 8px 30px rgba(59, 107, 245, .22)
        }

        .btn-large {
            padding: 16px 36px;
            font-size: 15.5px
        }

        .btn-outline-lg {
            padding: 16px 36px;
            font-size: 15.5px;
            border: 2px solid var(--blue);
            border-radius: 12px;
            background: 0;
            color: var(--blue);
            font-family: inherit;
            font-weight: 600;
            cursor: pointer;
            transition: .3s;
            text-decoration: none;
            display: inline-flex;
            align-items: center
        }

        .btn-outline-lg:hover {
            background: var(--blue-50);
            transform: translateY(-1px)
        }

        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding: 60px 0 60px;
            position: relative;
            overflow: hidden
        }

        .mob-br {
            display: none
        }

        .hero-sub strong {
            color: var(--text);
            font-weight: 700
        }

        .hero-proof {
            margin-top: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            opacity: 0
        }

        .hero-proof-avatars {
            display: flex
        }

        .hp-av {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: -6px;
            border: 2px solid #fff;
            position: relative
        }

        .hp-av:first-child {
            margin-left: 0
        }

        .hero-proof-text {
            font-size: 12px;
            color: var(--text-3);
            display: flex;
            align-items: center;
            gap: 5px;
            flex-wrap: wrap
        }

        .hp-sep {
            color: var(--border);
            margin: 0 2px
        }

        .hero-glow,
        .hero-glow-2 {
            position: absolute;
            pointer-events: none;
            border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
            filter: blur(80px);
            will-change: transform;
            opacity: 0
        }

        .hero-glow {
            top: -120px;
            right: -80px;
            width: 700px;
            height: 700px;
            background: radial-gradient(circle, rgba(59, 107, 245, .13) 0%, rgba(59, 107, 245, .04) 50%, transparent 70%);
            animation: blobDrift1 22s ease-in-out infinite, blobFadeIn 1.2s .3s ease forwards
        }

        .hero-glow-2 {
            bottom: -100px;
            left: -150px;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(59, 107, 245, .08) 0%, rgba(59, 107, 245, .02) 50%, transparent 70%);
            border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%;
            animation: blobDrift2 26s ease-in-out infinite, blobFadeIn 1.2s .6s ease forwards
        }

        @keyframes blobDrift1 {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
                border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%
            }

            25% {
                transform: translate(30px, -20px) scale(1.04);
                border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%
            }

            50% {
                transform: translate(-20px, 15px) scale(.97);
                border-radius: 40% 60% 55% 45% / 45% 55% 45% 55%
            }

            75% {
                transform: translate(15px, 25px) scale(1.02);
                border-radius: 55% 45% 50% 50% / 50% 60% 40% 50%
            }
        }

        @keyframes blobDrift2 {

            0%,
            100% {
                transform: translate(0, 0) scale(1);
                border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%
            }

            33% {
                transform: translate(25px, 20px) scale(1.05);
                border-radius: 55% 45% 45% 55% / 45% 55% 50% 50%
            }

            66% {
                transform: translate(-15px, -25px) scale(.96);
                border-radius: 50% 50% 60% 40% / 60% 40% 45% 55%
            }
        }

        @keyframes blobFadeIn {
            to {
                opacity: 1
            }
        }

        @media(max-width:1024px) {
            .hero {
                min-height: auto;
                overflow: visible;
                display: block;
                padding: 160px 0 60px
            }

            .hero-glow {
                width: 400px;
                height: 400px;
                right: -80px;
                top: -60px
            }

            .hero-glow-2 {
                width: 300px;
                height: 300px;
                bottom: -60px;
                left: -80px
            }
        }

        .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 24px;
            position: relative;
            z-index: 2
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1.4fr;
            grid-template-rows: auto auto;
            gap: 0 44px;
            align-items: center
        }

        .hero-top {
            grid-column: 1;
            grid-row: 1
        }

        .hero-bottom {
            grid-column: 1;
            grid-row: 2
        }

        .hero-visual {
            grid-column: 2;
            grid-row: 1/3
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 7px 16px 7px 10px;
            background: var(--blue-50);
            border: 1px solid var(--blue-100);
            border-radius: 100px;
            font-size: 12.5px;
            color: var(--blue);
            font-weight: 600;
            margin-bottom: 28px
        }

        .hero-badge-dot {
            width: 8px;
            height: 8px;
            background: var(--blue);
            border-radius: 50%;
            position: relative
        }

        .hero-badge-dot::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            border: 2px solid var(--blue);
            opacity: .3;
            animation: ping 2s cubic-bezier(0, 0, .2, 1) infinite
        }

        @keyframes ping {

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

        .hero h1 {
            font-size: clamp(30px, 4.4vw, 52px);
            font-weight: 800;
            line-height: 1.1;
            letter-spacing: -.035em;
            margin-bottom: 22px
        }

        .hero h1 em {
            font-style: normal;
            color: var(--blue)
        }

        .hero-sub {
            font-size: clamp(14px, 1.35vw, 16.5px);
            color: var(--text-2);
            max-width: 470px;
            line-height: 1.75;
            margin-bottom: 32px
        }

        .hero-bullets {
            display: grid;
            grid-template-columns: 1fr;
            gap: 10px;
            margin-bottom: 36px
        }

        .hero-bullet {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 13.5px;
            color: var(--text-2);
            font-weight: 500;
            opacity: 0
        }

        .hero-bullet-icon {
            width: 20px;
            height: 20px;
            background: var(--blue-50);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .hero-bullet-icon svg {
            width: 11px;
            height: 11px;
            color: var(--blue);
            stroke-dasharray: 20;
            stroke-dashoffset: 20
        }

        @keyframes bulletIn {
            from {
                opacity: 0;
                transform: translateX(-12px)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        @keyframes checkDraw {
            from {
                stroke-dashoffset: 20
            }

            to {
                stroke-dashoffset: 0
            }
        }

        .b1 {
            animation: bulletIn .4s cubic-bezier(.16, 1, .3, 1) forwards;
            animation-delay: .25s
        }

        .b1 .hero-bullet-icon svg {
            animation: checkDraw .3s ease forwards;
            animation-delay: .35s
        }

        .b2 {
            animation: bulletIn .4s cubic-bezier(.16, 1, .3, 1) forwards;
            animation-delay: .3s
        }

        .b2 .hero-bullet-icon svg {
            animation: checkDraw .3s ease forwards;
            animation-delay: .4s
        }

        .b3 {
            animation: bulletIn .4s cubic-bezier(.16, 1, .3, 1) forwards;
            animation-delay: .35s
        }

        .b3 .hero-bullet-icon svg {
            animation: checkDraw .3s ease forwards;
            animation-delay: .45s
        }

        .b4 {
            animation: bulletIn .4s cubic-bezier(.16, 1, .3, 1) forwards;
            animation-delay: .4s
        }

        .b4 .hero-bullet-icon svg {
            animation: checkDraw .3s ease forwards;
            animation-delay: .5s
        }

        .hero-ctas {
            display: flex;
            gap: 14px;
            flex-wrap: wrap
        }

        .hero-note {
            margin-top: 20px;
            font-size: 12px;
            color: var(--text-3);
            display: flex;
            align-items: center;
            gap: 6px
        }

        .hero-note svg {
            width: 14px;
            height: 14px;
            color: var(--green)
        }

        .hero-visual {
            position: relative
        }

        .mockup-area {
            position: relative;
            max-width: 100%
        }

        .mac {
            position: relative;
            width: 100%
        }

        .mac-lid {
            background: linear-gradient(180deg, #38383a, #2c2c2e 2%, #1d1d1f);
            border-radius: 14px 14px 2px 2px;
            padding: 10px 10px 0;
            position: relative;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
        }

        .mac-lid::before {
            content: '';
            position: absolute;
            top: 4px;
            left: 50%;
            transform: translateX(-50%);
            width: 54px;
            height: 6px;
            border-radius: 0 0 4px 4px;
            background: #0d0d0d
        }

        .mac-lid::after {
            content: '';
            position: absolute;
            top: 5px;
            left: 50%;
            transform: translateX(-50%);
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: radial-gradient(circle, #1a3a1a 30%, #0a0a0a 70%)
        }

        .mac-screen {
            background: #f0f2f7;
            border-radius: 4px 4px 0 0;
            width: 100%;
            padding-bottom: 62.5%;
            position: relative;
            overflow: hidden;
        }

        .mac-screen::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 10;
            pointer-events: none;
            background: linear-gradient(130deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .08) 8%, rgba(255, 255, 255, .02) 18%, transparent 35%, transparent 100%)
        }

        .mac-screen-inner {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden
        }

        .mac-hinge {
            height: 4px;
            background: linear-gradient(180deg, #1d1d1f, #4a4a4c 20%, #8a8a8c 50%, #4a4a4c 80%, #2c2c2e);
            margin: 0 -4px
        }

        .mac-deck {
            height: 10px;
            background: linear-gradient(180deg, #c0c0c2, #d6d6d8 10%, #e2e2e4 30%, #d0d0d2 60%, #bababc 85%, #a8a8aa);
            border-radius: 0 0 6px 6px;
            margin: 0 -10px;
            position: relative;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6)
        }

        .mac-deck::before {
            content: '';
            position: absolute;
            top: -1px;
            left: 50%;
            transform: translateX(-50%);
            width: 56px;
            height: 3px;
            background: linear-gradient(180deg, #909092, #b4b4b6);
            border-radius: 0 0 3px 3px
        }

        .mac-deck::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 3%;
            right: 3%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5) 20%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, .5) 80%, transparent)
        }

        .mac-lip {
            height: 2px;
            background: linear-gradient(180deg, #a0a0a2, #b0b0b2);
            border-radius: 0 0 4px 4px;
            margin: 0 -8px
        }

        .mac-shadow {
            height: 20px;
            margin-top: 4px;
            position: relative
        }

        .mac-shadow::before {
            content: '';
            position: absolute;
            top: 0;
            left: 6%;
            right: 6%;
            height: 6px;
            background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(0, 0, 0, .14) 0%, transparent 80%);
            filter: blur(2px)
        }

        .mac-shadow::after {
            content: '';
            position: absolute;
            top: 4px;
            left: 12%;
            right: 12%;
            height: 14px;
            background: radial-gradient(ellipse 100% 100% at 50% 0%, rgba(0, 0, 0, .07) 0%, transparent 70%);
            filter: blur(6px)
        }

        .phone {
            position: absolute;
            bottom: 0;
            right: -8%;
            width: 24%;
            z-index: 10;
            filter: drop-shadow(0 24px 48px rgba(0, 0, 0, .2)) drop-shadow(0 8px 16px rgba(0, 0, 0, .12))
        }

        .phone-body {
            background: linear-gradient(135deg, #3a3a3c, #2c2c2e 30%, #1d1d1f 70%, #2a2a2c);
            border-radius: 17%/8%;
            padding: 3.5% 2.8%;
            position: relative;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1)
        }

        .phone-body::before {
            content: '';
            position: absolute;
            top: 2.8%;
            left: 50%;
            transform: translateX(-50%);
            width: 26%;
            height: 2.5%;
            border-radius: 100px;
            background: #000;
            z-index: 5
        }

        .phone-body::after {
            content: '';
            position: absolute;
            top: 16%;
            right: -1.8%;
            width: 1.5%;
            height: 7%;
            border-radius: 0 2px 2px 0;
            background: linear-gradient(90deg, #2c2c2e, #3a3a3c)
        }

        .phone-vol-up,
        .phone-vol-down {
            position: absolute;
            left: -1.8%;
            width: 1.5%;
            height: 5%;
            border-radius: 2px 0 0 2px;
            background: linear-gradient(270deg, #2c2c2e, #3a3a3c)
        }

        .phone-vol-up {
            top: 17%
        }

        .phone-vol-down {
            top: 24%
        }

        .phone-screen {
            border-radius: 13%/6%;
            overflow: hidden;
            background: #f0f2f7;
            padding-bottom: 217%;
            position: relative
        }

        .phone-screen::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 10;
            pointer-events: none;
            background: linear-gradient(140deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .08) 10%, rgba(255, 255, 255, .02) 20%, transparent 40%, transparent 100%)
        }

        .phone-screen-inner {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden
        }

        .sl {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity .8s ease;
            display: flex
        }

        .sl.on {
            opacity: 1
        }

        .sl-label {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(59, 107, 245, .9);
            color: #fff;
            font-size: 8px;
            font-weight: 700;
            padding: 3px 8px;
            border-radius: 4px;
            z-index: 5;
            text-transform: uppercase;
            letter-spacing: .05em
        }


        .d-sidebar {
            width: 13%;
            background: #fff;
            border-right: 1px solid #e5e7eb;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 8px;
            gap: 6px;
            flex-shrink: 0;
            height: 100%
        }

        .d-sidebar-logo {
            width: 50%;
            aspect-ratio: 1;
            background: var(--blue);
            border-radius: 4px
        }

        .d-sidebar-item {
            width: 55%;
            aspect-ratio: 1;
            border-radius: 4px;
            background: #f3f4f6
        }

        .d-sidebar-item.on {
            background: var(--blue-light)
        }

        .d-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%
        }

        .d-topbar {
            height: 24px;
            background: #fff;
            border-bottom: 1px solid #e5e7eb;
            flex-shrink: 0
        }

        .d-body {
            flex: 1;
            padding: 8px;
            background: #f9fafb;
            overflow: hidden
        }

        .d-kpis {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 4px;
            margin-bottom: 6px
        }

        .d-kpis.c3 {
            grid-template-columns: repeat(3, 1fr)
        }

        .d-kpi {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 6px 4px
        }

        .d-kv {
            height: 6px;
            width: 45%;
            border-radius: 2px;
            margin-bottom: 4px
        }

        .d-kl {
            height: 4px;
            width: 60%;
            background: #e5e7eb;
            border-radius: 2px
        }

        .d-chart {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 6px;
            display: flex;
            align-items: flex-end;
            gap: 2px;
            height: 55%
        }

        .d-bar {
            flex: 1;
            border-radius: 2px 2px 0 0;
            min-height: 3px
        }

        .d-patient {
            display: flex;
            gap: 5px;
            align-items: center;
            margin-bottom: 6px
        }

        .d-avatar {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: var(--blue-light)
        }

        .d-name {
            height: 5px;
            width: 50px;
            background: var(--text);
            border-radius: 2px
        }

        .d-sub {
            height: 3px;
            width: 70px;
            background: #e5e7eb;
            border-radius: 2px;
            margin-top: 2px
        }

        .d-tabs {
            display: flex;
            gap: 3px;
            margin-bottom: 6px
        }

        .d-tab {
            height: 12px;
            background: #f3f4f6;
            border-radius: 3px
        }

        .d-tab.on {
            background: var(--blue-light)
        }

        .d-tl-item {
            display: flex;
            gap: 4px;
            margin-bottom: 4px
        }

        .d-tl-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            flex-shrink: 0;
            margin-top: 1px
        }

        .d-tl-card {
            flex: 1;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 3px;
            padding: 4px
        }

        .d-tl-title {
            height: 3px;
            width: 55%;
            background: #d1d5db;
            border-radius: 1px;
            margin-bottom: 3px
        }

        .d-tl-desc {
            height: 2px;
            width: 80%;
            background: #e5e7eb;
            border-radius: 1px
        }

        .d-table {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            overflow: hidden
        }

        .d-table-h {
            height: 14px;
            background: #f3f4f6;
            border-bottom: 1px solid #e5e7eb
        }

        .d-table-r {
            height: 16px;
            border-bottom: 1px solid #f3f4f6
        }

        .d-ag {
            display: grid;
            grid-template-columns: 20px repeat(5, 1fr);
            gap: 2px
        }

        .d-ag-h {
            height: 6px;
            background: #f3f4f6;
            border-radius: 1px
        }

        .d-ag-t {
            height: 3px;
            width: 14px;
            background: #e5e7eb;
            border-radius: 1px;
            align-self: center
        }

        .d-ag-s {
            height: 14px;
            border-radius: 2px
        }

        .d-ag-s.bl {
            background: var(--blue-light);
            border-left: 2px solid var(--blue)
        }

        .d-ag-s.gr {
            background: var(--green-bg);
            border-left: 2px solid var(--green)
        }

        .m-layout {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding-top: 14%
        }

        .m-top {
            height: 18px;
            display: flex;
            align-items: center;
            padding: 0 8%;
            flex-shrink: 0
        }

        .m-top-n {
            height: 5px;
            width: 30%;
            background: var(--text);
            border-radius: 2px
        }

        .m-top-a {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--blue-light);
            margin-left: auto
        }

        .m-body {
            flex: 1;
            padding: 6%;
            overflow: hidden;
            background: #f9fafb
        }

        .m-nav {
            height: 22px;
            background: #fff;
            border-top: 1px solid #e5e7eb;
            display: flex;
            align-items: center;
            justify-content: space-around;
            padding: 0 8%;
            flex-shrink: 0
        }

        .m-nav-d {
            width: 14px;
            height: 14px;
            border-radius: 3px;
            background: #f3f4f6
        }

        .m-nav-d.on {
            background: var(--blue-light)
        }

        .m-kpis {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            margin-bottom: 6px
        }

        .m-kpi {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 5px 4px
        }

        .m-kv {
            height: 5px;
            width: 42%;
            border-radius: 2px;
            margin-bottom: 3px
        }

        .m-kl {
            height: 3px;
            width: 55%;
            background: #e5e7eb;
            border-radius: 2px
        }

        .m-chart {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            padding: 4px;
            display: flex;
            align-items: flex-end;
            gap: 2px;
            height: 40%
        }

        .m-bar {
            flex: 1;
            border-radius: 1px 1px 0 0;
            min-height: 2px
        }

        .m-slot {
            display: flex;
            gap: 4px;
            align-items: center;
            margin-bottom: 4px
        }

        .m-time {
            width: 20%;
            height: 3px;
            background: #e5e7eb;
            border-radius: 1px
        }

        .m-block {
            flex: 1;
            height: 14px;
            border-radius: 3px
        }

        .hero-float {
            position: absolute;
            border-radius: 14px;
            background: #fff;
            border: 1px solid rgba(232, 236, 244, .8);
            box-shadow: 0 8px 32px rgba(15, 23, 41, .08), 0 2px 8px rgba(15, 23, 41, .04);
            padding: 12px 16px;
            font-size: 11px;
            font-weight: 600;
            color: var(--text);
            display: flex;
            align-items: center;
            gap: 9px;
            z-index: 30;
            animation: float 5s ease-in-out infinite
        }

        .hero-float.is-card {
            flex-direction: column;
            align-items: flex-start;
            gap: 2px;
            padding: 14px 18px
        }

        .hf-label {
            font-size: 9px;
            font-weight: 700;
            color: #8896AB;
            text-transform: uppercase;
            letter-spacing: .05em
        }

        .hf-value {
            font-size: 20px;
            font-weight: 800;
            letter-spacing: -.02em;
            color: var(--text)
        }

        .hf-sub {
            font-size: 10px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 3px;
            margin-top: 2px
        }

        .hf-sub.green {
            color: #10B981
        }

        .hf-sub svg {
            width: 10px;
            height: 10px
        }

        .hf-bars {
            display: flex;
            align-items: flex-end;
            gap: 2px;
            height: 24px;
            margin-top: 4px
        }

        .hf-bars .hfb {
            width: 5px;
            border-radius: 2px;
            background: #DBE4FF
        }

        .hf-bars .hfb.hi {
            background: #3B6BF5
        }

        .hero-float.is-notif {
            gap: 10px;
            padding: 10px 14px
        }

        .hf-notif-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #10B981;
            flex-shrink: 0;
            position: relative
        }

        .hf-notif-dot::after {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            background: #10B981;
            opacity: .3;
            animation: hfPulse 2s infinite
        }

        @keyframes hfPulse {
            0% {
                transform: scale(1);
                opacity: .3
            }

            50% {
                transform: scale(2.2);
                opacity: 0
            }

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

        .hf-notif-text {
            font-size: 11px;
            font-weight: 600;
            color: var(--text);
            line-height: 1.3
        }

        .hf-notif-time {
            font-size: 9px;
            color: #8896AB;
            font-weight: 500
        }

        @keyframes float {

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

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

        .hf-i {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0
        }

        .hf-i svg {
            width: 14px;
            height: 14px
        }

        .hf-i.green {
            background: var(--green-bg);
            color: var(--green)
        }

        .hf-i.blue {
            background: var(--blue-light);
            color: var(--blue)
        }

        .hf1 {
            top: 6%;
            right: -6%;
            animation-delay: 0s
        }

        .hf2 {
            bottom: 28%;
            left: -8%;
            animation-delay: 1.2s
        }

        .hf3 {
            bottom: 10%;
            right: 4%;
            animation-delay: 2.4s
        }

        .hf4 {
            top: 36%;
            left: -12%;
            animation-delay: .6s
        }

        .hf5 {
            top: 14%;
            left: -4%;
            animation-delay: 3.2s
        }

        .hf6 {
            bottom: 4%;
            left: 16%;
            animation-delay: 1.8s
        }

        .hero-cursor {
            position: absolute;
            top: 40%;
            left: 52%;
            z-index: 35;
            pointer-events: none;
            animation: cursorDrift 6s ease-in-out infinite
        }

        @keyframes cursorDrift {
            0% {
                top: 32%;
                left: 48%
            }

            20% {
                top: 44%;
                left: 42%
            }

            40% {
                top: 36%;
                left: 58%
            }

            60% {
                top: 48%;
                left: 52%
            }

            80% {
                top: 34%;
                left: 46%
            }

            100% {
                top: 32%;
                left: 48%
            }
        }

        .hero-cursor svg {
            width: 16px;
            height: 20px;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .2))
        }

        .hero-cursor-tip {
            display: none
        }

        @media(min-width:1025px) {
            .hero-visual {
                perspective: 1800px
            }

            .mockup-area {
                transform: rotateY(-4deg) rotateX(1deg);
                transform-style: preserve-3d;
                transition: transform .8s cubic-bezier(.16, 1, .3, 1)
            }

            .mockup-area:hover {
                transform: rotateY(-1deg) rotateX(0deg)
            }

            .phone {
                transform: translateZ(20px)
            }

            @keyframes fadeUp {
                from {
                    opacity: 0;
                    transform: translateY(36px)
                }

                to {
                    opacity: 1;
                    transform: none
                }
            }

            @keyframes devicesEntry {
                from {
                    opacity: 0;
                    transform: translateY(60px) scale(.95)
                }

                to {
                    opacity: 1;
                    transform: none
                }
            }

            .a1 {
                animation: fadeUp .5s cubic-bezier(.16, 1, .3, 1) forwards;
                animation-delay: 0s;
                opacity: 0
            }

            @keyframes headlineReveal {
                0% {
                    opacity: 0;
                    transform: translateY(30px);
                    filter: blur(8px)
                }

                60% {
                    opacity: 1;
                    filter: blur(0)
                }

                100% {
                    opacity: 1;
                    transform: none;
                    filter: blur(0)
                }
            }

            @keyframes emGlow {
                0% {
                    text-shadow: none
                }

                50% {
                    text-shadow: 0 0 30px rgba(59, 107, 245, .3)
                }

                100% {
                    text-shadow: 0 0 0 rgba(59, 107, 245, 0)
                }
            }

            .a2 {
                animation: headlineReveal .7s cubic-bezier(.16, 1, .3, 1) forwards;
                animation-delay: .05s;
                opacity: 0
            }

            .a2 em {
                animation: emGlow 1.5s ease forwards;
                animation-delay: .4s
            }

            .a3 {
                animation: fadeUp .5s cubic-bezier(.16, 1, .3, 1) forwards;
                animation-delay: .1s;
                opacity: 0
            }

            .a4 {
                animation: fadeUp .5s cubic-bezier(.16, 1, .3, 1) forwards;
                animation-delay: .15s;
                opacity: 0
            }

            .a5 {
                animation: fadeUp .5s cubic-bezier(.16, 1, .3, 1) forwards;
                animation-delay: .2s;
                opacity: 0
            }

            .a6 {
                animation: fadeUp .5s cubic-bezier(.16, 1, .3, 1) forwards;
                animation-delay: .25s;
                opacity: 0
            }

            .a-v {
                opacity: 0
            }

            .a-v.entered {
                animation: devicesEntry .7s cubic-bezier(.16, 1, .3, 1) forwards;
                animation-delay: .1s
            }
        }

        @media(max-width:1024px) {
            .hero-grid {
                display: flex;
                flex-direction: column;
                text-align: center;
                gap: 0
            }

            .hero-top {
                order: 1;
                margin-bottom: 32px
            }

            .hero-visual {
                order: 2;
                max-width: 580px;
                margin: 0 auto 32px;
                width: 100%
            }

            .hero-bottom {
                order: 3
            }

            .hero-sub {
                margin: 0 auto 0;
                max-width: 520px
            }

            .hero-bullets {
                max-width: 420px;
                margin: 0 auto 36px
            }

            .hero-ctas {
                justify-content: center
            }

            .hero-note {
                justify-content: center
            }

            .hero-proof {
                justify-content: center
            }

            .mac {
                width: 100%
            }

            .phone {
                right: -4%
            }

            .hero-float {
                display: none
            }

            .hero-float.hf1,
            .hero-float.hf2 {
                display: flex;
                font-size: 10px
            }

            .hero-float.hf1 {
                top: -4%;
                bottom: auto;
                right: 2%;
                left: auto
            }

            .hero-float.hf2 {
                top: auto;
                bottom: -6%;
                left: 2%;
                right: auto
            }

            .hero-float.is-card .hf-value {
                font-size: 16px
            }

            .hero-glow {
                width: 400px;
                height: 400px;
                right: -100px;
                top: -50px;
                opacity: .5
            }
        }

        @media(max-width:640px) {
            .mob-br {
                display: block
            }

            .hero {
                padding: 140px 0 48px;
                min-height: auto
            }

            .hero-grid {
                gap: 32px
            }

            .hero-ctas {
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 8px
            }

            .btn-large,
            .btn-outline-lg {
                padding: 12px 16px;
                font-size: 12.5px;
                justify-content: center;
                white-space: nowrap;
                flex: 0 0 auto
            }

            .hero-bullets {
                grid-template-columns: 1fr;
                text-align: left;
                max-width: 280px
            }

            .hero-visual {
                max-width: 100%;
                padding: 0 8px
            }

            .mac-lid {
                padding: 6px 6px 0;
                border-radius: 10px 10px 2px 2px
            }

            .mac-screen {
                border-radius: 4px 4px 0 0
            }

            .mac-deck {
                height: 7px;
                border-radius: 0 0 5px 5px;
                margin: 0 -5px
            }

            .mac-hinge {
                height: 3px;
                margin: 0 -1px
            }

            .mac-lip {
                margin: 0 -3px
            }

            .mac-shadow {
                height: 14px
            }

            .phone {
                width: 26%;
                right: -1%
            }

            .hero-glow {
                width: 250px;
                height: 250px;
                right: -50px;
                top: -20px
            }

            .hero-glow-2 {
                width: 200px;
                height: 200px;
                left: -60px;
                bottom: -40px
            }
        }

/* ═══ RESPONSIVE FIXES — iPad (768-1024px) ═══ */
        @media(max-width:1024px) and (min-width:769px) {
            .pricing-cards {
                max-width: 600px
            }

            .founder-row {
                max-width: 90%
            }

            .testi-card {
                max-width: 90%
            }

            .faq-list {
                max-width: 90%
            }

            .guarantee-inner {
                max-width: 90%
            }
        }

        /* ═══ RESPONSIVE FIXES — Mobile (<768px) ═══ */
        @media(max-width:768px) {

            /* Header — scoped to header only, prevent overflow */
            .header-inner {
                padding: 0 16px;
                gap: 8px
            }

            .header-logo a {
                width: 140px;
                height: 24px
            }

            .logo-full,
            .logo-icon {
                height: 24px !important
            }

            .header.scrolled .header-logo a {
                width: 34px
            }

            .header-cta {
                min-width: 120px;
                height: 34px
            }

            .header-btn-enter,
            .header-btn-cta {
                min-width: 120px
            }

            .header .btn-ghost {
                padding: 8px 14px;
                font-size: 12px;
                white-space: nowrap
            }

            .header .btn-cta {
                padding: 8px 16px;
                font-size: 12px;
                white-space: nowrap
            }

            /* Hero CTA buttons — keep prominent */
            .hero-ctas .btn-large {
                padding: 15px 32px;
                font-size: 15px
            }

            .hero-ctas .btn-outline-lg {
                padding: 15px 32px;
                font-size: 15px
            }

            /* Marquee */
            .marquee-section {
                padding: 10px 0
            }

            .marquee-item {
                font-size: 13px;
                padding: 0 20px
            }

            /* Pricing CTAs */
            .pricing-cta-primary,
            .pricing-cta-secondary {
                padding: 16px;
                font-size: 15px;
                min-height: 52px;
                display: flex;
                align-items: center;
                justify-content: center
            }

            /* FAQ */
            .faq-list {
                max-width: 100%
            }

            .faq-question {
                font-size: 14px;
                padding: 16px 0
            }

            .faq-answer-inner {
                font-size: 13px
            }

            .faq-cta {
                padding: 32px 16px
            }

            .faq-cta p {
                font-size: 14px
            }

            .btn-whatsapp {
                padding: 14px 28px;
                font-size: 14px;
                min-height: 48px
            }

            /* Final CTA */
            .final-cta {
                padding: clamp(48px, 7vw, 64px) 0
            }

            .final-cta-title {
                font-size: clamp(24px, 5vw, 32px)
            }

            .final-cta-sub {
                font-size: 14px
            }

            .final-cta-btn {
                padding: 16px 32px;
                font-size: 15px;
                min-height: 52px
            }

            /* Footer */
            .footer {
                padding: 24px 0 20px
            }

            .footer-social a {
                font-size: 13px
            }

            .footer-cnpj {
                font-size: 10px
            }
        }

        /* ═══ RESPONSIVE FIXES — Small Mobile Stacking (<640px) ═══ */
        @media(max-width:640px) {

            .hero-ctas .btn-large,
            .hero-ctas .btn-outline-lg {
                width: 100%;
                justify-content: center;
                text-align: center
            }
        }

        /* ═══ RESPONSIVE FIXES — Small Mobile (<480px) ═══ */
        @media(max-width:480px) {
            .hero h1 {
                font-size: 28px
            }

            .hero-sub {
                font-size: 13.5px
            }

            .hero-badge {
                font-size: 11px;
                padding: 5px 12px 5px 8px
            }

            .dor-card {
                padding: 20px
            }

            .dor-card h4 {
                font-size: 15px
            }

            .dor-card p {
                font-size: 13px
            }

            .feat-card {
                padding: 24px
            }

            .feat-card h3 {
                font-size: 15px
            }

            .feat-card p {
                font-size: 13px
            }

            .testi-avatar {
                width: 60px;
                height: 60px
            }

            .testi-quote {
                font-size: 14px !important
            }

            .testi-name {
                font-size: 14px
            }

            .guarantee-big {
                font-size: clamp(20px, 5vw, 26px)
            }

            .guarantee-desc {
                font-size: 13px
            }

            .guarantee-badge {
                font-size: 11px
            }

            .pricing-card {
                padding: 28px 20px
            }

            .pricing-amount {
                font-size: 42px
            }

            .pricing-feature {
                font-size: 12.5px
            }

            .pricing-cta-primary,
            .pricing-cta-secondary {
                padding: 15px;
                font-size: 14px;
                min-height: 50px
            }

            .founder-row {
                padding: 20px 16px
            }

            .founder-info {
                font-size: 13px
            }

            .founder-photo {
                width: 56px;
                height: 56px
            }

            .hero-ctas .btn-large,
            .hero-ctas .btn-outline-lg {
                padding: 14px 24px;
                font-size: 14.5px
            }

            .btn-whatsapp {
                padding: 13px 24px;
                font-size: 13.5px
            }

            .final-cta-btn {
                padding: 15px 28px;
                font-size: 14.5px
            }

            .showcase-pill {
                padding: 6px 12px;
                font-size: 11.5px
            }
        }

        /* ═══ Touch-friendly tap targets ═══ */
        @media(hover:none) {

            .btn-cta,
            .btn-ghost,
            .btn-large,
            .btn-outline-lg,
            .pricing-cta-primary,
            .pricing-cta-secondary,
            .btn-whatsapp,
            .final-cta-btn,
            .faq-question,
            .showcase-pill,
            .showcase-arrow {
                min-height: 44px
            }
        }

        /* ═══ Safe area for notched devices ═══ */
        @supports(padding:env(safe-area-inset-bottom)) {
            .footer {
                padding-bottom: calc(20px + env(safe-area-inset-bottom))
            }

            .header {
                padding-left: env(safe-area-inset-left);
                padding-right: env(safe-area-inset-right)
            }
        }

.marquee-section {
            padding: 28px 0;
            border-top: 1px solid #E8ECF4;
            border-bottom: 1px solid #E8ECF4;
            overflow: hidden;
            background: #fff
        }

        .marquee-track {
            display: flex;
            animation: marquee 35s linear infinite;
            gap: 48px;
            width: max-content
        }

        .marquee-item {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-3);
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: .12em;
            display: flex;
            align-items: center;
            gap: 48px
        }

        .marquee-item::after {
            content: '◆';
            color: var(--blue-100);
            font-size: 7px
        }

        @keyframes marquee {
            0% {
                transform: translateX(0)
            }

            100% {
                transform: translateX(-50%)
            }
        }

.dor {
            padding: clamp(72px, 10vw, 110px) 0;
            background: #fff;
            position: relative
        }

        .dor .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 24px
        }

        .dor-label {
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .16em;
            color: var(--blue);
            margin-bottom: 16px;
            text-align: center;
            display: block
        }

        .dor-title {
            font-size: clamp(26px, 3.2vw, 38px);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -.025em;
            margin-bottom: 28px;
            color: var(--text);
            text-align: center;
            max-width: 760px;
            margin-left: auto;
            margin-right: auto
        }

        .dor-sub {
            font-size: 16px;
            color: var(--text-2);
            line-height: 1.8;
            text-align: center;
            max-width: 620px;
            margin: 0 auto 52px
        }

        .dor-sub strong {
            color: var(--text);
            font-weight: 600
        }

        .dor-sub em {
            font-style: normal;
            color: var(--blue);
            font-weight: 700
        }

        .dor-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            max-width: 900px;
            margin: 0 auto
        }

        .dor-card {
            display: flex;
            gap: 16px;
            align-items: flex-start;
            padding: 24px;
            background: var(--blue-50);
            border-radius: 16px;
            border: 1px solid var(--blue-100);
            transition: transform .3s ease, box-shadow .3s ease
        }

        .dor-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(59, 107, 245, .08)
        }

        .dor-card-icon {
            width: 40px;
            height: 40px;
            min-width: 40px;
            background: #fff;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--blue);
            box-shadow: 0 2px 8px rgba(15, 23, 41, .06)
        }

        .dor-card-icon svg {
            width: 18px;
            height: 18px
        }

        .dor-card-body h4 {
            font-size: 14.5px;
            font-weight: 700;
            color: var(--text);
            margin: 0 0 4px
        }

        .dor-card-body p {
            font-size: 13.5px;
            color: var(--text-2);
            line-height: 1.6;
            margin: 0
        }

        .dor-closing {
            margin-top: 48px;
            text-align: center;
            position: relative
        }

        .dor-closing p {
            font-size: clamp(18px, 2vw, 22px);
            font-weight: 700;
            color: var(--blue);
            margin: 0;
            position: relative;
            z-index: 1
        }

        .dor-closing::after {
            content: '';
            position: absolute;
            width: 160px;
            height: 50px;
            background: radial-gradient(ellipse, rgba(59, 107, 245, .07) 0%, transparent 70%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            filter: blur(14px);
            pointer-events: none
        }

        @keyframes dorShake {

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

            15% {
                transform: translateX(-3px) rotate(-2deg)
            }

            30% {
                transform: translateX(2px) rotate(1deg)
            }

            45% {
                transform: translateX(-2px) rotate(-1deg)
            }

            60% {
                transform: translateX(1px)
            }

            75% {
                transform: translateX(-1px)
            }
        }

        .dor-card.visible .dor-card-icon {
            animation: dorShake .6s cubic-bezier(.36, .07, .19, .97) forwards;
            animation-delay: inherit
        }

        .reveal {
            opacity: 0;
            transform: translateY(32px);
            transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1)
        }

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

        .reveal-d1 {
            transition-delay: .1s
        }

        .reveal-d2 {
            transition-delay: .2s
        }

        .reveal-d3 {
            transition-delay: .3s
        }

        .reveal-d4 {
            transition-delay: .4s
        }

        .reveal-d5 {
            transition-delay: .5s
        }

        @media(max-width:768px) {
            .dor-cards {
                grid-template-columns: 1fr;
                gap: 12px
            }

            .dor-sub {
                text-align: center
            }
        }

        @media(prefers-reduced-motion:reduce) {
            .dor-card.visible .dor-card-icon {
                animation: none
            }
        }

.dif {
            padding: clamp(80px, 10vw, 120px) 0;
            position: relative;
            background: #F8F9FC;
            overflow: hidden
        }

        .dif .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 24px
        }

        .dif-grid {
            display: grid;
            grid-template-columns: 1.1fr 1fr;
            gap: 56px;
            align-items: center
        }

        .dif-visual {
            position: relative
        }

        .dif-media {
            width: 100%;
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid #E8ECF4;
            box-shadow: 0 12px 40px rgba(15, 23, 41, .08), 0 4px 12px rgba(15, 23, 41, .04);
            background: #fff
        }

        .dif-media img {
            width: 100%;
            display: block
        }

        .dif-media-placeholder {
            width: 100%;
            aspect-ratio: 16/10;
            background: linear-gradient(135deg, #f0f4ff, #e8ecf4);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 8px
        }

        .dif-media-placeholder svg {
            opacity: .2
        }

        .dif-media-placeholder span {
            color: var(--text-3);
            font-size: 13px
        }

        .dif-media video {
            width: 100%;
            display: block
        }

        .dif-content {}

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

        .dif-title {
            font-size: clamp(26px, 3.2vw, 38px);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -.025em;
            margin-bottom: 28px;
            color: var(--text)
        }

        .dif-text p {
            font-size: 16px;
            color: var(--text-2);
            line-height: 1.8;
            margin-bottom: 16px
        }

        .dif-text strong {
            color: var(--text);
            font-weight: 600
        }

        .dif-text em {
            font-style: normal;
            color: var(--blue);
            font-weight: 600
        }

        .dif-highlight-wrap {
            margin-top: 28px;
            position: relative;
            display: inline-block;
            padding: 16px 0
        }

        .dif-highlight {
            position: relative;
            font-size: clamp(18px, 2vw, 22px);
            font-weight: 700;
            color: var(--blue);
            display: inline-block;
            z-index: 1;
        }

        .dif-highlight-glow {
            position: absolute;
            width: 340px;
            height: 120px;
            background: radial-gradient(ellipse, rgba(59, 107, 245, .15) 0%, rgba(59, 107, 245, .05) 40%, transparent 70%);
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 0;
            filter: blur(18px);
            opacity: 0;
            pointer-events: none;
        }

        .dif-highlight-wrap.visible .dif-highlight-glow {
            animation: glowPulse 3s ease-in-out infinite, glowDrift 6s ease-in-out infinite;
        }

        .dif-highlight-wrap.visible .dif-highlight {
            animation: highlightReveal 1s cubic-bezier(.16, 1, .3, 1) forwards;
        }

        @keyframes highlightReveal {
            0% {
                opacity: 0;
                transform: translateY(16px);
                filter: blur(4px)
            }

            100% {
                opacity: 1;
                transform: none;
                filter: blur(0)
            }
        }

        @keyframes glowPulse {

            0%,
            100% {
                opacity: .25;
                transform: translate(-50%, -50%) scale(1)
            }

            50% {
                opacity: .5;
                transform: translate(-50%, -50%) scale(1.15)
            }
        }

        @keyframes glowDrift {

            0%,
            100% {
                margin-left: 0
            }

            33% {
                margin-left: 30px
            }

            66% {
                margin-left: -30px
            }
        }

        @media(max-width:768px) {
            .dif-grid {
                grid-template-columns: 1fr;
                gap: 36px
            }

            .dif-visual {
                order: -1
            }

            .dif-highlight-glow {
                width: 260px;
                height: 80px
            }
        }

.feat {
            padding: clamp(72px, 10vw, 110px) 0;
            position: relative;
            background: linear-gradient(170deg, #0F1729 0%, #1a2540 50%, #0F1729 100%);
            overflow: hidden
        }

        .feat::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%233B6BF5' stroke-opacity='0.04' stroke-width='0.5'/%3E%3C/svg%3E") repeat;
            pointer-events: none
        }

        .feat .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 24px;
            position: relative;
            z-index: 1
        }

        .feat-header {
            text-align: center;
            max-width: 640px;
            margin: 0 auto 56px
        }

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

        .feat-title {
            font-size: clamp(26px, 3.2vw, 38px);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -.025em;
            margin-bottom: 14px;
            color: #fff
        }

        .feat-sub {
            font-size: 16px;
            color: rgba(255, 255, 255, .55);
            margin: 0
        }

        .feat-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 16px
        }

        .feat-card {
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(59, 107, 245, .15);
            border-radius: 16px;
            padding: 32px;
            transition: all .35s cubic-bezier(.16, 1, .3, 1);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(4px);
            opacity: 0;
            transform: translateY(40px) scale(.96)
        }

        .feat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--blue), transparent);
            opacity: 0;
            transition: opacity .35s ease
        }

        .feat-card::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at center, rgba(59, 107, 245, .06) 0%, transparent 60%);
            opacity: 0;
            transition: opacity .6s ease;
            pointer-events: none
        }

        .feat-card:hover {
            border-color: rgba(59, 107, 245, .35);
            transform: translateY(-4px) scale(1) !important;
            box-shadow: 0 12px 40px rgba(0, 0, 0, .3), 0 0 60px rgba(59, 107, 245, .08);
            background: rgba(255, 255, 255, .07)
        }

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

        .feat-card:hover::after {
            opacity: 1
        }

        .feat-card-icon {
            width: 44px;
            height: 44px;
            background: rgba(59, 107, 245, .12);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 18px;
            color: var(--blue);
            transition: all .4s cubic-bezier(.16, 1, .3, 1)
        }

        .feat-card:hover .feat-card-icon {
            background: var(--blue);
            color: #fff;
            transform: scale(1.1) rotate(-4deg);
            box-shadow: 0 8px 24px rgba(59, 107, 245, .3)
        }

        .feat-card-icon svg {
            width: 22px;
            height: 22px
        }

        .feat-card h3 {
            font-size: 16px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 8px;
            transition: color .3s
        }

        .feat-card:hover h3 {
            color: var(--blue-light)
        }

        .feat-card p {
            font-size: 14px;
            color: rgba(255, 255, 255, .55);
            line-height: 1.65;
            margin: 0
        }

        .feat-card.feat-visible {
            opacity: 1;
            transform: translateY(0) scale(1);
            transition: opacity .45s cubic-bezier(.16, 1, .3, 1), transform .45s cubic-bezier(.16, 1, .3, 1), border-color .35s, box-shadow .35s, background .35s
        }

        @keyframes featGlowLine {
            0% {
                background-position: -200% 0
            }

            100% {
                background-position: 200% 0
            }
        }

        .feat-card.feat-visible::before {
            background: linear-gradient(90deg, transparent 20%, var(--blue) 50%, transparent 80%);
            background-size: 200% 100%;
            animation: featGlowLine 2s ease forwards;
            animation-delay: inherit;
            opacity: .6
        }

        .feat-bottom {
            text-align: center;
            margin-top: 48px;
            padding: 24px;
            background: rgba(59, 107, 245, .08);
            border-radius: 16px;
            border: 1px solid rgba(59, 107, 245, .15);
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .8s cubic-bezier(.16, 1, .3, 1) .4s, transform .8s cubic-bezier(.16, 1, .3, 1) .4s
        }

        .feat-bottom.feat-visible {
            opacity: 1;
            transform: translateY(0)
        }

        .feat-bottom p {
            font-size: 15px;
            color: rgba(255, 255, 255, .75);
            font-weight: 500;
            margin: 0
        }

        .feat-bottom strong {
            color: var(--blue);
            font-weight: 700
        }

        @media(max-width:768px) {
            .feat-grid {
                grid-template-columns: 1fr;
                gap: 12px
            }
        }

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

            .feat-card,
            .feat-bottom {
                opacity: 1;
                transform: none;
                transition: none
            }

            .feat-card.feat-visible::before {
                animation: none
            }
        }

.showcase {
            padding: clamp(72px, 10vw, 110px) 0 clamp(48px, 7vw, 72px);
            background: #F8F9FC;
            position: relative;
            overflow: hidden
        }

        .showcase .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 24px
        }

        .showcase-header {
            text-align: center;
            max-width: 600px;
            margin: 0 auto 48px
        }

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

        .showcase-title {
            font-size: clamp(26px, 3.2vw, 38px);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -.025em;
            color: var(--text)
        }

        .showcase-viewport {
            position: relative;
            width: 100%;
            overflow: visible;
            padding: 40px 0
        }

        .showcase-track {
            display: flex;
            align-items: center;
            transition: transform .6s cubic-bezier(.16, 1, .3, 1);
            will-change: transform
        }

        .showcase-slide {
            flex: 0 0 60%;
            max-width: 720px;
            position: relative;
            transition: all .5s cubic-bezier(.16, 1, .3, 1);
            opacity: .35;
            transform: scale(.82);
            filter: blur(3px);
            cursor: pointer;
            margin: 0 -20px;
            z-index: 1
        }

        .showcase-slide.active {
            opacity: 1;
            transform: scale(1);
            filter: blur(0);
            z-index: 3
        }

        .showcase-slide.adjacent {
            opacity: .55;
            transform: scale(.88);
            filter: blur(1.5px);
            z-index: 2
        }

        .showcase-img {
            width: 100%;
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid #E8ECF4;
            box-shadow: 0 8px 32px rgba(15, 23, 41, .1);
            background: #fff;
            aspect-ratio: 16/10;
            display: flex;
            align-items: center;
            justify-content: center
        }

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

        .showcase-img-placeholder {
            color: var(--text-3);
            font-size: 14px;
            text-align: center;
            padding: 40px
        }

        .showcase-slide.active .showcase-img {
            box-shadow: 0 16px 48px rgba(59, 107, 245, .15);
            border-color: var(--blue-100)
        }

        .showcase-slide-label {
            text-align: center;
            margin-top: 16px;
            font-size: 14px;
            font-weight: 600;
            color: var(--text-3);
            transition: all .5s ease;
            opacity: 0;
            transform: translateY(8px)
        }

        .showcase-slide.active .showcase-slide-label {
            opacity: 1;
            color: var(--text);
            transform: translateY(0)
        }

        .showcase-nav {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 36px;
            flex-wrap: wrap
        }

        .showcase-pill {
            padding: 8px 18px;
            border-radius: 100px;
            border: 1px solid #E8ECF4;
            background: #fff;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-2);
            cursor: pointer;
            transition: all .25s ease;
            font-family: 'Inter', sans-serif
        }

        .showcase-pill:hover {
            border-color: var(--blue-100);
            color: var(--blue)
        }

        .showcase-pill.active {
            background: var(--blue);
            color: #fff;
            border-color: var(--blue);
            box-shadow: 0 4px 12px rgba(59, 107, 245, .25)
        }

        .showcase-arrows {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            pointer-events: none;
            transform: translateY(-50%);
            padding: 0 max(calc((100% - 720px)/2 - 60px), 8px);
            z-index: 5
        }

        .showcase-arrow {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .9);
            border: 1px solid #E8ECF4;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            pointer-events: all;
            transition: all .25s ease;
            backdrop-filter: blur(8px)
        }

        .showcase-arrow:hover {
            background: #fff;
            box-shadow: 0 4px 16px rgba(15, 23, 41, .1);
            border-color: var(--blue-100)
        }

        .showcase-arrow svg {
            width: 18px;
            height: 18px;
            color: var(--text)
        }

        @media(max-width:768px) {
            .showcase-slide {
                flex: 0 0 80%;
                margin: 0 -10px
            }

            .showcase-arrows {
                display: none
            }

            .showcase-viewport {
                padding: 20px 0
            }

            .showcase-nav {
                gap: 6px;
                justify-content: center;
                padding: 0 16px
            }

            .showcase-pill {
                padding: 6px 14px;
                font-size: 12px
            }
        }

.testi {
            padding: clamp(56px, 8vw, 80px) 0;
            background: #fff;
            position: relative
        }

        .testi .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 24px
        }

        .testi-header {
            text-align: center;
            margin-bottom: clamp(28px, 4vw, 40px)
        }

        .testi-label {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: var(--blue);
            background: var(--blue-50);
            padding: 6px 14px;
            border-radius: 100px
        }

        .testi-card {
            max-width: 640px;
            margin: 0 auto;
            text-align: center
        }

        .testi-avatar {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            background: var(--blue-50);
            border: 3px solid var(--blue-100);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px
        }

        .testi-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .testi-avatar svg {
            width: 32px;
            height: 32px;
            color: var(--blue);
            opacity: .2
        }

        .testi-stars {
            display: inline-flex;
            gap: 3px;
            margin: 8px 0 16px;
            color: #F5A623
        }

        .testi-stars svg {
            width: 16px;
            height: 16px
        }

        .testi-quote {
            font-size: clamp(16px, 1.8vw, 19px);
            color: var(--text);
            line-height: 1.75;
            font-style: italic;
            margin: 0;
            font-weight: 400
        }

        .testi-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-bottom: 4px
        }

        .testi-name {
            color: var(--text);
            font-size: 15px;
            font-weight: 700;
            margin: 0
        }

        .testi-divider {
            width: 20px;
            height: 1.5px;
            background: var(--text-3);
            opacity: .4
        }

        .testi-role {
            color: var(--text-3);
            font-size: 13px;
            font-weight: 400
        }

        @media(max-width:600px) {
            .testi-author {
                flex-direction: column;
                gap: 4px
            }

            .testi-divider {
                display: none
            }
        }

.guarantee {
            padding: clamp(56px, 8vw, 80px) 0;
            position: relative;
            background: linear-gradient(170deg, #0F1729 0%, #1a2540 60%, #0F1729 100%);
            overflow: hidden
        }

        .guarantee::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%233B6BF5' stroke-opacity='0.04' stroke-width='0.5'/%3E%3C/svg%3E") repeat;
            pointer-events: none
        }

        .guarantee .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 24px;
            position: relative;
            z-index: 1
        }

        .guarantee-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 20px;
            max-width: 560px;
            margin: 0 auto
        }

        .guarantee-shield {
            position: relative;
            width: 72px;
            height: 72px
        }

        .guarantee-shield-icon {
            width: 72px;
            height: 72px;
            background: rgba(59, 107, 245, .1);
            border: 2px solid rgba(59, 107, 245, .25);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .guarantee-shield-icon svg {
            width: 32px;
            height: 32px;
            color: var(--blue)
        }

        .guarantee-shield-pulse {
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: 1px solid rgba(59, 107, 245, .15);
            animation: shieldPulse 2.5s ease-in-out infinite
        }

        .guarantee-shield-pulse2 {
            position: absolute;
            inset: -18px;
            border-radius: 50%;
            border: 1px solid rgba(59, 107, 245, .08);
            animation: shieldPulse 2.5s ease-in-out .8s infinite
        }

        @keyframes shieldPulse {

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

            50% {
                opacity: .8;
                transform: scale(1.05)
            }
        }

        .guarantee-big {
            font-size: clamp(22px, 3vw, 30px);
            font-weight: 800;
            color: #fff;
            margin: 0;
            line-height: 1.2
        }

        .guarantee-big span {
            color: var(--blue)
        }

        .guarantee-counter {
            display: inline-block;
            min-width: 1.2ch;
            text-align: center
        }

        .guarantee-desc {
            font-size: 15px;
            color: rgba(255, 255, 255, .5);
            line-height: 1.7;
            margin: 0
        }

        .guarantee-desc strong {
            color: rgba(255, 255, 255, .8);
            font-weight: 600
        }

        .guarantee-badges {
            display: flex;
            gap: 24px;
            flex-wrap: wrap;
            justify-content: center
        }

        .guarantee-badge {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11.5px;
            font-weight: 600;
            color: rgba(255, 255, 255, .35);
            text-transform: uppercase;
            letter-spacing: .06em
        }

        .guarantee-badge svg {
            width: 16px;
            height: 16px;
            color: var(--blue);
            opacity: .7
        }

        @media(max-width:768px) {
            .guarantee-badges {
                gap: 14px
            }
        }

.pricing {
            padding: clamp(72px, 10vw, 110px) 0;
            background: #fff;
            position: relative
        }

        .pricing .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 24px
        }

        .pricing-header {
            text-align: center;
            margin-bottom: 20px
        }

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

        .pricing-title {
            font-size: clamp(26px, 3.2vw, 38px);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -.025em;
            color: var(--text)
        }

        .pricing-intro {
            max-width: 660px;
            margin: 0 auto 40px;
            font-size: 16px;
            color: var(--text-2);
            line-height: 1.8;
            text-align: center
        }

        .pricing-intro strong {
            color: var(--text)
        }

        .founder-row {
            display: flex;
            gap: 20px;
            align-items: center;
            max-width: 660px;
            margin: 0 auto 56px;
            padding: 28px 32px;
            background: #F8F9FC;
            border-radius: 16px;
            border: 1px solid #E8ECF4
        }

        .founder-photo {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            background: var(--blue-50);
            border: 2px solid var(--blue-100)
        }

        .founder-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .founder-photo-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .founder-photo-placeholder svg {
            opacity: .2
        }

        .founder-info {
            font-size: 14px;
            color: var(--text-2);
            line-height: 1.7
        }

        .founder-info strong {
            color: var(--text);
            display: block;
            font-size: 15px;
            margin-bottom: 4px
        }

        .founder-info em {
            font-style: normal;
            color: var(--blue);
            font-weight: 700
        }

        .pricing-includes {
            max-width: 660px;
            margin: 0 auto 40px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px 28px
        }

        .pricing-inc {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--text-2);
            font-weight: 500
        }

        .pricing-inc svg {
            width: 16px;
            height: 16px;
            color: #16a34a;
            flex-shrink: 0
        }

        .pricing-cards {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            max-width: 720px;
            margin: 0 auto
        }

        .pricing-card {
            padding: 40px;
            background: #fff;
            border: 2px solid #E8ECF4;
            border-radius: 20px;
            text-align: center;
            position: relative;
            transition: all .35s ease
        }

        .pricing-card:hover {
            box-shadow: 0 12px 40px rgba(15, 23, 41, .08);
            transform: translateY(-4px)
        }

        .pricing-card.featured {
            border-color: var(--blue);
            box-shadow: 0 8px 32px rgba(59, 107, 245, .12);
            background: linear-gradient(180deg, #FAFCFF, #fff);
            animation: featuredGlow 3s ease-in-out infinite
        }

        @keyframes featuredGlow {

            0%,
            100% {
                box-shadow: 0 8px 32px rgba(59, 107, 245, .12)
            }

            50% {
                box-shadow: 0 8px 40px rgba(59, 107, 245, .22), 0 0 0 1px rgba(59, 107, 245, .15)
            }
        }

        .pricing-card.featured::before {
            content: 'Recomendado';
            position: absolute;
            top: -13px;
            left: 50%;
            transform: translateX(-50%);
            padding: 5px 16px;
            background: var(--blue);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            border-radius: 100px;
            letter-spacing: .02em;
            white-space: nowrap
        }

        .pricing-plan-label {
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .1em;
            color: var(--text-3);
            margin-bottom: 20px
        }

        .pricing-card.featured .pricing-plan-label {
            color: var(--blue)
        }

        .pricing-amount {
            font-size: 52px;
            font-weight: 900;
            color: var(--text);
            line-height: 1;
            margin-bottom: 4px;
            letter-spacing: -.03em
        }

        .pricing-amount>span {
            font-size: 18px;
            font-weight: 500;
            color: var(--text-3)
        }

        .pricing-amount>.price-counter {
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
            letter-spacing: inherit
        }

        .pricing-period {
            font-size: 14px;
            color: var(--text-3);
            margin-bottom: 8px
        }

        .pricing-savings {
            font-size: 13px;
            color: #16a34a;
            font-weight: 600;
            margin-bottom: 24px;
            min-height: 20px
        }

        .pricing-features {
            margin-bottom: 28px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            text-align: left
        }

        .pricing-feature {
            display: flex;
            align-items: center;
            gap: 9px;
            font-size: 13.5px;
            color: var(--text-2)
        }

        .pricing-check {
            flex-shrink: 0;
            width: 18px;
            height: 18px;
            background: #dcfce7;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .pricing-check svg {
            width: 10px;
            height: 10px;
            color: #16a34a
        }

        .pricing-cta-primary {
            display: block;
            width: 100%;
            padding: 16px;
            border-radius: 12px;
            text-decoration: none;
            color: #fff;
            background: var(--blue);
            font-weight: 700;
            font-size: 15px;
            text-align: center;
            transition: all .25s;
            border: none;
            cursor: pointer;
            font-family: 'Inter', sans-serif;
            box-shadow: 0 4px 12px rgba(59, 107, 245, .25);
            position: relative;
            overflow: hidden
        }

        .pricing-cta-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(59, 107, 245, .35)
        }

        .pricing-cta-primary::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, .15) 50%, transparent 60%);
            animation: btnShine 3s ease-in-out infinite
        }

        @keyframes btnShine {

            0%,
            100% {
                transform: translateX(-100%)
            }

            50% {
                transform: translateX(100%)
            }
        }

        .pricing-cta-secondary {
            display: block;
            width: 100%;
            padding: 16px;
            border-radius: 12px;
            text-decoration: none;
            color: var(--blue);
            background: #fff;
            font-weight: 700;
            font-size: 15px;
            text-align: center;
            transition: all .25s;
            border: 2px solid var(--blue);
            cursor: pointer;
            font-family: 'Inter', sans-serif
        }

        .pricing-cta-secondary:hover {
            background: var(--blue-50);
            transform: translateY(-2px)
        }

        .pricing-note {
            margin-top: 12px;
            font-size: 12px;
            color: var(--text-3);
            text-align: center
        }

        @media(max-width:768px) {
            .pricing-cards {
                grid-template-columns: 1fr;
                gap: 16px
            }

            .founder-row {
                flex-direction: column;
                text-align: center;
                gap: 12px
            }
        }

.faq {
            padding: clamp(72px, 10vw, 110px) 0;
            background: #F8F9FC;
            position: relative
        }

        .faq .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 24px
        }

        .faq-header {
            text-align: center;
            margin-bottom: 48px
        }

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

        .faq-title {
            font-size: clamp(26px, 3.2vw, 38px);
            font-weight: 800;
            line-height: 1.15;
            letter-spacing: -.025em;
            color: var(--text)
        }

        .faq-list {
            max-width: 720px;
            margin: 0 auto
        }

        .faq-item {
            border-bottom: 1px solid #E8ECF4
        }

        .faq-question {
            width: 100%;
            background: none;
            border: none;
            padding: 22px 0;
            font-family: 'Inter', sans-serif;
            font-size: 15.5px;
            font-weight: 600;
            color: var(--text);
            text-align: left;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16px;
            transition: color .25s ease
        }

        .faq-question:hover {
            color: var(--blue)
        }

        .faq-arrow {
            flex-shrink: 0;
            width: 22px;
            height: 22px;
            transition: transform .3s ease;
            color: var(--text-3)
        }

        .faq-item.open .faq-arrow {
            transform: rotate(180deg);
            color: var(--blue)
        }

        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height .4s cubic-bezier(.16, 1, .3, 1)
        }

        .faq-item.open .faq-answer {
            max-height: 500px
        }

        .faq-answer-inner {
            padding-bottom: 22px;
            font-size: 14.5px;
            color: var(--text-2);
            line-height: 1.8
        }

        .faq-cta {
            max-width: 720px;
            margin: 40px auto 0;
            padding: 28px;
            background: #fff;
            border: 1px solid #E8ECF4;
            border-radius: 16px;
            text-align: center
        }

        .faq-cta p {
            font-size: 15px;
            color: var(--text-2);
            margin-bottom: 6px
        }

        .faq-cta-strong {
            font-size: 16px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 18px
        }

        .btn-whatsapp {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 13px 26px;
            background: #25D366;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-family: 'Inter', sans-serif;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all .25s ease;
            text-decoration: none
        }

        .btn-whatsapp:hover {
            background: #1fb855;
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(37, 211, 102, .25)
        }

.final-cta {
            padding: clamp(64px, 9vw, 96px) 0;
            position: relative;
            background: linear-gradient(170deg, #0F1729 0%, #1a2540 60%, #0F1729 100%);
            overflow: hidden;
            text-align: center
        }

        .final-cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0L60 30L30 60L0 30Z' fill='none' stroke='%233B6BF5' stroke-opacity='0.04' stroke-width='0.5'/%3E%3C/svg%3E") repeat;
            pointer-events: none
        }

        .final-cta .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 24px;
            position: relative;
            z-index: 1
        }

        .final-cta-title {
            font-size: clamp(28px, 4vw, 44px);
            font-weight: 800;
            color: #fff;
            line-height: 1.15;
            letter-spacing: -.025em;
            margin-bottom: 16px
        }

        .final-cta-sub {
            font-size: 16px;
            color: rgba(255, 255, 255, .55);
            margin-bottom: 8px;
            line-height: 1.6
        }

        .final-cta-guarantee {
            font-size: 13px;
            color: rgba(255, 255, 255, .35);
            margin-bottom: 36px
        }

        .final-cta-btn {
            display: inline-block;
            padding: 18px 40px;
            background: var(--blue);
            color: #fff;
            font-size: 16px;
            font-weight: 700;
            border-radius: 12px;
            text-decoration: none;
            transition: all .3s;
            box-shadow: 0 4px 16px rgba(59, 107, 245, .3);
            position: relative;
            overflow: hidden
        }

        .final-cta-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(59, 107, 245, .4)
        }

        .final-cta-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%);
            animation: btnShine 3s ease-in-out infinite
        }

        .final-cta-orbs {
            position: absolute;
            inset: 0;
            pointer-events: none;
            overflow: hidden
        }

        .final-cta-orb {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(59, 107, 245, .15), transparent 70%);
            filter: blur(40px)
        }

        .final-cta-orb:nth-child(1) {
            width: 300px;
            height: 300px;
            top: -80px;
            left: -60px;
            animation: orbDrift1 12s ease-in-out infinite
        }

        .final-cta-orb:nth-child(2) {
            width: 200px;
            height: 200px;
            bottom: -40px;
            right: -30px;
            animation: orbDrift2 10s ease-in-out infinite
        }

        .final-cta-orb:nth-child(3) {
            width: 150px;
            height: 150px;
            top: 50%;
            left: 60%;
            animation: orbDrift3 14s ease-in-out infinite;
            background: radial-gradient(circle, rgba(16, 185, 129, .08), transparent 70%)
        }

        @keyframes orbDrift1 {

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

            33% {
                transform: translate(60px, 30px) scale(1.1)
            }

            66% {
                transform: translate(-20px, 50px) scale(.95)
            }
        }

        @keyframes orbDrift2 {

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

            50% {
                transform: translate(-50px, -30px) scale(1.15)
            }
        }

        @keyframes orbDrift3 {

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

            50% {
                transform: translate(40px, -40px) scale(1.2);
                opacity: .8
            }
        }

        @media(prefers-reduced-motion:reduce) {
            .final-cta-orb {
                animation: none !important
            }
        }

.footer {
            padding: 32px 0 24px;
            background: #fff;
            border-top: 1px solid #E8ECF4;
            text-align: center
        }

        .footer .container {
            max-width: var(--max-w);
            margin: 0 auto;
            padding: 0 24px
        }

        .footer-social {
            margin-bottom: 16px
        }

        .footer-social a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: var(--blue);
            text-decoration: none;
            font-weight: 600;
            transition: opacity .2s
        }

        .footer-social a:hover {
            opacity: .7
        }

        .footer-social svg {
            width: 20px;
            height: 20px
        }

        .footer-copy {
            font-size: 12px;
            color: var(--text-3);
            display: block;
            margin-bottom: 6px
        }

        .footer-cnpj {
            font-size: 11px;
            color: var(--text-3);
            opacity: .6
        }

.wpp-float {
            position: fixed;
            bottom: 24px;
            right: 24px;
            z-index: 9999;
            display: flex;
            align-items: center;
            gap: 10px
        }

        .wpp-float-label {
            background: #fff;
            color: var(--text);
            font-size: 13px;
            font-weight: 600;
            padding: 8px 14px;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
            opacity: 0;
            transform: translateX(10px);
            transition: all .3s ease;
            pointer-events: none;
            white-space: nowrap
        }

        .wpp-float:hover .wpp-float-label {
            opacity: 1;
            transform: translateX(0)
        }

        .wpp-float-btn {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #25D366;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 16px rgba(37, 211, 102, .35);
            transition: all .3s ease;
            cursor: pointer;
            text-decoration: none;
            border: none
        }

        .wpp-float-btn:hover {
            transform: scale(1.08);
            box-shadow: 0 6px 24px rgba(37, 211, 102, .45)
        }

        .wpp-float-btn svg {
            width: 28px;
            height: 28px;
            fill: #fff
        }

        .wpp-float-pulse {
            position: absolute;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(37, 211, 102, .3);
            animation: wppPulse 2s ease-in-out infinite;
            right: 0;
            bottom: 0;
            pointer-events: none
        }

        @keyframes wppPulse {

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

            50% {
                transform: scale(1.4);
                opacity: 0
            }
        }

        @media(max-width:480px) {
            .wpp-float {
                bottom: 16px;
                right: 16px
            }

            .wpp-float-btn {
                width: 50px;
                height: 50px
            }

            .wpp-float-btn svg {
                width: 24px;
                height: 24px
            }

            .wpp-float-pulse {
                width: 50px;
                height: 50px
            }

            .wpp-float-label {
                display: none
            }
        }