:root {
      --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    html { font-size: 17px; scroll-padding-top: 8rem; }
    body {
      line-height: 1.6;
      background-color: #051020;
      color: #F4F7FB;
      font-family: 'Inter', sans-serif;
      overflow-x: hidden;
    }

    /* Custom Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }
    ::-webkit-scrollbar-track {
      background: #040B16;
    }
    ::-webkit-scrollbar-thumb {
      background: #1B3B6B;
      border-radius: 4px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: #C88A3B;
    }

    /* Glassmorphism Tokens */
    .glass-panel {
      background: rgba(10, 28, 54, 0.65);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }

    .glass-pill {
      background: rgba(5, 16, 32, 0.78);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(200, 138, 59, 0.25);
      box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 242, 254, 0.08);
    }

    .bento-card {
      background: linear-gradient(165deg, rgba(17, 42, 78, 0.55) 0%, rgba(5, 16, 32, 0.85) 100%);
      border: 1px solid rgba(255, 255, 255, 0.08);
      transition: all 0.45s var(--ease-out-expo);
      position: relative;
      overflow: hidden;
    }
    .bento-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(0, 242, 254, 0.09), transparent 40%);
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
    }
    .bento-card:hover::before {
      opacity: 1;
    }
    .bento-card:hover {
      transform: translateY(-4px);
      border-color: rgba(200, 138, 59, 0.45);
      box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 25px rgba(200, 138, 59, 0.15);
    }

    /* Animated Data Flow Line */
    @keyframes pulseFlow {
      0% { stroke-dashoffset: 100; }
      100% { stroke-dashoffset: 0; }
    }
    .flow-line {
      stroke-dasharray: 8 6;
      animation: pulseFlow 3.5s linear infinite;
    }

    @keyframes floatSlow {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-8px); }
    }
    .animate-float {
      animation: floatSlow 5s ease-in-out infinite;
    }

    /* Node active glow */
    .loop-node {
      transition: all 0.35s var(--ease-spring);
      cursor: pointer;
    }
    .loop-node circle { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease-spring), fill .3s; }
    .loop-node.active, .loop-node:hover {
      filter: drop-shadow(0 0 16px rgba(0, 242, 254, 0.65));
    }
    .loop-node.active circle, .loop-node:hover circle { transform: scale(1.14); fill: #112A4E; }
    #main-header a, #main-header button { white-space: nowrap; }

    /* Capstone Node States */
    .cap-node {
      transition: all 0.3s var(--ease-out-expo);
      cursor: pointer;
    }
    .cap-node.highlighted {
      border-color: #00F2FE !important;
      background: rgba(0, 242, 254, 0.14) !important;
      box-shadow: 0 0 20px rgba(0, 242, 254, 0.25);
      transform: translateY(-2px);
    }
    .cap-node.dependency {
      border-color: #C88A3B !important;
      background: rgba(200, 138, 59, 0.15) !important;
      box-shadow: 0 0 15px rgba(200, 138, 59, 0.2);
    }
    .cap-node.dimmed {
      opacity: 0.35;
    }

    /* Megamenu transition */
    #megamenu {
      transition: opacity 0.3s var(--ease-out-expo), transform 0.3s var(--ease-out-expo), visibility 0.3s;
    }

    /* ===== Reference-inspired system additions ===== */
    .hl { background-image: linear-gradient(transparent 62%, rgba(242,188,0,.45) 62%); padding: 0 .12em; }
    .reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease-out-expo), transform .8s var(--ease-out-expo); }
    .reveal.in { opacity: 1; transform: none; }

    /* Tool marquee (Digital Vidya / DIDM logo wall) */
    .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
    .marquee-track { display: flex; gap: .75rem; width: max-content; animation: marq 55s linear infinite; }
    .marquee-track.rev { animation-direction: reverse; animation-duration: 65s; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    @keyframes marq { to { transform: translateX(-50%); } }
    .tool-chip { filter: grayscale(1); opacity: .72; transition: all .35s var(--ease-out-expo); }
    .tool-chip:hover { filter: none; opacity: 1; transform: translateY(-2px); }

    /* FAQ accordion */
    details.faq > summary { list-style: none; cursor: pointer; }
    details.faq > summary::-webkit-details-marker { display: none; }
    details.faq[open] .faq-plus { transform: rotate(45deg); }
    .faq-plus { transition: transform .3s var(--ease-spring); }

    /* Program cards */
    .program-card { transition: all .45s var(--ease-out-expo); }
    .program-card:hover { transform: translateY(-6px); border-color: #C88A3B; box-shadow: 0 28px 50px -18px rgba(10,28,54,.28), 0 0 0 1px rgba(200,138,59,.35); }
    .program-card:hover .program-thumb { transform: scale(1.04); }
    .program-thumb { transition: transform .6s var(--ease-out-expo); }

    /* ===== Light band theme (alternating dark/light rhythm: Digital Vidya, Eduko, Internshala) ===== */
    section.theme-light { background: #F0F5FA; color: #0A1C36; border-color: rgba(10,28,54,.08); }
    .theme-light .text-white { color: #0A1C36; }
    .theme-light .text-slate-200, .theme-light .text-slate-300 { color: #334155; }
    .theme-light .text-slate-400 { color: #475569; }
    .theme-light .text-slate-500 { color: #64748B; }
    .theme-light .text-gold-300, .theme-light .text-gold-400 { color: #935E1B; }
    .theme-light .text-cyan-300, .theme-light .text-cyan-400 { color: #0B6BCB; }
    .theme-light .text-emerald-200, .theme-light .text-emerald-300, .theme-light .text-emerald-400 { color: #047857; }
    .theme-light .group:hover .group-hover\:text-cyan-400, .theme-light .group-hover\:text-cyan-400:hover { color: #0B6BCB; }
    .theme-light .hover\:text-white:hover { color: #0A1C36; }
    .theme-light .bg-navy-950, .theme-light .bg-navy-950\/90, .theme-light .bg-navy-950\/80, .theme-light .bg-navy-950\/70, .theme-light .bg-navy-900\/90, .theme-light .bg-navy-900\/80 { background-color: #FFFFFF; }
    .theme-light .bg-white\/5 { background-color: rgba(10,28,54,.04); }
    .theme-light .border-white\/5, .theme-light .border-white\/10, .theme-light .border-white\/15 { border-color: rgba(10,28,54,.12); }
    .theme-light .glass-panel { background: #FFFFFF; backdrop-filter: none; border: 1px solid rgba(10,28,54,.1); box-shadow: 0 18px 40px -22px rgba(10,28,54,.25); }
    .theme-light .bento-card { background: #FFFFFF; border: 1px solid rgba(10,28,54,.1); }
    .theme-light .bento-card:hover { box-shadow: 0 24px 48px -20px rgba(10,28,54,.28), 0 0 0 1px rgba(200,138,59,.35); }
    .theme-light .cap-node.highlighted { border-color: #0B6BCB !important; background: rgba(11,107,203,.1) !important; box-shadow: 0 0 0 3px rgba(11,107,203,.12); }
    .theme-light .cap-node.dependency { border-color: #C88A3B !important; background: rgba(200,138,59,.14) !important; }
    .theme-light .text-transparent.bg-gold-gradient { background-image: linear-gradient(135deg, #B87A28, #935E1B); }

    .theme-light .text-cyan-400\/80 { color: #0B6BCB; }
    .theme-light .cap-node.dimmed { opacity: .55; }
    @media (max-width: 1023px) { body { padding-bottom: 64px; } }
  
    /* ===== LIGHT HEADER (multi-page layout) ===== */
    #main-header { transition: top .4s var(--ease-out-expo); }
    #main-header.scrolled { top: .75rem; }
    .header-light { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
      border: 1px solid rgba(200,138,59,.35); box-shadow: 0 18px 40px -16px rgba(5,16,32,.45), 0 0 0 4px rgba(255,255,255,.06);
      transition: all .4s var(--ease-out-expo); }
    #main-header.scrolled .header-light { background: rgba(255,255,255,.97); }
    .nav-link { padding: .55rem .95rem; border-radius: 9999px; font-size: .92rem; font-weight: 500; color: #334155; transition: all .25s; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
    .nav-link:hover { background: rgba(10,28,54,.06); color: #0A1C36; }
    .nav-link.active { color: #0A1C36; background: rgba(200,138,59,.18); font-weight: 600; }
    #megamenu { background: #fff; color: #0A1C36; border: 1px solid rgba(200,138,59,.35); box-shadow: 0 40px 80px -30px rgba(5,16,32,.55); }
    #mobile-menu { background: #fff; border: 1px solid rgba(200,138,59,.35); }
    .mm-link { color: #0A1C36; }
    .mm-link:hover, .mm-link.active { background: rgba(200,138,59,.14); }
    .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(700px circle at 85% 20%, rgba(0,242,254,.10), transparent 60%), radial-gradient(600px circle at 5% 90%, rgba(200,138,59,.12), transparent 60%); pointer-events: none; }
    .field { width: 100%; padding: .85rem 1rem; border-radius: .9rem; background: #fff; border: 1px solid rgba(10,28,54,.18); color: #0A1C36; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
    .field:focus { outline: none; border-color: #C88A3B; box-shadow: 0 0 0 4px rgba(200,138,59,.18); }
    .field-dark { background: #051020; border-color: rgba(255,255,255,.15); color: #fff; }
    .field-dark:focus { border-color: #00F2FE; box-shadow: 0 0 0 4px rgba(0,242,254,.15); }

    /* =====================================================================
       EDUKO TEMPLATE COLOR SCHEME UPGRADE
       Reference: https://wpocean.com/html/tf/eduko/index.html
       Palette:
         - Primary Royal Indigo : #4540E1 (Pastel: #EEEDFC)
         - Sunny Marigold Yellow: #F2BC00 (Pastel: #FCF9EF / #FFF8E0)
         - Coral Pink           : #F9406C (Pastel: #FFEDF1 / #FFF8F9)
         - Mint Emerald Green   : #15A280 (Pastel: #EEF9F6 / #E5F8F3)
         - Vivid Orange         : #FF4C27
         - Deep Violet-Ink      : #1A1729 (Headings & Footer)
         - Slate-Violet Body    : #625F71 (Body copy)
       ===================================================================== */
    body {
      background-color: #FFFFFF !important;
      color: #625F71 !important;
      font-family: 'Urbanist', 'Plus Jakarta Sans', sans-serif !important;
    }
    h1, h2, h3, h4, h5, h6, .font-display {
      font-family: 'Urbanist', 'Plus Jakarta Sans', sans-serif !important;
    }

    /* Hide dark-mode ambient glow overlay so Eduko pastel surfaces shine cleanly */
    body > div.fixed.inset-0.pointer-events-none {
      opacity: 0.15 !important;
      background: radial-gradient(circle at 15% 15%, #EEF9F6 0%, transparent 50%), radial-gradient(circle at 85% 80%, #FCF9EF 0%, transparent 50%) !important;
    }

    /* Header in Eduko style */
    .header-light {
      background: rgba(255, 255, 255, 0.96) !important;
      border: 1px solid #EBEBEB !important;
      box-shadow: 0 10px 30px rgba(26, 23, 41, 0.08) !important;
    }
    .nav-link {
      color: #1A1729 !important;
      font-weight: 600 !important;
    }
    .nav-link:hover {
      background: #EEEDFC !important;
      color: #4540E1 !important;
    }
    .nav-link.active {
      background: #4540E1 !important;
      color: #FFFFFF !important;
      font-weight: 700 !important;
    }

    /* Eduko Hero Section: Soft Mint-Aqua (#EEF9F6) with rounded card frame */
    #hero, section.page-hero {
      background: linear-gradient(180deg, #EEF9F6 0%, #F6FBF9 65%, #FFFFFF 100%) !important;
      color: #625F71 !important;
      border-bottom: 1px solid #E2F2EC !important;
    }
    section.page-hero::before {
      background: radial-gradient(650px circle at 88% 22%, rgba(69, 64, 225, 0.08), transparent 60%),
                  radial-gradient(550px circle at 8% 85%, rgba(242, 188, 0, 0.14), transparent 60%) !important;
    }

    /* Alternating Eduko Section Backgrounds: Warm Cream (#FCF9EF), Soft Blush (#FFF8F9) & Crisp White (#FFFFFF) */
    #social-media-studio, #pillars, #explore, #philosophy, #included {
      background: #FCF9EF !important;
      border-color: #EFE8D4 !important;
    }
    #differentiator, #labs, #pathways, #apply {
      background: #FFF8F9 !important;
      border-color: #F8E5E9 !important;
    }
    #impact, #stack, #programs, #capstone, #journey, #faq, #reach, #loop {
      background: #FFFFFF !important;
      border-color: #EBEBEB !important;
    }

    /* Convert all content sections (except the Royal Indigo Banner & Footer) to Eduko Light Typography & Cards */
    main section:not(#iidia-infographic-banner) {
      color: #625F71;
    }
    main section:not(#iidia-infographic-banner) h1,
    main section:not(#iidia-infographic-banner) h2,
    main section:not(#iidia-infographic-banner) h3,
    main section:not(#iidia-infographic-banner) h4,
    main section:not(#iidia-infographic-banner) .text-white {
      color: #1A1729 !important;
    }
    main section:not(#iidia-infographic-banner) .text-slate-200,
    main section:not(#iidia-infographic-banner) .text-slate-300,
    main section:not(#iidia-infographic-banner) .text-slate-400 {
      color: #625F71 !important;
    }
    main section:not(#iidia-infographic-banner) .text-slate-500 {
      color: #7B788B !important;
    }

    /* Eduko Vibrant Accent Colors for Text & Badges */
    main section:not(#iidia-infographic-banner) .text-cyan-300,
    main section:not(#iidia-infographic-banner) .text-cyan-400 {
      color: #4540E1 !important;
    }
    main section:not(#iidia-infographic-banner) .text-gold-300,
    main section:not(#iidia-infographic-banner) .text-gold-400 {
      color: #D98A00 !important;
    }
    main section:not(#iidia-infographic-banner) .text-pink-300,
    main section:not(#iidia-infographic-banner) .text-pink-400 {
      color: #F9406C !important;
    }
    main section:not(#iidia-infographic-banner) .text-emerald-300,
    main section:not(#iidia-infographic-banner) .text-emerald-400 {
      color: #15A280 !important;
    }

    /* Eduko Gradient Headlines */
    .bg-gold-gradient {
      background-image: linear-gradient(135deg, #F2BC00 0%, #FFA800 100%) !important;
    }
    main section:not(#iidia-infographic-banner) .text-transparent.bg-clip-text.bg-gold-gradient {
      background-image: linear-gradient(135deg, #4540E1 0%, #F9406C 100%) !important;
      color: transparent !important;
    }
    main section:not(#iidia-infographic-banner) .text-transparent.bg-clip-text.bg-cyan-gradient {
      background-image: linear-gradient(135deg, #15A280 0%, #4540E1 100%) !important;
      color: transparent !important;
    }

    /* Eduko Crisp White Cards (.glass-panel & .bento-card) */
    main section:not(#iidia-infographic-banner) .glass-panel,
    main section:not(#iidia-infographic-banner) .bento-card {
      background: #FFFFFF !important;
      backdrop-filter: none !important;
      border: 1px solid #EAE7F2 !important;
      box-shadow: 0 10px 30px rgba(26, 23, 41, 0.06) !important;
    }
    main section:not(#iidia-infographic-banner) .bento-card:hover,
    main section:not(#iidia-infographic-banner) .glass-panel:hover {
      border-color: #4540E1 !important;
      box-shadow: 0 18px 40px rgba(69, 64, 225, 0.14) !important;
    }

    /* Top 4-Domain Banner Container inside Hero -> Eduko White + Pastel Cards */
    #hero > div > div.mb-12 {
      background: #FFFFFF !important;
      border: 2px solid #E2F2EC !important;
      box-shadow: 0 16px 40px rgba(21, 162, 128, 0.09) !important;
    }
    #hero > div > div.mb-12 .grid > a:nth-child(1) {
      background: #EEEDFC !important;
      border-color: rgba(69, 64, 225, 0.25) !important;
    }
    #hero > div > div.mb-12 .grid > a:nth-child(2) {
      background: #FFEDF1 !important;
      border-color: rgba(249, 64, 108, 0.25) !important;
    }
    #hero > div > div.mb-12 .grid > a:nth-child(3) {
      background: #FCF9EF !important;
      border-color: rgba(242, 188, 0, 0.45) !important;
    }
    #hero > div > div.mb-12 .grid > a:nth-child(4) {
      background: #EEF9F6 !important;
      border-color: rgba(21, 162, 128, 0.3) !important;
    }
    #hero > div > div.mb-12 .grid > a:hover {
      transform: translateY(-4px);
      box-shadow: 0 14px 28px rgba(26, 23, 41, 0.1) !important;
    }

    /* Inner dark boxes inside light sections -> Soft Eduko Pastel Tints */
    main section:not(#iidia-infographic-banner) .bg-navy-950,
    main section:not(#iidia-infographic-banner) .bg-navy-950\/90,
    main section:not(#iidia-infographic-banner) .bg-navy-950\/80,
    main section:not(#iidia-infographic-banner) .bg-navy-950\/70,
    main section:not(#iidia-infographic-banner) .bg-navy-950\/60,
    main section:not(#iidia-infographic-banner) .bg-navy-900,
    main section:not(#iidia-infographic-banner) .bg-navy-900\/95,
    main section:not(#iidia-infographic-banner) .bg-navy-900\/90,
    main section:not(#iidia-infographic-banner) .bg-navy-900\/80 {
      background-color: #F7F6FC !important;
      border-color: #E4E1F0 !important;
    }
    main section:not(#iidia-infographic-banner) .bg-white\/5,
    main section:not(#iidia-infographic-banner) .bg-white\/10 {
      background-color: #EEEDFC !important;
      border-color: rgba(69, 64, 225, 0.2) !important;
      color: #1A1729 !important;
    }
    main section:not(#iidia-infographic-banner) .border-white\/5,
    main section:not(#iidia-infographic-banner) .border-white\/10,
    main section:not(#iidia-infographic-banner) .border-white\/15 {
      border-color: #E6E4F0 !important;
    }

    /* Form fields in Eduko light theme */
    main section:not(#iidia-infographic-banner) .field-dark {
      background: #FFFFFF !important;
      border: 1.5px solid #D8D5E6 !important;
      color: #1A1729 !important;
    }
    main section:not(#iidia-infographic-banner) .field-dark:focus {
      border-color: #4540E1 !important;
      box-shadow: 0 0 0 4px rgba(69, 64, 225, 0.12) !important;
    }

    /* Keep white text on colorful social icons, video mockups & primary buttons */
    .bg-\[\#4540E1\], .bg-\[\#FF0000\], .bg-\[\#1877F2\], .bg-\[\#25D366\], .bg-\[\#0A66C2\],
    #social-media-studio .h-64 * {
      color: #FFFFFF;
    }
    #social-media-studio .h-64 .text-navy-950,
    #social-media-studio .h-64 .text-navy-950 * {
      color: #1A1729 !important;
    }

    /* Hero 7-Step Wheel & Radar SVG adapted for Eduko Light Card */
    #hero-loop-svg circle[fill="#0A1C36"],
    #pillars-radar-svg polygon[fill="rgba(5, 16, 32, 0.85)"] {
      fill: #1A1729 !important;
    }
    #hero-loop-svg g.loop-node text,
    #hero-loop-svg text[fill="#FFFFFF"] {
      fill: #FFFFFF !important;
    }
    #hero-loop-svg circle[stroke="rgba(255,255,255,0.08)"],
    #hero-loop-svg g[stroke="rgba(255,255,255,0.1)"] {
      stroke: rgba(69, 64, 225, 0.22) !important;
    }

    /* Official IIDIA Banner Infographic styled in Eduko Royal Indigo (#4540E1) + Deep Ink (#1A1729) + Sunny Yellow (#F2BC00) */
    #iidia-infographic-banner {
      background: #FCF9EF !important;
    }
    #iidia-infographic-banner > div > div {
      background: linear-gradient(135deg, #4540E1 0%, #2E29A6 55%, #1A1729 100%) !important;
      border-color: #F2BC00 !important;
    }

    /* Eduko Footer (#1A1729 Deep Violet-Ink) */
    #footer {
      background: #1A1729 !important;
      border-top: 4px solid #F2BC00 !important;
    }

    .reveal { opacity: 1 !important; transform: none !important; }
    #program-filters button.bg-navy-800 { background-color: #4540E1 !important; color: #FFFFFF !important; }
    .program-card { border-color: #EBEBEB !important; box-shadow: 0 12px 32px rgba(26, 23, 41, 0.07) !important; }
    .program-card:hover { border-color: #4540E1 !important; box-shadow: 0 22px 45px rgba(69, 64, 225, 0.16) !important; }

    /* =====================================================================
       EDUFIT FONT STYLING & INTERNATIONAL DESIGN SYSTEM
       Reference: https://html.pixelfit.agency/edufit/home-online/index.html
       Fonts:
         - Heading Font : 'SUSE', sans-serif (wght 400..800)
         - Body Font    : 'Outfit', sans-serif (wght 300..900)
       Color Tokens:
         - Primary Purple/Indigo : #6255FA
         - Mint Emerald Green   : #14CF93
         - Accent Amber/Orange  : #FF8601
         - Deep Navy Black      : #06193A
         - Secondary Heading    : #212529
         - Body Slate Grey      : #55565B
         - Light Background     : #FCFCFF
         - Border Tone          : #EFEEFF
       ===================================================================== */
    :root {
      --primary-color: #6255FA;
      --secondary-color: #14CF93;
      --accent-color: #FF8601;
      --heading-color: #06193A;
      --text-color: #55565B;
      --gray-bg: #FCFCFF;
      --border-color: #EFEEFF;
      --heading-font: 'SUSE', -apple-system, BlinkMacSystemFont, sans-serif;
      --body-font: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
    }

    body {
      background-color: #FCFCFF !important;
      color: #55565B !important;
      font-family: 'Outfit', sans-serif !important;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3, h4, h5, h6, .font-display, .font-heading {
      font-family: 'SUSE', sans-serif !important;
      color: #06193A !important;
      letter-spacing: -0.02em !important;
    }

    /* EduFit Sub-Heading Pill Badges */
    .sub-heading, .ef-badge {
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.5rem !important;
      padding: 0.45rem 1.15rem !important;
      border-radius: 9999px !important;
      font-family: 'SUSE', sans-serif !important;
      font-size: 0.82rem !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      letter-spacing: 0.05em !important;
      background: rgba(98, 85, 250, 0.08) !important;
      border: 1px solid rgba(98, 85, 250, 0.22) !important;
      color: #6255FA !important;
    }

    /* EduFit Primary Button */
    .btn-edufit-primary {
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.75rem !important;
      padding: 0.95rem 2rem !important;
      border-radius: 9999px !important;
      background-color: #6255FA !important;
      color: #FFFFFF !important;
      font-family: 'SUSE', sans-serif !important;
      font-size: 1rem !important;
      font-weight: 700 !important;
      letter-spacing: -0.01em !important;
      transition: all 0.3s ease !important;
      box-shadow: 0 12px 28px rgba(98, 85, 250, 0.28) !important;
      cursor: pointer !important;
      border: none !important;
    }
    .btn-edufit-primary:hover {
      background-color: #4C3EF5 !important;
      transform: translateY(-2px) !important;
      box-shadow: 0 16px 36px rgba(98, 85, 250, 0.38) !important;
    }

    /* EduFit Secondary Button */
    .btn-edufit-secondary {
      display: inline-flex !important;
      align-items: center !important;
      gap: 0.65rem !important;
      padding: 0.95rem 1.85rem !important;
      border-radius: 9999px !important;
      background-color: #FFFFFF !important;
      color: #06193A !important;
      font-family: 'SUSE', sans-serif !important;
      font-size: 1rem !important;
      font-weight: 700 !important;
      border: 1.5px solid #EFEEFF !important;
      box-shadow: 0 6px 20px rgba(6, 25, 58, 0.05) !important;
      transition: all 0.3s ease !important;
      cursor: pointer !important;
    }
    .btn-edufit-secondary:hover {
      border-color: #6255FA !important;
      color: #6255FA !important;
      transform: translateY(-2px) !important;
    }

    /* EduFit Highlight Underline Brush Curve */
    .ef-hl-brush {
      position: relative;
      display: inline-block;
      white-space: nowrap;
    }
    .ef-hl-brush::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 9px;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 260 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 9.5C52 2.5 160 -1.5 258 7.5' stroke='%23FF8601' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      pointer-events: none;
    }

    /* EduFit Header Pill */
    .header-light {
      background: rgba(255, 255, 255, 0.96) !important;
      border: 1px solid #EFEEFF !important;
      box-shadow: 0 10px 30px rgba(6, 25, 58, 0.07) !important;
    }
    .nav-link {
      font-family: 'SUSE', sans-serif !important;
      font-weight: 600 !important;
      color: #06193A !important;
    }
    .nav-link:hover {
      background: rgba(98, 85, 250, 0.08) !important;
      color: #6255FA !important;
    }
    .nav-link.active {
      background: #6255FA !important;
      color: #FFFFFF !important;
      font-weight: 700 !important;
    }

    /* EduFit Light Cards (.glass-panel & .bento-card) */
    .glass-panel, .bento-card {
      background: #FFFFFF !important;
      backdrop-filter: none !important;
      border: 1px solid #EFEEFF !important;
      box-shadow: 0 10px 30px rgba(6, 25, 58, 0.05) !important;
    }
    .glass-panel:hover, .bento-card:hover {
      border-color: #6255FA !important;
      box-shadow: 0 18px 40px rgba(98, 85, 250, 0.12) !important;
    }

    /* EduFit Section Rhythms */
    #hero {
      background: linear-gradient(180deg, #F5F4FF 0%, #FAF9FE 60%, #FCFCFF 100%) !important;
      border-bottom: 1px solid #EFEEFF !important;
    }
    #social-media-studio, #pillars, #explore {
      background: #FFFFFF !important;
      border-color: #EFEEFF !important;
    }
    #differentiator, #labs, #pathways {
      background: #FAF9FE !important;
      border-color: #EFEEFF !important;
    }
    #impact, #stack, #programs, #capstone, #faq {
      background: #FFFFFF !important;
      border-color: #EFEEFF !important;
    }

    /* Ensure text within all main sections is crisp and dark */
    main section:not(#iidia-infographic-banner) {
      color: #55565B;
    }
    main section:not(#iidia-infographic-banner) h1,
    main section:not(#iidia-infographic-banner) h2,
    main section:not(#iidia-infographic-banner) h3,
    main section:not(#iidia-infographic-banner) h4,
    main section:not(#iidia-infographic-banner) .text-white {
      color: #06193A !important;
    }
    main section:not(#iidia-infographic-banner) .text-slate-200,
    main section:not(#iidia-infographic-banner) .text-slate-300,
    main section:not(#iidia-infographic-banner) .text-slate-400 {
      color: #55565B !important;
    }

    /* Inner dark boxes -> EduFit soft violet-tint cards */
    main section:not(#iidia-infographic-banner) .bg-navy-950,
    main section:not(#iidia-infographic-banner) .bg-navy-950\/90,
    main section:not(#iidia-infographic-banner) .bg-navy-950\/80,
    main section:not(#iidia-infographic-banner) .bg-navy-950\/70,
    main section:not(#iidia-infographic-banner) .bg-navy-900 {
      background-color: #F8F7FF !important;
      border-color: #EFEEFF !important;
    }

    /* Reveal and animations */
    .reveal { opacity: 1 !important; transform: none !important; }

    /* Program cards */
    #program-filters button.bg-navy-800 { background-color: #6255FA !important; color: #FFFFFF !important; }
    .program-card { border-color: #EFEEFF !important; box-shadow: 0 10px 30px rgba(6, 25, 58, 0.05) !important; }
    .program-card:hover { border-color: #6255FA !important; box-shadow: 0 20px 42px rgba(98, 85, 250, 0.15) !important; }

    /* Preserve white text on official social icons and video mockups */
    .bg-\[\#4540E1\], .bg-\[\#6255FA\], .bg-\[\#FF0000\], .bg-\[\#1877F2\], .bg-\[\#25D366\], .bg-\[\#0A66C2\],
    #social-media-studio .h-64 * {
      color: #FFFFFF !important;
    }
    #social-media-studio .h-64 .text-navy-950,
    #social-media-studio .h-64 .text-navy-950 * {
      color: #06193A !important;
    }

    /* Official IIDIA Banner Infographic in EduFit Royal Purple */
    #iidia-infographic-banner {
      background: #FAF9FE !important;
    }
    #iidia-infographic-banner > div > div {
      background: linear-gradient(135deg, #6255FA 0%, #4437B8 55%, #06193A 100%) !important;
      border-color: #FF8601 !important;
    }

    /* EduFit Footer (#06193A) */
    #footer {
      background: #06193A !important;
      border-top: 4px solid #6255FA !important;
    }