/* =====================================================
     JOBAAJ AI PREP — NEW SECTIONS (Hero · How it works · Domains)
     All rules are scoped under .jb-prep so they never affect the
     existing Bootstrap / Space layout on this page.
  ===================================================== */
  /* smooth in-page anchor scrolling (e.g. hero CTA → #domains) */
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
  .jb-prep{
    --blue-700:#1E40C4;
    --blue-600:#2954E0;
    --blue-500:#3E68F0;
    --blue-100:#DCE6FF;
    --blue-50:#EEF3FF;
    --ink:#0F172A;
    --grey-600:#52607A;
    --grey-400:#8896AC;
    --grey-200:#E4E8F0;
    --grey-100:#F1F4F9;
    --bg:#FFFFFF;
    --bg-soft:#F7F9FC;
    --green:#16A369;
    --green-50:#E9FAF3;
    --radius-lg:20px;
    --radius-md:14px;
    --shadow-sm:0 6px 18px -10px rgba(15,23,42,0.10);
    --shadow-md:0 20px 40px -20px rgba(15,23,42,0.16);
    --shadow-lg:0 30px 60px -24px rgba(15,23,42,0.22);
    font-family:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  }
  .jb-prep a{text-decoration:none; color:inherit;}
  .jb-prep p{margin:0;}
  .jb-prep .wrap{max-width:1240px; margin:0 auto; padding:0 32px;}

  @media (prefers-reduced-motion: reduce){
    .jb-prep *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; animation-delay:0ms !important; transition-duration:0.001ms !important;}
  }

  /* ---------- shared bits ---------- */
  .jb-prep .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:13px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--blue-600);
    background:var(--blue-50);
    border:1px solid var(--blue-100);
    padding:7px 14px 7px 11px; border-radius:999px;
  }
  .jb-prep .eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--blue-600);}
  .jb-prep .section-head{text-align:center; max-width:640px; margin:0 auto 60px;}
  .jb-prep .section-head .eyebrow{margin-bottom:18px;}
  .jb-prep .section-head h2{font-size:clamp(28px,3.2vw,40px); font-weight:800; letter-spacing:-0.02em; margin-bottom:14px; color:var(--ink);}
  .jb-prep .section-head p{color:var(--grey-600); font-size:16.5px; line-height:1.6;}

  .jb-prep .btn-primary{
    background:var(--blue-600); color:#fff; font-weight:700; font-size:15.5px;
    padding:15px 26px; border-radius:12px; border:none;
    display:inline-flex; align-items:center; gap:8px;
    box-shadow:0 14px 28px -10px rgba(41,84,224,0.45);
    transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .jb-prep .btn-primary:hover{transform:translateY(-2px); background:var(--blue-700); box-shadow:0 18px 32px -8px rgba(41,84,224,0.5);}
  .jb-prep .btn-secondary{
    background:#fff; color:var(--ink); font-weight:700; font-size:15.5px;
    padding:15px 24px; border-radius:12px; border:1.5px solid var(--grey-200);
    display:inline-flex; align-items:center; gap:8px;
    transition:border-color .18s ease, background .18s ease;
  }
  .jb-prep .btn-secondary:hover{border-color:var(--blue-500); background:var(--blue-50);}

  /* decorative dotted / diagonal patterns */
  .jb-prep .dots{
    position:absolute; width:170px; height:170px;
    background-image:radial-gradient(circle, #C7D3F0 1.6px, transparent 1.6px);
    background-size:16px 16px;
    opacity:0.7;
    pointer-events:none;
  }
  .jb-prep .diagonals{
    position:absolute; width:220px; height:220px;
    background-image:repeating-linear-gradient(45deg, rgba(41,84,224,0.14) 0px, rgba(41,84,224,0.14) 1.5px, transparent 1.5px, transparent 13px);
    -webkit-mask-image:radial-gradient(circle, black 40%, transparent 75%);
            mask-image:radial-gradient(circle, black 40%, transparent 75%);
    pointer-events:none;
  }

  /* =====================================================
     SECTION 1 — HERO
  ===================================================== */
  .jb-prep .hero{position:relative; padding:116px 0 110px; overflow:hidden;}
  .jb-prep .hero .dots{top:64px; left:max(12px, calc((100% - 1240px) / 2 - 24px)); opacity:0.45;}
  .jb-prep .hero .diagonals{bottom:-40px; right:-20px; width:320px; height:320px;}
  /* Hero dot pattern (dots.svg) — decorative only. The text column's left edge
     moves inward as the viewport narrows, so the pattern has to shrink as well
     as pull further off-canvas, then drop out once the hero stacks to one column. */
  .jb-prep .hero .hero-dots{bottom:11rem; left:-5rem; width:15rem; height:15rem;}
  @media (max-width:1400px){ .jb-prep .hero .hero-dots{left:-7rem;} }
  @media (max-width:1200px){ .jb-prep .hero .hero-dots{left:-6rem; width:10rem; height:10rem;} }
  @media (max-width:920px) { .jb-prep .hero .hero-dots{left:-5rem; bottom:6rem; width:8rem; height:8rem; opacity:.6;} }
  @media (max-width:767.98px){ .jb-prep .hero .hero-dots{display:none;} }
  .jb-prep .hero-grid{
    position:relative; z-index:2;
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
  }
  .jb-prep .brand-mark{
    display:inline-flex; align-items:center; gap:9px;
    padding:8px 15px 8px 10px; border-radius:999px;
    background:#fff; border:1px solid var(--grey-200); box-shadow:var(--shadow-sm);
    margin-bottom:28px;
  }
  .jb-prep .brand-mark .icon{
    width:26px; height:26px; border-radius:8px; background:var(--blue-600);
    display:flex; align-items:center; justify-content:center; color:#fff;
  }
  .jb-prep .brand-mark span{font-size:13px; font-weight:700; letter-spacing:0.02em; color:var(--ink);}

  .jb-prep .hero h1{
    font-size:clamp(38px,4.4vw,58px); line-height:1.08; letter-spacing:-0.025em; font-weight:800;
    margin-bottom:20px; color:var(--ink);
  }
  .jb-prep .hero h1 .hl{color:var(--blue-600);}
  .jb-prep .hero p.lead{
    font-size:18px; line-height:1.65; color:#3E4B66; max-width:490px; margin-bottom:34px;
    /* soft backdrop behind just this paragraph, not the whole column */
    background:rgba(255,255,255,0.55);
    -webkit-backdrop-filter:blur(8px);
            backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,0.75);
    border-radius:14px;
    padding:16px 18px;
  }
  /* bigger screens: plain-text lead — remove box padding/backdrop but keep a little bottom margin */
  @media (min-width:921px){
    .jb-prep .hero p.lead{padding:0; margin-bottom:22px; background:transparent; border:0;}
  }
  /* Question Bank section: ~50px top breathing room on larger screens */
  @media (min-width:992px){
    .gradient-y-sm-primary > .container{padding-top:50px;}
  }
  .jb-prep .cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:48px;}

  .jb-prep .stat-row{display:flex; gap:40px; flex-wrap:wrap;}
  .jb-prep .stat b{display:block; font-size:26px; font-weight:800; color:var(--ink);}
  .jb-prep .stat span{font-size:13px; color:var(--grey-400); font-weight:600;}

  /* hero mock-interview carousel */
  @keyframes jbPulse{0%,100%{opacity:1;} 50%{opacity:.4;}}
  .jb-prep .stage{position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;}
  .jb-prep .hf-viewport{position:relative; width:100%; max-width:360px; display:flex; align-items:center; justify-content:center;}
  .jb-prep .hf-card{
    position:relative; z-index:1; width:100%;
    border-radius:22px; background:#fff;
    border:1px solid var(--grey-200);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    transition:transform .3s ease, opacity .3s ease;
  }
  .jb-prep .hf-side{
    position:absolute; top:10px; bottom:-6px; width:76%; border-radius:22px;
    background:#fff; border:1px solid var(--grey-200); box-shadow:var(--shadow-lg);
    overflow:hidden; opacity:.82;
    transition:transform .4s ease, opacity .4s ease;
  }
  .jb-prep .hf-side-banner{
    padding:14px 16px 12px;
    background:linear-gradient(135deg, var(--g1,#6D5CE0), var(--g2,#8B7CF0));
  }
  .jb-prep .hf-side-role{color:#fff; font-weight:800; font-size:14px; letter-spacing:-0.01em; margin-bottom:2px;}
  .jb-prep .hf-side-sub{color:rgba(255,255,255,0.75); font-size:10px; font-weight:600;}
  .jb-prep .hf-side-tags{display:flex; gap:5px; flex-wrap:wrap; margin-top:8px;}
  .jb-prep .hf-side-left{left:-34px; transform:rotate(-4deg);}
  .jb-prep .hf-side-right{right:-34px; transform:rotate(4deg);}
  .jb-prep .hf-banner{
    padding:18px 18px 16px;
    background:linear-gradient(135deg, var(--g1,#0044CC), var(--g2,#0022AA));
    transition:background .3s ease;
  }
  .jb-prep .hf-banner-top{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px;}
  .jb-prep .hf-tech{display:flex; align-items:center; gap:5px; font-family:Consolas,Menlo,monospace; font-size:9.5px; font-weight:700; letter-spacing:0.06em; color:rgba(255,255,255,0.4); white-space:nowrap;}
  .jb-prep .hf-status{
    display:inline-flex; align-items:center; gap:6px;
    background:rgba(255,255,255,0.16); color:#fff; font-size:10.5px; font-weight:700;
    letter-spacing:0.05em; padding:5px 10px; border-radius:999px;
  }
  .jb-prep .hf-status .pulse{width:6px; height:6px; border-radius:50%; background:#43E67D; animation:jbPulse 1.4s ease-in-out infinite;}
  .jb-prep .hf-role{color:#fff; font-weight:800; font-size:22px; letter-spacing:-0.01em; margin-bottom:3px;}
  .jb-prep .hf-sub{color:rgba(255,255,255,0.8); font-size:13px; font-weight:600; margin-bottom:10px;}
  .jb-prep .hf-tags{display:flex; gap:7px; flex-wrap:wrap;}
  .jb-prep .hf-tag{
    background:rgba(4,18,84,0.55); color:#fff; font-size:10.5px; font-weight:700;
    padding:5px 10px; border-radius:999px; display:inline-flex; align-items:center; gap:5px;
    border:1px solid rgba(255,255,255,0.22);
  }
  .jb-prep .hf-body{padding:16px 18px;}
  .jb-prep .hf-companies{margin-top:6px; padding-top:12px; border-top:1px solid rgba(255,255,255,0.18); display:flex; flex-direction:column; gap:10px;}
  .jb-prep .hf-companies-row{display:flex; align-items:center;}
  .jb-prep .hf-companies-logos{display:flex; align-items:center;}
  .jb-prep .hf-logo{
    width:28px; height:28px; border-radius:7px; background:#fff; color:var(--ink); border:1px solid rgba(15,23,42,0.06);
    display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800;
    margin-left:4px; box-shadow:0 4px 8px -3px rgba(15,23,42,0.35);
  }
  .jb-prep .hf-logo:first-child{margin-left:0;}
  .jb-prep .hf-logo img{width:100%; height:100%; object-fit:cover; border-radius:7px; display:block;}
  .jb-prep .hf-logo .hf-fb-txt{display:none; font-size:10px; font-weight:800; color:var(--ink);}
  .jb-prep .hf-logo.hf-fallback .hf-fb-txt{display:block;}
  .jb-prep .hf-companies-txt{font-size:11px; color:rgba(255,255,255,0.75); font-weight:600; letter-spacing:0.02em;}
  .jb-prep .hf-listen{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:14px; background:var(--blue-50); margin-bottom:14px;
  }
  .jb-prep .hf-listen-ico{
    flex-shrink:0; width:36px; height:36px; border-radius:11px; background:#fff; color:var(--blue-600);
    display:flex; align-items:center; justify-content:center; box-shadow:0 2px 8px -3px rgba(15,23,42,0.15);
  }
  .jb-prep .hf-listen-main{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;}
  .jb-prep .hf-wave{display:flex; align-items:center; gap:3px; height:16px;}
  .jb-prep .hf-wave span{width:3px; border-radius:2px; background:var(--blue-500); animation:jbWv 1s ease-in-out infinite;}
  .jb-prep .hf-wave span:nth-child(1){height:5px;} .jb-prep .hf-wave span:nth-child(2){height:11px; animation-delay:.1s;}
  .jb-prep .hf-wave span:nth-child(3){height:7px; animation-delay:.2s;} .jb-prep .hf-wave span:nth-child(4){height:14px; animation-delay:.3s;}
  .jb-prep .hf-wave span:nth-child(5){height:6px; animation-delay:.4s;} .jb-prep .hf-wave span:nth-child(6){height:12px; animation-delay:.5s;}
  .jb-prep .hf-wave span:nth-child(7){height:5px; animation-delay:.6s;} .jb-prep .hf-wave span:nth-child(8){height:9px; animation-delay:.7s;}
  @keyframes jbWv{0%,100%{transform:scaleY(0.5);} 50%{transform:scaleY(1);}}
  .jb-prep .hf-listen-txt{font-size:10.5px; color:var(--grey-600); font-weight:600; white-space:nowrap;}
  .jb-prep .hf-listen-time{
    flex-shrink:0; min-width:48px; display:flex; flex-direction:column; align-items:center; gap:1px;
    font-size:12px; font-weight:800; color:var(--ink); line-height:1.15;
  }
  .jb-prep .hf-listen-time em{font-style:normal; font-size:9px; color:var(--grey-400); font-weight:600; text-transform:uppercase; letter-spacing:0.04em;}
  .jb-prep .hf-cta{
    background:var(--ink); color:#fff; font-weight:700; font-size:14px;
    padding:13px 16px 13px 18px; border-radius:999px; display:flex; align-items:center; justify-content:space-between; gap:8px;
    margin-bottom:14px; transition:background .18s ease, transform .18s ease;
  }
  .jb-prep .hf-cta:hover{background:#000; transform:translateY(-1px);}
  .jb-prep .hf-feats{display:flex; align-items:stretch; border:1px solid var(--grey-200); border-radius:14px; background:#fff; overflow:hidden; margin-bottom:14px;}
  .jb-prep .hf-feat{flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 4px; text-align:center;}
  .jb-prep .hf-feat + .hf-feat{border-left:1px solid var(--grey-200);}
  .jb-prep .hf-feat-ico{width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center;}
  .jb-prep .hf-feat-ico.purple{background:#F1E9FF; color:#6D5CE0;}
  .jb-prep .hf-feat-ico.green{background:var(--green-50); color:var(--green);}
  .jb-prep .hf-feat-ico.blue{background:var(--blue-50); color:var(--blue-600);}
  .jb-prep .hf-feat span{font-size:10.5px; font-weight:700; color:var(--grey-600); line-height:1.3;}
  .jb-prep .hf-trust{
    display:flex; align-items:center; justify-content:space-between;
    background:#F7F9FC; border:1px solid var(--grey-200); border-radius:12px; padding:10px 12px;
  }
  .jb-prep .hf-avatars{display:flex; align-items:center; gap:8px;}
  .jb-prep .hf-avatars .stack{display:flex;}
  .jb-prep .hf-avatar-dot{
    width:24px; height:24px; border-radius:50%; border:2px solid #fff; margin-left:-8px;
    background:var(--blue-100); display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; color:var(--blue-600);
  }
  .jb-prep .hf-avatar-dot img{width:100%; height:100%; object-fit:cover; border-radius:50%; display:block;}
  .jb-prep .hf-avatar-dot:first-child{margin-left:0;}
  .jb-prep .hf-trust-txt{font-size:10.5px; color:var(--grey-600); font-weight:600;}
  .jb-prep .hf-rating{display:flex; align-items:center; gap:4px; font-size:12px; font-weight:800; color:var(--ink);}

  .jb-prep .stage-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:40px; height:40px; border-radius:50%;
    background:#fff; border:1px solid var(--grey-200); box-shadow:var(--shadow-sm);
    display:flex; align-items:center; justify-content:center; color:var(--ink); z-index:3;
    transition:background .18s ease, border-color .18s ease;
  }
  .jb-prep .stage-arrow:hover{background:var(--blue-50); border-color:var(--blue-100);}
  .jb-prep .stage-arrow.left{left:-40px;} .jb-prep .stage-arrow.right{right:-40px;}

  .jb-prep .hf-dots{display:flex; align-items:center; gap:7px;}
  .jb-prep .hf-dot{
    width:7px; height:7px; border-radius:50%; background:var(--grey-200); border:none; padding:0;
    transition:width .2s ease, background .2s ease;
  }
  .jb-prep .hf-dot.active{width:20px; border-radius:4px; background:var(--blue-600);}

  @media (max-width:920px){ .jb-prep .hero-grid{grid-template-columns:1fr;} }
  /* hide the hero mock-interview carousel on mobile screens only */
  @media (max-width:767.98px){ .jb-prep .stage{display:none;} }
  @media (max-width:460px){ .jb-prep .stage-arrow{display:none;} }

  /* =====================================================
     SECTION 2 — HOW IT WORKS
  ===================================================== */
  .jb-prep .how{background:var(--bg); padding:110px 0; position:relative; scroll-margin-top:90px;}
  .jb-prep .how .dots{top:40px; right:0;}
  .jb-prep .step-track{position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:26px; z-index:1;}
  .jb-prep .step-track::before{
    content:""; position:absolute; top:46px; left:calc(16.6% + 12px); right:calc(16.6% + 12px);
    height:2px; background:var(--grey-200); z-index:0;
  }
  @media (max-width:820px){
    .jb-prep .step-track{grid-template-columns:1fr; gap:18px;}
    .jb-prep .step-track::before{display:none;}
  }
  .jb-prep .step-card{
    position:relative; z-index:1; background:#fff;
    border:1px solid var(--grey-200); border-radius:var(--radius-lg);
    padding:32px 26px; box-shadow:var(--shadow-sm);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .jb-prep .step-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md);}
  .jb-prep .step-num{
    width:38px; height:38px; border-radius:11px; background:var(--blue-600); color:#fff;
    display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
    margin-bottom:22px;
  }
  .jb-prep .step-card:nth-child(2) .step-num{background:var(--green);}
  .jb-prep .step-card:nth-child(3) .step-num{background:#6D5CE0;}
  .jb-prep .step-card h3{font-size:19px; font-weight:800; margin-bottom:9px; letter-spacing:-0.01em;}
  .jb-prep .step-card p{color:var(--grey-600); font-size:14.5px; line-height:1.65;}

  /* =====================================================
     SECTION 3 — DOMAIN PRACTICE
  ===================================================== */
  .jb-prep .domains{background:var(--bg-soft); padding:110px 0; position:relative; overflow:hidden; scroll-margin-top:90px;}
  .jb-prep .domains .diagonals{top:-40px; left:-40px;}

  .jb-prep .filter-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:48px; position:relative; z-index:1;}
  .jb-prep .filter-pill{
    font-size:13.5px; font-weight:700; padding:11px 20px; border-radius:999px;
    border:1.5px solid var(--grey-200); background:#fff; color:var(--grey-600);
    transition:all .18s ease;
  }
  .jb-prep .filter-pill:hover{border-color:var(--blue-500); color:var(--blue-600);}
  .jb-prep .filter-pill.active{background:var(--blue-600); color:#fff; border-color:var(--blue-600);}

  .jb-prep .domain-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; z-index:1;}
  /* domain cards — mock-interview style (header tile + body) */
  .jb-prep .domain-item{position:relative;}
  .jb-prep .domain-card{
    background:#fff; border:1px solid rgba(99,102,241,0.08); border-radius:16px;
    overflow:hidden; box-shadow:0 1px 3px rgba(99,102,241,0.08);
    display:flex; flex-direction:column; height:100%; cursor:pointer;
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1);
  }
  .jb-prep .domain-card:hover{transform:translateY(-6px); box-shadow:0 16px 48px rgba(99,102,241,0.16); border-color:rgba(99,102,241,0.2);}
  .jb-prep .domain-card-header{
    position:relative; padding:2rem 1.5rem 1.5rem;
    background:linear-gradient(135deg, rgba(99,102,241,0.05), rgba(59,130,246,0.05));
    overflow:hidden;
  }
  .jb-prep .domain-card-header::before{
    content:""; position:absolute; top:-40%; right:-20%; width:120px; height:120px;
    background:radial-gradient(circle, rgba(99,102,241,0.08), transparent 70%);
    border-radius:50%;
  }
  .jb-prep .domain-card-icon{
    width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:1.5rem; margin-bottom:1rem; position:relative; z-index:1;
  }
  .jb-prep .domain-card-icon.pm{background:linear-gradient(135deg,#e0e7ff,#c7d2fe); color:#4f46e5;}
  .jb-prep .domain-card-icon.consulting{background:linear-gradient(135deg,#dbeafe,#bfdbfe); color:#2563eb;}
  .jb-prep .domain-card-icon.webdev{background:linear-gradient(135deg,#d1fae5,#a7f3d0); color:#059669;}
  .jb-prep .domain-card-icon.marketing{background:linear-gradient(135deg,#fef3c7,#fde68a); color:#d97706;}
  .jb-prep .domain-card-icon.data{background:linear-gradient(135deg,#cffafe,#a5f3fc); color:#0891b2;}
  .jb-prep .domain-card-icon.finance{background:linear-gradient(135deg,#fce7f3,#fbcfe8); color:#db2777;}
  /* AI Automation — added 2026-09-03. Violet, the one hue not already spoken
     for by the six original domains. */
  .jb-prep .domain-card-icon.aiauto{background:linear-gradient(135deg,#ede9fe,#ddd6fe); color:#7c3aed;}
  .jb-prep .domain-card-badge{
    position:absolute; top:1rem; right:1rem; background:#fff; padding:0.3rem 0.75rem;
    border-radius:999px; font-size:0.7rem; font-weight:600; color:#4f46e5;
    box-shadow:0 1px 3px rgba(99,102,241,0.12);
  }
  .jb-prep .domain-card-body{padding:1.5rem; flex:1; display:flex; flex-direction:column;}
  .jb-prep .domain-card-body h3{font-size:1.1rem; margin-bottom:0.5rem; color:var(--ink); letter-spacing:-0.01em; font-weight:800;}
  .jb-prep .domain-card-body p{font-size:0.875rem; line-height:1.65; color:var(--grey-600); flex:1; margin-bottom:1.25rem;}
  .jb-prep .domain-card-meta{
    display:flex; align-items:center; gap:1rem; margin-bottom:1rem;
    font-size:0.8rem; color:var(--grey-400); font-weight:600;
  }
  .jb-prep .domain-card-meta i{margin-right:0.25rem;}
  .jb-prep .btn-accent{
    background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff; border:none;
    padding:0.6rem 1.5rem; border-radius:999px; font-weight:600; font-size:0.875rem;
    cursor:pointer; transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
    display:inline-flex; align-items:center; gap:0.4rem; text-decoration:none;
  }
  .jb-prep .btn-accent:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(99,102,241,0.3); color:#fff;}
  /* stagger entrance (matches mock-interview design) */
  .jb-prep .domain-item.animate-in{animation:jbSlideUp .6s cubic-bezier(.4,0,.2,1) both;}
  .jb-prep .domain-item.animate-in:nth-child(2){animation-delay:.1s;}
  .jb-prep .domain-item.animate-in:nth-child(3){animation-delay:.2s;}
  .jb-prep .domain-item.animate-in:nth-child(4){animation-delay:.3s;}
  .jb-prep .domain-item.animate-in:nth-child(5){animation-delay:.4s;}
  .jb-prep .domain-item.animate-in:nth-child(6){animation-delay:.5s;}
  .jb-prep .domain-item.animate-in:nth-child(7){animation-delay:.6s;}
  @keyframes jbSlideUp{from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);}}

  @media (max-width:920px){ .jb-prep .domain-grid{grid-template-columns:1fr 1fr;} }
  @media (max-width:620px){
    .jb-prep .hero{padding:100px 0 64px;}
    .jb-prep .domain-grid{grid-template-columns:1fr;}
    .jb-prep .wrap{padding:0 20px;}
    .jb-prep .cta-row{flex-direction:column;}
    .jb-prep .cta-row a{width:100%; justify-content:center;}
    .jb-prep .filter-row{gap:8px; margin-bottom:36px;}
    .jb-prep .filter-pill{font-size:12px; padding:8px 13px;}
  }

  /* =====================================================
     SECTION 4 — QUESTION BANK (search + companies)
  ===================================================== */
  .jb-prep .qbank{
    position:relative; overflow:hidden; padding:110px 0;
    background:linear-gradient(180deg, var(--blue-50) 0%, #FFFFFF 78%);
  }
  .jb-prep .qbank .diagonals{top:-40px; right:-40px;}
  .jb-prep .qbank .dots{bottom:40px; left:max(12px, calc((100% - 1240px) / 2 - 24px)); opacity:0.45;}
  .jb-prep .qbank .section-head{margin-bottom:36px;}

  /* ---- search bar ---- */
  .jb-prep .qb-search{
    position:relative; z-index:1;
    display:flex; align-items:center; gap:10px;
    max-width:640px; margin:0 auto 56px;
    background:#fff; padding:8px 8px 8px 18px;
    border:1.5px solid var(--grey-200); border-radius:14px;
    box-shadow:var(--shadow-sm);
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .jb-prep .qb-search:focus-within{
    border-color:var(--blue-500);
    box-shadow:0 0 0 4px rgba(62,104,240,0.12), var(--shadow-sm);
  }
  .jb-prep .qb-search .qb-ico{display:flex; align-items:center; font-size:17px; color:var(--grey-400);}
  .jb-prep .qb-search input{
    flex:1; min-width:0; border:0; outline:0; background:transparent;
    font-size:15.5px; font-weight:500; color:var(--ink); padding:11px 0;
  }
  .jb-prep .qb-search input::placeholder{color:var(--grey-400); font-size:15px;}
  .jb-prep .qb-search .qb-btn{
    flex-shrink:0;
    background:var(--blue-600); color:#fff; font-weight:700; font-size:14.5px;
    padding:12px 24px; border-radius:10px; border:none; cursor:pointer;
    display:inline-flex; align-items:center; gap:8px;
    box-shadow:0 12px 24px -10px rgba(41,84,224,0.45);
    transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
  }
  .jb-prep .qb-search .qb-btn:hover{transform:translateY(-2px); background:var(--blue-700); box-shadow:0 16px 28px -8px rgba(41,84,224,0.5);}

  /* ---- company cards (inside the swiper) ---- */
  .jb-prep .qbank .swiper{position:relative; z-index:1;}
  .jb-prep .qb-card{
    display:flex; flex-direction:column; height:100%;
    background:#fff; border:1px solid rgba(99,102,241,0.08); border-radius:16px;
    overflow:hidden; box-shadow:0 1px 3px rgba(99,102,241,0.08);
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), border-color .3s cubic-bezier(.4,0,.2,1);
  }
  .jb-prep .qb-card:hover{transform:translateY(-6px); box-shadow:0 16px 48px rgba(99,102,241,0.16); border-color:rgba(99,102,241,0.2);}
  /* logos are uniform 400x200 (2:1) - run them edge to edge, no padding / letterbox */
  .jb-prep .qb-card-media{
    position:relative; aspect-ratio:2 / 1; overflow:hidden;
    background:var(--blue-50);
    border-bottom:1px solid rgba(99,102,241,0.06);
  }
  .jb-prep .qb-card-media img{
    width:100%; height:100%; object-fit:cover; object-position:center;
    display:block; transition:transform .45s cubic-bezier(.4,0,.2,1);
  }
  .jb-prep .qb-card:hover .qb-card-media img{transform:scale(1.04);}
  .jb-prep .qb-card-body{padding:16px 16px 18px; flex:1; display:flex; flex-direction:column;}
  .jb-prep .qb-card-body h4{font-size:1.05rem; font-weight:800; letter-spacing:-0.01em; color:var(--ink); margin:0 0 4px;}
  .jb-prep .qb-card-body p{font-size:0.85rem; line-height:1.6; color:var(--grey-600); flex:1; margin:0 0 14px;}
  .jb-prep .qb-card-body .qb-link{
    display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%;
    background:linear-gradient(135deg,#3b82f6,#6366f1); color:#fff;
    padding:0.55rem 1rem; border-radius:999px; font-weight:600; font-size:0.85rem;
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1);
  }
  .jb-prep .qb-card-body .qb-link:hover{transform:translateY(-1px); box-shadow:0 4px 12px rgba(99,102,241,0.3); color:#fff;}

  /* ---- section CTA ---- */
  .jb-prep .qb-cta{position:relative; z-index:1; text-align:center; margin-top:44px;}

  @media (max-width:920px){
    .jb-prep .qbank{padding:88px 0;}
    .jb-prep .qbank .dots{display:none;}
  }
  @media (max-width:620px){
    .jb-prep .qbank{padding:72px 0;}
    .jb-prep .qb-search{flex-wrap:wrap; padding:12px; gap:8px;}
    .jb-prep .qb-search input{flex:1 1 auto; padding:6px 0;}
    .jb-prep .qb-search .qb-btn{flex:1 0 100%; justify-content:center;}
    .jb-prep .qb-cta a{width:100%; justify-content:center;}
  }

  /* =====================================================
     SECTIONS 5–10 — REST OF PAGE
     (categories · why MNC · one-stop · crack rounds · companies · testimonials)
  ===================================================== */
  .jb-prep .sec{position:relative; overflow:hidden; padding:100px 0;}
  .jb-prep .sec-soft{background:var(--bg-soft);}
  .jb-prep .section-head.left{text-align:left; margin:0 0 44px; max-width:620px;}
  .jb-prep .sec-cta{position:relative; z-index:1; text-align:center; margin-top:44px;}

  /* ---------- 5. explore categories ---------- */
  .jb-prep .cats .dots{top:56px; right:max(12px, calc((100% - 1240px) / 2 - 24px)); opacity:0.4;}
  .jb-prep .cat-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    /* Without this each implicit row sizes to its own tallest card, so a row
       holding a two-line name ("Management Consulting") stood taller than a row
       of one-line names ("CA", "CFA") and the cards read as unevenly padded.
       1fr equalises every row to the tallest card in the whole grid. */
    grid-auto-rows:1fr;
    gap:16px; position:relative; z-index:1;
  }
  .jb-prep .cat-card{
    display:flex; align-items:center; gap:13px; height:100%;
    background:#fff; border:1px solid var(--grey-200); border-radius:14px; padding:16px 18px;
    transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .25s ease;
  }
  .jb-prep .cat-card:hover{transform:translateY(-4px); border-color:rgba(99,102,241,0.28); box-shadow:0 14px 34px -18px rgba(15,23,42,0.30);}
  .jb-prep .cat-card .cat-ico{
    flex-shrink:0; width:40px; height:40px; border-radius:11px; font-size:17px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#e0e7ff,#dbeafe); color:var(--blue-600);
  }
  .jb-prep .cat-card .cat-txt{flex:1; min-width:0;}
  .jb-prep .cat-card h5{font-size:14.5px; font-weight:700; line-height:1.35; letter-spacing:-0.01em; color:var(--ink); margin:0 0 2px !important;}
  .jb-prep .cat-card .cat-txt span{display:block; font-size:12.5px; font-weight:600; color:var(--grey-400); line-height:1.45;}
  .jb-prep .cat-card .cat-arrow{flex-shrink:0; color:var(--grey-400); transition:transform .25s ease, color .25s ease;}
  .jb-prep .cat-card:hover .cat-arrow{color:var(--blue-600); transform:translateX(3px);}

  /* ---------- 6. why big MNC ---------- */
  .jb-prep .why .diagonals{bottom:-60px; left:-60px;}
  .jb-prep .why-grid{
    display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
    margin-bottom:56px; position:relative; z-index:1;
  }
  .jb-prep .why-copy h2{font-size:clamp(28px,3.2vw,40px); font-weight:800; letter-spacing:-0.02em; color:var(--ink); margin:16px 0 18px !important;}
  .jb-prep .why-copy p{color:var(--grey-600); font-size:15.5px; line-height:1.75; margin-bottom:14px;}
  .jb-prep .why-copy p:last-child{margin-bottom:0;}
  .jb-prep .why-media{
    position:relative; border-radius:20px; overflow:hidden;
    box-shadow:var(--shadow-md); aspect-ratio:4 / 3; background:var(--grey-100);
  }
  .jb-prep .why-media img{width:100%; height:100%; object-fit:cover; display:block;}

  .jb-prep .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; z-index:1;}
  .jb-prep .feat-card{
    display:flex; flex-direction:column; height:100%; padding:26px 24px 24px;
    background:#fff; border:1px solid rgba(99,102,241,0.08); border-radius:16px;
    box-shadow:0 1px 3px rgba(99,102,241,0.08);
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
  }
  .jb-prep .feat-card:hover{transform:translateY(-6px); box-shadow:0 16px 48px rgba(99,102,241,0.16); border-color:rgba(99,102,241,0.2);}
  .jb-prep .feat-card .feat-ico{
    width:46px; height:46px; border-radius:12px; font-size:19px; margin-bottom:16px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg,#e0e7ff,#dbeafe); color:var(--blue-600);
  }
  .jb-prep .feat-card h4{font-size:1.05rem; font-weight:800; letter-spacing:-0.01em; color:var(--ink); margin:0 0 8px !important;}
  .jb-prep .feat-card p{font-size:0.9rem; line-height:1.65; color:var(--grey-600); flex:1; margin-bottom:16px;}
  .jb-prep .feat-link{display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:700; color:var(--blue-600);}
  .jb-prep .feat-link:hover{color:var(--blue-700);}

  /* ---------- 7. one-stop solution ---------- */
  .jb-prep .sol-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; z-index:1;}
  .jb-prep .sol-card{
    display:flex; flex-direction:column; height:100%; overflow:hidden; text-align:center;
    background:#fff; border:1px solid rgba(99,102,241,0.08); border-radius:18px;
    box-shadow:0 1px 3px rgba(99,102,241,0.08);
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
  }
  .jb-prep .sol-card:hover{transform:translateY(-6px); box-shadow:0 16px 48px rgba(99,102,241,0.16); border-color:rgba(99,102,241,0.2);}
  .jb-prep .sol-media{
    display:flex; align-items:center; justify-content:center; padding:34px 24px 24px;
    background:linear-gradient(135deg, var(--blue-50), #fff);
  }
  .jb-prep .sol-media img{width:8.125rem; height:7.125rem; object-fit:contain; display:block;}
  .jb-prep .sol-body{padding:24px 24px 30px; flex:1; display:flex; flex-direction:column;}
  .jb-prep .sol-body h3{font-size:1.15rem; font-weight:800; letter-spacing:-0.01em; color:var(--ink); margin:0 0 8px !important;}
  .jb-prep .sol-body p{font-size:0.9rem; line-height:1.65; color:var(--grey-600);}

  /* ---------- 8. crack interview rounds ---------- */
  .jb-prep .crack{
    position:relative; overflow:hidden; background:var(--bg-soft);
    border-radius:28px; margin:0 24px; padding:88px 0;
  }
  .jb-prep .crack .diagonals{top:-50px; right:-50px;}
  .jb-prep .chip-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:56px; position:relative; z-index:1;}
  .jb-prep .chip{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; border:1.5px solid var(--grey-200); border-radius:999px;
    padding:9px 18px; font-size:13.5px; font-weight:700; color:var(--ink);
  }
  .jb-prep .chip i{color:var(--green);}
  .jb-prep .crack-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; position:relative; z-index:1;}
  .jb-prep .crack-media{background:#fff; border-radius:20px; padding:26px; box-shadow:var(--shadow-md);}
  .jb-prep .crack-media img{width:100%; height:auto; display:block;}
  .jb-prep .crack-copy h2{font-size:clamp(24px,2.6vw,32px); font-weight:800; letter-spacing:-0.02em; color:var(--ink); margin:0 0 14px !important;}
  .jb-prep .crack-copy > p{color:var(--grey-600); font-size:15.5px; line-height:1.7; margin-bottom:26px;}
  .jb-prep .check-list{list-style:none; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:13px;}
  .jb-prep .check-list li{display:flex; align-items:flex-start; gap:11px; font-size:15px; font-weight:600; color:var(--grey-600);}
  .jb-prep .check-list li i{
    flex-shrink:0; width:22px; height:22px; border-radius:50%; margin-top:1px; font-size:11px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--green-50); color:var(--green);
  }

  /* ---------- 9. big interview coming up ---------- */
  .jb-prep .comp .dots{bottom:40px; left:max(12px, calc((100% - 1240px) / 2 - 24px)); opacity:0.4;}
  .jb-prep .comp-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; position:relative; z-index:1;}
  .jb-prep .comp-copy h2{font-size:clamp(28px,3.2vw,40px); font-weight:800; letter-spacing:-0.02em; color:var(--ink); margin:16px 0 10px !important;}
  .jb-prep .comp-copy .lead-sub{color:var(--blue-600); font-size:16px; font-weight:700; margin-bottom:16px;}
  .jb-prep .comp-copy p{color:var(--grey-600); font-size:15.5px; line-height:1.75; margin-bottom:28px;}
  .jb-prep .faang-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
  .jb-prep .faang-tile{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
    text-align:center; min-height:124px; padding:18px 10px;
    background:#fff; border:1px solid var(--grey-200); border-radius:14px;
    transition:transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .25s ease;
  }
  .jb-prep .faang-tile:hover{transform:translateY(-4px); border-color:rgba(99,102,241,0.28); box-shadow:0 14px 34px -18px rgba(15,23,42,0.30);}
  .jb-prep .faang-tile img{width:44px; height:44px; border-radius:50%; object-fit:cover; display:block;}
  .jb-prep .faang-tile span{font-size:12.5px; font-weight:700; line-height:1.35; color:var(--grey-600);}

  /* ---------- 10. testimonials ---------- */
  .jb-prep .tm .section-head.left p{margin-top:10px;}
  .jb-prep .tm-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; position:relative; z-index:1;}
  .jb-prep .tm-card{
    position:relative; display:flex; flex-direction:column; height:100%; padding:28px 26px;
    background:#fff; border:1px solid rgba(99,102,241,0.08); border-radius:18px;
    box-shadow:0 1px 3px rgba(99,102,241,0.08);
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, border-color .3s ease;
  }
  .jb-prep .tm-card:hover{transform:translateY(-6px); box-shadow:0 16px 48px rgba(99,102,241,0.16); border-color:rgba(99,102,241,0.2);}
  .jb-prep .tm-card::before{
    content:"\201C"; position:absolute; top:2px; right:22px;
    font-family:Georgia,'Times New Roman',serif; font-size:78px; line-height:1;
    color:var(--blue-100); pointer-events:none;
  }
  .jb-prep .tm-stars{display:flex; gap:4px; margin-bottom:14px; position:relative; z-index:1;}
  .jb-prep .tm-stars img{width:16px; height:16px;}
  .jb-prep .tm-quote{position:relative; z-index:1; flex:1; font-size:14.8px; line-height:1.7; color:var(--grey-600); margin-bottom:22px;}
  .jb-prep .tm-who{display:flex; align-items:center; gap:12px; padding-top:18px; border-top:1px solid var(--grey-200);}
  .jb-prep .tm-who img{width:44px; height:44px; border-radius:50%; object-fit:cover; display:block;}
  .jb-prep .tm-who b{display:block; font-size:14.5px; font-weight:800; letter-spacing:-0.01em; color:var(--ink);}
  .jb-prep .tm-who span{font-size:12.5px; font-weight:600; color:var(--grey-400);}

  /* ---------- responsive ---------- */
  @media (max-width:920px){
    .jb-prep .sec{padding:76px 0;}
    .jb-prep .why-grid,.jb-prep .crack-grid,.jb-prep .comp-grid{grid-template-columns:1fr; gap:40px;}
    .jb-prep .feat-grid,.jb-prep .sol-grid,.jb-prep .tm-grid{grid-template-columns:1fr 1fr;}
    .jb-prep .crack{padding:72px 0;}
    .jb-prep .cats .dots,.jb-prep .comp .dots{display:none;}
  }
  @media (max-width:620px){
    .jb-prep .sec{padding:60px 0;}
    .jb-prep .cat-grid,.jb-prep .feat-grid,.jb-prep .sol-grid,.jb-prep .tm-grid{grid-template-columns:1fr;}
    .jb-prep .faang-grid{grid-template-columns:repeat(2,1fr);}
    .jb-prep .crack{margin:0 12px; padding:56px 0; border-radius:20px;}
    .jb-prep .chip-row{gap:8px; margin-bottom:36px;}
    .jb-prep .chip{font-size:12.5px; padding:8px 14px;}
    .jb-prep .sec-cta a,.jb-prep .crack-copy .btn-primary{width:100%; justify-content:center;}
  }