/* ============================================================
     SKILLPARKHO BRAND TOKENS
     ============================================================ */
  .sp-overlay, .sp-bottombar{
    --sp-navy:      #0B1026;   /* base / text */
    --sp-navy-2:    #141B3C;   /* softer navy */
    --sp-red:       #EF4444;   /* logo red accent */
    --sp-red-dark:  #DC2626;   /* hover */
    --sp-white:     #FFFFFF;
    --sp-ink:       #0B1026;
    --sp-muted:     #5A6178;   /* labels / secondary text */
    --sp-line:      #E6E8F0;   /* borders */
    --sp-field-bg:  #F7F8FC;   /* input background */
    --sp-radius:    18px;
    --sp-shadow:    0 30px 80px -20px rgba(11,16,38,.45);
  }

  .sp-overlay *, .sp-bottombar *{ box-sizing:border-box; }

  /* ============================================================
     POPUP  ——  THIS is the part you copy into your website
     ============================================================ */
  .sp-overlay{
    position:fixed; inset:0; z-index:9999;
    background:rgba(6,9,24,.72);
    backdrop-filter:blur(4px);
    display:flex; align-items:center; justify-content:center;
    padding:20px;
    opacity:0; visibility:hidden; transition:opacity .28s ease;
  }
  .sp-overlay.open{ opacity:1; visibility:visible; }

  .sp-modal{
    position:relative;
    width:100%; max-width:760px;
    background:var(--sp-white);
    border-radius:var(--sp-radius);
    box-shadow:var(--sp-shadow);
    overflow:hidden;
    transform:translateY(18px) scale(.98);
    transition:transform .3s cubic-bezier(.2,.8,.25,1);
  }
  .sp-overlay.open .sp-modal{ transform:translateY(0) scale(1); }

  /* close button */
  .sp-close{
    position:absolute; top:14px; right:14px; z-index:5;
    width:34px; height:34px; border-radius:50%;
    border:none; cursor:pointer;
    background:rgba(11,16,38,.06); color:var(--sp-navy);
    font-size:20px; line-height:1; display:grid; place-items:center;
    transition:.2s;
  }
  .sp-close:hover{ background:var(--sp-red); color:#fff; }

  /* ---- TOP BAND ---- */
  .sp-top{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:24px;
    padding:28px 30px 4px;
  }
  .sp-headline h2{
    font-family:'Manrope',sans-serif; font-weight:700;
    font-size:clamp(18px,2.6vw,24px); color:var(--sp-navy);
    margin:0; line-height:1.15;
  }
  .sp-headline h2 .brand{ color:var(--sp-red); }
  .sp-headline .by{
    font-family:'Manrope',sans-serif; font-weight:800;
    font-size:clamp(20px,3vw,28px); color:var(--sp-navy);
    margin:2px 0 6px; line-height:1.1;
    white-space:nowrap;                 /* keep on a single line */
  }
  .sp-headline .by span{ color:var(--sp-red); }
  .sp-headline .founder{
    font-size:13px; color:var(--sp-muted); font-weight:500;
  }
  .sp-headline .founder b{ color:var(--sp-navy); font-weight:600; }

  /* trained / students */
  .sp-trained{
    border-left:1px solid var(--sp-line);
    padding-left:18px; align-self:center;
  }
  .sp-trained h3{
    font-family:'Manrope',sans-serif; font-weight:800;
    font-size:20px; color:var(--sp-navy); margin:0 0 8px;
  }
  .sp-avatars{ display:flex; align-items:center; }
  .sp-avatars .a{
    width:34px; height:34px; border-radius:50%;
    border:2px solid #fff; margin-left:-9px;
    object-fit:cover; object-position:center;
    background-size:cover; background-position:center;
  }
  .sp-avatars .a:first-child{ margin-left:0; }
  .sp-avatars .a1{ background:linear-gradient(135deg,#f59e0b,#b45309); }
  .sp-avatars .a2{ background:linear-gradient(135deg,#ef4444,#7f1d1d); }
  .sp-avatars .a3{ background:linear-gradient(135deg,#3b82f6,#1e3a8a); }
  .sp-avatars .a4{ background:linear-gradient(135deg,#10b981,#065f46); }
  .sp-avatars .count{
    width:42px; height:42px; border-radius:50%; margin-left:-9px;
    background:var(--sp-red); color:#fff; border:2px solid #fff;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center; line-height:1.02;
    font-family:'Manrope',sans-serif; font-weight:800; font-size:13px;
    box-shadow:0 4px 10px -3px rgba(239,68,68,.55);
    z-index:1;
  }
  .sp-avatars .count small{ font-weight:600; font-size:6.5px; letter-spacing:.2px; margin-top:1px; }
  .sp-trained .region{ margin-top:8px; line-height:1.3; }
  .sp-trained .region b{
    display:block; color:var(--sp-navy); font-weight:700;
    font-size:13.5px; font-family:'Manrope',sans-serif;
    white-space:nowrap;
  }
  .sp-trained .region .reg-loc{
    display:inline-flex; align-items:center; gap:4px;
    margin-top:2px; color:var(--sp-muted); font-size:11.5px; font-weight:500;
    white-space:nowrap;
  }
  .sp-trained .region .reg-loc svg{ flex:none; }

  /* ---- FORM ---- */
  .sp-form{
    background:#fff;
    border-top:1px solid var(--sp-line);
    margin-top:22px;
    padding:24px 30px 28px;
  }
  .sp-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:16px 20px;
  }
  .sp-field label{
    display:block; font-size:14px; font-weight:600;
    color:var(--sp-navy); margin-bottom:7px;
  }
  .sp-field label .req{ color:var(--sp-red); }
  .sp-field input{
    width:100%; height:50px; padding:0 15px;
    font-family:'Inter',sans-serif; font-size:15px; color:var(--sp-navy);
    background:var(--sp-field-bg); border:1.5px solid var(--sp-line);
    border-radius:11px; outline:none; transition:.18s;
  }
  .sp-field input::placeholder{ color:#9aa0b5; }
  .sp-field input:focus{
    border-color:var(--sp-red); background:#fff;
    box-shadow:0 0 0 3px rgba(239,68,68,.12);
  }
  .sp-field input.err{ border-color:var(--sp-red); background:#fef2f2; }
  .sp-err{ display:none; color:var(--sp-red); font-size:12px; margin-top:5px; font-weight:500; }
  .sp-field.show-err .sp-err{ display:block; }

  /* phone with fixed +91 prefix */
  .sp-phone{
    display:flex; align-items:center; overflow:hidden;
    background:var(--sp-field-bg); border:1.5px solid var(--sp-line);
    border-radius:11px; transition:.18s;
  }
  .sp-phone:focus-within{
    border-color:var(--sp-red); background:#fff;
    box-shadow:0 0 0 3px rgba(239,68,68,.12);
  }
  .sp-phone .sp-prefix{
    display:flex; align-items:center; height:50px; padding:0 12px;
    font-size:15px; font-weight:600; color:var(--sp-navy);
    background:rgba(11,16,38,.04); border-right:1.5px solid var(--sp-line);
  }
  .sp-phone input{
    flex:1; height:50px; padding:0 14px; border:none; background:transparent;
    font-family:'Inter',sans-serif; font-size:15px; color:var(--sp-navy); outline:none;
  }
  .sp-phone input:focus{ box-shadow:none; background:transparent; }

  /* course dropdown */
  .sp-field .sp-select{
    width:100%; height:50px; padding:0 40px 0 15px;
    font-family:'Inter',sans-serif; font-size:15px; color:var(--sp-navy);
    background-color:var(--sp-field-bg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6178' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 15px center;
    border:1.5px solid var(--sp-line); border-radius:11px; outline:none;
    appearance:none; -webkit-appearance:none; cursor:pointer; transition:.18s;
  }
  .sp-field .sp-select:focus{
    border-color:var(--sp-red); background-color:#fff;
    box-shadow:0 0 0 3px rgba(239,68,68,.12);
  }
  .sp-course-other{ margin-top:10px; display:none; }
  .sp-course-other.show{ display:block; }

  /* unified error visuals */
  .sp-field.show-err input,
  .sp-field.show-err .sp-select{ border-color:var(--sp-red); background-color:#fef2f2; }
  .sp-field.show-err .sp-phone{ border-color:var(--sp-red); background:#fef2f2; }
  .sp-field.show-err .sp-phone input{ background:transparent; }

  /* ---- CTA ROW ---- */
  .sp-cta-row{
    display:flex; flex-direction:column; gap:16px; margin-top:20px;
  }
  .sp-proof-main{
    display:flex; align-items:center; gap:8px;
    font-family:'Manrope',sans-serif; font-weight:700;
    font-size:15.5px; color:var(--sp-navy); line-height:1.2;
  }
  .sp-proof-main b{ color:var(--sp-red); font-weight:800; }
  .sp-proof-main svg{ flex:none; }
  .sp-proof-sub{
    margin:6px 0 0; padding-left:26px;
    font-size:12.5px; color:var(--sp-muted); line-height:1.45;
  }
  .sp-submit{
    width:100%;
    font-family:'Manrope',sans-serif; font-weight:800;
    font-size:15px; letter-spacing:.4px; color:#fff;
    background:var(--sp-red); border:none; cursor:pointer;
    padding:16px 26px; border-radius:12px;
    box-shadow:0 12px 24px -8px rgba(239,68,68,.6);
    transition:.2s;
  }
  .sp-submit:hover{ background:var(--sp-red-dark); transform:translateY(-1px); }
  .sp-submit:active{ transform:translateY(0); }

  /* ---- SUCCESS STATE ---- */
  .sp-success{
    display:none; text-align:center; padding:50px 30px 46px;
  }
  .sp-success.show{ display:block; }
  .sp-form.hide{ display:none; }
  .sp-top.hide{ display:none; }
  .sp-success .check{
    width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
    background:var(--sp-red); display:grid; place-items:center;
  }
  .sp-success .check svg{ width:32px; height:32px; }
  .sp-success h3{
    font-family:'Manrope',sans-serif; font-weight:800;
    font-size:24px; color:var(--sp-navy); margin:0 0 8px;
  }
  .sp-success p{ color:var(--sp-muted); font-size:15px; margin:0; max-width:360px; margin-inline:auto; }

  /* ============================================================
     MOBILE STICKY ACTION BAR (shown after popup closed w/o submit)
     ============================================================ */
  .sp-bottombar{
    position:fixed; left:12px; right:12px; z-index:9990;
    bottom:calc(12px + env(safe-area-inset-bottom));
    display:none; flex-direction:column; align-items:stretch;   /* hidden until shown; desktop never shows */
  }
  .sp-bottombar.show{ display:flex; animation:spBarUp .38s cubic-bezier(.2,.9,.3,1); }
  .sp-dock{ display:flex; align-items:center; gap:10px; }

  /* live mentor presence chip */
  .sp-presence{
    align-self:flex-start; display:inline-flex; align-items:center; gap:9px;
    background:#fff; border:1px solid #EEF0F6; border-radius:100px;
    padding:5px 14px 5px 7px; margin-bottom:10px;
    box-shadow:0 10px 22px -12px rgba(11,16,38,.35);
  }
  .sp-presence-av{ display:flex; }
  .sp-presence-av img{
    width:26px; height:26px; border-radius:50%; border:2px solid #fff;
    margin-left:-9px; object-fit:cover;
  }
  .sp-presence-av img:first-child{ margin-left:0; }
  .sp-presence-txt{ display:flex; flex-direction:column; line-height:1.2; }
  .sp-online{
    display:flex; align-items:center; gap:6px;
    font-family:'Manrope',sans-serif; font-weight:700; font-size:12px; color:var(--sp-navy);
  }
  .sp-online i{
    position:relative; width:8px; height:8px; border-radius:50%; background:#22C55E;
    box-shadow:0 0 0 2px rgba(34,197,94,.22);
  }
  .sp-online i::after{
    content:""; position:absolute; inset:0; border-radius:50%; background:#22C55E;
    animation:spPing 1.7s cubic-bezier(0,0,.2,1) infinite;
  }
  .sp-presence-txt small{ font-size:10.5px; color:var(--sp-muted); font-weight:500; }
  @keyframes spBarUp{ from{ transform:translateY(34px); opacity:0; } to{ transform:none; opacity:1; } }

  /* primary: Apply Now */
  .sp-bb-primary{
    position:relative; overflow:hidden; flex:1;
    display:flex; align-items:center; justify-content:center; gap:8px;
    height:56px; border:none; cursor:pointer; border-radius:16px;
    background:linear-gradient(135deg,#F4605A,var(--sp-red));
    color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:15.5px; letter-spacing:.3px;
    box-shadow:0 14px 28px -10px rgba(239,68,68,.65);
  }
  .sp-bb-primary .lb, .sp-bb-primary svg{ position:relative; z-index:1; }
  .sp-bb-primary svg{ width:18px; height:18px; }
  .sp-bb-primary:active{ transform:translateY(1px); }
  .sp-bb-primary .shine{
    position:absolute; top:0; left:-60%; width:38%; height:100%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform:skewX(-20deg); animation:spShine 3.4s ease-in-out infinite;
  }
  @keyframes spShine{ 0%{ left:-60%; } 34%,100%{ left:140%; } }

  /* secondary: round icon buttons */
  .sp-round{
    position:relative; flex:none; width:56px; height:56px; border-radius:16px;
    display:grid; place-items:center; text-decoration:none; background:#fff;
    border:1px solid #EEF0F6;
    box-shadow:0 1px 2px rgba(11,16,38,.06), 0 12px 22px -12px rgba(11,16,38,.34);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .sp-round::before{
    content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:40px; height:40px; border-radius:50%; z-index:0;
  }
  .sp-round-call::before{ background:radial-gradient(circle at 50% 38%, rgba(11,16,38,.11), rgba(11,16,38,.04)); }
  .sp-round-wa::before{ background:radial-gradient(circle at 50% 38%, rgba(37,211,102,.22), rgba(37,211,102,.08)); }
  .sp-round svg{ position:relative; z-index:1; }
  .sp-round-call svg{ width:22px; height:22px; fill:var(--sp-navy); transform-origin:50% 62%; animation:spRing 4s ease-in-out infinite; }
  .sp-round-wa svg{ width:24px; height:24px; fill:#25D366; animation:spWaPop 4s ease-in-out infinite; animation-delay:-2s; }
  .sp-round:active{ transform:scale(.95); box-shadow:0 3px 8px -5px rgba(11,16,38,.4); }

  @keyframes spRing{
    0%,58%,100%{ transform:rotate(0); }
    61%{ transform:rotate(15deg); }  64%{ transform:rotate(-13deg); }
    67%{ transform:rotate(11deg); }  70%{ transform:rotate(-8deg); }
    73%{ transform:rotate(5deg); }   76%{ transform:rotate(-3deg); }  79%{ transform:rotate(0); }
  }
  @keyframes spWaPop{
    0%,70%,100%{ transform:scale(1); }
    78%{ transform:scale(1.16); }  86%{ transform:scale(.95); }  92%{ transform:scale(1.05); }
  }

  /* live "online" ping on WhatsApp */
  .sp-round-wa .ping{
    position:absolute; top:10px; right:10px; width:9px; height:9px; border-radius:50%;
    background:#25D366; box-shadow:0 0 0 2px #fff;
  }
  .sp-round-wa .ping::after{
    content:""; position:absolute; inset:0; border-radius:50%; background:#25D366;
    animation:spPing 1.7s cubic-bezier(0,0,.2,1) infinite;
  }
  @keyframes spPing{ 0%{ transform:scale(1); opacity:.65; } 80%,100%{ transform:scale(2.6); opacity:0; } }

  /* ---- desktop: show the SAME dock, centered at the bottom ---- */
  @media (min-width:641px){
    .sp-bottombar{
      left:50%; right:auto;
      bottom:calc(20px + env(safe-area-inset-bottom));
      transform:translateX(-50%);
      align-items:center;                 /* center the presence chip over the dock */
    }
    .sp-bottombar.show{ transform:translateX(-50%); animation:spBarUpC .38s cubic-bezier(.2,.9,.3,1); }
    .sp-presence{ align-self:center; }

    /* a touch bigger so it has presence on wide screens */
    .sp-dock{ gap:12px; }
    .sp-bb-primary{ flex:0 0 auto; height:60px; padding:0 34px; font-size:16px; }
    .sp-round{ width:60px; height:60px; }

    /* hover interactions (desktop only) */
    .sp-bb-primary{ transition:transform .18s ease, box-shadow .18s ease; }
    .sp-bb-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 36px -12px rgba(239,68,68,.7); }
    .sp-round{ transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    .sp-round:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -12px rgba(11,16,38,.4); }
    .sp-round-call:hover{ border-color:color-mix(in srgb,var(--sp-navy) 30%,#EEF0F6); }
    .sp-round-wa:hover{ border-color:#25D366; }

    /* dismiss (×) button — desktop only */
    .sp-dockclose{ display:grid; }
  }
  @keyframes spBarUpC{
    from{ transform:translate(-50%,34px); opacity:0; }
    to{ transform:translateX(-50%); opacity:1; }
  }

  /* dismiss button: hidden on mobile, shown on desktop via the rule above */
  .sp-dockclose{
    display:none; position:absolute; top:-9px; right:-9px; z-index:3;
    width:24px; height:24px; border-radius:50%; cursor:pointer;
    border:1px solid #E7EAF3; background:#fff; color:var(--sp-muted);
    font-size:15px; line-height:1; place-items:center; padding:0;
    box-shadow:0 4px 10px -3px rgba(11,16,38,.3); transition:.15s;
  }
  .sp-dockclose:hover{ color:#fff; background:var(--sp-navy); border-color:var(--sp-navy); }


  @media (max-width:640px){
    .sp-overlay{ padding:0; align-items:flex-end; }
    .sp-modal{
      max-width:100%; border-radius:18px 18px 0 0;
      max-height:92vh; overflow-y:auto;
    }

    /* compact top */
    .sp-top{
      grid-template-columns:1fr; gap:10px; padding:34px 18px 0; text-align:center;
    }
    .sp-headline h2{ font-size:14px; }
    .sp-headline .by{ font-size:24px; margin:2px 0 4px; }
    .sp-headline .founder{ font-size:11.5px; line-height:1.35; }

    /* trained -> avatars row on top, text centered below (no overflow) */
    .sp-trained{
      border-left:none; border-top:1px solid var(--sp-line);
      padding-left:0; padding-top:12px; margin-top:2px;
      display:flex; flex-direction:column; align-items:center;
      justify-content:center; gap:8px; text-align:center;
    }
    .sp-trained h3{ display:none; }
    .sp-avatars .a{ width:28px; height:28px; }
    .sp-avatars .count{ width:38px; height:38px; font-size:11.5px; }
    .sp-trained .region b{ font-size:13px; }
    .sp-trained .region .reg-loc{ font-size:11px; }
    .sp-avatars .count small{ font-size:6px; }
    .sp-trained .region{ margin-top:0; font-size:12px; }

    /* form: keep 2 columns, tighter fields */
    .sp-form{ padding:16px 18px 22px; margin-top:16px; }
    .sp-grid{ grid-template-columns:1fr 1fr; gap:12px 10px; }
    .sp-field label{ font-size:12.5px; margin-bottom:5px; }
    .sp-field input{ height:46px; font-size:14px; padding:0 12px; }
    .sp-field .sp-select{ height:46px; font-size:14px; padding:0 36px 0 12px; }
    .sp-phone .sp-prefix{ height:46px; font-size:14px; padding:0 10px; }
    .sp-phone input{ height:46px; font-size:14px; padding:0 12px; }

    /* cta */
    .sp-cta-row{ gap:14px; margin-top:16px; }
    .sp-proof-main{ font-size:14.5px; }
    .sp-proof-sub{ font-size:12px; padding-left:24px; }
    .sp-submit{ padding:15px; font-size:14px; }
  }

  /* very small phones — shrink field text so full +91 number & email always show */
  @media (max-width:430px){
    .sp-form{ padding:16px 14px 20px; }
    .sp-grid{ gap:12px 8px; }
    .sp-field input,
    .sp-field .sp-select,
    .sp-phone input,
    .sp-phone .sp-prefix{ font-size:12.5px; }
    .sp-field input{ padding:0 9px; }
    .sp-field .sp-select{ padding:0 30px 0 9px; background-position:right 10px center; }
    .sp-phone .sp-prefix{ padding:0 8px; }
    .sp-phone input{ padding:0 8px; }
  }

  @media (prefers-reduced-motion:reduce){
    .sp-overlay,.sp-modal,.sp-submit{ transition:none; }
    .sp-bottombar.show{ animation:none; }
    .sp-bb-primary .shine, .sp-round-wa .ping::after{ animation:none; }
    .sp-round-call svg, .sp-round-wa svg{ animation:none; }
    .sp-round-wa .ping::after, .sp-online i::after{ display:none; }
  }

  /* ---- FLUID dock: scales smoothly to ANY phone width (no fixed steps) ---- */
  @media (max-width:640px){
    .sp-bottombar{ left:clamp(8px,3vw,12px); right:clamp(8px,3vw,12px); }
    .sp-dock{ gap:clamp(7px,2.4vw,10px); }
    .sp-bb-primary{
      height:clamp(46px,13.5vw,56px);
      font-size:clamp(13px,3.9vw,15.5px);
      gap:clamp(5px,1.8vw,8px);
    }
    .sp-bb-primary svg{ width:clamp(15px,4.2vw,18px); height:clamp(15px,4.2vw,18px); }
    .sp-round{
      width:clamp(46px,13.5vw,56px);
      height:clamp(46px,13.5vw,56px);
      border-radius:clamp(13px,3.6vw,16px);
    }
    .sp-round svg{ width:clamp(19px,5.6vw,23px); height:clamp(19px,5.6vw,23px); }
    .sp-presence{ gap:clamp(7px,2.2vw,9px); padding:5px clamp(11px,3vw,14px) 5px 6px; }
    .sp-presence-av img{ width:clamp(22px,6.4vw,26px); height:clamp(22px,6.4vw,26px); }
    .sp-online{ font-size:clamp(11px,3.2vw,12px); }
    .sp-presence-txt small{ font-size:clamp(9.5px,2.8vw,10.5px); }
  }