/* BOOTIES Recruitment — Variant B: premium blue-grey with geometric line accents */
:root{
  --vb-bg:#e9eef5;
  --vb-bg-2:#f1f4f8;
  --vb-panel:#f8fafc;
  --vb-line:rgba(21,64,108,.11);
  --vb-line-strong:rgba(17,119,238,.22);
  --vb-blue:#1177ee;
  --vb-navy:#13233a;
}

html{background:var(--vb-bg)}
body{
  background:
    radial-gradient(1100px 560px at 87% 0%,rgba(17,119,238,.12),transparent 58%),
    linear-gradient(180deg,#edf2f8 0%,#e8edf4 44%,#eef2f7 100%);
}

body:before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:.72;
  background-image:
    linear-gradient(118deg,transparent 0 21%,rgba(17,119,238,.045) 21% 21.1%,transparent 21.1% 42%,rgba(19,35,58,.035) 42% 42.08%,transparent 42.08% 100%),
    linear-gradient(28deg,transparent 0 67%,rgba(17,119,238,.036) 67% 67.1%,transparent 67.1% 100%);
  background-size:820px 820px,700px 700px;
  background-position:right -120px top 60px,left -120px top 300px;
}

body:after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(19,35,58,.02) 1px,transparent 1px),
    linear-gradient(90deg,rgba(19,35,58,.018) 1px,transparent 1px);
  background-size:96px 96px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.68),transparent 82%);
}

.site-header{
  background:rgba(239,244,250,.92);
  border-bottom:1px solid rgba(19,35,58,.10);
  box-shadow:0 8px 24px rgba(25,54,89,.04);
}
.brand-logo{width:220px}
.lang-switch{background:rgba(255,255,255,.72);border-color:rgba(19,35,58,.10)}

.hero{
  background:linear-gradient(90deg,rgba(239,244,250,.98) 0%,rgba(235,241,248,.96) 48%,rgba(225,235,247,.93) 100%);
  border-bottom:1px solid rgba(19,35,58,.08);
  padding:62px 0 70px;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(130deg,transparent 0 57%,rgba(17,119,238,.055) 57% 57.14%,transparent 57.14% 100%),
    linear-gradient(130deg,transparent 0 68%,rgba(19,35,58,.045) 68% 68.1%,transparent 68.1% 100%);
}
.hero:after{
  width:620px;
  height:620px;
  right:-220px;
  top:-210px;
  background:rgba(17,119,238,.08);
}
.hero-grid{
  grid-template-columns:minmax(0,1.05fr) minmax(500px,.95fr);
  gap:52px;
  align-items:center;
}
.hero-copy{padding:20px 0;max-width:640px}
.hero h1{font-size:clamp(56px,6vw,88px);max-width:640px;line-height:.94}
.hero p{max-width:620px}
.hero-media{min-height:540px}
.hero-grid:after{
  content:"";
  position:absolute;
  right:1%;
  bottom:-18px;
  width:40%;
  height:100px;
  border-right:1px solid rgba(17,119,238,.14);
  border-bottom:1px solid rgba(17,119,238,.14);
  transform:skewX(-18deg);
  pointer-events:none;
}
.hero-trust{margin-top:34px}
.hero-trust>span{
  background:rgba(248,251,255,.78);
  border-color:rgba(19,35,58,.10);
  box-shadow:0 10px 25px rgba(25,54,89,.04);
}
.hero-photo{box-shadow:0 26px 62px rgba(25,54,89,.18);border-color:rgba(249,252,255,.94)}
.hero-badge{background:rgba(247,250,253,.93);border-color:rgba(19,35,58,.08)}

section{padding:68px 0}
.jobs-section{
  position:relative;
  background:linear-gradient(180deg,#e6ecf3 0%,#edf2f7 100%);
  border-top:1px solid rgba(19,35,58,.06);
  border-bottom:1px solid rgba(19,35,58,.08);
  overflow:hidden;
  padding-bottom:52px;
}
.jobs-section:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0 11%,rgba(19,35,58,.036) 11% 11.06%,transparent 11.06% 36%,rgba(17,119,238,.042) 36% 36.09%,transparent 36.09% 100%),
    linear-gradient(25deg,transparent 0 74%,rgba(17,119,238,.034) 74% 74.09%,transparent 74.09% 100%);
}
.jobs-section .wrap{position:relative;z-index:2}
.section-head{margin-bottom:24px}
.jobs{gap:20px;align-items:start}
.job{
  border-color:rgba(19,35,58,.11);
  box-shadow:0 18px 48px rgba(31,59,92,.09);
}
.job:hover{box-shadow:0 24px 58px rgba(31,59,92,.14);border-color:rgba(17,119,238,.24)}
.job:nth-child(5):last-child{grid-column:1/-1;max-width:calc(50% - 10px);justify-self:center;width:100%}
.job-content{background:linear-gradient(180deg,#fff 0%,#fbfcfe 100%)}
.fact{background:#f3f6fa;border-color:#dce3eb}
.job-image{background:linear-gradient(145deg,#edf3f9,#e4ecf5)}
.job-image:before{opacity:.48}
.job-image:after{opacity:.34}

.culture-section{
  position:relative;
  background:linear-gradient(180deg,#edf2f7 0%,#e8edf4 100%);
  overflow:hidden;
  padding-top:54px;
  padding-bottom:58px;
}
.culture-section:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,transparent 0 63%,rgba(17,119,238,.038) 63% 63.09%,transparent 63.09% 100%),
    linear-gradient(135deg,transparent 0 75%,rgba(19,35,58,.03) 75% 75.08%,transparent 75.08% 100%);
}
.culture-grid{position:relative;z-index:2;gap:42px}
.culture-photo{height:500px;border:1px solid rgba(19,35,58,.09);box-shadow:0 26px 70px rgba(31,59,92,.13)}
.culture-copy{
  background:rgba(248,250,253,.92);
  border:1px solid rgba(19,35,58,.08);
  border-left:3px solid var(--vb-blue);
  border-radius:20px;
  padding:30px 32px;
  box-shadow:0 18px 42px rgba(31,59,92,.07);
}
.point{border-color:rgba(19,35,58,.10)}

.final-cta{
  position:relative;
  background:linear-gradient(180deg,#e8edf4 0%,#e3e9f1 100%);
  overflow:hidden;
  padding-top:28px;
  padding-bottom:58px;
}
.final-cta:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,transparent 0 23%,rgba(17,119,238,.04) 23% 23.1%,transparent 23.1% 100%),
    linear-gradient(120deg,transparent 0 32%,rgba(19,35,58,.03) 32% 32.08%,transparent 32.08% 100%);
}
.final-cta-inner{
  position:relative;
  z-index:2;
  background:linear-gradient(135deg,rgba(246,250,255,.94),rgba(231,240,250,.94));
  border-color:rgba(17,119,238,.16);
  box-shadow:0 18px 45px rgba(31,59,92,.08);
}

footer{
  background:#dfe6ee;
  border-top:1px solid rgba(19,35,58,.10);
}
.foot{min-height:108px}

@media(max-width:980px){
  .brand-logo{width:190px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-copy{max-width:none}
  .hero-media{min-height:500px}
  .job:nth-child(5):last-child{grid-column:auto;max-width:none}
  .culture-grid{gap:28px}
}

@media(max-width:680px){
  body:before{background-size:460px 460px,420px 420px;opacity:.5}
  body:after{background-size:64px 64px;opacity:.6}
  .hero-grid:after{display:none}
  .jobs-section:before,.culture-section:before,.final-cta:before{opacity:.45}
  .brand-logo{width:165px}
  .hero{padding:46px 0 52px}
  .hero h1{font-size:46px;max-width:none}
  .hero-media{min-height:420px}
  .culture-photo{height:380px}
  .culture-copy{padding:24px 22px}
  .final-cta{padding-bottom:48px}
}