:root {
            /* ── Paper palette ── */
            --paper: #F1E9D8;
            --paper-deep: #E8DDC4;
            --paper-soft: #F6F0E2;
            --ink: #1A140E;
            --ink-soft: #3A3127;
            --mute: #8A7E6A;
            --rule: #CFC1A4;
            /* ── Signal ── */
            --red: #C8202A;
            --red-deep: #9A1520;
            --amber: #D4921A;
            --amber-light: #E8A830;
            --amber-pale: #F6EDD6;
            /* ── Type ── */
            --serif: 'Vesper Libre', 'Times New Roman', serif;
            --sans: 'Inter', system-ui, sans-serif;
            /* ── Easing ── */
            --ease: cubic-bezier(.16, 1, .3, 1);

            /* ── Legacy aliases (keeps existing selectors working) ── */
            --gold: var(--amber);
            --gold-light: var(--amber-light);
            --gold-pale: var(--amber-pale);
            --off-white: var(--paper);
            --cream: var(--paper-deep);
            --warm-white: var(--paper-soft);
            --black: var(--ink);
            --dark: var(--ink-soft);
            --text: var(--ink-soft);
            --text-muted: var(--mute);
            --border: var(--rule);
        }

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

        html {
            scroll-behavior: smooth
        }

        body {
            font-family: var(--sans);
            background: var(--paper);
            color: var(--ink-soft);
            overflow-x: hidden;
        }

        /* Hide scrollbar for Chrome, Safari and Opera */
        ::-webkit-scrollbar {
            display: none;
        }

        /* Hide scrollbar for IE, Edge and Firefox */
        html {
            -ms-overflow-style: none;
            /* IE and Edge */
            scrollbar-width: none;
            /* Firefox */
        }

        /* ─── UTILITIES ─── */
        .red {
            color: var(--red) !important;
        }

        /* ─── HERO ─── */

        /* ─────────── HERO ─────────── */
        .hero {
            min-height: 100vh;
            padding: 0;
            background: var(--paper-soft);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .hero-bg-dots {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            background-image: radial-gradient(circle, rgba(212, 146, 26, 0.16) 1px, transparent 1px);
            background-size: 28px 28px;
        }

        .hero-body {
            flex: 1;
            display: grid;
            grid-template-columns: 1.2fr 0.8fr;
            /* Give text more room */
            min-height: calc(100vh - 140px);
            padding-top: 68px;
            position: relative;
            z-index: 2;
        }

        .hero-left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 40px 3% 30px 3%;
            /* Reduced left/right margins */
            position: relative;
            z-index: 2;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(212, 146, 26, 0.12);
            border: 1px solid rgba(212, 146, 26, 0.35);
            border-radius: 20px;
            padding: 5px 14px;
            margin-bottom: 22px;
            width: fit-content;
        }

        .hero-badge-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--amber);
            animation: pulse 2s infinite
        }

        @keyframes pulse {

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

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

        .hero-badge span {
            color: var(--amber);
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1.5px;

            font-family: var(--sans)
        }

        .hero-h1 {
            font-family: var(--serif);
            font-size: clamp(38px, 5.5vw, 110px);
            font-weight: 900;
            line-height: 1.08;
            color: var(--ink);
            /* white-space: nowrap; REMOVED to prevent overlap */
        }

        .hero-h1 .bdaas-text {
            font-family: var(--serif) !important;
        }

        .hero-headline-group {
            margin-bottom: 24px;
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .hero-subheadline {
            font-family: var(--serif);
            font-size: clamp(16px, 2.5vw, 40px);
            font-weight: 700;
            color: var(--ink);
            line-height: 1.2;
        }

        .hero-h1 .red,
        .hero-subheadline .red {
            color: var(--red)
        }

        .hero-h1 .gold {
            color: var(--amber)
        }

        .hero-tagline-desc {
            font-size: clamp(15px, 1.2vw, 22px);
            color: var(--mute);
            max-width: clamp(440px, 30vw, 650px);
            line-height: 1.75;
            margin-bottom: 32px;
            font-family: var(--sans);
        }

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

        .btn-primary {
            background: var(--amber);
            color: #fff;
            padding: 14px 30px;
            border-radius: 100px;
            font-weight: 700;
            font-size: 15px;
            text-decoration: none;
            border: 2px solid var(--amber);
            transition: all 0.25s var(--ease);
            letter-spacing: 0.3px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: var(--sans);
        }

        .btn-primary:hover {
            background: transparent;
            color: var(--amber)
        }

        .btn-outline {
            background: transparent;
            color: var(--ink);
            padding: 14px 30px;
            border-radius: 100px;
            font-weight: 600;
            font-size: 15px;
            text-decoration: none;
            border: 2px solid var(--rule);
            transition: all 0.25s var(--ease);
            font-family: var(--sans);
        }

        .btn-outline:hover {
            border-color: var(--amber);
            color: var(--amber)
        }

        /* right / carousel */
        .hero-right {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background: linear-gradient(145deg, var(--paper-deep) 0%, rgba(212, 146, 26, 0.06) 100%);
            clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%);
        }

        .hero-circle-bg {
            position: absolute;
            width: min(460px, 80%);
            height: min(460px, 80%);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(212, 146, 26, 0.2) 0%, rgba(212, 146, 26, 0.05) 70%, transparent 100%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 0;
        }

        .hero-circle-ring {
            position: absolute;
            width: min(520px, 90%);
            height: min(520px, 90%);
            border-radius: 50%;
            border: 1.5px dashed rgba(212, 146, 26, 0.25);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 0;
            animation: spin 30s linear infinite;
        }

        @keyframes spin {
            to {
                transform: translate(-50%, -50%) rotate(360deg)
            }
        }

        .deco-asterisk {
            position: absolute;
            top: 18%;
            right: 12%;
            font-size: 26px;
            color: var(--amber);
            opacity: 0.5;
            z-index: 1;
            animation: floatY 4s ease-in-out infinite;
        }

        .deco-dot-sm {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--amber);
            opacity: 0.4;
            z-index: 1;
        }

        .deco-dot-sm:nth-child(1) {
            top: 28%;
            left: 10%
        }

        .deco-dot-sm:nth-child(2) {
            bottom: 30%;
            right: 8%;
            animation: floatY 3s ease-in-out infinite 1s
        }

        @keyframes floatY {

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

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

        .carousel-track {
            position: relative;
            z-index: 2;
            width: clamp(300px, 28vw, 550px);
            height: clamp(320px, 31vw, 620px);
            flex-shrink: 0;
        }

        .carousel-slide {
            position: absolute;
            inset: 0;
            border-radius: 24px;
            overflow: hidden;
            opacity: 0;
            transform: translateX(60px) scale(0.94);
            transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
            pointer-events: none;
            box-shadow: 0 28px 70px rgba(26, 18, 8, 0.2);
        }

        .carousel-slide.active {
            opacity: 1;
            transform: translateX(0) scale(1);
            pointer-events: auto
        }

        .carousel-slide.prev {
            opacity: 0;
            transform: translateX(-60px) scale(0.94)
        }

        .slide-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 6s ease
        }

        .carousel-slide.active .slide-img {
            transform: scale(1.04)
        }

        .slide-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(26, 18, 8, 0.72) 100%)
        }

        .slide-label {
            position: absolute;
            bottom: 24px;
            left: 24px;
            right: 24px;
            display: flex;
            align-items: center;
            gap: 12px
        }

        .slide-label-num {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--amber);
            color: #fff;
            font-size: 14px;
            font-weight: 800;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 4px 14px rgba(212, 146, 26, 0.5);
        }

        .slide-label-text {
            color: #fff;
            font-size: 17px;
            font-weight: 700;
            font-family: var(--serif);
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .slide-badge {
            position: absolute;
            top: 18px;
            right: 18px;
            background: rgba(212, 146, 26, 0.92);
            color: #fff;
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;

            backdrop-filter: blur(8px);
            font-family: var(--serif) !important;
        }

        .hero-right .bdaas-text,
        .hero-right .bdaas-text span,
        .floating-gold-btn .bdaas-text,
        .floating-gold-btn .bdaas-text span {
            color: #fff !important;
        }

        .hero-right .slide-label-text {
            font-family: var(--serif) !important;
            color: #fff !important;
        }

        .carousel-controls {
            position: relative;
            margin-top: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            z-index: 4;
            flex-shrink: 0;
        }

        .carousel-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(212, 146, 26, 0.3);
            cursor: pointer;
            transition: all 0.3s;
            border: none;
            padding: 0;
        }

        .carousel-dot.active {
            width: 28px;
            border-radius: 4px;
            background: var(--amber)
        }

        .carousel-arrow {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--paper-soft);
            border: 1.5px solid var(--rule);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
        }

        .carousel-arrow:hover {
            background: var(--amber);
            border-color: var(--amber)
        }

        .carousel-arrow:hover svg {
            stroke: #fff
        }

        .carousel-arrow svg {
            width: 14px;
            height: 14px;
            stroke: var(--mute);
            stroke-width: 2.5;
            fill: none;
            transition: stroke 0.2s
        }

        .carousel-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            background: var(--amber);
            transition: width 0.1s linear;
            z-index: 5;
            border-radius: 0 2px 0 0;
        }

        .hero-stats-bar {
            background: var(--ink-soft);
            padding: 24px 5%;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            position: relative;
            z-index: 2;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 0 28px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
        }

        .stat-item:first-child {
            padding-left: 0
        }

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

        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: rgba(212, 146, 26, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 18px;
        }

        .stat-num {
            font-family: var(--serif);
            font-size: clamp(22px, 2vw, 44px);
            font-weight: 700;
            color: var(--amber);
            display: block;
            line-height: 1.1
        }

        .stat-label {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
            margin-top: 3px;
            letter-spacing: 0.5px;
            display: block;
            font-family: var(--sans)
        }

        /* ─────────── SECTION COMMONS ─────────── */
        section {
            padding: 60px 5%;
            position: relative
        }

        .eyebrow {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px
        }

        .eline {
            width: 28px;
            height: 2px;
            background: var(--amber)
        }

        .etext {
            font-size: 14px;
            color: var(--amber);
            font-weight: 700;
            letter-spacing: 2.5px;

            font-family: var(--serif)
        }

        .section-h2 {
            font-family: var(--serif);
            font-size: clamp(28px, 4vw, 80px);
            /* Increased for large screens */
            font-weight: 700;
            line-height: 1.15;
            color: var(--ink);
        }

        .section-h2 .red {
            color: var(--red)
        }

        .section-h2 .gold {
            color: var(--amber)
        }

        /* ─────────── OUR STORY ─────────── */
        .story-section {
            background: var(--paper);
            overflow: hidden
        }

        .story-bg-dots {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 300px;
            height: 300px;
            z-index: 0;
            background-image: radial-gradient(circle, var(--amber) 1px, transparent 1px);
            background-size: 20px 20px;
            opacity: 0.08;
            border-radius: 50%;
        }

        .story-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: center;
            position: relative;
            z-index: 1;
        }

        .story-img-area {
            position: relative;
            height: 480px
        }

        .story-img-main {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-radius: 4px;
            overflow: hidden;
            clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
            box-shadow: 0 30px 60px rgba(26, 18, 8, 0.15);
        }

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

        .story-img-small {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 200px;
            height: 200px;
            border-radius: 12px;
            overflow: hidden;
            clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%, 0 14%);
            box-shadow: 0 12px 40px rgba(212, 146, 26, 0.2);
            border: 3px solid var(--amber);
        }

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

        .story-accent {
            position: absolute;
            top: 40px;
            right: 30px;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(212, 146, 26, 0.1);
            border: 2px dashed var(--amber);
            opacity: 0.6;
        }

        .story-count {
            position: absolute;
            bottom: 70px;
            left: 20px;
            background: var(--amber);
            color: #fff;
            padding: 14px 20px;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(212, 146, 26, 0.35);
            text-align: center;
        }

        .story-count .num {
            font-family: var(--serif);
            font-size: 26px;
            font-weight: 700;
            display: block
        }

        .story-count .lbl {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1px;

            opacity: 0.9;
            font-family: var(--sans)
        }

        .story-content {
            color: var(--mute);
            line-height: 1.8;
            font-size: clamp(15px, 1.3vw, 30px);
            margin-bottom: 18px;
            font-family: var(--sans)
        }

        .link-gold {
            color: var(--amber);
            font-weight: 700;
            text-decoration: none;
            font-size: 15px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-family: var(--sans)
        }

        .link-gold:hover {
            text-decoration: underline
        }

        /* ─────────── WHAT IS BDAAS ─────────── */
        .what-section {
            background: var(--paper-deep);
            overflow: hidden
        }

        .what-wave {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 160px;
            z-index: 0;
            pointer-events: none;
            overflow: hidden;
        }

        .wave-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 100%;
            display: flex;
        }

        .wave-layer svg {
            width: 50%;
            height: 100%;
            flex-shrink: 0;
            display: block;
        }

        .track-1 {
            animation: moveLeft 20s linear infinite;
        }

        .track-2 {
            animation: moveRight 25s linear infinite;
            opacity: 0.5;
        }

        @keyframes moveLeft {
            0% {
                transform: translateX(0);
            }

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

        @keyframes moveRight {
            0% {
                transform: translateX(-50%);
            }

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

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

        .what-desc {
            font-size: clamp(15px, 1.2vw, 24px);
            color: var(--mute);
            line-height: 1.8;
            margin-bottom: 28px;
            font-family: var(--sans)
        }

        .tagline-bar {
            display: flex;
            justify-content: center;
            gap: 16px;
            margin-top: 40px;
            flex-wrap: nowrap;
            background: transparent;
            padding: 0;
            border-radius: 0;
            border: none;
            box-shadow: none;
        }

        .tagline-bar .ti {
            font-size: 14px;
            color: #fff;
            font-weight: 600;
            padding: 4px 12px;
            font-family: var(--sans)
        }

        .tagline-bar .ti.gold {
            color: var(--amber)
        }

        .tagline-bar .ti.red {
            color: #f08080
        }

        .tagline-bar .sep {
            color: rgba(255, 255, 255, 0.3);
            font-size: 18px
        }

        /* ─────────── CTA STRIP ─────────── */
        .cta-strip {
            background: linear-gradient(135deg, var(--amber) 0%, #b8780f 100%);
            padding: 22px 5%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
            position: relative;
            overflow: hidden;
        }

        .cta-strip::before {
            content: '';
            position: absolute;
            right: -40px;
            top: -40px;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
        }

        .cta-strip p {
            color: #fff;
            font-size: 17px;
            font-weight: 700;
            position: relative;
            z-index: 1;
            font-family: var(--sans)
        }

        .btn-white {
            background: #fff;
            color: var(--amber);
            padding: 11px 26px;
            border-radius: 100px;
            font-weight: 700;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.2s;
            position: relative;
            z-index: 1;
            border: 2px solid #fff;
            font-family: var(--sans);
        }

        .btn-white:hover {
            background: transparent;
            color: #fff
        }

        /* ─────────── VALUE SECTION ─────────── */
        .value-section {
            background: var(--paper);
            overflow: hidden
        }

        .value-bg-dots {
            position: absolute;
            top: 0;
            right: 0;
            width: 400px;
            height: 400px;
            z-index: 0;
            background-image: radial-gradient(circle, var(--amber) 1px, transparent 1px);
            background-size: 22px 22px;
            opacity: 0.07;
        }

        .value-head {
            text-align: center;
            max-width: 1100px;
            /* Increased to allow 2 lines on large screens */
            margin: 0 auto 56px;
            position: relative;
            z-index: 1
        }

        .value-sub {
            font-size: clamp(15px, 1.2vw, 24px);
            color: var(--mute);
            line-height: 1.75;
            margin-top: 14px;
            font-family: var(--sans)
        }

        .value-split {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 36px;
            align-items: stretch;
            /* Changed from start to ensure same length */
            position: relative;
            z-index: 1
        }

        .bdaas-card {
            background: var(--paper-soft);
            border: 1px solid var(--rule);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 4px 24px rgba(212, 146, 26, 0.06);
            transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
            display: flex;
            flex-direction: column;
        }

        .bdaas-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(212, 146, 26, 0.15)
        }

        .bdaas-card-top-bar {
            height: 4px;
            background: linear-gradient(90deg, var(--amber), var(--amber-light), #f5c66a);
            box-shadow: 0 0 16px rgba(212, 146, 26, 0.35);
        }

        .bdaas-card-inner {
            padding: 16px 14px 20px;
            flex: 1;
            /* Allow inner content to expand */
            display: flex;
            flex-direction: column;
        }

        .bdaas-card-header {
            display: flex;
            gap: 14px;
            align-items: flex-start;
            padding: 20px;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.2s;
            border: 1.5px solid transparent;
        }

        .bdaas-card-header:hover,
        .bdaas-card-header.active {
            background: rgba(212, 146, 26, 0.07);
            border-color: rgba(212, 146, 26, 0.2)
        }

        .bdaas-card-logo {
            width: 76px;
            height: 76px;
            border-radius: 14px;
            background: #FFF9EE;
            border: 1.5px solid var(--amber);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 10px;
        }

        .bdaas-card-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .badge-launch {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            background: linear-gradient(90deg, rgba(212, 146, 26, 0.13), rgba(212, 146, 26, 0.04));
            border: 1.5px solid rgba(212, 146, 26, 0.3);
            color: var(--amber);
            font-size: 11px;
            font-weight: 700;
            padding: 3px 11px;
            border-radius: 6px;
            margin-bottom: 8px;
            letter-spacing: 0.5px;

            width: max-content;
            font-family: var(--sans);
        }

        .bdaas-card-header h3 {
            font-family: var(--serif);
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 4px;
            color: var(--ink)
        }

        .bdaas-card-header p {
            font-size: 13px;
            color: var(--mute);
            line-height: 1.5;

            font-family: var(--sans)
        }

        .bdaas-items {
            padding: 0 10px;
            margin-top: 0;
            display: flex;
            flex-direction: column;
            gap: 14px;
            flex: 1;
        }

        .bdaas-item {
            display: flex;
            gap: 18px;
            align-items: center;
            padding: 24px 22px;
            border-radius: 14px;
            cursor: pointer;
            border: 1.5px solid var(--rule);
            border-left: 4px solid rgba(212, 146, 26, 0.4);
            transition: all 0.35s var(--ease);
            background: var(--paper-soft);
            transform: scale(0.97);
            opacity: 0.75;
            flex: 1;
        }

        .bdaas-item:hover {
            opacity: 0.9;
            border-left-color: var(--amber);
            box-shadow: 0 2px 10px rgba(212, 146, 26, 0.08);
        }

        .bdaas-item.active {
            padding: 30px 26px;
            background: rgba(212, 146, 26, 0.06);
            border-color: rgba(212, 146, 26, 0.25);
            border-left-color: var(--amber);
            box-shadow: 0 6px 20px rgba(212, 146, 26, 0.15);
            transform: scale(1);
            opacity: 1;
        }

        .bdaas-item-icon {
            width: 64px;
            height: 64px;
            border-radius: 14px;
            background: #FFF9EE;
            border: 1.5px solid rgba(212, 146, 26, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            padding: 12px;
            transition: all 0.35s var(--ease);
        }

        .bdaas-item.active .bdaas-item-icon {
            width: 72px;
            height: 72px;
            border-color: var(--amber);
            box-shadow: 0 4px 14px rgba(212, 146, 26, 0.18);
        }

        .bdaas-item-icon img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .bdaas-item-content strong {
            font-size: 18px;
            font-weight: 700;
            display: block;
            margin-bottom: 4px;
            color: var(--ink);
            font-family: var(--serif);
            transition: font-size 0.35s var(--ease);
        }

        .bdaas-item.active .bdaas-item-content strong {
            font-size: 21px;
        }

        .bdaas-item-content p {
            font-size: 14px;
            color: var(--mute);
            line-height: 1.65;
            margin: 0;
            margin-top: 6px;
            font-family: var(--sans);
            transition: all 0.35s var(--ease);
        }

        .bdaas-item.active .bdaas-item-content p {
            color: var(--ink);
            font-size: 15px;
        }

        .bdaas-card-footer {
            padding: 24px 20px;
            border-top: 1px solid var(--rule);
            margin-top: auto;
            display: flex;
            justify-content: center;
            /* Centered as requested */
        }

        .btn-card-explore {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: var(--amber);
            color: #fff !important;
            padding: 14px 32px;
            border-radius: 100px;
            font-weight: 700;
            font-size: 14px;
            text-decoration: none;
            transition: all 0.3s;
            border: 2px solid var(--amber);
            font-family: var(--sans);
            box-shadow: 0 4px 15px rgba(212, 146, 26, 0.2);
        }

        .btn-card-explore:hover {
            background: transparent;
            color: var(--amber) !important;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(212, 146, 26, 0.3);
        }

        .btn-card-explore .bdaas-text,
        .btn-card-explore .bdaas-text span {
            color: inherit !important;
        }

        .value-video-wrap {
            position: sticky;
            top: 84px;
            display: flex;
            flex-direction: column;
            height: calc(100% - 84px);
            /* Ensure it can stretch within the sticky context */
        }

        .value-video-box {
            background: var(--ink-soft);
            border-radius: 18px;
            overflow: hidden;
            border: 2px solid rgba(212, 146, 26, 0.2);
            flex: 1;
            /* Stretch to fill wrapper height */
            min-height: 400px;
            /* Base height for responsiveness */
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 24px 60px rgba(26, 18, 8, 0.2);
        }

        .video-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 16px;
            width: 100%;
            height: 100%;
            padding: 28px
        }

        .vpulse {
            width: 100px;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--amber), transparent);
            animation: vp 2s infinite
        }

        @keyframes vp {

            0%,
            100% {
                opacity: 0.3
            }

            50% {
                opacity: 1
            }
        }

        .video-tag-pill {
            background: rgba(212, 146, 26, 0.2);
            border: 1px solid rgba(212, 146, 26, 0.4);
            border-radius: 20px;
            padding: 4px 14px;
            color: var(--amber);
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;

            font-family: var(--sans);
        }

        .play-btn {
            width: 68px;
            height: 68px;
            background: var(--amber);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s, background 0.2s;
            animation: playPulse 2.5s infinite;
        }

        @keyframes playPulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(212, 146, 26, 0.4)
            }

            70% {
                box-shadow: 0 0 0 16px rgba(212, 146, 26, 0)
            }
        }

        .play-btn:hover {
            transform: scale(1.1);
            background: var(--amber-light)
        }

        .play-tri {
            width: 0;
            height: 0;
            border-top: 13px solid transparent;
            border-bottom: 13px solid transparent;
            border-left: 22px solid #fff;
            margin-left: 5px
        }

        .vvp-title {
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            text-align: center;
            letter-spacing: 0.3px;
            font-family: var(--sans)
        }

        .vvp-label {
            color: rgba(255, 255, 255, 0.5);
            font-size: 11px;
            letter-spacing: 2px;

            font-family: var(--sans)
        }

        /* ─────────── FAQ ─────────── */
        .faq-section {
            background: var(--paper-deep);
            overflow: hidden
        }

        .faq-accent-dots {
            position: absolute;
            top: 0;
            left: 0;
            width: 250px;
            height: 250px;
            z-index: 0;
            background-image: radial-gradient(circle, var(--amber) 1px, transparent 1px);
            background-size: 18px 18px;
            opacity: 0.1;
        }

        .faq-wrap {
            display: grid;
            grid-template-columns: 1fr 1.6fr;
            gap: 64px;
            align-items: start;
            position: relative;
            z-index: 1
        }

        .section-label {
            display: inline-block;
            font-size: clamp(16px, 1.5vw, 22px);
            font-weight: 700;
            letter-spacing: 3px;
            color: var(--amber);
            margin-bottom: 14px;
            font-family: var(--sans)
        }

        .brand-text {
            font-family: var(--serif) !important;
            font-weight: 700;
            color: #000000 !important;
        }

        .brand-text span {
            color: var(--red) !important;
        }

        .faq-section-h2 {
            font-family: var(--serif);
            font-size: clamp(28px, 4vw, 80px);
            /* Synced with section-h2 */
            font-weight: 700;
            line-height: 1.15;
            color: var(--ink)
        }

        .faq-section-h2 em {

            color: var(--amber)
        }

        .faq-left p {
            margin-top: 16px;
            font-size: 14px;
            color: var(--mute);
            line-height: 1.8;
            font-family: var(--sans)
        }

        .faq-left p a {
            color: var(--amber);
            text-decoration: none;
            font-weight: 600
        }

        .faq-list {
            display: flex;
            flex-direction: column;
            gap: 4px
        }

        .faq-item {
            background: var(--paper-soft);
            border-radius: 12px;
            overflow: hidden;
            cursor: pointer;
            border: 1px solid var(--rule);
            transition: box-shadow 0.2s, border-color 0.2s;
        }

        .faq-item.open,
        .faq-item:hover {
            box-shadow: 0 6px 24px rgba(212, 146, 26, 0.1);
            border-color: rgba(212, 146, 26, 0.28)
        }

        .faq-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 22px;
            gap: 14px
        }

        .faq-q {
            font-size: 1rem;
            font-weight: 800;
            color: var(--ink);
            flex: 1;
            line-height: 1.5;
            font-family: var(--serif)
        }

        .faq-q .bdaas-full-text {
            font-size: inherit;
            font-weight: inherit;
        }

        .faq-icon {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--amber);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: transform 0.3s var(--ease);
        }

        .faq-item.open .faq-icon {
            transform: rotate(45deg)
        }

        .faq-icon svg {
            width: 13px;
            height: 13px;
            stroke: #fff;
            stroke-width: 2.5
        }

        .faq-body {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, padding 0.3s
        }

        .faq-body.open {
            max-height: 200px;
            padding: 0 22px 20px
        }

        .faq-a {
            font-size: 14px;
            color: var(--mute);
            line-height: 1.8;
            border-top: 1px solid var(--rule);
            padding-top: 14px;
            font-family: var(--sans)
        }



        /* ─────────── CONTACT SECTION ─────────── */
        .contact-section {
            background: var(--paper-soft);
            position: relative;
            overflow: hidden;
            padding: 120px 0 0;
            /* Horizontal padding moved to children for full-width form */
            border-top: 1px solid var(--rule);
        }

        .contact-grid {
            width: 100%;
            max-width: 100%;
            display: block;
            /* Stacked for full width */
        }

        .contact-info {
            padding: 0 5%;
            margin-bottom: 64px;
            text-align: center;
            /* Centered for large screens */
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .contact-info .eyebrow {
            justify-content: center;
        }

        .contact-info h2 {
            font-family: var(--serif);
            font-size: clamp(28px, 4vw, 80px);
            /* Fully synced with section-h2 */
            font-weight: 700;
            line-height: 1.15;
            margin-bottom: 24px;
            color: var(--ink);
            text-align: center;
        }

        .contact-info h2 em {

            color: var(--amber);
        }

        .contact-info p {
            font-family: var(--sans);
            font-size: 17px;
            color: var(--mute);
            line-height: 1.6;
            max-width: 650px;
            margin: 0 auto;
            /* Keep centered */
        }

        .contact-form {
            background: var(--paper-deep);
            padding: 80px 5%;
            /* Spans full width edge-to-edge */
            width: 100%;
            max-width: 100%;
            text-align: left;
            border-top: 1px solid var(--rule);
            border-bottom: 1px solid var(--rule);
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .form-group label {
            font-family: var(--sans);
            font-size: 11px;
            font-weight: 700;

            letter-spacing: 1px;
            color: var(--ink);
            opacity: 0.8;
        }

        .form-input {
            background: var(--paper-deep);
            border: 1px solid var(--rule);
            padding: 14px 18px;
            border-radius: 10px;
            font-family: var(--sans);
            font-size: 14px;
            color: var(--ink);
            transition: all 0.3s;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--amber);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(212, 146, 26, 0.08);
        }

        select.form-input {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 18px center;
            background-size: 16px;
            padding-right: 42px;
            cursor: pointer;
        }

        .btn-form {
            width: 100%;
            background: var(--amber);
            color: #fff;
            padding: 16px;
            border-radius: 10px;
            font-weight: 700;
            font-size: 15px;
            border: none;
            cursor: pointer;
            transition: all 0.3s;
            font-family: var(--sans);
            margin-top: 10px;
        }

        .btn-form:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(212, 146, 26, 0.25);
        }

        .tagline-bar {
            display: flex;
            justify-content: center;
            gap: 24px;
            margin-top: 40px;
            flex-wrap: wrap;
        }

        .floating-gold-btn {
            background: var(--amber);
            color: #fff;
            padding: 14px 28px;
            border-radius: 50px;
            font-weight: 700;
            font-size: 13px;

            letter-spacing: 1px;
            box-shadow: 0 10px 25px rgba(212, 146, 26, 0.2);
            animation: floatY 4s ease-in-out infinite;
            display: flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            transition: all 0.3s;
            border: 2px solid var(--amber);
            font-family: var(--sans);
            white-space: nowrap;
        }

        .floating-gold-btn:hover {
            background: transparent;
            color: var(--amber);
            transform: translateY(-5px);
        }

        .floating-gold-btn:nth-child(2) {
            animation-delay: 0.5s;
        }

        .floating-gold-btn:nth-child(3) {
            animation-delay: 1s;
        }

        /* ─────────── SCROLL ANIMATIONS ─────────── */
        .fade-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s var(--ease), transform 0.7s var(--ease)
        }

        .fade-up.visible {
            opacity: 1;
            transform: translateY(0)
        }

        .slide-l {
            opacity: 0;
            transform: translateX(-36px);
            transition: opacity 0.7s var(--ease), transform 0.7s var(--ease)
        }

        .slide-l.visible {
            opacity: 1;
            transform: translateX(0)
        }

        .slide-r {
            opacity: 0;
            transform: translateX(36px);
            transition: opacity 0.7s var(--ease), transform 0.7s var(--ease)
        }

        .slide-r.visible {
            opacity: 1;
            transform: translateX(0)
        }

        .scale-up {
            opacity: 0;
            transform: scale(0.93);
            transition: opacity 0.6s var(--ease), transform 0.6s var(--ease)
        }

        .scale-up.visible {
            opacity: 1;
            transform: scale(1)
        }

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

            .story-grid,
            .value-split,
            .faq-wrap {
                grid-template-columns: 1fr
            }

            .value-video-wrap {
                position: static
            }

            .hero-body {
                grid-template-columns: 1fr 1fr
            }

            .hero-left {
                padding: 50px 4% 30px 4%
            }
        }

        /* Mobile & small tablet */
        @media(max-width:768px) {
            .hero-body {
                grid-template-columns: 1fr;
                min-height: auto;
                padding-bottom: 40px;
            }

            .hero-left {
                padding: 40px 5% 20px 5%;
                order: 1;
                text-align: left;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
            }

            .hero-h1 {
                white-space: nowrap;
                font-size: clamp(32px, 8vw, 48px);
                margin-bottom: 8px;
            }

            .hero-subheadline {
                white-space: nowrap;
                font-size: clamp(12px, 4vw, 24px);
            }

            .hero-tagline-desc {
                margin-left: 0;
                margin-right: 0;
            }

            .hero-actions {
                justify-content: flex-start;
            }

            .hero-right {
                order: 2;
                clip-path: none;
                min-height: 340px;
                padding: 20px 0 60px;
                border-radius: 0;
            }

            .hero-circle-bg {
                width: 280px;
                height: 280px
            }

            .hero-circle-ring {
                width: 320px;
                height: 320px
            }

            .carousel-track {
                width: min(300px, 84%);
                height: 300px
            }

            .hero-stats-bar {
                grid-template-columns: repeat(3, 1fr);
                gap: 0
            }

            .stat-item {
                padding: 0 12px;
                gap: 8px
            }

            .stat-icon {
                width: 32px;
                height: 32px;
                font-size: 14px
            }

            .stat-num {
                font-size: 18px
            }

            .stat-label {
                font-size: 10px
            }



            .deco-asterisk {
                display: none
            }
        }

        @media(max-width:768px) {
            section {
                padding: 60px 4%
            }

            .form-row {
                grid-template-columns: 1fr;
                gap: 20px;
            }

            .story-img-area {
                height: 320px
            }

            .story-img-small {
                width: 140px;
                height: 140px
            }

            .faq-wrap {
                grid-template-columns: 1fr;
                gap: 32px
            }
        }

        @media(max-width:600px) {
            .hero-actions {
                flex-direction: column
            }

            .btn-primary,
            .btn-outline {
                text-align: center;
                justify-content: center
            }

            .tagline-bar {
                flex-direction: column;
                gap: 4px
            }

            .cta-strip {
                flex-direction: column;
                text-align: center
            }



            .story-img-area {
                height: 260px
            }

            .story-img-small {
                display: none
            }

            .story-count {
                bottom: 40px;
                left: 10px
            }

            .hero-right {
                min-height: 290px
            }

            .carousel-track {
                width: min(270px, 86%);
                height: 260px
            }
        }

        @media(max-width:400px) {
            .hero-h1 {
                font-size: 32px
            }

            .section-h2 {
                font-size: 26px
            }
        }







        .root-path {
            stroke: var(--mute);
            stroke-width: 2.2;
            opacity: 0.45
        }

        .root-tiny {
            stroke: var(--mute);
            stroke-width: 1.4;
            opacity: 0.3
        }

        /* Trunk fill shape */
        .trunk-fill {
            fill: var(--ink);
            opacity: 0;
            transform-box: fill-box;
            transform-origin: bottom center
        }

        .trunk-fill.on {
            animation: trunkGrow 2s cubic-bezier(.4, 0, .2, 1) forwards
        }

        @keyframes trunkGrow {
            0% {
                opacity: 0;
                clip-path: inset(100% 0 0 0)
            }

            100% {
                opacity: 1;
                clip-path: inset(0 0 0 0)
            }
        }

        .trunk-highlight {
            fill: var(--ink-soft);
            opacity: 0;
            transform-box: fill-box;
            transform-origin: bottom center
        }

        .trunk-highlight.on {
            animation: trunkGrow 2s cubic-bezier(.4, 0, .2, 1) 0.2s forwards
        }

        .bark-line {
            stroke: var(--mute);
            stroke-width: 0.8;
            opacity: 0;
            fill: none;
            stroke-linecap: round
        }

        .bark-line.on {
            animation: barkIn 0.6s ease forwards
        }

        @keyframes barkIn {
            to {
                opacity: 0.25
            }
        }

        .knot {
            fill: var(--ink-soft);
            opacity: 0;
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(0)
        }

        .knot.on {
            animation: knotPop 0.4s cubic-bezier(.34, 1.56, .64, 1) forwards
        }

        @keyframes knotPop {
            0% {
                transform: scale(0);
                opacity: 0
            }

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

        .root-flare {
            fill: var(--ink);
            opacity: 0
        }

        .root-flare.on {
            animation: flareIn 0.8s ease forwards
        }

        @keyframes flareIn {
            to {
                opacity: 0.85
            }
        }

        /* Branches */
        .branch-path {
            stroke: var(--ink-soft);
            stroke-width: 2.5
        }

        .branch-med {
            stroke: var(--ink-soft);
            stroke-width: 2;
            opacity: 0.85
        }

        .branch-thin {
            stroke: var(--ink-soft);
            stroke-width: 1.5;
            opacity: 0.65
        }

        .twig {
            stroke: var(--mute);
            stroke-width: 1.2;
            opacity: 0.5
        }

        /* Seed */
        .intro-seed {
            fill: var(--red);
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(0);
            opacity: 0
        }

        .intro-seed.on {
            animation: seedPop 0.5s cubic-bezier(.34, 1.56, .64, 1) forwards
        }

        @keyframes seedPop {
            0% {
                transform: scale(0);
                opacity: 0
            }

            60% {
                transform: scale(1.4);
                opacity: 1
            }

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

        .intro-seed-pulse {
            fill: none;
            stroke: var(--red);
            stroke-width: 2;
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(0);
            opacity: 0
        }

        .intro-seed-pulse.on {
            animation: seedRing 1.2s ease forwards
        }

        @keyframes seedRing {
            0% {
                transform: scale(1);
                opacity: 0.7;
                stroke-width: 3
            }

            100% {
                transform: scale(5);
                opacity: 0;
                stroke-width: 0.3
            }
        }

        /* Leaf clusters */
        .intro-leaf {
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(0);
            opacity: 0
        }

        .lf-amber {
            fill: var(--amber)
        }

        .lf-red {
            fill: var(--red)
        }

        .lf-gold {
            fill: var(--amber-light)
        }

        .lf-deep {
            fill: var(--red-deep)
        }

        .lf-pale {
            fill: var(--amber);
            opacity: 0.5
        }

        .intro-leaf.on {
            animation: leafPop 0.45s cubic-bezier(.34, 1.56, .64, 1) forwards
        }

        @keyframes leafPop {
            0% {
                transform: scale(0);
                opacity: 0
            }

            65% {
                transform: scale(1.35);
                opacity: 1
            }

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

        /* Ink splatter dots */
        .ink-drop {
            fill: var(--ink);
            opacity: 0;
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(0)
        }

        .ink-drop.on {
            animation: inkSplat 0.3s cubic-bezier(.34, 1.56, .64, 1) forwards
        }

        @keyframes inkSplat {
            0% {
                transform: scale(0);
                opacity: 0
            }

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

        /* Labels */
        .intro-label {
            font-family: var(--serif);
            font-size: 14px;
            font-weight: 700;
            fill: var(--ink);
            opacity: 0
        }

        .label-l {
            text-anchor: end;
        }

        .label-r {
            text-anchor: start;
        }

        .label-c {
            text-anchor: middle;
        }

        .intro-label.on {
            animation: fadeI 0.4s ease forwards
        }

        .brand-word {
            font-family: var(--serif);
            font-weight: 700;
            color: #1A140E;
        }

        .brand-word span {
            color: var(--red);
        }

        .brand-text {
            font-family: var(--serif) !important;
            font-weight: 700;
            color: #000000 !important;
        }

        .brand-text span {
            color: var(--red) !important;
        }

        @keyframes fadeI {
            to {
                opacity: 1
            }
        }

        /* Horizontal ground line */
        .ground-line {
            stroke: var(--mute);
            stroke-width: 1;
            opacity: 0;
            stroke-dasharray: 6 4
        }

        .ground-line.on {
            animation: groundIn 0.8s ease forwards
        }

        @keyframes groundIn {
            to {
                opacity: 0.3
            }
        }



        /* Particles */
        .intro-particles {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0
        }

        .intro-particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0
        }

        .intro-particle:nth-child(1) {
            width: 5px;
            height: 5px;
            background: var(--amber);
            top: 20%;
            left: 15%
        }

        .intro-particle:nth-child(2) {
            width: 3px;
            height: 3px;
            background: var(--red);
            top: 26%;
            right: 18%
        }

        .intro-particle:nth-child(3) {
            width: 4px;
            height: 4px;
            background: var(--amber-light);
            top: 48%;
            left: 10%
        }

        .intro-particle:nth-child(4) {
            width: 6px;
            height: 6px;
            background: rgba(212, 146, 26, 0.3);
            top: 40%;
            right: 12%
        }

        .intro-particle:nth-child(5) {
            width: 3px;
            height: 3px;
            background: var(--amber);
            bottom: 30%;
            left: 20%
        }

        .intro-particle:nth-child(6) {
            width: 4px;
            height: 4px;
            background: var(--red);
            bottom: 26%;
            right: 20%
        }

        .intro-particle:nth-child(7) {
            width: 5px;
            height: 5px;
            background: var(--amber-light);
            top: 34%;
            left: 28%
        }

        .intro-particle:nth-child(8) {
            width: 3px;
            height: 3px;
            background: var(--amber);
            top: 54%;
            right: 25%
        }

        .intro-particle:nth-child(9) {
            width: 4px;
            height: 4px;
            background: var(--red);
            top: 15%;
            right: 35%
        }

        .intro-particle:nth-child(10) {
            width: 5px;
            height: 5px;
            background: var(--amber-light);
            bottom: 15%;
            left: 40%
        }

        .intro-particle:nth-child(11) {
            width: 3px;
            height: 3px;
            background: var(--amber);
            top: 60%;
            left: 5%
        }

        .intro-particle:nth-child(12) {
            width: 6px;
            height: 6px;
            background: rgba(212, 146, 26, 0.2);
            bottom: 45%;
            right: 5%
        }

        .intro-particle:nth-child(13) {
            width: 4px;
            height: 4px;
            background: var(--amber);
            top: 10%;
            left: 45%
        }

        .intro-particle:nth-child(14) {
            width: 5px;
            height: 5px;
            background: var(--red);
            bottom: 20%;
            right: 40%
        }

        .intro-particle:nth-child(15) {
            width: 3px;
            height: 3px;
            background: var(--amber-light);
            top: 30%;
            left: 60%
        }

        .intro-particle:nth-child(16) {
            width: 4px;
            height: 4px;
            background: var(--amber);
            bottom: 10%;
            left: 15%
        }

        .intro-particle:nth-child(17) {
            width: 5px;
            height: 5px;
            background: var(--red);
            top: 5%;
            right: 10%
        }

        .intro-particle:nth-child(18) {
            width: 3px;
            height: 3px;
            background: var(--amber-light);
            bottom: 5%;
            right: 25%
        }

        .intro-particle:nth-child(19) {
            width: 6px;
            height: 6px;
            background: rgba(212, 146, 26, 0.15);
            top: 45%;
            left: 20%
        }

        .intro-particle:nth-child(20) {
            width: 4px;
            height: 4px;
            background: var(--amber);
            bottom: 35%;
            left: 80%
        }

        .intro-particle:nth-child(21) {
            width: 3px;
            height: 3px;
            background: var(--amber-light);
            top: 12%;
            right: 50%
        }

        .intro-particle:nth-child(22) {
            width: 5px;
            height: 5px;
            background: var(--red);
            bottom: 40%;
            left: 10%
        }

        .intro-particle:nth-child(23) {
            width: 4px;
            height: 4px;
            background: var(--amber);
            top: 65%;
            right: 15%
        }

        .intro-particle:nth-child(24) {
            width: 3px;
            height: 3px;
            background: var(--amber-light);
            bottom: 12%;
            left: 65%
        }

        .intro-particle:nth-child(25) {
            width: 5px;
            height: 5px;
            background: var(--red);
            top: 40%;
            left: 5%
        }

        .intro-particle:nth-child(26) {
            width: 4px;
            height: 4px;
            background: var(--amber);
            bottom: 25%;
            right: 5%
        }

        .intro-particle:nth-child(27) {
            width: 3px;
            height: 3px;
            background: var(--amber-light);
            top: 18%;
            left: 85%
        }

        .intro-particle:nth-child(28) {
            width: 5px;
            height: 5px;
            background: var(--red);
            bottom: 50%;
            right: 45%
        }

        .intro-particle:nth-child(29) {
            width: 4px;
            height: 4px;
            background: var(--amber);
            top: 75%;
            left: 35%
        }

        .intro-particle:nth-child(30) {
            width: 3px;
            height: 3px;
            background: var(--amber-light);
            bottom: 30%;
            right: 80%
        }

        .intro-particle:nth-child(31) {
            width: 4px;
            height: 4px;
            background: var(--amber);
            top: 5%;
            left: 25%
        }

        .intro-particle:nth-child(32) {
            width: 5px;
            height: 5px;
            background: var(--red);
            bottom: 8%;
            right: 60%
        }

        .intro-particle:nth-child(33) {
            width: 3px;
            height: 3px;
            background: var(--amber-light);
            top: 55%;
            left: 90%
        }

        .intro-particle:nth-child(34) {
            width: 6px;
            height: 6px;
            background: rgba(212, 146, 26, 0.1);
            top: 85%;
            right: 20%
        }

        .intro-particle:nth-child(35) {
            width: 4px;
            height: 4px;
            background: var(--amber);
            bottom: 55%;
            left: 5%
        }

        .intro-particle:nth-child(36) {
            width: 5px;
            height: 5px;
            background: var(--red);
            top: 25%;
            right: 5%
        }

        .intro-particle:nth-child(37) {
            width: 3px;
            height: 3px;
            background: var(--amber-light);
            bottom: 65%;
            right: 85%
        }

        .intro-particle:nth-child(38) {
            width: 4px;
            height: 4px;
            background: var(--amber);
            top: 15%;
            left: 75%
        }

        .intro-particle:nth-child(39) {
            width: 5px;
            height: 5px;
            background: var(--red);
            bottom: 15%;
            right: 15%
        }

        .intro-particle:nth-child(40) {
            width: 3px;
            height: 3px;
            background: var(--amber-light);
            top: 40%;
            left: 50%
        }

        .intro-particle.on {
            animation: pF 3s ease-in-out infinite
        }

        .intro-particle:nth-child(2).on {
            animation-delay: .4s;
            animation-duration: 3.5s
        }

        .intro-particle:nth-child(3).on {
            animation-delay: .8s;
            animation-duration: 2.8s
        }

        .intro-particle:nth-child(4).on {
            animation-delay: .2s;
            animation-duration: 3.2s
        }

        .intro-particle:nth-child(5).on {
            animation-delay: .6s;
            animation-duration: 2.6s
        }

        .intro-particle:nth-child(6).on {
            animation-delay: 1s;
            animation-duration: 3.4s
        }

        .intro-particle:nth-child(7).on {
            animation-delay: .3s;
            animation-duration: 2.9s
        }

        .intro-particle:nth-child(8).on {
            animation-delay: .7s;
            animation-duration: 3.1s
        }

        @keyframes pF {
            0% {
                opacity: 0;
                transform: translateY(0) scale(0)
            }

            15% {
                opacity: .6;
                transform: translateY(-5px) scale(1)
            }

            85% {
                opacity: .2
            }

            100% {
                opacity: 0;
                transform: translateY(-25px) scale(.4)
            }
        }


        /* ── WATER INTRO ANIMATION (PORTED) ── */
        body.intro-active {
            overflow: hidden
        }

        #intro-overlay {
            position: fixed;
            inset: 0;
            z-index: 9999;
            background: radial-gradient(circle at 50% 50%, #F8F3E9 0%, #E8E0CE 100%);
            overflow: hidden;
            transition: background 1.5s ease;
            display: block;
        }

        #intro-overlay.bloom {
            background: radial-gradient(circle at 50% 50%, #FFFDF9 0%, #F5F0E1 100%);
        }

        #intro-overlay::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');
            opacity: 0.04;
            mix-blend-mode: multiply;
            animation: none;
        }

        #intro-canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 4;
            pointer-events: none
        }

        .ink-layer {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column
        }

        .ink-base {
            z-index: 2
        }

        .ink-base .intro-logo-box {
            border-color: rgba(26, 20, 14, 0.12);
            color: rgba(26, 20, 14, 0.25);
            background: transparent
        }

        .ink-base .intro-logo-text {
            color: rgba(26, 20, 14, 0.25)
        }

        .ink-base .intro-logo-img {
            opacity: 0.25;
            filter: grayscale(100%);
        }

        .ink-color {
            z-index: 3;
            clip-path: circle(0px at 50% 50%);
            transition: clip-path 1.8s cubic-bezier(0.2, 1, 0.4, 1)
        }

        /* ── Centered wrapper for the entire intro content column ── */
        .intro-logo-wrap {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
            transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1)
        }

        /* The single column that holds Logo + BDaaS + tagline */
        .intro-content-col {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: clamp(8px, 1.5vh, 20px);
        }

        /* When bloom fires, shift the whole column up to make room */
        #intro-overlay.bloom .intro-logo-wrap {
            transform: translateY(clamp(-30px, -4vh, -55px))
        }

        .intro-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: clamp(8px, 1.5vw, 18px);
            opacity: 0;
            transform: translateY(24px);
            filter: blur(10px);
            margin-top: 0;
        }

        .intro-logo.on {
            animation: premiumReveal 1.2s cubic-bezier(0.2, 1, 0.3, 1) forwards
        }

        @keyframes premiumReveal {
            to {
                opacity: 1;
                transform: translateY(0);
                filter: blur(0)
            }
        }

        .intro-logo-img {
            height: clamp(50px, 8vw, 120px);
            width: auto;
            margin-bottom: 0;
        }

        .intro-logo-text {
            font-family: var(--serif);
            font-size: clamp(22px, 4vw, 52px);
            font-weight: 700;
            color: var(--ink);
            letter-spacing: clamp(0.5px, 0.1vw, 2px);
            white-space: nowrap;
        }

        .ink-base .intro-logo-text {
            color: rgba(26, 20, 14, 0.2);
        }

        .intro-logo-text span {
            color: var(--red)
        }

        /* BDaaS — fluid size, centered under the logo row */
        .intro-bdaas {
            font-family: var(--serif);
            font-size: clamp(36px, 7vw, 88px);
            font-weight: 800;
            color: var(--ink);
            opacity: 0;
            pointer-events: none;
            letter-spacing: clamp(2px, 0.4vw, 6px);
            white-space: nowrap;
            transform: translateY(30px) scale(0.96);
            filter: blur(10px);
            text-align: center;
        }

        .intro-bdaas.on {
            animation: bdaasBloom 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards
        }

        @keyframes bdaasBloom {
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
                filter: blur(0)
            }
        }

        .intro-bdaas span {
            color: var(--red)
        }

        /* Tagline — fluid size */
        .intro-tagline {
            font-family: var(--serif);
            font-size: clamp(9px, 1.5vw, 20px);
            font-weight: 600;
            color: var(--mute);
            letter-spacing: clamp(1.5px, 0.35vw, 5px);

            opacity: 0;
            transform: translateY(16px);
            filter: blur(4px);
            margin-top: 0;
            text-align: center;
            white-space: nowrap;
        }

        .intro-tagline span {
            color: var(--red);
        }

        .intro-tagline.on {
            animation: premiumReveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards
        }

        .intro-logo-box {
            width: clamp(40px, 5vw, 70px);
            height: clamp(40px, 5vw, 70px);
            border: 3px solid var(--red);
            border-radius: clamp(8px, 1vw, 14px);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 900;
            color: var(--red);
            font-size: clamp(18px, 2.5vw, 32px);
            font-family: var(--serif);
            background: linear-gradient(135deg, rgba(200, 32, 42, 0.05), transparent);
            box-shadow: inset 0 2px 10px rgba(255, 255, 255, 0.5), 0 10px 30px rgba(212, 146, 26, 0.08);
        }

        .ink-base .intro-logo-box {
            border-color: rgba(26, 20, 14, 0.08);
            color: rgba(26, 20, 14, 0.15);
            background: transparent;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2), 0 4px 12px rgba(26, 20, 14, 0.04);
        }

        .v-hide {
            visibility: hidden !important
        }

        #intro-overlay.exit {
            animation: introOut 1.1s cubic-bezier(.76, 0, .24, 1) forwards;
            pointer-events: none
        }

        #intro-overlay.exit::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--amber), var(--amber-light), var(--amber));
            box-shadow: 0 4px 20px rgba(212, 146, 26, 0.5);
        }

        @keyframes introOut {
            to {
                transform: translateY(-100vh)
            }
        }

        /* ── Intro responsive: small tweaks for very narrow screens ── */
        @media(max-width:480px) {
            .intro-tagline {
                white-space: normal;
                max-width: 90vw;
            }

            #intro-overlay.bloom .intro-logo-wrap {
                transform: translateY(-25px)
            }
        }

        .bdaas-text-custom {
            font-weight: 700;
        }

        .bdaas-text-custom .bds {
            color: var(--red) !important;
        }

        .bdaas-text-custom .aa {
            color: #ffffff !important;
        }

        /* ═══════════════════════════════════════════════════════════
   4K / LARGE MONITOR RESPONSIVE — Progressive Enhancement
   ═══════════════════════════════════════════════════════════ */

        /* ── Large Desktop (1600px+) ── */
        @media (min-width: 1600px) {

            /* Hero */
            .hero-h1 {
                font-size: clamp(50px, 6vw, 130px);
            }

            .hero-subheadline {
                font-size: clamp(20px, 2.5vw, 46px);
            }

            .hero-tagline-desc {
                font-size: 19px;
                max-width: 700px;
                line-height: 1.85;
            }

            .hero-left {
                padding: 50px 5% 40px 5%;
            }

            .hero-badge span {
                font-size: 13px;
            }

            .btn-primary,
            .btn-outline {
                padding: 16px 36px;
                font-size: 16px;
            }

            .carousel-track {
                width: clamp(400px, 32vw, 620px);
                height: clamp(440px, 38vw, 700px);
            }

            .slide-label-text {
                font-size: 19px;
            }

            .slide-label-num {
                width: 42px;
                height: 42px;
                font-size: 16px;
            }

            .slide-badge {
                font-size: 12px;
                padding: 7px 16px;
            }

            /* Stats Bar */
            .hero-stats-bar {
                padding: 30px 5%;
            }

            .stat-icon {
                width: 48px;
                height: 48px;
                font-size: 22px;
            }

            .stat-num {
                font-size: clamp(28px, 2.5vw, 52px);
            }

            .stat-label {
                font-size: 14px;
            }

            /* Sections */
            section {
                padding: 90px 6%;
            }

            .section-h2 {
                font-size: clamp(34px, 4.5vw, 90px);
            }

            .faq-section-h2 {
                font-size: clamp(34px, 4.5vw, 90px);
            }

            .eyebrow {
                gap: 12px;
                margin-bottom: 16px;
            }

            .etext {
                font-size: 18px;
                letter-spacing: 3px;
            }

            .eline {
                width: 36px;
                height: 3px;
            }

            /* Story Section */
            .story-grid {
                gap: 80px;
            }

            .story-img-area {
                height: 540px;
            }

            .story-content p {
                font-size: 17px;
            }

            .link-gold {
                font-size: 16px;
            }

            /* What is BDaaS */
            .what-inner {
                max-width: 900px;
            }

            .what-desc {
                font-size: 18px;
            }

            .floating-gold-btn {
                padding: 16px 32px;
                font-size: 14px;
            }

            /* CTA Strip */
            .cta-strip {
                padding: 28px 6%;
            }

            .cta-strip p {
                font-size: 19px;
            }

            .btn-white {
                padding: 13px 30px;
                font-size: 15px;
            }

            /* Value Section */
            .value-head {
                max-width: 1300px;
            }

            .value-sub {
                font-size: 18px;
            }

            .value-split {
                gap: 48px;
            }

            .bdaas-card-header h3 {
                font-size: 19px;
            }

            .bdaas-card-header p {
                font-size: 14px;
            }

            .bdaas-item-content strong {
                font-size: 19px;
            }

            .bdaas-item-content p {
                font-size: 14px;
            }

            .bdaas-item {
                padding: 16px 20px;
            }

            .bdaas-item-icon {
                width: 50px;
                height: 50px;
            }

            .bdaas-card-logo {
                width: 86px;
                height: 86px;
            }

            .btn-card-explore {
                padding: 16px 36px;
                font-size: 15px;
            }

            .value-video-box {
                min-height: 480px;
            }

            .play-btn {
                width: 78px;
                height: 78px;
            }

            .vvp-title {
                font-size: 17px;
            }

            /* FAQ */
            .faq-wrap {
                gap: 80px;
            }

            .faq-q {
                font-size: 1.1rem;
            }

            .faq-header {
                padding: 24px 26px;
            }

            .faq-a {
                font-size: 15px;
            }

            .faq-icon {
                width: 34px;
                height: 34px;
            }

            .faq-left p {
                font-size: 15px;
            }

            .section-label {
                font-size: 12px;
            }

            /* Contact */
            .contact-section {
                padding: 140px 0 0;
            }

            .contact-info h2 {
                font-size: clamp(34px, 4.5vw, 90px);
            }

            .contact-info p {
                font-size: 19px;
                max-width: 800px;
            }

            .contact-form {
                padding: 100px 6%;
            }

            .form-group label {
                font-size: 12px;
            }

            .form-input {
                padding: 16px 20px;
                font-size: 15px;
                border-radius: 12px;
            }

            .btn-form {
                padding: 18px;
                font-size: 16px;
            }



            /* ── 2K / Ultrawide (2000px+) ── */
            @media (min-width: 2000px) {

                /* Hero */
                .hero-h1 {
                    font-size: clamp(60px, 7vw, 160px);
                }

                .hero-subheadline {
                    font-size: clamp(24px, 2.5vw, 54px);
                }

                .hero-tagline-desc {
                    font-size: 22px;
                    max-width: 850px;
                    line-height: 1.9;
                    margin-bottom: 44px;
                }

                .hero-left {
                    padding: 60px 6% 50px 6%;
                }

                .hero-badge {
                    padding: 7px 18px;
                    margin-bottom: 28px;
                }

                .hero-badge span {
                    font-size: 14px;
                    letter-spacing: 2px;
                }

                .hero-badge-dot {
                    width: 9px;
                    height: 9px;
                }

                .btn-primary,
                .btn-outline {
                    padding: 18px 42px;
                    font-size: 18px;
                }

                .hero-actions {
                    gap: 18px;
                }

                .carousel-track {
                    width: clamp(480px, 34vw, 750px);
                    height: clamp(520px, 40vw, 850px);
                }

                .carousel-slide {
                    border-radius: 30px;
                }

                .slide-label-text {
                    font-size: 22px;
                }

                .slide-label-num {
                    width: 48px;
                    height: 48px;
                    font-size: 18px;
                }

                .slide-badge {
                    font-size: 13px;
                    padding: 8px 20px;
                }

                .carousel-arrow {
                    width: 44px;
                    height: 44px;
                }

                .carousel-arrow svg {
                    width: 18px;
                    height: 18px;
                }

                .carousel-dot {
                    width: 10px;
                    height: 10px;
                }

                .carousel-dot.active {
                    width: 36px;
                }

                /* Stats Bar */
                .hero-stats-bar {
                    padding: 36px 6%;
                }

                .stat-item {
                    padding: 0 40px;
                    gap: 18px;
                }

                .stat-icon {
                    width: 56px;
                    height: 56px;
                    font-size: 26px;
                    border-radius: 14px;
                }

                .stat-num {
                    font-size: clamp(32px, 3vw, 60px);
                }

                .stat-label {
                    font-size: 15px;
                    letter-spacing: 0.8px;
                }

                /* Sections */
                section {
                    padding: 120px 8%;
                }

                .section-h2 {
                    font-size: clamp(40px, 5vw, 100px);
                }

                .faq-section-h2 {
                    font-size: clamp(40px, 5vw, 100px);
                }

                .etext {
                    font-size: 14px;
                    letter-spacing: 3.5px;
                }

                .eline {
                    width: 44px;
                }

                /* Story */
                .story-grid {
                    gap: 100px;
                }

                .story-img-area {
                    height: 640px;
                }

                .story-img-small {
                    width: 260px;
                    height: 260px;
                }

                .story-content p {
                    font-size: 19px;
                }

                .story-count {
                    padding: 18px 26px;
                }

                .story-count .num {
                    font-size: 32px;
                }

                .story-count .lbl {
                    font-size: 13px;
                }

                .link-gold {
                    font-size: 17px;
                }

                /* What is BDaaS */
                .what-inner {
                    max-width: 1100px;
                }

                .what-desc {
                    font-size: 20px;
                    margin-bottom: 36px;
                }

                .tagline-bar {
                    gap: 20px;
                    margin-top: 50px;
                }

                .floating-gold-btn {
                    padding: 18px 38px;
                    font-size: 15px;
                }

                /* CTA Strip */
                .cta-strip {
                    padding: 34px 8%;
                }

                .cta-strip p {
                    font-size: 21px;
                }

                .btn-white {
                    padding: 14px 34px;
                    font-size: 16px;
                }

                /* Value Section */
                .value-head {
                    max-width: 1500px;
                    margin-bottom: 72px;
                }

                .value-sub {
                    font-size: 20px;
                    margin-top: 18px;
                }

                .value-split {
                    gap: 56px;
                }

                .bdaas-card {
                    border-radius: 24px;
                }

                .bdaas-card-inner {
                    padding: 6px 6px 26px;
                }

                .bdaas-card-header {
                    padding: 24px;
                    border-radius: 16px;
                    gap: 18px;
                }

                .bdaas-card-header h3 {
                    font-size: 22px;
                }

                .bdaas-card-header p {
                    font-size: 15px;
                    line-height: 1.6;
                }

                .bdaas-card-logo {
                    width: 96px;
                    height: 96px;
                    border-radius: 18px;
                }

                .bdaas-items {
                    gap: 12px;
                    padding: 0 6px;
                }

                .bdaas-item {
                    padding: 18px 22px;
                    border-radius: 14px;
                    gap: 16px;
                }

                .bdaas-item-icon {
                    width: 56px;
                    height: 56px;
                    border-radius: 12px;
                }

                .bdaas-item-content strong {
                    font-size: 22px;
                }

                .bdaas-item-content p {
                    font-size: 15px;
                }

                .badge-launch {
                    font-size: 12px;
                    padding: 4px 14px;
                }

                .bdaas-card-footer {
                    padding: 28px 24px;
                }

                .btn-card-explore {
                    padding: 18px 42px;
                    font-size: 16px;
                }

                .value-video-box {
                    min-height: 560px;
                    border-radius: 22px;
                }

                .play-btn {
                    width: 88px;
                    height: 88px;
                }

                .play-tri {
                    border-top: 16px solid transparent;
                    border-bottom: 16px solid transparent;
                    border-left: 26px solid #fff;
                }

                .vvp-title {
                    font-size: 19px;
                }

                .vvp-label {
                    font-size: 13px;
                }

                .video-tag-pill {
                    font-size: 13px;
                    padding: 6px 18px;
                }

                /* FAQ */
                .faq-wrap {
                    gap: 100px;
                }

                .faq-q {
                    font-size: 1.25rem;
                }

                .faq-header {
                    padding: 28px 30px;
                }

                .faq-a {
                    font-size: 16px;
                    padding-top: 18px;
                }

                .faq-icon {
                    width: 38px;
                    height: 38px;
                }

                .faq-icon svg {
                    width: 15px;
                    height: 15px;
                }

                .faq-item {
                    border-radius: 16px;
                }

                .faq-body.open {
                    padding: 0 30px 24px;
                }

                .faq-left p {
                    font-size: 16px;
                }

                .section-label {
                    font-size: 13px;
                    letter-spacing: 3px;
                }

                /* Contact */
                .contact-section {
                    padding: 160px 0 0;
                }

                .contact-info {
                    margin-bottom: 80px;
                }

                .contact-info h2 {
                    font-size: clamp(40px, 5vw, 100px);
                }

                .contact-info p {
                    font-size: 21px;
                    max-width: 900px;
                }

                .contact-form {
                    padding: 120px 8%;
                }

                .form-row {
                    gap: 28px;
                    margin-bottom: 28px;
                }

                .form-group {
                    gap: 10px;
                }

                .form-group label {
                    font-size: 13px;
                }

                .form-input {
                    padding: 18px 24px;
                    font-size: 16px;
                    border-radius: 14px;
                }

                .btn-form {
                    padding: 20px;
                    font-size: 17px;
                    border-radius: 14px;
                }

            }
        }

        /* ── 4K Monitors (2560px+) ── */
        @media (min-width: 2560px) {

            /* Hero */
            .hero-h1 {
                font-size: clamp(70px, 8vw, 200px);
            }

            .hero-subheadline {
                font-size: clamp(26px, 2.5vw, 64px);
            }

            .hero-tagline-desc {
                font-size: 26px;
                max-width: 1000px;
                line-height: 1.95;
                margin-bottom: 52px;
            }

            .hero-left {
                padding: 70px 7% 60px 7%;
            }

            .hero-badge {
                padding: 8px 22px;
                margin-bottom: 34px;
                border-radius: 28px;
            }

            .hero-badge span {
                font-size: 16px;
                letter-spacing: 2.5px;
            }

            .hero-badge-dot {
                width: 10px;
                height: 10px;
            }

            .btn-primary,
            .btn-outline {
                padding: 22px 52px;
                font-size: 20px;
                gap: 12px;
            }

            .hero-actions {
                gap: 22px;
            }

            .carousel-track {
                width: clamp(560px, 30vw, 800px);
                height: clamp(600px, 36vw, 850px);
                margin-left: 80px;
            }

            .carousel-slide {
                border-radius: 36px;
            }

            .slide-label {
                bottom: 32px;
                left: 32px;
                right: 32px;
                gap: 16px;
            }

            .slide-label-text {
                font-size: 26px;
            }

            .slide-label-num {
                width: 56px;
                height: 56px;
                font-size: 20px;
            }

            .slide-badge {
                font-size: 15px;
                padding: 10px 24px;
                top: 24px;
                right: 24px;
                border-radius: 28px;
            }

            .slide-overlay {
                background: linear-gradient(180deg, transparent 35%, rgba(26, 18, 8, 0.75) 100%);
            }

            .carousel-arrow {
                width: 52px;
                height: 52px;
            }

            .carousel-arrow svg {
                width: 22px;
                height: 22px;
            }

            .carousel-dot {
                width: 12px;
                height: 12px;
            }

            .carousel-dot.active {
                width: 44px;
                height: 12px;
                border-radius: 6px;
            }

            .carousel-controls {
                margin-top: 32px;
                gap: 16px;
                margin-left: 80px;
            }

            .carousel-progress {
                height: 4px;
            }

            /* Stats Bar */
            .hero-stats-bar {
                padding: 44px 7%;
            }

            .stat-item {
                padding: 0 52px;
                gap: 22px;
            }

            .stat-icon {
                width: 64px;
                height: 64px;
                font-size: 30px;
                border-radius: 16px;
            }

            .stat-num {
                font-size: clamp(38px, 3.5vw, 72px);
            }

            .stat-label {
                font-size: 17px;
                letter-spacing: 1px;
                margin-top: 4px;
            }

            /* Sections */
            section {
                padding: 160px 10%;
            }

            .section-h2 {
                font-size: clamp(48px, 5.5vw, 120px);
            }

            .faq-section-h2 {
                font-size: clamp(48px, 5.5vw, 120px);
            }

            .eyebrow {
                gap: 16px;
                margin-bottom: 20px;
            }

            .etext {
                font-size: 24px;
                letter-spacing: 4px;
            }

            .eline {
                width: 52px;
                height: 3px;
            }

            /* Story */
            .story-grid {
                gap: 120px;
            }

            .story-img-area {
                height: 780px;
            }

            .story-img-small {
                width: 320px;
                height: 320px;
                border-radius: 18px;
            }

            .story-img-main {
                border-radius: 8px;
            }

            .story-content p {
                font-size: 22px;
                line-height: 1.9;
                margin-bottom: 24px;
            }

            .story-accent {
                width: 110px;
                height: 110px;
            }

            .story-count {
                padding: 22px 32px;
                border-radius: 14px;
            }

            .story-count .num {
                font-size: 38px;
            }

            .story-count .lbl {
                font-size: 14px;
            }

            .link-gold {
                font-size: 19px;
                gap: 8px;
            }

            /* What is BDaaS */
            .what-inner {
                max-width: 1400px;
            }

            .what-desc {
                font-size: 24px;
                margin-bottom: 44px;
                line-height: 1.85;
            }

            .tagline-bar {
                gap: 28px;
                margin-top: 60px;
            }

            .floating-gold-btn {
                padding: 22px 44px;
                font-size: 17px;
                border-radius: 60px;
            }

            /* CTA Strip */
            .cta-strip {
                padding: 42px 10%;
            }

            .cta-strip p {
                font-size: 24px;
            }

            .btn-white {
                padding: 16px 40px;
                font-size: 18px;
            }

            /* Value Section */
            .value-head {
                max-width: 1800px;
                margin-bottom: 90px;
            }

            .value-sub {
                font-size: 24px;
                margin-top: 22px;
                line-height: 1.8;
            }

            .value-split {
                gap: 72px;
            }

            .bdaas-card {
                border-radius: 28px;
            }

            .bdaas-card-top-bar {
                height: 6px;
            }

            .bdaas-card-inner {
                padding: 8px 8px 32px;
            }

            .bdaas-card-header {
                padding: 30px;
                border-radius: 20px;
                gap: 22px;
            }

            .bdaas-card-header h3 {
                font-size: 26px;
                margin-bottom: 6px;
            }

            .bdaas-card-header p {
                font-size: 17px;
                line-height: 1.65;
            }

            .bdaas-card-logo {
                width: 110px;
                height: 110px;
                border-radius: 22px;
                padding: 14px;
            }

            .bdaas-items {
                gap: 14px;
                padding: 0 8px;
                margin-top: 10px;
            }

            .bdaas-item {
                padding: 22px 26px;
                border-radius: 16px;
                gap: 20px;
                border-left-width: 5px;
            }

            .bdaas-item-icon {
                width: 64px;
                height: 64px;
                border-radius: 14px;
                padding: 12px;
            }

            .bdaas-item-content strong {
                font-size: 26px;
                margin-bottom: 6px;
            }

            .bdaas-item-content p {
                font-size: 17px;
            }

            .badge-launch {
                font-size: 14px;
                padding: 5px 18px;
                border-radius: 8px;
            }

            .bdaas-card-footer {
                padding: 32px 28px;
                margin-top: 16px;
            }

            .btn-card-explore {
                padding: 20px 50px;
                font-size: 18px;
                gap: 10px;
            }

            .value-video-box {
                min-height: 680px;
                border-radius: 28px;
                border-width: 3px;
            }

            .video-inner {
                padding: 40px;
                gap: 22px;
            }

            .play-btn {
                width: 100px;
                height: 100px;
            }

            .play-tri {
                border-top: 18px solid transparent;
                border-bottom: 18px solid transparent;
                border-left: 30px solid #fff;
                margin-left: 6px;
            }

            .vvp-title {
                font-size: 22px;
            }

            .vvp-label {
                font-size: 14px;
                letter-spacing: 3px;
            }

            .video-tag-pill {
                font-size: 14px;
                padding: 7px 22px;
                border-radius: 28px;
            }

            .vpulse {
                width: 140px;
            }

            /* FAQ */
            .faq-wrap {
                gap: 130px;
            }

            .faq-q {
                font-size: 1.45rem;
            }

            .faq-header {
                padding: 34px 36px;
                gap: 18px;
            }

            .faq-a {
                font-size: 18px;
                padding-top: 22px;
                line-height: 1.85;
            }

            .faq-icon {
                width: 44px;
                height: 44px;
            }

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

            .faq-item {
                border-radius: 20px;
            }

            .faq-list {
                gap: 6px;
            }

            .faq-body.open {
                max-height: 300px;
                padding: 0 36px 28px;
            }

            .faq-left p {
                font-size: 18px;
                margin-top: 22px;
            }

            .section-label {
                font-size: clamp(24px, 1.8vw, 32px);
                letter-spacing: 4px;
                margin-bottom: 18px;
            }

            /* Contact */
            .contact-section {
                padding: 200px 0 0;
            }

            .contact-info {
                margin-bottom: 100px;
            }

            .contact-info h2 {
                font-size: clamp(48px, 5.5vw, 120px);
                margin-bottom: 32px;
            }

            .contact-info p {
                font-size: 24px;
                max-width: 1050px;
                line-height: 1.7;
            }

            .contact-form {
                padding: 140px 10%;
            }

            .form-row {
                gap: 36px;
                margin-bottom: 36px;
            }

            .form-group {
                gap: 12px;
            }

            .form-group label {
                font-size: 14px;
                letter-spacing: 1.5px;
            }

            .form-input {
                padding: 22px 28px;
                font-size: 18px;
                border-radius: 16px;
            }

            .btn-form {
                padding: 24px;
                font-size: 19px;
                border-radius: 16px;
                margin-top: 16px;
            }


            /* Mobile Menu (hidden on large screens but scale just in case) */
            .mobile-menu {
                top: 130px;
            }

            /* Scroll Animations */
            .fade-up {
                transform: translateY(40px);
            }

            .slide-l {
                transform: translateX(-48px);
            }

            .slide-r {
                transform: translateX(48px);
            }
        }

        /* Form Validation */
        .field-error-msg {
            display: block;
            color: var(--red);
            font-size: 13px;
            margin-top: 4px;
            min-height: 20px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        .form-input.is-err+.field-error-msg {
            opacity: 1;
        }

        .form-input.is-err {
            border-color: var(--red) !important;
        }

        .form-input.is-good {
            border-color: green !important;
        }