.soft-divider {
            border-color: rgba(244,250,250,0.10);
        }

        .muted-kicker {
            color: rgba(183,208,209,0.85);
            letter-spacing: 0.30em;
        }

        .hide-scrollbar::-webkit-scrollbar { display: none; }
        .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


        /* Floating UI Elements */
        .floating-ui {
            position: absolute;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1.25rem;
            padding: 1.25rem;
            color: white;
            text-align: left;
            z-index: 20;
            box-shadow: 0 12px 30px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.03);
            animation: floating 6s ease-in-out infinite;
            transform-origin: center;
            transition: box-shadow 0.3s ease;
        }

        .floating-ui * {
            text-decoration: none !important;
            border-bottom: none !important;
            box-shadow: none !important;
        }

        /* Mobile specific scaling/positioning */
        @media (max-width: 1023px) {
            .hero-visual-wrapper { 
                margin-top: 0.5rem !important;
                margin-bottom: 0.5rem !important;
                height: 480px;
                display: flex;
                align-items: center;
                padding: 0 0.5rem; /* Tighter padding for mobile */
                width: 100%;
                overflow: visible;
            }
            .floating-ui { 
                transform: scale(0.62); 
                padding: 1rem;
                transform-origin: left center;
            }
            .ui-card-team {
                transform-origin: right center;
            }
            /* Precise alignment with logo and menu edges - Reduced vertical spacing */
            .ui-card-1 { top: 10%; left: 12px; }
            .ui-card-2 { top: 38%; left: 4px; }
            .ui-card-3 { top: 66%; left: 42px; }
            .ui-card-team { 
                top: 30%; 
                right: 0px; 
                width: 180px !important; 
                padding-top: 1.5rem;
                padding-bottom: 1.5rem;
                min-height: 200px;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            
            .hero-main-image {
                width: 100%;
                transform: translateY(-20px) scale(1.1);
            }

        }

        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }

        @keyframes progress-line {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }
        .animate-progress-line {
            animation: progress-line 1.5s infinite linear;
        }

        .hero-reservation-card {
            background: #ffffff;
            border-radius: 2rem;
            padding: 2.5rem;
            box-shadow: 0 40px 100px rgba(0, 31, 38, 0.04);
            border: 1px solid rgba(0, 31, 38, 0.05);
            position: relative;
            overflow: hidden;
        }



        .trust-avatars img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid white;
        }

        .btn-green-cta {
            background: #F0B030;
            color: #001f26;
            transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: 1px solid #F0B030;
        }
        .btn-green-cta:hover {
            background: #001f26;
            color: #F0B030;
            transform: translateY(-3px);
            box-shadow: 0 15px 35px rgba(240, 176, 48, 0.25);
            border-color: #001f26;
        }

        .ui-icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.75rem;
        }

        .hero-banner-content { 
            position: relative; 
            z-index: 10; 
            width: 100%;
            margin: 0 auto;
        }

        .hero-logo-glow {
            display: none;
        }

        .hero-backdrop-shape {
            display: none;
        }

        /* Flow Lines SVG */
        .hero-flow-svg {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 15;
            pointer-events: none;
        }

        .flow-path {
            fill: none;
            stroke-width: 2;
            stroke-linecap: round;
            opacity: 0.4;
            filter: drop-shadow(0 0 4px rgba(93, 169, 170, 0.4));
        }

        .flow-path-pulse {
            stroke-dasharray: 10, 100;
            stroke-dashoffset: 0;
            animation: flow-move 4s linear infinite;
            opacity: 0.8;
            stroke-width: 3;
        }

        @keyframes flow-move {
            to { stroke-dashoffset: -110; }
        }

        /* Panels */
        .panel {
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(244,250,250,0.10);
        }

        /* Small accents */
        .accent-dot {
            width: 10px;
            height: 10px;
            border-radius: 999px;
            background: var(--accent-2);
            box-shadow: 0 10px 30px rgba(240,176,48,0.25);
        }

        /* Footer text */
        .footer-muted { color: rgba(183,208,209,0.70); }
        
        /* ===== Light Section Override ===== */
        .light-section{
          background: #ffffff;
          color: #001f26;
        }

        /* Override CSS variables inside light sections */
        .light-section{
          --text-main: #001f26;
          --text-muted: #5DA9AA;
          --text-dim: rgba(0, 31, 38, 0.6);

          --panel: #ffffff;
          --panel-2: #ffffff;

          --border: rgba(0, 31, 38, 0.08);
          --border-2: rgba(0, 31, 38, 0.05);

          --shadow: 0 18px 40px rgba(0,0,0,0.05);
        }



        .hero-banner {
            position: relative;
            background-color: #ffffff;
            overflow: hidden;
            padding-top: 140px;
            padding-bottom: 0;
        }

        .hero-reservation-card {
            background: #ffffff;
            border-radius: 2.5rem;
            padding: 2.5rem;
            box-shadow: 0 40px 100px rgba(0, 31, 38, 0.08);
            border: 1px solid rgba(0, 31, 38, 0.05);
            transition: all 0.4s ease;
            color: #001f26;
        }

        .hero-reservation-card input, 
        .hero-reservation-card select {
            color: #001f26 !important;
        }

        .hero-reservation-card input::placeholder {
            color: rgba(0, 31, 38, 0.6) !important;
            opacity: 1 !important;
        }

        .hero-reservation-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 50px 120px rgba(0, 31, 38, 0.12);
        }

        .hero-main-container {
            width: 100%;
            max-width: 85rem;
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }

        .hero-header-content {
            max-width: 60rem;
            margin: 0 auto 5rem;
            text-align: center;
        }

        .hero-split-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: flex-start;
        }

        .hero-main-visual {
            width: 100%;
            max-width: 580px;
            height: auto;
            z-index: 5;
            position: relative;
            transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
            animation: floating 6s ease-in-out infinite;
            -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
            margin-bottom: -10px;
        }

        @media (max-width: 1023px) {
            .hero-banner {
                padding-top: 120px;
                padding-bottom: 60px;
            }
            .hero-split-grid {
                grid-template-columns: 1fr;
                gap: 4rem;
            }
            .hero-header-content {
                margin-bottom: 3rem;
            }
            .hero-title {
                font-size: 2.25rem !important;
                line-height: 1.1 !important;
            }
            .hero-subtitle {
                font-size: 1rem !important;
            }
        }

        /* TOOLTIPS */
        .infra-row { position: relative; }
        /* TOOLTIPS REBOOT - HARDENED */
        .infra-tip-container {
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            width: 28px !important;
            height: 28px !important;
            margin-left: 6px !important;
            vertical-align: middle !important;
            cursor: pointer !important;
            position: relative !important;
            z-index: 999999 !important;
        }

        .infra-tip-container i {
            font-size: 16px !important;
            color: #F4C15C !important;
            opacity: 1 !important;
            transition: all 0.3s ease !important;
        }

        .infra-tip-container:hover i,
        .infra-tip-container.active i {
            transform: scale(1.2) !important;
            color: #ffffff !important;
        }

        .infra-tip-content {
            display: none;
            position: absolute;
            bottom: calc(100% + 15px);
            left: 50%;
            transform: translateX(-50%);
            background: #01161a;
            border: 1px solid rgba(93, 169, 170, 0.4);
            color: #ffffff;
            padding: 16px 20px;
            border-radius: 16px;
            font-size: 13px;
            width: 280px;
            z-index: 1000000;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.9);
            text-align: left;
            line-height: 1.6;
            font-weight: 500;
            text-transform: none;
            letter-spacing: normal;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .infra-tip-container:hover .infra-tip-content {
            display: block !important;
            opacity: 1 !important;
        }

        .infra-tip-content::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            border: 10px solid transparent;
            border-top-color: #01161a;
        }



        /* INFRASTRUCTURE COLLAPSE */
        .infra-collapse-wrapper {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
            visibility: hidden;
        }
        .infra-collapse-wrapper.expanded {
            max-height: 1200px; /* Large enough for full list */
            opacity: 1;
            padding-bottom: 20px;
            visibility: visible;
        }
        .infra-toggle-icon {
            transition: transform 0.5s cubic-bezier(1, 0, 0, 1);
        }
        .expanded .infra-toggle-icon {
            transform: rotate(135deg);
        }
        .infra-trigger-group:hover .infra-trigger-icon-bg {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.2);
        }

        /* TIERED BRANDING */
        :root {
            --color-pulse: #5DA9AA;
            --color-cascade: #8B5CF6;
            --color-continuum: #F4C15C;
        }

        .card-pulse { --tier-color: #00A389; }
        .card-cascade { --tier-color: #7C3AED; }
        .card-continuum { --tier-color: #D97706; }
        .card-beyond { --tier-color: #001f26; }

        .tier-border { border-top: 4px solid var(--tier-color); }
        .tier-glow { box-shadow: 0 10px 30px -10px var(--tier-color); }
        .tier-icon-bg {
            background: rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.05);
            position: relative;
        }
        .tier-icon-bg::after {
            content: "";
            position: absolute;
            inset: 0;
            background: var(--tier-color);
            opacity: 0.1;
            border-radius: inherit;
        }
        .tier-icon { color: var(--tier-color); }

        /* Typography & Layout Refinements (Light Card Theme) */
        .plan-title { color: #002f30; font-weight: 800; letter-spacing: -0.01em; }
        .plan-tagline { color: #5DA9AA; font-size: 14.5px; letter-spacing: 0.02em; font-weight: 700; text-transform: none; }
        .plan-desc { color: #334e50; font-size: 15px; line-height: 1.6; }
        .price-text { color: #002f30; font-weight: 900; letter-spacing: -0.03em; }
        .price-currency { color: #002f30; opacity: 0.4; font-weight: 700; }
        
        .includes-header { 
            color: #002f30; 
            opacity: 0.35;
            font-size: 10.5px; 
            font-weight: 900; 
            text-transform: uppercase; 
            letter-spacing: 0.25em; 
        }

        .pricing-grid-card {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 2.5rem;
        }

        .pricing-section-divider {
            margin-top: 1.5rem;
            margin-bottom: 1.5rem;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            padding-top: 1.5rem;
        }

        .outcome-text { color: #1a3a3c; font-weight: 600; font-size: 14px; }
        .spec-label { color: #1a3a3c; font-weight: 600; font-size: 13.5px; }

        .outcome-check-bg { background: #E2F0F1; border: 1px solid rgba(0, 163, 137, 0.2); }
        .tier-outcomes { min-height: 110px; display: flex; flex-direction: column; }

        /* Billing Toggle */
        .billing-toggle-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 3rem;
        }
        .toggle-label {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            cursor: pointer;
            transition: color 0.3s;
        }
        .toggle-label.active { color: #5DA9AA; }
        .toggle-label.inactive { color: rgba(255,255,255,0.3); }

        .toggle-switch {
            position: relative;
            width: 54px;
            height: 28px;
            background: rgba(255,255,255,0.08);
            border-radius: 50px;
            cursor: pointer;
            padding: 4px;
            transition: all 0.3s;
            border: 1px solid rgba(255,255,255,0.05);
        }
        .toggle-knob {
            width: 18px;
            height: 18px;
            background: #fff;
            border-radius: 50%;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        }
        .toggle-switch.annual .toggle-knob {
            transform: translateX(26px);
            background: #F4C15C;
        }
        .savings-badge {
            background: rgba(244, 193, 92, 0.1);
            color: #F4C15C;
            padding: 4px 10px;
            border-radius: 100px;
            font-size: 9px;
            font-weight: 800;
            margin-left: 8px;
            border: 1px solid rgba(244, 193, 92, 0.2);
        }

        /* HOW IT WORKS - PREMIUM REDESIGN */
        .flow-journey-section {
            padding: 120px 0;
            background: radial-gradient(circle at 50% 50%, #fdfcf9 0%, #f3efe7 100%);
            border-top: 1px solid rgba(10,34,36,0.05);
            border-bottom: 1px solid rgba(10,34,36,0.05);
            position: relative;
        }

        .flow-container {
            position: relative;
            padding: 40px 0;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            max-width: 1200px;
            margin: 0 auto;
            z-index: 10;
        }

        .flow-line-svg {
            position: absolute;
            top: 48px;
            left: 5%;
            width: 90%;
            height: 120px;
            z-index: 1;
            pointer-events: none;
        }

        .flow-path-bg {
            stroke: #5DA9AA;
            stroke-width: 1.5;
            stroke-opacity: 0.1;
            fill: none;
        }

        .flow-path-active {
            stroke: #5DA9AA;
            stroke-width: 2.5;
            stroke-dasharray: 8 20;
            fill: none;
            opacity: 0.3;
            filter: blur(1px);
            animation: flow-dash-move 30s linear infinite;
        }

        @keyframes flow-dash-move {
            from { stroke-dashoffset: 1000; }
            to { stroke-dashoffset: 0; }
        }

        .flow-node {
            position: relative;
            z-index: 10;
            width: 160px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            perspective: 1000px;
        }

        .flow-node-glass {
            width: 96px;
            height: 96px;
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: #0a2224;
            box-shadow: 
                0 10px 30px rgba(0,0,0,0.04),
                inset 0 0 0 1px rgba(255,255,255,0.8),
                inset 0 0 12px rgba(93,169,170,0.1);
            border: 1px solid rgba(10,34,36,0.05);
            margin-bottom: 28px;
            transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
            position: relative;
            overflow: hidden;
        }

        .flow-pulse-dot {
            fill: #F0B030;
            offset-path: path("M 0 60 L 75 60 Q 243 60, 412 20 Q 581 20, 750 60 Q 918 60, 1087 100 Q 1256 100, 1425 60 L 1500 60");
            filter: drop-shadow(0 0 5px rgba(240,176,48,0.9)) drop-shadow(0 0 10px rgba(240,176,48,0.5));
            animation: move-pulse 12s linear infinite;
            opacity: 0;
        }

        @keyframes move-pulse {
            0%   { offset-distance: 0%;   opacity: 0; }
            8%   { opacity: 1; }
            92%  { opacity: 1; }
            100% { offset-distance: 100%; opacity: 0; }
        }

        .node-label {
            font-size: 13px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.2em;
            color: #0a2224;
            margin-bottom: 10px;
            opacity: 0.9;
        }

        .node-desc {
            font-size: 12px;
            color: rgba(10,34,36,0.6);
            font-weight: 500;
            max-width: 140px;
            line-height: 1.6;
        }

        .play-btn-circle {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 52px;
            height: 52px;
            border-radius: 100%;
            background: var(--accent-2);
            border: 1px solid var(--accent-2);
            margin-right: 1rem;
            animation: pulse-branding 2.5s infinite ease-in-out;
            position: relative;
        }

        @keyframes pulse-branding {
            0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240, 176, 48, 0.4); }
            70% { transform: scale(1.08); box-shadow: 0 0 0 15px rgba(240, 176, 48, 0); }
            100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(240, 176, 48, 0); }
        }

        .watch-video-btn {
            display: inline-flex;
            align-items: center;
            margin-top: 2rem;
            opacity: 0.7;
        }

        @media (max-width: 991px) {
            .flow-container {
                flex-direction: column;
                align-items: center;
                gap: 80px;
                padding: 40px 20px;
            }
            .flow-line-svg {
                top: 0;
                left: 50%;
                width: 2px;
                height: 100%;
                transform: translateX(-50%);
            }
        }
/* Industry Showcase Section */
        #how-it-works {
            background: #ffffff;
            color: #001f26;
            position: relative;
            overflow: hidden;
            border-top: 1px solid rgba(0,31,38,0.05);
        }
        
        .how-it-works-accent {
            position: absolute;
            width: 600px;
            height: 600px;
            background: radial-gradient(circle, rgba(93,169,170,0.08) 0%, rgba(255,255,255,0) 70%);
            border-radius: 100%;
            pointer-events: none;
            z-index: 0;
        }

        .showcase-card {
            background: #ffffff;
            border-radius: 3rem;
            border: 1px solid rgba(0,31,38,0.06);
            box-shadow: 0 40px 100px -20px rgba(0,31,38,0.08);
            position: relative;
            z-index: 10;
        }

        .tab-btn {
            padding: 1rem 2rem;
            border-radius: 100px;
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.65);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            gap: 0.6rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: #001f26;
            white-space: nowrap;
        }

        .tab-btn:hover {
            color: #ffffff;
            background: #002d38;
            border-color: rgba(255, 255, 255, 0.2);
        }

        .tab-btn.active {
            color: #001f26;
            background: #F4C15C;
            border-color: #F4C15C;
            box-shadow: 0 10px 30px rgba(244, 193, 92, 0.25);
        }

        @media (max-width: 768px) {
            .tab-btn {
                padding: 0.65rem 1.15rem;
                font-size: 0.7rem;
                gap: 0.5rem;
                border-radius: 80px;
            }
            .tab-btn i {
                font-size: 1rem;
            }
        }

        .tab-content {
            display: none;
            opacity: 0;
            transform: translateY(10px);
            transition: all 0.4s ease;
        }

        .tab-content.active {
            display: grid;
            opacity: 1;
            transform: translateY(0);
        }

        .showcase-card {
            background: #ffffff;
            border: 1px solid rgba(0,31,38,0.08);
            border-radius: 40px;
            transition: all 0.5s ease;
            box-shadow: 0 40px 100px rgba(0,0,0,0.05);
            overflow: hidden;
        }

        /* NEW ENHANCEMENTS */
        .industry-check-item {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.05);
            padding: 1rem 1.25rem;
            border-radius: 16px;
            display: flex;
            align-items: center;
            gap: 1rem;
            transition: all 0.3s ease;
        }

        .industry-check-item:hover {
            background: rgba(255,255,255,0.06);
            border-color: rgba(255,255,255,0.1);
            transform: translateX(10px);
        }

        .review-badges {
            margin-top: 3rem;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 2rem;
            opacity: 0.5;
            filter: grayscale(1);
            transition: all 0.5s ease;
        }

        .review-badges:hover {
            opacity: 1;
            filter: grayscale(0);
        }

        .domain-card {
            background: #ffffff;
            border: 1px solid rgba(15,46,48,0.08);
            border-radius: 24px;
            padding: 2.5rem;
            transition: all 0.4s ease;
        }

        .domain-card:hover {
            transform: translateY(-10px);
            border-color: #5DA9AA;
            box-shadow: 0 20px 40px rgba(93,169,170,0.1);
        }

        .final-cta-section {
            background: #001f26;
            color: #ffffff;
            position: relative;
            overflow: hidden;
        }

        .btn-xl {
            padding: 1.5rem 3rem;
            font-size: 0.75rem;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        /* Interaction Capacity Styles */
        .recommended-badge {
            position: absolute;
            top: 20px;
            right: -35px;
            background: #7C3AED;
            color: white;
            padding: 8px 40px;
            transform: rotate(45deg);
            font-size: 10px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            z-index: 10;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .ic-example-card {
            background: rgba(255, 255, 255, 0.03);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }