/* ── TOKENS ──────────────────────────────────── */
    :root {
      --ink:      #0B0E17;
      --slate:    #161926;
      --mid:      #252A3A;
      --accent:   #8B0000;       /* CivilEra orange – matches logo recolor */
      --accent2:  #B22222;
      --blue:     #2563EB;
      --surface:  #F6F7FA;
      --border:   #E3E6EF;
      --border-strong: #C6CBDA;
      --muted:    #6B7280;
      --ff-h:     'Sora', 'DM Sans', system-ui, sans-serif;
      --ff-b:     'DM Sans', system-ui, sans-serif;
    }
    /* logo on dark bg → white */
    .logo-dark { filter: brightness(0) invert(1); }
    /* logo on light/white bg → dark red (#8B0000) */
    .logo-light {
      filter: brightness(0) saturate(100%)
              invert(10%) sepia(90%) saturate(700%)
              hue-rotate(340deg) brightness(85%) contrast(120%);
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
      *{box-sizing:border-box;}

    html{scroll-behavior:smooth}
    body{font-family:var(--ff-b);color:var(--ink);background:#fff;overflow-x:hidden;
      font-family:var(--ff-b);
    background:var(--surface);
    color:var(--ink);
    }

    /* ── TOP BAR ─────────────────────────────────── */
    .topbar{background:var(--accent);padding:.4rem 0}
    .topbar a{color:#fff;font-size:.8rem;font-weight:500;text-decoration:none;opacity:.92}
    .topbar a:hover{opacity:1}
    .topbar-divider{width:1px;height:14px;background:rgba(255,255,255,.35);display:inline-block;margin:0 .75rem;vertical-align:middle}
    @media(max-width:575.98px){
      .topbar .container{flex-wrap:wrap;justify-content:center;row-gap:.25rem}
      .topbar a{font-size:.72rem}
      .topbar-divider{margin:0 .5rem}
    }

    /* ── NAVBAR ──────────────────────────────────── */
    .navbar{
      background:rgba(255,255,255,.97);
      backdrop-filter:blur(14px);
      border-bottom:1px solid var(--border);
      padding:.9rem 0;
      position:relative;z-index:999
    }
    .navbar-brand{padding:0}
    .navbar-brand img{height:42px;width:auto;display:block}
    .nav-link{color:var(--ink)!important;opacity:.72;font-size:.875rem;font-weight:500;padding:.4rem .85rem!important;transition:color .2s,opacity .2s}
    .nav-link:hover,.nav-link:focus{color:var(--accent)!important;opacity:1}
    .nav-link.dropdown-toggle::after{border-color:rgba(11,14,23,.45) transparent transparent}
    .dropdown-menu{background:#fff;border:1px solid var(--border);border-radius:10px;padding:.5rem;min-width:200px;box-shadow:0 18px 40px -18px rgba(11,14,23,.2)}
    .dropdown-item{color:var(--ink);font-size:.85rem;border-radius:6px;padding:.45rem .85rem;transition:all .15s}
    .dropdown-item:hover,.dropdown-item:focus,.dropdown-item:active,.dropdown-item.active{background:rgba(139,0,0,.08);color:var(--accent)}
    .btn-nv-free{background:transparent;border:1px solid var(--border);color:var(--ink);border-radius:6px;font-size:.85rem;padding:.38rem 1rem;transition:all .2s}
    .btn-nv-free:hover{border-color:var(--ink);color:var(--ink)}
    .btn-nv-cta{background:var(--accent);color:#fff;border:none;border-radius:6px;font-size:.85rem;font-weight:700;padding:.4rem 1.15rem;transition:background .2s}
    .btn-nv-cta:hover{background:var(--accent2);color:#fff}

    /* ── HERO ────────────────────────────────────── */
    .hero{
      background:#fff;
      color:var(--ink);padding:5.5rem 0 4rem;position:relative;overflow:hidden
    }
    /* full-bleed canvas sits behind everything */
    #heroBgCanvas{
      position:absolute;inset:0;width:100%;height:100%;
      display:block;pointer-events:none;z-index:0
    }
    /* stronger left-side overlay so text is crisp; fades right so buildings show */
    .hero-overlay{
      position:absolute;inset:0;z-index:1;pointer-events:none;
      background:linear-gradient(
        105deg,
        rgba(255,255,255,0.88) 0%,
        rgba(255,255,255,0.60) 45%,
        rgba(255,255,255,0.08) 100%
      )
    }
    /* subtle grid watermark */
    .hero::before{
      content:'';position:absolute;inset:0;z-index:2;
      background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),
                        linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
      background-size:44px 44px;pointer-events:none
    }
    /* all hero content must be above canvas */
    .hero .container{ position:relative;z-index:3 }
    .hero-chip{
      display:inline-flex;align-items:center;gap:.4rem;
      font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
      color:var(--accent2);background:rgba(139,0,0,.10);
      border:1px solid rgba(139,0,0,.25);border-radius:100px;
      padding:.28rem .9rem;margin-bottom:1.5rem
    }
    .hero h1{
      font-family:var(--ff-h);font-size:clamp(1.9rem,3.6vw,2.9rem);
      font-weight:800;line-height:1.15;letter-spacing:-.03em;margin-bottom:1.25rem;color:var(--ink)
    }
    .hero h1 em{color:var(--accent);font-style:normal}
    .hero-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
    .hero h1 + .hero-chip{margin-bottom:1rem}
    .hero-sub{font-size:1.05rem;color:var(--muted);max-width:510px;line-height:1.75;margin-bottom:2rem;background:rgba(255,255,255,.85);border-radius:8px;padding:.5rem .75rem;display:inline-block}
    .hero-badges{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:2.25rem}
    .hbadge{
      display:inline-flex;align-items:center;gap:.3rem;
      font-size:.78rem;font-weight:500;color:var(--ink);
      background:rgba(255,255,255,.75);border:1px solid var(--border);
      border-radius:6px;padding:.28rem .75rem
    }
    .hbadge i{color:var(--accent)}
    .btn-hero-p{background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:700;padding:.75rem 1.75rem;transition:background .2s,transform .15s}
    .btn-hero-p:hover{background:var(--accent2);color:#fff;transform:translateY(-1px)}
    .btn-hero-o{background:rgba(255,255,255,.8);color:var(--ink);border:1px solid rgba(11,14,23,.2);border-radius:8px;font-size:.95rem;padding:.75rem 1.5rem;transition:all .2s}
    .btn-hero-o:hover{border-color:var(--ink);color:var(--ink)}
    .reveal-left{opacity:0;transform:translateX(-60px)}
    .reveal-left.in-view{opacity:1;transform:translateX(0)}
    .btn-hero-p.reveal-left{transition:background .2s ease,transform .5s ease,opacity .6s ease}
    .btn-hero-o.reveal-left{transition:border-color .2s ease,color .2s ease,transform .5s ease,opacity .6s ease}
    .hero-stats{display:flex;flex-wrap:wrap;gap:2.25rem;margin-top:3rem;padding-top:2rem;border-top:1px solid rgba(11,14,23,.12)}
    .hstat-n{font-family:var(--ff-h);font-size:2rem;font-weight:700;color:var(--ink);line-height:1}
    .hstat-l{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:.2rem}

    /* right panel */
    .hero-panel{
      background:rgba(255,255,255,.45);border:1px solid rgba(11,14,23,.08);
      border-radius:18px;padding:2rem;backdrop-filter:blur(3px)
    }
    .hpc{
      background:rgba(255,255,255,.55);border:1px solid rgba(11,14,23,.08);
      border-radius:10px;padding:1.1rem 1.3rem;margin-bottom:.65rem;
      cursor:default;
      opacity:0;transform:translateX(60px);
      transition:background .2s ease,border-color .2s ease,transform .5s ease,box-shadow .3s ease,opacity .6s ease
    }
    .hpc.in-view{opacity:1;transform:translateX(0)}
    .hpc:hover{background:rgba(139,0,0,.06);border-color:rgba(139,0,0,.2);transform:translateY(-3px);box-shadow:0 12px 24px -16px rgba(11,14,23,.16)}
    .hpc.in-view:hover{transform:translateY(-3px)}
    .hpc-tag{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(139,0,0,.09);border-radius:4px;padding:.15rem .5rem;display:inline-block;margin-bottom:.4rem}
    .hpc-title{font-size:.93rem;font-weight:600;color:var(--ink);margin-bottom:.2rem}
    .hpc-meta{font-size:.76rem;color:var(--muted)}
    .free-badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.7rem;font-weight:700;color:#16a34a;background:#dcfce7;border-radius:4px;padding:.15rem .5rem}

    /* ── TICKER ──────────────────────────────────── */
    .ticker{background:#F4F4F4;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:1rem 0;overflow:hidden}
    .ticker-inner{display:flex;gap:3rem;align-items:center;animation:tick 24s linear infinite;width:max-content}
    @keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
    .tpill{font-size:.82rem;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
    .tdot{color:var(--accent);font-size:.6rem}

    /* ── SECTION SHARED ──────────────────────────── */
    section{padding:5rem 0}
    .eyebrow{font-size:.73rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.4rem;margin-bottom:.7rem}
    .eyebrow::before{content:'✦'}
    .sec-title{font-family:var(--ff-h);font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.2;color:var(--ink)}
    .sec-sub{font-size:.97rem;color:var(--muted);line-height:1.75;margin-top:.7rem}

    /* ── SOCIAL PROOF STRIP ──────────────────────── */
    .proof{background:var(--surface);padding:3.5rem 0}
    .proof-num{font-family:var(--ff-h);font-size:2.4rem;font-weight:800;color:var(--accent);line-height:1}
    .proof-lbl{font-size:.8rem;color:var(--muted);margin-top:.25rem;line-height:1.4}

    /* ── COURSES ─────────────────────────────────── */
    .cc{
      --accentc:var(--accent);
      position:relative;overflow:hidden;
      border:1px solid var(--border-strong);border-radius:16px;padding:2.2rem 2rem 2rem;height:100%;
      background:#fff;display:flex;flex-direction:column;box-shadow:0 4px 14px -8px rgba(11,14,23,.14);
      opacity:0;transform:translateY(45px);
      transition:opacity .6s ease,transform .6s ease,box-shadow .3s ease,border-color .3s ease
    }
    .cc.in-view{opacity:1;transform:translateY(0)}
    .cc::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--accentc);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
    .cc:hover::before{transform:scaleX(1)}
    .cc:hover{box-shadow:0 22px 44px -26px rgba(11,14,23,.16);transform:translateY(-4px);border-color:color-mix(in srgb,var(--accentc) 28%,var(--border))}
    .cc.in-view:hover{transform:translateY(-4px)}
    .cc-icon{
      width:52px;height:52px;border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      font-size:1.35rem;color:#fff;margin-bottom:1.3rem;flex-shrink:0;
      box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accentc) 40%,transparent)
    }
    .cc h5{font-family:var(--ff-h);font-size:1.12rem;font-weight:700;color:var(--ink);margin-bottom:.6rem}
    .cc p{font-size:.85rem;color:var(--muted);line-height:1.65;margin-bottom:1.25rem}
    .cc-list{list-style:none;margin-bottom:1.5rem}
    .cc-list li{font-size:.82rem;color:var(--ink);display:flex;align-items:flex-start;gap:.6rem;padding:.32rem 0;border-bottom:1px dashed var(--border)}
    .cc-list li:last-child{border-bottom:none}
    .cc-list li i{color:#fff;background:var(--accentc);width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.55rem;margin-top:1px;flex-shrink:0}
    .cc-meta{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.5rem;padding-top:1.15rem;border-top:1px solid var(--border);margin-top:auto}
    .cc-pill{font-size:.72rem;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:.25rem .65rem;display:flex;align-items:center;gap:.35rem}
    .cc-pill i{color:var(--accentc)}
    .btn-cc{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.85rem;font-weight:700;color:var(--accentc,var(--accent));text-decoration:none;border:1.5px solid var(--accentc,var(--accent));border-radius:30px;padding:.6rem 1rem;transition:all .25s ease}
    .btn-cc:hover{background:var(--accentc,var(--accent));color:#fff;gap:.6rem}
    .cc-tag{font-size:.68rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;background:color-mix(in srgb,var(--accentc) 10%,#fff);color:var(--accentc);border-radius:20px;padding:.22rem .65rem .22rem .5rem;display:inline-flex;align-items:center;gap:.35rem;margin-bottom:.75rem}
    .cc-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

    /* ── MENTORSHIP (highlighted, light) ──────────── */
    .mentor-sec{position:relative;background:var(--surface);padding:6rem 0;overflow:hidden}
    .mentor-sec::before{content:'';position:absolute;top:-160px;right:-140px;width:460px;height:460px;background:radial-gradient(circle,rgba(139,0,0,.10),transparent 70%);border-radius:50%;pointer-events:none;z-index:0}
    .mentor-sec::after{content:'';position:absolute;bottom:-180px;left:-160px;width:460px;height:460px;background:radial-gradient(circle,rgba(178,34,34,.08),transparent 70%);border-radius:50%;pointer-events:none;z-index:0}
    .mentor-sec .container{position:relative;z-index:1}
    .mentor-frame{
      position:relative;background:#fff;border:1px solid var(--border);border-radius:28px;
      padding:3.5rem 3rem;overflow:hidden;
      box-shadow:0 40px 80px -36px rgba(139,0,0,.16),0 12px 34px -16px rgba(11,14,23,.09)
    }
    .mentor-frame::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent))}
    .mentor-badge{display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:20px;padding:.35rem .9rem;margin-bottom:1rem;box-shadow:0 10px 24px -10px rgba(139,0,0,.5)}
    /* dark, high-contrast intro panel (mirrors mentoring.html's .coach-sec dark treatment) */
    .mentor-intro{
      position:relative;overflow:hidden;background:linear-gradient(160deg,#0B0E17,#1a1f30 130%);
      border-radius:22px;padding:3rem 2.75rem;margin-bottom:3.5rem;
      box-shadow:0 30px 60px -30px rgba(11,14,23,.5)
    }
    .mentor-intro::before{content:'';position:absolute;top:-120px;right:-100px;width:320px;height:320px;background:radial-gradient(circle,rgba(139,0,0,.35),transparent 70%);pointer-events:none;z-index:0}
    .mentor-intro::after{content:'';position:absolute;bottom:-140px;left:-120px;width:320px;height:320px;background:radial-gradient(circle,rgba(37,99,235,.18),transparent 70%);pointer-events:none;z-index:0}
    .mentor-intro>.row{position:relative;z-index:1}
    .mentor-intro .eyebrow{color:#ff8a80}
    .mentor-intro .sec-title{color:#fff}
    .mentor-intro .sec-sub{color:rgba(255,255,255,.68)}
    .mentor-intro .btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
    .mentor-intro .btn-ghost-light:hover{background:#fff;color:var(--ink);border-color:#fff}
    .mentor-intro .mentor-stat{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
    .mentor-intro .mentor-stat:hover{box-shadow:0 16px 32px -18px rgba(0,0,0,.5)}
    .mentor-intro .mentor-stat i{color:#ff8a80}
    .mentor-intro .mentor-stat .num{color:#fff}
    .mentor-intro .mentor-stat .lbl{color:rgba(255,255,255,.6)}
    @media(max-width:767.98px){.mentor-intro{padding:2.25rem 1.5rem}}
    .btn-ghost-light{background:#fff;border:1.5px solid var(--ink);color:var(--ink);border-radius:8px;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;transition:all .2s ease}
    .btn-ghost-light:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
    .mentor-stat{
      background:linear-gradient(160deg,rgba(139,0,0,.06),rgba(139,0,0,.015));border:1px solid rgba(139,0,0,.14);border-radius:16px;padding:1.6rem 1.4rem;text-align:center;height:100%;
      opacity:0;transform:translateX(60px);
      transition:opacity .6s ease,transform .6s ease,box-shadow .25s ease
    }
    .mentor-stat.in-view{opacity:1;transform:translateX(0)}
    .mentor-stat:hover{transform:translateY(-4px);box-shadow:0 16px 32px -18px rgba(139,0,0,.18)}
    .mentor-stat.in-view:hover{transform:translateY(-4px)}
    .mentor-stat i{font-size:1.25rem;color:var(--accent);display:block;margin-bottom:.55rem}
    .mentor-stat .num{font-family:var(--ff-h);font-size:2.2rem;font-weight:800;color:var(--accent);line-height:1}
    .mentor-stat .lbl{font-size:.8rem;color:var(--muted);margin-top:.35rem;font-weight:500}
    .mentor-card{
      position:relative;overflow:hidden;border:1px solid var(--border);border-radius:14px;padding:1.8rem;background:#fff;height:100%;
      opacity:0;transform:translateY(45px);
      transition:opacity .6s ease,transform .6s ease,box-shadow .3s ease,border-color .3s ease
    }
    .mentor-card.in-view{opacity:1;transform:translateY(0)}
    .mentor-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
    .mentor-card:hover::before{transform:scaleX(1)}
    .mentor-card:hover{box-shadow:0 20px 38px -24px rgba(11,14,23,.16);transform:translateY(-4px);border-color:rgba(139,0,0,.2)}
    .mentor-card.in-view:hover{transform:translateY(-4px)}
    .mentor-card .ic{width:44px;height:44px;background:rgba(139,0,0,.09);border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem}
    .mentor-card .ic i{color:var(--accent);font-size:1.15rem}
    .mentor-card h6{font-weight:700;font-size:.97rem;color:var(--ink);margin-bottom:.45rem}
    .mentor-card p{font-size:.83rem;color:var(--muted);line-height:1.65;margin:0}
    .mentor-panel{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:2.75rem}
    .mentor-mini{
      background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.4rem;height:100%;
      opacity:0;transform:translateY(45px);
      transition:opacity .6s ease,transform .6s ease,box-shadow .25s ease
    }
    .mentor-mini.in-view{opacity:1;transform:translateY(0)}
    .mentor-mini:hover{box-shadow:0 16px 28px -18px rgba(11,14,23,.14);transform:translateY(-4px)}
    .mentor-mini.in-view:hover{transform:translateY(-4px)}
    .mentor-mini i{color:var(--accent);font-size:1.4rem}
    .mentor-mini .t{font-weight:700;font-size:.9rem;color:var(--ink);margin:.7rem 0 .35rem}
    .mentor-mini .d{font-size:.8rem;color:var(--muted);line-height:1.6}

    /* ── WHY SECTION ────────────────────────────── */
    .why{background:#fff}
    .why .sec-title{color:var(--ink)}
    .wc{
      border:1px solid var(--border-strong);border-radius:13px;padding:1.8rem;
      background:#fff;height:100%;box-shadow:0 4px 14px -8px rgba(11,14,23,.14);
      opacity:0;transform:translateY(45px);
      transition:opacity .6s ease,transform .6s ease,background .2s ease,border-color .2s ease,box-shadow .3s ease
    }
    .wc.in-view{opacity:1;transform:translateY(0)}
    .wc:hover{background:rgba(139,0,0,.03);border-color:rgba(139,0,0,.2);transform:translateY(-4px);box-shadow:0 20px 38px -26px rgba(11,14,23,.14)}
    .wc.in-view:hover{transform:translateY(-4px)}
    .wc-icon{
      width:42px;height:42px;background:rgba(139,0,0,.10);
      border:1px solid rgba(139,0,0,.22);border-radius:10px;
      display:flex;align-items:center;justify-content:center;
      font-size:1.15rem;color:var(--accent);margin-bottom:1.1rem
    }
    .wc h5{font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:.45rem}
    .wc p{font-size:.83rem;color:var(--muted);line-height:1.65;margin:0}

    /* ── MODES TABS ──────────────────────────────── */
    .modes{position:relative;background:#EFEEF0;overflow:hidden}
    .modes::before{content:'';position:absolute;top:-140px;left:-120px;width:400px;height:400px;background:radial-gradient(circle,rgba(139,0,0,.08),transparent 70%);border-radius:50%;pointer-events:none;z-index:0}
    .modes::after{content:'';position:absolute;bottom:-160px;right:-130px;width:400px;height:400px;background:radial-gradient(circle,rgba(37,99,235,.07),transparent 70%);border-radius:50%;pointer-events:none;z-index:0}
    .modes .container{position:relative;z-index:1}
    .journey{background:#EFEEF0}
    .mode-btn{
      display:flex;align-items:center;gap:.9rem;
      border:1px solid var(--border);border-radius:12px;
      padding:.9rem 1.1rem;background:#fff;cursor:pointer;
      transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .25s ease;
      text-align:left;width:100%;height:100%;box-sizing:border-box
    }
    .mode-btn:hover{border-color:rgba(139,0,0,.3);box-shadow:0 12px 26px -18px rgba(11,14,23,.18);transform:translateX(3px)}
    .mode-btn.active{border-color:transparent;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 16px 34px -16px rgba(139,0,0,.45);transform:translateX(3px)}
    .mode-ic{flex-shrink:0;width:42px;height:42px;border-radius:11px;background:rgba(139,0,0,.08);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:1.1rem;transition:background .25s ease,color .25s ease}
    .mode-btn.active .mode-ic{background:rgba(255,255,255,.2);color:#fff}
    .mode-lbl{font-size:.9rem;font-weight:700;color:var(--ink);transition:color .25s ease}
    .mode-btn.active .mode-lbl{color:#fff}
    .mode-sub{font-size:.75rem;color:var(--muted);transition:color .25s ease}
    .mode-btn.active .mode-sub{color:rgba(255,255,255,.78)}
    .mode-arrow{margin-left:auto;flex-shrink:0;color:var(--border);font-size:.85rem;transition:color .25s ease,transform .25s ease}
    .mode-btn.active .mode-arrow{color:#fff;transform:translateX(2px)}
    .mode-panel{
      background:#fff;border:1px solid var(--border);border-radius:18px;padding:2.5rem;height:100%;
      box-shadow:0 26px 50px -34px rgba(11,14,23,.16);animation:mp-fade .4s ease
    }
    @keyframes mp-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
    @media(prefers-reduced-motion:reduce){.mode-panel{animation:none}}
    .mode-panel-head{display:flex;align-items:flex-start;gap:1.1rem;margin-bottom:1rem}
    .mode-panel-ic{flex-shrink:0;width:58px;height:58px;border-radius:15px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.55rem;box-shadow:0 14px 26px -10px rgba(139,0,0,.45)}
    .mode-panel h4{font-family:var(--ff-h);font-size:1.5rem;font-weight:700;color:var(--ink);margin-bottom:.35rem}
    .mode-panel-tag{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:700;letter-spacing:.03em;color:var(--accent);background:rgba(139,0,0,.08);border-radius:20px;padding:.28rem .75rem}
    .mode-panel p{font-size:.88rem;color:var(--muted);line-height:1.75;margin-bottom:1.4rem}
    .mp-bullets{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .9rem}
    @media(max-width:767.98px){.mp-bullets{grid-template-columns:1fr}}
    .mp-bullet{display:flex;align-items:flex-start;gap:.55rem;font-size:.85rem;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:.6rem .75rem}
    .mp-bullet i{color:var(--accent);margin-top:2px;flex-shrink:0}

    /* ── JOURNEY PHASES ──────────────────────────── */
    .phase-card{
      background:#fff;border:1px solid var(--border);border-radius:13px;
      padding:1.6rem;position:relative;overflow:hidden;height:100%;
      opacity:0;transform:translateY(45px);
      transition:opacity .6s ease,transform .6s ease,box-shadow .3s ease,border-color .3s ease
    }
    .phase-card.in-view{opacity:1;transform:translateY(0)}
    .phase-card:hover{box-shadow:0 20px 38px -26px rgba(11,14,23,.16);transform:translateY(-4px);border-color:rgba(139,0,0,.22)}
    .phase-card.in-view:hover{transform:translateY(-4px)}
    .phase-num{
      position:absolute;top:-.5rem;right:.85rem;
      font-family:var(--ff-h);font-size:5rem;font-weight:800;
      color:rgba(139,0,0,.06);line-height:1;pointer-events:none;transition:color .3s ease
    }
    .phase-card:hover .phase-num{color:rgba(139,0,0,.1)}
    .ph-icon{
      width:38px;height:38px;background:rgba(139,0,0,.1);border-radius:9px;
      display:flex;align-items:center;justify-content:center;
      font-size:1rem;color:var(--accent);margin-bottom:.9rem;
      transition:background .3s ease,transform .3s ease
    }
    .phase-card:hover .ph-icon{background:var(--accent);color:#fff;transform:scale(1.08)}
    .phase-card:hover .ph-icon i{color:#fff}
    .phase-card h6{font-weight:700;font-size:.92rem;color:var(--ink);margin-bottom:.35rem}
    .phase-card p{font-size:.8rem;color:var(--muted);margin:0;line-height:1.6}

    /* ── OUTCOMES ────────────────────────────────── */
    .outcomes{position:relative;background:#fff;overflow:hidden}
    .outcomes .sec-title{color:var(--ink)}
    .outcomes::before{content:'';position:absolute;top:-150px;right:-120px;width:420px;height:420px;background:radial-gradient(circle,rgba(139,0,0,.07),transparent 70%);border-radius:50%;pointer-events:none;z-index:0}
    .outcomes::after{content:'';position:absolute;bottom:-170px;left:-140px;width:420px;height:420px;background:radial-gradient(circle,rgba(37,99,235,.06),transparent 70%);border-radius:50%;pointer-events:none;z-index:0}
    .outcomes-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(11,14,23,.08) 1.4px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 65%);mask-image:radial-gradient(circle at 50% 40%,#000,transparent 65%);pointer-events:none;z-index:0}
    .outcomes .container{position:relative;z-index:1}
    .oc-col{position:relative;height:100%}
    .oc-arrow{display:none;position:absolute;top:50%;right:-1.35rem;transform:translateY(-50%);color:var(--border);font-size:1.25rem;z-index:2}
    @media(min-width:992px){.oc-arrow{display:flex}}
    .oc{
      --pc:var(--accent);position:relative;overflow:hidden;background:#fff;border:1px solid var(--border-strong);
      border-radius:16px;padding:1.9rem 1.75rem;height:100%;box-shadow:0 4px 14px -8px rgba(11,14,23,.14);
      opacity:0;transform:translateY(45px);
      transition:opacity .6s ease,transform .6s ease,box-shadow .3s ease,border-color .3s ease
    }
    .oc.in-view{opacity:1;transform:translateY(0)}
    .oc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pc),color-mix(in srgb,var(--pc) 30%,transparent));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
    .oc:hover::before{transform:scaleX(1)}
    .oc:hover{box-shadow:0 22px 42px -28px color-mix(in srgb,var(--pc) 30%,rgba(11,14,23,.2));transform:translateY(-4px);border-color:color-mix(in srgb,var(--pc) 30%,var(--border))}
    .oc.in-view:hover{transform:translateY(-4px)}
    .oc-num{
      position:absolute;top:-.4rem;right:.7rem;font-family:var(--ff-h);font-size:4.2rem;font-weight:800;
      color:color-mix(in srgb,var(--pc) 9%,transparent);line-height:1;pointer-events:none;transition:color .3s ease
    }
    .oc:hover .oc-num{color:color-mix(in srgb,var(--pc) 15%,transparent)}
    .oc-ic{
      position:relative;width:44px;height:44px;border-radius:12px;background:color-mix(in srgb,var(--pc) 10%,#fff);
      color:var(--pc);display:flex;align-items:center;justify-content:center;font-size:1.15rem;margin-bottom:1rem;
      transition:background .3s ease,color .3s ease,transform .3s ease
    }
    .oc:hover .oc-ic{background:var(--pc);color:#fff;transform:scale(1.08)}
    .oc h6{position:relative;font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:.5rem}
    .oc p{position:relative;font-size:.82rem;color:var(--muted);line-height:1.6;margin:0}

    /* ── TESTIMONIALS (Google review carousel) ────── */
    .g-summary{
      display:flex;align-items:center;gap:1.4rem;
      background:#fff;border:1px solid var(--border);border-radius:18px;
      padding:1.4rem 1.9rem;max-width:600px;margin:0 auto 2.75rem;
      box-shadow:0 20px 46px -22px rgba(11,14,23,.18)
    }
    .gs-badge{width:54px;height:54px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .gs-body{flex:1;min-width:0}
    .gs-top{display:flex;align-items:baseline;gap:.65rem;flex-wrap:wrap}
    .gs-num{font-family:var(--ff-h);font-size:2rem;font-weight:800;color:var(--ink);line-height:1}
    .gs-stars{color:#FBBC05;font-size:1.05rem;letter-spacing:2px}
    .gs-sub{font-size:.8rem;color:var(--muted);margin-top:.25rem}
    .gs-sub strong{color:var(--ink);font-weight:700}
    .gs-cta{display:flex;align-items:center;gap:.4rem;font-size:.83rem;font-weight:700;color:var(--accent);text-decoration:none;white-space:nowrap;flex-shrink:0;transition:gap .2s ease,color .2s ease}
    .gs-cta:hover{gap:.6rem;color:var(--accent2)}
    @media (max-width:575px){
      .g-summary{flex-direction:column;text-align:center;padding:1.5rem}
      .gs-top{justify-content:center}
      .gs-cta{margin-top:.4rem}
    }

    .greview-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;display:flex;gap:1.25rem;padding:.25rem .25rem 1rem}
    .greview-viewport::-webkit-scrollbar{display:none}
    .greview-viewport{-ms-overflow-style:none;scrollbar-width:none}
    .greview-slide{scroll-snap-align:start;flex:0 0 calc(25% - .94rem);min-width:250px;max-width:100%}
    @media (max-width:991px){.greview-slide{flex:0 0 calc(50% - .625rem)}}
    @media (max-width:575px){.greview-slide{flex:0 0 86%;min-width:0}}

    .greview-nav{display:flex;justify-content:center;gap:.75rem;margin-top:.5rem}
    .greview-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;transition:all .2s ease}
    .greview-arrow:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

    .tc{background:#fff;border:1px solid var(--border-strong);border-radius:14px;padding:1.75rem;height:100%;display:flex;flex-direction:column;opacity:0;transform:translateY(45px);box-shadow:0 4px 14px -8px rgba(11,14,23,.14);transition:opacity .6s ease,transform .6s ease,box-shadow .25s ease}
    .tc.in-view{opacity:1;transform:translateY(0)}
    .tc:hover{box-shadow:0 16px 36px -18px rgba(11,14,23,.16);transform:translateY(-4px)}
    .tc.in-view:hover{transform:translateY(-4px)}
    .tc-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.85rem}
    .tc-avwrap{position:relative;flex-shrink:0}
    .tc-gmark{position:absolute;bottom:-3px;right:-3px;width:17px;height:17px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.3)}
    .tc-gmark i{color:#4285F4;font-size:.62rem}
    .tc-id{flex:1;min-width:0}
    .tc-sub{font-size:.72rem;color:var(--muted)}
    .tc-meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem}
    .tc-stars{color:#FBBC05;font-size:.85rem;letter-spacing:1px}
    .tc-time{font-size:.72rem;color:var(--muted)}
    .tc blockquote{font-size:.87rem;color:var(--ink);line-height:1.7;margin-bottom:0;flex:1}
    .tc-av{
      width:42px;height:42px;border-radius:50%;
      background:linear-gradient(135deg,var(--accent),var(--accent2));
      display:flex;align-items:center;justify-content:center;
      font-size:.95rem;color:#fff;font-weight:700;flex-shrink:0
    }
    .tc-name{font-size:.87rem;font-weight:700;color:var(--ink)}
    .tc-role{font-size:.75rem;color:var(--muted)}

    /* ── GHL FORM SLOTS ───────────────────────────── */
    /* Empty (inactive) by default — collapses to nothing, no layout impact */
    .ghl-inline-slot:empty{display:none}
    .ghl-inline-slot{max-width:640px;margin:0 auto;padding:0 1rem 3rem;overflow-x:hidden;box-sizing:border-box}

    /* ── FREE COURSE CTA ─────────────────────────── */
    .fcta{
      position:relative;overflow:hidden;padding:5rem 0;text-align:center;color:var(--ink);
      background:
        radial-gradient(circle at 8% 15%,rgba(139,0,0,.14),transparent 45%),
        radial-gradient(circle at 92% 88%,rgba(37,99,235,.14),transparent 45%),
        linear-gradient(160deg,var(--surface),#fff 55%)
    }
    .fcta .container{position:relative;z-index:1}
    .fcta h2{font-family:var(--ff-h);font-size:clamp(1.8rem,4vw,2.9rem);font-weight:800;margin-bottom:1rem;color:var(--ink)}
    .fcta p{color:var(--muted);font-size:1rem;margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto}
    .fcta-corner-ic{position:absolute;opacity:.1;pointer-events:none;line-height:1;z-index:0}
    @media(max-width:767.98px){.fcta-corner-ic{display:none}}

    /* ── NEWSLETTER ──────────────────────────────── */
    .newsletter{background:var(--accent);padding:2.8rem 0}
    .newsletter h4{font-family:var(--ff-h);font-size:1.5rem;font-weight:700;color:#fff;margin-bottom:.4rem}
    .newsletter p{font-size:.9rem;color:rgba(255,255,255,.75);margin-bottom:0}
    .nl-input{
      display:flex;gap:.5rem;flex-wrap:wrap;
      background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);
      border-radius:9px;padding:.4rem .4rem .4rem .9rem;max-width:440px
    }
    .nl-input input{
      flex:1;background:transparent;border:none;outline:none;
      color:#fff;font-size:.9rem;min-width:160px
    }
    .nl-input input::placeholder{color:rgba(255,255,255,.55)}
    .nl-input button{
      background:#fff;color:var(--accent);border:none;border-radius:6px;
      font-size:.88rem;font-weight:700;padding:.45rem 1.1rem;transition:all .2s;white-space:nowrap
    }
    .nl-input button:hover{background:var(--ink);color:#fff}

    /* ── FOOTER ──────────────────────────────────── */
    footer{background:#060810;color:rgba(255,255,255,.5);padding:4rem 0 2rem}
    .fb{font-family:var(--ff-h);font-size:1.45rem;font-weight:800;color:#fff}
    .fb span{color:var(--accent)}
    .ftag{font-size:.82rem;color:rgba(255,255,255,.38);margin-top:.4rem;line-height:1.65}
    .fsoc{display:flex;gap:.55rem;margin-top:1.1rem}
    .fsoc a{
      width:33px;height:33px;border:1px solid rgba(255,255,255,.14);border-radius:7px;
      display:flex;align-items:center;justify-content:center;
      color:rgba(255,255,255,.45);font-size:.88rem;text-decoration:none;transition:all .2s
    }
    .fsoc a:hover{border-color:var(--accent);color:var(--accent)}
    .fh{font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65);margin-bottom:.9rem}
    .fl{display:block;font-size:.84rem;color:rgba(255,255,255,.38);text-decoration:none;margin-bottom:.45rem;transition:color .2s}
    .fl:hover{color:#fff}
    .fdiv{border-color:rgba(255,255,255,.07);margin:2rem 0}
    .fcopy{font-size:.76rem;color:rgba(255,255,255,.28)}
    .whatsapp-fab{
      position:fixed;bottom:1.6rem;right:1.6rem;
      width:52px;height:52px;background:#25D366;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      font-size:1.55rem;color:#fff;text-decoration:none;
      box-shadow:0 4px 20px rgba(37,211,102,.45);z-index:998;transition:transform .2s
    }
    .whatsapp-fab:hover{transform:scale(1.08);color:#fff}

    /* ── RESPONSIVE ──────────────────────────────── */
    @media(max-width:767.98px){
      .hero{padding:3.2rem 0 2.5rem}
      .hero-panel{margin-top:2.5rem}
      .hero-stats{gap:1.4rem}
      section{padding:3.5rem 0}
    }

    /* ── APPLICATION FORM ────────────────────────────── */
    .apply-sec{background:var(--surface)}
    .apply-card{position:relative;overflow:hidden;max-width:820px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:20px;box-shadow:0 30px 70px -32px rgba(11,14,23,.16);padding:2.9rem 2.5rem 2rem;opacity:0;transform:translateY(40px);transition:opacity .6s ease,transform .6s ease}
    .apply-card.in-view{opacity:1;transform:translateY(0)}
    .apply-card::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--accent),var(--accent2),var(--accent))}

    .apply-steps{position:relative;display:flex;justify-content:space-between;margin-bottom:2.5rem}
    .apply-steps::before{content:'';position:absolute;top:19px;left:19px;right:19px;height:3px;border-radius:99px;background:var(--border)}
    .apply-steps-progress{position:absolute;top:19px;left:19px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));width:0%;transition:width .4s ease}
    .apply-step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;flex:1;min-width:0;padding:0 .25rem}
    .apply-step-num{position:relative;width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid var(--border);color:var(--muted);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;margin-bottom:.55rem;transition:all .25s ease}
    .apply-step-num-check{display:none;font-size:.9rem}
    .apply-step-lbl{font-size:.68rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;line-height:1.3}
    .apply-step.active .apply-step-num{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 0 5px rgba(139,0,0,.14);transform:scale(1.06)}
    .apply-step.done .apply-step-num{background:var(--accent);border-color:var(--accent);color:#fff}
    .apply-step.done .apply-step-num-txt{display:none}
    .apply-step.done .apply-step-num-check{display:inline-flex}
    .apply-step.active .apply-step-lbl,.apply-step.done .apply-step-lbl{color:var(--ink)}
    @media(max-width:575.98px){
      .apply-step-lbl{display:none}
      .apply-step.active .apply-step-lbl{display:block;position:absolute;top:38px;white-space:nowrap;font-size:.62rem}
      .apply-card{padding:2.1rem 1.25rem 1.5rem}
    }

    .apply-panel{display:none}
    .apply-panel.active{display:block;animation:applyFadeIn .35s ease}
    @keyframes applyFadeIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
    .apply-panel-head{display:flex;align-items:flex-start;gap:1rem;margin-bottom:.35rem}
    .apply-panel-ic{flex-shrink:0;width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.25rem;box-shadow:0 12px 22px -10px rgba(139,0,0,.45)}
    .apply-panel-eyebrow{display:block;font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:.25rem}
    .apply-panel h4{font-family:var(--ff-h);font-size:1.35rem;font-weight:800;color:var(--ink);margin-bottom:0}
    .apply-panel-sub{font-size:.85rem;color:var(--muted);margin:.6rem 0 1.65rem}

    .apply-field{margin-bottom:1.25rem}
    .apply-field label{display:block;font-size:.85rem;font-weight:700;color:var(--ink);margin-bottom:.35rem}
    .apply-field label .req{color:var(--accent)}
    .apply-hint{font-size:.78rem;color:var(--muted);margin-bottom:.5rem;line-height:1.5}
    .apply-input{border:1px solid var(--border);border-radius:9px;padding:.7rem .95rem;font-size:.88rem;color:var(--ink);background:var(--surface);width:100%;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
    .apply-input:hover{border-color:color-mix(in srgb,var(--accent) 30%,var(--border))}
    .apply-input:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px rgba(139,0,0,.12);outline:none}
    textarea.apply-input{resize:vertical}

    .apply-phone{display:flex;gap:.5rem}
    .apply-phone-code{flex:0 0 auto;width:118px;padding-left:.6rem;padding-right:.4rem}
    .apply-phone-num{flex:1;min-width:0}
    @media(max-width:420px){.apply-phone-code{width:96px;font-size:.8rem}}

    .apply-check{display:flex;align-items:flex-start;gap:.65rem;margin-bottom:.9rem;font-size:.83rem;color:var(--ink);line-height:1.55;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem;transition:border-color .2s ease,background .2s ease}
    .apply-check:has(input:checked){border-color:rgba(139,0,0,.35);background:rgba(139,0,0,.04)}
    .apply-check input{margin-top:.25rem;flex-shrink:0;width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
    .apply-check label{cursor:pointer}

    .apply-upload-btn{display:flex;align-items:center;gap:.9rem;border:1.5px dashed var(--border);border-radius:14px;padding:1.1rem 1.3rem;cursor:pointer;font-size:.85rem;font-weight:700;color:var(--accent);background:var(--surface);transition:all .2s ease;width:100%}
    .apply-upload-btn i{font-size:1.6rem;flex-shrink:0}
    .apply-upload-btn:hover{border-color:var(--accent);background:rgba(139,0,0,.04)}
    .apply-upload-hint{display:block;font-size:.72rem;color:var(--muted);font-weight:500;margin-top:.1rem}
    .apply-upload-chip{display:flex;align-items:center;gap:.6rem;margin-top:.75rem;background:rgba(22,163,74,.08);border:1px solid rgba(22,163,74,.25);border-radius:10px;padding:.6rem .8rem;font-size:.82rem;color:var(--ink);font-weight:600}
    .apply-upload-chip i.bi-file-earmark-pdf-fill{color:#16a34a;font-size:1.1rem;flex-shrink:0}
    .apply-upload-remove{margin-left:auto;flex-shrink:0;border:none;background:none;color:var(--muted);width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;transition:background .2s ease,color .2s ease}
    .apply-upload-remove:hover{background:rgba(139,0,0,.1);color:var(--accent)}

    .apply-nav{display:flex;justify-content:space-between;align-items:center;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}
    .apply-btn-back{visibility:hidden}
    .apply-btn-back.show{visibility:visible}

    .apply-success{display:none;text-align:center;padding:2rem 0}
    .apply-success.show{display:block;animation:applyFadeIn .4s ease}
    .apply-success-icon{width:64px;height:64px;border-radius:50%;background:rgba(22,163,74,.1);color:#16a34a;font-size:1.8rem;display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem}
    .apply-success h4{font-family:var(--ff-h);font-size:1.4rem;font-weight:800;color:var(--ink);margin-bottom:.6rem}
    .apply-success p{font-size:.9rem;color:var(--muted);max-width:440px;margin:0 auto;line-height:1.7}



        /* ── PRACTICAL LEARNING ──────────────────────────────── */

  .section-learning .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.75rem;
    font-family:var(--ff-h);
    font-size:.75rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.75);
  }
  .section-learning .eyebrow::before,.section-learning .eyebrow::after{
    content:"";
    display:block;
    width:34px;
    height:1px;
    background:rgba(255,255,255,.4);
  }
  .eyebrow.dark{color:var(--muted);}
  .eyebrow.dark::before,.eyebrow.dark::after{background:var(--border);}

  /* ---------- SECTION 1 : PRACTICAL LEARNING (dark) ---------- */
  .section-learning{
    background:linear-gradient(135deg, var(--ink) 0%, var(--accent) 130%);
    position:relative;
    overflow:hidden;
    padding:5rem 0 4.5rem;
  }
  .section-learning::after{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 85% 15%, rgba(255,255,255,.06), transparent 45%),
      radial-gradient(circle at 100% 100%, rgba(178,34,34,.35), transparent 55%);
    pointer-events:none;
  }
  .section-head{
    position:relative;
    z-index:2;
    text-align:center;
    margin-bottom:2.75rem;
  }
  .section-head h2{
    font-family:var(--ff-h);
    font-weight:800;
    font-size:clamp(2rem, 4vw, 3rem);
    color:#fff;
    margin:.75rem 0 0;
  }

  .slider-wrap{position:relative; z-index:2;}
  .slider-track{
    display:flex;
    gap:1.25rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:.5rem 3.25rem 1rem;
    scrollbar-width:none;
  }
  .slider-track::-webkit-scrollbar{display:none;}

  /* ---- Marquee (auto left-to-right continuous scroll) ---- */
  .marquee-wrap{
    position:relative;
    z-index:2;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  }
  .marquee-track{
    display:flex;
    gap:1.25rem;
    width:max-content;
    padding:.5rem .25rem 1rem;
    animation:marqueeScroll 34s linear infinite;
  }
  .marquee-wrap:hover .marquee-track{animation-play-state:paused;}
  @keyframes marqueeScroll{
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }

  .proj-card{
    position:relative;
    flex:0 0 340px;
    scroll-snap-align:start;
    border-radius:16px;
    overflow:hidden;
    height:430px;
    background:var(--slate);
    box-shadow:0 18px 40px rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.08);
  }
  .proj-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .5s ease;
  }
  .proj-card:hover img{transform:scale(1.06);}
  .proj-fade{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(6,7,12,.92) 0%, rgba(6,7,12,.35) 45%, transparent 70%);
  }
 .section-learning .proj-card .proj-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 5;
}

/* IMPORTANT - avatar size fix */
.section-learning .proj-card .proj-info img.proj-avatar {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;

    aspect-ratio: 1 / 1 !important;

    border-radius: 50% !important;

    object-fit: cover !important;
    object-position: center !important;

    display: block !important;
    position: relative !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    border: 2px solid #ffffff !important;

    flex: 0 0 52px !important;
}

/* Text container */
.section-learning .proj-info > div {
    flex: 1;
    min-width: 0;
}

/* Name */
.section-learning .proj-name {
    margin: 0 0 6px 0 !important;
    font-size: 16px;
    line-height: 1.2;
    color: #fff;
    font-weight: 700;
}

/* Badges */
.section-learning .badge-pill {
    display: inline-block;
    width: auto !important;
    height: auto !important;
}
  .badge-pill{
    display:inline-block;
    font-size:.68rem;
    font-weight:700;
    letter-spacing:.02em;
    padding:.25rem .6rem;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    color:#fff;
    border:1px solid rgba(255,255,255,.25);
    margin-right:.35rem;
  }
  .badge-pill.solid{
    background:var(--accent2);
    border-color:var(--accent2);
  }

  .slider-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:46px; height:46px;
    border-radius:50%;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(6px);
    transition:background .2s ease;
  }
  .slider-nav:hover{background:var(--accent2); border-color:var(--accent2);}
  .slider-nav.prev{left:.25rem;}
  .slider-nav.next{right:.25rem;}

  .dots{
    display:flex;
    justify-content:center;
    gap:.4rem;
    margin-top:1.75rem;
    position:relative;
    z-index:2;
  }
  .dots span{
    width:7px; height:7px;
    border-radius:50%;
    background:rgba(255,255,255,.3);
    cursor:pointer;
    transition:.2s;
  }
  .dots span.active{background:var(--accent2); width:22px; border-radius:4px;}

  /* ---------- SECTION 2 : INSIGHTS & TRENDS (light) ---------- */
  .section-insights{
    background:#fff;
    padding:5rem 0;
  }
  .section-insights .section-head h2{color:var(--ink);}
  .section-insights .section-head h2 span{color:var(--accent);}

  .blog-card{
    flex:0 0 380px;
    scroll-snap-align:start;
    border-radius:16px;
    overflow:hidden;
    background:var(--surface);
    border:1px solid var(--border);
    transition:transform .3s ease, box-shadow .3s ease;
  }
  .blog-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(11,14,23,.12);
  }
  .blog-img-wrap{
    position:relative;
    height:230px;
    background:var(--ink);
  }
  .blog-img-wrap img{
    width:100%; height:100%;
    object-fit:cover;
    opacity:.92;
  }
  .blog-tags{
    position:absolute;
    top:.9rem; left:.9rem;
    display:flex; gap:.4rem;
  }
  .tag{
    font-size:.65rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:.28rem .55rem;
    border-radius:5px;
    background:rgba(11,14,23,.75);
    color:#fff;
  }
  .tag.featured{background:var(--accent);}
  .blog-body{padding:1.35rem 1.4rem 1.5rem;}
  .blog-body h3{
    font-family:var(--ff-h);
    font-size:1.18rem;
    font-weight:700;
    line-height:1.35;
    color:var(--ink);
    margin-bottom:1rem;
    min-height:64px;
  }
  .blog-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:.9rem;
    border-top:1px solid var(--border);
  }
  .blog-author{
    display:flex; align-items:center; gap:.5rem;
    font-size:.85rem; font-weight:600; color:var(--ink);
  }
  .blog-author img{
    width:28px; height:28px;
    border-radius:50%;
    object-fit:cover;
  }
  .blog-date{font-size:.78rem; color:var(--muted);}

  .slider-nav.light{
    background:#fff;
    border:1px solid var(--border);
    color:var(--ink);
    box-shadow:0 6px 18px rgba(11,14,23,.1);
  }
  .slider-nav.light:hover{background:var(--accent); color:#fff; border-color:var(--accent);}
  .dots.dark span{background:var(--border);}
  .dots.dark span.active{background:var(--accent);}

  /* ---------- Featured single-card carousel (Insights) ---------- */
  .feature-carousel{
    position:relative;
    border-radius:22px;
    overflow:hidden;
    height:480px;
    background:var(--mid);
    box-shadow:0 20px 50px rgba(11,14,23,.18);
  }
  .feature-slide{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transition:opacity .6s ease;
    z-index:1;
  }
  .feature-slide.active{opacity:1; visibility:visible; z-index:2;}
  .feature-slide img{
    width:100%; height:100%;
    object-fit:cover;
    filter:grayscale(.15) contrast(1.02);
  }
  .feature-scrim{
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(6,7,12,.88) 0%, rgba(6,7,12,.35) 38%, rgba(6,7,12,.05) 60%, transparent 75%);
  }
  .feature-tags{
    position:absolute;
    top:1.75rem; left:1.9rem;
    display:flex; align-items:center; gap:.9rem;
    z-index:3;
  }
  .feature-tags span{
    font-family:var(--ff-h);
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,.9);
  }
  .feature-tags span:not(:last-child)::after{
    content:"/";
    margin-left:.9rem;
    color:rgba(255,255,255,.4);
  }
  .feature-tags span.hl{color:#fff;}
  .feature-body{
    position:absolute;
    left:1.9rem; right:1.9rem; bottom:4.6rem;
    z-index:3;
  }
  .feature-body h3{
    font-family:var(--ff-h);
    font-weight:800;
    color:#fff;
    font-size:clamp(1.6rem, 3vw, 2.35rem);
    max-width:720px;
    line-height:1.2;
    margin-bottom:1.1rem;
  }
  .feature-author{
    display:flex; align-items:center; gap:.6rem;
  }
  .feature-author img{
    width:30px; height:30px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid rgba(255,255,255,.8);
  }
  .feature-author .name{
    color:#fff; font-weight:700; font-size:.9rem;
  }
  .feature-author .date{
    color:rgba(255,255,255,.65);
    font-size:.82rem;
    margin-left:.6rem;
    padding-left:.6rem;
    border-left:1px solid rgba(255,255,255,.3);
  }

  .feature-controls{
    position:absolute;
    left:1.9rem; right:1.9rem; bottom:1.6rem;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .progress-group{
    display:flex; align-items:center; gap:.4rem;
  }
  .prog-seg{
    height:4px;
    width:8px;
    border-radius:3px;
    background:rgba(255,255,255,.35);
    cursor:pointer;
    transition:width .35s ease, background .35s ease;
  }
  .prog-seg.active{width:34px; background:#fff;}

  .arrow-group{display:flex; gap:.6rem;}
  .feat-arrow{
    width:42px; height:42px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.4);
    background:rgba(255,255,255,.08);
    color:#fff;
    display:flex; align-items:center; justify-content:center;
    backdrop-filter:blur(6px);
    transition:background .2s ease, border-color .2s ease;
  }
  .feat-arrow:hover{background:var(--accent); border-color:var(--accent);}


  @media (max-width:576px){
    .proj-card{flex:0 0 84vw; height:380px;}
    .blog-card{flex:0 0 86vw;}
    .slider-nav{display:none;}
  }