/* =====================================================================
   CareerSahayak — shared custom styles (loaded on every page)
   Brand palette (from logo):
     navy   #0d2144   |  royal blue #1f7ae0  |  sky #35a9e8  |  green #7ac043
   ===================================================================== */

:root{
  --marquee-h: 42px;
  --brand-navy:#0d2144;
  --brand-blue:#1f7ae0;
  --brand-sky:#35a9e8;
  --brand-green:#7ac043;
}

/* ---------------- Hiring marquee (index only) ---------------- */
.hiring-bar{
  position:fixed; top:0; left:0; width:100%; height:var(--marquee-h);
  background:linear-gradient(90deg,#0d2144 0%,#123a6b 40%,#1f7ae0 70%,#0d2144 100%);
  background-size:220% 100%;
  animation:hiring-sheen 14s ease-in-out infinite;
  color:#fff; overflow:hidden; z-index:60;
  display:flex; align-items:center;
  box-shadow:0 2px 12px rgba(13,33,68,.35);
  border-bottom:2px solid var(--brand-green);
}
.hiring-track{
  display:flex; width:max-content; flex-shrink:0;
  animation:hiring-scroll 32s linear infinite;
  will-change:transform;
}
.hiring-bar:hover .hiring-track{ animation-play-state:paused; }
.hiring-content{
  display:flex; align-items:center; gap:12px;
  padding:0 26px; white-space:nowrap; font-size:13.5px;
  position:relative;
}
.hiring-content::after{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--brand-green);
  box-shadow:0 0 6px rgba(122,192,67,.9);
}
.hiring-flag{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--brand-green); color:#08240a;
  padding:2px 9px; border-radius:5px; font-weight:800;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.4px;
}
.hiring-flag::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:#08240a; animation:hiring-blink 1.4s steps(2,start) infinite;
}
.hiring-content strong{ font-weight:700; letter-spacing:.2px; color:#fff; }
.hiring-content .salary{
  background:rgba(53,169,232,.22); color:#dff2ff;
  border:1px solid rgba(53,169,232,.5);
  padding:2px 11px; border-radius:999px; font-weight:700; font-size:11.5px;
}
.hiring-content .apply-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; color:var(--brand-blue);
  padding:3px 14px; border-radius:999px; font-weight:700;
  font-size:12px; text-decoration:none;
  transition:all .25s ease;
}
.hiring-content .apply-btn::after{ content:"\2192"; font-size:13px; transition:transform .2s ease; }
.hiring-content .apply-btn:hover{ background:var(--brand-green); color:#08240a; }
.hiring-content .apply-btn:hover::after{ transform:translateX(3px); }

@keyframes hiring-scroll{ 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
@keyframes hiring-sheen{ 0%,100%{background-position:0% 50%;} 50%{background-position:100% 50%;} }
@keyframes hiring-blink{ 0%,100%{opacity:1;} 50%{opacity:.15;} }

@media (max-width:640px){
  .hiring-content{ padding:0 16px; font-size:12px; gap:9px; }
  .hiring-track{ animation-duration:22s; }
  .hiring-flag{ font-size:9.5px; padding:2px 7px; }
}

/* ---------------- Header ---------------- */
#site-header{ top:0; z-index:100; }  /* must beat .hiring-bar's z:60 — header creates a stacking context, so its nested mobile-menu/overlay would otherwise render under the promo bar */
body.has-marquee #site-header{ top:var(--marquee-h); }   /* index: sit below marquee */
#site-header.is-scrolled{ background:var(--brand-navy); box-shadow:0 4px 18px rgba(13,33,68,.25); }
#site-header .site-logo{ height:44px; width:auto; }

/* nav links stay white on the dark bar; active is a soft accent */
#site-header .nav-link{ color:#fff !important; }
#site-header .nav-link:hover{ color:var(--brand-green) !important; }
#site-header .nav-link.\!text-primary,
#site-header .nav-link.text-primary{ color:var(--brand-green) !important; }

/* Hamburger button — Tailwind controls display (flex / lg:hidden).
   These rules only add styling + the burger→X animation. */
.mobile-burger{
  position:relative; gap:0;
  width:44px; height:40px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.32); background:rgba(255,255,255,.08);
  cursor:pointer; transition:background .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.mobile-burger:hover,.mobile-burger:focus-visible{ background:rgba(122,192,67,.22); border-color:var(--brand-green); }
.mobile-burger span{
  display:block; width:22px; height:2px; border-radius:2px; background:#fff;
  transition:transform .3s cubic-bezier(.6,.05,.3,1), opacity .2s ease;
}
/* same 5px spacing whether or not the markup carries inline margins */
.mobile-burger span + span{ margin-top:5px; }
.mobile-burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.mobile-burger.is-open span:nth-child(2){ opacity:0; }
.mobile-burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* Mobile slide-in menu */
body.menu-open{ overflow:hidden; }
.mobile-menu-overlay{
  position:fixed; inset:0; background:rgba(6,17,34,.55);
  backdrop-filter:blur(2px); z-index:60;
}
.mobile-menu{
  position:fixed; top:0; right:0; z-index:70;
  height:100%; height:100dvh; width:86%; max-width:340px;
  background:#fff; display:flex; flex-direction:column;
  box-shadow:-8px 0 30px rgba(6,17,34,.28);
  transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
  overscroll-behavior:contain;
}
.mobile-menu.is-open{ transform:translateX(0); }
.mobile-menu-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid #eef2f7; flex-shrink:0;
}
.mobile-menu-logo{ height:34px; width:auto; }
.mobile-menu-x{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; color:var(--brand-navy);
  background:#f1f5f9; transition:background .2s ease, color .2s ease;
}
.mobile-menu-x:hover{ background:var(--brand-navy); color:#fff; }
.mobile-menu-nav{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:14px 16px calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
}
.mobile-nav-item{ width:100%; border-bottom:1px solid #f1f5f9; }
.mobile-nav-link,
.mobile-submenu-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:14px 6px; border-radius:8px;
  font-size:16px; font-weight:600; color:var(--brand-navy);
  transition:color .2s ease; -webkit-tap-highlight-color:transparent;
}
.mobile-nav-link:active,.mobile-submenu-toggle:active{ background:#f8fafc; }
.mobile-nav-link:hover,.mobile-submenu-toggle:hover{ color:var(--brand-blue); }
.mobile-submenu-toggle svg{ transition:transform .25s ease; flex-shrink:0; }
.mobile-nav-item.is-open .mobile-submenu-toggle{ color:var(--brand-blue); }
.mobile-nav-item.is-open .mobile-submenu-toggle svg{ transform:rotate(180deg); }
.mobile-submenu{
  background:#f8fbff; border-radius:10px; padding:6px; margin:0 0 12px;
  display:flex; flex-direction:column;
}
.mobile-submenu.hidden{ display:none; }
.mobile-sub-link{
  display:block; padding:11px 12px; border-radius:8px;
  font-size:14.5px; color:#5b6b82; transition:all .2s ease;
}
.mobile-sub-link:hover{ background:#fff; color:var(--brand-blue); }
.mobile-menu-cta{ display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.mm-btn{
  display:block; text-align:center; padding:13px 16px; border-radius:10px;
  font-weight:700; font-size:15px; transition:all .25s ease;
}
.mm-btn-outline{ border:1.5px solid var(--brand-blue); color:var(--brand-blue); background:transparent; }
.mm-btn-outline:hover{ background:var(--brand-blue); color:#fff; }
.mm-btn-solid{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-sky)); color:#fff;
  box-shadow:0 4px 14px rgba(31,122,224,.3);
}
.mm-btn-solid:hover{ background:linear-gradient(135deg,#4e8f1f,var(--brand-green)); }
.mobile-menu-social{ margin-top:24px; padding-top:18px; border-top:1px solid #eef2f7; }
.mobile-menu-social-label{
  font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.8px; color:#94a3b8; margin-bottom:12px;
}
@media (min-width:1024px){
  .mobile-menu, .mobile-menu-overlay{ display:none; }
  .mobile-burger{ display:none !important; }
}

@media (max-width:1023px){
  #site-header .site-logo{ height:40px; }
}

/* ---------------- Social nav ---------------- */
.social-nav{ align-items:center; gap:9px; }
.social-nav:not(.hidden){ display:flex; }
/* respect Tailwind's `hidden lg:flex` — stay hidden below lg, show at lg+ */
.social-nav.hidden{ display:none; }
@media (min-width:1024px){
  .social-nav.lg\:flex{ display:flex; }
}
.social-nav a{
  display:flex; justify-content:center; align-items:center;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  transition:all .3s ease; box-shadow:0 2px 5px rgba(0,0,0,.15);
}
.social-nav a[aria-label="LinkedIn"]:hover{ background:#0077b5; }
.social-nav a[aria-label="Facebook"]:hover{ background:#1877f2; }
.social-nav a[aria-label="Instagram"]:hover{
  background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%);
}
.social-nav a[aria-label="X"]:hover{ background:#000; }
.social-nav a:hover{ transform:translateY(-3px); box-shadow:0 4px 10px rgba(0,0,0,.28); filter:brightness(1.08); }
/* light version inside mobile menu */
#mobile-menu .social-nav a{ background:#eef2f7; color:var(--brand-navy); }
#mobile-menu .social-nav a[aria-label="X"]{ background:var(--brand-navy); color:#fff; }

/* ---------------- Hero slider (full viewport height) ---------------- */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;              /* mobile-safe viewport unit */
  display:flex; align-items:center;
  padding-top:calc(var(--marquee-h) + 88px);
  padding-bottom:40px;
  overflow:hidden;
}
.hero-slider{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-slides{ display:flex; height:100%; width:400%; animation:hero-slide 32s ease-in-out infinite; }
.hero-slide{
  position:relative; width:25%; height:100%; flex-shrink:0;
  background-size:cover; background-position:center;
}
.hero-slider::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(248,250,252,.95) 0%, rgba(248,250,252,.88) 45%, rgba(248,250,252,.62) 100%);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
}
@keyframes hero-slide{
  0%,18%   { transform:translateX(0); }
  25%,43%  { transform:translateX(-25%); }
  50%,68%  { transform:translateX(-50%); }
  75%,93%  { transform:translateX(-75%); }
  100%     { transform:translateX(0); }
}

/* Hero stats strip */
.hero-stats{
  margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
  background:rgba(255,255,255,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(31,122,224,.14); border-radius:18px;
  padding:22px 18px; max-width:820px; margin-left:auto; margin-right:auto;
  box-shadow:0 10px 30px rgba(13,33,68,.08);
}
.hero-stat{ text-align:center; position:relative; }
.hero-stat:not(:last-child)::after{
  content:""; position:absolute; right:-8px; top:15%; height:70%; width:1px;
  background:rgba(13,33,68,.12);
}
.hero-stat-num{
  font-size:34px; font-weight:800; line-height:1;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-green));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-stat-label{
  margin-top:6px; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:#41506a;
}
@media (max-width:640px){
  .hero-stats{ grid-template-columns:repeat(2,1fr); gap:14px 8px; padding:18px 14px; }
  .hero-stat:nth-child(2)::after{ display:none; }
  .hero-stat-num{ font-size:28px; }
}

/* ---------------- Category cards (professional vertical) ---------------- */
.cat-card{
  position:relative; display:flex; flex-direction:column; align-items:center;
  gap:12px; text-align:center; padding:24px 16px 20px;
  background:#fff; border:1px solid #e8eef6; border-radius:16px;
  box-shadow:0 2px 10px rgba(13,33,68,.04);
  overflow:hidden; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cat-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--brand-blue),var(--brand-green));
  transform:scaleX(0); transform-origin:left; transition:transform .3s ease;
}
.cat-card:hover{ transform:translateY(-5px); border-color:#cfe0f5; box-shadow:0 14px 30px rgba(13,33,68,.12); }
.cat-card:hover::before{ transform:scaleX(1); }
.cat-ic{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px; flex-shrink:0;
  background:rgba(31,122,224,.1); color:var(--brand-blue);
  transition:transform .25s ease, background .25s ease, color .25s ease;
}
.cat-ic svg{ width:24px; height:24px; }
.cat-card:nth-child(3n+2) .cat-ic{ background:rgba(122,192,67,.16); color:#4e8f1f; }
.cat-card:nth-child(3n) .cat-ic{ background:rgba(53,169,232,.14); color:var(--brand-sky); }
.cat-card:hover .cat-ic{ transform:scale(1.08); }
.cat-label{
  font-size:14px; font-weight:600; color:var(--brand-navy); line-height:1.3;
}
.cat-card:hover .cat-label{ color:var(--brand-blue); }
.dark .cat-card{ background:#131c2e; border-color:#25324a; }
.dark .cat-label{ color:#e2e8f0; }

/* ---------------- Trending panels + chips ---------------- */
.trending-panel{
  background:linear-gradient(180deg,#f8fbff 0%,#ffffff 100%);
  border:1px solid #e6eef8; border-radius:16px;
  padding:16px 18px; box-shadow:0 4px 18px rgba(13,33,68,.05);
  width:100%; min-width:0; overflow:hidden;   /* keep panel within its grid cell */
}
.dark .trending-panel{ background:#131c2e; border-color:#25324a; }
.trending-head{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.trending-ic{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  background:rgba(31,122,224,.12); color:var(--brand-blue);
}
.trending-ic-green{ background:rgba(122,192,67,.16); color:#4e8f1f; }
.trending-title{
  font-size:16px; font-weight:700; color:var(--brand-navy);
  flex:1; letter-spacing:.2px;
}
.dark .trending-title{ color:#fff; }
.trending-arrows{ display:flex; gap:8px; }

.chip-wrap{ position:relative; min-width:0; }
.chip-wrap::after{
  content:""; position:absolute; right:0; top:0; bottom:0; width:36px;
  background:linear-gradient(90deg, transparent, #ffffff 85%);
  pointer-events:none; border-radius:0 12px 12px 0;
}
.dark .chip-wrap::after{ background:linear-gradient(90deg, transparent, #131c2e 85%); }

.chip-track{
  display:flex; gap:10px; overflow-x:auto; scroll-behavior:smooth;
  padding:2px; scrollbar-width:none; -ms-overflow-style:none;
  min-width:0; max-width:100%;
}
.chip-track::-webkit-scrollbar{ display:none; }
.chip{
  white-space:nowrap; flex-shrink:0; border:1px solid #dbe6f3;
  border-radius:999px; padding:9px 18px; font-size:14px; font-weight:500;
  color:var(--brand-navy); background:#fff; transition:all .2s ease;
}
.chip:hover{
  border-color:var(--brand-blue); color:#fff;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-sky));
  box-shadow:0 4px 12px rgba(31,122,224,.28); transform:translateY(-2px);
}
.dark .chip{ background:transparent; border-color:#25324a; color:#cbd5e1; }
.chip-nav{
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; border:1px solid #dbe6f3;
  color:var(--brand-navy); background:#fff; flex-shrink:0;
  transition:all .2s ease; box-shadow:0 1px 3px rgba(13,33,68,.08);
}
.chip-nav:hover{ border-color:var(--brand-blue); color:#fff; background:var(--brand-blue); }
.dark .chip-nav{ background:transparent; border-color:#25324a; color:#cbd5e1; }

/* ---------------- Lead form ---------------- */
.lead-input, .lead-select{
  width:100%; padding:13px 16px; border-radius:10px;
  border:1px solid #e2e8f0; background:#fff; color:#0e2a47;
  font-size:15px; transition:border-color .2s ease, box-shadow .2s ease;
}
.lead-input:focus, .lead-select:focus{
  outline:none; border-color:#007bff; box-shadow:0 0 0 3px rgba(0,123,255,.15);
}
.lead-input::placeholder{ color:#94a3b8; }

/* ---------------- CTA band (matches Start Your Career Journey card) ---------------- */
.cta-band{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-sky) 100%);
  border-radius:24px;
}
.cta-band::before,
.cta-band::after{
  content:""; position:absolute; border-radius:50%; filter:blur(6px);
}
.cta-band::before{
  width:300px; height:300px; top:-120px; right:-70px;
  background:radial-gradient(circle, rgba(122,192,67,.4), transparent 70%);
}
.cta-band::after{
  width:280px; height:280px; bottom:-140px; left:-60px;
  background:radial-gradient(circle, rgba(255,255,255,.22), transparent 70%);
}
.cta-band > *{ position:relative; z-index:1; }

/* ---------------- Featured job cards: apply + view all ---------------- */
.job-card-foot{ padding:0 20px 20px; margin-top:auto; }
@media (min-width:640px){ .job-card-foot{ padding:0 32px 28px; } }
.job-apply-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:12px 18px; border-radius:10px;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-sky));
  color:#fff; font-weight:700; font-size:15px; text-decoration:none;
  box-shadow:0 4px 12px rgba(31,122,224,.25); transition:all .25s ease;
}
.job-apply-btn svg{ transition:transform .2s ease; }
.job-apply-btn:hover{ background:linear-gradient(135deg,#4e8f1f,var(--brand-green)); box-shadow:0 6px 16px rgba(122,192,67,.32); transform:translateY(-2px); }
.job-apply-btn:hover svg{ transform:translateX(4px); }

.view-all-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:10px; white-space:nowrap;
  background:var(--brand-blue); color:#fff; font-weight:700; text-decoration:none;
  box-shadow:0 4px 14px rgba(31,122,224,.28); transition:all .25s ease;
}
.view-all-btn svg{ transition:transform .2s ease; }
.view-all-btn:hover{ background:var(--brand-navy); transform:translateY(-2px); }
.view-all-btn:hover svg{ transform:translateX(4px); }

/* ---------------- Uniform section rhythm ---------------- */
/* Normalize spacing so every content section has the same gap.
   Overrides the mixed pt-16 / py-16 / py-20 / mt-16 utilities. */
main > section{ padding-top:64px !important; padding-bottom:64px !important; margin-top:0 !important; margin-bottom:0 !important; }
main > section.hero{ padding-top:calc(var(--marquee-h) + 88px) !important; padding-bottom:40px !important; }
@media (max-width:640px){
  main > section{ padding-top:44px !important; padding-bottom:44px !important; }
  main > section.hero{ padding-top:calc(var(--marquee-h) + 76px) !important; }
}

/* ---------------- Shared section helpers ---------------- */
.eyebrow{
  display:inline-block; text-transform:uppercase; letter-spacing:1.5px;
  font-size:12px; font-weight:800; color:var(--brand-blue);
  background:rgba(31,122,224,.1); padding:5px 14px; border-radius:999px;
}

/* ---------------- Notifications (square boxes, continuous loop) ---------------- */
.notif-bell{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:10px;
  background:rgba(31,122,224,.12); color:var(--brand-blue);
}
.notif-ticker{
  position:relative; overflow:hidden; padding:6px 0;
}
.notif-ticker::before, .notif-ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:64px; z-index:2; pointer-events:none;
}
.notif-ticker::before{ left:0; background:linear-gradient(90deg,#eef3f8,transparent); }
.notif-ticker::after{ right:0; background:linear-gradient(270deg,#eef3f8,transparent); }
.dark .notif-ticker::before{ background:linear-gradient(90deg,#0e1626,transparent); }
.dark .notif-ticker::after{ background:linear-gradient(270deg,#0e1626,transparent); }

.notif-ticker-track{
  display:flex; width:max-content; gap:20px; padding:6px 20px;
  animation:notif-scroll 34s linear infinite;   /* continuous forward, no reverse */
  will-change:transform;
}
.notif-ticker:hover .notif-ticker-track{ animation-play-state:paused; }

.notif-box{
  flex-shrink:0; width:300px; box-sizing:border-box;
  background:#fff; border:1px solid #e6eef8; border-radius:16px;
  padding:22px 22px 18px; box-shadow:0 4px 16px rgba(13,33,68,.06);
  display:flex; flex-direction:column; gap:10px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.notif-box:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(13,33,68,.12); }
.dark .notif-box{ background:#131c2e; border-color:#25324a; }
.notif-box-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.notif-box-num{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-sky));
  color:#fff; font-weight:800; font-size:17px;
}
.notif-box-num-green{ background:linear-gradient(135deg,#4e8f1f,var(--brand-green)); }
.notif-box-num-sky{ background:linear-gradient(135deg,var(--brand-sky),#7cc6f2); }
.notif-box-title{ font-size:16px; font-weight:700; color:var(--brand-navy); line-height:1.3; }
.dark .notif-box-title{ color:#fff; }
.notif-box-text{ font-size:13.5px; color:#5b6b82; line-height:1.55; flex:1; }
.dark .notif-box-text{ color:#9aa7bd; }

.notif-tag{
  display:inline-block; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; padding:4px 10px; border-radius:6px; flex-shrink:0;
}
.notif-tag-red{ background:#fde8e8; color:#c0392b; }
.notif-tag-green{ background:#e8f6e0; color:#4e8f1f; }
.notif-tag-blue{ background:#e5f0fd; color:var(--brand-blue); }
.notif-date{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#94a3b8; font-weight:600; }
.notif-dot{ width:6px; height:6px; border-radius:50%; background:var(--brand-green); box-shadow:0 0 5px rgba(122,192,67,.8); }

/* continuous forward loop — track holds 2 identical sets, shift by -50% */
@keyframes notif-scroll{
  from{ transform:translateX(0); }
  to  { transform:translateX(-50%); }
}
@media (max-width:640px){
  .notif-box{ width:260px; }
  .notif-ticker-track{ animation-duration:26s; }
}


/* ---------------- What We Offer ---------------- */
.offer-card{
  background:#fff; border:1px solid #e6eef8; border-radius:16px;
  padding:26px 24px; box-shadow:0 4px 16px rgba(13,33,68,.05);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.offer-card:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(13,33,68,.12); border-color:#cfe0f5; }
.dark .offer-card{ background:#131c2e; border-color:#25324a; }
.offer-ic{
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px; margin-bottom:16px;
}
.offer-ic-blue{ background:rgba(31,122,224,.12); color:var(--brand-blue); }
.offer-ic-green{ background:rgba(122,192,67,.16); color:#4e8f1f; }
.offer-ic-sky{ background:rgba(53,169,232,.14); color:var(--brand-sky); }
.offer-title{ font-size:18px; font-weight:700; color:var(--brand-navy); margin-bottom:8px; }
.dark .offer-title{ color:#fff; }
.offer-text{ font-size:14.5px; color:#5b6b82; line-height:1.6; }
.dark .offer-text{ color:#9aa7bd; }

/* ---------------- Stats banner ---------------- */
.stats-band{ background:#fff; }
.dark .stats-band{ background:#0e1626; }
.stats-band-head{
  background:linear-gradient(90deg,var(--brand-sky),var(--brand-blue));
  padding:22px 16px;
}
.stat-item{ text-align:center; }
.stat-num{
  font-size:44px; font-weight:800; color:var(--brand-navy); line-height:1;
}
.dark .stat-num{ color:#fff; }
.stat-rule{ width:38px; height:3px; background:var(--brand-sky); border-radius:2px; margin:10px auto; }
.stat-label{
  font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.8px;
  color:#5b6b82;
}
.dark .stat-label{ color:#9aa7bd; }

/* ---------------- Start Journey CTA ---------------- */
.journey-cta{
  position:relative; overflow:hidden; border-radius:22px;
  background:linear-gradient(135deg,var(--brand-blue) 0%,var(--brand-sky) 100%);
  padding:44px 28px;
}
.journey-cta::after{
  content:""; position:absolute; width:260px; height:260px; border-radius:50%;
  background:rgba(122,192,67,.28); top:-120px; right:-60px; filter:blur(8px);
}
.journey-cta > *{ position:relative; z-index:1; }
.journey-btn{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; color:var(--brand-blue); font-weight:700;
  padding:14px 30px; border-radius:999px; text-decoration:none;
  box-shadow:0 8px 22px rgba(0,0,0,.18); transition:all .25s ease;
}
.journey-btn:hover{ background:var(--brand-green); color:#08240a; transform:translateY(-2px); }
.journey-btn svg{ transition:transform .2s ease; }
.journey-btn:hover svg{ transform:translateX(4px); }

/* ---------------- Path to Success ---------------- */
.path-card{
  position:relative; background:#fff; border:1px solid #e6eef8; border-radius:18px;
  padding:28px 24px; box-shadow:0 4px 16px rgba(13,33,68,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.path-card:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(13,33,68,.14); }
.dark .path-card{ background:#131c2e; border-color:#25324a; }
.path-card-featured{ border:2px solid var(--brand-green); box-shadow:0 12px 30px rgba(122,192,67,.18); }
.path-flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--brand-green); color:#08240a; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.6px; padding:4px 14px; border-radius:999px;
  white-space:nowrap;
}
.path-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:64px; height:40px; padding:0 14px; border-radius:10px;
  background:rgba(31,122,224,.12); color:var(--brand-blue);
  font-weight:800; font-size:17px; margin-bottom:14px; letter-spacing:.5px;
}
.path-badge-green{ background:rgba(122,192,67,.18); color:#4e8f1f; }
.path-badge-sky{ background:rgba(53,169,232,.16); color:var(--brand-sky); }
.path-title{ font-size:19px; font-weight:700; color:var(--brand-navy); margin-bottom:8px; }
.dark .path-title{ color:#fff; }
.path-text{ font-size:14.5px; color:#5b6b82; line-height:1.6; margin-bottom:14px; }
.dark .path-text{ color:#9aa7bd; }
.path-list{ margin-bottom:18px; display:flex; flex-direction:column; gap:8px; }
.path-list li{
  position:relative; padding-left:24px; font-size:14px; color:#41506a;
}
.path-list li::before{
  content:""; position:absolute; left:0; top:6px; width:14px; height:14px;
  border-radius:50%; background:rgba(122,192,67,.25);
  box-shadow:inset 0 0 0 3px var(--brand-green);
}
.dark .path-list li{ color:#c3cdde; }
.path-link{ font-weight:700; color:var(--brand-blue); text-decoration:none; }
.path-link:hover{ color:var(--brand-sky); }

/* ---------------- Our Process ---------------- */
.process-pill{
  display:inline-block; margin-top:16px;
  background:rgba(31,122,224,.1); color:var(--brand-blue);
  font-weight:700; font-size:13px; padding:6px 18px; border-radius:999px;
}
.process-pill-green{ background:rgba(122,192,67,.16); color:#4e8f1f; }
.process-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
@media (max-width:900px){ .process-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .process-grid{ grid-template-columns:1fr; } }
.process-step{
  position:relative; background:#fff; border:1px solid #e6eef8; border-radius:16px;
  padding:26px 22px; box-shadow:0 4px 16px rgba(13,33,68,.05);
}
.dark .process-step{ background:#131c2e; border-color:#25324a; }
.process-num{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px; margin-bottom:14px;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-sky));
  color:#fff; font-weight:800; font-size:19px;
}
.process-num-green{ background:linear-gradient(135deg,#4e8f1f,var(--brand-green)); }
.process-title{ font-size:16.5px; font-weight:700; color:var(--brand-navy); margin-bottom:7px; }
.dark .process-title{ color:#fff; }
.process-text{ font-size:14px; color:#5b6b82; line-height:1.6; }
.dark .process-text{ color:#9aa7bd; }

/* ---------------- Testimonials ---------------- */
.tst-card{
  position:relative; background:#fff; border:1px solid #e6eef8; border-radius:18px;
  padding:28px 24px 22px; box-shadow:0 4px 16px rgba(13,33,68,.05);
  transition:transform .25s ease, box-shadow .25s ease;
}
.tst-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(13,33,68,.12); }
.dark .tst-card{ background:#131c2e; border-color:#25324a; }
.tst-quote{
  font-family:Georgia,serif; font-size:56px; line-height:.5; color:var(--brand-green);
  height:26px; margin-bottom:6px;
}
.tst-text{ color:#41506a; font-size:15px; line-height:1.7; margin-bottom:20px; }
.dark .tst-text{ color:#c3cdde; }
.tst-person{ display:flex; align-items:center; gap:12px; }
.tst-avatar{
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background:#fff; border:2px solid rgba(31,122,224,.2); padding:5px;
  box-shadow:0 2px 8px rgba(13,33,68,.1);
}
.tst-avatar img{ width:100%; height:100%; object-fit:contain; }
.tst-name{ font-weight:700; color:var(--brand-navy); font-size:15px; }
.dark .tst-name{ color:#fff; }
.tst-role{ font-size:13px; color:#7b8aa0; }

/* ---------------- FAQ ---------------- */
.faq-list{ display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:#fff; border:1px solid #e6eef8; border-radius:12px;
  overflow:hidden; transition:border-color .2s ease;
}
.dark .faq-item{ background:#131c2e; border-color:#25324a; }
.faq-item[open]{ border-color:var(--brand-blue); box-shadow:0 4px 14px rgba(31,122,224,.1); }
.faq-q{
  list-style:none; cursor:pointer; display:flex; align-items:center;
  justify-content:space-between; gap:16px; padding:18px 20px;
  font-weight:600; color:var(--brand-navy); font-size:15.5px;
}
.dark .faq-q{ color:#fff; }
.faq-q::-webkit-details-marker{ display:none; }
.faq-ic{ position:relative; width:18px; height:18px; flex-shrink:0; }
.faq-ic::before, .faq-ic::after{
  content:""; position:absolute; background:var(--brand-blue); border-radius:2px;
  transition:transform .25s ease;
}
.faq-ic::before{ top:8px; left:0; width:18px; height:2px; }
.faq-ic::after{ left:8px; top:0; width:2px; height:18px; }
.faq-item[open] .faq-ic::after{ transform:rotate(90deg); opacity:0; }
.faq-a{ padding:0 20px 20px; color:#5b6b82; font-size:14.5px; line-height:1.7; }
.dark .faq-a{ color:#9aa7bd; }

/* ---------------- Floating WhatsApp button ---------------- */
.whatsapp-sticky{
  position:fixed; bottom:22px; right:22px;
  width:58px; height:58px; background:#25d366; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:2px 5px 15px rgba(0,0,0,.3);
  z-index:1000; opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s, transform .2s;
  animation:wa-pulse 2s infinite;
}
.whatsapp-sticky img{ width:34px; height:34px; }
.whatsapp-sticky.show{ opacity:1; visibility:visible; }
.whatsapp-sticky:hover{ transform:scale(1.08); }
@keyframes wa-pulse{
  0%{ box-shadow:0 0 0 0 rgba(37,211,102,.7); }
  70%{ box-shadow:0 0 0 18px rgba(37,211,102,0); }
  100%{ box-shadow:0 0 0 0 rgba(37,211,102,0); }
}
@media (max-width:640px){
  .whatsapp-sticky{ width:52px; height:52px; bottom:18px; right:18px; }
  .whatsapp-sticky img{ width:30px; height:30px; }
}

/* ---------------- Footer social (matches header) ---------------- */
footer .social-nav a{ background:rgba(255,255,255,.12); color:#fff; }

/* ---------------- Footer widget: Newsletter / Request Callback ---------------- */
.foot-widget{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:14px; padding:16px;
}
.foot-tabs{
  display:flex; gap:6px; background:rgba(0,0,0,.22);
  border-radius:10px; padding:5px; margin-bottom:14px;
}
.foot-tab{
  flex:1; padding:9px 8px; border-radius:7px; font-size:13.5px; font-weight:700;
  color:rgba(255,255,255,.75); transition:all .22s ease; white-space:nowrap;
}
.foot-tab:hover{ color:#fff; }
.foot-tab.is-active{
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-sky));
  color:#fff; box-shadow:0 3px 10px rgba(31,122,224,.35);
}
.foot-panel-note{ font-size:13px; color:rgba(255,255,255,.7); margin-bottom:10px; }
.foot-row{ display:flex; gap:8px; }
.foot-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
.foot-input{
  flex:1; min-width:0; padding:11px 14px; border-radius:9px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.95);
  color:var(--brand-navy); font-size:14px;
}
.foot-input::placeholder{ color:#94a3b8; }
.foot-input:focus{ outline:none; border-color:var(--brand-green); box-shadow:0 0 0 3px rgba(122,192,67,.25); }
.foot-btn{
  padding:11px 20px; border-radius:9px; font-weight:700; font-size:14px; color:#fff;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-sky));
  white-space:nowrap; transition:all .25s ease;
}
.foot-btn:hover{ background:linear-gradient(135deg,#4e8f1f,var(--brand-green)); transform:translateY(-1px); }
.foot-btn-full{ width:100%; }
.foot-msg{ font-size:12.5px; margin-top:8px; }
.foot-err{ color:#fca5a5; }
.foot-ok{ color:#86efac; font-weight:600; }
@media (max-width:480px){
  .foot-row{ flex-direction:column; }
  .foot-row-2{ grid-template-columns:1fr; }
  .foot-btn{ width:100%; }
}

/* ---------------- Auto-open lead modal ---------------- */
.lead-modal{
  position:fixed; inset:0; z-index:1100; display:none;
  align-items:center; justify-content:center; padding:20px;
}
.lead-modal.is-open{ display:flex; animation:lm-fade .25s ease; }
.lead-modal-overlay{ position:absolute; inset:0; background:rgba(6,17,34,.66); backdrop-filter:blur(2px); }
.lead-modal-card{
  position:relative; z-index:1; width:100%; max-width:460px;
  background:#fff; border-radius:20px; padding:26px 26px 22px;
  box-shadow:0 30px 70px rgba(6,17,34,.4);
  max-height:92vh; overflow-y:auto; animation:lm-pop .3s cubic-bezier(.2,.8,.3,1.1);
}
.lead-modal-close{
  position:absolute; top:14px; right:14px; color:#64748b;
  width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .2s ease, color .2s ease;
}
.lead-modal-close:hover{ background:#f1f5f9; color:var(--brand-navy); }
.lead-modal-head{ text-align:center; margin-bottom:18px; }
.lead-modal-logo{ height:34px; width:auto; margin:0 auto 12px; }
.lead-modal-head h3{ font-size:22px; font-weight:800; color:var(--brand-navy); }
.lead-modal-head p{ font-size:14px; color:#5b6b82; margin-top:6px; }

.lead-modal-tabs{ display:flex; gap:6px; background:#eef3f8; border-radius:10px; padding:5px; margin-bottom:18px; }
.lm-tab{ flex:1; padding:9px; border-radius:7px; font-size:14px; font-weight:700; color:var(--brand-navy); transition:all .2s ease; }
.lm-tab.is-active{ background:var(--brand-blue); color:#fff; box-shadow:0 3px 8px rgba(31,122,224,.3); }

#lead-modal-form label{ display:block; font-size:13px; font-weight:600; color:var(--brand-navy); margin-bottom:6px; }
.lm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px; }
.lm-full{ margin-bottom:14px; }
.lm-optional{ color:#94a3b8; font-weight:400; }
.lm-submit{
  width:100%; padding:13px; border-radius:10px; font-weight:700; font-size:15px; color:#fff;
  background:linear-gradient(135deg,var(--brand-blue),var(--brand-sky));
  box-shadow:0 6px 16px rgba(31,122,224,.3); transition:all .25s ease;
}
.lm-submit:hover{ background:linear-gradient(135deg,#4e8f1f,var(--brand-green)); transform:translateY(-2px); }
.lm-error{ color:#dc2626; font-size:13px; margin-top:10px; text-align:center; }
.lm-success{ color:#16a34a; font-size:13.5px; font-weight:600; margin-top:10px; text-align:center; }
.lm-note{ font-size:11.5px; color:#94a3b8; text-align:center; margin-top:10px; }

@keyframes lm-fade{ from{opacity:0;} to{opacity:1;} }
@keyframes lm-pop{ from{opacity:0; transform:translateY(16px) scale(.97);} to{opacity:1; transform:none;} }
@media (max-width:480px){
  .lm-grid{ grid-template-columns:1fr; }
  .lead-modal-card{ padding:22px 18px 18px; }
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  .hero-slides, .hiring-track, .hiring-bar, .notif-ticker-track, .whatsapp-sticky{ animation:none; }
}