:root{
    /* Palette (from your Tailwind config) */
    --bg: #0f1223;
    --bgsoft: #161a33;
    --text: #e7e9ff;
    --muted: #aeb3d9;
    --brand: #7c5cff;
    --brand2: #19d3da;
    --accent: #ffe07c;
    --danger: #ff6b6b;
    --success: #36d399;
  
    --wrap: 1100px;
    --radius-lg: 22px;
    --radius-md: 14px;
    --shadow-deep: 0 10px 30px rgba(0,0,0,.25);
  
    --gap: 16px;
  }
  
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body.site {
    margin: 0;
    font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  
  a { color: inherit; text-decoration: none; }
  a.link { text-decoration: underline; }
  
  /* Hero background */
  .bg-hero{
    background:
      radial-gradient(1200px 600px at 20% -20%, rgba(124,92,255,.35), transparent),
      radial-gradient(900px 500px at 120% -10%, rgba(25,211,218,.25), transparent),
      #0f1223;
  }
  
  /* Layout */
  .container { max-width: var(--wrap); margin-inline: auto; padding: 0 24px; }
  .section { padding: 48px 0; }
  .section-lg { padding: 64px 0; }
  .grid { display: grid; gap: var(--gap); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .items-start { align-items: start; }
  .gap-16 { gap: 16px; }
  .gap-20 { gap: 20px; }
  
  @media (min-width: 768px){
    .grid-2 { grid-template-columns: 1.2fr 1fr; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
  }
  
  .center { text-align: center; }
  
  /* Typography */
  .h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; font-weight: 800; margin: 16px 0 0; }
  .h2 { font-size: clamp(22px, 4vw, 32px); font-weight: 600; margin: 0; }
  .h3 { font-size: clamp(20px, 3.6vw, 28px); font-weight: 600; margin: 0; }
  .h4 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
  .h5 { font-size: 18px; font-weight: 600; margin: 0; }
  
  .lead { font-size: clamp(16px, 2.2vw, 20px); color: var(--muted); margin-top: 12px; max-width: 70ch; }
  .muted { color: var(--muted); }
  .text-lg { font-size: 20px; }
  .semibold { font-weight: 600; }
  .mb-1 { margin-bottom: 4px; }
  .mb-16 { margin-bottom: 16px; }
  .mt-8 { margin-top: 8px; }
  .mt-12 { margin-top: 12px; }
  .mt-16 { margin-top: 16px; }
  
  /* Hero */
  .hero { position: relative; overflow: hidden; padding: 32px 0 48px; }
  .hero__intro .pill{
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid color-mix(in oklab, var(--brand), transparent 60%);
    background: color-mix(in oklab, var(--brand), transparent 85%);
    padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 14px;
  }
  .pill__emoji { font-size: 20px; }
  .hero__grid { align-items: center; }
  .video-box{
    position: relative; aspect-ratio: 16/9; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.15); background: #0a0d1d; border-radius: var(--radius-lg);
    overflow: hidden;
  }
  .video-box__iframe { width: 100%; height: 100%; border: 0; }
  
  /* Buttons */
  .btn{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 20px; border-radius: var(--radius-md); font-weight: 700; cursor: pointer; border: 1px solid transparent; font-size: 18px;
  }
  .btn-primary{
    color: #fff; box-shadow: var(--shadow-deep);
    background: linear-gradient(45deg, var(--brand), #7c3aed);
  }
  .btn-ghost{
    color: var(--text);
    border-color: rgba(255,255,255,.2);
    background: transparent;
  }
  .btn:hover { filter: brightness(1.03); }
  
  .icon-btn{
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,.15); border-radius: 8px; background: rgba(255,255,255,.05);
    cursor: pointer;
  }
  .icon-btn:hover{ background: rgba(255,255,255,.1); }
  
  .cta-row { display:flex; flex-wrap:wrap; gap:12px; margin-top: 16px; }
  .cta-row.center { justify-content: center; }
  
  /* Bullets */
  .bullets{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-top: 10px; }
  .bullet{ font-size: clamp(16px, 2.2vw, 20px); color: var(--muted); font-weight: 700; display:flex; align-items:center; gap:8px; }
  .dot{ width: 6px; height: 6px; border-radius: 999px; background: var(--brand2); display:inline-block; }
  
  /* Cards */
  .card{
    background: color-mix(in oklab, var(--bgsoft), transparent 0%);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-deep);
    padding: 20px;
  }
  .card--outline{ border-style: dashed; border-color: color-mix(in oklab, var(--brand), transparent 50%); }
  .card--hover{ transition: background .2s ease, color .2s ease; }
  .card--hover:hover{ background: #c7d2fe; color: #1e1b4b; }
  .card--soft{ background: color-mix(in oklab, var(--bgsoft), transparent 40%); }
  .gradient-soft{
    background: linear-gradient(180deg, color-mix(in oklab, var(--brand), transparent 90%), color-mix(in oklab, var(--brand), transparent 95%));
  }
  .flag{
    width: 100%;
    border: 1px solid color-mix(in oklab, var(--success), transparent 50%);
    background: color-mix(in oklab, var(--success), transparent 85%);
    padding: 10px 12px; border-radius: 12px; font-weight: 600; color: #d1fae5;
  }
  
  /* Emojis & tick */
  .emoji{ font-size: 24px; }
  .tick{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:8px;
    border:1px solid color-mix(in oklab, var(--brand), transparent 60%);
    background: color-mix(in oklab, var(--brand), transparent 85%);
    margin-right: 8px;
  }
  
  /* Carousel */
  .bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom: 12px; }
  .viewport{ overflow:hidden; position:relative; }
  .track{ display:flex; gap: var(--gap); will-change: transform; transition: transform .5s ease-out; }
  .slide{ flex-shrink: 0; width: 280px; } /* JS resizes responsively */
  .italic{ font-style: italic; }
  
  /* Modal */
  .hidden{ display: none !important; }
  .modal{ position: fixed; inset: 0; z-index: 60; }
  .modal__backdrop{ position: absolute; inset: 0; background: rgba(0,0,0,.6); }
  .modal__dialog{
    position: relative; z-index: 1; width: min(768px, 92vw); margin: 6vh auto; background: color-mix(in oklab, var(--bgsoft), transparent 10%);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg); box-shadow: var(--shadow-deep);
  }
  .modal__head{ display:flex; align-items:flex-start; justify-content:space-between; gap: 16px; padding: 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .modal__body{
    padding: 20px; max-height: 70vh; overflow: auto;
    scrollbar-width: none;
  }
  .modal__body::-webkit-scrollbar{ display:none; }
  .modal__foot{ padding: 20px; display:flex; justify-content:flex-end; gap: 12px; }
  .rule{ border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 18px 0; }
  
  .stack > * + *{ margin-top: 12px; }
  .stack-rows > * + *{ margin-top: 12px; }
  .list{ padding-left: 18px; color: var(--muted); }
  .list li{ margin: 6px 0; }
  
  /* Counters */
  .counter{ display:flex; flex-wrap:wrap; gap: 12px; }
  .counter__box{
    min-width: 86px; text-align: center; background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2); padding: 12px; border-radius: var(--radius-md);
  }
  .counter__value{ font-size: 28px; font-weight: 800; color: var(--accent); }
  .counter__value--danger{ color: var(--danger); }
  .counter__label{ font-size: 12px; color: var(--muted); }
  
  /* Video embeds */
  .ratio{ aspect-ratio: 16/9; overflow:hidden; border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,.1); background: #0a0d1d; }
  .lazy-embed{ width: 100%; height: 100%; border: 0; }
  
  /* Footer */
  .footer{ padding: 48px 0; color: var(--muted); font-size: 14px; }
  .footer__bar{ display:flex; justify-content:space-between; gap: 12px; flex-wrap: wrap; }
  
  .mb-75{
    padding-bottom: 5px;;
  }

  @media screen and (min-width: 480px) {
    .mb-75{
        padding-bottom: 75px;;
      }
  }
  
/* ═══════════════════════════════════
   GEERVANEE LEARNING PATH — DARK PREMIUM STYLE
═══════════════════════════════════ */

.path-progress{
display:flex;
align-items:center;
justify-content:center;
gap:18px;
flex-wrap:wrap;
margin-top:18px;
}

.path-step{
padding:14px 20px;
border-radius:14px;
font-weight:700;
min-width:160px;
text-align:center;
transition:all .25s ease;
box-shadow:0 6px 18px rgba(0,0,0,0.25);
background:#161a33;
border:1px solid rgba(255,255,255,0.08);
}

/* LEVEL 1 COMPLETED */
.path-step.completed{
background:linear-gradient(135deg,#1e3a2f,#134e4a);
color:#36d399;
border:1px solid rgba(54,211,153,0.35);
}

/* CURRENT LEVEL */
.path-step.active{
background:linear-gradient(135deg,#7c5cff,#5235e8);
color:#fff;
box-shadow:0 10px 26px rgba(124,92,255,0.45);
transform:scale(1.08);
}

/* NEXT LEVEL */
.path-step.upcoming{
background:#12152a;
color:#8c92c9;
border:1px dashed rgba(255,255,255,0.15);
}

/* CONNECTOR LINE */
.path-line{
width:60px;
height:4px;
border-radius:10px;
background:linear-gradient(to right,#5235e8,#19d3da);
}

/* MOBILE */
@media(max-width:640px){
.path-progress{ gap:10px; }
.path-line{ width:30px; }
}