/* ════════════════════════════════════════════════════════════════════
   Jobs Help Squad — Premium Design System (v2026)
   Cool corporate navy + subtle purple accent
   ════════════════════════════════════════════════════════════════════ */

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img,svg,video{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}

/* ── TOKENS ── */
:root{
  color-scheme: light;
  /* Ink scale (text) */
  --ink:#0A1628;
  --ink-2:#142039;
  /* Persistent dark-section backgrounds (never flip on theme change) */
  --ink-bg:#0A1628;
  --ink-bg-2:#142039;
  --slate-700:#334155;
  --slate-600:#475569;
  --slate-500:#64748B;
  --slate-400:#94A3B8;
  --slate-300:#CBD5E1;
  --slate-200:#E2E8F0;
  --slate-100:#F1F5F9;
  --slate-50:#F8FAFC;
  --white:#FFFFFF;
  /* Brand accent (used sparingly) */
  --accent:#4F46E5;
  --accent-2:#6D5BFF;
  --accent-soft:#EEF0FF;
  --accent-soft-2:#F5F3FF;
  --accent-deep:#3730A3;
  /* Semantic */
  --success:#059669;
  --success-soft:#ECFDF5;
  --warn:#B45309;
  --warn-soft:#FFFBEB;
  --danger:#DC2626;
  /* Surfaces */
  --bg:#FFFFFF;
  --surface:#F8FAFC;
  --surface-2:#F1F5F9;
  --border:#E5E9F0;
  --border-strong:#D6DCE6;
  /* Effects */
  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:0 2px 6px rgba(15,23,42,.06);
  --shadow:0 8px 24px -10px rgba(15,23,42,.10), 0 2px 8px -2px rgba(15,23,42,.04);
  --shadow-md:0 16px 40px -16px rgba(15,23,42,.14), 0 4px 12px -4px rgba(15,23,42,.06);
  --shadow-lg:0 28px 60px -20px rgba(15,23,42,.20), 0 8px 20px -8px rgba(15,23,42,.10);
  --shadow-accent:0 12px 32px -10px rgba(79,70,229,.35);
  /* Radii */
  --r-sm:8px;--r:12px;--r-md:16px;--r-lg:20px;--r-xl:28px;--r-2xl:36px;
  /* Type */
  --f-sans:'Inter','SF Pro Text',-apple-system,BlinkMacSystemFont,sans-serif;
  --f-display:'Plus Jakarta Sans','Inter',sans-serif;
  /* Spacing rhythm */
  --sp-section:120px;
  --sp-section-sm:80px;
  /* Container */
  --w-page:1240px;
}

/* ── BASE ── */
body{
  font-family:var(--f-sans);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-feature-settings:'cv11','ss01','ss03';
}
::selection{background:rgba(79,70,229,.22);color:var(--ink)}

h1,h2,h3,h4,h5,h6{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.12;
  color:var(--ink);
}
h1{letter-spacing:-0.035em}
h2{letter-spacing:-0.028em}

p{color:var(--slate-600)}

/* ── A11Y ── */
.skip{position:absolute;top:-40px;left:14px;background:var(--ink);color:#fff;padding:10px 18px;border-radius:8px;z-index:9999;font-weight:600;font-size:13px;transition:top .25s}
.skip:focus{top:14px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ── LAYOUT ── */
.wrap{max-width:var(--w-page);margin:0 auto;padding:0 32px}
section{padding:var(--sp-section) 0}
.section-sm{padding:var(--sp-section-sm) 0}

/* ── COMMON BLOCKS ── */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--accent);text-transform:uppercase;
  padding:6px 12px;border-radius:50px;
  background:var(--accent-soft);border:1px solid rgba(79,70,229,.16);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.eyebrow.on-dark{background:rgba(255,255,255,.08);color:#C7CCFA;border-color:rgba(199,204,250,.18)}
.eyebrow.on-dark .dot{background:#A5B4FC}

.sec-head{max-width:760px;margin-bottom:64px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-title{font-size:clamp(30px,3.6vw,46px);margin:14px 0 16px}
.sec-sub{font-size:17px;line-height:1.7;color:var(--slate-600);max-width:620px}
.sec-head.center .sec-sub{margin:0 auto}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:10px;
  font-family:var(--f-sans);font-size:14.5px;font-weight:600;letter-spacing:-0.01em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:all .22s cubic-bezier(.16,1,.3,1);
  white-space:nowrap;
}
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--shadow);}
.btn-primary:hover{background:var(--ink-2);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:var(--shadow-accent);}
.btn-accent:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--surface);border-color:var(--ink)}
.btn-ghost-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.22)}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.btn-white{background:#fff;color:var(--ink);box-shadow:var(--shadow)}
.btn-white:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-lg{padding:16px 28px;font-size:15px;border-radius:12px}
.btn-sm{padding:9px 16px;font-size:13px;border-radius:8px}
.btn i,.btn svg{font-size:13px}

/* ── TOP RIBBON ── */
.ribbon{background:var(--ink-bg);color:#fff;padding:9px 0;font-size:12.5px;font-weight:500;letter-spacing:-.01em}
.ribbon .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ribbon-left{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.85)}
.ribbon-left i{color:#67E8F9;font-size:13px}
.ribbon-right{display:flex;align-items:center;gap:18px;color:rgba(255,255,255,.55);font-size:12px}
.ribbon-right a{color:rgba(255,255,255,.85);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.ribbon-right a:hover{color:#fff}
.ribbon-sep{width:1px;height:14px;background:rgba(255,255,255,.18)}
@media(max-width:768px){.ribbon-right .ribbon-hide{display:none}}

/* ── NAV ── */
.nav{
  position:sticky;top:0;z-index:100;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--border);
  transition:box-shadow .25s, background .25s;
}
.nav.scrolled{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--border),0 6px 24px -8px rgba(15,23,42,.06)}
.nav-wrap{max-width:var(--w-page);margin:0 auto;padding:14px 32px;display:flex;align-items:center;gap:36px}
.nav-logo{display:flex;align-items:center;gap:8px;margin-right:auto}
.nav-logo img{height:32px;width:auto}
.nav-links{display:flex;gap:4px;list-style:none;align-items:center}
.nav-links>li{position:relative}
.nav-links>li>a,.nav-links>li>button{
  display:flex;align-items:center;gap:6px;
  padding:9px 12px;border-radius:8px;
  font-size:14px;font-weight:500;color:var(--slate-700);
  transition:color .2s,background .2s;
}
.nav-links>li>a:hover,.nav-links>li>button:hover{color:var(--ink);background:var(--surface)}
.nav-links>li>a.active{color:var(--ink);font-weight:600}
.nav-links .chev{font-size:9px;opacity:.55;transition:transform .25s}
.has-drop:hover>a .chev,.has-drop:hover>button .chev{transform:rotate(180deg)}
.has-drop::after{content:'';position:absolute;top:100%;left:-10px;right:-10px;height:14px}
.drop{
  position:absolute;top:calc(100% + 10px);left:0;
  background:#fff;border-radius:18px;padding:8px;min-width:280px;
  border:1px solid var(--border);box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .22s,transform .22s;z-index:200;
}
.drop.wide{min-width:540px;display:grid;grid-template-columns:1fr 1fr;gap:2px;left:auto;right:0}
.has-drop:hover .drop{opacity:1;pointer-events:auto;transform:translateY(0)}
.drop a{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  transition:background .18s;
}
.drop a:hover{background:var(--surface)}
.drop-i{
  width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;background:var(--accent-soft);color:var(--accent);
}
.drop-t strong{display:block;font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.drop-t span{font-size:12px;color:var(--slate-500);line-height:1.4}
.nav-cta{display:flex;gap:8px;align-items:center}
.nav-link-sign{font-size:14px;font-weight:500;color:var(--slate-700);padding:9px 14px;border-radius:8px;transition:background .2s}
.nav-link-sign:hover{background:var(--surface);color:var(--ink)}
.burger{display:none;padding:10px;color:var(--ink);font-size:20px}
@media(max-width:1024px){
  .nav-links,.nav-cta{display:none}
  .burger{display:inline-flex}
}
.mob-nav{display:none;position:fixed;inset:0;background:var(--ink-bg);z-index:9999;padding:24px;overflow-y:auto;flex-direction:column}
.mob-nav.open{display:flex}
.mob-nav-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.mob-nav-head img{height:32px}
.mob-close{color:#fff;font-size:22px}
.mob-nav a{display:block;padding:16px 0;color:rgba(255,255,255,.85);font-size:17px;font-weight:500;border-bottom:1px solid rgba(255,255,255,.07)}
.mob-nav a:hover{color:#fff}
.mob-nav-section{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.4);margin:24px 0 4px}
.mob-cta{display:flex;gap:10px;margin-top:24px}
.mob-cta .btn{flex:1}

/* ── REVEAL ── */
.reveal,.rev-l,.rev-r{opacity:0;transition:all .9s cubic-bezier(.16,1,.3,1)}
.reveal{transform:translateY(36px)}
.rev-l{transform:translateX(-40px)}
.rev-r{transform:translateX(40px)}
.on{opacity:1!important;transform:translate(0,0)!important}
@media (prefers-reduced-motion: reduce){
  .reveal,.rev-l,.rev-r{opacity:1!important;transform:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ── FOOTER ── */
.foot{background:var(--ink-bg);color:#fff;padding:96px 0 0;position:relative;overflow:hidden}
.foot::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
}
.foot-glow{position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(79,70,229,.12);filter:blur(120px);top:-200px;right:-100px;pointer-events:none}
.foot .wrap{position:relative}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.4fr;gap:48px;padding-bottom:64px;border-bottom:1px solid rgba(255,255,255,.08)}
.foot-brand p{font-size:14px;line-height:1.7;color:rgba(255,255,255,.55);margin:16px 0 24px;max-width:300px}
.foot-logo img{height:34px}
.foot-trust{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.foot-trust-item{display:flex;align-items:center;gap:10px;font-size:13px;color:rgba(255,255,255,.78);font-weight:500}
.foot-trust-item i{color:#67E8F9;font-size:12px}
.foot-socials{display:flex;gap:8px}
.foot-soc{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.08);
  transition:all .22s;font-size:13px;
}
.foot-soc:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px)}
.foot-col h4{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:20px}
.foot-links{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-links a{font-size:14px;color:rgba(255,255,255,.55);font-weight:400;transition:color .2s}
.foot-links a:hover{color:#fff}
.foot-news h4{margin-bottom:8px}
.foot-news p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6;margin-bottom:16px}
.foot-news-form{display:flex;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:4px;transition:border-color .2s}
.foot-news-form:focus-within{border-color:rgba(199,204,250,.4)}
.foot-news-form input{flex:1;background:transparent;border:0;padding:10px 12px;color:#fff;font-size:13.5px;outline:none}
.foot-news-form input::placeholder{color:rgba(255,255,255,.4)}
.foot-news-form button{padding:8px 16px;border-radius:7px;background:#fff;color:var(--ink);font-weight:700;font-size:13px;transition:transform .15s}
.foot-news-form button:hover{transform:scale(1.04)}
.foot-news-meta{margin-top:10px;font-size:12px;color:rgba(255,255,255,.4)}
.foot-bottom{padding:28px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-bottom p{font-size:13px;color:rgba(255,255,255,.4)}
.foot-bottom-links{display:flex;gap:24px}
.foot-bottom-links a{font-size:13px;color:rgba(255,255,255,.45)}
.foot-bottom-links a:hover{color:#fff}
.foot-badges{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.foot-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:50px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:11.5px;color:rgba(255,255,255,.62);font-weight:600;letter-spacing:.02em}
.foot-badge i{color:#67E8F9;font-size:11px}
@media(max-width:1024px){
  .foot-grid{grid-template-columns:1fr 1fr 1fr;gap:36px}
  .foot-brand{grid-column:span 3}
  .foot-news{grid-column:span 3}
}
@media(max-width:640px){
  .foot{padding-top:64px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand,.foot-news{grid-column:span 2}
  .foot-bottom{flex-direction:column;align-items:flex-start}
}

/* ── CARD UTILITIES ── */
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-md);
  padding:32px;transition:all .3s;
}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--border-strong)}

/* ── BADGE ── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:50px;font-size:11.5px;font-weight:600;letter-spacing:.02em}
.badge-success{background:var(--success-soft);color:var(--success)}
.badge-accent{background:var(--accent-soft);color:var(--accent)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}

/* ── TRUST AVATARS (inline) ── */
.avatar-stack{display:flex;align-items:center}
.avatar-stack img{
  width:32px;height:32px;border-radius:50%;border:2px solid #fff;
  object-fit:cover;margin-left:-8px;background:var(--surface-2);
}
.avatar-stack img:first-child{margin-left:0}

/* ── FAQ ACCORDION ── */
.faq{display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--border);border-radius:14px;background:#fff;transition:border-color .25s,box-shadow .25s;overflow:hidden}
.faq-item:hover{border-color:var(--border-strong)}
.faq-item[open]{border-color:var(--ink);box-shadow:var(--shadow)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;cursor:pointer;list-style:none;font-size:15.5px;font-weight:600;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-toggle{
  width:28px;height:28px;border-radius:50%;flex-shrink:0;
  background:var(--surface-2);color:var(--slate-600);
  display:flex;align-items:center;justify-content:center;font-size:11px;
  transition:all .25s;
}
.faq-item[open] .faq-toggle{background:var(--ink);color:#fff;transform:rotate(45deg)}
.faq-body{padding:0 24px 22px;font-size:14.5px;line-height:1.75;color:var(--slate-600)}

/* ── PROCESS STEPS ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;counter-reset:step}
.steps::before{content:'';position:absolute;top:28px;left:8%;right:8%;height:1px;background:linear-gradient(90deg,transparent,var(--border-strong) 10%,var(--border-strong) 90%,transparent);z-index:0}
.step{position:relative;z-index:1;padding:0 16px;text-align:center}
.step-n{
  width:56px;height:56px;border-radius:50%;
  background:#fff;border:1px solid var(--border);
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f-display);font-size:18px;font-weight:700;color:var(--ink);
  margin-bottom:24px;box-shadow:var(--shadow-sm);transition:all .25s;
}
.step:hover .step-n{border-color:var(--accent);color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.step h3{font-size:18px;margin-bottom:10px;letter-spacing:-.02em}
.step p{font-size:14.5px;line-height:1.65;color:var(--slate-600)}
@media(max-width:768px){.steps{grid-template-columns:1fr 1fr;gap:40px}.steps::before{display:none}}
@media(max-width:480px){.steps{grid-template-columns:1fr}}

/* ── CTA BAND (DARK) ── */
.cta-band{
  background:var(--ink-bg);color:#fff;border-radius:0;position:relative;overflow:hidden;
  padding:96px 0;
}
.cta-band-grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:48px 48px;mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.7),transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.7),transparent 70%);
}
.cta-band-glow{position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(79,70,229,.32),transparent 70%);filter:blur(80px);top:50%;left:50%;transform:translate(-50%,-50%)}
.cta-band .wrap{position:relative;text-align:center;max-width:760px}
.cta-band h2{font-size:clamp(32px,4.4vw,54px);color:#fff;margin:18px 0 18px;letter-spacing:-.03em}
.cta-band p{font-size:17.5px;color:rgba(255,255,255,.68);line-height:1.65;margin-bottom:36px}
.cta-band-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── CHAT WIDGET ── */
#jhs-chat{position:fixed;bottom:24px;right:24px;z-index:9999;font-family:var(--f-sans)}
#jhs-chat-btn{
  width:56px;height:56px;border-radius:50%;
  background:var(--accent);color:#fff;
  box-shadow:0 12px 32px rgba(79,70,229,.38),0 0 0 3px rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:transform .2s,box-shadow .2s;outline:none;
}
#jhs-chat-btn:hover{transform:scale(1.06);box-shadow:0 16px 40px rgba(79,70,229,.5),0 0 0 3px rgba(255,255,255,.9)}
#jhs-chat-btn svg{width:22px;height:22px;fill:#fff;position:absolute;transition:opacity .2s,transform .2s}
#jhs-chat-btn .ic-close{opacity:0;transform:rotate(-90deg)}
#jhs-chat-btn.open .ic-chat{opacity:0;transform:rotate(90deg)}
#jhs-chat-btn.open .ic-close{opacity:1;transform:rotate(0)}
#jhs-notif{position:absolute;top:-2px;right:-2px;width:18px;height:18px;background:#EF4444;border-radius:50%;border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:700;pointer-events:none}
#jhs-chat-panel{
  position:absolute;bottom:72px;right:0;width:380px;height:540px;background:#fff;
  border-radius:20px;box-shadow:0 32px 80px rgba(15,23,42,.22),0 0 0 1px var(--border);
  display:flex;flex-direction:column;overflow:hidden;
  transform:scale(.94) translateY(20px);opacity:0;pointer-events:none;
  transition:all .32s cubic-bezier(.16,1,.3,1);transform-origin:bottom right;
}
#jhs-chat-panel.open{transform:scale(1) translateY(0);opacity:1;pointer-events:auto}
#jhs-chat-head{
  background:var(--ink-bg);padding:18px 20px;
  display:flex;align-items:center;gap:12px;flex-shrink:0;position:relative;overflow:hidden;
}
#jhs-chat-head::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 0%,rgba(79,70,229,.4),transparent 50%)}
#jhs-chat-ava{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:20px;position:relative}
#jhs-chat-meta{flex:1;position:relative}
#jhs-chat-meta strong{display:block;color:#fff;font-size:14.5px;font-weight:600}
#jhs-chat-meta span{color:rgba(255,255,255,.72);font-size:12px;display:flex;align-items:center;gap:6px}
#jhs-chat-meta span::before{content:'';width:7px;height:7px;background:#4ADE80;border-radius:50%;box-shadow:0 0 0 3px rgba(74,222,128,.25)}
#jhs-chat-msgs{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth;background:var(--surface)}
#jhs-chat-msgs::-webkit-scrollbar{width:4px}
#jhs-chat-msgs::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:4px}
.jmsg{max-width:84%;display:flex;flex-direction:column;gap:3px}
.jmsg.bot{align-self:flex-start}
.jmsg.usr{align-self:flex-end}
.jmsg .bbl{padding:11px 15px;border-radius:14px;font-size:13.5px;line-height:1.55;word-break:break-word}
.jmsg.bot .bbl{background:#fff;color:var(--ink);border:1px solid var(--border);border-bottom-left-radius:4px}
.jmsg.usr .bbl{background:var(--ink-bg);color:#fff;border-bottom-right-radius:4px}
.jmsg .jts{font-size:10.5px;color:var(--slate-400);padding:0 4px}
.jmsg.usr .jts{text-align:right}
.jtyping{display:flex;gap:5px;align-items:center;padding:12px 16px;background:#fff;border:1px solid var(--border);border-radius:14px;border-bottom-left-radius:4px;width:fit-content}
.jtyping span{width:6px;height:6px;background:var(--slate-400);border-radius:50%;animation:jbounce 1.2s ease-in-out infinite}
.jtyping span:nth-child(2){animation-delay:.2s}
.jtyping span:nth-child(3){animation-delay:.4s}
@keyframes jbounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-6px)}}
#jhs-chips{padding:10px 14px;display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0;border-top:1px solid var(--border);background:#fff}
.jchip{background:var(--surface);color:var(--slate-700);border:1px solid var(--border);border-radius:50px;padding:6px 13px;font-size:12px;font-weight:500;transition:all .2s;white-space:nowrap}
.jchip:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
#jhs-input-row{padding:12px 14px 14px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0;background:#fff}
#jhs-input{flex:1;border:1.5px solid var(--border);border-radius:11px;padding:10px 14px;font-size:13.5px;outline:none;color:var(--ink);background:#fff;transition:border-color .2s}
#jhs-input:focus{border-color:var(--ink)}
#jhs-send{width:40px;height:40px;border-radius:10px;background:var(--ink-bg);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s}
#jhs-send:hover{transform:scale(1.05)}
#jhs-send svg{width:14px;height:14px;fill:#fff}
@media(max-width:420px){#jhs-chat-panel{width:calc(100vw - 32px)}}

/* ── RESPONSIVE GLOBALS ── */
@media(max-width:1024px){
  section{padding:80px 0}
  :root{--sp-section:80px}
}
@media(max-width:640px){
  section{padding:64px 0}
  .wrap{padding:0 20px}
  .sec-head{margin-bottom:42px}
}

/* ════════════════════════════════════════════════════════════════════
   CINEMATIC LAYER v1 — Lenis + GSAP + Three.js
   ════════════════════════════════════════════════════════════════════ */

/* Lenis smooth-scroll body lock */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-scrolling iframe{pointer-events:none}

/* Cinematic reveal targets — invisible until GSAP/IO promotes them */
[data-cine],
[data-cine-stagger]>*,
[data-cine-text] .cine-line{opacity:0;will-change:transform,opacity}
[data-cine="fade"]{transform:translateY(0)}
[data-cine="up"]{transform:translateY(28px)}
[data-cine="up-lg"]{transform:translateY(56px)}
[data-cine="left"]{transform:translateX(-44px)}
[data-cine="right"]{transform:translateX(44px)}
[data-cine="zoom"]{transform:scale(.94)}
[data-cine="rise"]{transform:translateY(40px) scale(.98)}
[data-cine-stagger]>*{transform:translateY(28px)}
[data-cine-text] .cine-line{transform:translateY(110%)}
[data-cine-text] .cine-line-wrap{overflow:hidden;display:block}

/* Reduced-motion fallback — show immediately */
@media (prefers-reduced-motion: reduce){
  [data-cine],[data-cine-stagger]>*,[data-cine-text] .cine-line{
    opacity:1!important;transform:none!important;
  }
}

/* Hero refinement — soften the purple highlight to a navy gradient */
.hero-h1 .hl::after,
[data-cine-h] .hl::after{
  background:linear-gradient(90deg,rgba(79,70,229,.16),rgba(59,130,246,.16))!important;
}

/* Cinematic glass card — for floating UI overlays */
.cine-glass{
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 28px 60px -20px rgba(15,23,42,.18),0 4px 12px -4px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.7);
}
.cine-glass-dark{
  background:rgba(20,32,57,.66);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 28px 60px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
  color:#fff;
}

/* Subtle CSS particle field — pure CSS, no JS, used as ambient depth */
.cine-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cine-particles span{
  position:absolute;display:block;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,rgba(79,70,229,.6),rgba(79,70,229,0) 70%);
  opacity:.6;animation:cineFloat 18s linear infinite;
}
.cine-particles span:nth-child(2n){background:radial-gradient(circle,rgba(59,130,246,.55),rgba(59,130,246,0) 70%);animation-duration:24s}
.cine-particles span:nth-child(3n){background:radial-gradient(circle,rgba(103,232,249,.45),rgba(103,232,249,0) 70%);animation-duration:30s}
@keyframes cineFloat{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(20px,-30px,0)}
  100%{transform:translate3d(0,0,0)}
}

/* Hero Three.js canvas — sits behind hero content */
.cine-hero-canvas{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.85;
  mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
}

/* ════════════════════════════════════════════════════════════════════
   PARALLAX STORY — Global Career Opportunities (cinematic centerpiece)
   Four layers: bg gradient+mesh+globe / SVG connections / floating
   country cards (variable depth) / foreground headline+stats+CTA.
   ════════════════════════════════════════════════════════════════════ */
.parallax-story{
  position:relative;
  background:linear-gradient(180deg,#080F22 0%,#0A1628 38%,#10213F 72%,#0A1628 100%);
  color:#fff;
  min-height:140vh;
  padding:160px 0 200px;
  overflow:hidden;
  isolation:isolate;
}

/* ── LAYER 1 · Background (very slow parallax) ── */
.ps-bg{position:absolute;inset:0;z-index:0;pointer-events:none;will-change:transform}
.ps-bg-mesh{
  position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse at 50% 50%,#000 25%,transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 25%,transparent 70%);
  opacity:.7;
}
.ps-bg-glow{
  position:absolute;top:50%;left:50%;width:1100px;height:1100px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(79,70,229,.22) 0%,rgba(99,102,241,.10) 35%,rgba(79,70,229,0) 70%);
  transform:translate(-50%,-50%);
  filter:blur(40px);
  animation:psGlow 14s ease-in-out infinite;
}
@keyframes psGlow{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  50%{transform:translate(-50%,-50%) scale(1.08)}
}
.ps-bg-glow-2{
  position:absolute;top:18%;right:-200px;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(59,130,246,.20),transparent 70%);
  filter:blur(60px);
}
.ps-bg-glow-3{
  position:absolute;bottom:8%;left:-180px;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle,rgba(103,232,249,.15),transparent 70%);
  filter:blur(60px);
}

/* Three.js globe canvas — sits centred in the back layer */
.ps-globe{
  position:absolute;top:50%;left:50%;
  width:min(820px,80vw);height:min(820px,80vw);
  transform:translate(-50%,-50%);
  mask-image:radial-gradient(circle,#000 38%,transparent 70%);
  -webkit-mask-image:radial-gradient(circle,#000 38%,transparent 70%);
  opacity:.85;
}

/* Subtle CSS particle field on top of background */
.ps-particles{position:absolute;inset:0;pointer-events:none}
.ps-particles span{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:radial-gradient(circle,rgba(199,204,250,.7),rgba(199,204,250,0));
  opacity:.6;animation:psFloat 16s linear infinite;
}
.ps-particles span:nth-child(2n){background:radial-gradient(circle,rgba(103,232,249,.55),rgba(103,232,249,0));animation-duration:22s}
.ps-particles span:nth-child(3n){background:radial-gradient(circle,rgba(165,180,252,.55),rgba(165,180,252,0));animation-duration:28s}
@keyframes psFloat{
  0%{transform:translate3d(0,0,0);opacity:0}
  10%{opacity:.7}
  90%{opacity:.7}
  100%{transform:translate3d(40px,-80px,0);opacity:0}
}

/* ── LAYER 2 · SVG connection lines ── */
.ps-lines{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;
  mask-image:radial-gradient(ellipse at 50% 50%,#000 0%,#000 50%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 0%,#000 50%,transparent 78%);
}
.ps-line{
  fill:none;stroke:url(#psLineGrad);stroke-width:1.2;
  stroke-linecap:round;opacity:.85;
}
.ps-line-dot{
  fill:#C7CCFA;opacity:0;transform-origin:center;
}

/* ── LAYER 3 · Floating country cards (mid-foreground) ── */
.ps-cards{position:absolute;inset:0;z-index:2;pointer-events:none}
.ps-card{
  position:absolute;
  display:flex;align-items:center;gap:14px;
  padding:14px 18px;
  background:rgba(20,32,57,.66);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border:1px solid rgba(199,204,250,.16);
  border-radius:16px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  pointer-events:auto;
  will-change:transform,opacity;
}
.ps-card::before{
  content:'';position:absolute;top:-1px;left:14px;right:14px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(199,204,250,.5),transparent);
}
.ps-card-flag{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  border:1px solid rgba(255,255,255,.08);
}
.ps-card-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.ps-card-city{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.2}
.ps-card-country{font-size:11.5px;color:rgba(199,204,250,.72);font-weight:500}
.ps-card-meta{display:flex;align-items:baseline;gap:6px;margin-top:4px}
.ps-card-roles{font-family:var(--f-display);font-size:15px;font-weight:700;color:#fff;letter-spacing:-.015em}
.ps-card-trend{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10.5px;font-weight:700;color:#86EFAC;letter-spacing:.02em;
  padding:2px 6px;border-radius:50px;background:rgba(74,222,128,.12);
}
.ps-card-trend i{font-size:8px}

/* Positions — variable depth per card via data-cine-parallax */
.ps-card-1{top:11%;left:3%}
.ps-card-2{top:8%;right:5%}
.ps-card-3{top:38%;left:1%}
.ps-card-4{top:34%;right:2%}
.ps-card-5{bottom:30%;left:6%}
.ps-card-6{bottom:24%;right:6%}

/* ── LAYER 4 · Foreground content (slowest parallax) ── */
.ps-fore{
  position:relative;z-index:3;
  max-width:780px;margin:0 auto;text-align:center;
  padding:0 32px;
}
.ps-fore .eyebrow{margin-bottom:22px}
.ps-h2{
  font-family:var(--f-display);font-weight:700;
  font-size:clamp(38px,5.4vw,72px);
  letter-spacing:-.035em;line-height:1.04;color:#fff;
  margin-bottom:22px;
}
.ps-h2 .hl{
  background:linear-gradient(135deg,#C7CCFA 0%,#A5B4FC 50%,#67E8F9 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.ps-sub{
  font-size:19px;line-height:1.65;color:rgba(255,255,255,.75);
  max-width:620px;margin:0 auto 36px;
}

/* Recruitment process visual — slim pill in the foreground */
.ps-process{
  display:inline-flex;align-items:center;gap:14px;
  padding:10px 18px;margin-bottom:48px;
  background:rgba(20,32,57,.66);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border:1px solid rgba(199,204,250,.16);border-radius:50px;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.85);
}
.ps-process-step{display:inline-flex;align-items:center;gap:7px;letter-spacing:-.005em}
.ps-process-step i{width:18px;height:18px;border-radius:50%;background:rgba(199,204,250,.16);color:#C7CCFA;display:inline-flex;align-items:center;justify-content:center;font-size:9px}
.ps-process-arrow{color:rgba(199,204,250,.4);font-size:10px}

/* Stats panel — glass row beneath headline */
.ps-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:760px;margin:0 auto 40px;
}
.ps-stat{
  padding:22px 18px;border-radius:16px;
  background:rgba(20,32,57,.62);
  backdrop-filter:saturate(160%) blur(18px);
  -webkit-backdrop-filter:saturate(160%) blur(18px);
  border:1px solid rgba(199,204,250,.14);
  box-shadow:0 20px 40px -16px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  text-align:left;
}
.ps-stat strong{
  display:block;font-family:var(--f-display);
  font-size:32px;font-weight:700;color:#fff;
  letter-spacing:-.03em;line-height:1;
}
.ps-stat strong small{font-size:18px;color:#A5B4FC;font-weight:600;margin-left:2px}
.ps-stat span{
  display:block;font-size:12px;color:rgba(199,204,250,.68);
  font-weight:500;letter-spacing:.02em;margin-top:8px;
}

.ps-cta{display:inline-flex;align-items:center;gap:10px}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .parallax-story{padding:120px 0 140px;min-height:auto}
  .ps-globe{width:min(620px,90vw);height:min(620px,90vw)}
  .ps-card{padding:11px 14px;gap:10px}
  .ps-card-flag{width:34px;height:34px;font-size:17px}
  .ps-card-city{font-size:13px}
  .ps-card-country{font-size:11px}
  .ps-card-roles{font-size:13.5px}
  .ps-card-2{right:3%}.ps-card-4{right:1%}.ps-card-6{right:4%}
  .ps-card-1{left:2%}.ps-card-3{left:0%}.ps-card-5{left:4%}
  .ps-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  /* Hide a few cards so foreground isn't crowded */
  .ps-card-3,.ps-card-4{display:none}
  .ps-card{padding:9px 12px;gap:8px}
  .ps-card-flag{width:30px;height:30px;font-size:15px}
  .ps-card-meta{display:none}
  .ps-process{font-size:11.5px;gap:8px;padding:8px 14px}
  .ps-process-step i{display:none}
  .ps-h2{font-size:clamp(34px,8vw,52px)}
}
@media(max-width:560px){
  .parallax-story{padding:88px 0 100px}
  /* Mobile: keep only 2 cards as decorative accents and shrink */
  .ps-card-5,.ps-card-6{display:none}
  .ps-card-1{top:4%;left:50%;transform:translateX(-50%) scale(.85)}
  .ps-card-2{top:auto;bottom:8%;right:auto;left:50%;transform:translateX(-50%) scale(.85)}
  .ps-globe{width:120vw;height:120vw;opacity:.6}
  .ps-stats{grid-template-columns:1fr 1fr;gap:10px}
  .ps-stat{padding:16px 14px}
  .ps-stat strong{font-size:24px}
  .ps-sub{font-size:16px;margin-bottom:28px}
  .ps-process{margin-bottom:32px}
}

/* ════ TIMELINE PROGRESS — scroll-driven step line ════ */
.cine-timeline{position:relative}
.cine-timeline-track{
  position:absolute;top:28px;left:8%;right:8%;height:2px;
  background:var(--border);z-index:0;border-radius:50px;overflow:hidden;
}
.cine-timeline-fill{
  position:absolute;top:0;left:0;height:100%;width:0;
  background:linear-gradient(90deg,var(--ink),var(--accent));
  border-radius:50px;
}
@media(max-width:768px){.cine-timeline-track{display:none}}

/* ════ SCROLL PROGRESS BAR (top of page) ════ */
.cine-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:99999;
  background:transparent;pointer-events:none;
}
.cine-progress-bar{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--accent),#3B82F6 60%,#06B6D4);
  transition:width .15s linear;
  box-shadow:0 0 12px rgba(79,70,229,.4);
}

/* ════ PARALLAX HELPER ════ */
[data-cine-parallax]{will-change:transform}

/* ════ SCROLL-LINKED FLOAT for hero cards ════ */
.cine-float-slow{animation:cineFloatSlow 8s ease-in-out infinite}
.cine-float-mid{animation:cineFloatMid 6s ease-in-out -3s infinite}
@keyframes cineFloatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes cineFloatMid{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ════ SECTION BLEND — soft transition between dark and light sections ════ */
.cine-blend-top::before{
  content:'';position:absolute;top:0;left:0;right:0;height:64px;
  background:linear-gradient(180deg,var(--surface),transparent);
  pointer-events:none;z-index:1;
}
.cine-blend-bottom::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:64px;
  background:linear-gradient(0deg,var(--surface),transparent);
  pointer-events:none;z-index:1;
}

/* ════════════════════════════════════════════════════════════════════
   THEME TOGGLE BUTTON (in nav)
   ════════════════════════════════════════════════════════════════════ */
.theme-toggle{
  position:relative;width:38px;height:38px;border-radius:50%;
  background:var(--surface);border:1px solid var(--border);
  color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1);
  overflow:hidden;flex-shrink:0;font-size:13px;
}
.theme-toggle:hover{
  border-color:var(--border-strong);
  transform:translateY(-1px) rotate(12deg);
  box-shadow:var(--shadow-sm);
}
.theme-toggle .ic{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .25s ease;
}
.theme-toggle .ic-sun{opacity:1;transform:rotate(0) scale(1)}
.theme-toggle .ic-moon{opacity:0;transform:rotate(-90deg) scale(.6)}
[data-theme="dark"] .theme-toggle .ic-sun{opacity:0;transform:rotate(90deg) scale(.6)}
[data-theme="dark"] .theme-toggle .ic-moon{opacity:1;transform:rotate(0) scale(1)}
.mob-theme{
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 0;color:rgba(255,255,255,.85);font-size:16px;font-weight:500;
  cursor:pointer;background:none;border:none;border-bottom:1px solid rgba(255,255,255,.07);
  font-family:inherit;width:100%;text-align:left;
}
.mob-theme i{margin-right:6px;color:#A5B4FC;width:16px}

/* ════════════════════════════════════════════════════════════════════
   DARK THEME — token overrides
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"]{
  color-scheme: dark;
  /* Text */
  --ink:#F1F5F9;
  --ink-2:#E5E9F0;
  /* Slate scale — inverted hierarchy (lighter on dark) */
  --slate-700:#CBD5E1;
  --slate-600:#A1AEC2;
  --slate-500:#7B8AA3;
  --slate-400:#5B6A85;
  --slate-300:#3F4E68;
  --slate-200:#2C3A52;
  --slate-100:#1A2640;
  --slate-50:#0E1A33;
  /* Surfaces */
  --bg:#0A1628;
  --surface:#0E1A33;
  --surface-2:#142239;
  --border:#1F2D49;
  --border-strong:#2D3E5E;
  /* Accent — slightly lifted for legibility on dark */
  --accent:#818CF8;
  --accent-2:#A5B4FC;
  --accent-soft:rgba(129,140,248,.16);
  --accent-soft-2:rgba(129,140,248,.08);
  --accent-deep:#6366F1;
  /* Semantic */
  --success:#34D399;
  --success-soft:rgba(52,211,153,.16);
  --warn:#FBBF24;
  --warn-soft:rgba(251,191,36,.16);
  /* Shadows — heavier in dark mode */
  --shadow-xs:0 1px 2px rgba(0,0,0,.45);
  --shadow-sm:0 2px 8px rgba(0,0,0,.4);
  --shadow:0 8px 24px -10px rgba(0,0,0,.6),0 2px 8px -2px rgba(0,0,0,.3);
  --shadow-md:0 16px 40px -16px rgba(0,0,0,.7),0 4px 12px -4px rgba(0,0,0,.4);
  --shadow-lg:0 28px 60px -20px rgba(0,0,0,.8),0 8px 20px -8px rgba(0,0,0,.5);
  --shadow-accent:0 12px 32px -10px rgba(129,140,248,.45);
}

/* Smooth color transitions when switching themes */
html{transition:background-color .35s ease,color .35s ease}
body{transition:background-color .35s ease,color .35s ease}
.nav,.foot,.card,.svc,.sv,.fc,.bn-card,.testi-card,.price-card,.faq-item,.cap,.val,.pk,.eth-card,.sol,.ind,.verify-item,.role,.c-form,.c-method,.uc-card{
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease;
}

/* ════════════════════════════════════════════════════════════════════
   DARK THEME — element-specific overrides
   ════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] body{background:var(--bg);color:var(--ink)}

/* Nav — translucent dark backdrop */
[data-theme="dark"] .nav{background:rgba(10,22,40,.78);border-bottom-color:var(--border)}
[data-theme="dark"] .nav.scrolled{background:rgba(10,22,40,.94);box-shadow:0 1px 0 var(--border),0 6px 24px -8px rgba(0,0,0,.5)}
/* In dark theme, swap the colored logo.svg for the dark-bg variant logo-white.svg
   instead of applying a brightness/invert filter which would destroy the
   colored "SQUAD" wordmark and the gradient bubble. */
[data-theme="dark"] .nav-logo img{content:url('../brand/logo-white.svg')}
[data-theme="dark"] .drop{background:var(--surface-2);border-color:var(--border)}
[data-theme="dark"] .drop a:hover{background:var(--surface)}

/* Hero — switch to dark gradient base */
[data-theme="dark"] .hero{
  background:
    radial-gradient(ellipse 1100px 600px at 100% 0%,rgba(129,140,248,.14),transparent 60%),
    radial-gradient(ellipse 900px 500px at 0% 80%,rgba(103,232,249,.08),transparent 60%),
    var(--bg) !important;
}
[data-theme="dark"] .hero-grid,
[data-theme="dark"] .hero-grid{
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
}
[data-theme="dark"] .hero-trust{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .hero-photo{background:var(--surface-2)}
[data-theme="dark"] .hero-card-match,
[data-theme="dark"] .hero-card-match::before,
[data-theme="dark"] .post-card,
[data-theme="dark"] .search-card,
[data-theme="dark"] .profile-mock,
[data-theme="dark"] .comp-mock,
[data-theme="dark"] .amock,
[data-theme="dark"] .score,
[data-theme="dark"] .vmock,
[data-theme="dark"] .demo,
[data-theme="dark"] .hrm-mock,
[data-theme="dark"] .kanban{
  background:var(--surface);border-color:var(--border) !important;
}
[data-theme="dark"] .hms{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .pm-row{border-bottom-color:var(--border)}
[data-theme="dark"] .pm-skill{background:var(--surface-2);border-color:var(--border);color:var(--slate-600)}
[data-theme="dark"] .hcm-skill{background:var(--surface-2);border-color:var(--border);color:var(--slate-600)}

/* Logos band */
[data-theme="dark"] .logos{background:transparent;border-color:var(--border)}

/* Stats sections — change surface base on dark */
[data-theme="dark"] .stats,
[data-theme="dark"] .how,
[data-theme="dark"] .pricing,
[data-theme="dark"] .verify,
[data-theme="dark"] .cases,
[data-theme="dark"] .feat,
[data-theme="dark"] .contact-sec,
[data-theme="dark"] .svcs,
[data-theme="dark"] .journey,
[data-theme="dark"] .perks,
[data-theme="dark"] .faq-sec{
  background:var(--surface) !important;
}

/* Cards — universal surface treatment in dark mode */
[data-theme="dark"] .stat,
[data-theme="dark"] .svc,
[data-theme="dark"] .sv,
[data-theme="dark"] .fc,
[data-theme="dark"] .bn-card,
[data-theme="dark"] .testi-card,
[data-theme="dark"] .price-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .cap,
[data-theme="dark"] .val,
[data-theme="dark"] .pk,
[data-theme="dark"] .eth-card,
[data-theme="dark"] .sol,
[data-theme="dark"] .ind,
[data-theme="dark"] .verify-item,
[data-theme="dark"] .role,
[data-theme="dark"] .c-form,
[data-theme="dark"] .c-method,
[data-theme="dark"] .uc-card,
[data-theme="dark"] .news-band,
[data-theme="dark"] .hms,
[data-theme="dark"] .news-inp{
  background:var(--bg) !important;
  border-color:var(--border) !important;
}
[data-theme="dark"] .price-card.hot{border-color:var(--ink) !important}

/* FAQ — active state pops in dark */
[data-theme="dark"] .faq-toggle{background:var(--surface-2);color:var(--slate-600)}
[data-theme="dark"] .faq-item[open]{box-shadow:0 0 0 1px var(--accent),var(--shadow)}

/* Steps */
[data-theme="dark"] .step-n,
[data-theme="dark"] .how-n,
[data-theme="dark"] .j-n{background:var(--surface);border-color:var(--border);color:var(--ink)}

/* Solutions icon — invert with theme so it's visible */
[data-theme="dark"] .sol-icon{background:var(--accent)}
[data-theme="dark"] .sol-icon i{color:#fff}
[data-theme="dark"] .sol.b .sol-icon{background:var(--accent-2)}

/* Service icons & feature icons — keep accent on surface */
[data-theme="dark"] .svc-icon{background:rgba(20,32,57,.8);color:var(--ink)}
[data-theme="dark"] .bn-icon,
[data-theme="dark"] .fc-icon,
[data-theme="dark"] .sv-icon,
[data-theme="dark"] .cap-icon,
[data-theme="dark"] .val-icon,
[data-theme="dark"] .pk-icon,
[data-theme="dark"] .role-icon,
[data-theme="dark"] .ci-icon,
[data-theme="dark"] .verify-item i,
[data-theme="dark"] .ind-icon{background:var(--accent-soft);color:var(--accent-2)}

/* HRM Service mock dashboard */
[data-theme="dark"] .hrm-tile{background:var(--surface-2);border-color:var(--border)}
[data-theme="dark"] .hrm-emp{background:var(--surface-2);border-color:var(--border)}
[data-theme="dark"] .hrm-mock-head{background:var(--ink-bg)}

/* CRM kanban mock */
[data-theme="dark"] .kanban-cols{background:var(--border)}
[data-theme="dark"] .kcol{background:var(--surface-2)}
[data-theme="dark"] .kcard{background:var(--bg);border-color:var(--border)}
[data-theme="dark"] .kcard-name{color:var(--ink)}
[data-theme="dark"] .kcard-meta .sc{background:var(--accent-soft);color:var(--accent-2)}

/* Compliance mock */
[data-theme="dark"] .ci{background:var(--surface-2);border-color:var(--border)}

/* Account help mock */
[data-theme="dark"] .amsg.them .amsg-bubble{background:var(--surface-2);color:var(--ink)}
[data-theme="dark"] .amock-foot{border-top-color:var(--border)}

/* AI scoring mock */
[data-theme="dark"] .score-bar,
[data-theme="dark"] .score-row-bar,
[data-theme="dark"] .hcm-bar,
[data-theme="dark"] .vmock-bar{background:var(--surface-2)}
[data-theme="dark"] .score-row-fill{background:var(--ink)}

/* AI page demo widget */
[data-theme="dark"] .demo-msg.ai .demo-bubble{background:var(--surface-2);color:var(--ink);border-color:var(--border)}
[data-theme="dark"] .demo-input{background:var(--surface-2);border-color:var(--border);color:var(--ink)}
[data-theme="dark"] .demo-foot{background:var(--surface);border-top-color:var(--border)}

/* Talent squad / Hiring Partners hero forms */
[data-theme="dark"] .search-field input,
[data-theme="dark"] .search-field select,
[data-theme="dark"] .post-field input,
[data-theme="dark"] .post-field select,
[data-theme="dark"] .fg input,
[data-theme="dark"] .fg select,
[data-theme="dark"] .fg textarea,
[data-theme="dark"] .news-inp{
  background:var(--surface-2) !important;
  border-color:var(--border) !important;
  color:var(--ink) !important;
}
[data-theme="dark"] .search-field input::placeholder,
[data-theme="dark"] .post-field input::placeholder,
[data-theme="dark"] .fg input::placeholder,
[data-theme="dark"] .fg textarea::placeholder{color:var(--slate-500)}
[data-theme="dark"] .search-tag{background:var(--surface-2);border-color:var(--border);color:var(--slate-600)}
[data-theme="dark"] .search-tag.active,[data-theme="dark"] .search-tag:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Roles list — careers page */
[data-theme="dark"] .role-filter{background:var(--surface);border-color:var(--border);color:var(--slate-600)}
[data-theme="dark"] .role-filter.active,[data-theme="dark"] .role-filter:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
[data-theme="dark"] .role-tag{background:var(--surface-2);border-color:var(--border);color:var(--slate-600)}

/* Newsletter band on index */
[data-theme="dark"] .news-band{background:var(--surface)}

/* Logos cell colour */
[data-theme="dark"] .logo-cell{color:var(--slate-500)}
[data-theme="dark"] .logo-cell:hover{color:var(--ink)}

/* Country chips on globe (also serves talent squad) */
[data-theme="dark"] .country-chip{background:var(--surface);border-color:var(--border);color:var(--slate-700)}

/* Buttons — invert primary in dark mode */
[data-theme="dark"] .btn-primary{background:var(--ink);color:var(--bg)}
[data-theme="dark"] .btn-primary:hover{background:var(--ink-2);box-shadow:var(--shadow-md)}
[data-theme="dark"] .btn-ghost{background:transparent;color:var(--ink);border-color:var(--border-strong)}
[data-theme="dark"] .btn-ghost:hover{background:var(--surface-2);border-color:var(--ink)}
[data-theme="dark"] .btn-accent{background:var(--accent);color:#fff}
[data-theme="dark"] .btn-accent:hover{background:var(--accent-deep)}

/* Eyebrow chip */
[data-theme="dark"] .eyebrow{background:var(--accent-soft);color:var(--accent-2);border-color:rgba(129,140,248,.24)}

/* Badge inline */
[data-theme="dark"] .badge-success{background:var(--success-soft);color:var(--success)}
[data-theme="dark"] .badge-accent{background:var(--accent-soft);color:var(--accent-2)}

/* Chat widget — dark adjustments */
[data-theme="dark"] #jhs-chat-btn{background:#4F46E5;box-shadow:0 12px 32px rgba(79,70,229,.55),0 0 0 2px rgba(255,255,255,.14)}
[data-theme="dark"] #jhs-chat-btn:hover{background:#3730A3;box-shadow:0 16px 40px rgba(79,70,229,.7),0 0 0 2px rgba(255,255,255,.18)}
[data-theme="dark"] #jhs-notif{border-color:var(--bg)}
[data-theme="dark"] #jhs-chat-panel{background:var(--surface);box-shadow:0 32px 80px rgba(0,0,0,.5),0 0 0 1px var(--border)}
[data-theme="dark"] #jhs-chat-msgs{background:var(--surface-2)}
[data-theme="dark"] .jmsg.bot .bbl{background:var(--surface);color:var(--ink);border-color:var(--border)}
[data-theme="dark"] .jtyping{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] #jhs-chips{background:var(--surface);border-top-color:var(--border)}
[data-theme="dark"] .jchip{background:var(--surface-2);border-color:var(--border);color:var(--slate-600)}
[data-theme="dark"] .jchip:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
[data-theme="dark"] #jhs-input-row{background:var(--surface);border-top-color:var(--border)}
[data-theme="dark"] #jhs-input{background:var(--surface-2);border-color:var(--border);color:var(--ink)}
[data-theme="dark"] #jhs-input::placeholder{color:var(--slate-500)}
[data-theme="dark"] #jhs-send{background:#4F46E5;color:#fff}

/* FAQ sec aside heading color is var(--ink), already adapts */

/* Sticky FAQ aside on dark sections of services — adjust ::sticky to use surface */

/* Cards meta separators / borders */
[data-theme="dark"] .hcm-row{color:var(--slate-600)}
[data-theme="dark"] .hcm-meta strong{color:var(--ink)}

/* Hero photo caption (careers) */
[data-theme="dark"] .hero-photo-cap{background:rgba(10,22,40,.7);border-color:rgba(255,255,255,.12)}

/* Process pill on parallax-story already dark, kept as-is */

/* Globe section: parallax-story is hard-coded dark gradient (good in both modes) */

/* AI page hero pill */
[data-theme="dark"] .hero-pill{background:rgba(129,140,248,.12);border-color:rgba(129,140,248,.24);color:var(--accent-2)}

/* People mosaic background */
[data-theme="dark"] .people-quote{background:var(--bg);border-color:var(--border)}
[data-theme="dark"] .people{background:var(--surface)}

/* Coaching list cards */
[data-theme="dark"] .coach-list li{background:var(--bg);border-color:var(--border)}

/* Cases mock images preserve */
[data-theme="dark"] .cases-img{background:var(--bg);border-color:var(--border)}

/* Sticky aside on FAQ — no change needed (uses page bg) */

/* Country chips on globe-sec / parallax-story always dark — preserve */

/* Mobile nav toggle for theme */
.mob-theme:hover{color:#fff}

/* Smooth control: avoid transition flicker on cards with transforms */
@media (prefers-reduced-motion: reduce){
  html,body,.nav,.foot,.card,.svc,.sv,.fc,.bn-card,.testi-card,.price-card,.faq-item,.cap,.val,.pk,.eth-card,.sol,.ind,.verify-item,.role,.c-form,.c-method,.uc-card{
    transition:none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED DESIGN SYSTEM v2 — Card surface, atmosphere, section blends
   ════════════════════════════════════════════════════════════════════ */

/* ── Global atmosphere · subtle ambient gradient under everything ── */
.atmosphere{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 900px 500px at 15% 8%, rgba(79,70,229,.05), transparent 55%),
    radial-gradient(ellipse 800px 500px at 88% 92%, rgba(103,232,249,.04), transparent 55%);
}
[data-theme="dark"] .atmosphere{
  background:
    radial-gradient(ellipse 900px 500px at 15% 8%, rgba(129,140,248,.10), transparent 55%),
    radial-gradient(ellipse 800px 500px at 88% 92%, rgba(103,232,249,.07), transparent 55%);
}

/* ── Soft section blend · fades the top of a section into the previous ── */
.section-blend{position:relative}
.section-blend::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:88px;
  background:linear-gradient(180deg,var(--bg) 0%,transparent 100%);
  pointer-events:none;z-index:4;opacity:.9;
}
.section-blend.from-surface::before{
  background:linear-gradient(180deg,var(--surface) 0%,transparent 100%);
}
.section-blend.from-dark::before{
  background:linear-gradient(180deg,var(--ink-bg) 0%,transparent 100%);
}
.section-blend-bottom{position:relative}
.section-blend-bottom::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;height:88px;
  background:linear-gradient(0deg,var(--bg) 0%,transparent 100%);
  pointer-events:none;z-index:4;opacity:.9;
}
.section-blend-bottom.to-surface::after{
  background:linear-gradient(0deg,var(--surface) 0%,transparent 100%);
}
.section-blend-bottom.to-dark::after{
  background:linear-gradient(0deg,var(--ink-bg) 0%,transparent 100%);
}

/* ── Unified card surface · one design language across all card variants ── */
/* Use slightly elevated specificity (body prefix) to beat inline page styles */
body :is(.card,.svc,.sv,.fc,.bn-card,.testi-card,.price-card,.faq-item,.cap,.val,.pk,.eth-card,.sol,.ind,.verify-item,.uc-card,.hms,.hero-trust,.c-method){
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
  transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .35s ease,background-color .35s ease;
  position:relative;
}
body :is(.card,.svc,.sv,.fc,.bn-card,.testi-card,.price-card,.faq-item,.cap,.val,.pk,.eth-card,.sol,.ind,.verify-item,.uc-card,.hms,.hero-trust,.c-method):hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-strong);
}
/* Subtle inner highlight on every card */
body :is(.card,.svc,.sv,.fc,.bn-card,.testi-card,.price-card,.faq-item,.cap,.val,.pk,.eth-card,.sol,.ind,.verify-item,.uc-card,.hms,.hero-trust,.c-method)::after{
  content:'';position:absolute;top:0;left:18px;right:18px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  opacity:.4;border-radius:1px;
}
[data-theme="dark"] body :is(.card,.svc,.sv,.fc,.bn-card,.testi-card,.price-card,.faq-item,.cap,.val,.pk,.eth-card,.sol,.ind,.verify-item,.uc-card,.hms,.hero-trust,.c-method)::after{
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  opacity:.6;
}
/* Active / featured price card keeps its emphasis */
body .price-card.hot{border:2px solid var(--ink);box-shadow:var(--shadow-lg);transform:translateY(-8px)}
body .price-card.hot:hover{transform:translateY(-11px)}
/* FAQ open state — emphasis ring */
body .faq-item[open]{border-color:var(--ink);box-shadow:var(--shadow)}
[data-theme="dark"] body .faq-item[open]{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow)}

/* Inputs · unified */
body :is(.fg input,.fg select,.fg textarea,.search-field input,.search-field select,.post-field input,.post-field select,.demo-input){
  border-radius:var(--r-sm) !important;
}

/* ════════════════════════════════════════════════════════════════════
   HOW IT WORKS · 6-card Recruitment OS (premium reference section)
   ════════════════════════════════════════════════════════════════════ */
.hiw{
  position:relative;padding:var(--sp-section) 0;overflow:hidden;
  background:var(--surface);
}
.hiw-atmos{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 900px 400px at 50% 0%, rgba(79,70,229,.07), transparent 60%),
    radial-gradient(ellipse 700px 400px at 50% 100%, rgba(103,232,249,.05), transparent 60%);
}
[data-theme="dark"] .hiw-atmos{
  background:
    radial-gradient(ellipse 900px 400px at 50% 0%, rgba(129,140,248,.16), transparent 60%),
    radial-gradient(ellipse 700px 400px at 50% 100%, rgba(103,232,249,.08), transparent 60%);
}
.hiw .wrap{position:relative;z-index:1}
.hiw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hiw-card{
  position:relative;
  padding:36px 30px 32px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease,border-color .35s ease;
  overflow:hidden;
  isolation:isolate;
}
.hiw-card::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 460px 220px at 50% -10%, rgba(79,70,229,.08), transparent 60%);
  opacity:0;transition:opacity .45s ease;
}
[data-theme="dark"] .hiw-card::before{
  background:radial-gradient(ellipse 460px 220px at 50% -10%, rgba(129,140,248,.18), transparent 60%);
}
.hiw-card::after{
  content:'';position:absolute;top:0;left:24px;right:24px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  opacity:.5;
}
[data-theme="dark"] .hiw-card::after{
  background:linear-gradient(90deg,transparent,rgba(199,204,250,.18),transparent);opacity:.8;
}
.hiw-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:rgba(6,182,212,.30);
}
.hiw-card:hover::before{opacity:1}
.hiw-num{
  position:absolute;top:24px;right:26px;
  font-family:var(--f-display);font-size:12.5px;font-weight:700;
  letter-spacing:.16em;color:var(--teal,#06B6D4);z-index:2;
}
.hiw-icon{
  position:relative;z-index:1;
  height:96px;width:100%;
  display:flex;align-items:center;justify-content:flex-start;
  margin-bottom:20px;
}
.hiw-icon svg{width:112px;height:84px;overflow:visible}
.hiw-card:hover .hiw-icon{transform:none}
.hiw-card h3{position:relative;z-index:1;font-family:var(--f-display);font-size:20px;font-weight:700;letter-spacing:-.022em;color:var(--ink);margin-bottom:10px;line-height:1.2}
.hiw-card p{position:relative;z-index:1;font-size:14.5px;line-height:1.65;color:var(--slate-600)}
.hiw-card-link{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;
  margin-top:18px;font-size:13px;font-weight:600;color:var(--accent);
  transition:gap .2s ease,color .25s ease;
}
[data-theme="dark"] .hiw-card-link{color:var(--accent-2)}
.hiw-card:hover .hiw-card-link{gap:9px}

/* Subtle progress dots beneath the grid — reinforces "one workflow" */
.hiw-flow{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-top:48px;font-size:12px;color:var(--slate-500);
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;
}
.hiw-flow-line{flex:1;max-width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--border-strong),transparent)}

@media(max-width:1024px){
  .hiw-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .hiw-grid{grid-template-columns:1fr}
  .hiw-card{padding:28px 24px}
}

/* ════════════════════════════════════════════════════════════════════
   DARK THEME — comprehensive contrast audit fixes
   Three classes of broken patterns are corrected here:
   (a) White-bg controls that read text from var(--ink) — text inverted
       to light grey in dark and disappeared.
   (b) Inverted "filled-ink" controls (active tags, badges, mock heads)
       whose bg flipped light but text was hardcoded #fff.
   (c) Always-dark decorative surfaces that referenced the theme-flipping
       --ink token instead of the permanent --ink-bg.
   ════════════════════════════════════════════════════════════════════ */

/* (a) White-bg controls — pin text to permanent dark navy */
[data-theme="dark"] .btn-white{color:var(--ink-bg)}
[data-theme="dark"] .btn-white:hover{color:var(--ink-bg)}
[data-theme="dark"] .foot-news-form button{color:var(--ink-bg)}
[data-theme="dark"] .foot-soc:hover{background:#fff;color:var(--ink-bg);border-color:#fff}

/* (b) Filled-ink controls — text inverts to --bg (now dark) to match
       the .btn-primary inversion pattern */
[data-theme="dark"] .faq-item[open] .faq-toggle,
[data-theme="dark"] .pt-btn.active,
[data-theme="dark"] .price-hot-tag,
[data-theme="dark"] .bn-icon,
[data-theme="dark"] .c-method-icon{
  color:var(--bg);
}
[data-theme="dark"] .amsg.you .amsg-bubble{
  background:var(--ink);color:var(--bg);
}

/* (c) Always-dark decorative surfaces — repin to --ink-bg */
[data-theme="dark"] .why,
[data-theme="dark"] .ethics{
  background:var(--ink-bg) !important;
}
[data-theme="dark"] .hero-card-stat,
[data-theme="dark"] .hrm-mock-head,
[data-theme="dark"] .kanban-head,
[data-theme="dark"] .demo-head,
[data-theme="dark"] .demo-msg.you .demo-ava,
[data-theme="dark"] .demo-msg.you .demo-bubble,
[data-theme="dark"] .demo-send,
[data-theme="dark"] .skip{
  background:var(--ink-bg) !important;
  color:#fff !important;
}
[data-theme="dark"] .hero-card-stat .hcs-label{color:rgba(255,255,255,.62)}
[data-theme="dark"] .hero-card-stat .hcs-num{color:#fff}
[data-theme="dark"] .hero-card-stat .hcs-trend{color:#4ADE80}

/* (d) Progress fills — light-ink bar was invisible on light surface, swap to accent gradient */
[data-theme="dark"] .score-row-fill{background:var(--accent)}
[data-theme="dark"] .hcm-bar-fill{background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* (e) Chat bot bubble — was #fff with var(--ink) text */
[data-theme="dark"] .jmsg.bot .bbl{background:var(--surface);color:var(--ink);border-color:var(--border)}

/* (f) Hero highlight underline — hardcoded purple/violet looked muddy on
       the dark hero. Lift it to the dark-mode accent tones. */
[data-theme="dark"] .hero-h1 .hl::after{
  background:linear-gradient(90deg,rgba(129,140,248,.28),rgba(165,180,252,.28));
}

/* (g) FAQ open-state border — uses var(--ink) which is now light; that
       reads as an emphasis ring rather than a problem, so we keep it but
       drop the heavy box-shadow that doubled it. */
[data-theme="dark"] .faq-item[open]{box-shadow:0 0 0 1px var(--accent),var(--shadow)}

/* (h) Ethics-section cards — the .ethics section is permanently dark in BOTH
       themes, so the cards inside must stay translucent-on-dark and NOT inherit
       the unified card surface (which paints them white in light theme and
       hides the white text). We use !important to beat any other rule that
       might be cached or load later. */
body .ethics .eth-card,
.ethics .eth-card{
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
}
body .ethics .eth-card:hover,
.ethics .eth-card:hover{
  background:rgba(255,255,255,.08) !important;
  border-color:rgba(199,204,250,.30) !important;
}
body .ethics .eth-card h3,
.ethics .eth-card h3{color:#fff !important}
body .ethics .eth-card p,
.ethics .eth-card p{color:rgba(255,255,255,.65) !important}
body .ethics .eth-icon,
.ethics .eth-icon{
  background:rgba(199,204,250,.16) !important;
  color:#C7CCFA !important;
}
/* And keep the ethics section itself permanently dark regardless of theme */
body .ethics,
.ethics{
  background:var(--ink-bg) !important;
  color:#fff !important;
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED CARD STYLE — site-wide standard
   Mirrors the "Recruitment OS" (.hiw-card) visual signature:
   white surface, light border, soft radius, smooth lift on hover,
   subtle radial-gradient glow + top sheen line.
   Selectors are doubled (e.g. .sol.sol) to bump specificity above the
   per-page inline <style> blocks without needing !important.
   The card's existing padding / internal layout (icon, h3, p, list,
   buttons) is preserved — only the surface treatment is unified.
   ════════════════════════════════════════════════════════════════════ */
.card-std.card-std,
.sol.sol,
.cap.cap,
.val.val,
.pk.pk,
.uc-card.uc-card,
.bn-card.bn-card,
.ind.ind,
.fc.fc,
.kcard.kcard,
.cp-card.cp-card,
.lp-cross-card.lp-cross-card,
.c-method.c-method,
.c-form.c-form{
  position:relative;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  transition:transform .4s cubic-bezier(.16,1,.3,1),
             box-shadow .4s ease,
             border-color .35s ease;
  overflow:hidden;
  isolation:isolate;
}

/* Soft radial glow — appears on hover, sits behind the content */
.card-std.card-std::before,
.sol.sol::before,
.cap.cap::before,
.val.val::before,
.pk.pk::before,
.uc-card.uc-card::before,
.bn-card.bn-card::before,
.ind.ind::before,
.fc.fc::before,
.kcard.kcard::before,
.cp-card.cp-card::before,
.lp-cross-card.lp-cross-card::before,
.c-method.c-method::before,
.c-form.c-form::before{
  content:'';
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 460px 220px at 50% -10%, rgba(79,70,229,.08), transparent 60%);
  opacity:0;transition:opacity .45s ease;
}
[data-theme="dark"] .card-std.card-std::before,
[data-theme="dark"] .sol.sol::before,
[data-theme="dark"] .cap.cap::before,
[data-theme="dark"] .val.val::before,
[data-theme="dark"] .pk.pk::before,
[data-theme="dark"] .uc-card.uc-card::before,
[data-theme="dark"] .bn-card.bn-card::before,
[data-theme="dark"] .ind.ind::before,
[data-theme="dark"] .fc.fc::before,
[data-theme="dark"] .kcard.kcard::before,
[data-theme="dark"] .cp-card.cp-card::before,
[data-theme="dark"] .lp-cross-card.lp-cross-card::before,
[data-theme="dark"] .c-method.c-method::before,
[data-theme="dark"] .c-form.c-form::before{
  background:radial-gradient(ellipse 460px 220px at 50% -10%, rgba(129,140,248,.18), transparent 60%);
}

/* Top sheen — subtle hairline of light across the card's top edge */
.card-std.card-std::after,
.sol.sol::after,
.cap.cap::after,
.val.val::after,
.pk.pk::after,
.uc-card.uc-card::after,
.bn-card.bn-card::after,
.ind.ind::after,
.fc.fc::after,
.kcard.kcard::after,
.cp-card.cp-card::after,
.lp-cross-card.lp-cross-card::after,
.c-method.c-method::after,
.c-form.c-form::after{
  content:'';
  position:absolute;top:0;left:24px;right:24px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  opacity:.5;
}
[data-theme="dark"] .card-std.card-std::after,
[data-theme="dark"] .sol.sol::after,
[data-theme="dark"] .cap.cap::after,
[data-theme="dark"] .val.val::after,
[data-theme="dark"] .pk.pk::after,
[data-theme="dark"] .uc-card.uc-card::after,
[data-theme="dark"] .bn-card.bn-card::after,
[data-theme="dark"] .ind.ind::after,
[data-theme="dark"] .fc.fc::after,
[data-theme="dark"] .kcard.kcard::after,
[data-theme="dark"] .cp-card.cp-card::after,
[data-theme="dark"] .lp-cross-card.lp-cross-card::after,
[data-theme="dark"] .c-method.c-method::after,
[data-theme="dark"] .c-form.c-form::after{
  background:linear-gradient(90deg,transparent,rgba(199,204,250,.18),transparent);opacity:.8;
}

/* Hover lift + accent border */
.card-std.card-std:hover,
.sol.sol:hover,
.cap.cap:hover,
.val.val:hover,
.pk.pk:hover,
.uc-card.uc-card:hover,
.bn-card.bn-card:hover,
.ind.ind:hover,
.fc.fc:hover,
.kcard.kcard:hover,
.cp-card.cp-card:hover,
.lp-cross-card.lp-cross-card:hover,
.c-method.c-method:hover,
.c-form.c-form:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-md);
  border-color:rgba(6,182,212,.30);
}
.card-std.card-std:hover::before,
.sol.sol:hover::before,
.cap.cap:hover::before,
.val.val:hover::before,
.pk.pk:hover::before,
.uc-card.uc-card:hover::before,
.bn-card.bn-card:hover::before,
.ind.ind:hover::before,
.fc.fc:hover::before,
.kcard.kcard:hover::before,
.cp-card.cp-card:hover::before,
.lp-cross-card.lp-cross-card:hover::before,
.c-method.c-method:hover::before,
.c-form.c-form:hover::before{opacity:1}

/* Lift direct children above the pseudo layer so content stays interactive */
.card-std.card-std > *,
.sol.sol > *,
.cap.cap > *,
.val.val > *,
.pk.pk > *,
.uc-card.uc-card > *,
.bn-card.bn-card > *,
.ind.ind > *,
.fc.fc > *,
.kcard.kcard > *,
.cp-card.cp-card > *,
.lp-cross-card.lp-cross-card > *,
.c-method.c-method > *,
.c-form.c-form > *{position:relative;z-index:1}

/* .c-method is a horizontal row tile — disable the translateY tilt for it
   (the original micro-interaction was translateX(4px), keep that feel) */
.c-method.c-method:hover{transform:translateX(4px)}

/* ════════════════════════════════════════════════════════════════════
   NEON LINE ICON SYSTEM (site-wide)
   - Replaces FontAwesome card icons via JS in jhs-neon-icons.js.
   - All icons draw with thin teal strokes on a soft teal background tile.
   - Animations: stroke draws, pulses, gentle floats.
   - Reuses the .sv-art animation primitives originally introduced for
     the home page Why/Stats sections.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --neon:#06B6D4;
  --neon-2:#22D3EE;
  --neon-soft:rgba(6,182,212,.10);
  --neon-soft-strong:rgba(6,182,212,.18);
}
[data-theme="dark"]{
  --neon:#67E8F9;
  --neon-2:#22D3EE;
  --neon-soft:rgba(103,232,249,.16);
  --neon-soft-strong:rgba(34,211,238,.22);
}

/* sv-art (svg animation) shared classes */
.sv-art{position:relative;display:flex;align-items:center;justify-content:center}
.sv-art svg{overflow:visible;width:100%;height:100%}
.sv-stroke{fill:none;stroke:var(--neon);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sv-stroke-2{fill:none;stroke:var(--neon-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sv-stroke-soft{fill:none;stroke:var(--neon);stroke-width:1.2;stroke-linecap:round;opacity:.35}
.sv-fill{fill:var(--neon)}
.sv-fill-2{fill:var(--neon-2)}
.sv-fill-soft{fill:var(--neon);opacity:.18}
.sv-pulse{transform-origin:center;transform-box:fill-box;animation:svPulse 2.6s ease-in-out infinite}
.sv-pulse.d1{animation-delay:.25s}.sv-pulse.d2{animation-delay:.5s}.sv-pulse.d3{animation-delay:.75s}
.sv-float{transform-origin:center;transform-box:fill-box;animation:svFloat 3.6s ease-in-out infinite}
.sv-float.d1{animation-delay:.4s}
.sv-spin{transform-origin:center;transform-box:fill-box;animation:svSpin 14s linear infinite}
.sv-draw{stroke-dasharray:80;stroke-dashoffset:80;animation:svDraw 3.4s ease-in-out infinite}
.sv-draw.d1{animation-delay:.35s}.sv-draw.d2{animation-delay:.7s}.sv-draw.d3{animation-delay:1.05s}
.sv-tick{stroke-dasharray:20;stroke-dashoffset:20;animation:svTickDraw 3.2s ease-in-out infinite}
@keyframes svPulse{0%,100%{transform:scale(.5);opacity:.35}50%{transform:scale(1.25);opacity:1}}
@keyframes svFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes svSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes svDraw{0%,12%{stroke-dashoffset:80;opacity:1}55%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-80;opacity:0}}
@keyframes svTickDraw{0%,18%{stroke-dashoffset:20}50%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}
@media(prefers-reduced-motion:reduce){.sv-art *{animation:none!important}}

/* Tile styling for the icon container itself (when it's a known icon class).
   .stat-icon is special: pages render it differently — some use a
   square 48px tile, some inline next to a number. We only set the
   neon accent colour here, not background/border, so it adapts. */
.bn-icon,.fc-icon,.cap-icon,.sv-icon,.pk-icon,.val-icon,.cv-icon,.fmt-icon{
  background:linear-gradient(160deg,var(--neon-soft),transparent 80%) !important;
  border:1px solid var(--neon-soft-strong) !important;
  color:var(--neon) !important;
}
[data-theme="dark"] .bn-icon,
[data-theme="dark"] .fc-icon,
[data-theme="dark"] .cap-icon,
[data-theme="dark"] .sv-icon,
[data-theme="dark"] .pk-icon,
[data-theme="dark"] .val-icon,
[data-theme="dark"] .cv-icon,
[data-theme="dark"] .fmt-icon{
  background:linear-gradient(160deg,var(--neon-soft),transparent 80%) !important;
  border:1px solid var(--neon-soft-strong) !important;
}
/* Make the SVG fill the icon tile */
.bn-icon .sv-art,.fc-icon .sv-art,.cap-icon .sv-art,
.sv-icon .sv-art,.pk-icon .sv-art,.val-icon .sv-art,
.cv-icon .sv-art,.fmt-icon .sv-art{width:60%;height:60%}

/* Stat cards: when .stat-icon has no inline page styling, give it a
   small neon-tinted square tile. The home page already has its own
   .stat-icon rule (54×42, no background) — that wins via cascade order
   because it's defined later in the page's inline <style>. */
.stat-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:12px;margin-bottom:18px;
  background:linear-gradient(160deg,var(--neon-soft),transparent 80%);
  border:1px solid var(--neon-soft-strong);
  color:var(--neon);
}
.stat-icon .sv-art{width:60%;height:60%}

/* ── Centered card content (Solutions + Services pages) ──
   Every icon-bearing card type on these pages now centers its icon,
   heading and description. The icon tile also centers horizontally. */
.bn-card,.fc,.cap,.sv,.pk,.val,.uc-card,.stat{
  text-align:center;
  align-items:center;
}
.bn-card .bn-icon,
.fc .fc-icon,
.cap .cap-icon,
.sv .sv-icon,
.pk .pk-icon,
.val .val-icon,
.uc-card .uc-icon,
.stat .stat-icon{
  margin-left:auto;margin-right:auto;
}
/* If a card uses flex layout, ensure children stretch to centered content */
.bn-card,.fc,.cap,.sv,.pk,.val,.uc-card{
  display:flex;flex-direction:column;align-items:center;
}
/* Numbers in stat cards already centred via .stat rule on home; reassert for
   pages without that inline override. */
.stat .stat-num,.stat .stat-sub{justify-content:center}
/* Lists inside use-case cards default to left-aligned bullets — recenter the
   marker too so the whole card stays balanced. */
.uc-card .uc-list{align-self:center;text-align:left;max-width:340px}