/* * DESIGN SYSTEM & THEME CONFIGURATION
         */
        :root {
            --primary: #91C75E;
            --secondary: #7A588D;
            --bg: #F5F5F5;
            --dark: #1A202C;
            --surface: #FFFFFF;

            --font-sans: 'Inter', sans-serif;
            --font-doodle: 'Caveat', cursive;
        }

        body {
            background-color: var(--bg);
            color: var(--dark);
            font-family: var(--font-sans);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        /* Typography Utilities */
        .font-doodle { font-family: var(--font-doodle); }
        .text-primary { color: var(--primary) !important; }
        .text-secondary { color: var(--secondary) !important; }
        .text-dark { color: var(--dark) !important; }
        .text-white { color: #fff !important; }
        .text-gray-700 { color: #374151; }
        .text-gray-600 { color: #4B5563; }
        .text-gray-300 { color: #D1D5DB; }
        .font-medium { font-weight: 500; }

        .text-5xl { font-size: 3rem; }
        .text-6xl { font-size: 3.75rem; }
        @media (min-width: 992px) {
            .text-7xl { font-size: 4.5rem; }
            .text-8xl { font-size: 6rem; }
            .lg-text-6xl { font-size: 3.75rem; }
        }

        /* Background & Border Utilities */
        .bg-primary { background-color: var(--primary) !important; }
        .bg-secondary { background-color: var(--secondary) !important; }
        .bg-dark { background-color: var(--dark) !important; }
        .bg-white { background-color: #fff !important; }
        .bg-bg { background-color: var(--bg) !important; }

        .border-4-dark { border: 4px solid var(--dark); }
        .border-4-white { border: 4px solid #fff; }
        .border-y-4-dark { border-top: 4px solid var(--dark); border-bottom: 4px solid var(--dark); }
        .border-t-4-dark { border-top: 4px solid var(--dark); }

        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 12px; }
        ::-webkit-scrollbar-track { background: var(--bg); border-left: 2px solid var(--dark); }
        ::-webkit-scrollbar-thumb { background: var(--primary); border: 2px solid var(--dark); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--secondary); }

        /* Doodle Borders & Shadows - The core of the aesthetic */
        .doodle-border {
            border: 3px solid var(--dark);
            /*border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;*/
        }

       /* .doodle-border-alt {
            border: 3px solid var(--dark);
            border-radius: 15px 225px 15px 255px/255px 15px 225px 15px;
        }*/

        .doodle-border-round {
            border: 3px solid var(--dark);
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        }

        .shadow-hard-dark { box-shadow: 6px 6px 0px 0px var(--dark); }
        .shadow-hard-primary { box-shadow: 6px 6px 0px 0px var(--primary); }
        .shadow-hard-secondary { box-shadow: 6px 6px 0px 0px var(--secondary); }

        .hover-shadow-shift { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; }
        .hover-shadow-shift:hover { box-shadow: 2px 2px 0px 0px var(--dark); transform: translate(4px, 4px); }

        .hover-lift { transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .hover-lift:hover { transform: translateY(-8px); box-shadow: 8px 12px 0px 0px var(--primary); }

        /* Animations */
        @keyframes drawPath { to { stroke-dashoffset: 0; } }
        .animate-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawPath 3s ease forwards; }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-15px) rotate(2deg); }
        }
        .animate-float { animation: float 6s ease-in-out infinite; }

        @keyframes wiggle {
            0%, 100% { transform: rotate(-3deg); }
            50% { transform: rotate(3deg); }
        }
        .animate-wiggle { animation: wiggle 3s ease-in-out infinite; }

        @keyframes spinSlow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .animate-spin-slow { animation: spinSlow 20s linear infinite; }

        @keyframes customPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: .5; }
        }
        .animate-pulse-custom { animation: customPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

        /* SVG Background Patterns */
        .bg-pattern-dots {
            background-image: radial-gradient(var(--dark) 1.5px, transparent 1.5px);
            background-size: 30px 30px;
            opacity: 0.05;
        }

        /* Layout & Spacing Utilities */
        .section-padding { padding-top: 6rem; padding-bottom: 6rem; }
        .hero-padding { padding-top: 10rem; padding-bottom: 7rem; }

        .z-n1 { z-index: -1; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }
        .z-30 { z-index: 30; }

        .cursor-pointer { cursor: pointer; }

        /* * SPECIFIC COMPONENT INTERACTIONS
         */

        /* Hero: Bridging the Gap Interaction */
        .bridge-diorama-container .diorama-bg { transition: transform 0.7s, box-shadow 0.7s; }
        .bridge-diorama-container:hover .diorama-bg { transform: rotate(1deg); box-shadow: 12px 12px 0px 0px var(--primary); }

        .bridge-diorama-container .pin-primary { transition: transform 0.3s; }
        .bridge-diorama-container:hover .pin-primary { transform: scale(1.1); }

        .bridge-diorama-container .pin-secondary { transition: transform 0.3s; }
        .bridge-diorama-container:hover .pin-secondary { transform: rotate(-12deg); }

        .bridge-diorama-container .storm-layer { transition: all 0.7s ease-in-out; transform-origin: top; opacity: 1; transform: translateY(0) scale(1); }
        .bridge-diorama-container:hover .storm-layer { opacity: 0; transform: translateY(-40px) scale(0.9); }

        .bridge-diorama-container .sun-layer { opacity: 0; transform: translateY(50px) scale(0.75); transition: all 1s cubic-bezier(0.34,1.56,0.64,1) 0.2s; transform-origin: center; }
        .bridge-diorama-container:hover .sun-layer { opacity: 1; transform: translateY(0) scale(1); }

        .bridge-diorama-container .bridge-layer { opacity: 0; transition: opacity 0.7s 0.3s; }
        .bridge-diorama-container:hover .bridge-layer { opacity: 1; }

        .bridge-diorama-container .bridge-plank { opacity: 0; transform: translateY(-40px); transition: all 0.3s; }
        .bridge-diorama-container:hover .bridge-plank { opacity: 1; transform: translateY(0); }
        .bridge-diorama-container:hover .plank-1 { transition-delay: 400ms; }
        .bridge-diorama-container:hover .plank-2 { transition-delay: 500ms; }
        .bridge-diorama-container:hover .plank-3 { transition-delay: 600ms; }
        .bridge-diorama-container:hover .plank-4 { transition-delay: 700ms; }
        .bridge-diorama-container:hover .plank-5 { transition-delay: 800ms; }

        .bridge-diorama-container .partner-1 { transition: transform 1s ease-in-out; transform: translateX(0); }
        .bridge-diorama-container:hover .partner-1 { transform: translateX(3rem); }

        .bridge-diorama-container .partner-2 { transition: transform 1s ease-in-out; transform: translateX(0); }
        .bridge-diorama-container:hover .partner-2 { transform: translateX(-3rem); }
        /* Interactive Label */
        .bridge-diorama-container .diorama-label { transition: all 0.3s; transform: translate(-50%, 0); }
        .bridge-diorama-container:hover .diorama-label { transform: translate(-50%, -12px) scale(1.1); box-shadow: 8px 8px 0px 0px var(--secondary); }

        /* Quiz Card Interactions - Redesigned for Reveal */
        .quiz-card { transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .quiz-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 8px 12px 0px 0px var(--dark); }
        .quiz-card.selected { background-color: var(--primary) !important; box-shadow: 2px 2px 0px 0px var(--dark); transform: translateY(4px) rotate(0deg); }

        .expandable-content { max-height: 0; opacity: 0; overflow: hidden; transition: all 0.4s ease; transform: translateY(-10px); }
        .quiz-card.selected .expandable-content { max-height: 250px; opacity: 1; transform: translateY(0); margin-top: 0.5rem; }

        .reveal-hint { transition: opacity 0.2s, max-height 0.2s; max-height: 50px; opacity: 1; overflow: hidden; margin-top: 0.75rem; }
        .quiz-card.selected .reveal-hint { opacity: 0; max-height: 0; margin-top: 0; }

        /* FAQ Styling */
        /*.faq-btn { border: none; background: transparent; transition: background-color 0.2s; text-align: left; }
        .faq-btn:hover { background-color: rgba(0,0,0,0.03); }
        .faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out; opacity: 0; }
        .faq-content.open { max-height: 500px; opacity: 1; }
        .faq-icon { transition: transform 0.3s ease; }*/

        /* Utility classes for precise positioning */
        .absolute-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

      /* Modern Structural Utilities */
        .neo-card { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); background: var(--surface); }
        .neo-card:hover { transform: translate(-4px, -8px); box-shadow: 12px 12px 0px 0px var(--dark); }

        /* Interactive Flashcards */
        .flashcard { cursor: pointer; position: relative; overflow: hidden; }
        .flashcard .flash-answer { max-height: 0; opacity: 0; transition: all 0.4s ease; transform: translateY(10px); }
        .flashcard.active { background-color: var(--primary); border-color: var(--dark); }
        .flashcard.active .flash-answer { max-height: 200px; opacity: 1; transform: translateY(0); margin-top: 1rem; }
        .flashcard.active .flash-hint { display: none; }

        /* Marquee Animation */
        .marquee-container { overflow: hidden; white-space: nowrap; border-top: 4px solid var(--dark); border-bottom: 4px solid var(--dark); background: var(--primary); padding: 1rem 0; }
        .marquee-content { display: inline-block; animation: marquee 25s linear infinite; }
        @keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        /* Duality Badge */
        .duality-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 20; }
        @media (max-width: 991px) {
            .duality-badge { top: auto; bottom: -2.5rem; transform: translateX(-50%); }
        }

        /* Minimalist Accordion */
  /*      .faq-row { border-bottom: 4px solid var(--dark); transition: background-color 0.3s ease; }
        .faq-row:hover { background-color: rgba(145, 199, 94, 0.1); }
        .faq-row.active { background-color: rgba(145, 199, 94, 0.2); }
        .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out, padding 0.4s ease; opacity: 0; }
        .faq-row.active .faq-answer { max-height: 300px; padding-bottom: 1.5rem; opacity: 1; }
        .faq-icon-svg { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .faq-row.active .faq-icon-svg { transform: rotate(135deg); stroke: var(--primary); }*/


        /* Stamp Cards (Reality Check) */
        .stamp-card { cursor: pointer; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .stamp-card:hover { transform: translateY(-8px); box-shadow: 10px 10px 0px 0px var(--dark); }
        .stamp-mark { position: absolute; font-family: var(--font-doodle); font-size: 3.5rem; color: #FF4757; border: 4px solid #FF4757; padding: 0 1rem; border-radius: 8px; transform: rotate(-20deg) scale(2); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none; top: 50%; left: 50%; margin-top: -35px; margin-left: -60px; background: rgba(255,255,255,0.85); z-index: 10; font-weight: bold; }
        .stamp-card.active .stamp-mark { opacity: 1; transform: rotate(-15deg) scale(1); box-shadow: 4px 4px 0px 0px rgba(255, 71, 87, 0.3); }
        .stamp-card.active { border-color: #FF4757; background-color: #FFF5F5 !important; }

        /* Domino Stack (Unresolved) */
        .domino-card { transition: all 0.4s ease; }
        .domino-card:hover { transform: translateY(-10px) rotate(0deg) !important; z-index: 40 !important; }
        @media (min-width: 992px) {
            .domino-container { display: flex; align-items: flex-start; justify-content: center; }
            .domino-1 { z-index: 30; }
            .domino-2 { z-index: 20; margin-left: -30px; margin-top: 60px; transform: rotate(3deg); }
            .domino-3 { z-index: 10; margin-left: -30px; margin-top: 120px; transform: rotate(6deg); }
        }

        /* Taped Notes (Right For You) */
        .css-tape { position: absolute; width: 140px; height: 35px; background: rgba(255, 255, 255, 0.5); border: 2px solid rgba(0,0,0,0.05); border-left: none; border-right: none; backdrop-filter: blur(4px); z-index: 20; box-shadow: 0 2px 4px rgba(0,0,0,0.05); top: -15px; left: 50%; transform: translateX(-50%) rotate(-3deg); mix-blend-mode: hard-light; }
        .css-tape::before, .css-tape::after { content: ''; position: absolute; top: -2px; bottom: -2px; width: 4px; background: transparent; border-left: 2px dashed rgba(0,0,0,0.1); }
        .css-tape::before { left: 0; }
        .css-tape::after { right: 0; }

        /* Tangled Thread (Before & After) */
        .chaotic-blob { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; animation: morph 8s ease-in-out infinite; }
        .calm-blob { border-radius: 50%; }
        @keyframes morph {
            0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
            34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
            67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
        }

        /* File Cabinet FAQ */
        .file-folder { border-radius: 0 15px 15px 15px; margin-top: 35px; transition: all 0.3s ease; }
        .folder-tab { position: absolute; top: -35px; left: -4px; height: 39px; padding: 5px 25px; border-radius: 15px 15px 0 0; border-bottom: none !important; cursor: pointer; transition: background-color 0.3s; font-family: var(--font-doodle); font-size: 1.5rem; font-weight: bold; }
        .file-folder.active { background-color: var(--primary) !important; transform: translateX(10px); box-shadow: 8px 8px 0px 0px var(--dark) !important; }
        .file-folder.active .folder-tab { background-color: var(--primary) !important; }
        .folder-content { max-height: 0; overflow: hidden; transition: all 0.4s ease; opacity: 0; }
        .file-folder.active .folder-content { max-height: 300px; opacity: 1; padding-top: 1rem; }

        /* Postcard Booking */
        .postcard-dashed-line { border-right: 4px dashed var(--dark); }
        @media (max-width: 991px) { .postcard-dashed-line { border-right: none; border-bottom: 4px dashed var(--dark); } }
        .input-postcard { border: none; border-bottom: 3px solid var(--dark); background: transparent; border-radius: 0; padding: 0.5rem 0; font-family: var(--font-doodle); font-size: 1.5rem; color: var(--secondary); box-shadow: none !important; }
        .input-postcard::placeholder { color: #A0AEC0; }



         /* Clean, Decent Interactive Cards */
        .audience-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-left: 6px solid var(--dark);
        }
        .audience-card:hover {
            transform: translateX(12px);
            box-shadow: 6px 6px 0px 0px var(--primary);
        }

        .science-card {
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .science-card:hover {
            transform: translateY(-6px);
            box-shadow: 6px 6px 0px 0px var(--secondary);
            z-index: 10;
        }