:root{
  --text:#111113;
  --muted:#6B7280;
  --line:rgba(0,0,0,.10);
  --bg:#F6FAFB;
  --white:#fff;

  --primary:#0969C3;
  --primarySoft:rgba(9,105,195,.12);
  --primarySoft2:rgba(9,105,195,.06);

  --btn:#54B27A;
  --btnHover:#47A46E;

  --shadow:0 18px 45px rgba(0,0,0,.08);
  --shadowSoft:0 10px 26px rgba(0,0,0,.06);

  --max:1440px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  /*background:var(--bg);*/
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{
  width:min(var(--max), calc(100% - 56px));
  margin:0 auto;
}

/* ===================== NAV ===================== */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(12px);
}
.navInner{
  height:84px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* ===== Brand with image logo ===== */
.brand{
  display:flex; align-items:center; gap:12px;
  font-weight:900;
  letter-spacing:-0.02em;
  font-size:20px;
}
.brandLogo{
  width:44px; height:44px;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  flex:0 0 auto;
  display:grid;
  place-items:center;
}
.brandLogo img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:7px;
}
.brandText{display:flex; align-items:baseline; gap:2px;}
.brand .dot{opacity:.65; font-weight:900;}

.navLinks{
  display:flex;
  align-items:center;
  gap:18px;
  font-weight:800;
  color:rgba(17,17,19,.72);
}
.navLinks a{
  padding: 10px 10px;
  border-radius: 999px;
  transition: color .18s ease, transform .18s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: black;
  font-size: 16px;
  font-weight: 500;
  font-family: poppins;
}
.navLinks a:hover{
  color:var(--primary);
}
.navLinks i{font-size:12px; opacity:.70;}

/* ===================== DESKTOP DROPDOWN ===================== */
.navItem{ position:relative; display:inline-flex; align-items:center; }

.dropdown{
  position:absolute;
  top:100%;
  left:0;
  margin-top:8px;

  min-width:220px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  box-shadow:0 18px 45px rgba(0,0,0,.10);
  padding:8px;

  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  z-index:9999;
}

/* hover bridge so mouse can go into dropdown */
.navItem::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:12px;
}

.navItem:hover .dropdown,
.dropdown:hover{
  opacity:1;
  pointer-events:auto;
}

.dropdown a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  font-weight:850;
  color: black;
  font-size: 16px;
  font-weight: 500;
  font-family: poppins;
}
.dropdown a:hover{
  color:var(--primary);
  text-decoration:underline;
}

/* Browse Jobs mega (4 columns + headings) */
.dropdown.mega{
  min-width: 720px;
  padding: 14px;
}
.megaGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.megaCol h4{
  margin: 6px 8px 10px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(17,17,19,.70);
}
.megaCol a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  font-weight:500;
}
@media (max-width: 980px){
  .dropdown.mega{ min-width: 560px; }
  .megaGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .dropdown.mega{ min-width: 260px; }
  .megaGrid{ grid-template-columns: 1fr; }
}
/* ===================== END DROPDOWN ===================== */

.navActions{display:flex; align-items:center; gap:12px;}

/* Cute long buttons */
.btnCute{
  height: 48px;
  padding: 0 42px;
  border-radius:8px;
  border:1px solid rgba(9,105,195,.22);
  background:rgba(9,105,195,.06);
  color:#0b1a2b;
  font-weight:900;
  cursor:pointer;
  letter-spacing:-0.01em;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btnCute:hover{
  border-color:rgba(9,105,195,.35);
  background:rgba(9,105,195,.10);
}

.btnPrimary{
  height:48px;
  padding:0 42px;
  border-radius:8px;
  border:1px solid rgba(9,105,195,.20);
  background:#000;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  letter-spacing:-0.01em;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow:0 18px 40px rgba(9,105,195,.18);
}
.btnPrimary:hover{
  filter:brightness(1.03);
  box-shadow:0 22px 52px rgba(9,105,195,.24);
}

/* Mobile menu button */
.menuBtn{
  width:48px;
  height:48px;
  border-radius:16px;
  border:1px solid rgba(9,105,195,.22);
  background:rgba(9,105,195,.06);
  display:none;
  place-items:center;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  z-index:100;
  color:#0b1a2b;
  font-size:16px;
}
.menuBtn:hover{
  box-shadow:0 14px 30px rgba(9,105,195,.14);
  border-color:rgba(9,105,195,.35);
  background:rgba(9,105,195,.10);
  color:var(--primary);
}

/* ===================== FANCY MOBILE DRAWER ===================== */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(8, 15, 25, .45);
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  z-index:998;
}
.overlay.show{ opacity:1; pointer-events:auto; }

.drawer{
  position:fixed;
  top:0;
  right:0;
  width:min(380px, 88vw);
  height:100vh;
  transform: translateX(18px);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
  z-index:999;
  padding:14px;
}
.drawer.show{
  opacity:1;
  transform: translateX(0);
  pointer-events:auto;
}

.drawerCard{
  height:100%;
  background:rgba(255,255,255,.80);
  border:1px solid rgba(255,255,255,.35);
  border-radius:26px;
  box-shadow:0 28px 90px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.drawerTop{
  padding:16px 16px 14px;
  border-bottom:1px solid rgba(0,0,0,.08);
  background:
    radial-gradient(600px 220px at 10% 0%, rgba(9,105,195,.22), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.55));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.miniBrand{
  display:flex; align-items:center; gap:10px;
  font-weight:900;
  letter-spacing:-0.02em;
}
.miniLogo{
  width:38px; height:38px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 14px 26px rgba(0,0,0,.10);
  flex:0 0 auto;
}
.miniLogo img{width:100%; height:100%; object-fit:contain; padding:7px;}

.closeBtn{
  width:46px; height:46px;
  border-radius:16px;
  border:1px solid rgba(9,105,195,.18);
  background:rgba(9,105,195,.06);
  cursor:pointer;
  display:grid; place-items:center;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  color:#0b1a2b;
}
.closeBtn:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 30px rgba(9,105,195,.14);
  border-color:rgba(9,105,195,.35);
  background:rgba(9,105,195,.10);
  color:var(--primary);
}

.drawerLinks{
  padding:14px;
  display:grid;
  gap:10px;
  overflow:auto;
}

.drawerLinks a{
  padding:14px 14px;
  border-radius:18px;
  background:transparent;
  border:1px solid rgba(0,0,0,.06);
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  transition:transform .18s ease, border-color .18s ease, color .18s ease;
  color:rgba(17,17,19,.86);
}
.drawerLinks a span{
  display:flex;
  align-items:center;
  gap:10px;
}
.drawerLinks a i{opacity:.86}

.drawerLinks a:hover{
  transform:translateY(-2px);
  color:var(--primary);
  border-color:rgba(9,105,195,.25);
}

.drawerActions{
  padding:14px;
  display:flex;
  gap:10px;
  border-top:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.55);
}
.drawerActions button{flex:1}

/* ===================== HERO (CUTER BG) ===================== */
.hero{
  position:relative;
  padding:66px 0 96px;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 12% 8%, rgba(9,105,195,.10), transparent 55%),
    radial-gradient(900px 420px at 88% 18%, rgba(84,178,122,.10), transparent 55%),
    linear-gradient(180deg,#ffffff 0%, #F6FAFB 70%);
}
.hero:before{
  content:"";
  position:absolute;
  width:620px; height:620px;
  left:-260px; top:-290px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(178,229,236,.55), rgba(178,229,236,0) 62%);
  filter: blur(1px);
  pointer-events:none;
}
.hero:after{
  content:"";
  position:absolute;
  width:520px; height:520px;
  right:-240px; bottom:-260px;
  border-radius:50%;
  background: radial-gradient(circle at 40% 40%, rgba(9,105,195,.12), rgba(9,105,195,0) 60%);
  pointer-events:none;
}

.heroGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:36px;
  align-items:center;
  min-height:560px;
  position:relative;
  z-index:1;
}

.hTitle{
  font-size:clamp(34px,4vw,60px);
  line-height:1.05;
  letter-spacing:-0.045em;
  margin:0;
  font-weight:900;
}
.hSub{
  margin:18px 0 0;
  color:rgba(17,17,19,.68);
  font-weight:500;
  max-width:60ch;
  line-height:1.6;
  font-size:14.8px;
}

.searchWrap{
  margin-top:26px;
  background:#fff;
  border:1px solid rgba(0,0,0,.14);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.07);
  overflow:hidden;
}
.searchRow{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:stretch;
}

.sField{
  display:flex; align-items:center; gap:10px;
  padding:15px 16px;
  border-right:1px solid rgba(0,0,0,.10);
}
.sField:focus-within{
  box-shadow: inset 0 0 0 2px rgba(9,105,195,.18);
  background:rgba(9,105,195,.03);
}
.sField i{opacity:.55; font-size:15px;}
.sField input{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font-weight:750;
  color:rgba(17,17,19,.88);
}
.sField input::placeholder{color:rgba(17,17,19,.45);}

.searchBtn{
  border:none;
  background:var(--primary);
  color:#fff;
  font-weight:900;
  padding:0 28px;
  cursor:pointer;
  transition:filter .18s ease, transform .18s ease, box-shadow .18s ease;
  box-shadow:0 18px 40px rgba(9,105,195,.18);
}
.searchBtn:hover{
  filter:brightness(1.03);
  box-shadow:0 22px 52px rgba(9,105,195,.24);
}

.popular{margin-top:22px;}
.popularLabel{color:rgba(17,17,19,.65); font-weight:900; font-size:14px; margin-bottom:12px;}
.chips{display:flex; flex-wrap:wrap; gap:10px;}
.chip{
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(0,0,0,.10);
  font-weight:850;
  font-size:13px;
  color:rgba(17,17,19,.80);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.chip:hover{
  box-shadow:var(--shadowSoft);
  border-color:rgba(9,105,195,.22);
  color:var(--primary);
}

.heroVisual{
  position:relative;
  width:100%;
  height:560px;
  display:grid;
  place-items:center;
}
.blobFrame{
  width:min(620px, 100%);
  height:560px;
  border-radius:130px 26px 150px 26px;
  background:#fff;
  box-shadow:var(--shadow);
  overflow:hidden;
  position:relative;
}
.blobFrame:after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:120px 22px 140px 22px;
  border:3px solid rgba(255,160,160,.20);
  pointer-events:none;
}
.blobImg{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 980px){
  .navLinks{display:none;}
  .menuBtn{display:grid;}

  .heroGrid{grid-template-columns:1fr;}
  .heroVisual{order:1; height:420px;}
  .heroText{order:2;}
  .blobFrame{height:420px; border-radius:90px 18px 100px 18px;}
  .blobFrame:after{inset:10px; border-radius:82px 16px 92px 16px;}
}
@media (max-width: 640px){
  .container{width:calc(100% - 26px);}
  .navInner{height:72px;}

  .navActions .btnCute,
  .navActions .btnPrimary{display:none;}

  .hero{padding:36px 0 56px;}
  .heroVisual{height:340px;}
  .blobFrame{height:340px;}

  .searchRow{grid-template-columns:1fr;}
  .sField{border-right:none; border-bottom:1px solid rgba(0,0,0,.10);}
  .searchBtn{height:52px;}
}

/* ===================== CATEGORIES NO SLIDER ===================== */
.catSectionNoSlider{
  padding:90px 0 70px;
  background:#fff;
}

.catTop2{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:28px;
  align-items:start;
  margin-bottom:34px;
}

.catKicker2{
  color: var(--primary);
  font-weight:800;
  font-size:14px;
  margin-bottom:10px;
  display:inline-block;
}

.catTitle2{
  margin:0;
  font-size:46px;
  line-height:1.06;
  letter-spacing:-0.03em;
  font-weight:900;
  color:#111113;
}

.catDesc2{
  margin:30px 0 0;
  color:rgba(17,17,19,.64);
  line-height:1.8;
  font-size:15px;
  max-width:60ch;
}

.catGrid5{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:22px;
  align-items:stretch;
}

.catCard2{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  box-shadow:0 14px 30px rgba(0,0,0,.06);
  padding:18px;
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.catCard2:before{
  content:"";
  position:absolute;
  left:-55px;
  top:-40px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(9,105,195,.10);
}

.catCard2:hover{
  border-color:rgba(9,105,195,.28);
  box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.catIcon2{
  width:64px;
  height:64px;
  border-radius:16px;
  background:rgba(9,105,195,.08);
  border:1px solid rgba(9,105,195,.12);
  display:grid;
  place-items:center;
  flex:0 0 auto;
  position:relative;
  z-index:1;
}
.catIcon2 i{
  font-size:28px;
  color:var(--primary);
}

.catInfo2{ position:relative; z-index:1; }

.catJobs2{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  font-weight:800;
  font-size:12.5px;
  padding:7px 12px;
  border-radius:999px;
  margin-bottom:8px;
}

.catInfo2 h4{
  margin:0;
  font-size:15px;
  font-weight:900;
  color:#111113;
}

.catBottom2{
  display:flex;
  justify-content:flex-end;
  margin-top:26px;
}

.catBtn2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:52px;
  padding:0 28px;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  font-weight:900;
  box-shadow:0 18px 40px rgba(9,105,195,.18);
}
.catBtn2:hover{ filter:brightness(1.03); }

@media (max-width: 1100px){
  .catGrid5{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px){
  .catTop2{ grid-template-columns:1fr; }
  .catDesc2{ margin-top:0; }
}
@media (max-width: 640px){
  .catTitle2{ font-size:34px; }
  .catGrid5{ grid-template-columns: repeat(2, 1fr); gap:16px; }
}
@media (max-width: 420px){
  .catGrid5{ grid-template-columns: 1fr; }
}

/* ===================== FEATURED CITIES ===================== */
.fcSection{
  padding:90px 0;
  background:#fff;
}

.fcHead{
  text-align:center;
  margin-bottom:34px;
}
.fcTitle{
  margin:0;
  font-size:44px;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#111113;
}
.fcSub{
  margin:10px 0 0;
  color:rgba(17,17,19,.60);
  font-weight:600;
}

.fcGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:22px;
  align-items:stretch;
}

.fcCard{
  background:#F4F1EA;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.05);
  display:flex;
  flex-direction:column;
}

.fcImg{
  padding:14px 14px 0;
}
.fcImg img{
  width:100%;
  height:190px;
  object-fit:cover;
  border-radius:18px;
  display:block;
}

.fcBody{
  padding:16px 18px 18px;
}
.fcCity{
  font-weight:900;
  font-size:16px;
  color:#111113;
}
.fcMeta{
  margin-top:6px;
  font-size:12.5px;
  font-weight:700;
  color:rgba(17,17,19,.62);
}

.fcTall .fcImg img{
  height:470px;
}
.fcTall{
  grid-row: span 2;
}

@media (max-width: 1100px){
  .fcGrid{ grid-template-columns: repeat(3, 1fr); }
  .fcTall{ grid-row: span 1; }
  .fcTall .fcImg img{ height:220px; }
}
@media (max-width: 820px){
  .fcGrid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .fcTitle{ font-size:32px; }
  .fcGrid{ grid-template-columns: 1fr; }
}

/* ===================== TALENT / STATS SECTION ===================== */
.talentSection{
  background:#f4f1ea;
  position:relative;
  overflow:hidden;
  padding:110px 0;
}

.talentSection:before{
  content:"";
  position:absolute;
  width:340px; height:340px;
  left:-210px; top:-190px;
  border-radius:50%;
  background:#f2cc78;
  opacity:.95;
}
.talentSection:after{
  content:"";
  position:absolute;
  width:360px; height:360px;
  right:-240px; bottom:-240px;
  border-radius:50%;
  background:#f0a782;
  opacity:.95;
}

.talentWrap{ position:relative; z-index:1; }

.talentGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  align-items:center;
  gap:70px;
}

.talentLeft h2{
  margin:0;
  font-size:44px;
  line-height:1.15;
  letter-spacing:-0.02em;
  font-weight:900;
  color:#111113;
}
.talentLeft p{
  margin:18px 0 0;
  color:rgba(17,17,19,.62);
  line-height:1.8;
  max-width:55ch;
  font-size:15px;
}

.talentBtn{
  margin-top:26px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  height:52px;
  padding:0 26px;
  border-radius:8px;
  background:#1c4a3b;
  color:#fff;
  font-weight:900;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.talentBtn i{ font-size:14px; opacity:.95; }

.talentRight{
  position:relative;
  min-height:360px;
  display:flex;
  justify-content:flex-end;
  gap:26px;
}

.ring{
  position:absolute;
  inset:0;
  margin:auto;
  width:360px;
  height:360px;
  border-radius:50%;
  background:rgba(255,255,255,.40);
  filter: blur(0px);
  z-index:0;
  left:28px;
}

.statCol{
  display:flex;
  flex-direction:column;
  gap:18px;
  z-index:1;
}

.statCard{
  background:#fff;
  border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.10);
  padding:26px 26px;
  border:1px solid rgba(0,0,0,.04);
}

.statSmall{ width:260px; }
.statTall{ width:260px; padding-top:28px; padding-bottom:30px; }

.statBig{
  font-size:46px;
  font-weight:900;
  color:#111113;
  letter-spacing:-0.02em;
}
.statText{
  margin-top:10px;
  color:rgba(17,17,19,.62);
  line-height:1.6;
  font-size:13.8px;
  font-weight:600;
}

.statAward{
  width:270px;
  height:220px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-self:center;
  z-index:1;
}
.awardTitle{
  font-size:44px;
  font-weight:900;
  letter-spacing:-0.02em;
  color:#111113;
}
.awardText{
  margin-top:10px;
  color:rgba(17,17,19,.62);
  font-weight:600;
  line-height:1.7;
  font-size:14px;
}

@media (max-width: 980px){
  .talentGrid{
    grid-template-columns:1fr;
    gap:42px;
  }
  .talentRight{
    justify-content:flex-start;
    min-height:unset;
  }
  .ring{ left:0; right:0; }
}
@media (max-width: 640px){
  .talentSection{ padding:70px 0; }
  .talentLeft h2{ font-size:32px; }

  .talentRight{
    flex-direction:column;
    gap:18px;
  }

  .statSmall, .statTall, .statAward{
    width:100%;
    height:auto;
  }

  .ring{
    width:300px;
    height:300px;
    opacity:.35;
  }
}

/* ===================== HOW IT WORKS (4 TABS) ===================== */
.howWorks4{
  padding:88px 0 90px;
  background:#ffffff;
}

.hw4Title{
  margin:0 0 22px;
  font-size:44px;
  line-height:1.05;
  letter-spacing:-0.03em;
  font-weight:900;
  color:#0b0b0c;
}

.hw4Tabs{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  background:#f3f3f3;
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:10px;
  margin-bottom:22px;
}

.hw4Tab{
  border:none;
  background:transparent;
  border-radius:10px;
  padding:16px 10px;
  cursor:pointer;
  font-weight:900;
  color:#1a1a1a;
  font-size:14px;
  line-height:1.15;
  transition:background .18s ease, transform .18s ease;
}
.hw4Tab:hover{ transform:translateY(-1px); }
.hw4Tab.active{
  background:#06e34f;
  color:#0b0b0c;
}

.hw4Panel{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.06);
  padding:34px;
  display:grid;
  grid-template-columns: 1fr 1.05fr;
  gap:34px;
  align-items:center;
}

.hw4Kicker{
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(17,17,19,.64);
  font-weight:900;
  font-size:12px;
  letter-spacing:.08em;
}
.hw4Flag{
  width:26px; height:26px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.08);
  display:grid; place-items:center;
  background:#fff;
  color:rgba(0,0,0,.65);
}

.hw4H3{
  margin:14px 0 0;
  font-size:40px;
  line-height:1.05;
  letter-spacing:-0.03em;
  font-weight:900;
  color:#0b0b0c;
}
.hw4P{
  margin:14px 0 0;
  color:rgba(17,17,19,.62);
  line-height:1.8;
  font-size:15px;
  max-width:62ch;
}

.hw4Btn{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  height:48px;
  padding:0 18px;
  border-radius:12px;
  background:#0b0b0c;
  color:#fff;
  font-weight:900;
}

.hw4Media{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.10);
  background:#e9e9e9;
}
.hw4Img{
  width:100%;
  height:340px;
  object-fit:cover;
  display:block;
}

.hw4Float{
  position:absolute;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  box-shadow:0 18px 45px rgba(0,0,0,.12);
}
.hw4FloatTop{
  top:18px;
  right:18px;
  width:180px;
  padding:12px;
}
.hw4FloatSmall{ font-size:11px; color:rgba(17,17,19,.55); font-weight:800; }
.hw4FloatBig{ margin-top:4px; font-weight:900; color:#0b0b0c; }
.hw4Spark{
  height:36px;
  margin-top:10px;
  border-radius:10px;
  background:
    linear-gradient(90deg, rgba(6,227,79,.0), rgba(6,227,79,.25)),
    linear-gradient(0deg, rgba(0,0,0,.06) 1px, transparent 1px) 0 0/12px 12px;
}

.hw4FloatBottom{
  left:18px;
  bottom:18px;
  width:300px;
  padding:12px;
}
.hw4UserRow{ display:flex; align-items:center; gap:10px; }
.hw4Avatar{
  width:38px; height:38px;
  border-radius:999px;
  background:linear-gradient(135deg, #cfcfcf, #f0f0f0);
  border:1px solid rgba(0,0,0,.08);
}
.hw4UserMeta{ line-height:1.1; }
.hw4UserName{ font-weight:900; color:#0b0b0c; font-size:13px; }
.hw4UserRole{ color:rgba(17,17,19,.55); font-weight:700; font-size:11.5px; margin-top:4px; }

.hw4In{
  margin-left:auto;
  width:30px; height:30px;
  border-radius:10px;
  display:grid; place-items:center;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  color:#0b66c2;
}

.hw4MetaRow{
  margin-top:10px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color:rgba(17,17,19,.62);
  font-weight:800;
  font-size:11.5px;
}
.hw4MetaRow i{ opacity:.8; margin-right:6px; }

.hw4Badge{
  margin-top:10px;
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(6,227,79,.14);
  color:#0b0b0c;
  font-weight:900;
  font-size:11.5px;
}

@media (max-width: 980px){
  .hw4Tabs{ grid-template-columns:1fr 1fr; }
  .hw4Panel{ grid-template-columns:1fr; }
  .hw4Img{ height:320px; }
}
@media (max-width: 640px){
  .hw4Title{ font-size:32px; }
  .hw4H3{ font-size:30px; }
  .hw4Panel{ padding:18px; }
  .hw4FloatBottom{ width:min(92%, 320px); }
}

/* ===================== CUSTOMER VIDEO FEEDBACK ===================== */
.cvfSection{
  padding:90px 0;
  background:#fff;
}

.cvfGrid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:34px;
  align-items:center;
}

.cvfLeft{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
}

.cvfCard{
  position:relative;
  border:none;
  padding:0;
  cursor:pointer;
  border-radius:18px;
  overflow:hidden;
  background:#000;
  box-shadow:0 22px 60px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.06);
  aspect-ratio: 16 / 10;
}

.cvfThumb{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.03);
}

.cvfOverlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.45));
}

.cvfPlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
.cvfPlay:before{
  content:"";
  width:70px;
  height:70px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  box-shadow:0 20px 60px rgba(0,0,0,.22);
  border:1px solid rgba(0,0,0,.08);
}
.cvfPlay i{
  position:absolute;
  font-size:20px;
  color:#111113;
  margin-left:3px;
}
.cvfCard:hover .cvfPlay:before{
  background:#fff;
  box-shadow:0 26px 80px rgba(0,0,0,.26);
}
.cvfCard:focus-visible{
  outline:3px solid rgba(9,105,195,.35);
  outline-offset:3px;
}

.cvfRight{
  padding:10px 0;
}
.cvfKicker{
  color: var(--primary);
  font-weight:900;
  letter-spacing:.02em;
  margin-bottom:10px;
}
.cvfTitle{
  margin:0;
  font-size:44px;
  line-height:1.08;
  letter-spacing:-0.03em;
  font-weight:900;
  color:#111113;
}
.cvfDesc{
  margin:14px 0 0;
  color:rgba(17,17,19,.62);
  line-height:1.8;
  font-size:15px;
  max-width:60ch;
}

.cvfBtn{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  height:50px;
  padding:0 18px;
  border-radius:12px;
  background:#0b0b0c;
  color:#fff;
  font-weight:900;
}

.cvfHint{
  margin-top:16px;
  display:flex;
  align-items:center;
  gap:10px;
  color:rgba(17,17,19,.55);
  font-weight:800;
  font-size:13px;
}
.cvfHint i{ color:#22c55e; }

.cvfModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.cvfModal.show{ display:block; }

.cvfBackdrop{
  position:absolute;
  inset:0;
  background:rgba(8, 15, 25, .62);
}

.cvfDialog{
  position:relative;
  width:min(980px, calc(100% - 28px));
  margin: min(8vh, 70px) auto 0;
  background:#0b0b0c;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 120px rgba(0,0,0,.35);
}

.cvfClose{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
}

.cvfPlayer{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  background:#000;
}
.cvfPlayer iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

@media (max-width: 980px){
  .cvfGrid{ grid-template-columns:1fr; }
  .cvfTitle{ font-size:38px; }
}
@media (max-width: 640px){
  .cvfSection{ padding:70px 0; }
  .cvfTitle{ font-size:32px; }
  .cvfLeft{ grid-template-columns:1fr; }
  .cvfCard{ aspect-ratio: 16/9; }
}

/* ===================== APP SECTION ===================== */
.appSection{
  background:#f7f1e6;
  padding:100px 0;
  overflow:hidden;
}
.appGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap:56px;
}

.appPill{
  display:inline-flex;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(0,0,0,.06);
  font-weight:800;
  font-size:13px;
  color:rgba(17,17,19,.76);
}
.appTitle{
  margin:18px 0 0;
  font-size:44px;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#111113;
}
.appDesc{
  margin:14px 0 0;
  color:rgba(17,17,19,.62);
  line-height:1.8;
  max-width:58ch;
  font-size:15px;
}
.storeRow{
  display:flex;
  gap:18px;
  margin-top:30px;
  flex-wrap:wrap;
}
.storeBtn{
  display:flex;
  align-items:center;
  gap:14px;
  background:#1f1f1f;
  color:#fff;
  border-radius:12px;
  padding:14px 18px;
  min-width:220px;
  box-shadow:0 18px 40px rgba(0,0,0,.10);
}
.storeIcon{
  width:42px; height:42px;
  border-right:1px solid rgba(255,255,255,.18);
  display:grid;
  place-items:center;
  padding-right:14px;
}
.storeIcon i{ font-size:22px; }
.storeText small{
  display:block;
  opacity:.82;
  font-size:12px;
  line-height:1.1;
}
.storeText strong{
  display:block;
  font-size:16px;
  font-weight:900;
  margin-top:2px;
}

.appRight{
  position:relative;
  min-height:420px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.softBlob{
  position:absolute;
  right:-120px;
  top:50%;
  transform:translateY(-50%);
  width:420px;
  height:420px;
  border-radius:50%;
  background:rgba(255,255,255,.50);
  z-index:0;
}

.phone{
  width:300px;
  height:420px;
  background:#fff;
  border-radius:26px;
  box-shadow:0 30px 80px rgba(0,0,0,.14);
  border:1px solid rgba(0,0,0,.06);
  overflow:hidden;
  position:relative;
  z-index:1;
}
.phoneBack{
  transform:translateX(52px) scale(.98);
  opacity:.98;
}
.phoneFront{
  transform:translateX(0);
  margin-left:-110px;
}

.phoneBar{
  height:46px;
  padding:0 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:800;
  font-size:12.5px;
  color:rgba(17,17,19,.70);
  background:linear-gradient(180deg, rgba(0,0,0,.02), transparent);
}
.phoneIcons{
  display:flex;
  gap:10px;
  font-size:12px;
  opacity:.75;
}

.phoneBody{
  padding:16px;
}
.phoneHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}
.phoneHeader h4{
  margin:0;
  font-size:22px;
  font-weight:900;
  letter-spacing:-0.02em;
}
.phoneHeader i{ opacity:.6; }

.heroCard{
  background:linear-gradient(135deg, #6c3cff, #3aa7ff);
  border-radius:16px;
  padding:14px 14px 12px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.heroCard:after{
  content:"";
  position:absolute;
  right:-60px; top:-60px;
  width:180px; height:180px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
}
.heroMoney{
  font-size:20px;
  font-weight:900;
}
.heroSmall{
  font-size:12px;
  opacity:.9;
  margin-top:2px;
}
.heroTime{
  position:absolute;
  right:12px;
  top:12px;
  font-weight:800;
  font-size:12px;
  opacity:.95;
}
.heroBtns{
  margin-top:12px;
  display:flex;
  gap:10px;
}
.heroChip{
  background:rgba(255,255,255,.22);
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:800;
}

.miniRows{ margin-top:14px; display:grid; gap:12px; }
.miniRow{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px;
  border-radius:14px;
  background:#f7f7fb;
}
.coin{
  width:38px; height:38px;
  border-radius:999px;
  background:rgba(255,120,0,.12);
  display:grid;
  place-items:center;
  color:#ff7a00;
}
.coin.eth{
  background:rgba(90,120,255,.12);
  color:#5073ff;
}
.muted{ color:rgba(17,17,19,.55); font-size:12px; margin-top:2px; }
.spark{
  margin-left:auto;
  width:86px;
  height:26px;
  border-radius:10px;
  background:linear-gradient(90deg, rgba(9,105,195,.15), rgba(9,105,195,.05));
}

.tabs{
  display:flex;
  gap:12px;
  font-size:11px;
  font-weight:800;
  color:rgba(17,17,19,.45);
  overflow:hidden;
  white-space:nowrap;
}
.tab{ padding:6px 0; }
.tab.active{ color:#c54a2f; border-bottom:2px solid #c54a2f; }

.tradeCard{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  border-radius:14px;
  background:#f7f7fb;
}
.tradeLeft{ display:flex; align-items:center; gap:10px; }
.tradeRight{ text-align:right; }
.tradeRight b{ font-size:14px; }

.chart{
  margin-top:14px;
  height:220px;
  border-radius:14px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(0deg, rgba(0,0,0,.06) 1px, transparent 1px) 0 0 / 24px 24px;
}

@media (max-width: 980px){
  .appGrid{ grid-template-columns:1fr; }
  .appRight{ justify-content:center; }
  .phoneFront{ margin-left:-70px; }
}
@media (max-width: 640px){
  .appSection{ padding:70px 0; }
  .appTitle{ font-size:34px; }
  .phone{ width:270px; height:390px; }
  .phoneFront{ margin-left:-50px; }
}

/* ===================== FOOTER ===================== */
.siteFooter{
  background:#1f1f1f;
  color:rgba(255,255,255,.82);
  padding:28px 0 18px;
  position:relative;
}

.footerTopRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding-bottom:18px;
}

.footerTopLinks{
  display:flex;
  gap:26px;
  flex-wrap:wrap;
}
.footerTopLinks a{
  color:rgba(255,255,255,.78);
  font-size:14px;
  font-weight:600;
}

.footerFollow{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:14px;
}
.footerFollow a{ color:#fff; }

.footerDivider{
  height:1px;
  background:rgba(255,255,255,.10);
}

.footerGrid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:42px;
  padding:32px 0;
}

.footerCol h4{
  color:#fff;
  font-size:16px;
  margin-bottom:14px;
}

.footerCol ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}

.footerCol ul a{
  color:rgba(255,255,255,.72);
  font-size:14px;
}

.footerSubscribe{
  display:grid;
  grid-template-columns:1fr auto;
  background:#2a2a2a;
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  overflow:hidden;
}
.footerSubscribe input{
  background:transparent;
  border:none;
  padding:14px;
  color:#fff;
}
.footerSubscribe button{
  background:#2f2f2f;
  border:none;
  padding:0 18px;
  color:#fff;
  font-weight:700;
}

.footerApps{
  display:grid;
  gap:12px;
}
.footerApps a{
  color:rgba(255,255,255,.72);
  font-size:14px;
}

.footerBottomRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:16px;
  gap:16px;
}

.footerCopy{
  font-size:13px;
  color:rgba(255,255,255,.70);
}

.footerSelectors{
  display:flex;
  gap:10px;
}
.footerSelectBtn{
  background:#2a2a2a;
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  padding:10px 12px;
  border-radius:8px;
  font-size:13px;
}

.footerTopBtn{
  position:fixed;
  right:22px;
  bottom:22px;
  width:44px;
  height:44px;
  border-radius:50%;
  background:#2a2a2a;
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
}

@media (max-width: 640px){
  .footerTopRow{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .footerGrid{
    grid-template-columns: repeat(2,1fr);
    gap:22px;
  }

  .footerBottomRow{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
}
// Footer area 

/* ===================== AUTH MODAL (LOGIN/FORGOT) ===================== */
.authModal{
  position:fixed;
  inset:0;
  display:none;
  z-index:10000;
}
.authModal.show{ display:block; }

.authBackdrop{
  position:absolute;
  inset:0;
  background:#111;
}

.authDialog{
  position:relative;
  width:min(980px, calc(100% - 28px));
  margin: min(8vh, 70px) auto 0;
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.30);
}

.authGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height:520px;
}

/* LEFT (theme blue overlay) */
.authLeft{
  position:relative;
  overflow:hidden;
}
.authLeftInner{
  position:absolute;
  top:28px;
  left:28px;
  right:28px;
  z-index:2;
  color:#fff;
}
.authLeftTitle{
  margin:0;
  font-size:34px;
  font-weight:900;
  letter-spacing:-0.02em;
}
.authList{
  margin:18px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
  font-weight:700;
  color:rgba(255,255,255,.92);
}
.authList li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.4;
}
.authList i{
  margin-top:3px;
  font-size:14px;
  opacity:.95;
  color:#fff;
}

.authLeftImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.92;
  filter:contrast(1.05) saturate(.9);
}

/* ✅ overlay color changed to theme blue */
.authLeft:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(9,105,195,.92), rgba(9,105,195,.55));
  z-index:1;
}

/* RIGHT */
.authRight{
  padding:54px 54px 44px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.authTabs{
  display:flex;
  justify-content:center;
  gap:26px;
  margin-bottom:26px;
}
.authTabTitle{
  font-weight:900;
  font-size:42px;
  letter-spacing:.06em;
  color:rgba(0,0,0,.45);
}
.authTabTitle.active{
  color:#111;
}

.authForm{ display:none; }
.authForm.show{ display:block; }

.authField{ margin-top:16px; }
.authField input{
  width:100%;
  height:54px;
  border-radius:6px;
  border:1px solid rgba(0,0,0,.20);
  padding:0 16px;
  font-weight:700;
  outline:none;
}
.authField input:focus{
  border-color:rgba(9,105,195,.55);
  box-shadow:0 0 0 3px rgba(9,105,195,.12);
}

.authLinkBtn{
  margin-top:14px;
  border:none;
  background:transparent;
  color:var(--primary);
  font-weight:900;
  cursor:pointer;
  padding:0;
}

.authBtn{
  margin-top:18px;
  width:100%;
  height:54px;
  border:none;
  border-radius:6px;
  background:var(--primary);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

.authBottom{
  margin-top:18px;
  text-align:center;
  font-weight:700;
  color:rgba(0,0,0,.70);
}
.authInlineLink{
  color:var(--primary);
  font-weight:900;
  text-decoration:none;
}
.authInlineLink:hover{ text-decoration:underline; }

.authHint{
  margin:0 0 6px;
  color:rgba(0,0,0,.60);
  font-weight:700;
  line-height:1.6;
}

.authBackBtn{
  margin-top:14px;
  border:none;
  background:transparent;
  color:rgba(0,0,0,.70);
  font-weight:900;
  cursor:pointer;
  padding:0;
}

/* ✅ Mobile: hide ONLY left panel, keep form visible */
@media (max-width: 860px){
  .authGrid{
    grid-template-columns: 1fr;   /* single column */
    min-height:auto;
  }

  .authLeft{
    display:none;                /* hide left image+text */
  }

  .authRight{
    padding:34px 22px 28px;      /* adjust spacing */
  }

  .authDialog{
    margin: 70px auto 0;
  }
}

}

/*register page */

/* ===================== SIGNUP CHOOSER (2 BOXES) ===================== */
.signupChooser{
  display:grid;
  gap:14px;
  margin:18px 0 6px;
}

.signupChoiceCard{
  border:none;
  cursor:pointer;
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:0 16px 40px rgba(0,0,0,.06);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.signupChoiceCard:hover{
  border-color: rgba(9,105,195,.28);
  box-shadow:0 22px 55px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.scIcon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(9,105,195,.10);
  border:1px solid rgba(9,105,195,.14);
  color:#0969C3;
  flex: 0 0 auto;
}

.scText b{
  display:block;
  font-weight:900;
  color:#111113;
  letter-spacing:-0.01em;
}
.scText small{
  display:block;
  margin-top:4px;
  color:rgba(17,17,19,.60);
  font-weight:700;
}

.scArrow{
  margin-left:auto;
  color:rgba(17,17,19,.55);
}

/* optional: back row */
.authFormTop{
  display:flex;
  justify-content:flex-start;
  margin-bottom:10px;
}

/* ✅ Keep your existing mobile hide rule (left panel hide) */
@media (max-width: 860px){
  .authGrid{ grid-template-columns: 1fr; }
  .authLeft{ display:none; }
  .authRight{ padding:34px 22px 28px; }
  .authDialog{ margin: 70px auto 0; }
}

/* our team page * /
/* ===================== OUR TEAM (LIKE IMAGE) ===================== */
.teamSection{
  padding:90px 0;
  background:#fff;
}

.teamHead{
  text-align:center;
  margin-bottom:36px;
}

.teamTitle{
  margin:0;
  font-size:44px;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#111113;
}

.teamSub{
  margin:10px 0 0;
  color:rgba(17,17,19,.60);
  font-weight:600;
}

.teamStage{
  position:relative;
  padding:10px 0 0;
}

/* Orange bar behind cards (like screenshot) */
.teamBar{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width:100vw;                 /* full screen width */
  top:138px;                   /* position same feel */
  height:44px;                 /* smaller & cute */
  background:#0969C3;          /* eJobs theme blue */
  opacity:.18;                 /* soft / elegant */
  z-index:0;
}

/* Grids */
.teamGrid{
  position:relative;
  z-index:1;
  display:grid;
  gap:28px;
}

.teamGridTop{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width:980px;
  margin:0 auto 46px;
}

.teamGridBottom{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Card */
.teamCard{
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.10);
  border:1px solid rgba(0,0,0,.06);
  text-align:center;
}

/* Image */
.teamImg{
  padding:14px 14px 0;
}

.teamImg img{
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:18px;
  display:block;
}

/* Text */
.teamBody{
  padding:16px 16px 18px;
}

.teamName{
  margin:0;
  font-size:16px;
  font-weight:900;
  color:#111113;
}

.teamRole{
  margin:6px 0 0;
  font-size:13px;
  font-weight:700;
  color:rgba(17,17,19,.58);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1100px){
  .teamGridBottom{ grid-template-columns: repeat(2, 1fr); }
  .teamBar{ top:120px; height:54px; }
}
@media (max-width: 780px){
  .teamTitle{ font-size:34px; }
  .teamGridTop{ grid-template-columns:1fr; }
  .teamGridBottom{ grid-template-columns:1fr; }
  .teamBar{ display:none; } /* mobile clean */
  .teamImg img{ height:260px; }
}


/* about us */
/* HERO */
.aboutHeroImg{
  height:260px;
  background:url("https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?auto=format&fit=crop&w=1600&q=80") center/cover;
  border-radius:14px;
  margin:30px;
}
.aboutHeroOverlay{
  height:100%;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
}
.aboutHeroOverlay h1{
  color:#fff;
  font-size:36px;
  font-weight:900;
}
.aboutHeroOverlay p{
  color:#eaeaea;
  margin-top:6px;
}

/* INTRO */
.aboutIntroSame{ padding:90px 0; }
.aboutIntroGrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
.aboutIntroImages{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.aboutIntroImages img{
  width:100%;
  border-radius:18px;
}
.aboutIntroText h2{
  font-size:38px;
  font-weight:900;
}
.aboutIntroText ul{
  margin:18px 0;
  padding:0;
  list-style:none;
}
.aboutBtnBlue{
  display:inline-block;
  background:#0969C3;
  color:#fff;
  padding:14px 24px;
  border-radius:10px;
  font-weight:800;
}

/* STATS */
.aboutStatsRow{
  border-top:1px solid #eee;
  padding:50px 0;
}
.statsRow{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
}
.statsRow h3{
  color:#0969C3;
  font-size:30px;
}

/* FEATURES */
.aboutFeatureSame{ padding:90px 0; }
.featureGridSame{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
.featureItemSame{
  display:flex;
  gap:14px;
  margin-top:20px;
}
.featureItemSame i{ color:#0969C3; font-size:22px; }
.featureImgSame img{
  width:100%;
  border-radius:22px;
}

/* CTA */
.aboutCtaSame{
  background:#f4f1ea;
  padding:90px 0;
}
.ctaGridSame{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
}
.ctaCardsSame{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}
.ctaCardSame{
  background:#fff;
  padding:26px;
  border-radius:16px;
}
.ctaBtnGreen{
  background:#1c4a3b;
  color:#fff;
  padding:14px 26px;
  border-radius:10px;
  display:inline-block;
  font-weight:800;
}

/* RESPONSIVE */
@media(max-width:900px){
  .aboutIntroGrid,
  .featureGridSame,
  .ctaGridSame{
    grid-template-columns:1fr;
  }
  .statsRow{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }
}
/* pricing page */ 
:root{
  --primary:#0969C3;
}

/* container (if not already) */
.container{
  width:min(1440px, calc(100% - 56px));
  margin:0 auto;
}

/* ===== Top Banner like screenshot ===== */
.pageHeroImg{
  height:230px;
  margin:30px;
  border-radius:16px;
  overflow:hidden;
  background:url("https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=1600&q=80") center/cover;
}
.pageHeroOverlay{
  height:100%;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
}
.pageHeroOverlay h1{
  margin:0;
  color:#fff;
  font-size:34px;
  font-weight:900;
}
.pageHeroOverlay p{
  margin:6px 0 0;
  color:rgba(255,255,255,.85);
  font-weight:600;
  font-size:13px;
}

/* ===== Pricing ===== */
.pricingSection{
  background:#fff;
  padding:80px 0 110px;
}
.pricingGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  align-items:stretch;
}

/* card */
.priceCard{
  position:relative;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 26px 70px rgba(0,0,0,.08);
  padding:26px 26px 22px;
  overflow:hidden;
}

/* top half circle */
.priceCircle{
  position:absolute;
  width:260px;
  height:260px;
  border-radius:50%;
  top:-140px;
  left:-90px;
  opacity:.85;
}
.priceCircleBlue{ background:rgba(9,105,195,.10); }
.priceCircleCream{ background:rgba(255, 215, 140, .28); }
.priceCircleViolet{ background:rgba(180, 120, 255, .16); }

/* recommended badge */
.priceBadge{
  position:absolute;
  top:18px;
  right:18px;
  background:#22c55e;
  color:#fff;
  font-weight:900;
  font-size:12px;
  padding:7px 12px;
  border-radius:8px;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}

/* text */
.priceTop{ position:relative; z-index:1; }
.pricePlan{
  color:var(--primary);
  font-weight:900;
  font-size:18px;
}
.priceRow{
  margin-top:8px;
  display:flex;
  align-items:baseline;
  gap:10px;
}
.priceMoney{
  font-weight:900;
  font-size:42px;
  letter-spacing:-0.02em;
  color:#0b0b0c;
}
.priceCycle{
  font-weight:800;
  color:rgba(17,17,19,.72);
}

/* list */
.priceList{
  margin:22px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:12px;
  position:relative;
  z-index:1;
}
.priceList li{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:14px;
}
.priceList li i{ width:18px; }
.priceList .ok{ color:#0b0b0c; }
.priceList .ok i{ color:var(--primary); }
.priceList .no{ color:rgba(17,17,19,.40); }
.priceList .no i{ color:rgba(17,17,19,.35); }

/* button */
.priceBtn{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:48px;
  width:100%;
  border-radius:12px;
  background:var(--primary);
  color:#fff;
  font-weight:900;
  box-shadow:0 18px 45px rgba(9,105,195,.20);
}

/* responsive */
@media (max-width: 980px){
  .pricingGrid{ grid-template-columns:1fr; }
  .pageHeroImg{ margin:18px; }
}
/* ================= ABOUT PAGE ================= */
.aboutHero{
  padding:90px 0 70px;
  background:
    linear-gradient(180deg, rgba(9,105,195,.12), transparent),
    url("https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?auto=format&fit=crop&w=1600&q=80") center/cover;
}
.aboutHeroBox{
  background:#fff;
  padding:40px;
  border-radius:18px;
  max-width:720px;
}
.aboutHero h1{
  margin:0;
  font-size:44px;
  font-weight:900;
}
.aboutHero p{
  margin-top:10px;
  color:#555;
}

/* intro */
.aboutIntro{ padding:90px 0; background:#fff; }
.aboutGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:center;
}
.aboutImages{
  display:grid;
  grid-template-columns: 1fr;
  gap:20px;
}
.aboutImages img{
  width:100%;
  border-radius:20px;
}
.aboutText h2{
  font-size:40px;
  font-weight:900;
}
.aboutList{
  margin:20px 0;
  padding:0;
  list-style:none;
}
.aboutList li{
  margin-bottom:10px;
  font-weight:600;
}
.aboutList i{ color:#0969C3; margin-right:8px; }
.aboutBtn{
  display:inline-block;
  margin-top:18px;
  background:#0969C3;
  color:#fff;
  padding:14px 26px;
  border-radius:10px;
  font-weight:800;
}

/* stats */
.aboutStats{
  background:#f6f9fc;
  padding:70px 0;
}
.statsGrid{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:24px;
  text-align:center;
}
.statBox h3{
  font-size:32px;
  color:#0969C3;
  margin:0;
}
.statBox p{ margin-top:6px; }

/* features */
.aboutFeatures{ padding:90px 0; background:#fff; }
.featureGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:center;
}
.featureItem{
  display:flex;
  gap:16px;
  margin-top:20px;
}
.featureItem i{
  font-size:22px;
  color:#0969C3;
}
.featureImage img{
  width:100%;
  border-radius:22px;
}

/* CTA */
.aboutCTA{
  background:#f4f1ea;
  padding:90px 0;
}
.ctaGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:center;
}
.ctaBtn{
  display:inline-block;
  margin-top:18px;
  background:#1c4a3b;
  color:#fff;
  padding:14px 26px;
  border-radius:10px;
  font-weight:800;
}
.ctaRight{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:20px;
}
.ctaCard{
  background:#fff;
  padding:26px;
  border-radius:16px;
  text-align:center;
}

/* responsive */
@media (max-width: 900px){
  .aboutGrid,
  .featureGrid,
  .ctaGrid{
    grid-template-columns:1fr;
  }
  .statsGrid{
    grid-template-columns: repeat(2,1fr);
  }
}
.tstSection{
  padding:90px 0;
  background:#fff;
}

.tstWrap{
  width:min(980px, calc(100% - 28px));
  margin:0 auto;
  text-align:center;
}

.tstTitle{
  font-size:28px;
  font-weight:800;
}

.tstSub{
  margin-top:6px;
  font-size:12.5px;
  color:#6b7280;
}

.tstQuoteIcon{
  margin:22px auto 0;
  font-size:44px;
  font-weight:900;
  color:#22c55e;
}

.tstQuote{
  margin:16px auto 0;
  max-width:78ch;
  font-size:16px;
  line-height:1.9;
  font-weight:700;
}

.tstAuthor{
  margin-top:22px;
}

.tstName{
  font-size:13px;
  font-weight:700;
}

.tstRole{
  margin-top:6px;
  font-size:11px;
  color:#6b7280;
}

/* Avatars */
.tstAvatars{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:12px;
}

.tstAvatar{
  width:44px;
  height:44px;
  border-radius:50%;
  background:none;
  border:none;
  cursor:pointer;
  position:relative;
}

.tstAvatar img{
  width:44px;
  height:44px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 8px 18px rgba(0,0,0,.15);
}

.tstAvatar.active::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:3px solid #22c55e;
}

@media(max-width:640px){
  .tstSection{ padding:70px 0; }
  .tstQuote{ font-size:15px; }
}
/* contact us page */ 
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ===== HERO WRAP ===== */
.ctHero{
  padding:26px 0 40px;
  background:#;
  margin-top:100px;
}

.ctHeroInner{
  width:min(1200px, calc(100% - 44px));
  margin:0 auto;
  position:relative;
}

.ctHeroTop{
  background:var(--hero);
  border-radius:14px;
  min-height:160px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
}

/* blobs like screenshot corners */
.ctHeroTop::before{
  content:"";
  position:absolute;
  left:-130px;
  top:-120px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:var(--heroSoft);
}
.ctHeroTop::after{
  content:"";
  position:absolute;
  right:-140px;
  bottom:-140px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:var(--heroSoft2);
}

.ctHeroText{
  position:relative;
  z-index:1;
  padding:44px 54px;
  color:#fff;
}
.ctHeroText h1{
  margin:0;
  font-size:26px;
  font-weight:800;
  letter-spacing:-0.02em;
}
.ctHeroText p{
  margin:8px 0 0;
  opacity:.9;
  font-weight:500;
  font-size:12.8px;
}

/* ===== MAIN GRID (info + form card) ===== */
.ctMain{
  display:grid;
  grid-template-columns: 1fr 520px;
  gap:34px;
  align-items:start;
  margin-top:-54px; /* overlap on banner like screenshot */
  padding:0 22px;
}

/* Left info */
.ctInfo{
  padding:70px 12px 0;
}
.ctInfo h3{
  margin:0;
  font-size:14px;
  font-weight:800;
  letter-spacing:-0.01em;
}
.ctInfo p{
  margin:12px 0 0;
  color:rgba(17,17,19,.60);
  line-height:1.75;
  font-size:12.8px;
  max-width:52ch;
}

.ctInfoList{
  margin-top:22px;
  display:grid;
  gap:18px;
}
.ctInfoItem{
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.ctIcon{
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(84,178,122,.14);
  display:grid;
  place-items:center;
  color:var(--hero);
  border:1px solid rgba(0,0,0,.06);
}
.ctLabel{
  font-weight:800;
  font-size:12px;
  margin-bottom:4px;
}
.ctValue{
  color:rgba(17,17,19,.60);
  font-size:12.5px;
  line-height:1.55;
}

/* Right form card */
.ctFormCard{
  background:var(--card);
  border-radius:10px;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.10);
  padding:26px;
}
.ctFormCard h3{
  margin:0;
  font-size:14px;
  font-weight:800;
}
.ctFormSub{
  margin:10px 0 0;
  color:rgba(17,17,19,.55);
  font-size:12.5px;
  line-height:1.6;
}

.ctForm{
  margin-top:18px;
}
.ctRow2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.ctField label{
  display:block;
  font-size:11px;
  font-weight:700;
  color:rgba(17,17,19,.55);
  margin-bottom:8px;
}
.ctField input,
.ctField textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:8px;
  padding:12px 12px;
  outline:none;
  font-family:inherit;
  font-size:13px;
  background:#fff;
}
.ctField textarea{
  min-height:150px;
  resize:vertical;
}
.ctField input:focus,
.ctField textarea:focus{
  border-color:rgba(84,178,122,.55);
  box-shadow:0 0 0 3px rgba(84,178,122,.12);
}

.ctBtn{
  margin-top:16px;
  height:44px;
  padding:0 18px;
  border:none;
  border-radius:4px;
  background:var(--btn);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  box-shadow:0 16px 34px rgba(84,178,122,.22);
}
.ctBtn:hover{ background:var(--btnHover); }

/* ===== MAP ===== */
.ctMap{
  margin-top:20px;
  height:320px;
  width:100%;
}
.ctMap iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* ===== FAQ ===== */
.ctFaq{
  padding:70px 0 90px;
  background:#fff;
}
.ctFaqInner{
  width:min(980px, calc(100% - 44px));
  margin:0 auto;
  text-align:center;
}
.ctFaqInner h2{
  margin:0;
  font-size:22px;
  font-weight:800;
}
.ctFaqSub{
  margin:10px 0 0;
  color:rgba(17,17,19,.55);
  font-size:12.5px;
}

.ctFaqList{
  margin-top:30px;
  text-align:left;
  max-width:680px;
  margin-left:auto;
  margin-right:auto;
  display:grid;
  gap:12px;
}

.faqItem{
  border-bottom:1px solid rgba(0,0,0,.08);
  padding:14px 0;
}
.faqQ{
  width:100%;
  border:none;
  background:transparent;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  font-weight:700;
  font-size:12.8px;
}
.faqIcon{
  font-weight:800;
  font-size:18px;
  line-height:1;
  color:rgba(17,17,19,.70);
  width:22px;
  text-align:center;
}
.faqA{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
  color:rgba(17,17,19,.58);
  font-size:12.5px;
  line-height:1.7;
  padding-right:32px;
}
.faqItem.open .faqA{
  max-height:220px;
  margin-top:10px;
}
.faqItem.open .faqIcon{ content:""; }
.faqItem.open .faqIcon{ color:var(--btn); }
.faqItem.open .faqIcon::before{ content:"−"; }


/* ===== Responsive ===== */
@media (max-width: 980px){
  .ctMain{
    grid-template-columns:1fr;
    margin-top:16px;
    padding:0;
  }
  .ctInfo{
    padding:18px 6px 0;
  }
  .ctFormCard{
    width:100%;
  }
}

@media (max-width: 640px){
  .ctHeroInner{ width:calc(100% - 22px); }
  .ctHeroText{ padding:34px 22px; }
  .ctHeroTop{ min-height:140px; }
  .ctRow2{ grid-template-columns:1fr; }
  .ctMap{ height:260px; }
}