:root{
  --o-navy:#0b3c5d;
  --o-navy-dark:#082a42;
  --o-navy-soft:#e8f0f6;

  --o-grey-1:#f7f8fa;
  --o-grey-2:#e5e7eb;
  --o-grey-3:#6b7280;

  --o-text:#111827;
  --o-white:#ffffff;

  --o-radius:20px;
  --o-shadow:0 18px 45px rgba(0,0,0,.08);
  --o-shadow-soft:0 10px 25px rgba(0,0,0,.06);

  --o-ease:cubic-bezier(.2,.8,.2,1);
}

.o-hero .container,
.o-section .container{
  width:min(1120px, calc(100% - 40px));
  margin-inline:auto;
}


.o-hero{
  position:relative;
  padding: 84px 0 56px;
  color:#fff;
  overflow:hidden;

  background:
    linear-gradient(110deg, rgba(3,7,18,.78), rgba(3,7,18,.35)),
    url("./outsourcing-hero.jpg");
  background-size:cover;
  background-position:center;
}

.o-hero::before{
  content:"";
  position:absolute;
  width: 560px;
  height: 560px;
  left: -220px;
  top: -260px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), transparent 60%);
  pointer-events:none;
}
.o-hero::after{
  content:"";
  position:absolute;
  width: 520px;
  height: 520px;
  right: -220px;
  bottom: -260px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}

.o-hero-inner{
  position:relative;
  z-index:1;
  max-width: 760px;
}


.o-hero-badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  font-weight:900;
  letter-spacing:.6px;
  font-size:12.5px;
  margin-bottom:14px;

  opacity:0;
  transform: translateY(10px);
  animation: oInUp .7s var(--o-ease) forwards;
}

.o-title{
  margin:0 0 14px;
  font-size:clamp(34px,5vw,58px);
  font-weight:950;
  letter-spacing:-0.6px;
  line-height:1.05;
  max-width: 20ch;

  opacity:0;
  transform: translateY(14px);
  animation: oInUp .8s var(--o-ease) .05s forwards;
}

.o-sub{
  margin:0;
  max-width: 72ch;
  line-height:1.85;
  color:rgba(255,255,255,.90);
  font-size:16.5px;

  opacity:0;
  transform: translateY(14px);
  animation: oInUp .8s var(--o-ease) .12s forwards;
}

.o-hero-actions{
  margin-top:22px;
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;

  opacity:0;
  transform: translateY(12px);
  animation: oInUp .8s var(--o-ease) .18s forwards;
}

.o-hero .o-btn,
.o-section .o-btn{
  text-decoration:none;
  padding:13px 18px;
  border-radius:12px;
  font-weight:900;
  font-size:14px;
  transition: transform .2s var(--o-ease), background .2s var(--o-ease), box-shadow .2s var(--o-ease);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  user-select:none;
}

.o-hero .o-btn-primary,
.o-section .o-btn-primary{
  background:var(--o-navy);
  color:#fff;
  box-shadow:0 14px 30px rgba(11,60,93,.35);
}

.o-hero .o-btn-primary:hover,
.o-section .o-btn-primary:hover{
  background:var(--o-navy-dark);
  transform: translateY(-2px);
  box-shadow:0 18px 40px rgba(11,60,93,.42);
}

.o-hero .o-btn-primary:active,
.o-section .o-btn-primary:active{
  transform: translateY(0px);
}

.o-hero .o-btn-ghost{
  color:#ffffff;
  font-weight:900;
  opacity:.92;
  padding: 10px 6px;
}
.o-hero .o-btn-ghost:hover{
  opacity:1;
  text-decoration: underline;
}

.o-hero-stats{
  margin-top:28px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;

  opacity:0;
  transform: translateY(12px);
  animation: oInUp .8s var(--o-ease) .24s forwards;
}

.o-stat{
  min-width: 190px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

.o-stat-num{
  font-size: 22px;
  font-weight: 950;
  line-height: 1.1;
}

.o-stat-label{
  font-size: 13.5px;
  margin-top: 4px;
  color: rgba(255,255,255,.86);
  line-height: 1.35;
}


.o-section{
  padding: 62px 0;
  background: #fff;
  color: var(--o-text);
}

.o-section-soft{
  background: var(--o-grey-1);
}

.o-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
  align-items: start; 
}


.o-title-row{
  margin-bottom: 18px;
}
.o-title-row h2{
  margin:0 0 8px;
  font-size: 28px;
  letter-spacing: -0.3px;
  color: var(--o-navy);
}
.o-muted{
  margin:0;
  color: var(--o-grey-3);
  line-height: 1.85;
}

.o-card{
  background:#fff;
  border-radius: var(--o-radius);
  padding: 24px;
  border: 1px solid var(--o-grey-2);
  box-shadow: var(--o-shadow-soft);
}

.o-card h2{
  margin:0 0 12px;
  font-size: 24px;
  color: var(--o-navy);
  letter-spacing: -0.2px;
}

.o-card p{
  margin: 10px 0;
  line-height: 1.9;
  color: #374151;
}

.o-highlight{
  margin-top: 16px;
  padding: 16px;
  border-left: 5px solid var(--o-navy);
  background: var(--o-navy-soft);
  border-radius: 14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.o-highlight i{
  color: var(--o-navy);
  margin-top: 2px;
}

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

.o-list li{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:#374151;
  line-height: 1.7;
}

.o-list i{
  color: var(--o-navy);
  margin-top: 4px;
}

.o-card.quality-card{
  padding: 26px 26px 22px;
  border-radius: 18px;
  border: 1px solid var(--o-grey-2);
  box-shadow: var(--o-shadow-soft);
  position: relative;
  overflow: hidden;

  min-height: auto !important;
  height: auto !important;
}

.o-card.quality-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:6px;
  background: var(--o-navy);
  opacity:.85;
}

.o-card.quality-card h2,
.o-card.quality-card h3{
  margin: 0 0 12px;
  color: var(--o-navy);
  letter-spacing: -0.25px;
  font-size: 26px;
  line-height: 1.2;
}

.o-card.quality-card ul{
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  gap: 12px;
}

.o-card.quality-card li{
  display:flex;
  align-items:flex-start;
  gap: 12px;
  color: #334155;
  line-height: 1.6;
  font-size: 15.5px;
}

.o-card.quality-card li i,
.o-card.quality-card li .tick,
.o-card.quality-card li svg{
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--o-navy);
  font-size: 16px;
}

.o-card.quality-card li::before{
  content:"✓";
  color: var(--o-navy);
  font-weight: 950;
  margin-top: 1px;
}

.o-card.quality-card p{
  margin: 10px 0 0;
  color: #475569;
  line-height: 1.85;
  font-size: 15.5px;
  max-width: 75ch;
}

.o-card.quality-card:hover{
  transform: translateY(-2px);
  transition: transform .2s var(--o-ease), box-shadow .2s var(--o-ease);
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
}

.o-card.quality-card.reveal{
  opacity:0;
  transform: translateY(16px);
  transition: opacity .7s var(--o-ease), transform .7s var(--o-ease);
}
.o-card.quality-card.reveal.in-view{
  opacity:1;
  transform: translateY(0);
}


.o-steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
}

.o-step{
  background:#fff;
  border-radius: var(--o-radius);
  padding: 20px;
  border: 1px solid var(--o-grey-2);
  box-shadow: var(--o-shadow-soft);
  transition: transform .2s var(--o-ease), box-shadow .2s var(--o-ease);
}

.o-step:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 45px rgba(0,0,0,.10);
}

.o-step-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 8px;
}

.o-step-num{
  width:36px;
  height:36px;
  border-radius:10px;
  background: var(--o-navy);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight: 950;
}

.o-step h3{
  margin:0;
  font-size: 16px;
  color: var(--o-navy);
}

.o-step p{
  margin:0;
  line-height: 1.85;
  color: #4b5563;
}

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

.o-service{
  background:#fff;
  border-radius: var(--o-radius);
  padding: 22px;
  border: 1px solid var(--o-grey-2);
  box-shadow: var(--o-shadow-soft);
  transition: transform .2s var(--o-ease), box-shadow .2s var(--o-ease);
}

.o-ico{
  width:48px;
  height:48px;
  border-radius:14px;
  background: var(--o-navy-soft);
  color: var(--o-navy);
  display:grid;
  place-items:center;
  margin-bottom: 12px;
}

.o-service h3{
  margin:0 0 8px;
  color: var(--o-navy);
}

.o-service p{
  margin:0 0 10px;
  color: #4b5563;
  line-height: 1.85;
}

.o-service ul{
  margin:0;
  padding-left: 18px;
  color:#4b5563;
  line-height: 1.85;
}


.o-models{
  display:grid;
  gap:12px;
}
.o-model{
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--o-grey-2);
  background:#fff;
  box-shadow: var(--o-shadow-soft);
}
.o-model h3{margin:0 0 8px; color: var(--o-navy)}
.o-model p{margin:0; color:#4b5563; line-height:1.85}
.o-chip{
  display:inline-block;
  margin-top:10px;
  padding:6px 10px;
  border-radius: 999px;
  font-size:12px;
  font-weight: 950;
  color: var(--o-navy);
  background: var(--o-navy-soft);
  border: 1px solid rgba(11,60,93,.25);
}


.o-faq{
  display:grid;
  gap:14px;
  margin-top: 14px;
}

.o-faq-item{
  background:#fff;
  border-radius: 16px;
  border: 1px solid var(--o-grey-2);
  padding: 14px 16px;
  box-shadow: var(--o-shadow-soft);
}

.o-faq-item summary{
  cursor:pointer;
  font-weight: 950;
  color: var(--o-navy);
}

.o-faq-item p{
  margin: 10px 0 0;
  color:#4b5563;
  line-height: 1.9;
}


.o-cta{
  margin-top:26px;
  padding:24px;
  border-radius: var(--o-radius);
  background: var(--o-navy);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 14px;
  box-shadow: var(--o-shadow);
}

.o-cta h3{margin:0 0 6px}
.o-cta p{margin:0; color: rgba(255,255,255,.90); line-height: 1.85}

.o-cta-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.o-cta .o-btn-primary{background:#fff; color: var(--o-navy)}
.o-cta .o-btn-primary:hover{background: var(--o-navy-soft); transform: translateY(-2px)}
.o-cta .o-btn-outline{
  background: rgba(255,255,255,.10);
  border: 1.8px solid rgba(255,255,255,.45);
  color:#fff;
}
.o-cta .o-btn-outline:hover{
  background: rgba(255,255,255,.16);
  transform: translateY(-2px);
}

.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--o-ease), transform .7s var(--o-ease);
  will-change: opacity, transform;
}
.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}

.reveal.d1{transition-delay:.06s}
.reveal.d2{transition-delay:.12s}
.reveal.d3{transition-delay:.18s}
.reveal.d4{transition-delay:.24s}


@keyframes oInUp{
  from{opacity:0; transform: translateY(16px)}
  to{opacity:1; transform: translateY(0)}
}


@media (max-width: 980px){
  .o-steps{grid-template-columns: repeat(2, minmax(0,1fr))}
  .o-services{grid-template-columns: 1fr}
}

@media (max-width: 820px){
  .o-grid{grid-template-columns: 1fr}
}

@media (max-width: 600px){
  .o-hero-stats{flex-direction: column}
  .o-stat{width:100%}
}

@media (max-width: 520px){
  .o-title{max-width: 22ch}
  .o-hero .o-btn,
  .o-section .o-btn{width:100%}
  .o-cta-actions{width:100%}
}


@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}


.o-service.reveal{
  opacity: 0;
  transform: translateY(18px) scale(.98);
  transition:
    opacity .7s var(--o-ease),
    transform .7s var(--o-ease),
    box-shadow .3s var(--o-ease);
  will-change: opacity, transform;
}

.o-service.reveal.in-view{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.o-service.reveal.d1{ transition-delay: .05s; }
.o-service.reveal.d2{ transition-delay: .12s; }
.o-service.reveal.d3{ transition-delay: .19s; }
.o-service.reveal.d4{ transition-delay: .26s; }

.o-service .o-ico{
  transition: transform .6s var(--o-ease), filter .6s var(--o-ease);
  transform: translateY(0) scale(1);
}

.o-service.reveal.in-view .o-ico{
  transform: translateY(-2px) scale(1.06);
}

.o-service:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 55px rgba(0,0,0,.12);
}