/* Reset */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:#111827; background:#fff; line-height:1.6; }

/* Root tokens + header typography lock */
:root{
  --nav-h: 64px;
  --brand:#ff9800;
  --ink:#111827;
  --muted:#6B7280;
  --soft:#E5E7EB;
  --bg-dark-1:#111827;
  --bg-dark-2:#1F2937;
  --card:#ffffff;
  --radius:16px;

  /* header sizes (consistent on all pages) */
  --logo-size: 18px;
  --nav-size: 16px;
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:9999; height:var(--nav-h);
  background:rgba(28,31,42,0.55);
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  color:#fff; transition:box-shadow .25s ease, background .25s ease, height .25s ease;
}
.site-header.scrolled{ background:rgba(28,31,42,0.85); box-shadow:0 8px 24px rgba(0,0,0,.25); }
.nav-container{ max-width:1180px; margin:0 auto; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 20px; }
.logo{ font-weight:800; letter-spacing:.03em; color:#fff; font-size:var(--logo-size); line-height:1; }
.primary-nav ul{ list-style:none; display:flex; gap:22px; align-items:center; }
.primary-nav a{ color:#fff; text-decoration:none; font-weight:700; font-size:var(--nav-size); line-height:1; transition:color .2s ease, opacity .2s ease; }
.primary-nav a:hover{ color:var(--brand); }
.primary-nav a.active{ color:var(--brand); }

/* Mobile nav */
.nav-toggle{ display:none; width:42px; height:34px; background:transparent; border:none; cursor:pointer; }
.nav-toggle span{ display:block; height:3px; background:#fff; margin:6px 0; border-radius:2px; }

/* Hero */
.hero{ position:relative; min-height:70vh; display:grid; place-items:center; overflow:hidden; }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.1) brightness(.9); }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.30), rgba(0,0,0,.55)); }
.hero-content{ position:relative; color:#F9FAFB; text-align:center; }
.hero h1{ font-size:clamp(28px,5vw,48px); line-height:1.2; margin-bottom:10px; }
.hero .accent{ display:block; color:#FDE68A; font-weight:800; }
.hero p{ color:#E5E7EB; font-size:clamp(15px,2.2vw,18px); }
.hero-ctas{ margin-top:16px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn{ display:inline-block; padding:12px 18px; border-radius:9999px; text-decoration:none; font-weight:700; transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.btn-primary{ background:#111827; color:#F9FAFB; box-shadow:0 10px 24px rgba(0,0,0,.22); }
.btn-primary:hover{ transform:translateY(-2px); background:#1F2937; }
.btn-ghost{ background:transparent; color:#F9FAFB; border:2px solid rgba(255,255,255,.85); }
.btn-ghost:hover{ background:#F9FAFB; color:#111827; }

.trust-row{ margin-top:18px; display:flex; gap:16px; justify-content:center; color:#E5E7EB; }
.trust-item{ display:flex; gap:6px; align-items:center; padding:6px 10px; background:rgba(255,255,255,.08); border-radius:9999px; }
.stars{ color:#10B981; letter-spacing:1px; }

/* Soft shapes */
.shape{ position:absolute; border-radius:50%; filter:blur(40px); opacity:.25; }
.s1{ width:320px; height:320px; background:#93C5FD; top:-60px; left:-60px; }
.s2{ width:280px; height:280px; background:#FCA5A5; right:-60px; bottom:-60px; }

/* Carousel */
.carousel{ position:relative; text-align:center; padding:24px 20px; background:#f9f9f9; }
.carousel img{ width:100%; max-width:980px; border-radius:12px; }
.carousel-btn{ position:absolute; top:50%; transform:translateY(-50%); background:#111827; color:#fff; border:none; padding:10px 12px; font-size:1.2rem; cursor:pointer; border-radius:10px; box-shadow:0 8px 18px rgba(0,0,0,.25); }
.carousel-btn.left{ left:14px; } .carousel-btn.right{ right:14px; }

/* Achievements */
.achievements{ background:#fff; padding:48px 20px 24px; }
.achievements-inner{ max-width:980px; margin:0 auto; text-align:center; }
.achievements h2{ font-size:clamp(22px,3.2vw,28px); margin-bottom:10px; }
.achievements-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:14px; }
.achv{ background:#fff; border:1px solid #E5E7EB; border-radius:14px; padding:16px; box-shadow:0 10px 22px rgba(0,0,0,.06); }
.achv-value{ font-weight:800; font-size:clamp(26px,4.5vw,36px); color:#111827; }
.achv-label{ color:#6B7280; }

/* Services */
.section-title{ text-align:center; font-size:clamp(22px,3.2vw,28px); margin-bottom:14px; }
.services-section{ background:#fff; padding:36px 0; }
.services-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.service-card{ background:#0B1220; color:#fff; border-radius:16px; overflow:hidden; position:relative; transform-style:preserve-3d; transition:transform .25s ease, box-shadow .25s ease; box-shadow:0 16px 34px rgba(0,0,0,.18); }
.service-card:hover{ transform:translateY(-4px); }
.service-img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.service-img img{ width:100%; height:100%; object-fit:cover; transform:scale(1); transition:transform 700ms cubic-bezier(.22,1,.36,1); filter:brightness(.9); }
.service-card:hover .service-img img{ transform:scale(1.06); }
.service-img .overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05)); }
.service-info{ padding:16px; }
.service-info h3{ margin-bottom:6px; font-size:18px; }
.service-info p{ color:#D1D5DB; font-size:14px; margin-bottom:10px; }
.btn-link{ color:#F9FAFB; text-decoration:none; font-weight:700; }
.btn-link:hover{ text-decoration:underline; }

/* Process (your spec) */
:root{ --process-bg-1:#111827; --process-bg-2:#1F2937; --card-bg:#303744; --text-primary:#F9FAFB; --text-secondary:#D1D5DB; --number:rgba(156,163,175,0.20); --line:#FFFFFF; --cta-bg:#FFFFFF; --cta-text:#111827; --radius:16px; }
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.process{ background:linear-gradient(180deg,var(--process-bg-1),var(--process-bg-2)); color:var(--text-primary); }
.process-inner{ max-width:1180px; margin:0 auto; padding:80px 20px; }
.process-list{ list-style:none; display:grid; gap:96px; padding:0; margin:0; }
.process-step{ display:grid; grid-template-columns:repeat(12,1fr); align-items:center; position:relative; row-gap:24px; opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.process-step.is-visible{ opacity:1; transform:none; }
.step-label{ position:relative; min-height:160px; display:flex; align-items:center; z-index:1; }
.step-title{ font-weight:700; font-size:clamp(40px,5vw,56px); }
.step-label::before{ content:attr(data-step); position:absolute; top:50%; transform:translateY(-50%); font-weight:800; font-size:clamp(140px,18vw,220px); color:var(--number); line-height:.9; }
.card{ background:var(--card-bg); border-radius:var(--radius); padding:24px; display:flex; align-items:center; gap:20px; color:var(--text-primary); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.card p{ margin:0; font-size:clamp(16px, 1.8vw, 18px); color:var(--text-secondary); }
.icon-badge{ width:56px; height:56px; border-radius:50%; background:#F9FAFB; display:grid; place-items:center; flex-shrink:0; }
.icon-badge img{ width:28px; height:28px; }
.process-step:nth-child(odd) .step-label{ grid-column:1 / span 6; text-align:left; }
.process-step:nth-child(odd) .card{ grid-column:7 / span 6; justify-self:end; }
.process-step:nth-child(even) .step-label{ grid-column:7 / span 6; text-align:right; }
.process-step:nth-child(even) .card{ grid-column:1 / span 6; justify-self:start; }
.connector{ position:absolute; left:50%; transform:translateX(-50%); bottom:-72px; width:220px; height:90px; pointer-events:none; opacity:.9; }
.connector .curve{ display:none; stroke:var(--line); }
.process-step:nth-child(odd) .connector .right{ display:block; }
.process-step:nth-child(even) .connector .left{ display:block; }
.process-step:last-child .connector{ display:none; }
.process-cta{ margin-top:48px; text-align:center; }
.btn-pill{ display:inline-block; background:var(--cta-bg); color:var(--cta-text); padding:14px 28px; border-radius:9999px; font-weight:600; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.25); transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; }
.btn-pill:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.35); background:#E5E7EB; }

/* Projects highlight */
.projects-highlight{ background:#fff; padding:36px 0; }
.proj-scroller{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,1fr); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 2px; }
.proj-card{ position:relative; border-radius:16px; overflow:hidden; scroll-snap-align:center; box-shadow:0 16px 34px rgba(0,0,0,.18); background:#111827; }
.proj-card img{ width:100%; height:200px; object-fit:cover; opacity:.9; }
.proj-info{ position:absolute; inset:auto 0 0 0; padding:12px; background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,.05)); color:#fff; display:flex; align-items:center; justify-content:space-between; }
.btn-chip{ display:inline-block; padding:6px 10px; border-radius:9999px; background:#fff; color:#111827; font-size:13px; text-decoration:none; font-weight:700; }
.proj-controls{ display:flex; gap:10px; justify-content:center; margin-top:12px; }
.pctl{ width:40px; height:40px; border:none; border-radius:9999px; background:#111827; color:#fff; box-shadow:0 8px 18px rgba(0,0,0,.22); cursor:pointer; }

/* CTA band */
.cta-band{ background:linear-gradient(180deg,var(--bg-dark-1),var(--bg-dark-2)); color:#F9FAFB; padding:36px 0; }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cta-inner h3{ font-size:clamp(20px,3vw,26px); }
.cta-inner .btn-primary{ background:#F9FAFB; color:#111827; }
.cta-inner .btn-primary:hover{ background:#E5E7EB; }

/* Reveal utility */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
.delay-1{ transition-delay:.12s; } .delay-2{ transition-delay:.24s; } .delay-3{ transition-delay:.36s; }

/* Responsive */
@media (max-width:1024px){ .services-grid{ grid-template-columns:repeat(2,1fr); } .cta-inner{ flex-direction:column; text-align:center; } }
@media (max-width:720px){
  :root{ --nav-h:60px; --logo-size:17px; --nav-size:15px; }
  .nav-toggle{ display:block; }
  .primary-nav{ position:absolute; top:var(--nav-h); right:0; left:0; background:rgba(17,24,39,.98); display:none; }
  .primary-nav.open{ display:block; }
  .primary-nav ul{ flex-direction:column; gap:14px; padding:14px 20px; }
  .hero{ min-height:72vh; }
  .achievements-grid{ grid-template-columns:1fr; }
}
@media (max-width:900px){
  .process-step{ grid-template-columns:1fr; }
  .process-step .step-label, .process-step .card{ grid-column:1 / -1 !important; text-align:left; }
  .connector{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  *{ transition:none!important; animation:none!important; scroll-behavior:auto; }
}