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

        :root {
            --bg: #FFFFFF;
            --bg2: #F8F9FA;
            --bg3: #F1F3F5;
            --v: #00A859;
            --vg: rgba(0, 168, 89, .25);
            --c: #20C997;
            --cg: rgba(32, 201, 151, .25);
            --m: #A3F2C8;
            --mg: rgba(163, 242, 200, .2);
            --g: #FF9A8B;
            --tx: #333333;
            --mu: #666666;
            --br: rgba(0, 0, 0, .07);
            --rail: 60px;
        }

        html {
            scroll-behavior: smooth
        }

        body {
            background: var(--bg);
            color: var(--tx);
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            line-height: 1.6;
            transition: background .8s ease
        }

        ::-webkit-scrollbar {
            width: 4px
        }

        ::-webkit-scrollbar-thumb {
            background: var(--v);
            border-radius: 2px
        }

        /* ── MOBILE PROGRESS BAR ── */
        #mob-bar {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 999;
            height: 3px;
            background: rgba(0, 0, 0, .08)
        }

        #mob-fill {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--v), var(--c), var(--m));
            transition: width .05s linear
        }

        #mob-icon {
            display: none;
            position: fixed;
            bottom: 6px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            background: var(--bg2);
            border: 1px solid var(--br);
            border-radius: 999px;
            padding: 4px 14px;
            font-size: .7rem;
            color: var(--mu);
            font-weight: 600;
            letter-spacing: .06em
        }

        /* ── RAIL ── */
        #rail {
            position: fixed;
            left: 16px;
            top: 0;
            width: 28px;
            height: 100vh;
            z-index: 900;
            display: flex;
            flex-direction: column;
            align-items: center;
            pointer-events: none
        }

        #rail::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 1.5px;
            background: rgba(0, 0, 0, .06);
            border-radius: 1px
        }

        #tf {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 0%;
            background: linear-gradient(180deg, var(--v) 0%, var(--c) 50%, var(--m) 100%);
            border-radius: 1px;
            box-shadow: 0 0 6px var(--vg)
        }

        .wp {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: rgba(0, 0, 0, .08);
            border: 1.5px solid rgba(0, 0, 0, .15);
            transition: all .4s
        }

        .wp.on {
            background: var(--v);
            border-color: var(--v);
            box-shadow: 0 0 10px var(--vg)
        }

        .wp:nth-child(3).on {
            background: var(--c);
            border-color: var(--c);
            box-shadow: 0 0 10px var(--cg)
        }

        .wp:nth-child(4).on {
            background: var(--m);
            border-color: var(--m);
            box-shadow: 0 0 10px var(--mg)
        }

        .wp:nth-child(5).on {
            background: var(--g);
            border-color: var(--g);
            box-shadow: 0 0 10px rgba(255, 154, 139, .4)
        }

        .wp:nth-child(6).on {
            background: var(--c);
            border-color: var(--c);
            box-shadow: 0 0 10px var(--cg)
        }

        .wl {
            position: absolute;
            left: 16px;
            white-space: nowrap;
            font-size: .6rem;
            font-weight: 700;
            color: var(--mu);
            letter-spacing: .07em;
            opacity: 0;
            transition: opacity .3s;
            pointer-events: none;
            text-transform: uppercase
        }

        .wp.on .wl {
            opacity: .6
        }

        #traveler {
            position: absolute;
            top: 4%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        #traveler::before {
            content: '';
            position: absolute;
            inset: -5px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--vg) 0%, transparent 70%);
            animation: tpulse 2s ease-in-out infinite
        }

        @keyframes tpulse {

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

            50% {
                transform: scale(1.5);
                opacity: .2
            }
        }

        #tsvg {
            width: 32px;
            height: 32px;
            filter: drop-shadow(0 0 8px rgba(0, 168, 89, .9))
        }

        /* ── PARTICLES ── */
        #particles-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: 800
        }

        /* ── LAYOUT ── */
        .pc {
            padding-left: calc(var(--rail) + 4px)
        }

        #navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
            padding: 1rem 3.5rem 1rem calc(var(--rail) + 1.5rem);
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid var(--br);
            backdrop-filter: blur(18px);
            background: rgba(255, 255, 255, .9);
            opacity: 0
        }

        .nlogo {
            font-size: 1.3rem;
            font-weight: 800;
            background: linear-gradient(90deg, var(--v), var(--c));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .nlinks {
            display: flex;
            gap: 2rem;
            list-style: none
        }

        .nlinks a {
            color: #333333;
            text-decoration: none;
            font-size: .875rem;
            font-weight: 500;
            transition: color .3s
        }

        .nlinks a:hover {
            color: var(--tx)
        }

        /* ── SUBMENU ── */
        .nsub {
            position: relative;
        }

        .nsub-btn {
            background: none;
            border: none;
            color: #333333;
            font-size: .875rem;
            font-weight: 500;
            font-family: inherit;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 0;
            transition: color .3s;
        }

        .nsub-btn:hover {
            color: var(--tx);
        }

        .nsub-menu {
            position: absolute;
            top: 100%;
            left: 0;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid var(--br);
            border-radius: 8px;
            padding: 0.5rem 0;
            min-width: 180px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            opacity: 0;
            transform: translateY(10px);
            pointer-events: none;
            transition: opacity 0.3s, transform 0.3s;
            display: flex;
            flex-direction: column;
            z-index: 1000;
        }

        .nsub:hover .nsub-menu {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .nsub-menu a {
            padding: 0.5rem 1.2rem;
            color: #555555;
            font-size: 0.8rem;
            text-decoration: none;
            transition: background 0.2s, color 0.2s;
        }

        .nsub-menu a:hover {
            background: rgba(0, 168, 89, 0.05);
            color: var(--v);
        }

        .ncta {
            background: var(--v);
            color: #ffffff;
            padding: .5rem 1.3rem;
            border-radius: 8px;
            font-size: .85rem;
            font-weight: 600;
            text-decoration: none;
            transition: box-shadow .3s, transform .2s
        }

        .ncta:hover {
            box-shadow: 0 0 20px var(--vg);
            transform: translateY(-1px)
        }

        /* ── HERO ── */
        #hero {
            min-height: 100vh;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 2rem;
            padding: 8rem 4rem 5rem 3.5rem;
            position: relative;
            overflow: hidden
        }

        #hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 60% 60% at 70% 50%, rgba(0, 168, 89, .1) 0%, transparent 70%);
            pointer-events: none
        }

        .hbadge {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: rgba(0, 168, 89, .1);
            border: 1px solid rgba(0, 168, 89, .3);
            color: var(--v);
            font-size: .75rem;
            font-weight: 700;
            padding: .4rem 1rem;
            border-radius: 999px;
            margin-bottom: 1.5rem;
            letter-spacing: .06em;
            text-transform: uppercase;
            opacity: 0
        }

        .hbdot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--v)
        }

        .htitle {
            font-size: clamp(2.2rem, 5vw, 3.8rem);
            font-weight: 900;
            line-height: 1.1;
            letter-spacing: -.03em;
            margin-bottom: 1.5rem
        }

        .htitle span {
            background: linear-gradient(135deg, var(--v), var(--c));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        /* split chars hidden initially */
        .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(30px)
        }

        .hdesc {
            font-size: 1rem;
            color: var(--mu);
            max-width: 48ch;
            line-height: 1.75;
            margin-bottom: 2.5rem;
            opacity: 0
        }

        .hact {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            opacity: 0
        }

        .btp {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            background: linear-gradient(135deg, var(--v), #20C997);
            color: #ffffff;
            padding: .8rem 1.8rem;
            border-radius: 10px;
            font-weight: 700;
            font-size: .9rem;
            text-decoration: none;
            box-shadow: 0 4px 24px var(--vg);
            transition: transform .2s, box-shadow .2s
        }

        .btp:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 32px var(--vg)
        }

        .bts {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            border: 1px solid rgba(0, 0, 0, .2);
            color: var(--tx);
            padding: .8rem 1.8rem;
            border-radius: 10px;
            font-weight: 600;
            font-size: .9rem;
            text-decoration: none;
            transition: border-color .3s, background .3s
        }

        .bts:hover {
            border-color: var(--v);
            background: rgba(0, 168, 89, .07)
        }

        .hvisual {
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            cursor: none
        }

        #hcanvas {
            width: 420px;
            height: 420px;
            filter: drop-shadow(0 0 50px rgba(0, 168, 89, .3))
        }

        /* ── PIPELINE SECTION ── */
        #pipeline {
            min-height: 350vh;
            position: relative;
            background: #F8F9FA
        }

        .pipe-sticky {
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 4rem 0 3.5rem;
            overflow: hidden
        }

        .pipe-label {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--m);
            margin-bottom: .75rem
        }

        .pipe-title {
            font-size: clamp(1.8rem, 3.5vw, 2.8rem);
            font-weight: 900;
            letter-spacing: -.03em;
            line-height: 1.1;
            margin-bottom: .75rem
        }

        .pipe-desc {
            color: var(--mu);
            font-size: .95rem;
            max-width: 55ch;
            margin-bottom: 2.5rem
        }

        /* pipeline track */
        .pipe-track {
            position: relative;
            height: 180px;
            display: flex;
            align-items: center
        }

        .pipe-line-svg {
            position: absolute;
            left: 0;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            height: 8px;
            overflow: visible
        }

        .pipe-base {
            stroke: rgba(0, 0, 0, .06);
            stroke-width: 2;
            fill: none
        }

        #pipe-progress {
            stroke: url(#pipeGrad);
            stroke-width: 3;
            fill: none;
            stroke-linecap: round;
            stroke-dasharray: 1000;
            stroke-dashoffset: 1000;
            filter: url(#pipeGlow)
        }

        .pipe-stations {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            position: relative;
            z-index: 2
        }

        .station {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: .6rem;
            opacity: .25;
            transition: opacity .5s, transform .5s;
            transform: translateY(8px)
        }

        .station.active {
            opacity: 1;
            transform: translateY(0)
        }

        .st-icon {
            width: 72px;
            height: 72px;
            border-radius: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid rgba(0, 0, 0, .1);
            background: rgba(0, 0, 0, .03);
            font-size: 1.9rem;
            transition: border-color .5s, background .5s, box-shadow .5s;
            position: relative
        }

        .station.active .st-icon {
            border-color: var(--v);
            background: rgba(0, 168, 89, .12);
            box-shadow: 0 0 24px var(--vg)
        }

        .station:nth-child(2).active .st-icon {
            border-color: var(--c);
            background: rgba(32, 201, 151, .1);
            box-shadow: 0 0 24px var(--cg)
        }

        .station:nth-child(3).active .st-icon {
            border-color: var(--m);
            background: rgba(163, 242, 200, .1);
            box-shadow: 0 0 24px var(--mg)
        }

        .station:nth-child(4).active .st-icon {
            border-color: var(--g);
            background: rgba(255, 154, 139, .1);
            box-shadow: 0 0 24px rgba(255, 154, 139, .3)
        }

        .station:nth-child(5).active .st-icon {
            border-color: var(--v);
            background: rgba(0, 168, 89, .12);
            box-shadow: 0 0 24px var(--vg)
        }

        .st-label {
            font-size: .75rem;
            font-weight: 700;
            color: var(--mu);
            letter-spacing: .05em;
            text-align: center;
            transition: color .5s
        }

        .station.active .st-label {
            color: var(--tx)
        }

        .st-sub {
            font-size: .65rem;
            color: var(--mu);
            text-align: center;
            max-width: 80px;
            opacity: 0;
            transition: opacity .5s
        }

        .station.active .st-sub {
            opacity: .7
        }

        /* ripple on station activate */
        @keyframes ripple {
            0% {
                transform: scale(1);
                opacity: .8
            }

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

        .st-ripple {
            position: absolute;
            inset: -4px;
            border-radius: 18px;
            border: 2px solid var(--v);
            animation: ripple .6s ease-out forwards;
            pointer-events: none
        }

        /* ── FEATURES ── */
        #features {
            padding: 7rem 4rem 7rem 3.5rem;
            background: var(--bg)
        }

        .sh {
            text-align: center;
            margin-bottom: 4.5rem
        }

        .sl {
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--v);
            margin-bottom: .75rem
        }

        .st {
            font-size: clamp(1.8rem, 3.5vw, 2.8rem);
            font-weight: 900;
            letter-spacing: -.03em;
            line-height: 1.15
        }

        .fgrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.25rem;
            max-width: 1100px;
            margin: 0 auto
        }

        .fc {
            background: var(--bg3);
            border: 1px solid var(--br);
            border-radius: 14px;
            padding: 1.75rem;
            opacity: 0;
            transform: scale(.9) translateY(20px);
            position: relative;
            overflow: hidden;
            cursor: default;
            transition: border-color .3s;
            transform-style: preserve-3d;
            perspective: 600px
        }

        .fc::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--v), var(--c));
            opacity: 0;
            transition: opacity .3s
        }

        .fc:hover {
            border-color: rgba(0, 168, 89, .4)
        }

        .fc:hover::after {
            opacity: 1
        }

        .fi {
            width: 44px;
            height: 44px;
            border-radius: 11px;
            background: var(--vg);
            border: 1px solid rgba(0, 168, 89, .2);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.1rem;
            font-size: 1.3rem
        }

        .ft {
            font-weight: 700;
            font-size: .95rem;
            margin-bottom: .5rem
        }

        .fd {
            color: var(--mu);
            font-size: .85rem;
            line-height: 1.65
        }

        /* ── STATS ── */
        #stats {
            padding: 5rem 4rem 5rem 3.5rem;
            background: var(--bg2);
            border-top: 1px solid var(--br);
            border-bottom: 1px solid var(--br)
        }

        .sgrid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 860px;
            margin: 0 auto;
            text-align: center
        }

        .si {
            opacity: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem
        }

        .sring {
            position: relative;
            width: 120px;
            height: 120px
        }

        .sring svg {
            transform: rotate(-90deg)
        }

        .sring-bg {
            fill: none;
            stroke: rgba(0, 0, 0, .07);
            stroke-width: 6
        }

        .sring-fill {
            fill: none;
            stroke: url(#statGrad);
            stroke-width: 6;
            stroke-linecap: round;
            stroke-dasharray: 283;
            stroke-dashoffset: 283;
            transition: stroke-dashoffset 1.8s cubic-bezier(.16, 1, .3, 1)
        }

        .sring-val {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            font-weight: 900;
            letter-spacing: -.04em;
            background: linear-gradient(135deg, var(--v), var(--c));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .slbl {
            color: var(--mu);
            font-size: .85rem;
            max-width: 130px
        }

        /* ── CTA ── */
        #cta {
            padding: 7rem 4rem 7rem 3.5rem;
            text-align: center;
            background: var(--bg);
            position: relative;
            overflow: hidden
        }

        #cta::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(0, 168, 89, .1) 0%, rgba(32, 201, 151, .06) 50%, transparent 70%);
            pointer-events: none
        }

        .ctai {
            position: relative;
            z-index: 2
        }

        .ctat {
            font-size: clamp(2rem, 4vw, 3.2rem);
            font-weight: 900;
            letter-spacing: -.03em;
            margin-bottom: 1.2rem
        }

        .ctad {
            color: var(--mu);
            font-size: 1rem;
            max-width: 55ch;
            margin: 0 auto 2.5rem
        }

        #ctabtn {
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            background: linear-gradient(135deg, var(--c), #ff4757);
            color: #ffffff;
            padding: 1rem 2.4rem;
            border-radius: 12px;
            font-weight: 700;
            font-size: .95rem;
            text-decoration: none;
            box-shadow: 0 6px 30px var(--cg);
            transition: transform .2s, box-shadow .2s
        }

        #ctabtn:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 40px var(--cg)
        }

        .ctasub {
            margin-top: 1.5rem;
            color: var(--mu);
            font-size: .85rem
        }

        .ctasub a {
            color: var(--mu);
            text-decoration: underline
        }

        /* ── FOOTER ── */
        footer {
            padding: 2rem 4rem 2rem 3.5rem;
            border-top: 1px solid var(--br);
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .flogo {
            font-size: 1.1rem;
            font-weight: 800;
            background: linear-gradient(90deg, var(--v), var(--c));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent
        }

        .fcopy {
            color: var(--mu);
            font-size: .78rem
        }

        /* ── MOBILE KEYFRAMES ── */
        @keyframes mob-slide-up {
            from {
                opacity: 0;
                transform: translateY(40px)
            }

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

        @keyframes mob-slide-left {
            from {
                opacity: 0;
                transform: translateX(40px)
            }

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

        @keyframes mob-zoom-in {
            from {
                opacity: 0;
                transform: scale(.85)
            }

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

        @keyframes mob-ripple {
            0% {
                transform: scale(0);
                opacity: .5
            }

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

        @keyframes mob-pulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, .5)
            }

            50% {
                box-shadow: 0 0 0 16px rgba(37, 211, 102, 0)
            }
        }

        @keyframes mob-orbit-a {
            from {
                transform: rotate(0deg) translateX(38px) rotate(0deg)
            }

            to {
                transform: rotate(360deg) translateX(38px) rotate(-360deg)
            }
        }

        @keyframes mob-orbit-b {
            from {
                transform: rotate(120deg) translateX(28px) rotate(-120deg)
            }

            to {
                transform: rotate(480deg) translateX(28px) rotate(-480deg)
            }
        }

        @keyframes mob-orbit-c {
            from {
                transform: rotate(240deg) translateX(22px) rotate(-240deg)
            }

            to {
                transform: rotate(600deg) translateX(22px) rotate(-600deg)
            }
        }

        @keyframes mob-glow-pulse {

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

            50% {
                opacity: 1;
                transform: scale(1.08)
            }
        }

        @keyframes fab-bounce-in {
            0% {
                transform: translateY(80px) scale(0.3);
                opacity: 0
            }

            60% {
                transform: translateY(-8px) scale(1.1)
            }

            80% {
                transform: translateY(4px) scale(.95)
            }

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

        @keyframes dot-grow {
            from {
                width: 8px;
                background: rgba(0, 0, 0, .2)
            }

            to {
                width: 28px;
                background: var(--v)
            }
        }

        @keyframes feature-card-flip {
            from {
                opacity: 0;
                transform: rotateY(30deg) translateY(30px)
            }

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

        @keyframes stat-pop {
            0% {
                transform: scale(.7);
                opacity: 0
            }

            50% {
                transform: scale(1.12)
            }

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

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

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

        @keyframes badge-appear {
            from {
                transform: translateX(-20px);
                opacity: 0
            }

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

        /* ── FLOATING WHATSAPP FAB ── */
        #wa-fab {
            display: none;
            position: fixed;
            bottom: 5.5rem;
            right: 1.2rem;
            z-index: 999;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: linear-gradient(135deg, #25d366, #128c7e);
            border: none;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            box-shadow: 0 6px 24px rgba(37, 211, 102, .45);
            animation: fab-bounce-in .7s cubic-bezier(.16, 1, .3, 1) forwards, mob-pulse 2.5s ease-in-out 1s infinite;
            text-decoration: none;
            opacity: 0
        }

        #wa-fab.show {
            display: flex;
            opacity: 1
        }

        #wa-fab svg {
            width: 28px;
            height: 28px
        }

        .wa-label {
            position: absolute;
            right: 64px;
            background: rgba(9, 9, 15, .9);
            border: 1px solid rgba(37, 211, 102, .3);
            color: #A3F2C8;
            font-size: .72rem;
            font-weight: 700;
            padding: .3rem .7rem;
            border-radius: 999px;
            white-space: nowrap;
            opacity: 0;
            transform: translateX(8px);
            transition: opacity .3s, transform .3s
        }

        #wa-fab:active .wa-label,
        #wa-fab:hover .wa-label {
            opacity: 1;
            transform: translateX(0)
        }

        /* ── MOBILE BOTTOM DOT NAV ── */
        #mob-dots {
            display: none;
            position: fixed;
            bottom: 1.4rem;
            left: 50%;
            transform: translateX(-50%);
            z-index: 998;
            gap: .45rem;
            align-items: center;
            background: rgba(9, 9, 15, .7);
            border: 1px solid rgba(0, 0, 0, .08);
            border-radius: 999px;
            padding: .5rem .8rem;
            backdrop-filter: blur(16px)
        }

        .mdot {
            height: 8px;
            border-radius: 999px;
            background: rgba(0, 0, 0, .2);
            transition: width .4s cubic-bezier(.16, 1, .3, 1), background .4s;
            width: 8px;
            cursor: pointer
        }

        .mdot.on {
            width: 28px;
            background: var(--v);
            box-shadow: 0 0 8px var(--vg)
        }

        .mdot:nth-child(2).on {
            background: var(--m);
            box-shadow: 0 0 8px var(--mg)
        }

        .mdot:nth-child(3).on {
            background: var(--c);
            box-shadow: 0 0 8px var(--cg)
        }

        .mdot:nth-child(4).on {
            background: var(--g);
            box-shadow: 0 0 8px rgba(255, 154, 139, .4)
        }

        .mdot:nth-child(5).on {
            background: var(--c);
            box-shadow: 0 0 8px var(--cg)
        }

        /* Tap ripple */
        .ripple-wrap {
            position: relative;
            overflow: hidden
        }

        .ripple-el {
            position: absolute;
            border-radius: 50%;
            background: rgba(0, 0, 0, .25);
            width: 60px;
            height: 60px;
            margin-top: -30px;
            margin-left: -30px;
            animation: mob-ripple .55s linear forwards;
            pointer-events: none
        }

        /* Mobile feature snap carousel */
        .fgrid-wrap {
            position: relative
        }

        .fgrid-snap-dots {
            display: none;
            justify-content: center;
            gap: .4rem;
            margin-top: 1rem
        }

        .fsnap-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(0, 0, 0, .18);
            transition: background .3s, transform .3s
        }

        .fsnap-dot.on {
            background: var(--v);
            transform: scale(1.3)
        }

        /* Mobile hero ring animation */
        .mob-ring-wrap {
            display: none;
            justify-content: center;
            align-items: center;
            position: relative;
            width: 120px;
            height: 120px;
            margin: 1.5rem auto 0
        }

        .mob-ring-core {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: rgba(0, 168, 89, .1);
            border: 2px solid rgba(0, 168, 89, .4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            animation: mob-glow-pulse 2.5s ease-in-out infinite
        }

        .mob-orbit {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 16px;
            height: 16px;
            margin: -8px 0 0 -8px;
            border-radius: 50%
        }

        .mob-orbit-a {
            background: var(--v);
            animation: mob-orbit-a 3s linear infinite;
            box-shadow: 0 0 10px var(--vg)
        }

        .mob-orbit-b {
            background: var(--c);
            width: 12px;
            height: 12px;
            margin: -6px 0 0 -6px;
            animation: mob-orbit-b 4s linear infinite;
            box-shadow: 0 0 8px var(--cg)
        }

        .mob-orbit-c {
            background: var(--m);
            width: 10px;
            height: 10px;
            margin: -5px 0 0 -5px;
            animation: mob-orbit-c 2.2s linear infinite;
            box-shadow: 0 0 6px var(--mg)
        }

        /* Mobile stat cards shimmer */
        .si.mob-in {
            animation: stat-pop .5s cubic-bezier(.16, 1, .3, 1) forwards
        }

        /* Reveal helpers */
        .mob-reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity .6s ease, transform .6s ease
        }

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

        /* Mobile pipeline steps glow */
        .station.mob-lit .st-icon {
            animation: mob-glow-pulse 1.5s ease-in-out infinite
        }

        /* Mobile section badge */
        .mob-section-badge {
            display: none;
            position: absolute;
            top: 1.2rem;
            right: 1.2rem;
            font-size: .6rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--v);
            opacity: .4;
            font-feature-settings: "tnum"
        }

        @media(max-width:860px) {
            .mob-hide-video {
                display: none !important;
            }

            #rail {
                display: none
            }

            #mob-bar,
            #mob-icon {
                display: block
            }

            #mob-dots {
                display: flex
            }

            #wa-fab {
                display: flex
            }

            .mob-ring-wrap {
                display: flex
            }

            .fgrid-snap-dots {
                display: flex
            }

            .mob-section-badge {
                display: block
            }

            .pc {
                padding-left: 0
            }

            #navbar {
                padding: .9rem 1.5rem;
                background: rgba(255, 255, 255, .92)
            }

            .nlinks {
                display: none
            }

            #hero {
                grid-template-columns: 1fr;
                padding: 5.5rem 1.5rem 3rem;
                text-align: center
            }

            .hbadge {
                margin: 0 auto 1.5rem;
                animation: badge-appear .6s .2s ease-out forwards;
                opacity: 0
            }

            .hact {
                justify-content: center;
                gap: .75rem
            }

            .btp,
            .bts {
                width: 100%;
                justify-content: center;
                padding: .95rem 1.5rem
            }

            .hdesc {
                max-width: 100%;
                font-size: .95rem
            }

            .hvisual {
                display: none
            }

            #pipeline .pipe-sticky {
                padding: 0 1.5rem
            }

            .pipe-stations {
                flex-direction: column;
                gap: 1.2rem;
                height: auto
            }

            .pipe-track {
                height: auto;
                flex-direction: column;
                gap: 1.2rem
            }

            .pipe-line-svg {
                display: none
            }

            .station {
                flex-direction: row;
                align-items: center;
                gap: 1rem;
                opacity: 1;
                transform: none;
                width: 100%;
                background: rgba(0, 0, 0, .02);
                border-radius: 12px;
                padding: .8rem 1rem;
                border: 1px solid rgba(0, 0, 0, .05);
                transition: border-color .5s, background .5s, box-shadow .5s
            }

            .station.active {
                background: rgba(0, 168, 89, .06);
                border-color: rgba(0, 168, 89, .2);
                box-shadow: 0 4px 20px rgba(0, 168, 89, .1)
            }

            .st-icon {
                width: 54px;
                height: 54px;
                font-size: 1.5rem;
                flex-shrink: 0
            }

            .st-sub {
                max-width: none;
                opacity: .7;
                font-size: .7rem
            }

            #features {
                padding: 5rem 1.5rem
            }

            .fgrid {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                gap: 1rem;
                padding: .5rem .25rem 1.5rem;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none
            }

            .fgrid::-webkit-scrollbar {
                display: none
            }

            .fc {
                flex-shrink: 0;
                width: 78vw;
                scroll-snap-align: center;
                opacity: 1;
                transform: none
            }

            #stats {
                padding: 4rem 1.5rem
            }

            .sgrid {
                grid-template-columns: 1fr 1fr;
                gap: 1.5rem
            }

            .si {
                opacity: 0
            }

            #cta {
                padding: 5rem 1.5rem
            }

            footer {
                flex-direction: column;
                gap: 1rem;
                text-align: center;
                padding: 1.5rem
            }

            .htitle {
                font-size: 2rem
            }

            /* add padding at bottom for dot nav */
            body {
                padding-bottom: 4.5rem
            }
        }

        @media(max-width:480px) {
            .htitle {
                font-size: 1.75rem
            }

            .fc {
                width: 88vw
            }

            .sgrid {
                grid-template-columns: 1fr
            }

            .pipe-desc {
                display: none
            }
        }

        /* ── FLOATING PHONE ── */
        #float-phone {
            position: fixed;
            right: 2.5rem;
            top: 50%;
            transform: translateY(-50%) translateX(160px) rotate3d(0, 1, 0, 8deg);
            z-index: 850;
            width: 160px;
            pointer-events: none;
            opacity: 0;
            transition: opacity .6s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
            filter: drop-shadow(0 20px 60px rgba(0, 168, 89, .35))
        }

        #float-phone.visible {
            opacity: 1;
            transform: translateY(-50%) translateX(0) rotate3d(0, 1, 0, 4deg)
        }

        #float-phone.tilt-up {
            transform: translateY(calc(-50% - 8px)) translateX(0) rotate3d(1, 1, 0, -3deg)
        }

        #float-phone.tilt-down {
            transform: translateY(calc(-50% + 8px)) translateX(0) rotate3d(1, 1, 0, 3deg)
        }

        /* Phone frame SVG */
        #fp-svg {
            width: 100%;
            height: auto
        }

        /* Screen state layers */
        .fp-screen {
            opacity: 0;
            transition: opacity .5s ease
        }

        .fp-screen.active {
            opacity: 1
        }

        /* Section number ghost */
        #sec-num {
            position: fixed;
            right: -0.5rem;
            bottom: 2rem;
            font-size: 13vw;
            font-weight: 900;
            line-height: 1;
            color: rgba(0, 168, 89, .04);
            letter-spacing: -.05em;
            pointer-events: none;
            z-index: 0;
            transition: opacity .8s, color .8s;
            user-select: none
        }

        @media(max-width:1100px) {
            #float-phone {
                display: none
            }

            #sec-num {
                display: none
            }
        }

        /* ── MOBILE HERO STORE VISUAL ── */
        #mob-hero-card {
            display: none;
            margin: 2rem auto 0;
            width: 82vw;
            max-width: 320px;
            background: rgba(14, 14, 24, .8);
            border: 1px solid rgba(0, 168, 89, .18);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0, 168, 89, .2), 0 0 0 1px rgba(0, 0, 0, .04);
            animation: mob-zoom-in .8s .3s cubic-bezier(.16, 1, .3, 1) forwards;
            opacity: 0
        }

        .mhc-topbar {
            height: 38px;
            background: rgba(9, 9, 15, .6);
            border-bottom: 1px solid rgba(0, 0, 0, .05);
            display: flex;
            align-items: center;
            padding: 0 .8rem;
            gap: .5rem
        }

        .mhc-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%
        }

        .mhc-title {
            font-size: .6rem;
            font-weight: 700;
            color: rgba(0, 0, 0, .3);
            margin-left: .4rem
        }

        .mhc-notif {
            margin-left: auto;
            font-size: .55rem;
            font-weight: 800;
            padding: .15rem .45rem;
            border-radius: 999px;
            background: var(--m);
            color: white;
            animation: mob-glow-pulse 2s ease-in-out infinite
        }

        .mhc-body {
            padding: .75rem
        }

        .mhc-prods {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: .5rem;
            margin-bottom: .6rem
        }

        .mhc-prod {
            background: rgba(0, 0, 0, .03);
            border: 1px solid rgba(0, 0, 0, .06);
            border-radius: 10px;
            padding: .5rem;
            position: relative;
            overflow: hidden
        }

        .mhc-prod-img {
            font-size: 1.6rem;
            text-align: center;
            display: block;
            margin-bottom: .3rem
        }

        .mhc-prod-name {
            font-size: .6rem;
            color: rgba(0, 0, 0, .55);
            font-weight: 600
        }

        .mhc-prod-price {
            font-size: .8rem;
            font-weight: 900;
            color: var(--v)
        }

        .mhc-prod-badge {
            position: absolute;
            top: .35rem;
            right: .35rem;
            font-size: .45rem;
            padding: .1rem .35rem;
            border-radius: 999px;
            font-weight: 700
        }

        .mhc-prod:nth-child(1) .mhc-prod-badge {
            background: rgba(163, 242, 200, .2);
            color: var(--c)
        }

        .mhc-prod:nth-child(2) .mhc-prod-badge {
            background: rgba(32, 201, 151, .16);
            color: var(--m)
        }

        .mhc-cta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(0, 168, 89, .08);
            border-radius: 10px;
            padding: .5rem .75rem;
            border: 1px solid rgba(0, 168, 89, .15)
        }

        .mhc-cta-label {
            font-size: .65rem;
            color: rgba(0, 0, 0, .4)
        }

        .mhc-cta-val {
            font-size: .95rem;
            font-weight: 900;
            color: var(--v)
        }

        .mhc-cta-btn {
            font-size: .6rem;
            font-weight: 800;
            background: var(--v);
            color: white;
            padding: .3rem .7rem;
            border-radius: 999px;
            animation: mob-glow-pulse 2.5s ease-in-out 1s infinite
        }

        @media(max-width:860px) {
            #mob-hero-laptop {
                display: block !important;
            }
        }

        @keyframes mobFloat {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }

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

        .float-el {
            animation: mobFloat 3s ease-in-out infinite;
        }

        /* ── EXAMPLES MODAL ── */
        .eml-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(8px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.4s ease;
        }

        .eml-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }

        .eml-content {
            background: #FFFFFF;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow-y: auto;
            border-radius: 20px;
            padding: 2rem;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            position: relative;
            transform: translateY(30px) scale(0.95);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid rgba(0, 0, 0, 0.05);
        }

        .eml-overlay.active .eml-content {
            transform: translateY(0) scale(1);
        }

        .eml-close {
            position: absolute;
            top: 1.5rem;
            right: 1.5rem;
            background: rgba(0, 0, 0, 0.05);
            border: none;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            font-size: 1.5rem;
            color: #333;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s;
        }

        .eml-close:hover {
            background: rgba(0, 0, 0, 0.1);
        }

        .eml-title {
            font-size: 2rem;
            font-weight: 900;
            margin-bottom: 0.5rem;
            color: #333333;
        }

        .eml-desc {
            color: #666666;
            margin-bottom: 2rem;
        }

        .eml-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }

        .eml-card {
            display: flex;
            flex-direction: column;
            background: #F8F9FA;
            border-radius: 16px;
            padding: 1rem;
            text-decoration: none;
            color: inherit;
            border: 1px solid rgba(0, 0, 0, 0.04);
            transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
        }

        .eml-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            border-color: rgba(0, 168, 89, 0.3);
        }

        .eml-card-img {
            width: 100%;
            height: 80px;
            border-radius: 12px;
            margin-bottom: 0.8rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .eml-card-info h4 {
            font-size: 1.1rem;
            font-weight: 800;
            margin-bottom: 0.25rem;
        }

        .eml-card-info p {
            font-size: 0.85rem;
            color: #888899;
        }

        @media(max-width: 600px) {
            .eml-title {
                font-size: 1.4rem;
            }

            .eml-content {
                padding: 1.5rem 1rem;
                width: 95%;
            }

            .eml-grid {
                grid-template-columns: 1fr;
                gap: 0.8rem;
            }

            .eml-card {
                flex-direction: row;
                align-items: center;
                padding: 1rem;
            }

            .eml-card-img {
                width: 60px;
                height: 60px;
                margin-bottom: 0;
                margin-right: 1rem;
            }

            .eml-card-img span {
                font-size: 1.5rem !important;
            }
        }

        /* ── IFRAME MODAL ── */
        .iframe-content {
            background: #FFFFFF;
            width: 95%;
            height: 90vh;
            max-width: 1400px;
            border-radius: 20px;
            padding: 0;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            position: relative;
            transform: translateY(30px) scale(0.95);
            transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            border: 1px solid rgba(0, 0, 0, 0.05);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .eml-overlay.active .iframe-content {
            transform: translateY(0) scale(1);
        }

        #example-iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 20px;
        }
        
        #iframe-modal .eml-close {
            z-index: 10;
            background: rgba(255, 255, 255, 0.9);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        #iframe-modal .eml-close:hover {
            background: #ffffff;
        }

        /* ── PROMO BANNER ── */
        #promo-banner {
            position: fixed;
            top: 72px; /* Set by JS */
            left: 0;
            right: 0;
            z-index: 998;
            background: linear-gradient(270deg, rgba(0, 168, 89, 0.08), rgba(32, 201, 151, 0.08), rgba(163, 242, 200, 0.08), rgba(0, 168, 89, 0.08));
            background-size: 300% 300%;
            animation: fluidPromo 8s ease infinite;
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(0, 168, 89, 0.15);
            padding: 0.5rem 3.5rem 0.5rem calc(var(--rail) + 1.5rem);
            box-shadow: 0 4px 20px rgba(0,0,0,0.04);
            opacity: 0;
            transform: translateY(-20px);
            animation: pbSlideDown 0.6s ease forwards 0.2s;
        }

        @keyframes fluidPromo {
            0% { background-position: 0% 50% }
            50% { background-position: 100% 50% }
            100% { background-position: 0% 50% }
        }
        @keyframes pbSlideDown {
            to { opacity: 1; transform: translateY(0); }
        }

        .pb-content {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        .pb-left {
            font-weight: 800;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: linear-gradient(90deg, var(--v), var(--c));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            flex: 1;
        }

        .pb-center {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .pb-icon-wrap {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(0, 168, 89, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 15px rgba(0, 168, 89, 0.35);
            animation: pbPulse 2s infinite;
        }

        @keyframes pbPulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 168, 89, 0.4); }
            70% { box-shadow: 0 0 0 10px rgba(0, 168, 89, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 168, 89, 0); }
        }

        .pb-icon-wrap svg {
            width: 16px;
            height: 16px;
            color: var(--v);
        }

        .pb-right {
            flex: 1;
            display: flex;
            justify-content: flex-end;
        }

        .pb-cta {
            display: inline-block;
            padding: 0.35rem 1rem;
            background: rgba(0, 168, 89, 0.06);
            color: var(--v);
            font-size: 0.8rem;
            font-weight: 700;
            border-radius: 6px;
            text-decoration: none;
            border: 1px solid rgba(0, 168, 89, 0.15);
            transition: all 0.2s;
        }
        .pb-cta:hover {
            background: var(--v);
            border-color: var(--v);
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px var(--vg);
        }

        .pb-date {
            position: absolute;
            bottom: -4px;
            right: 0;
            font-size: 0.6rem;
            color: var(--mu);
            font-weight: 600;
        }

        /* Mobile responsive for banner */
        @media (max-width: 860px) {
            #promo-banner {
                padding: 0.5rem 1.5rem;
            }
            .pb-content {
                flex-direction: column;
                gap: 0.4rem;
                text-align: center;
            }
            .pb-left {
                font-size: 0.8rem;
            }
            .pb-icon-wrap {
                width: 24px;
                height: 24px;
            }
            .pb-icon-wrap svg {
                width: 12px;
                height: 12px;
            }
            .pb-right {
                justify-content: center;
                width: 100%;
            }
            .pb-cta {
                width: 100%;
                text-align: center;
            }
            .pb-date {
                position: static;
                margin-top: 0.2rem;
                font-size: 0.65rem;
            }
        }

        /* ── SECURE LEAD FORM ── */
        .secure-lead-form {
            margin-top: 3rem;
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.6);
            border-radius: 16px;
            padding: 1.25rem 1.5rem;
            max-width: 550px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
            opacity: 0;
            transform: translateY(20px);
            animation: slfFadeIn 0.8s ease forwards 0.5s;
            position: relative;
            overflow: hidden;
        }

        .secure-lead-form::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
            transform: skewX(-20deg);
            animation: slfShine 6s infinite;
        }

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

        @keyframes slfShine {
            0% { left: -100%; }
            20% { left: 200%; }
            100% { left: 200%; }
        }

        .slf-header {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.75rem;
            font-weight: 700;
            color: var(--v, #00A859);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 1rem;
        }

        .slf-icon {
            width: 14px;
            height: 14px;
        }

        .slf-body {
            display: flex;
            gap: 0.75rem;
            align-items: center;
            flex-wrap: wrap;
            position: relative;
            z-index: 2;
        }

        .slf-input-group {
            flex: 1;
            min-width: 140px;
        }

        .slf-input-group input {
            width: 100%;
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid rgba(0, 0, 0, 0.08);
            border-radius: 10px;
            padding: 0.75rem 1rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            color: #333;
            outline: none;
            transition: all 0.3s;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.02);
        }

        .slf-input-group input:focus {
            background: #fff;
            border-color: var(--v, #00A859);
            box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.15);
        }

        .slf-btn {
            background: #111;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 0.75rem 1.25rem;
            font-family: 'Inter', sans-serif;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        .slf-btn:hover {
            transform: translateY(-2px);
            background: var(--v, #00A859);
            box-shadow: 0 8px 25px rgba(0, 168, 89, 0.3);
        }

        .slf-btn svg {
            width: 16px;
            height: 16px;
            transition: transform 0.3s;
        }

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

        .slf-msg {
            display: none;
            margin-top: 0.75rem;
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.5rem;
            border-radius: 6px;
            text-align: center;
        }

        .slf-msg.success {
            display: block;
            color: #0b6623;
            background: rgba(11, 102, 35, 0.1);
            border: 1px solid rgba(11, 102, 35, 0.2);
        }

        .slf-msg.error {
            display: block;
            color: #d32f2f;
            background: rgba(211, 47, 47, 0.1);
            border: 1px solid rgba(211, 47, 47, 0.2);
        }
        
        @media (max-width: 600px) {
            .slf-body { flex-direction: column; align-items: stretch; }
            .secure-lead-form { margin-top: 2rem; padding: 1rem; }
        }