/* ═══════════════════════════════════════════════════════════════
   LANDING.CSS — HiringReferrals v7.2 FINAL MERGED
   ✅ All §1–23 landing sections 100% intact
   ✅ All §24–47 inner page sections 100% intact
   ✅ FIXED: navbar gap strip removed from ALL pages
   ✅ FIXED: conflicting padding-top overrides removed
   ✅ FIXED: mobile nav = Logo | Browse Jobs | ☰ (Sign In/Up inside)
   ✅ FIXED: hero negative margin removed — no gap on any page
   ✅ FIXED: hero text overflow on mobile — no right-side clipping
   ✅ MERGED: mobile-fix-patch.css cleanly integrated — zero conflicts
   ✅ Zero override conflicts · Single source of truth
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
═══════════════════════════════════════════════════════════════ */
:root {
  --primary:        #202870;
  --primary-dark:   #141850;
  --primary-mid:    #2a3490;
  --hero-bg-1:      #f4f6ff;
  --hero-bg-2:      #faf8ff;
  --hero-bg-3:      #fff9f5;
  --hero-bg-4:      #f0fdf8;
  --hero-text:      #1a1e3a;
  --hero-muted:     #5a6280;
  --hero-glass:     rgba(255,255,255,0.78);
  --hero-glass-bd:  rgba(255,255,255,0.92);
  --hero-shadow:    0 8px 40px rgba(32,40,112,0.10);
  --footer-bg:      #1e3fcc;
  --footer-top:     #1730aa;
  --footer-bottom:  #1228a0;
  --orange:         #e07838;
  --orange-dark:    #c05f20;
  --gold:           #f5c842;
  --green:          #16a34a;
  --blue-light:     #80b8e0;
  --purple:         #6c4ef2;
  --white:          #fff;
  --surface:        #f8f9fe;
  --gray-50:        #f4f5fb;
  --gray-100:       #eef0f7;
  --gray-200:       #e5e7f0;
  --muted:          #7a85a3;
  --text:           #1a1e3a;
  --green-bg:       #dcfce7;
  --dark:           #141850;
  --accent:         #e07838;
  --radius:         12px;
  --radius-lg:      18px;
  --radius-xl:      24px;
  --shadow-sm:      0 2px 8px  rgba(32,40,112,.08);
  --shadow-md:      0 6px 24px rgba(32,40,112,.12);
  --shadow-lg:      0 16px 56px rgba(32,40,112,.18);
  --nav-h:          68px;
}

/* ═══════════════════════════════════════════════════════════════
   2. RESET + BASE
═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  color:var(--text);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  margin:0 !important;
  padding:0 !important;
}
h1,h2,h3,h4 { font-family:'Syne',sans-serif; line-height:1.2; color:var(--text); }
h1 { font-size:clamp(1.7rem,3.8vw,3rem); font-weight:800; }
h2 { font-size:clamp(1.5rem,2.6vw,2.2rem); font-weight:700; }
h3 { font-size:1.05rem; font-weight:700; }
p  { color:var(--muted); line-height:1.65; font-size:14.5px; }
a  { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }

/* ═══════════════════════════════════════════════════════════════
   3. ANIMATIONS
═══════════════════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(32px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes slideLeft {
  from { opacity:0; transform:translateX(40px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes slideRight {
  from { opacity:0; transform:translateX(-40px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.92); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 0 3px rgba(74,222,128,.25); }
  50%     { box-shadow:0 0 0 8px rgba(74,222,128,.08); }
}
@keyframes bounce {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.2); }
}
@keyframes typingDot {
  0%,100% { transform:translateY(0); opacity:.5; }
  50%     { transform:translateY(-5px); opacity:1; }
}
@keyframes scrollLogos {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
@keyframes shimmer {
  0%   { background-position:-400px 0; }
  100% { background-position:400px 0; }
}
@keyframes floatY {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-8px); }
}
@keyframes gradientShift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}
@keyframes orbFloat {
  0%,100% { transform:translate(0,0) scale(1); }
  33%     { transform:translate(20px,-15px) scale(1.05); }
  66%     { transform:translate(-10px,10px) scale(.97); }
}
@keyframes revealBorder {
  from { opacity:0; transform:scaleX(0); }
  to   { opacity:1; transform:scaleX(1); }
}
@keyframes livePulse {
  0%,100% { box-shadow:0 0 0 0 rgba(74,222,128,.4); }
  50%     { box-shadow:0 0 0 6px rgba(74,222,128,0); }
}
@keyframes tickerScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}
@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes floatBob {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-6px); }
}
@keyframes hr-orb-float {
  0%   { transform:translate(0,0) scale(1); }
  25%  { transform:translate(24px,-32px) scale(1.04); }
  50%  { transform:translate(-16px,18px) scale(.97); }
  75%  { transform:translate(16px,32px) scale(1.02); }
  100% { transform:translate(0,0) scale(1); }
}
@keyframes aiGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(108,78,242,0); }
  50%     { box-shadow:0 0 18px 4px rgba(108,78,242,.18); }
}
@keyframes barGrow {
  from { width:0 !important; }
}
@keyframes rowIn {
  from { opacity:0; transform:translateX(-10px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes dotPulseGreen {
  0%,100% { box-shadow:0 0 0 3px rgba(34,197,94,.18); }
  50%     { box-shadow:0 0 0 6px rgba(34,197,94,.06); }
}

/* Scroll reveal — JS-gated fallback */
.reveal, .reveal-up {
  opacity:1;
  transform:none;
  transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1);
}
html.js-enabled .reveal { opacity:0; transform:translateY(28px); }
html.js-enabled .reveal.visible { opacity:1; transform:translateY(0); }
html.js-enabled .reveal-up { opacity:0; transform:translateY(24px); }
html.js-enabled .reveal-up.visible { opacity:1; transform:translateY(0); }
.rd1 { transition-delay:.08s; }
.rd2 { transition-delay:.16s; }
.rd3 { transition-delay:.24s; }
.rd4 { transition-delay:.32s; }
.rd5 { transition-delay:.40s; }

/* Section bg gradients */
.bonus-section,.roles-section,.ref-how,.testi-section,.clients-section {
  background:linear-gradient(170deg,#f0f3ff 0%,#ffffff 60%);
}
.referral-section,.profile-section,.ai-section,.industries-section {
  background:linear-gradient(160deg,#f8f9fe 0%,#eef1fb 100%);
}
.rpo-section     { background:linear-gradient(155deg,#eef1fb 0%,#f4f7ff 100%); }
.payroll-section { background:linear-gradient(165deg,#fff 0%,#f0f4ff 100%); }

/* ═══════════════════════════════════════════════════════════════
   4. LAYOUT HELPERS
═══════════════════════════════════════════════════════════════ */
.container   { max-width:1200px; margin:auto; padding:0 24px; }
.section     { padding:88px 0; }
.text-center { text-align:center; }
.eyebrow {
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(32,40,112,.08); border:1px solid rgba(32,40,112,.18);
  border-radius:999px; padding:5px 14px;
  font-size:12px; font-weight:600; letter-spacing:.7px;
  text-transform:uppercase; color:var(--primary); margin-bottom:18px;
}
.highlight { color:var(--orange); }
.arr { margin-left:4px; transition:transform .2s; }
a:hover .arr, button:hover .arr { transform:translateX(3px); }
.tc-note { font-size:11px; color:var(--muted); line-height:1.6; margin-top:16px; opacity:.8; }
.tc-note a { color:var(--primary); text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════
   5. BUTTONS
═══════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:6px; padding:10px 22px;
  border-radius:var(--radius); font-size:14px; font-weight:600;
  font-family:'DM Sans',sans-serif; text-decoration:none;
  cursor:pointer; border:1.5px solid transparent;
  transition:transform .22s, box-shadow .22s, background .22s;
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .2s; }
.btn:hover::after { background:rgba(255,255,255,.08); }
.btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn:active { transform:translateY(0); }
.btn-primary       { background:var(--primary); color:#fff; border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-mid); border-color:var(--primary-mid); }
.btn-orange        { background:var(--orange); color:#fff; border-color:var(--orange); }
.btn-orange:hover  { background:var(--orange-dark); border-color:var(--orange-dark); }
.btn-outline {
  background:transparent; border:2px solid rgba(32,40,112,.25);
  color:var(--text); border-radius:999px; font-weight:600;
  transition:border-color .2s, color .2s;
}
.btn-outline:hover { border-color:#202870; color:#202870; }
.btn-white           { background:#fff; color:var(--primary); border-color:#fff; }
.btn-white:hover     { background:var(--surface); }
.btn-outline-white   { background:transparent; border-color:rgba(255,255,255,.45); color:#fff; }
.btn-outline-white:hover { background:rgba(255,255,255,.1); border-color:#fff; }
.btn-secondary       { background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.3); color:#fff; }
.btn-secondary:hover { background:rgba(255,255,255,.2); }
.btn-lg { padding:13px 28px; font-size:15px; border-radius:14px; }
.btn-sm { padding:7px 16px; font-size:13px; }
.btn-signup       { display:inline-flex; align-items:center; padding:8px 20px; border-radius:999px; background:var(--orange); color:#fff; font-size:14px; font-weight:600; transition:background .2s,transform .2s,box-shadow .2s; }
.btn-signup:hover { background:var(--orange-dark); transform:translateY(-1px); box-shadow:0 4px 16px rgba(224,120,56,.35); }
.btn-jobs         { background:var(--surface); border:1.5px solid var(--gray-200); color:var(--primary); padding:8px 18px; border-radius:var(--radius); font-size:13px; font-weight:600; transition:background .2s; }
.btn-jobs:hover   { background:var(--gray-100); }
.btn-login        { background:transparent; border:1.5px solid var(--gray-200); color:var(--primary); padding:8px 18px; border-radius:var(--radius); font-size:13px; font-weight:600; transition:border-color .2s,background .2s; }
.btn-login:hover  { background:var(--surface); border-color:var(--primary); }
.hr-btn-primary {
  display:inline-flex; align-items:center; gap:8px; padding:12px 26px;
  border-radius:50px; font-family:'DM Sans',sans-serif; font-size:14.5px;
  font-weight:700; color:#fff; background:var(--primary); border:none;
  cursor:pointer; text-decoration:none; transition:all .25s;
  box-shadow:0 6px 24px rgba(32,40,112,.22); white-space:nowrap;
}
.hr-btn-primary:hover { transform:translateY(-2px); box-shadow:0 12px 32px rgba(32,40,112,.30); color:#fff; }
.hr-btn-primary.btn-orange { background:var(--orange); box-shadow:0 6px 24px rgba(224,120,56,.30); }
.hr-btn-primary.btn-orange:hover { box-shadow:0 12px 32px rgba(224,120,56,.40); }
.hr-btn-primary.btn-green  { background:var(--green); box-shadow:0 6px 24px rgba(22,163,74,.30); }
.hr-btn-primary.btn-green:hover  { box-shadow:0 12px 32px rgba(22,163,74,.40); }
.hr-btn-secondary {
  display:inline-flex; align-items:center; gap:8px; padding:11px 24px;
  border-radius:50px; font-family:'DM Sans',sans-serif; font-size:14.5px;
  font-weight:600; color:var(--primary); background:rgba(255,255,255,.85);
  border:1.5px solid rgba(32,40,112,.18); cursor:pointer; text-decoration:none;
  transition:all .25s; white-space:nowrap;
}
.hr-btn-secondary:hover { background:#fff; border-color:var(--primary); transform:translateY(-2px); color:var(--primary); }

/* ═══════════════════════════════════════════════════════════════
   6. NAVBAR
   FIXED: no bottom margin/padding that creates gap strip
═══════════════════════════════════════════════════════════════ */
.navbar {
  position:fixed;
  top:0; left:0; right:0;
  height:var(--nav-h);
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--gray-200);
  z-index:1000;
  display:flex; align-items:center;
  transition:box-shadow .3s;
  margin:0 !important;
  padding:0 !important;
}
.navbar.scrolled { box-shadow:0 4px 24px rgba(32,40,112,.10); }
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; gap:16px;
  padding:0 24px;
}
.nav-logo img { height:96px; width:auto; }
.nav-links { display:flex; align-items:center; gap:4px; flex:1; justify-content:center; }
.nav-link {
  font-size:13.5px; font-weight:500; color:var(--muted);
  padding:6px 10px; border-radius:8px;
  transition:color .2s,background .2s; white-space:nowrap;
}
.nav-link:hover { color:var(--primary); background:var(--surface); }
.nav-right { display:flex; align-items:center; gap:8px; }

/* ─── HAMBURGER — desktop hidden ─── */
.ham {
  display:none; flex-direction:column; gap:5px;
  cursor:pointer; padding:6px; background:none; border:none;
}
.ham span {
  display:block; width:22px; height:2px;
  background:var(--primary); border-radius:2px;
  transition:transform .25s,opacity .25s;
}

/* ═══════════════════════════════════════════════════════════════
   7. MOBILE MENU
   Sign In + Sign Up INSIDE mobile menu only
═══════════════════════════════════════════════════════════════ */
.mob-menu {
  display:none; flex-direction:column;
  position:fixed; top:var(--nav-h); left:0; right:0;
  background:#fff; border-bottom:1px solid var(--gray-200);
  padding:16px 24px 24px; z-index:999;
  box-shadow:var(--shadow-md); animation:fadeUp .25s ease;
}
.mob-menu.open { display:flex; }
.mob-link {
  font-size:15px; font-weight:500; color:var(--text);
  padding:12px 0; border-bottom:1px solid var(--gray-100);
  transition:color .2s;
}
.mob-link:hover { color:var(--orange); }
.mob-link:last-child { border-bottom:none; }

/* Auth buttons inside mobile menu */
.mob-auth-row {
  display:flex; gap:10px; padding-top:14px; margin-top:4px;
  border-top:1px solid var(--gray-100);
}
.mob-auth-row .btn-login {
  flex:1; text-align:center; justify-content:center;
}
.mob-auth-row .btn-signup {
  flex:1; text-align:center; justify-content:center;
  border-radius:var(--radius);
}

/* ═══════════════════════════════════════════════════════════════
   8. HERO — OFF-WHITE CREAM GLASSMORPHISM
   FIXED: padding-top exactly = var(--nav-h), no extra gap
═══════════════════════════════════════════════════════════════ */
.hero {
  min-height:100vh;
  display:flex; align-items:center;
  padding-top:var(--nav-h);
  margin-top:0;
  background:linear-gradient(135deg,
    var(--hero-bg-1) 0%,
    var(--hero-bg-2) 30%,
    var(--hero-bg-3) 65%,
    var(--hero-bg-4) 100%);
  background-size:400% 400%;
  animation:gradientShift 18s ease infinite;
  position:relative; overflow:hidden;
}
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(32,40,112,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(32,40,112,.04) 1px,transparent 1px);
  background-size:48px 48px; pointer-events:none;
}
.orb { position:absolute; border-radius:50%; filter:blur(80px); pointer-events:none; }
.o1  { width:480px; height:480px; background:radial-gradient(circle,#c7d7ff,#a5b4fc,transparent 70%); top:-120px; right:-80px; opacity:.35; animation:hr-orb-float 18s ease-in-out infinite; }
.o2  { width:360px; height:360px; background:radial-gradient(circle,#fde68a,#fbbf24,transparent 70%); bottom:40px; left:-60px; opacity:.20; animation:hr-orb-float 14s ease-in-out infinite reverse; }
.o3  { width:280px; height:280px; background:radial-gradient(circle,#a7f3d0,#34d399,transparent 70%); top:50%; right:20%; opacity:.22; animation:hr-orb-float 20s ease-in-out infinite 3s; }
.hero-inner { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; position:relative; z-index:1; }
.hero-content { color:var(--hero-text); animation:slideRight .9s cubic-bezier(.22,1,.36,1) both; }
.live-ticker {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(34,197,94,.08); border:1px solid rgba(34,197,94,.22);
  border-radius:999px; padding:5px 14px; margin-bottom:18px;
}
.ticker-dot  { width:7px; height:7px; background:#22c55e; border-radius:50%; flex-shrink:0; animation:livePulse 1.5s infinite; }
.ticker-text { font-size:12px; font-weight:500; color:#15803d; transition:opacity .3s; white-space:nowrap; }
.role-toggle-wrap { margin-bottom:24px; }
.role-toggle {
  display:inline-flex;
  background:rgba(255,255,255,.80);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1.5px solid rgba(255,255,255,.90);
  border-radius:50px; padding:5px; position:relative; gap:2px;
  box-shadow:0 4px 20px rgba(32,40,112,.10);
}
.rt-slider {
  position:absolute; top:5px; height:calc(100% - 10px);
  background:var(--primary); border-radius:40px;
  transition:left .3s cubic-bezier(.4,0,.2,1),width .3s cubic-bezier(.4,0,.2,1);
  z-index:0; pointer-events:none;
  box-shadow:0 4px 16px rgba(32,40,112,.22);
}
.rt-btn {
  position:relative; z-index:1;
  display:flex; align-items:center; gap:7px;
  padding:9px 18px; border:none; background:transparent;
  border-radius:40px; font-size:13px; font-weight:600;
  font-family:'DM Sans',sans-serif; color:var(--hero-muted);
  cursor:pointer; transition:color .3s; white-space:nowrap;
}
.rt-btn.active { color:#fff; }
.rt-icon { font-size:15px; }
.hero-text-wrap  { position:relative; min-height:155px; margin-bottom:20px; }
.hero-role-block { display:none; animation:fadeSlideUp .35s ease both; }
.hero-role-block.active { display:block; }
.hero-title {
  font-size:clamp(1.35rem,2.5vw,2.05rem);
  font-weight:800; color:var(--hero-text);
  line-height:1.14; margin-bottom:14px;
}
.hero-title em   { color:var(--orange); font-style:normal; }
.hero-title .hl-green  { color:var(--green); }
.hero-title .line2 { color:var(--orange); display:block; }
.hero-desc {
  font-size:14.5px; color:var(--hero-muted);
  line-height:1.62; margin-bottom:0; max-width:460px;
}
.joining-bonus-pill {
  display:flex; gap:12px; align-items:flex-start;
  background:rgba(255,255,255,.75); border:1px solid rgba(245,200,66,.35);
  border-radius:var(--radius-lg); padding:12px 16px;
  margin-bottom:22px; max-width:460px;
  backdrop-filter:blur(8px); transition:border-color .2s,background .2s;
}
.joining-bonus-pill:hover { background:rgba(255,255,255,.90); border-color:rgba(245,200,66,.55); }
.bonus-icon  { font-size:20px; flex-shrink:0; margin-top:2px; }
.bonus-text  { display:flex; flex-direction:column; gap:2px; }
.bonus-title { font-size:13px; font-weight:700; color:var(--orange); }
.bonus-sub   { font-size:12px; color:var(--hero-muted); }
.bonus-tc    { font-size:10px; color:rgba(90,98,128,.55); line-height:1.5; }
.hero-bonus-pill {
  display:flex; align-items:flex-start; gap:10px;
  background:rgba(224,120,56,.07); border:1px solid rgba(224,120,56,.22);
  border-radius:14px; padding:11px 16px; margin:16px 0 0;
}
.hero-bonus-pill.partner { background:rgba(108,78,242,.07); border-color:rgba(108,78,242,.22); }
.hero-bonus-pill.client  { background:rgba(22,163,74,.07); border-color:rgba(22,163,74,.22); }
.hero-cta     { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:24px; }
.hero-cta-block { display:flex; gap:12px; flex-wrap:wrap; }
.hero-trust { display:flex; align-items:center; gap:12px; font-size:13px; color:var(--hero-muted); margin-top:16px; }
.trust-faces { display:flex; }
.tf { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; border:2px solid rgba(255,255,255,.8); margin-left:-8px; box-shadow:0 2px 8px rgba(0,0,0,.10); }
.tf:first-child { margin-left:0; }
.hero-trust strong { color:var(--primary); }
.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(32,40,112,.08); border:1px solid rgba(32,40,112,.18);
  border-radius:999px; padding:6px 16px;
  font-size:13px; font-weight:500; color:var(--primary);
  margin-bottom:18px;
}
.hero-badge-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.20); animation:pulse 2s infinite; }
.hero-visual { display:flex; align-items:center; justify-content:center; position:relative; animation:slideLeft .9s cubic-bezier(.22,1,.36,1) .15s both; }
.glass-card {
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border:1.5px solid rgba(255,255,255,.90);
  box-shadow:0 6px 32px rgba(32,40,112,.09);
  border-radius:18px;
}
.hv-panel { display:flex; flex-direction:column; gap:12px; position:relative; }
.hv-panel.panel-enter { animation:fadeSlideUp .35s ease both; }
.hv-card--main { padding:18px; width:100%; }
.hvc-head { display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.hvc-dot  { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.hvc-dot--green  { background:#22c55e; animation:dotPulseGreen 2s infinite; }
.hvc-dot--orange { background:var(--orange); }
.hvc-dot--blue   { background:#3a7fe8; }
.hvc-title  { font-size:13px; font-weight:700; color:var(--hero-text); flex:1; }
.hvc-badge  { font-size:10px; font-weight:700; padding:3px 8px; border-radius:999px; background:rgba(32,40,112,.07); color:var(--primary); text-transform:uppercase; letter-spacing:.5px; }
.hvc-badge.partner { background:rgba(245,200,66,.15); color:#b45309; }
.hvc-badge.client  { background:rgba(58,127,232,.11); color:#1d4ed8; }
.hvc-match-list { display:flex; flex-direction:column; gap:8px; }
.hvc-row { display:flex; align-items:center; gap:10px; padding:5px 6px; border-radius:8px; transition:background .18s; animation:rowIn .4s cubic-bezier(.4,0,.2,1) both; }
.hvc-row:hover { background:rgba(32,40,112,.04); }
.hvc-row:nth-child(1) { animation-delay:.05s; }
.hvc-row:nth-child(2) { animation-delay:.12s; }
.hvc-row:nth-child(3) { animation-delay:.19s; }
.hvc-row:nth-child(4) { animation-delay:.26s; }
.hvc-av   { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#fff; flex-shrink:0; }
.hvc-info { flex:1; min-width:0; }
.hvc-name { display:block; font-size:12.5px; font-weight:700; color:var(--hero-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hvc-role { display:block; font-size:10.5px; color:var(--hero-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hvc-score-wrap { display:flex; align-items:center; gap:6px; min-width:70px; }
.hvc-bar  { flex:1; height:5px; background:rgba(32,40,112,.09); border-radius:3px; overflow:hidden; }
.hvc-fill { height:100%; border-radius:3px; animation:barGrow 1.2s cubic-bezier(.4,0,.2,1) both; }
.hvc-pct  { font-size:12px; font-weight:700; color:var(--hero-text); min-width:30px; text-align:right; }
.hvc-blur-row { display:flex; align-items:center; justify-content:space-between; padding:10px 6px 2px; border-top:1px dashed rgba(32,40,112,.09); margin-top:8px; font-size:11.5px; color:var(--hero-muted); }
.hvc-unlock-btn { font-size:12px; font-weight:700; color:var(--orange); white-space:nowrap; }
.hv-float { position:absolute; display:flex; align-items:center; gap:10px; padding:10px 14px; z-index:10; animation:floatBob 4s ease-in-out infinite; }
.hv-float--tl { top:-16px; left:-16px; animation-direction:alternate; }
.hv-float--br { bottom:-8px; right:-16px; animation-delay:.8s; animation-direction:alternate-reverse; }
.hvf-icon  { font-size:20px; }
.hvf-val   { font-size:16px; font-weight:800; color:var(--hero-text); font-family:'Syne',sans-serif; line-height:1; }
.hvf-label { font-size:10px; color:var(--hero-muted); margin-top:2px; }
.hv-skills-strip { padding:12px 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hvss-label { font-size:11px; font-weight:700; color:var(--hero-muted); white-space:nowrap; text-transform:uppercase; letter-spacing:.5px; }
.hvss-tags  { display:flex; gap:6px; flex-wrap:wrap; }
.hvss-tag   { font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; background:rgba(32,40,112,.07); color:var(--primary); border:1px solid rgba(32,40,112,.11); }
.hvc-wallet    { text-align:center; padding:8px 0 12px; }
.hvcw-amount   { font-size:34px; font-weight:800; color:var(--primary); font-family:'Syne',sans-serif; line-height:1.1; }
.hvcw-label    { font-size:11px; color:var(--hero-muted); margin-top:2px; margin-bottom:12px; }
.hvcw-breakdown{ text-align:left; display:flex; flex-direction:column; gap:6px; }
.hvcwb-item    { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--hero-text); }
.hvcwb-dot     { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.hvcwb-val     { margin-left:auto; font-weight:700; }
.hvc-progress-wrap { margin-top:14px; }
.hvc-prog-label    { display:flex; justify-content:space-between; font-size:11px; color:var(--hero-muted); margin-bottom:5px; }
.hvc-prog-bar      { height:6px; background:rgba(32,40,112,.09); border-radius:3px; overflow:hidden; }
.hvc-prog-fill     { height:100%; background:linear-gradient(90deg,var(--orange),var(--purple)); border-radius:3px; transition:width .8s ease; }
.hv-mini-lb { padding:14px; }
.hvc-funnel   { display:flex; flex-direction:column; gap:7px; }
.hvcf-row     { display:flex; align-items:center; gap:10px; animation:rowIn .4s cubic-bezier(.4,0,.2,1) both; }
.hvcf-row:nth-child(1) { animation-delay:.05s; }
.hvcf-row:nth-child(2) { animation-delay:.12s; }
.hvcf-row:nth-child(3) { animation-delay:.19s; }
.hvcf-row:nth-child(4) { animation-delay:.26s; }
.hvcf-row:nth-child(5) { animation-delay:.33s; }
.hvcf-stage   { font-size:11.5px; font-weight:600; color:var(--hero-text); width:70px; flex-shrink:0; }
.hvcf-bar-wrap{ flex:1; height:8px; background:rgba(32,40,112,.06); border-radius:4px; overflow:hidden; }
.hvcf-bar     { height:100%; border-radius:4px; animation:barGrow 1.3s cubic-bezier(.4,0,.2,1) both; }
.hvcf-count   { font-size:12px; font-weight:700; min-width:30px; text-align:right; }
.cv-upload-zone {
  background:rgba(255,255,255,.65); border:2px dashed rgba(32,40,112,.18);
  border-radius:16px; padding:20px; margin:20px 0 0;
  transition:border-color .2s,background .2s; cursor:pointer;
}
.cv-upload-zone:hover,
.cv-upload-zone.drag-over { border-color:var(--orange); background:rgba(224,120,56,.04); }
.cv-upload-idle  { text-align:center; }
.cv-upload-icon  { font-size:30px; margin-bottom:8px; }
.cv-upload-label { font-size:13.5px; font-weight:600; color:var(--hero-text); margin-bottom:4px; }
.cv-browse       { color:var(--orange); text-decoration:underline; cursor:pointer; }
.cv-upload-hint  { font-size:11px; color:var(--hero-muted); }
.cv-parsing-anim { padding:4px 0; }
.parse-step { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px; color:var(--hero-muted); border-bottom:1px solid rgba(32,40,112,.06); transition:color .3s; }
.parse-step:last-child { border-bottom:none; }
.parse-step.ps-done { color:#16a34a; font-weight:600; }
.ps-check  { font-size:15px; width:20px; text-align:center; flex-shrink:0; }
.cv-result { display:flex; align-items:flex-start; gap:16px; }
.cvr-score-ring  { position:relative; width:76px; height:76px; flex-shrink:0; }
.cvr-svg         { width:76px; height:76px; }
.cvr-score-num   { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:800; color:var(--orange); font-family:'Syne',sans-serif; }
.cvr-details     { flex:1; }
.cvr-label       { font-size:11px; font-weight:700; color:var(--hero-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:6px; }
.cvr-skills      { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.cvr-skill-tag   { font-size:11px; background:rgba(32,40,112,.07); border:1px solid rgba(32,40,112,.13); border-radius:999px; padding:3px 10px; color:var(--primary); font-weight:600; }
.cvrm-label      { font-size:11.5px; font-weight:700; color:var(--hero-text); margin-bottom:4px; }
.cvrm-item       { font-size:11.5px; color:#16a34a; margin-bottom:2px; }
.cvrm-blur       { font-size:11px; color:var(--hero-muted); margin-top:4px; }
.cvrm-link       { color:var(--orange); font-weight:600; }
.earnings-calc     { background:rgba(255,255,255,.65); border:1px solid rgba(32,40,112,.10); border-radius:16px; padding:20px; margin:20px 0 0; }
.ec-label          { font-size:13px; font-weight:700; color:var(--hero-text); margin-bottom:14px; }
.ec-slider-wrap    { position:relative; margin-bottom:8px; }
.ec-slider         { -webkit-appearance:none; width:100%; height:6px; border-radius:3px; background:rgba(32,40,112,.13); outline:none; cursor:pointer; }
.ec-slider::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--orange); cursor:pointer; box-shadow:0 2px 8px rgba(224,120,56,.35); }
.ec-slider-labels  { display:flex; justify-content:space-between; font-size:10.5px; color:var(--hero-muted); margin-top:4px; }
.ec-result         { display:flex; align-items:baseline; gap:8px; margin-top:12px; }
.ec-val            { font-size:26px; font-weight:800; color:var(--orange); font-family:'Syne',sans-serif; transition:all .2s; }
.ec-per            { font-size:13px; color:var(--hero-muted); }
.client-cta-box  { background:rgba(255,255,255,.65); border:1px solid rgba(32,40,112,.10); border-radius:16px; padding:16px 20px; margin:20px 0 0; }
.ccb-stats       { display:flex; align-items:center; justify-content:space-around; gap:12px; }
.ccb-stat        { text-align:center; }
.ccb-sv          { display:block; font-size:18px; font-weight:800; color:var(--primary); font-family:'Syne',sans-serif; }
.ccb-sl          { font-size:11px; color:var(--hero-muted); }
.ccb-divider     { width:1px; height:32px; background:rgba(32,40,112,.10); }
.ai-widget-upgraded { overflow:visible; }
.mw-live-badge  { font-size:10px; font-weight:700; background:#4ade80; color:#065f46; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.5px; }
.mw-job-selector { padding:0 0 12px; }
.mwjs-label     { font-size:11px; color:var(--muted); margin-bottom:7px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.mwjs-pills     { display:flex; gap:6px; flex-wrap:wrap; }
.mwjs-pill      { font-size:11.5px; font-weight:600; padding:5px 12px; border-radius:999px; border:1px solid rgba(32,40,112,.18); background:transparent; color:rgba(32,40,112,.7); cursor:pointer; transition:all .2s; }
.mwjs-pill:hover { border-color:var(--orange); color:var(--orange); }
.mwjs-pill.active { background:var(--primary); color:#fff; border-color:var(--primary); }
#mwMatchList    { transition:opacity .2s; }
.mw-blur-cta    { margin-top:12px; padding:12px; background:rgba(32,40,112,.04); border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mwbc-text      { font-size:12px; color:var(--muted); }
.mwbc-btn       { white-space:nowrap; font-size:12px !important; }
.mw-footer      { display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; padding-top:10px; border-top:1px solid rgba(32,40,112,.07); }
.mwf-item       { font-size:11px; color:var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   8b. PLATFORM TICKER STRIP
═══════════════════════════════════════════════════════════════ */
.platform-ticker-strip {
  background:linear-gradient(90deg,#0d1b4b 0%,#202870 50%,#0d1b4b 100%);
  padding:10px 0; overflow:hidden; position:relative;
}
.pts-inner    { display:flex; align-items:center; gap:12px; white-space:nowrap; }
.pts-live-dot { flex-shrink:0; width:8px; height:8px; background:#4ade80; border-radius:50%; box-shadow:0 0 0 0 rgba(74,222,128,.4); animation:livePulse 1.5s infinite; margin-left:20px; }
.pts-scroll   { display:flex; gap:48px; animation:tickerScroll 28s linear infinite; }
.pts-item     { font-size:12.5px; font-weight:500; color:rgba(255,255,255,.85); flex-shrink:0; font-family:'DM Sans',sans-serif; }

/* ═══════════════════════════════════════════════════════════════
   9. STATS BAR
═══════════════════════════════════════════════════════════════ */
.stats-bar {
  background:linear-gradient(90deg,#f8f9fe 0%,#fff 50%,#f0f4ff 100%);
  border-top:1px solid var(--gray-200); border-bottom:1px solid var(--gray-200); padding:36px 0;
}
.stats-bar-inner { display:grid; grid-template-columns:repeat(4,1fr); gap:0; text-align:center; }
.stat-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 16px; border-right:1px solid var(--gray-200); transition:transform .25s; }
.stat-item:hover { transform:translateY(-3px); }
.stat-item:last-child { border-right:none; }
.stat-icon { font-size:22px; margin-bottom:2px; }
.sv { display:block; font-family:'Syne',sans-serif; font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:800; color:var(--primary); line-height:1; margin-bottom:5px; }
.sv em { color:var(--orange); font-style:normal; }
.sl { font-size:12px; color:var(--muted); font-weight:500; letter-spacing:.3px; }

/* ═══════════════════════════════════════════════════════════════
   10. BONUS SECTION
═══════════════════════════════════════════════════════════════ */
.bonus-section .container { position:relative; }
.bonus-inner  { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.bonus-cards  { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:28px 0; }
.bonus-card   { background:var(--surface); border:1.5px solid var(--gray-200); border-radius:var(--radius-lg); padding:18px; transition:transform .25s,box-shadow .25s,border-color .25s; }
.bonus-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(32,40,112,.2); }
.bonus-card.featured { background:linear-gradient(135deg,rgba(224,120,56,.07),rgba(32,40,112,.05)); border-color:rgba(224,120,56,.4); }
.bc-icon  { font-size:22px; margin-bottom:8px; display:block; }
.bc-title { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:4px; }
.bc-val   { font-size:17px; font-weight:800; color:var(--primary); margin-bottom:4px; font-family:'Syne',sans-serif; }
.bc-desc  { font-size:12px; color:var(--muted); line-height:1.5; }
.day91-track  { background:linear-gradient(160deg,#f8f9fe 0%,#eef1ff 100%); border:1px solid var(--gray-200); border-radius:var(--radius-xl); padding:24px; }
.d91-header   { display:flex; align-items:center; gap:12px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid var(--gray-200); }
.d91-dot      { width:12px; height:12px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(22,163,74,.15); flex-shrink:0; }
.d91-title    { font-size:14px; font-weight:700; color:var(--text); }
.d91-sub      { font-size:12px; color:var(--muted); margin-top:2px; }
.d91-steps    { display:flex; flex-direction:column; gap:0; }
.d91-step     { display:flex; gap:14px; align-items:flex-start; padding:14px 0; position:relative; }
.d91-circle   { width:38px; height:38px; min-width:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; position:relative; z-index:1; }
.d91-line     { position:absolute; left:50%; top:100%; transform:translateX(-50%); width:2px; height:28px; background:linear-gradient(180deg,var(--gray-200),transparent); }
.d91-step:last-child .d91-line { display:none; }
.d91-title-s  { font-size:13px; font-weight:700; color:var(--text); margin-bottom:3px; }
.d91-desc     { font-size:12px; color:var(--muted); line-height:1.5; margin-bottom:6px; }
.d91-badge    { display:inline-block; font-size:10px; font-weight:700; padding:2px 8px; border-radius:4px; text-transform:uppercase; letter-spacing:.5px; }
.db-done { background:rgba(22,163,74,.12);  color:var(--green); }
.db-run  { background:rgba(245,158,11,.12); color:#d97706; }
.db-wait { background:rgba(32,40,112,.08);  color:var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   11. REFERRAL SECTION
═══════════════════════════════════════════════════════════════ */
.ref-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.ref-card  { background:linear-gradient(160deg,#fff 0%,#f8f9ff 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-xl); padding:26px; display:flex; flex-direction:column; gap:14px; transition:transform .28s,box-shadow .28s; position:relative; }
.ref-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-md); }
.ref-card.featured { border-color:var(--orange); background:linear-gradient(160deg,#fff8f3 0%,#fff 100%); box-shadow:0 0 0 1px rgba(224,120,56,.15),var(--shadow-md); }
.ref-featured-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:linear-gradient(90deg,var(--orange),var(--orange-dark)); color:#fff; font-size:10px; font-weight:700; letter-spacing:1px; padding:3px 12px; border-radius:999px; white-space:nowrap; }
.ref-icon  { width:50px; height:50px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:22px; }
.ref-card h3 { font-size:17px; color:var(--text); }
.ref-card p  { font-size:13px; color:var(--muted); line-height:1.55; margin:0; }
.ref-earn     { background:linear-gradient(135deg,var(--surface),#eef1ff); border-radius:var(--radius); padding:12px 16px; }
.ref-earn-val { font-size:20px; font-weight:800; color:var(--primary); font-family:'Syne',sans-serif; }
.ref-earn-lbl { font-size:11px; color:var(--muted); margin-top:2px; }
.ref-features { display:flex; flex-direction:column; gap:8px; flex:1; }
.ref-features li { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--text); line-height:1.45; }
.ref-chk { color:var(--orange); font-size:12px; margin-top:1px; flex-shrink:0; }
.btn-referral { display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 20px; border-radius:var(--radius); font-size:14px; font-weight:600; border:none; cursor:pointer; transition:transform .2s,background .2s,box-shadow .2s; text-decoration:none; }
.btn-referral.btn-orange  { background:var(--orange); color:#fff; }
.btn-referral.btn-primary { background:var(--primary); color:#fff; }
.btn-referral:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.ref-tc { font-size:10px; color:var(--muted); line-height:1.5; opacity:.75; }

/* ═══════════════════════════════════════════════════════════════
   12. HOW IT WORKS
═══════════════════════════════════════════════════════════════ */
.ref-how-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:48px; position:relative; }
.ref-how-steps::before { content:''; position:absolute; top:28px; left:8%; right:8%; height:2px; background:linear-gradient(90deg,var(--gray-200),rgba(32,40,112,.2),var(--gray-200)); z-index:0; }
.rh-step { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; position:relative; z-index:1; transition:transform .25s; }
.rh-step:hover { transform:translateY(-5px); }
.rh-icon  { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; position:relative; border:3px solid #fff; box-shadow:var(--shadow-md); transition:box-shadow .25s; }
.rh-step:hover .rh-icon { box-shadow:0 8px 28px rgba(32,40,112,.2); }
.rh-num   { position:absolute; bottom:-4px; right:-4px; width:18px; height:18px; border-radius:50%; background:var(--primary); color:#fff; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #fff; }
.rh-step h3 { font-size:13px; font-weight:700; color:var(--text); }
.rh-step p  { font-size:12px; color:var(--muted); line-height:1.5; }

/* ═══════════════════════════════════════════════════════════════
   13. GAMIFICATION SECTION
═══════════════════════════════════════════════════════════════ */
.gamification-section {
  background:linear-gradient(-45deg,#0d1b4b,#172860,#1a3070,#0a1640);
  background-size:400% 400%; animation:gradientShift 18s ease infinite;
  padding:88px 0; text-align:center; color:#fff; position:relative; overflow:hidden;
}
.gamification-section::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:48px 48px; pointer-events:none; }
.gamification-section .container { position:relative; z-index:1; }
.gf-badge-wrap { margin-bottom:16px; }
.gf-badge      { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:5px 16px; font-size:11px; font-weight:700; letter-spacing:1.2px; color:var(--gold); text-transform:uppercase; }
.gf-heading    { font-size:clamp(24px,3.8vw,38px); font-weight:700; line-height:1.22; color:#fff; margin:0 0 6px; }
.gf-heading-accent { color:var(--gold); }
.gf-subtext    { font-size:14px; color:rgba(255,255,255,.58); margin:8px 0 40px; line-height:1.65; }
.gf-prize-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
.gf-card       { border-radius:16px; padding:22px 16px 18px; text-align:center; position:relative; overflow:hidden; transition:transform .28s,box-shadow .28s; }
.gf-card::before { content:''; position:absolute; inset:0; background:linear-gradient(160deg,rgba(255,255,255,.12) 0%,transparent 60%); pointer-events:none; }
.gf-card:hover { transform:translateY(-8px); box-shadow:0 20px 48px rgba(0,0,0,.35); }
.gf-card--purple { background:linear-gradient(135deg,#6c4ef2,#8b6df5); }
.gf-card--blue   { background:linear-gradient(135deg,#3a7fe8,#5a9df8); }
.gf-card--teal   { background:linear-gradient(135deg,#1ca97a,#22cc8a); }
.gf-card--orange { background:linear-gradient(135deg,#e87f1c,#f5a040); }
.gf-card-rank  { font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.7); margin-bottom:10px; }
.gf-card-icon  { font-size:30px; margin-bottom:8px; }
.gf-card-label { font-size:12px; font-weight:700; color:rgba(255,255,255,.78); margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px; }
.gf-card-value { font-size:15px; font-weight:700; color:#fff; line-height:1.4; margin-bottom:8px; }
.gf-card-note  { font-size:10px; color:rgba(255,255,255,.48); }
.gf-badges-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 0 40px; }
.gf-achieve-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:6px 14px; font-size:12px; color:rgba(255,255,255,.82); font-weight:500; transition:background .2s,transform .2s; }
.gf-achieve-badge:hover { background:rgba(255,255,255,.12); transform:translateY(-2px); }
.gf-achieve-icon { font-size:13px; }
.gf-achieve-pts  { font-size:10px; font-weight:700; color:var(--gold); margin-left:3px; }
.gf-leaderboard-card { max-width:680px; margin:0 auto; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:20px; overflow:hidden; text-align:left; backdrop-filter:blur(10px); }
.gf-lb-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px 12px; border-bottom:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03); }
.gf-lb-title  { font-size:15px; font-weight:700; color:#fff; }
.gf-lb-subtitle { font-size:11px; color:rgba(255,255,255,.42); text-transform:uppercase; letter-spacing:.8px; }
.gf-lb-body   { padding:4px 0; }
.gf-lb-row    { display:flex; align-items:center; gap:12px; padding:10px 20px; transition:background .15s; }
.gf-lb-row:hover { background:rgba(255,255,255,.04); }
.gf-lb-row--first { background:rgba(245,200,66,.08); }
.gf-lb-rank   { width:24px; text-align:center; }
.gf-rank-num  { font-size:13px; font-weight:700; color:rgba(255,255,255,.42); }
.gf-lb-row--first .gf-rank-num { color:var(--gold); }
.gf-lb-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0; }
.gf-avatar--gold   { background:var(--gold);  color:#7a5e00; }
.gf-avatar--blue   { background:#3a7fe8;       color:#fff; }
.gf-avatar--pink   { background:#e83a7f;       color:#fff; }
.gf-avatar--teal   { background:#1ca97a;       color:#fff; }
.gf-avatar--orange { background:#e87f1c;       color:#fff; }
.gf-lb-info   { flex:1; min-width:0; }
.gf-lb-name   { font-size:14px; font-weight:600; color:#fff; }
.gf-lb-meta   { font-size:11px; color:rgba(255,255,255,.42); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gf-lb-badge-trip { display:inline-block; background:rgba(245,200,66,.2); color:var(--gold); border-radius:4px; padding:1px 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.gf-lb-earnings { font-size:14px; font-weight:700; color:rgba(255,255,255,.68); white-space:nowrap; font-family:monospace; }
.gf-earnings--gold { color:var(--gold); }
.gf-lb-footer { border-top:1px solid rgba(255,255,255,.08); padding:12px 20px; }
.gf-lb-footer small { font-size:10px; color:rgba(255,255,255,.28); line-height:1.6; }
.gf-lb-terms-link { color:rgba(255,255,255,.48); text-decoration:underline; white-space:nowrap; }
.gf-lb-terms-link:hover { color:#fff; }

/* ═══════════════════════════════════════════════════════════════
   14. PROFILE SECTION
═══════════════════════════════════════════════════════════════ */
.profile-grid  { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
.profile-steps { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.ps-item { display:flex; align-items:center; gap:12px; padding:12px 14px; background:#fff; border:1.5px solid var(--gray-200); border-radius:var(--radius); transition:box-shadow .2s,transform .2s,border-color .2s; }
.ps-item:hover { box-shadow:var(--shadow-sm); transform:translateX(4px); border-color:rgba(32,40,112,.2); }
.ps-item.done  { border-color:rgba(22,163,74,.3); background:rgba(22,163,74,.03); }
.ps-icon  { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.ps-title { font-size:13px; font-weight:700; color:var(--text); }
.ps-desc  { font-size:11px; color:var(--muted); margin-top:1px; }
.ps-pts   { margin-left:auto; font-size:11px; font-weight:700; color:var(--orange); white-space:nowrap; }
.ps-done-icon { font-size:14px; flex-shrink:0; }
.score-widget { background:linear-gradient(160deg,#fff 0%,#f4f7ff 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-xl); padding:28px; box-shadow:var(--shadow-sm); }
.score-ring   { position:relative; width:120px; height:120px; margin:0 auto 16px; }
.ring-svg     { width:100%; height:100%; transform:rotate(-90deg); }
.ring-bg      { fill:none; stroke:var(--gray-100); stroke-width:8; }
.ring-fg      { fill:none; stroke:url(#ringGrad); stroke-width:8; stroke-linecap:round; stroke-dasharray:283; stroke-dashoffset:107; transition:stroke-dashoffset 1s ease; }
.ring-center  { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-val     { font-size:22px; font-weight:800; color:var(--primary); font-family:'Syne',sans-serif; }
.ring-sub     { font-size:10px; color:var(--muted); }
.score-label  { text-align:center; margin-bottom:16px; }
.score-title  { font-size:14px; font-weight:700; color:var(--text); }
.score-hint   { font-size:12px; color:var(--muted); margin-top:3px; line-height:1.45; }
.score-items  { display:flex; flex-direction:column; gap:8px; margin-bottom:4px; }
.si           { display:flex; justify-content:space-between; align-items:center; font-size:12px; padding:8px 12px; border-radius:8px; background:var(--surface); transition:transform .2s; }
.si:hover     { transform:translateX(3px); }
.si.done      { background:rgba(22,163,74,.07); color:var(--green); }
.si.pend      { background:rgba(245,158,11,.07); color:#d97706; }
.si.miss      { background:rgba(32,40,112,.05);  color:var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   15. ROLES SECTION
═══════════════════════════════════════════════════════════════ */
.roles-grid    { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.role-card     { background:linear-gradient(160deg,#fff 0%,#f8faff 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-xl); overflow:hidden; display:flex; flex-direction:column; transition:transform .28s,box-shadow .28s,border-color .28s; }
.role-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-md); border-color:rgba(32,40,112,.2); }
.role-card-hdr { padding:24px 24px 18px; }
.rc-icon       { width:50px; height:50px; border-radius:var(--radius); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:14px; }
.role-card-hdr h3 { font-size:18px; margin-bottom:6px; }
.role-card-hdr p  { font-size:13px; color:var(--muted); line-height:1.55; }
.role-card-body   { padding:0 24px; flex:1; }
.rc-feat       { display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--text); padding:7px 0; border-bottom:1px solid var(--gray-100); line-height:1.4; }
.rc-feat:last-child { border-bottom:none; }
.rc-chk        { color:var(--orange); font-size:11px; margin-top:1px; flex-shrink:0; }
.role-card-foot { padding:18px 24px; }

/* ═══════════════════════════════════════════════════════════════
   16. RPO + PAYROLL SECTIONS
═══════════════════════════════════════════════════════════════ */
.rpo-inner, .payroll-inner { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.rpo-feats   { display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.rpo-feat    { display:flex; gap:14px; align-items:flex-start; }
.rpo-fi      { width:38px; height:38px; min-width:38px; border-radius:10px; background:rgba(32,40,112,.08); color:var(--primary); display:flex; align-items:center; justify-content:center; font-size:17px; transition:background .2s,transform .2s; }
.rpo-feat:hover .rpo-fi { background:rgba(32,40,112,.15); transform:scale(1.1); }
.rpo-ft  { font-size:14px; font-weight:700; color:var(--text); margin-bottom:2px; }
.rpo-fd  { font-size:13px; color:var(--muted); line-height:1.5; }
.match-widget       { background:linear-gradient(160deg,#fff 0%,#f4f7ff 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-xl); padding:20px; box-shadow:var(--shadow-sm); transition:box-shadow .3s; }
.match-widget:hover { box-shadow:var(--shadow-md); }
.mw-head  { display:flex; align-items:center; gap:10px; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--gray-100); }
.mw-dot   { width:10px; height:10px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.18); flex-shrink:0; }
.mw-title { font-size:13px; font-weight:700; color:var(--text); }
.match-card        { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--gray-100); transition:transform .2s; }
.match-card:hover  { transform:translateX(4px); }
.match-card:last-of-type { border-bottom:none; }
.mc-av   { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex-shrink:0; }
.mc-name { font-size:13px; font-weight:700; color:var(--text); margin-bottom:1px; }
.mc-role { font-size:11px; color:var(--muted); margin-bottom:5px; }
.mc-bar  { height:4px; background:var(--gray-100); border-radius:4px; overflow:hidden; }
.mc-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,var(--primary),#4a6fdf); transition:width .9s ease; }
.mc-score{ font-size:15px; font-weight:800; color:var(--primary); font-family:'Syne',sans-serif; }
.mc-lbl  { font-size:10px; color:var(--muted); text-align:right; }

/* ═══════════════════════════════════════════════════════════════
   17. AI SECTION
═══════════════════════════════════════════════════════════════ */
.ai-inner  { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.ai-feats  { display:flex; flex-direction:column; gap:14px; margin-top:28px; }
.ai-feat   { display:flex; gap:14px; align-items:flex-start; }
.ai-fi     { width:38px; height:38px; min-width:38px; border-radius:10px; background:rgba(108,78,242,.09); color:var(--purple); display:flex; align-items:center; justify-content:center; font-size:17px; transition:background .2s,transform .2s; }
.ai-feat:hover .ai-fi { background:rgba(108,78,242,.18); transform:scale(1.1) rotate(-5deg); }
.ai-ft     { font-size:14px; font-weight:700; color:var(--text); margin-bottom:2px; }
.ai-fd     { font-size:13px; color:var(--muted); line-height:1.5; }
.ai-glow { animation:aiGlow 2.5s ease-in-out infinite; }
.ai-typing-dot { display:inline-flex; gap:4px; align-items:center; }
.ai-typing-dot span { width:6px; height:6px; background:var(--purple); border-radius:50%; display:inline-block; animation:typingDot 1.2s infinite; }
.ai-typing-dot span:nth-child(2) { animation-delay:.2s; }
.ai-typing-dot span:nth-child(3) { animation-delay:.4s; }
.ai-score-badge { display:inline-flex; align-items:center; gap:5px; background:linear-gradient(135deg,rgba(108,78,242,.12),rgba(58,127,232,.08)); border:1px solid rgba(108,78,242,.20); border-radius:999px; padding:4px 12px; font-size:11.5px; font-weight:700; color:var(--purple); }
.ai-live-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(34,197,94,.09); border:1px solid rgba(34,197,94,.22); border-radius:999px; padding:4px 10px; font-size:11px; font-weight:700; color:#15803d; }
.ai-live-dot { width:6px; height:6px; background:#22c55e; border-radius:50%; animation:livePulse 1.5s infinite; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════════
   18. TESTIMONIALS
═══════════════════════════════════════════════════════════════ */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:48px; }
.tc         { background:linear-gradient(155deg,#fff 0%,#f7f9ff 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-xl); padding:26px; display:flex; flex-direction:column; gap:14px; transition:transform .28s,box-shadow .28s; }
.tc:hover   { transform:translateY(-7px); box-shadow:var(--shadow-md); }
.tc-stars   { font-size:14px; color:var(--gold); letter-spacing:1px; }
.tc-text    { font-size:14px; color:var(--text); line-height:1.65; font-style:italic; flex:1; }
.tc-author  { display:flex; align-items:center; gap:12px; }
.tc-av      { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; }
.tc-name    { font-size:13px; font-weight:700; color:var(--text); }
.tc-role    { font-size:11px; color:var(--muted); margin-top:1px; }

/* ═══════════════════════════════════════════════════════════════
   19. CLIENTS CAROUSEL
═══════════════════════════════════════════════════════════════ */
.clients-section { padding:48px 0; border-top:1px solid rgba(32,40,112,.08); border-bottom:1px solid rgba(32,40,112,.08); }
.clients-hdr { text-align:center; margin-bottom:32px; }
.clients-hdr .eyebrow { margin:0 auto; }
.clients-hdr p { font-size:14px; color:var(--muted); margin-top:6px; }
.clients-track-wrap { overflow:hidden; position:relative; }
.clients-track-wrap::before,.clients-track-wrap::after { content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none; }
.clients-track-wrap::before { left:0;  background:linear-gradient(to right,#f0f3ff,transparent); }
.clients-track-wrap::after  { right:0; background:linear-gradient(to left,#f0f3ff,transparent); }
.clients-track { display:flex; gap:0; animation:scrollLogos 28s linear infinite; width:max-content; }
.clients-track:hover { animation-play-state:paused; }
.client-logo { display:flex; align-items:center; justify-content:center; padding:0 28px; height:60px; min-width:140px; }
.client-logo-inner { background:var(--gray-50); border:1px solid rgba(32,40,112,.1); border-radius:12px; padding:10px 22px; display:flex; align-items:center; gap:8px; white-space:nowrap; font-weight:700; font-size:13px; color:var(--text); letter-spacing:.3px; transition:box-shadow .2s,background .2s,transform .2s; }
.client-logo-inner:hover { box-shadow:var(--shadow-sm); background:#fff; transform:translateY(-2px); }
.client-logo-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }

/* ═══════════════════════════════════════════════════════════════
   20. INDUSTRIES
═══════════════════════════════════════════════════════════════ */
.ind-grid       { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:48px; }
.ind-card       { background:linear-gradient(160deg,#fff 0%,#f4f7ff 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-lg); padding:22px; transition:box-shadow .25s,transform .25s; }
.ind-card:hover { box-shadow:var(--shadow-md); transform:translateY(-4px); }
.ind-card-hdr   { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.ind-icon       { width:44px; height:44px; min-width:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; }
.ind-title      { font-size:15px; font-weight:700; color:var(--text); }
.ind-roles      { display:flex; flex-wrap:wrap; gap:6px; }
.ind-tag        { font-size:11px; font-weight:500; padding:4px 10px; border-radius:20px; background:rgba(32,40,112,.06); color:var(--primary); border:1px solid rgba(32,40,112,.1); transition:background .2s,color .2s; }
.ind-tag:hover  { background:var(--primary); color:#fff; }
.ind-hiring-models  { margin-top:56px; }
.ind-models-grid    { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px; }
.ind-model          { background:linear-gradient(160deg,#fff 0%,#f4f7ff 100%); border:1.5px solid var(--gray-200); border-radius:14px; padding:18px 16px; text-align:center; transition:box-shadow .2s,transform .2s; }
.ind-model:hover    { box-shadow:var(--shadow-sm); transform:translateY(-3px); }
.ind-model-icon     { font-size:26px; margin-bottom:8px; }
.ind-model-title    { font-size:13px; font-weight:700; color:var(--text); }
.ind-model-desc     { font-size:11px; color:var(--muted); margin-top:4px; line-height:1.5; }

/* ═══════════════════════════════════════════════════════════════
   21. CTA SECTION
═══════════════════════════════════════════════════════════════ */
.cta-section {
  background:linear-gradient(-45deg,#141850,#202870,#1a3d8a,#0f2560);
  background-size:400% 400%; animation:gradientShift 16s ease infinite;
  padding:80px 0; text-align:center; color:#fff; position:relative; overflow:hidden;
}
.cta-section::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size:52px 52px; }
.cta-section .container { position:relative; z-index:1; }
.cta-section h2 { color:#fff; margin-bottom:12px; }
.cta-section>.container>p { color:rgba(255,255,255,.72); margin-bottom:32px; }
.cta-btns { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
.cta-tc   { font-size:11px; color:rgba(255,255,255,.4); line-height:1.6; max-width:600px; margin:0 auto; }
.cta-tc a { color:rgba(255,255,255,.6); text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════
   22. FOOTER
═══════════════════════════════════════════════════════════════ */
.hr-footer {
  background:linear-gradient(160deg,#f8faff 0%,#eef3fc 40%,#f4f7ff 100%);
  color:#1a2f5e;
  padding:32px 0 16px;
  position:relative;
  overflow:hidden;
  border-radius:28px 28px 0 0;
  margin-top:4px;
  box-shadow:0 -4px 32px rgba(32,40,112,.07);
}
.hr-footer::before {
  content:'';
  position:absolute;
  width:320px; height:320px;
  background:radial-gradient(circle,rgba(99,130,230,0.08),transparent);
  top:-80px; left:-80px;
  filter:blur(70px);
  pointer-events:none;
}
.newsletter {
  background:transparent;
  padding:8px 0 16px;
  border-bottom:1px solid rgba(30,58,117,0.1);
  text-align:center;
  margin-bottom:0;
}
.newsletter h2 { font-size:20px; font-weight:700; color:#0f1f4a; margin-bottom:5px; letter-spacing:-0.3px; }
.newsletter p  { font-size:13px; color:#3a5080; margin-bottom:12px; }
.newsletter-box {
  display:flex; justify-content:center; gap:0;
  max-width:400px; margin:0 auto;
}
.newsletter-box input {
  flex:1; padding:10px 18px;
  border:1.5px solid rgba(30,58,117,0.18);
  border-right:none;
  border-radius:var(--radius) 0 0 var(--radius);
  background:#ffffff; color:#0f1f4a;
  font-size:14px; outline:none;
  font-family:'DM Sans',sans-serif;
  transition:border-color .2s;
}
.newsletter-box input::placeholder { color:#9aadd0; }
.newsletter-box input:focus { border-color:rgba(30,58,117,0.4); }
.newsletter-box button {
  padding:10px 20px; background:var(--orange); color:#fff;
  border:none; border-radius:0 var(--radius) var(--radius) 0;
  font-size:14px; font-weight:600; cursor:pointer;
  font-family:'DM Sans',sans-serif; transition:background .2s;
}
.newsletter-box button:hover { background:var(--orange-dark); }
.footer-main {
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;
  gap:16px;
  padding:16px 20px 14px;
  max-width:1100px;
  margin:0 auto;
  align-items:flex-start;
}
.footer-brand img   { height:86px; margin-bottom:52px; }
.footer-brand h4    { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:#3a5080; margin-bottom:4px; }
.footer-brand .phone{ font-size:15px; font-weight:700; color:#0f1f4a; margin-bottom:6px; }
.footer-brand p     { font-size:12px; color:#3a5080; line-height:1.5; margin-bottom:3px; }
.footer-col h4 {
  font-size:11px; font-weight:700; color:#0f1f4a;
  margin-bottom:10px; letter-spacing:0.6px;
  text-transform:uppercase; padding-bottom:6px;
  border-bottom:1px solid rgba(30,58,117,0.1);
}
.footer-col ul      { display:flex; flex-direction:column; gap:6px; }
.footer-col ul li   { line-height:1.6; }
.footer-col ul li a { font-size:12px; color:#3a5080; transition:color .2s,transform .2s; line-height:1.4; display:inline-block; }
.footer-col ul li a:hover { color:#0f1f4a; transform:translateX(2px); }
.app-col p { font-size:11px; color:#3a5080; margin-bottom:8px; }
.app-btn {
  display:flex; align-items:center; gap:9px;
  background:#ffffff; border:1.5px solid rgba(30,58,117,0.15);
  border-radius:var(--radius); padding:7px 12px;
  cursor:pointer; transition:background .2s,transform .2s;
  margin-bottom:6px; box-shadow:0 1px 4px rgba(30,58,117,0.06);
}
.app-btn:hover { background:#f0f5ff; border-color:rgba(30,58,117,0.28); transform:translateY(-1px); }
.app-btn i    { font-size:16px; color:#1e3a75; }
.app-btn span { font-size:11px; color:#3a5080; line-height:1.3; }
.app-btn span b { color:#0f1f4a; font-weight:700; display:block; font-size:12px; }
.footer-final {
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 24px;
  border-top:1px solid rgba(30,58,117,0.1);
  max-width:1200px; margin:0 auto; flex-wrap:wrap;
}
.footer-left p { font-size:11px; color:#3a5080; line-height:1.5; }
.footer-mails  { margin-top:1px; color:#5a78a8; }
.footer-legal       { display:flex; gap:14px; font-size:.78rem; }
.footer-legal a     { color:#3a5080; transition:color .2s; }
.footer-legal a:hover { color:#0f1f4a; }
.footer-social      { display:flex; gap:8px; }
.footer-social a {
  width:30px; height:30px; border-radius:8px;
  background:rgba(30,58,117,0.06); border:1px solid rgba(30,58,117,0.12);
  display:flex; align-items:center; justify-content:center;
  color:#3a5080; font-size:13px;
  transition:background .2s,color .2s,transform .2s;
}
.footer-social a:hover { background:var(--orange); color:#fff; border-color:var(--orange); transform:translateY(-2px); }
.footer-disclaimer {
  padding:10px 24px; font-size:10.5px; color:#7a96c4;
  line-height:1.65; border-top:1px solid rgba(30,58,117,0.06);
  max-width:1200px; margin:0 auto;
}
.footer-disclaimer a { color:#3a5080; text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════
   23. CHATBOT
═══════════════════════════════════════════════════════════════ */
.chat-fab       { position:fixed; bottom:24px; right:24px; width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-mid)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; z-index:1200; box-shadow:0 8px 24px rgba(32,40,112,.35); border:none; transition:transform .2s,box-shadow .2s; }
.chat-fab:hover { transform:scale(1.08); box-shadow:0 12px 32px rgba(32,40,112,.45); }
.chat-pulse     { position:absolute; top:-4px; right:-4px; width:20px; height:20px; border-radius:50%; background:var(--orange); color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; border:2px solid #fff; animation:bounce 2s infinite; }
.chat-win       { position:fixed; bottom:96px; right:24px; width:340px; height:480px; background:#fff; border-radius:var(--radius-xl); display:none; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); z-index:1200; border:1px solid var(--gray-200); animation:scaleIn .25s cubic-bezier(.22,1,.36,1); }
.chat-win.open  { display:flex; }
.chat-head      { display:flex; align-items:center; gap:10px; padding:14px 16px; background:linear-gradient(135deg,var(--primary),#2a4fd4); color:#fff; flex-shrink:0; }
.chat-av        { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.chat-nm        { font-size:14px; font-weight:700; }
.chat-st        { font-size:11px; color:rgba(255,255,255,.65); margin-top:1px; }
.chat-cls       { margin-left:auto; background:none; border:none; color:rgba(255,255,255,.7); font-size:16px; cursor:pointer; padding:4px 8px; border-radius:6px; transition:background .2s,color .2s; }
.chat-cls:hover { background:rgba(255,255,255,.12); color:#fff; }
.chat-msgs      { flex:1; overflow-y:auto; padding:12px; background:var(--surface); display:flex; flex-direction:column; gap:10px; }
.chat-msgs::-webkit-scrollbar { width:4px; }
.chat-msgs::-webkit-scrollbar-thumb { background:var(--gray-200); border-radius:4px; }
.cm             { display:flex; flex-direction:column; gap:3px; }
.cm.bot         { align-items:flex-start; }
.cm.usr         { align-items:flex-end; }
.mb             { padding:10px 13px; border-radius:12px; font-size:13px; line-height:1.55; max-width:85%; }
.cm.bot .mb     { background:#fff; border:1px solid var(--gray-200); color:var(--text); border-radius:4px 12px 12px 12px; }
.cm.usr .mb     { background:linear-gradient(135deg,var(--primary),#3a5dd4); color:#fff; border-radius:12px 4px 12px 12px; }
.mt             { font-size:10px; color:var(--muted); margin-top:1px; padding:0 2px; }
.typing         { display:flex; gap:4px; padding:10px 13px; background:#fff; border:1px solid var(--gray-200); border-radius:4px 12px 12px 12px; width:fit-content; }
.typing span    { width:6px; height:6px; background:var(--muted); border-radius:50%; animation:typingDot 1.2s infinite; }
.typing span:nth-child(2) { animation-delay:.2s; }
.typing span:nth-child(3) { animation-delay:.4s; }
.chat-win .chips { padding:8px 10px; display:flex; flex-wrap:wrap; gap:6px; background:#fff; border-top:1px solid var(--gray-100); flex-shrink:0; }
.chat-win .chip  { background:var(--surface); border:1px solid var(--gray-200); border-radius:999px; padding:5px 11px; font-size:11px; font-weight:500; color:var(--primary); cursor:pointer; transition:background .2s,border-color .2s,transform .2s; white-space:nowrap; }
.chat-win .chip:hover { background:rgba(32,40,112,.07); border-color:var(--primary); transform:translateY(-1px); }
.chat-inp-row   { display:flex; align-items:center; gap:8px; padding:10px 12px; background:#fff; border-top:1px solid var(--gray-100); flex-shrink:0; }
.chat-inp       { flex:1; padding:9px 14px; border:1.5px solid var(--gray-200); border-radius:999px; font-size:13px; color:var(--text); background:var(--surface); outline:none; font-family:'DM Sans',sans-serif; transition:border-color .2s,background .2s; }
.chat-inp:focus { border-color:var(--primary); background:#fff; }
.chat-inp::placeholder { color:var(--muted); }
.chat-snd       { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--primary),#3a5dd4); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:transform .2s,box-shadow .2s; }
.chat-snd:hover { transform:scale(1.07); box-shadow:0 4px 14px rgba(32,40,112,.35); }

/* ═══════════════════════════════════════════════════════════════
   24. PAGE-MAIN — INNER PAGES ROOT
   FIXED: single clean padding-top, no conflicts
═══════════════════════════════════════════════════════════════ */
.page-main:not(.hr-main-auth),
main.page-main:not(.hr-main-auth),
.inner-page-main:not(.hr-main-auth) {
  position:relative;
  z-index:1;
  min-height:100vh;
  padding-top:var(--nav-h);
  overflow:visible;
  background:#fff;
  margin-top:0;
}

/* ═══════════════════════════════════════════════════════════════
   25. PAGE HERO — INNER PAGES DARK GRADIENT BANNER
   FIXED: padding-top calc includes nav-h properly
═══════════════════════════════════════════════════════════════ */
.page-hero {
  padding-top:calc(var(--nav-h) + 60px);
  padding-bottom:48px;
  background:linear-gradient(-45deg,#141850,#1e3fcc,#1a3d8a,#0f2560);
  background-size:400% 400%;
  animation:gradientShift 14s ease infinite;
  text-align:center;
  position:relative;
  overflow:hidden;
  color:#fff;
  margin-top:0;
}
.page-hero::before {
  content:'';
  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:44px 44px;
  pointer-events:none;
}
.page-hero .container { position:relative; z-index:1; }
.page-hero .eyebrow { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.9); margin-bottom:16px; }
.page-hero h1 { color:#fff; font-size:clamp(1.8rem,3.5vw,2.8rem); margin-bottom:14px; }
.page-hero h1 span { color:var(--gold); }
.page-hero p { color:rgba(255,255,255,.72); font-size:15px; max-width:580px; margin:0 auto 24px; line-height:1.65; }
.page-breadcrumb { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,.55); margin-top:8px; }
.page-breadcrumb a { color:rgba(255,255,255,.7); text-decoration:none; transition:color .2s; }
.page-breadcrumb a:hover { color:#fff; }
.page-breadcrumb span { color:rgba(255,255,255,.35); }

/* ═══════════════════════════════════════════════════════════════
   26. INFO-PAGE BASE
═══════════════════════════════════════════════════════════════ */
.info-page {
  padding:56px 0 80px;
  background:linear-gradient(170deg,#f6f8ff 0%,#fff 60%);
  position:relative;
  z-index:1;
}
.info-page .container { max-width:1100px; margin:0 auto; padding:0 24px; }

/* ═══════════════════════════════════════════════════════════════
   27. LEGAL PAGES
═══════════════════════════════════════════════════════════════ */
.legal-page {
  padding:56px 0 80px;
  background:linear-gradient(170deg,#f6f8ff 0%,#fff 60%);
}
.legal-body { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:24px; }
.legal-section {
  background:#fff; border:1.5px solid var(--gray-200);
  border-radius:var(--radius-lg); padding:28px 32px;
  transition:box-shadow .2s,transform .2s;
  opacity:1; transform:none;
}
.legal-section:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.legal-section h2 { font-size:1.05rem; color:var(--primary); margin-bottom:12px; padding-bottom:10px; border-bottom:2px solid var(--gray-100); position:relative; }
.legal-section h2::after { content:''; position:absolute; bottom:-2px; left:0; width:40px; height:2px; background:var(--orange); border-radius:2px; animation:revealBorder .5s ease .2s both; transform-origin:left; }
.legal-section p, .legal-section li { font-size:.93rem; color:#555; line-height:1.78; }
.legal-section ol { padding-left:20px; display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.legal-section ul { list-style:disc; padding-left:20px; display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.legal-section a  { color:var(--primary); text-decoration:underline; }
.legal-section strong { color:var(--text); }
.legal-table { width:100%; border-collapse:collapse; font-size:.88rem; margin-top:14px; }
.legal-table th { background:var(--primary); color:#fff; padding:10px 14px; text-align:left; }
.legal-table td { padding:10px 14px; border-bottom:1px solid var(--gray-100); color:#555; }
.legal-table tr:hover td { background:var(--surface); }

/* ═══════════════════════════════════════════════════════════════
   28. HELP DESK PAGE
═══════════════════════════════════════════════════════════════ */
.help-page { background:linear-gradient(170deg,#f0f4ff 0%,#fff 50%); }
.help-contact-bar { display:flex; gap:16px; margin-bottom:40px; flex-wrap:wrap; }
.help-contact-item {
  flex:1; min-width:180px;
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(135deg,#fff 0%,#f4f7ff 100%);
  border:1.5px solid var(--gray-200); border-radius:var(--radius-lg);
  padding:16px 20px; transition:box-shadow .2s,transform .2s;
}
.help-contact-item:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.help-contact-icon { font-size:22px; }
.help-contact-item strong { font-size:13px; font-weight:700; color:var(--text); display:block; margin-bottom:2px; }
.help-contact-item a, .help-contact-item span { font-size:13px; color:var(--primary); }
.help-faq-sections { display:flex; flex-direction:column; gap:40px; }
.help-category h2 { font-size:1.1rem; color:var(--primary); margin-bottom:18px; padding-bottom:10px; border-bottom:2px solid var(--gray-200); }
.faq-item {
  background:linear-gradient(160deg,#fff 0%,#f8faff 100%);
  border:1.5px solid var(--gray-200); border-radius:var(--radius);
  padding:18px 22px; margin-bottom:12px;
  transition:box-shadow .2s,transform .2s,border-color .2s;
  opacity:1; transform:none;
}
.faq-item:hover { box-shadow:var(--shadow-sm); transform:translateY(-2px); border-color:rgba(32,40,112,.2); }
.faq-item h3 { font-size:14px; color:var(--text); margin-bottom:8px; }
.faq-item p  { font-size:13px; color:var(--muted); line-height:1.6; margin:0; }
.faq-item a  { color:var(--primary); text-decoration:underline; }
.help-ticket { background:linear-gradient(135deg,rgba(224,120,56,.06),rgba(32,40,112,.04)); border:1.5px solid rgba(224,120,56,.2); border-radius:var(--radius-lg); padding:24px 28px; margin-top:32px; }
.help-ticket h2 { font-size:1.05rem; color:var(--text); margin-bottom:10px; }
.help-ticket p  { font-size:13px; color:var(--muted); line-height:1.65; }
.help-ticket a  { color:var(--orange); font-weight:600; }
.faq-section { margin-top:50px; }

/* ═══════════════════════════════════════════════════════════════
   29. EMPLOYEE BENEFITS PAGE
═══════════════════════════════════════════════════════════════ */
.benefits-page { background:linear-gradient(170deg,#f4f7ff 0%,#fff 50%); }
.benefits-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-bottom:40px; }
.benefit-card { background:linear-gradient(160deg,#fff 0%,#f8faff 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-lg); padding:24px; transition:transform .25s,box-shadow .25s; }
.benefit-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); }
.benefit-card.benefit-featured { grid-column:span 2; background:linear-gradient(135deg,rgba(224,120,56,.06) 0%,rgba(32,40,112,.05) 100%); border-color:rgba(224,120,56,.35); display:flex; gap:24px; align-items:flex-start; }
.benefit-icon { font-size:2rem; margin-bottom:12px; display:block; flex-shrink:0; }
.benefit-card.benefit-featured .benefit-icon { font-size:2.5rem; margin-bottom:0; margin-top:4px; }
.benefit-card h2 { font-size:1.05rem; color:var(--text); margin-bottom:10px; }
.benefit-card p  { font-size:.88rem; color:var(--muted); line-height:1.7; margin-bottom:14px; }
.benefit-card p:last-child { margin-bottom:0; }
.benefits-statutory { background:linear-gradient(160deg,#f0f4ff 0%,#eef1fb 100%); border:1.5px solid rgba(32,40,112,.12); border-radius:var(--radius-lg); padding:28px 32px; margin-bottom:32px; }
.benefits-statutory h2 { font-size:1.05rem; color:var(--text); margin-bottom:12px; }
.benefits-statutory p  { font-size:.9rem; color:var(--muted); line-height:1.7; margin-bottom:12px; }
.benefits-statutory ul { list-style:disc; padding-left:20px; display:flex; flex-direction:column; gap:8px; margin:12px 0; }
.benefits-statutory ul li { font-size:.9rem; color:var(--muted); line-height:1.65; }
.benefits-statutory a { color:var(--primary); text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════
   30. ABOUT CTA + VALUE CARDS
═══════════════════════════════════════════════════════════════ */
.about-cta { text-align:center; padding:48px 40px; background:linear-gradient(135deg,var(--primary-dark),var(--primary)); border-radius:var(--radius-xl); color:#fff; margin-top:40px; }
.about-cta h2 { color:#fff; font-size:1.4rem; margin-bottom:20px; }
.about-cta .cta-btns { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.value-card { background:linear-gradient(160deg,#fff 0%,#f4f8ff 100%); padding:25px; border-radius:var(--radius); border:1.5px solid var(--gray-200); transition:transform .25s,box-shadow .25s,border-color .25s; }
.value-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(32,40,112,.2); }

/* ═══════════════════════════════════════════════════════════════
   31. EMPLOYEE PORTAL PAGE
═══════════════════════════════════════════════════════════════ */
.portal-login-box { background:linear-gradient(135deg,rgba(32,40,112,.06) 0%,rgba(224,120,56,.05) 100%); border:1.5px solid rgba(32,40,112,.14); border-radius:var(--radius-xl); padding:36px 40px; text-align:center; margin:48px 0 56px; }
.portal-login-box h2 { font-size:1.4rem; color:var(--text); margin-bottom:10px; }
.portal-login-box p  { font-size:14px; color:var(--muted); margin-bottom:20px; max-width:500px; margin-left:auto; margin-right:auto; }
.portal-note { font-size:12.5px; color:var(--muted); line-height:1.6; margin-top:12px !important; margin-bottom:0 !important; }
.portal-note a { color:var(--primary); text-decoration:underline; }
.portal-features { margin-bottom:56px; }
.portal-features h2 { font-size:1.3rem; color:var(--text); margin-bottom:28px; }
.portal-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.portal-feature-card { background:linear-gradient(160deg,#fff 0%,#f4f7ff 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-lg); padding:24px 22px; transition:transform .25s,box-shadow .25s,border-color .25s; }
.portal-feature-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(32,40,112,.2); }
.portal-feature-icon { font-size:28px; margin-bottom:12px; display:block; }
.portal-feature-card h3 { font-size:14px; font-weight:700; color:var(--text); margin-bottom:8px; }
.portal-feature-card p  { font-size:13px; color:var(--muted); line-height:1.6; margin:0; }
.portal-faq { margin-top:56px; }
.portal-faq h2 { font-size:1.3rem; color:var(--text); margin-bottom:24px; }

/* ═══════════════════════════════════════════════════════════════
   32. APPLICATION PROCESS PAGE
═══════════════════════════════════════════════════════════════ */
.process-steps { display:flex; flex-direction:column; gap:0; margin-bottom:48px; }
.process-step { display:flex; gap:24px; align-items:flex-start; padding:28px 0; border-bottom:1px solid var(--gray-100); position:relative; opacity:1; transform:none; }
.process-step:last-child { border-bottom:none; }
.process-step-num { width:52px; height:52px; min-width:52px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--primary-mid)); color:#fff; font-family:'Syne',sans-serif; font-size:16px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 16px rgba(32,40,112,.22); margin-top:2px; transition:transform .2s,box-shadow .2s; }
.process-step:hover .process-step-num { transform:scale(1.08); box-shadow:0 8px 24px rgba(32,40,112,.30); }
.process-step-content { flex:1; }
.process-step-content h2 { font-size:1.1rem; color:var(--text); margin-bottom:10px; }
.process-step-content p  { font-size:13.5px; color:var(--muted); line-height:1.68; margin-bottom:12px; }
.process-step-content p:last-child { margin-bottom:0; }
.process-tip { display:flex; align-items:flex-start; gap:10px; background:rgba(245,200,66,.09); border:1px solid rgba(245,200,66,.30); border-radius:var(--radius); padding:11px 16px; font-size:13px; color:var(--text); line-height:1.6; margin-top:12px; }
.process-tip strong { color:#b45309; }
.process-tip a { color:var(--primary); text-decoration:underline; }
.process-timeline-note { background:linear-gradient(160deg,#f8f9fe 0%,#eef1fb 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-xl); padding:28px 32px; margin-bottom:40px; }
.process-timeline-note h2 { font-size:1.1rem; color:var(--text); margin-bottom:16px; }

/* ═══════════════════════════════════════════════════════════════
   33. INTERNSHIP PROGRAMS PAGE
═══════════════════════════════════════════════════════════════ */
.internship-types { display:flex; flex-direction:column; gap:56px; }
.internship-section { display:flex; flex-direction:column; gap:16px; }
.internship-section h2 { font-size:1.2rem; color:var(--text); margin-bottom:4px; padding-bottom:10px; border-bottom:2px solid var(--gray-200); }
.internship-section > p { font-size:13.5px; color:var(--muted); line-height:1.7; margin:0; }
.internship-section ul { list-style:disc; padding-left:20px; display:flex; flex-direction:column; gap:8px; }
.internship-section ul li { font-size:13.5px; color:var(--muted); line-height:1.65; }
.internship-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.internship-card { background:linear-gradient(160deg,#fff 0%,#f4f7ff 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-lg); padding:24px 22px; display:flex; flex-direction:column; gap:10px; transition:transform .25s,box-shadow .25s,border-color .25s; }
.internship-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(32,40,112,.2); }
.internship-card h3 { font-size:15px; font-weight:700; color:var(--text); margin:0; }
.internship-card ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:3px; }
.internship-card ul li { font-size:12.5px; color:var(--muted); line-height:1.5; }
.internship-card > p { font-size:13px; color:var(--muted); line-height:1.6; flex:1; margin:0; }
.internship-apply-note { font-size:13px; color:var(--muted); line-height:1.65; padding:14px 18px; background:rgba(32,40,112,.04); border-radius:var(--radius); border-left:3px solid var(--primary); }
.internship-apply-note a { color:var(--primary); text-decoration:underline; font-weight:600; }
.internship-partner-cta { margin:4px 0; }

/* ═══════════════════════════════════════════════════════════════
   34. JOB OPENINGS / CAREERS PAGE
═══════════════════════════════════════════════════════════════ */
.careers-perks { margin:0 0 56px; }
.careers-perks h2 { font-size:1.3rem; color:var(--text); margin-bottom:28px; }
.perks-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.perk-card { background:linear-gradient(160deg,#fff 0%,#f4f7ff 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-lg); padding:22px 18px; text-align:center; transition:transform .25s,box-shadow .25s,border-color .25s; }
.perk-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:rgba(32,40,112,.2); }
.perk-icon { font-size:28px; margin-bottom:10px; display:block; }
.perk-card h3 { font-size:13.5px; font-weight:700; color:var(--text); margin-bottom:8px; }
.perk-card p  { font-size:12.5px; color:var(--muted); line-height:1.6; margin:0; }
.careers-openings { margin-bottom:48px; }
.careers-openings h2 { font-size:1.3rem; color:var(--text); margin-bottom:24px; }
.job-listing-card { background:linear-gradient(160deg,#fff 0%,#f8faff 100%); border:1.5px solid var(--gray-200); border-radius:var(--radius-lg); padding:24px 26px; margin-bottom:16px; transition:transform .25s,box-shadow .25s,border-color .25s; }
.job-listing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:rgba(32,40,112,.2); }
.job-listing-header { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.job-listing-header h3 { font-size:16px; font-weight:700; color:var(--text); flex:1; }
.job-badge { display:inline-block; font-size:11px; font-weight:700; padding:3px 10px; border-radius:999px; background:rgba(32,40,112,.08); color:var(--primary); border:1px solid rgba(32,40,112,.15); text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; flex-shrink:0; }
.job-location { font-size:12.5px; color:var(--muted); margin-bottom:10px !important; }
.job-listing-card p { font-size:13.5px; color:var(--muted); line-height:1.65; margin-bottom:10px; }
.careers-general { background:linear-gradient(135deg,rgba(32,40,112,.05),rgba(224,120,56,.04)); border:1.5px solid rgba(32,40,112,.12); border-radius:var(--radius-lg); padding:28px 32px; margin-top:12px; }
.careers-general h2 { font-size:1.1rem; color:var(--text); margin-bottom:10px; }
.careers-general p  { font-size:13.5px; color:var(--muted); line-height:1.65; margin:0; }
.careers-general a  { color:var(--primary); font-weight:600; text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════════
   35. HEALTH & SAFETY PAGE
═══════════════════════════════════════════════════════════════ */
.hs-page { background:linear-gradient(170deg,#f4f8ff 0%,#fff 60%); }

/* ═══════════════════════════════════════════════════════════════
   36. SHARED FORM STYLES
═══════════════════════════════════════════════════════════════ */
.page-form-field label { font-size:.85rem; font-weight:600; color:#444; display:block; margin-bottom:6px; }
.page-form-field input,
.page-form-field select,
.page-form-field textarea {
  width:100%; padding:10px 14px;
  border:1.5px solid var(--gray-200); border-radius:var(--radius);
  font-size:.9rem; font-family:'DM Sans',sans-serif;
  color:var(--text); outline:none;
  transition:border-color .2s,box-shadow .2s; box-sizing:border-box;
}
.page-form-field input:focus,
.page-form-field select:focus,
.page-form-field textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(32,40,112,.08); }

/* ═══════════════════════════════════════════════════════════════
   37. PAGE-LEVEL LAYOUT HELPERS
═══════════════════════════════════════════════════════════════ */
.page-section    { padding:60px 0; }
.page-container  { max-width:1100px; margin:0 auto; padding:0 20px; }
.page-title      { font-size:28px; font-weight:700; color:#1a1e3a; margin-bottom:10px; }
.page-subtitle   { font-size:14px; color:#6b7280; margin-bottom:30px; }
.page-card { background:#fff; border:1px solid #e5e7f0; border-radius:12px; padding:20px; transition:all 0.3s ease; }
.page-card:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,0.05); }
.portal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.page-cta { background:linear-gradient(135deg,#202870,#1e3fcc); color:#fff; padding:50px 20px; text-align:center; border-radius:var(--radius-lg); }
.page-cta h2 { font-size:26px; margin-bottom:10px; color:#fff; }
.page-cta p  { color:rgba(255,255,255,0.7); margin-bottom:20px; }

/* ═══════════════════════════════════════════════════════════════
   38. BODY SCOPES FOR INNER PAGES
═══════════════════════════════════════════════════════════════ */
body.portal-page,
body.benefits-page,
body.process-page,
body.careers-page,
body.jobs-page,
body.internship-page,
body.hs-page,
body.bonus-page {
  display:flex; flex-direction:column; min-height:100vh;
}
body.portal-page main,
body.benefits-page main,
body.process-page main,
body.careers-page main,
body.jobs-page main,
body.internship-page main,
body.hs-page main,
body.bonus-page main {
  flex:1; min-height:60vh;
}

/* ═══════════════════════════════════════════════════════════════
   39. BROWSE JOBS HERO
   FIXED: no negative margin, clean top
═══════════════════════════════════════════════════════════════ */
.bj-hero,
.jobs-hero,
.jobs-search-hero,
.hero-section {
  margin-top:0;
}

/* ═══════════════════════════════════════════════════════════════
   40. RESPONSIVE — TABLET (≤1024px)
═══════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .hero-inner    { gap:36px; }
  .bonus-inner   { gap:40px; }
  .profile-grid  { gap:40px; }
  .rpo-inner, .payroll-inner { gap:40px; }
  .ai-inner      { gap:40px; }
}

/* ═══════════════════════════════════════════════════════════════
   41. RESPONSIVE — TABLET / MOBILE (≤900px)
   MERGED FIX: Single authoritative block — no conflicts
   Nav: Logo | Browse Jobs | ☰ only
   Sign In / Sign Up → inside mob-menu only
   Hero: overflow fixed, content centered, text not clipped
═══════════════════════════════════════════════════════════════ */
@media (max-width:900px) {

  /* ── NAV: hide desktop links, show hamburger ── */
  .nav-links { display:none; }
  .ham       { display:flex; }

  /* ── NAV-RIGHT: hide ALL auth/CTA buttons — single authoritative rule ── */
  .nav-right .btn-login,
  .nav-right .btn-signup,
  .nav-right .btn-primary,
  .nav-right .btn-orange,
  .nav-right .btn-secondary,
  .nav-right .btn-outline,
  .nav-right .btn-white,
  .nav-right .hr-btn-primary,
  .nav-right .hr-btn-secondary { display:none !important; }

  /* ── NAV-RIGHT: keep only Browse Jobs visible ── */
  .nav-right .btn-jobs {
    display:inline-flex !important;
    font-size:13px;
    padding:8px 14px;
  }

  /* ── MOB-MENU: re-enable Sign In + Sign Up inside menu ── */
  .mob-menu .mob-auth-row .btn-login,
  .mob-menu .mob-auth-row .btn-signup {
    display:inline-flex !important;
    flex:1;
    text-align:center;
    justify-content:center;
  }

  /* ── LOGO size on mobile ── */
  .nav-logo img { height:64px; }

  /* ── HERO: prevent horizontal overflow ── */
  .hero { overflow-x:hidden; }
  .hero .container { overflow-x:hidden; }

  /* ── HERO GRID: single column, centered ── */
  .hero-inner {
    grid-template-columns:1fr !important;
    text-align:center;
    gap:28px;
    padding:32px 0 40px;
  }

  /* ── HERO CONTENT: no overflow ── */
  .hero-content {
    width:100%;
    max-width:100%;
    overflow:hidden;
  }

  /* ── HERO TITLE: responsive font, word wrap ── */
  .hero-title {
    font-size:clamp(1.5rem,6.5vw,2.2rem) !important;
    word-break:break-word;
    overflow-wrap:break-word;
    max-width:100%;
  }

  .hero-desc { max-width:100%; font-size:14px; }

  /* ── Center flex rows in hero ── */
  .live-ticker        { margin-left:auto; margin-right:auto; }
  .role-toggle-wrap   { display:flex; justify-content:center; }
  .hero-cta,
  .hero-cta-block     { justify-content:center; }
  .hero-trust         { justify-content:center; flex-wrap:wrap; }

  /* ── Bonus pills: full width ── */
  .joining-bonus-pill,
  .hero-bonus-pill    { max-width:100%; }

  /* ── Visual: center ── */
  .hero-visual { width:100%; justify-content:center; }

  /* ── Landing section grids ── */
  .bonus-inner     { grid-template-columns:1fr; }
  .profile-grid    { grid-template-columns:1fr; }
  .rpo-inner, .payroll-inner { grid-template-columns:1fr; }
  .ai-inner        { grid-template-columns:1fr; }
  .ref-grid        { grid-template-columns:1fr 1fr; }
  .roles-grid      { grid-template-columns:1fr 1fr; }
  .testi-grid      { grid-template-columns:1fr 1fr; }
  .ind-grid        { grid-template-columns:1fr 1fr; }
  .gf-prize-grid   { grid-template-columns:1fr 1fr; }
  .ref-how-steps   { grid-template-columns:repeat(3,1fr); }
  .ref-how-steps::before { display:none; }

  /* ── Stats bar: 2-column ── */
  .stats-bar-inner { grid-template-columns:repeat(2,1fr); }
  .stat-item:nth-child(2) { border-right:none; }
  .stat-item:nth-child(3) { border-right:1px solid var(--gray-200); }
  .stat-item:nth-child(4) { border-right:none; }

  /* ── Footer ── */
  .footer-main { grid-template-columns:1fr 1fr; gap:24px; }

  /* ── Inner page grids ── */
  .portal-feature-grid { grid-template-columns:repeat(2,1fr); }
  .perks-grid          { grid-template-columns:repeat(2,1fr); }
  .benefits-grid       { grid-template-columns:1fr; }
  .benefit-card.benefit-featured { grid-column:span 1; flex-direction:column; }
  .internship-cards    { grid-template-columns:1fr; }
  .portal-login-box    { padding:28px 24px; }
  .process-step        { gap:16px; padding:22px 0; }
  .process-step-num    { width:44px; height:44px; min-width:44px; font-size:14px; }
  .legal-section       { padding:22px 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   42. RESPONSIVE — MOBILE (≤640px)
═══════════════════════════════════════════════════════════════ */
@media (max-width:640px) {
  .ref-grid        { grid-template-columns:1fr; }
  .roles-grid      { grid-template-columns:1fr; }
  .testi-grid      { grid-template-columns:1fr; }
  .ind-grid        { grid-template-columns:1fr; }
  .gf-prize-grid   { grid-template-columns:1fr 1fr; }
  .ref-how-steps   { grid-template-columns:1fr 1fr; }
  .stats-bar-inner { grid-template-columns:repeat(2,1fr); }
  .bonus-cards     { grid-template-columns:1fr; }
  .ind-models-grid { grid-template-columns:1fr 1fr; }
  .footer-main     { grid-template-columns:1fr; }
  .hero-cta, .hero-cta-block { flex-direction:column; }
  .hero-trust      { flex-wrap:wrap; justify-content:center; }
}

/* ═══════════════════════════════════════════════════════════════
   43. RESPONSIVE — MOBILE (≤580px) — INNER PAGES
═══════════════════════════════════════════════════════════════ */
@media (max-width:580px) {
  .info-page { padding:40px 0 60px; }
  .portal-feature-grid { grid-template-columns:1fr; }
  .perks-grid          { grid-template-columns:1fr; }
  .portal-login-box    { padding:24px 18px; }
  .process-step        { flex-direction:column; gap:12px; }
  .process-step-num    { width:40px; height:40px; min-width:40px; font-size:13px; }
  .job-listing-header  { flex-wrap:wrap; }
  .benefits-statutory  { padding:20px 18px; }
  .process-timeline-note { padding:20px 16px; }
  .careers-general     { padding:20px 18px; }
  .internship-cards    { grid-template-columns:1fr; }
  .internship-card     { padding:20px 16px; }
  .about-cta           { padding:32px 20px; }
  .legal-section       { padding:18px 16px; }
  .legal-body          { gap:16px; }
  .page-hero:not(.hr-auth-page *)  { padding-top:calc(var(--nav-h) + 40px); padding-bottom:36px; }
  .chat-win            { width:calc(100vw - 32px); right:16px; }
  .chat-fab            { bottom:16px; right:16px; }
}

/* ═══════════════════════════════════════════════════════════════
   44. RESPONSIVE — MOBILE (≤480px)
   MERGED: landing + extra small fixes combined
═══════════════════════════════════════════════════════════════ */
@media (max-width:480px) {
  .gf-prize-grid   { grid-template-columns:1fr; }
  .ref-how-steps   { grid-template-columns:1fr; }
  .ind-models-grid { grid-template-columns:1fr; }
  .section         { padding:60px 0; }

  /* Hero title — extra small */
  .hero-title {
    font-size:clamp(1.35rem,7vw,1.8rem) !important;
  }

  .hero-inner {
    padding:24px 0 32px;
    gap:20px;
  }

  /* Ensure no child overflows */
  .hero-content * {
    max-width:100%;
    box-sizing:border-box;
  }
}

/* ═══════════════════════════════════════════════════════════════
   END — landing.css · HiringReferrals v7.2 FINAL MERGED
   ✅ mobile-fix-patch.css cleanly merged — zero conflicts
   ✅ Single @media (max-width:900px) block — no duplicate rules
   ✅ Nav: Logo | Browse Jobs | ☰ only on mobile
   ✅ Sign In / Sign Up → inside mob-menu only
   ✅ Hero text no longer clips on right edge
   ✅ Hero overflow-x hidden at hero + container level
   ✅ All !important used only where specificity conflict demanded it
═══════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════
   AUTH ISOLATION — login / register pages
   Ye block landing.css ke global rules ko
   auth pages pe override karta hai
═══════════════════════════════════════════ */
.hr-main-auth { padding-top:0 !important; overflow:visible !important; }
.hr-main-auth .hr-form-card p  { color:inherit; font-size:inherit; line-height:inherit; }
.hr-main-auth .hr-form-card h1,
.hr-main-auth .hr-form-card h2,
.hr-main-auth .hr-form-card h3,
.hr-main-auth .hr-form-card h4  { color:inherit; line-height:inherit; }
.hr-main-auth .hr-form-card a   { color:var(--hr-primary,#202870); text-decoration:none; }

/* AUTH MAIN WRAPPER — no extra spacing */