:root {
        --orange: #F07B29;
        --yellow: #F5C800;
        --green: #7BB843;
        --dark: #1A1A1A;
        --text: #2D2D2D;
        --muted: #6B7280;
        --light: #F9F8F5;
        --white: #FFFFFF;
        --border: #E8E4DC;
        --orange-light: #FFF4EC;
        --yellow-light: #FFFBEA;
        --green-light: #F0F8E8;
        --radius: 16px;
        --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
        --shadow-lg: 0 12px 48px rgba(0, 0, 0, 0.12);
        --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

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

    html {
        scroll-behavior: smooth
    }

    body {
        font-family: 'Manrope', sans-serif;
        background: var(--white);
        color: var(--text);
        overflow-x: hidden;
        line-height: 1.6
    }

    /* ══ NAV ══ */
    nav {
        position: sticky;
        top: 0;
        z-index: 100;
        background: rgba(255, 255, 255, 0.97);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 6%;
        height: 68px;
        transition: height 0.35s ease, box-shadow 0.35s ease, background 0.35s ease, border-color 0.35s ease
    }

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

    .logo-svg {
        height: 44px;
        width: auto;
        object-fit: contain
    }

    .logo-svg-footer {
        height: 38px;
        width: auto;
        object-fit: contain
    }

    .nav-links {
        display: flex;
        align-items: center;
        gap: 28px;
        list-style: none
    }

    .nav-links a {
        text-decoration: none;
        color: var(--muted);
        font-size: 0.88rem;
        font-weight: 600;
        transition: var(--transition)
    }

    .nav-links a:hover,
    .nav-links a.active {
        color: var(--orange)
    }

    .nav-right {
        display: flex;
        align-items: center;
        gap: 12px
    }

    .btn-ghost {
        padding: 9px 20px;
        border-radius: 8px;
        font-family: 'Manrope', sans-serif;
        font-weight: 700;
        font-size: 0.83rem;
        cursor: pointer;
        text-decoration: none;
        border: 1.5px solid var(--border);
        color: var(--text);
        background: transparent;
        transition: var(--transition)
    }

    .btn-ghost:hover {
        border-color: var(--orange);
        color: var(--orange)
    }

    .btn-nav {
        padding: 9px 22px;
        border-radius: 8px;
        font-family: 'Manrope', sans-serif;
        font-weight: 700;
        font-size: 0.83rem;
        cursor: pointer;
        text-decoration: none;
        background: var(--orange);
        color: var(--white);
        border: none;
        transition: var(--transition)
    }

    .btn-nav:hover {
        background: #d96a1a;
        transform: translateY(-1px)
    }

    nav.scrolled {
        height: 56px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 4px 28px rgba(0, 0, 0, 0.1);
        border-bottom-color: rgba(240, 123, 41, 0.2)
    }

    nav.scrolled .logo-svg {
        height: 36px
    }

    nav.scrolled .btn-nav {
        padding: 7px 18px
    }

    nav.scrolled .btn-ghost {
        padding: 7px 16px
    }

    /* ══ NAV DROPDOWN ══ */
    .nav-links li {
        position: relative
    }

    .nav-dropdown {
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.13);
        min-width: 250px;
        padding: 8px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
        z-index: 200
    }

    .nav-dropdown::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
        background: var(--white);
        border-top: 1.5px solid var(--border);
        border-left: 1.5px solid var(--border)
    }

    .nav-links li:hover .nav-dropdown,
    .nav-links li:focus-within .nav-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: all;
        transform: translateX(-50%) translateY(0)
    }

    .nd-section {
        font-size: 0.62rem;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        padding: 8px 12px 4px;
        display: block
    }

    .nd-section:not(:first-child) {
        margin-top: 4px;
        border-top: 1px solid var(--border);
        padding-top: 10px
    }

    .nav-dropdown a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 12px;
        border-radius: 9px;
        font-size: 0.84rem;
        font-weight: 600;
        color: var(--text) !important;
        text-decoration: none;
        transition: var(--transition);
        white-space: nowrap
    }

    .nav-dropdown a:hover {
        background: var(--orange-light);
        color: var(--orange) !important
    }

    .nd-icon {
        width: 28px;
        height: 28px;
        border-radius: 7px;
        background: var(--light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        flex-shrink: 0;
        transition: var(--transition)
    }

    .nav-dropdown a:hover .nd-icon {
        background: rgba(240, 123, 41, 0.18)
    }

    .nd-arrow {
        margin-left: auto;
        color: var(--muted);
        font-size: 0.75rem;
        transition: var(--transition)
    }

    .nav-dropdown a:hover .nd-arrow {
        color: var(--orange);
        transform: translateX(2px)
    }

    .has-dropdown>a::after {
        content: '▾';
        font-size: 0.65rem;
        margin-left: 4px;
        color: var(--muted);
        transition: var(--transition);
        vertical-align: middle
    }

    .has-dropdown:hover>a::after {
        color: var(--orange)
    }

    /* ══ HAMBURGER ══ */
    .hamburger {
        display: none;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        padding: 6px;
        border: none;
        background: none;
        z-index: 200
    }

    .hamburger span {
        display: block;
        width: 24px;
        height: 2.5px;
        background: var(--dark);
        border-radius: 2px;
        transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
        transform-origin: center
    }

    .hamburger.open span:nth-child(1) {
        transform: translateY(7.5px) rotate(45deg)
    }

    .hamburger.open span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0)
    }

    .hamburger.open span:nth-child(3) {
        transform: translateY(-7.5px) rotate(-45deg)
    }

    /* ══ MOBILE DRAWER ══ */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        width: min(320px, 100vw);
        background: var(--white);
        z-index: 150;
        display: flex;
        flex-direction: column;
        padding: 80px 32px 40px;
        box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12);
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        border-left: 1px solid var(--border);
        overflow-y: auto
    }

    .mobile-menu.open {
        transform: translateX(0)
    }

    .mobile-menu-links {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 28px
    }

    .mobile-menu-links>li>a {
        text-decoration: none;
        color: var(--text);
        font-size: 1.05rem;
        font-weight: 700;
        padding: 12px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--border);
        transition: var(--transition)
    }

    .mobile-menu-links>li>a:hover {
        color: var(--orange)
    }

    .mobile-menu-links>li>a.no-arrow::after {
        display: none
    }

    .mobile-menu-links>li>a:not(.no-arrow)::after {
        content: '→';
        color: var(--muted);
        font-size: 0.9rem;
        transition: var(--transition)
    }

    .mobile-menu-links>li>a:hover::after {
        color: var(--orange)
    }

    /* Mobile support sub-items */
    .mob-sub {
        list-style: none;
        padding-left: 14px;
        border-left: 2px solid var(--border);
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease
    }

    .mob-sub.open {
        max-height: 400px
    }

    .mob-sub li a {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 0;
        font-size: 0.88rem;
        font-weight: 600;
        color: var(--muted);
        text-decoration: none;
        border-bottom: 1px solid rgba(232, 228, 220, 0.5);
        transition: var(--transition)
    }

    .mob-sub li a:hover {
        color: var(--orange)
    }

    .mob-sub li a::after {
        display: none !important
    }

    .mob-support-toggle {
        cursor: pointer;
        user-select: none
    }

    .mob-support-toggle .chev {
        font-size: 0.7rem;
        color: var(--muted);
        transition: transform 0.3s;
        margin-left: auto
    }

    .mob-support-toggle.open .chev {
        transform: rotate(180deg)
    }

    .mobile-menu-btns {
        display: flex;
        flex-direction: column;
        gap: 10px
    }

    .mobile-menu-btns .btn-ghost,
    .mobile-menu-btns .btn-nav {
        text-align: center;
        display: block;
        padding: 13px
    }

    .mobile-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 140;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s ease;
        backdrop-filter: blur(2px)
    }

    .mobile-overlay.open {
        opacity: 1;
        pointer-events: all
    }

    /* ══ HERO ══ */
    .hero {
        background: linear-gradient(135deg, var(--yellow-light), #FFF0C0);
        /* background: linear-gradient(135deg, var(--orange-light), #FFE8D0); */
        /* background: linear-gradient(155deg, #FFFBF5 0%, #FFF8EE 45%, #F5FFF0 100%); */
        padding: 20px 6% 0;
        /* display: grid; */
        /* grid-template-columns: 1fr 1fr; */
        gap: 60px;
        align-items: flex-end;
        overflow: hidden;
        min-height: 90vh
    }

    .hero {
        position: relative;
        overflow: hidden;
        height: 100vh;
        display: flex;
        align-items: center;
        padding: 40px;
        color: white;
    }

    /* Video */
    .hero-bg-video {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translate(-50%, -50%);
        z-index: 0;
    }

    #hero-image{
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translate(-50%, -50%);
        z-index: 0;
    }

    /* Content */
    .hero-left {
        position: relative;
        z-index: 3;
    }


    /* Slanted white rectangle */
    .hero .slant-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 60%;
        height: 100%;
        background: rgba(255, 255, 255, 0.85);
        z-index: 2;

        /* Create slanted shape */
        clip-path: polygon(0 0, 50% 0, 100% 100%, 0% 100%);
    }

    /* Right slanted rectangle */
    .hero .slant-right {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 55%;
        height: 70%;
        background: rgba(255, 255, 255, 0.85);
        z-index: 2;

        /* Shape: bottom middle → right middle */
        clip-path: polygon(40% 100%, 100% 60%, 100% 100%);
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: transparent;
        border: 1.5px solid rgba(240, 123, 41, 0.35);
        border-radius: 50px;
        padding: 5px 13px;
        font-size: 0.7rem;
        font-weight: 700;
        color: var(--orange);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 18px
    }


    .hero h1 {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: clamp(2.8rem, 5.5vw, 4.4rem);
        font-weight: 900;
        line-height: 1.0;
        text-transform: uppercase;
        color: var(--dark);
        margin-bottom: 22px;
        letter-spacing: -1px
    }

    .hero h1 .accent {
        color: var(--orange)
    }

    .hero-sub {
        font-size: 1.05rem;
        font-weight: 400;
        color: var(--muted);
        line-height: 1.75;
        max-width: 480px;
        margin-bottom: 26px
    }

    .hero-form {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 32px
    }

    .btn-primary {
        padding: 14px 28px;
        border-radius: 10px;
        font-family: 'Manrope', sans-serif;
        font-weight: 700;
        font-size: 0.88rem;
        background: var(--orange);
        color: var(--white);
        border: none;
        cursor: pointer;
        transition: var(--transition);
        white-space: nowrap;
        text-decoration: none;
        display: inline-block
    }

    .btn-primary:hover {
        background: #d96a1a;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(240, 123, 41, 0.35)
    }

    /* ── RIGHT PANEL ── */
    .hero-right {
        position: relative;
        height: 100%;
        min-height: 96vh;
        overflow: hidden;
    }


    /* ── RESPONSIVE ── */
    @media(max-width:1024px) {


        /* Hero: keep 2 columns, just tighter */
        .hero {
            grid-template-columns: 1fr 1fr;
            /* keep side by side */
            padding: 40px 4%;
            min-height: 100vh;
            gap: 0;
        }

        .hero-left {
            padding: 0 20px 60px 0;
            padding-top: 20px;
        }

        .hero h1 {
            font-size: clamp(2rem, 5vw, 3.2rem);
        }

        /* Slant overlay — narrower column needs tighter clip */
        .hero .slant-overlay {
            width: 55%;
        }
    }

    @media(max-width:640px) {

        /* Hero: stack vertically, text on top, video below */
        .hero {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 32px 5% 44px;
            height: 100svh;
            /* svh avoids mobile browser chrome issues */
            min-height: 560px;
        }

        .hero-left {
            position: relative;
            z-index: 3;
            padding: 0;
            width: 100%;
        }

        /* On mobile, slant covers more of the screen */
        .hero .slant-overlay {
            width: 100%;
            clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
            /* diagonal bottom */
        }

        /* Remove right triangle — no space for it on mobile */
        .hero .slant-right {
            display: none;
        }

        .hero h1 {
            font-size: clamp(2rem, 9vw, 2.8rem);
            letter-spacing: -0.5px;
        }

        .hero-sub {
            font-size: 0.92rem;
            margin-bottom: 20px;
            max-width: 100%;
        }

        .btn-primary {
            width: 100%;
            text-align: center;
        }


        .hero-logo-icon {
            width: 60px;
            height: 60px;
        }

        .hr-dc-1 {
            width: 170px;
            padding: 11px 13px;
            bottom: 56px;
            left: 10px;
        }

        .hr-dc-big {
            font-size: 1.9rem;
        }

        .hr-dc-2 {
            width: 115px;
            padding: 10px 11px;
            bottom: 56px;
            right: 10px;
        }

        .hr-dc-3 {
            bottom: auto;
            top: 10px;
            right: 10px;
            width: 148px;
        }

        .hr-slide-tag {
            font-size: 0.56rem;
            padding: 3px 9px;
            top: 14px;
            left: 14px;
        }

        .hr-counter {
            top: 12px;
            right: 12px;
            font-size: 0.8rem;
            padding: 3px 9px;
        }

        .hr-dc-bars {
            gap: 4px;
        }

        .hr-dcbar-lbl {
            font-size: 0.54rem;
            width: 60px;
        }
    }

    .dash-topbar {
        background: #F2F1EE;
        padding: 10px 16px;
        display: flex;
        align-items: center;
        gap: 6px
    }

    .dash-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%
    }

    .d-r {
        background: #FF5F57
    }

    .d-y {
        background: #FEBC2E
    }

    .d-g {
        background: #28C840
    }

    .dash-url {
        flex: 1;
        background: var(--white);
        border-radius: 6px;
        padding: 4px 10px;
        margin-left: 12px;
        font-size: 0.72rem;
        color: var(--muted)
    }

    /* .dash-body {
      padding: 22px 22px 0
    } */

    .dash-hdr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px
    }

    .dash-ttl {
        font-weight: 800;
        font-size: 0.95rem;
        color: var(--dark)
    }

    .live-pill {
        display: flex;
        align-items: center;
        gap: 5px;
        background: var(--green-light);
        border: 1px solid rgba(123, 184, 67, 0.3);
        border-radius: 50px;
        padding: 4px 10px;
        font-size: 0.65rem;
        font-weight: 700;
        color: var(--green)
    }

    .live-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--green);
        animation: blink 1.2s infinite
    }

    .dash-img-area {
        position: relative;
        width: 100%;
        aspect-ratio: 16/9;
        background: var(--light);
        overflow: hidden;
        border-bottom: 1px solid var(--border)
    }

    .dash-img-area img#dash-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top left;
        display: block;
        transition: transform 0.4s ease
    }


    .dash-img-fallback {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 600;
        background: var(--light)
    }

    .fallback-hint {
        font-size: 0.68rem;
        font-weight: 500;
        color: #B0A8A0
    }

    /* ══ HERO LOGO ANIM ══ */
    .hero-logo-row {
        display: flex;
        align-items: center;
        gap: 14px;
        margin-bottom: 28px;
        animation: fadeDown 0.7s 0s ease both
    }

    .hero-logo-icon {
        width: 150px;
        height: 150px;
        flex-shrink: 0;
        position: relative
    }

    .hero-logo-svg {
        width: 100%;
        height: 100%;
        overflow: visible
    }

    @keyframes iconGlowPulse {

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

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

    .tri-a,
    .tri-b,
    .tri-c {
        opacity: 0;
        transform-origin: center
    }

    .tri-a {
        animation: triA 1.5s 0.1s cubic-bezier(0.25, 1, 0.5, 1) forwards
    }

    .tri-b {
        animation: triB 1.5s 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards
    }

    .tri-c {
        animation: triC 1.5s 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards
    }

    @keyframes triA {
        from {
            opacity: 0;
            transform: translate(-14px, 12px) rotate(-7deg)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    @keyframes triB {
        from {
            opacity: 0;
            transform: translateY(-20px) scale(0.78)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    @keyframes triC {
        from {
            opacity: 0;
            transform: translate(14px, 12px) rotate(7deg)
        }

        to {
            opacity: 1;
            transform: none
        }
    }

    /* ══ LOGOS TICKER ══ */
    .logos-band {
        background: var(--light);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 18px 0;
        display: flex;
        align-items: center;
        overflow: hidden
    }

    .logos-label {
        padding: 0 24px;
        font-size: 0.72rem;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        white-space: nowrap;
        flex-shrink: 0;
        border-right: 1px solid var(--border)
    }

    .logos-ticker-wrap {
        flex: 1;
        overflow: hidden;
        position: relative
    }

    .logos-ticker-wrap::before,
    .logos-ticker-wrap::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 60px;
        z-index: 2;
        pointer-events: none
    }

    .logos-ticker-wrap::before {
        left: 0;
        background: linear-gradient(to right, var(--light), transparent)
    }

    .logos-ticker-wrap::after {
        right: 0;
        background: linear-gradient(to left, var(--light), transparent)
    }

    .logos-track {
        display: flex;
        align-items: center;
        width: max-content;
        animation: logoTick 28s linear infinite
    }

    .logos-track:hover {
        animation-play-state: paused
    }

    .brand-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 26px;
        border-right: 1px solid var(--border);
        height: 44px
    }

    .brand-logo img {
        height: 38px;
        width: auto;
        object-fit: contain;
        transition: all 0.3s ease
    }

    .brand-logo img:hover {
        transform: scale(1.05)
    }

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

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

    /* STATS */
    .stats-band {
        background: var(--orange);
        padding: 46px 6%;
        display: grid;
        grid-template-columns: repeat(4, 1fr)
    }

    .stat-item {
        text-align: center;
        padding: 8px;
        border-right: 1px solid rgba(255, 255, 255, 0.25)
    }

    .stat-item:last-child {
        border-right: none
    }

    .stat-num {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: 2.8rem;
        font-weight: 900;
        color: var(--white);
        line-height: 1
    }

    .stat-lbl {
        font-size: 0.77rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 6px;
        text-transform: uppercase;
        letter-spacing: 1px
    }

    /* ══ SECTION COMMONS ══ */
    .section-tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--orange);
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 14px;
        background: var(--orange-light);
        padding: 4px 12px;
        border-radius: 50px
    }

    .section-tag::before {
        display: none
    }

    .section-h2 {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: clamp(2rem, 3.5vw, 2.8rem);
        font-weight: 900;
        text-transform: uppercase;
        color: var(--dark);
        line-height: 1.05;
        letter-spacing: -0.5px;
        margin-bottom: 14px
    }

    /* ══ FEATURES ══ */
    .feat-section {
        padding: 88px 6%
    }

    .feat-section:nth-child(odd) {
        /* background: var(--white) */
        background: linear-gradient(135deg, var(--yellow-light), #FFF0C0)
    }

    .feat-section:nth-child(even) {
        /* background: var(--light) */
        background: linear-gradient(135deg, var(--green-light), #DFFFD0)
    }

    .feat-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: center;
        max-width: 1100px;
        margin: 0 auto
    }

    .feat-row.rev {
        direction: rtl
    }

    .feat-row.rev>* {
        direction: ltr
    }

    .feat-text h2 {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: clamp(1.8rem, 3vw, 2.4rem);
        font-weight: 900;
        text-transform: uppercase;
        color: var(--dark);
        line-height: 1.05;
        margin-bottom: 18px;
        letter-spacing: -0.5px
    }

    /* ── Interactive feature bullet list ── */
    .feat-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 18px
    }

    .feat-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
        background: var(--light);
        border: 1.5px solid var(--border);
        border-radius: 12px;
        font-size: 0.86rem;
        color: var(--text);
        line-height: 1.55;
        font-weight: 500;
        transition: var(--transition);
        cursor: default;
        position: relative;
        overflow: hidden
    }

    .feat-list li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--border);
        border-radius: 3px 0 0 3px;
        transition: background 0.3s
    }

    .feat-list li:hover {
        border-color: rgba(240, 123, 41, 0.3);
        background: #FFFAF6;
        transform: translateX(4px);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06)
    }

    .feat-list li:hover::before {
        background: var(--orange)
    }

    .feat-list li .fl-icon {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: transparent;
        border: 1.5px solid var(--orange);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 2px;
        transition: var(--transition)
    }

    .feat-list li .fl-icon svg {
        width: 11px;
        height: 11px;
        fill: none;
        stroke: var(--orange);
        stroke-width: 2.2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .feat-list li:hover .fl-icon {
        background: var(--orange);
        border-color: var(--orange);
        transform: scale(1.05)
    }

    .feat-list li:hover .fl-icon svg {
        stroke: white
    }

    /* ── Feature cards ── */
    .fcard {
        background: var(--white);
        border-radius: 20px;
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--border);
        transition: var(--transition);
        overflow: hidden
    }

    .fcard:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.13)
    }

    .fc-monitor {
        padding: 26px
    }

    .fc-m-hdr {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 18px
    }

    .fc-m-title {
        font-weight: 800;
        font-size: 0.92rem;
        color: var(--dark)
    }

    .fc-m-big {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: 2rem;
        font-weight: 900;
        color: var(--orange);
        line-height: 1
    }

    .fc-m-biglbl {
        font-size: 0.65rem;
        color: var(--muted);
        font-weight: 600
    }

    .device-list {
        display: flex;
        flex-direction: column;
        gap: 9px
    }


    .fc-analytics {
        padding: 26px
    }

    .fa-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 18px
    }

    .fa-kpi-val {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: 2.2rem;
        font-weight: 900;
        color: var(--dark);
        line-height: 1
    }

    .fa-kpi-lbl {
        font-size: 0.72rem;
        color: var(--muted);
        font-weight: 500
    }

    .fa-trend {
        display: flex;
        align-items: center;
        gap: 5px;
        background: var(--green-light);
        border-radius: 7px;
        padding: 6px 11px
    }

    .fa-trend-val {
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--green)
    }

    .area-chart-wrap {
        border-radius: 10px;
        overflow: hidden;
        margin-bottom: 16px;
        height: 90px
    }

    .area-chart-wrap svg {
        width: 100%;
        height: 100%
    }

    .fa-pills {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-bottom: 16px
    }

    .fa-pill {
        padding: 5px 13px;
        border-radius: 50px;
        font-size: 0.72rem;
        font-weight: 700;
        border: 1.5px solid var(--border);
        cursor: pointer;
        transition: var(--transition);
        color: var(--muted);
        background: transparent
    }

    .fa-pill.po {
        background: var(--orange-light);
        border-color: rgba(240, 123, 41, 0.4);
        color: var(--orange)
    }

    .fa-pill.pg {
        background: var(--green-light);
        border-color: rgba(123, 184, 67, 0.4);
        color: var(--green)
    }

    .fa-pill:hover {
        border-color: var(--orange);
        color: var(--orange)
    }

    .fa-mini-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px
    }

    .fa-mini {
        background: var(--light);
        border-radius: 10px;
        padding: 12px;
        text-align: center
    }

    .fa-mini-val {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: 1.4rem;
        font-weight: 900
    }

    .fa-mini-lbl {
        font-size: 0.65rem;
        color: var(--muted);
        font-weight: 600;
        margin-top: 2px
    }

    .fc-security {
        padding: 30px
    }

    .sec-center {
        display: flex;
        justify-content: center;
        margin-bottom: 22px
    }

    .shield-vis {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        background: var(--orange-light);
        border: 2px solid rgba(240, 123, 41, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.2rem;
        position: relative
    }

    .sh-ring1 {
        position: absolute;
        inset: -10px;
        border-radius: 50%;
        border: 1.5px dashed rgba(240, 123, 41, 0.2);
        animation: spinSlow 12s linear infinite
    }

    .sh-ring2 {
        position: absolute;
        inset: -22px;
        border-radius: 50%;
        border: 1px dashed rgba(240, 123, 41, 0.1);
        animation: spinSlow 20s linear infinite reverse
    }

    .sec-rows {
        display: flex;
        flex-direction: column;
        gap: 9px
    }

    .sec-row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 11px 13px;
        border-radius: 11px;
        background: var(--light);
        border: 1px solid var(--border)
    }

    .sec-check {
        width: 27px;
        height: 27px;
        border-radius: 7px;
        background: var(--green-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        color: var(--green);
        font-weight: 800;
        flex-shrink: 0
    }

    .sec-txt-main {
        font-size: 0.8rem;
        font-weight: 700;
        color: var(--dark)
    }

    .sec-txt-sub {
        font-size: 0.65rem;
        color: var(--muted)
    }

    .sec-badge {
        margin-left: auto;
        font-size: 0.62rem;
        font-weight: 700;
        padding: 3px 9px;
        border-radius: 50px;
        background: var(--green-light);
        color: var(--green);
        border: 1px solid rgba(123, 184, 67, 0.3);
        white-space: nowrap
    }

    .fc-admin {
        padding: 0;
        overflow: hidden
    }

    .fc-admin-top {
        background: linear-gradient(135deg, #1E2328, #2A3038);
        padding: 20px 22px
    }

    .fc-admin-top h4 {
        font-weight: 800;
        font-size: 0.92rem;
        color: var(--white)
    }

    .fc-admin-top p {
        font-size: 0.75rem;
        color: rgba(255, 255, 255, 0.75)
    }

    .admin-kpis {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 18px 22px 0
    }

    .ak {
        text-align: center
    }

    .ak-val {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: 1.6rem;
        font-weight: 900;
        color: var(--orange)
    }

    .ak-lbl {
        font-size: 0.65rem;
        color: var(--muted);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px
    }

    .admin-table {
        margin-top: 14px
    }

    .atr-head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 22px;
        background: var(--light);
        font-size: 0.67rem;
        color: var(--muted);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.7px
    }

    .atr {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 22px;
        border-top: 1px solid var(--border);
        font-size: 0.78rem
    }

    .atr-num {
        width: 18px;
        font-weight: 800;
        color: var(--muted)
    }

    .atr-name {
        flex: 1;
        font-weight: 700;
        color: var(--dark)
    }

    .atr-val {
        font-weight: 600;
        color: var(--orange);
        min-width: 32px;
        text-align: right
    }

    .atr-bar-wrap {
        flex: 1;
        height: 5px;
        background: var(--border);
        border-radius: 50px;
        overflow: hidden
    }

    .atr-bar-fill {
        height: 100%;
        border-radius: 50px
    }

    .admin-btns {
        display: flex;
        gap: 10px;
        padding: 14px 22px 20px
    }

    .btn-sm-outline {
        flex: 1;
        padding: 9px;
        border-radius: 8px;
        font-family: 'Manrope', sans-serif;
        font-weight: 700;
        font-size: 0.78rem;
        cursor: pointer;
        text-align: center;
        border: 1.5px solid var(--orange);
        color: var(--orange);
        background: transparent;
        transition: var(--transition)
    }

    .btn-sm-outline:hover {
        background: var(--orange);
        color: var(--white)
    }

    .btn-sm-fill {
        flex: 1;
        padding: 9px;
        border-radius: 8px;
        font-family: 'Manrope', sans-serif;
        font-weight: 700;
        font-size: 0.78rem;
        cursor: pointer;
        text-align: center;
        border: none;
        background: var(--orange);
        color: var(--white);
        transition: var(--transition)
    }

    .btn-sm-fill:hover {
        background: #d96a1a
    }

    .fc-mobile {
        background: var(--dark);
        padding: 24px;
        border: none;
        color: var(--white)
    }

    .mob-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 18px
    }

    .mob-title {
        font-weight: 800;
        font-size: 0.92rem
    }

    .mob-toggle {
        display: flex;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 7px;
        overflow: hidden;
        border: none
    }

    .mt-btn {
        padding: 5px 12px;
        font-size: 0.67rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition);
        color: rgba(255, 255, 255, 0.45);
        border: none;
        background: transparent;
        font-family: 'Manrope', sans-serif
    }

    .mt-btn.active {
        background: var(--orange);
        color: var(--white);
        border-radius: 6px
    }

    .mob-notifs {
        display: flex;
        flex-direction: column;
        gap: 8px
    }

    .mn {
        display: flex;
        align-items: center;
        gap: 10px;
        background: rgba(255, 255, 255, 0.07);
        border-radius: 10px;
        padding: 11px
    }

    .mn-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9rem;
        flex-shrink: 0
    }

    .mn-ttl {
        font-size: 0.78rem;
        font-weight: 700
    }

    .mn-sub {
        font-size: 0.65rem;
        color: rgba(255, 255, 255, 0.5)
    }

    .mn-time {
        font-size: 0.62rem;
        color: rgba(255, 255, 255, 0.3);
        margin-left: auto;
        white-space: nowrap
    }

    /* ══ FEATURE CARD IMAGE ══ */
    .fcard-img {
        position: relative;
        width: 100%;
        height: 100%;
        background: var(--light);
        overflow: hidden;
        border-radius: 10px;
        margin-bottom: 14px;
    }

    .fcard-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top left;
        display: block;
        transition: transform 0.4s ease;
    }

    .fcard:hover .fcard-img img {
        transform: scale(1.02);
    }

    .fcard-img-fallback {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        color: var(--muted);
        font-size: 0.78rem;
        font-weight: 600;
        background: var(--light);
    }

    /* ══ PRODUCTS ══ */
    .products-section {
        padding: 96px 6%;
        background: var(--light)
    }

    .products-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 44px
    }

    .products-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px
    }

    .prod-card {
        background: var(--white);
        border-radius: var(--radius);
        border: 1.5px solid var(--border);
        overflow: hidden;
        transition: var(--transition)
    }

    .prod-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(240, 123, 41, 0.3)
    }

    .prod-img {
        height: 155px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3.5rem;
        position: relative
    }

    .pi-1 {
        background: linear-gradient(135deg, var(--orange-light), #FFE8D0)
    }

    .pi-2 {
        background: linear-gradient(135deg, var(--green-light), #DFFFD0)
    }

    .pi-3 {
        background: linear-gradient(135deg, var(--yellow-light), #FFF0C0)
    }

    .prod-badge {
        position: absolute;
        top: 13px;
        right: 13px;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 4px 11px;
        border-radius: 50px;
        text-transform: uppercase;
        letter-spacing: 1px
    }

    .pb-new {
        background: var(--orange);
        color: var(--white)
    }

    .pb-pop {
        background: var(--green);
        color: var(--white)
    }

    .pb-pro {
        background: var(--yellow);
        color: var(--dark)
    }

    .prod-body {
        padding: 20px
    }

    .prod-body h3 {
        font-weight: 800;
        font-size: 0.97rem;
        color: var(--dark);
        margin-bottom: 7px
    }

    .prod-body p {
        font-size: 0.84rem;
        color: var(--muted);
        line-height: 1.7;
        margin-bottom: 14px
    }

    .btn-outline {
        padding: 7px 16px;
        border-radius: 7px;
        font-family: 'Manrope', sans-serif;
        font-weight: 700;
        font-size: 0.78rem;
        cursor: pointer;
        text-decoration: none;
        border: 1.5px solid var(--orange);
        color: var(--orange);
        background: transparent;
        transition: var(--transition)
    }

    .btn-outline:hover {
        background: var(--orange);
        color: var(--white)
    }

    /* ══ ABOUT ══ */
    .about-section {
        padding: 100px 6%;
        background: var(--white);
        position: relative;
        overflow: hidden
    }

    .about-section::before {
        content: '';
        position: absolute;
        top: -80px;
        right: -80px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(240, 123, 41, 0.06), transparent 70%);
        pointer-events: none
    }

    .about-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 72px;
        align-items: start;
        max-width: 1100px;
        margin: 0 auto
    }

    .about-left h2 {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: clamp(2rem, 3.5vw, 3rem);
        font-weight: 900;
        text-transform: uppercase;
        color: var(--dark);
        line-height: 1.0;
        letter-spacing: -0.5px;
        margin-bottom: 18px
    }

    .about-left h2 .accent {
        color: var(--orange)
    }

    .about-left p {
        font-size: 0.95rem;
        color: var(--muted);
        line-height: 1.85;
        margin-bottom: 14px;
        max-width: 440px
    }

    .about-team {
        margin-top: 36px;
        padding-top: 30px;
        border-top: 1px solid var(--border)
    }

    .about-team h3 {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: 1.1rem;
        font-weight: 900;
        text-transform: uppercase;
        color: var(--dark);
        letter-spacing: 0.5px;
        margin-bottom: 20px
    }

    /* Leadership card */
    .team-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .team-card {
        background: var(--white);
        border: 1.5px solid var(--border);
        border-radius: 20px;
        padding: 24px 20px;
        text-align: center;
        transition: var(--transition);
        box-shadow: var(--shadow)
    }

    .team-card:hover {
        border-color: rgba(240, 123, 41, 0.35);
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg)
    }

    .team-avt {
        width: 110px;
        height: 110px;
        border-radius: 50%;
        margin: 0 auto 14px;
        overflow: hidden;
        border: 3px solid var(--border);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
        transition: var(--transition);
        background: var(--orange-light);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.8rem
    }

    .team-card:hover .team-avt {
        border-color: var(--orange);
        box-shadow: 0 6px 24px rgba(240, 123, 41, 0.25)
    }

    .team-avt img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
        border-radius: 50%
    }

    .team-name {
        font-weight: 800;
        font-size: 0.95rem;
        color: var(--dark);
        margin-bottom: 3px
    }

    .team-role {
        font-size: 0.72rem;
        color: var(--muted);
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px
    }

    .team-badge {
        display: inline-block;
        margin-top: 10px;
        font-size: 0.65rem;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 50px;
        background: var(--orange-light);
        color: var(--orange);
        border: 1px solid rgba(240, 123, 41, 0.3)
    }

    /* ══ FAQ ══ */
    .faq-section {
        padding: 96px 6%;
        /* background: var(--light) */
        background: linear-gradient(135deg, var(--green-light), #DFFFD0)
    }

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

    .faq-item {
        border-bottom: 1px solid var(--border)
    }

    .faq-q {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 0;
        cursor: pointer;
        font-weight: 700;
        font-size: 0.94rem;
        color: var(--dark);
        transition: var(--transition)
    }

    .faq-q:hover {
        color: var(--orange)
    }

    .faq-icon {
        font-size: 1.2rem;
        transition: transform 0.3s;
        color: var(--muted)
    }

    .faq-a {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, padding 0.3s;
        font-size: 0.9rem;
        color: var(--muted);
        line-height: 1.8
    }

    .faq-a.open {
        max-height: 200px;
        padding-bottom: 17px
    }

    .faq-icon.open {
        transform: rotate(45deg);
        color: var(--orange)
    }

    /* ══ CONTACT ══ */
    .contact-section {
        padding: 100px 6%;
        /* background: var(--white); */
        background: linear-gradient(135deg, var(--yellow-light), #FFF0C0);
        position: relative;
        overflow: hidden
    }

    .contact-section::after {
        content: '';
        position: absolute;
        bottom: -60px;
        left: -60px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(123, 184, 67, 0.07), transparent 70%);
        pointer-events: none
    }

    .contact-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
        align-items: start;
        max-width: 680px;
        margin: 0 auto
    }

    .contact-left h2 {
        font-family: 'Barlow Condensed', sans-serif;
        font-size: clamp(2rem, 3.5vw, 2.8rem);
        font-weight: 900;
        text-transform: uppercase;
        color: var(--dark);
        line-height: 1.05;
        letter-spacing: -0.5px;
        margin-bottom: 14px
    }

    .contact-left h2 .accent {
        color: var(--orange)
    }

    .contact-left p {
        font-size: 0.94rem;
        color: var(--muted);
        line-height: 1.8;
        margin-bottom: 28px
    }

    .contact-info {
        display: flex;
        flex-direction: column;
        gap: 14px
    }

    .ci-row {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px;
        background: var(--light);
        border: 1.5px solid var(--border);
        border-radius: var(--radius);
        transition: var(--transition)
    }

    .ci-row:hover {
        border-color: rgba(240, 123, 41, 0.3);
        box-shadow: var(--shadow)
    }

    .ci-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.1rem;
        flex-shrink: 0
    }

    .ci-o {
        background: var(--orange-light)
    }

    .ci-g {
        background: var(--green-light)
    }

    .ci-y {
        background: var(--yellow-light)
    }

    .ci-label {
        font-size: 0.68rem;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 3px
    }

    .ci-value {
        font-size: 0.88rem;
        font-weight: 700;
        color: var(--dark)
    }

    .ci-value a {
        color: var(--dark);
        text-decoration: none;
        transition: var(--transition)
    }

    .ci-value a:hover {
        color: var(--orange)
    }

    /* ══ FOOTER ══ */
    footer {
        background: var(--dark);
        color: var(--white);
        padding: 60px 6% 34px;
       font-family: 'Manrope', sans-serif;
    }

    .footer-top {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 52px;
        margin-bottom: 44px
    }

    .footer-brand p {
        font-size: 0.84rem;
        color: rgba(255, 255, 255, 0.45);
        line-height: 1.8;
        margin-top: 13px;
        max-width: 260px
    }

    .footer-social {
        display: flex;
        gap: 10px;
        margin-top: 18px
    }

    .fs-btn {
        width: 33px;
        height: 33px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
        color: var(--white)
    }

    .fs-btn:hover {
        background: var(--orange);
        border-color: var(--orange)
    }

    .footer-col h5 {
        font-size: 0.7rem;
        font-weight: 700;
        color: rgba(255, 255, 255, 0.28);
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: 17px
    }

    .footer-col ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 9px
    }

    .footer-col a {
        text-decoration: none;
        color: rgba(255, 255, 255, 0.52);
        font-size: 0.86rem;
        transition: var(--transition)
    }

    .footer-col a:hover {
        color: var(--orange)
    }

    .footer-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 26px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 0.77rem;
        color: rgba(255, 255, 255, 0.28);
        flex-wrap: wrap;
        gap: 10px
    }

    .fb-links {
        display: flex;
        gap: 20px
    }

    .fb-links a {
        color: rgba(255, 255, 255, 0.28);
        text-decoration: none;
        transition: var(--transition)
    }

    .fb-links a:hover {
        color: var(--orange)
    }

    /* ══ ANIMATIONS ══ */
    @keyframes blink {

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

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

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

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

    @keyframes spinSlow {
        from {
            transform: rotate(0deg)
        }

        to {
            transform: rotate(360deg)
        }
    }

    @keyframes fadeDown {
        from {
            opacity: 0;
            transform: translateY(-16px)
        }

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

    .reveal {
        opacity: 0;
        transform: translateY(22px);
        transition: opacity 0.6s ease, transform 0.6s ease
    }

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

    /* ══ RESPONSIVE – TABLET ≤1024px ══ */
    @media(max-width:1024px) {
        .hero {
            grid-template-columns: 1fr;
            min-height: 100svh;
            padding: 60px 6% 56px;
            gap: 0;
            align-items: center;
        }

        .hero-right {
            display: block;
            height: 70vw;
            min-height: 280px;
            max-height: 480px;
        }

        .hero-left {
            padding-bottom: 0
        }

        .hero h1 {
            font-size: clamp(2.4rem, 7vw, 3.8rem)
        }

        .feat-row,
        .feat-row.rev {
            grid-template-columns: 1fr;
            direction: ltr
        }

        .feat-row>* {
            direction: ltr
        }

        .feat-section {
            padding: 56px 6%
        }

        .stats-band {
            grid-template-columns: repeat(2, 1fr);
            gap: 0
        }

        .stat-item {
            border-right: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            padding: 24px
        }

        .stat-item:nth-child(odd) {
            border-right: 1px solid rgba(255, 255, 255, 0.08)
        }

        .stat-item:nth-last-child(-n+2) {
            border-bottom: none
        }

        .products-grid {
            grid-template-columns: repeat(2, 1fr)
        }

        .footer-top {
            grid-template-columns: 1fr 1fr;
            gap: 36px
        }

        .about-inner {
            grid-template-columns: 1fr;
            gap: 48px
        }

        .careers-inner {
            grid-template-columns: 1fr;
            gap: 44px
        }

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

        .support-sla {
            grid-template-columns: 1fr 1fr
        }

        .sla-item:nth-child(2) {
            border-right: none
        }

        .sla-item:nth-child(1),
        .sla-item:nth-child(2) {
            border-bottom: 1px solid rgba(255, 255, 255, 0.2)
        }

        /* Nav dropdown hidden on tablet — use mobile drawer */
        .nav-dropdown {
            display: none
        }
    }

    /* ══ RESPONSIVE – MOBILE ≤640px ══ */
    @media(max-width:640px) {
        nav {
            padding: 0 5%;
            height: 62px
        }

        .nav-links {
            display: none
        }

        .nav-right .btn-ghost {
            display: none
        }

        .hamburger {
            display: flex
        }

        .hero {
            padding: 40px 5% 44px
        }

        .hero h1 {
            font-size: clamp(2.2rem, 9vw, 3rem);
            letter-spacing: -0.5px
        }

        .hero-sub {
            font-size: 0.95rem;
            margin-bottom: 24px
        }

        .hero-form {
            flex-direction: column
        }

        .btn-primary {
            width: 100%;
            text-align: center
        }

        .logos-band {
            flex-direction: row;
            align-items: center;
            padding: 0
        }

        .logos-ticker-wrap {
            width: 100%
        }

        .stats-band {
            grid-template-columns: 1fr 1fr;
            padding: 28px 5%
        }

        .stat-num {
            font-size: 2.2rem
        }

        .stat-lbl {
            font-size: 0.7rem
        }

        .stat-item {
            padding: 14px 8px
        }

        .feat-section {
            padding: 40px 5%
        }

        .feat-text h2 {
            font-size: clamp(1.6rem, 7vw, 2rem)
        }

        .feat-list li {
            padding: 10px 13px;
            font-size: 0.83rem
        }

        .about-section {
            padding: 60px 5%
        }

        .about-left h2 {
            font-size: clamp(1.8rem, 7vw, 2.4rem)
        }

        .team-grid {
            max-width: 100%;
            justify-items: center
        }

        .team-card {
            max-width: 200px;
            width: 100%
        }

        .careers-section {
            padding: 60px 5%
        }

        .careers-perks {
            grid-template-columns: 1fr
        }

        .careers-card {
            padding: 24px 18px
        }

        .support-section {
            padding: 60px 5%
        }

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

        .support-sla {
            grid-template-columns: 1fr 1fr
        }

        .faq-section {
            padding: 52px 5%
        }

        .faq-q {
            font-size: 0.88rem;
            padding: 15px 0
        }

        .contact-section {
            padding: 60px 5%
        }

        .bottom-cta {
            padding: 56px 5%
        }

        .bc-btns {
            flex-direction: column;
            align-items: center
        }

        .bc-btns .btn-ghost,
        .bc-btns .btn-primary {
            width: 100%;
            text-align: center;
            display: block
        }

        footer {
            padding: 44px 5% 24px
        }

        .footer-top {
            grid-template-columns: 1fr;
            gap: 28px
        }

        .footer-bottom {
            flex-direction: column;
            text-align: center;
            gap: 8px
        }

        .fb-links {
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px
        }

        .section-h2 {
            font-size: clamp(1.7rem, 7vw, 2.2rem)
        }

        .products-section {
            padding: 52px 5%
        }

        .products-header {
            flex-direction: column;
            align-items: flex-start;
            gap: 12px
        }

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

        .atr-bar-wrap {
            display: none
        }

        .sec-badge {
            display: none
        }
    }

    @media(max-width:380px) {
        .hero h1 {
            font-size: 1.85rem;
        }

        .hero-sub {
            font-size: 0.85rem;
        }

        .stats-band {
            grid-template-columns: 1fr
        }

        .stat-item {
            border-right: none !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2)
        }

        .stat-item:last-child {
            border-bottom: none
        }

        .support-sla {
            grid-template-columns: 1fr
        }

        .sla-item {
            border-right: none !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2)
        }
    }

    @media(max-width:380px) {
        .hero-right {
            height: 85vw;
            min-height: 220px;
        }

        .hr-dc-1 {
            width: 120px;
            padding: 8px 10px;
            left: 6px;
            bottom: 44px;
        }

        .hr-dc-big {
            font-size: 1.4rem;
        }

        .hr-dc-2 {
            width: 88px;
            padding: 7px 9px;
            right: 6px;
            bottom: 44px;
        }

        .hr-dc-label {
            font-size: 0.52rem;
        }

        .hr-dc-3 {
            width: 120px;
            right: 6px;
            top: 8px;
        }

        .hr-dc-bars {
            display: none;
        }

        .hr-nav {
            gap: 8px;
            bottom: 16px;
        }

        .hr-progress-wrap {
            width: 50px;
        }

        .hr-dot {
            width: 5px;
            height: 5px;
        }

        .hr-dot.active {
            width: 14px;
        }
    }

    /* ══ RESPONSIVE – SMALL TABLET / LANDSCAPE PHONE 768px ══ */
    @media(max-width:768px) {

        .hero {
            grid-template-columns: 1fr 1fr;
            /* keep 2 cols */
            padding: 28px 4%;
            min-height: 100svh;
            height: 100svh;
            gap: 0;
            align-items: center;
        }

        .hero-left {
            padding: 0 16px 0 0;
        }

        /* Tighten text so it fits the shorter viewport */
        .hero h1 {
            font-size: clamp(1.6rem, 4.5vw, 2.4rem);
            margin-bottom: 12px;
        }
    
        .hero-form {
            margin-bottom: 0;
        }

        /* Slant overlay — tighter diagonal for narrower column */
        .hero .slant-overlay {
            width: 80%;
            clip-path: polygon(0 0, 50% 0, 100% 100%, 0% 100%);
        }

        .hero .slant-right {
            height: 50%;
            /* shorter on smaller screen */
            width: 50%;
        }
    }

    @media(max-width:1200px) {
        .nav-links {
            gap: 20px
        }
    }

    @media(max-width:1100px) {
        .nav-links {
            gap: 14px
        }

        .nav-links a {
            font-size: 0.82rem
        }
    }

    /* Team bio text */
    .team-card p {
        font-size: 0.79rem;
        color: var(--muted);
        line-height: 1.72;
        margin-top: 10px;
        text-align: left;
        font-weight: 400
    }

    .team-grid {
        justify-items: start
    }

    /* Logos band stays row on mobile */
    @media(max-width:640px) {
        .logos-band {
            flex-direction: row !important;
            align-items: center;
            padding: 0 !important
        }

        .logos-label {
            padding: 0 12px !important;
            font-size: 0.62rem !important;
            border-right: 1px solid var(--border)
        }

        .logos-ticker-wrap {
            width: 0;
            flex: 1
        }

        .brand-logo {
            padding: 0 16px !important
        }

        .brand-logo img {
            height: 26px !important
        }
    }

    /* Mobile: hero tighter */
    @media(max-width:640px) {

        .hero-logo-row {
            margin-bottom: 18px
        }

        .hero-badge {
            font-size: 0.64rem;
            padding: 4px 10px;
            letter-spacing: 1px
        }

        .hero-badge-dot {
            display: none
        }
    }

    /* Mobile: feature list cleaner */
    @media(max-width:640px) {
        .feat-list {
            gap: 6px;
            margin-top: 14px
        }

        .feat-list li {
            padding: 9px 11px;
            font-size: 0.81rem;
            gap: 9px;
            border-radius: 10px
        }
    }

    /* Mobile: team card */
    @media(max-width:640px) {
        .team-grid {
            justify-items: center;
            max-width: 100%
        }

        .team-card {
            max-width: 300px;
            width: 100%
        }

        .team-avt {
            width: 96px !important;
            height: 96px !important
        }

        .team-card p {
            font-size: 0.77rem
        }
    }

    /* Mobile: products — hide description for cleanliness */
    @media(max-width:640px) {
        .prod-body p {
            display: none
        }
    }

    /* Mobile: support sla */
    @media(max-width:640px) {
        .sla-item {
            padding: 16px 10px
        }

        .sla-val {
            font-size: 1.4rem
        }

        .sla-lbl {
            font-size: 0.65rem
        }
    }

    /* Mobile: careers */
    @media(max-width:640px) {
        .careers-inner {
            gap: 32px
        }
    }

    /* Stat item border tweak for dark bg */
    @media(max-width:380px) {
        .stat-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important
        }
    }

    /* feature table */
    .feature-table {
        width: 100%;
        max-width: 900px;
        margin: 30px auto;
        border-radius: 14px;
        overflow: hidden;
        border: 1px solid var(--border);
        font-family: 'Manrope', sans-serif;
    }

    /* Rows */
    .ft-row {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr;
        align-items: center;
        border-bottom: 1px solid var(--border);
        background: #fff;
        transition: background 0.2s ease;
    }

    .ft-row:last-child {
        border-bottom: none;
    }

    .ft-row:hover {
        background: #fafafa;
    }

    /* Header */
    .ft-header {
        background: #f5f5f5;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 0.8rem;
        color: var(--muted);
    }

    /* Columns */
    .ft-col {
        padding: 16px 18px;
        text-align: center;
        font-size: 0.9rem;
    }

    /* Feature name column */
    .ft-feature {
        text-align: left;
        font-weight: 600;
        color: var(--text);
    }

    /* Highlight column (Advanced) */
    .ft-highlight {
        background: rgba(240, 123, 41, 0.05);
        font-weight: 700;
    }

    /* Tick / Cross styling */
    .ft-col:contains("✔") {
        color: var(--green);
    }

    .ft-col:contains("✖") {
        color: #bbb;
    }

    /* Better icon styling (fallback) */
    .ft-col {
        font-size: 1rem;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .ft-row {
            grid-template-columns: 1.5fr 1fr 1fr 1fr;
            font-size: 0.8rem;
        }

        .ft-col {
            padding: 12px;
        }
    }