/* ============================================================
     SkillParkho — FAQ (two-pane help center)
     navy #0B1026 / white / red #EF4444 · Plus Jakarta Sans + JetBrains Mono
     Vars namespaced spkfaq- so nothing clashes with other pages.
     ============================================================ */
  :root {
    --spkfaq-navy:#0B1026; --spkfaq-navy-2:#111735; --spkfaq-navy-3:#171E42;
    --spkfaq-line:rgba(255,255,255,0.08); --spkfaq-line-2:rgba(255,255,255,0.14);
    --spkfaq-white:#FFFFFF; --spkfaq-mute:#A7ADC4; --spkfaq-mute-2:#757C99;
    --spkfaq-red:#EF4444; --spkfaq-red-soft:rgba(239,68,68,0.12);
    --spkfaq-max:1080px;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body {
    font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
    background:var(--spkfaq-navy); color:var(--spkfaq-white); line-height:1.6;
    -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; overflow-x:hidden;
    background-image:
      radial-gradient(900px 460px at 50% -6%, rgba(239,68,68,0.14), transparent 62%),
      radial-gradient(600px 380px at 88% 8%, rgba(239,68,68,0.06), transparent 60%);
    background-repeat:no-repeat;
  }
  h1,h2,h3,.spkfaq-eyebrow { font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
  .spkfaq-wrap { width:100%; max-width:var(--spkfaq-max); margin:0 auto; padding:0 22px; }

  /* progress */
  .spkfaq-progress {
    position:fixed; top:0; left:0; height:3px; width:0%;
    background:linear-gradient(90deg,#EF4444,#ff9a9a); box-shadow:0 0 12px rgba(239,68,68,0.6);
    z-index:500; transition:width .08s linear;
  }

  /* hero */
  .spkfaq-hero { text-align:center; padding:60px 0 6px; }
  .spkfaq-eyebrow { display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--spkfaq-red); background:var(--spkfaq-red-soft); border:1px solid rgba(239,68,68,0.25); padding:6px 14px; border-radius:100px; margin-bottom:18px; }
  .spkfaq-hero h1 { font-size:clamp(30px,6vw,46px); font-weight:800; letter-spacing:-0.025em; line-height:1.1; }
  .spkfaq-hero p { color:var(--spkfaq-mute); font-size:clamp(15px,2.2vw,17px); margin:14px auto 0; white-space:nowrap; }

  .spkfaq-up { opacity:0; transform:translateY(14px); animation:spkfaqUp .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .spkfaq-up.d1{animation-delay:.05s;} .spkfaq-up.d2{animation-delay:.14s;} .spkfaq-up.d3{animation-delay:.23s;} .spkfaq-up.d4{animation-delay:.32s;}
  @keyframes spkfaqUp { to { opacity:1; transform:none; } }

  .spkfaq-stats { display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin:30px auto 0; max-width:1000px; }
  .spkfaq-stat { flex:1 1 150px; background:var(--spkfaq-navy-2); border:1px solid var(--spkfaq-line); border-radius:14px; padding:16px 14px; text-align:center; transition:transform .18s ease, border-color .18s ease; }
  .spkfaq-stat:hover { transform:translateY(-3px); border-color:rgba(239,68,68,0.35); }
  .spkfaq-stat b { font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(22px,4vw,28px); font-weight:800; color:#fff; display:block; }
  .spkfaq-stat b .spkfaq-num, .spkfaq-stat b em { color:var(--spkfaq-red); font-style:normal; }
  .spkfaq-stat small { color:var(--spkfaq-mute-2); font-size:12px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; display:inline-block; }

  /* ---------- two-pane ---------- */
  .spkfaq-panel { display:grid; grid-template-columns:250px 1fr; gap:30px; align-items:start; padding:34px 0 40px; }

  /* left nav */
  /* NOTE: if your shared header is sticky, bump this top value to its height */
  .spkfaq-nav { position:sticky; top:24px; min-width:0; }
  .spkfaq-nav-title { font-family:'Plus Jakarta Sans',sans-serif; font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--spkfaq-mute-2); margin:0 0 12px 14px; }
  .spkfaq-navlist { display:flex; flex-direction:column; gap:6px; }
  .spkfaq-navlist button {
    display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
    font-family:inherit; font-size:14px; font-weight:500; color:var(--spkfaq-mute);
    background:transparent; border:1px solid transparent; border-radius:11px;
    padding:11px 14px; cursor:pointer; text-align:left; transition:all .15s ease;
  }
  .spkfaq-navlist button:hover { color:#fff; background:var(--spkfaq-navy-2); }
  .spkfaq-navlist button[aria-selected="true"] { color:#fff; background:var(--spkfaq-navy-2); border-color:rgba(239,68,68,0.5); box-shadow:inset 3px 0 0 var(--spkfaq-red); }
  .spkfaq-navcount { font-size:12px; color:var(--spkfaq-mute-2); }
  .spkfaq-navlist button[aria-selected="true"] .spkfaq-navcount { color:var(--spkfaq-red); }
  .spkfaq-arrow, .spkfaq-dots { display:none; }

  /* right content */
  .spkfaq-content { min-width:0; scroll-margin-top:84px; }
  .spkfaq-content-head { margin-bottom:18px; }
  .spkfaq-content-head h2 { font-size:22px; font-weight:800; letter-spacing:-0.02em; }
  .spkfaq-content-head p { color:var(--spkfaq-mute); font-size:14.5px; margin-top:6px; white-space:nowrap; }

  .spkfaq-group-title { display:flex; align-items:center; gap:9px; font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--spkfaq-mute-2); margin:28px 0 12px; }
  .spkfaq-group-title .spkfaq-dot { width:7px; height:7px; border-radius:50%; background:var(--spkfaq-red); }

  .spkfaq-acc { display:flex; flex-direction:column; gap:12px; }
  .spkfaq-item {
    background:var(--spkfaq-navy-2); border:1px solid var(--spkfaq-line); border-radius:14px; overflow:hidden;
    transition:border-color .18s ease;
    opacity:0; transform:translateY(8px); animation:spkfaqItemIn .45s ease forwards;
  }
  @keyframes spkfaqItemIn { to { opacity:1; transform:none; } }
  .spkfaq-item:hover { border-color:var(--spkfaq-line-2); }
  .spkfaq-item.open { border-color:rgba(239,68,68,0.4); }
  .spkfaq-qbtn {
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:none; border:none; cursor:pointer; font-family:'Plus Jakarta Sans',sans-serif; color:#fff;
    font-size:15.5px; font-weight:600; text-align:left; padding:17px 20px;
  }
  .spkfaq-qbtn:focus-visible { outline:2px solid var(--spkfaq-red); outline-offset:-2px; border-radius:14px; }
  .spkfaq-plus { flex:0 0 auto; width:24px; height:24px; position:relative; border-radius:50%; border:1px solid var(--spkfaq-line-2); transition:background .18s,border-color .18s,transform .25s ease; }
  .spkfaq-item.open .spkfaq-plus { background:var(--spkfaq-red); border-color:var(--spkfaq-red); transform:rotate(135deg); }
  .spkfaq-plus::before,.spkfaq-plus::after { content:''; position:absolute; top:50%; left:50%; background:var(--spkfaq-mute); transition:background .18s; }
  .spkfaq-item.open .spkfaq-plus::before, .spkfaq-item.open .spkfaq-plus::after { background:#fff; }
  .spkfaq-plus::before { width:10px; height:1.6px; transform:translate(-50%,-50%); }
  .spkfaq-plus::after { width:1.6px; height:10px; transform:translate(-50%,-50%); }
  .spkfaq-ans { max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .spkfaq-ans-inner { padding:0 20px 18px; color:var(--spkfaq-mute); font-size:14.5px; line-height:1.7; }
  .spkfaq-ans-inner a { color:var(--spkfaq-red); text-decoration:none; }
  .spkfaq-ans-inner a:hover { text-decoration:underline; }

  /* back to top (mobile) */
  .spkfaq-top {
    position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom));
    width:46px; height:46px; border-radius:50%; border:1px solid var(--spkfaq-line-2);
    background:var(--spkfaq-navy-3); color:#fff; font-size:19px; line-height:1; cursor:pointer;
    display:grid; place-items:center; z-index:400;
    opacity:0; transform:translateY(10px) scale(.9); pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, background .15s ease, border-color .15s ease;
    box-shadow:0 8px 24px rgba(0,0,0,.45);
  }
  .spkfaq-top.show { opacity:1; transform:none; pointer-events:auto; }
  .spkfaq-top:hover { background:var(--spkfaq-red); border-color:var(--spkfaq-red); }
  @media (min-width:761px) { .spkfaq-top { display:none; } }

  /* ---------- responsive: collapse to single column ---------- */
  @media (max-width:760px) {
    .spkfaq-wrap { padding:0 18px; }
    .spkfaq-hero { padding:32px 0 2px; }
    .spkfaq-hero h1 { font-size:clamp(26px,7.6vw,34px); }
    .spkfaq-hero p { font-size:14px; margin-top:10px; max-width:320px; white-space:normal; }

    /* stats: two compact cards per row, the last one takes a full row */
    .spkfaq-stats { gap:7px; margin-top:22px; }
    .spkfaq-stat { flex:1 1 calc(50% - 4px); min-width:0; padding:12px 5px; border-radius:12px; }
    .spkfaq-stat b { font-size:19px; }
    .spkfaq-stat small { font-size:10.5px; letter-spacing:0; text-transform:none; white-space:nowrap; }

    .spkfaq-panel { grid-template-columns:1fr; gap:4px; padding:16px 0 34px; }

    /* topic bar: arrows + swipeable strip + dots */
    .spkfaq-nav {
      position:sticky; top:0; z-index:140; background:var(--spkfaq-navy);
      margin:0 -18px; padding:12px 12px 10px;
    }
    .spkfaq-nav-title { display:none; }
    .spkfaq-navrow { display:flex; align-items:center; gap:6px; }
    .spkfaq-arrow {
      display:grid; place-items:center; flex:0 0 auto;
      width:30px; height:30px; padding:0; border-radius:50%;
      border:1px solid var(--spkfaq-line-2); background:var(--spkfaq-navy-2);
      color:var(--spkfaq-mute); font-size:20px; line-height:1; cursor:pointer;
      transition:opacity .15s ease, color .15s ease, border-color .15s ease;
    }
    .spkfaq-arrow:active { color:#fff; border-color:var(--spkfaq-red); }
    .spkfaq-arrow.disabled { opacity:.3; pointer-events:none; }
    .spkfaq-navlist {
      flex:1 1 auto; min-width:0;
      flex-direction:row; overflow-x:auto; gap:2vw; padding:0 4px 4px;
      -webkit-overflow-scrolling:touch;
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 22px),transparent 100%);
              mask-image:linear-gradient(90deg,transparent 0,#000 10px,#000 calc(100% - 22px),transparent 100%);
    }
    .spkfaq-navlist::-webkit-scrollbar { display:none; }
    .spkfaq-navlist button {
      width:auto; white-space:nowrap; border-radius:100px;
      font-size:clamp(11.5px,3.5vw,15px); padding:.6em 1em;
      border:1px solid var(--spkfaq-line-2); min-height:36px;
    }
    .spkfaq-navlist button[aria-selected="true"] { background:var(--spkfaq-red); border-color:var(--spkfaq-red); box-shadow:none; }
    .spkfaq-navlist button[aria-selected="true"] .spkfaq-navcount { color:rgba(255,255,255,.85); }

    /* dots indicator */
    .spkfaq-dots { display:flex; justify-content:center; align-items:center; gap:6px; margin-top:12px; }
    .spkfaq-dot { width:6px; height:6px; padding:0; border:none; border-radius:100px; background:var(--spkfaq-line-2); cursor:pointer; transition:width .25s ease, background .2s ease; }
    .spkfaq-dot.active { width:22px; background:var(--spkfaq-red); }

    .spkfaq-content-head { margin-top:10px; margin-bottom:14px; }
    .spkfaq-content-head h2 { font-size:20px; }
    .spkfaq-content-head p { font-size:14px; }
    .spkfaq-group-title { margin:22px 0 10px; }
    .spkfaq-acc { gap:10px; }
    .spkfaq-qbtn { font-size:15px; padding:16px 16px; line-height:1.4; gap:12px; }
    .spkfaq-ans-inner { padding:0 16px 16px; font-size:14px; }
  }

  @media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    .spkfaq-up { opacity:1 !important; transform:none !important; animation:none !important; }
    .spkfaq-item { opacity:1 !important; transform:none !important; animation:none !important; }
    .spkfaq-progress { transition:none !important; }
    * { transition-duration:.001s !important; }
  }


/* === Site typography: small labels use JetBrains Mono; headings and body use Plus Jakarta Sans === */
.spkfaq-stat small,.spkfaq-eyebrow,.spkfaq-nav-title{font-family:'JetBrains Mono',ui-monospace,monospace !important}