:root{
    --navy:#10213D;
    --teal:#008F8C;
    --turquoise:#12A6A0;
    --teal-2:#28B8B0;
    --gold:#F5C542;
    --orange:#F49A35;
    --coral:#EF6B55;
    --bg:#FFFFFF;
    --bg-soft:#F8FBFC;
    --bg-blue-gray:#EEF7F8;
    --ink:#10213D;
    --muted:#5C6B7F;
    --line:#E4ECEE;
    --radius:16px;
    --shadow:0 10px 30px rgba(16,33,61,0.08);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', sans-serif;
    color:var(--ink);
    background-color:var(--bg);
    background-image:
      repeating-linear-gradient(25deg, rgba(16,33,61,0.05) 0 1px, transparent 1px 70px),
      repeating-linear-gradient(115deg, rgba(16,33,61,0.05) 0 1px, transparent 1px 70px);
    background-attachment:fixed;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{ font-family:'Manrope', sans-serif; letter-spacing:-0.02em; }
  a{ color:inherit; text-decoration:none; }
  img{ max-width:100%; display:block; }
  .wrap{ max-width:1280px; margin:0 auto; padding:0 32px; }
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px;
    font-size:12.5px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--teal); background:rgba(0,143,140,0.08);
    padding:7px 14px; border-radius:999px;
  }
  .eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:14px 24px; border-radius:10px; font-weight:600; font-size:15px;
    border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }
  .btn-primary{ background:var(--teal); color:#fff; box-shadow:0 8px 20px rgba(0,143,140,0.28); }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,143,140,0.36); }
  .btn-outline{ background:#fff; color:var(--navy); border-color:var(--line); }
  .btn-outline:hover{ border-color:var(--teal); color:var(--teal); transform:translateY(-2px); }
  .btn svg{ width:16px; height:16px; transition:transform .18s ease; }
  .btn:hover svg{ transform:translateX(3px); }

  /* ---------- HEADER ---------- */
  header{
    position:sticky; top:0; z-index:50;
    background:rgba(255,255,255,0.9); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
  .logo{ display:flex; align-items:center; gap:10px; font-family:'Manrope',sans-serif; font-weight:800; font-size:19px; }
  .logo-img{ height:34px; width:auto; display:block; }
  .navlinks{ display:flex; align-items:center; gap:26px; font-size:14px; font-weight:600; color:var(--navy); }
  .navlinks > a{ opacity:0.85; transition:opacity .15s ease; display:inline-flex; align-items:center; gap:5px; position:relative; padding-bottom:4px; }
  .navlinks a svg{ width:13px; height:13px; opacity:0.6; transition:transform .2s ease; }
  .navlinks > a:hover{ opacity:1; color:var(--teal); }
  .navlinks a.active{ opacity:1; color:var(--teal); }
  .navlinks > a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--teal); border-radius:2px; }
  .nav-cta{ display:flex; align-items:center; gap:20px; }
  .menu-btn{ display:none; }

  /* Dropdown submenus (Services / White Label / About) */
  .nav-dropdown{ position:relative; }
  .nav-dropdown > a{ opacity:0.85; transition:opacity .15s ease; display:inline-flex; align-items:center; gap:5px; position:relative; padding-bottom:4px; cursor:pointer; }
  .nav-dropdown > a:hover{ opacity:1; color:var(--teal); }
  .nav-dropdown > a.active{ opacity:1; color:var(--teal); }
  .nav-dropdown > a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--teal); border-radius:2px; }
  .dropdown-panel{
    position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px);
    background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow);
    padding:8px; min-width:200px; display:flex; flex-direction:column; gap:2px;
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index:60;
  }
  .nav-dropdown:hover .dropdown-panel{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
  .nav-dropdown:hover > a svg{ transform:rotate(180deg); }
  .dropdown-panel a{ padding:9px 12px; border-radius:8px; font-size:13.5px; font-weight:600; color:var(--navy); opacity:1; }
  .dropdown-panel a:hover{ background:var(--bg-soft); color:var(--teal); }

  /* Pill-shaped CTA to match Zestcode's header button */
  .nav-pill{ border-radius:999px !important; padding:12px 22px !important; }

  @media (max-width:960px){
    .navlinks{ display:none; }
    .nav-cta .btn-primary{ padding:11px 16px; font-size:13.5px; }
  }

  /* ---------- HERO ---------- */
  .hero{ position:relative; overflow:hidden; background:linear-gradient(180deg, #FBFEFE 0%, var(--bg-blue-gray) 100%); }
  .hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; padding:72px 0 40px; }
  @media (max-width:1024px){ .hero-grid{ grid-template-columns:1fr; padding-top:44px;} }
  .hero h1{ font-size:clamp(34px,4.6vw,54px); font-weight:800; line-height:1.06; margin:20px 0 20px; }
  .grad-text{ background:linear-gradient(90deg, var(--teal), var(--turquoise), var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero p.lead{ font-size:16.5px; color:var(--muted); line-height:1.7; max-width:480px; margin-bottom:30px; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; }
  .trust{ display:flex; align-items:center; gap:14px; }
  .avatars{ display:flex; }
  .avatars span{
    width:38px; height:38px; border-radius:50%; border:2.5px solid #fff; margin-left:-10px;
    background:linear-gradient(135deg,var(--teal),var(--turquoise)); display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:11px; font-weight:700; box-shadow:0 2px 6px rgba(16,33,61,0.15);
  }
  .avatars span:first-child{ margin-left:0; }
  .trust-text b{ display:block; font-size:14.5px; }
  .trust-text small{ color:var(--muted); font-size:12.5px; }

  /* ---------- INFINITY VISUAL ---------- */
  .infinity-stage{ position:relative; width:100%; }
  .infinity-stage .infinity-img{ width:100%; height:auto; display:block; }

  /* ---------- INFINITY BAR ---------- */
  .infbar{ background:var(--navy); padding:22px 0; overflow:hidden; }
  .infbar-track{ display:flex; align-items:center; gap:46px; white-space:nowrap; animation:scroll-x 26s linear infinite; }
  .infbar-track span{ font-family:'Manrope',sans-serif; font-weight:700; font-size:13px; letter-spacing:0.16em; color:#EAF6F5; opacity:0.85; display:flex; align-items:center; gap:12px; }
  .infbar-track span::after{ content:"∞"; color:var(--gold); font-size:15px; }
  @keyframes scroll-x{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){ .infbar-track{ animation:none; } }

  /* ---------- STATS ---------- */
  .stats-wrap{ margin-top:-42px; position:relative; z-index:5; }
  .stats{
    background:#fff; border-radius:18px; box-shadow:var(--shadow); border:1px solid var(--line);
    display:grid; grid-template-columns:repeat(4,1fr); padding:30px 10px;
  }
  .stat{ display:flex; align-items:center; gap:14px; justify-content:center; padding:10px 6px; position:relative; }
  .stat:not(:last-child)::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); height:60%; width:1px; background:var(--line); }
  .stat .icon{ width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--turquoise)); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .stat .icon svg{ width:20px; height:20px; stroke:#fff; }
  .stat b{ font-family:'Manrope',sans-serif; font-size:24px; font-weight:800; display:block; }
  .stat small{ color:var(--muted); font-size:13px; }
  @media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); gap:18px;} .stat:nth-child(2)::after{display:none;} }

  /* ---------- SECTION HEADS ---------- */
  section{ padding:96px 0; }
  .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:44px; flex-wrap:wrap; }
  .sec-head h2{ font-size:clamp(26px,3vw,36px); font-weight:800; margin-top:10px; }
  .sec-head .accent{ color:var(--teal); }
  .sec-link{ font-weight:700; font-size:14px; color:var(--teal); display:flex; align-items:center; gap:6px; }

  /* ---------- SERVICES ---------- */
  .services-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:960px){ .services-grid{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:640px){ .services-grid{ grid-template-columns:1fr;} }
  .scard{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px 26px;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .scard:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:transparent; }
  .scard .icon{
    width:50px; height:50px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;
  }
  .scard .icon svg{ width:23px; height:23px; }
  .scard h3{ font-size:17.5px; font-weight:700; margin-bottom:8px; }
  .scard p{ color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:16px; }
  .scard .more{ font-size:13.5px; font-weight:700; color:var(--teal); display:inline-flex; gap:6px; align-items:center; }

  /* ---------- PORTFOLIO ---------- */
  .portfolio{ background:var(--bg-soft); }
  .pgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  @media (max-width:960px){ .pgrid{ grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .pgrid{ grid-template-columns:1fr;} }
  .pcard{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:3/4; color:#fff; }
  .pcard .bg{ position:absolute; inset:0; }
  .pcard .fade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,33,61,0) 30%, rgba(16,33,61,0.85) 100%);}
  .pcard .tag{ position:absolute; top:16px; left:16px; background:rgba(255,255,255,0.14); backdrop-filter:blur(6px); font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px; }
  .pcard .cap{ position:absolute; bottom:18px; left:18px; right:18px; font-family:'Manrope',sans-serif; font-weight:700; font-size:16px; line-height:1.3; }
  .pcard .cap small{ display:block; font-family:'Inter',sans-serif; font-weight:400; font-size:12px; opacity:0.75; margin-top:6px; }

  /* ---------- CTA ---------- */
  .cta{ background:var(--navy); position:relative; overflow:hidden; }
  .cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 30%, rgba(245,197,66,0.14), transparent 55%), radial-gradient(circle at 15% 70%, rgba(0,143,140,0.22), transparent 50%); }
  .cta-inner{ position:relative; text-align:center; max-width:680px; margin:0 auto; }
  .cta h2{ color:#fff; font-size:clamp(28px,4vw,44px); font-weight:800; margin:16px 0 16px; }
  .cta .eyebrow{ background:rgba(255,255,255,0.1); color:#EAF6F5; }
  .cta .eyebrow::before{ background:var(--gold); }
  .cta p{ color:#B9C6D8; font-size:16px; margin-bottom:30px; }

  /* ---------- FOOTER ---------- */
  footer{ background:#0B1930; color:#B9C6D8; padding:64px 0 26px; font-size:14px; }
  .fgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; margin-bottom:50px; }
  @media (max-width:860px){ .fgrid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:520px){ .fgrid{ grid-template-columns:1fr; } }
  footer h4{ color:#fff; font-size:14px; margin-bottom:18px; font-family:'Manrope',sans-serif; }
  footer ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
  footer ul a{ opacity:0.85; transition:opacity .15s ease; }
  footer ul a:hover{ opacity:1; color:var(--turquoise); }
  footer .flogo{ display:inline-flex; align-items:center; background:#fff; padding:10px 16px; border-radius:10px; margin-bottom:14px; }
  footer .flogo-img{ height:26px; width:auto; display:block; }
  footer p.desc{ opacity:0.75; line-height:1.7; margin-bottom:20px; max-width:300px; }
  .fbottom{ border-top:1px solid rgba(255,255,255,0.08); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; opacity:0.65; font-size:12.5px; }
  .fbottom a{ margin-left:18px; }

/* ---------- SUB-PAGE HERO (Services, etc.) ---------- */
.subhero{ background:linear-gradient(180deg, #FBFEFE 0%, var(--bg-blue-gray) 100%); padding:64px 0 56px; text-align:center; }
.subhero h1{ font-size:clamp(32px,4.6vw,50px); font-weight:800; margin:18px 0 16px; line-height:1.1; }
.subhero p{ color:var(--muted); font-size:16.5px; max-width:600px; margin:0 auto; line-height:1.7; }

/* ---------- SERVICES CATEGORY BLOCKS ---------- */
.svc-category{ padding:64px 0; border-bottom:1px solid var(--line); }
.svc-category:last-of-type{ border-bottom:none; }
.svc-cat-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:36px; flex-wrap:wrap; }
.svc-cat-head h2{ font-size:clamp(22px,2.6vw,30px); font-weight:800; margin-top:8px; }
.svc-cat-head p{ color:var(--muted); font-size:14.5px; max-width:480px; margin-top:6px; }
.svc-count{
  font-size:12.5px; font-weight:700; color:var(--teal); background:rgba(0,143,140,0.08);
  padding:6px 14px; border-radius:999px; white-space:nowrap; flex-shrink:0;
}
.svc-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:960px){ .svc-list{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .svc-list{ grid-template-columns:1fr;} }
.svc-link{
  display:flex; flex-direction:column; gap:6px; padding:20px 20px 18px; border:1px solid var(--line);
  border-radius:12px; background:#fff; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.svc-link:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent; }
.svc-link .t{ font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.svc-link .t svg{ width:14px; height:14px; flex-shrink:0; color:var(--teal); opacity:0; transform:translateX(-4px); transition:opacity .16s ease, transform .16s ease; }
.svc-link:hover .t svg{ opacity:1; transform:translateX(0); }
.svc-link p{ color:var(--muted); font-size:13.5px; line-height:1.55; }

.svc-note{ background:var(--bg-soft); }
.svc-note .wrap{ text-align:center; padding:12px 0 0; }
.svc-note p{ font-size:12px; color:var(--muted); }


/* ---------------- SITE-WIDE ANIMATIONS ---------------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change:opacity, transform;
}
.reveal.in-view{ opacity:1; transform:translateY(0); }
header{ transition:box-shadow .25s ease; }
header.hdr-scrolled{ box-shadow:0 6px 24px rgba(16,33,61,0.10); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ---------- WHY CHOOSE US ---------- */
.why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .why-grid{ grid-template-columns:1fr; } }
.why-card{ padding:28px 24px; border-radius:16px; background:#fff; border:1px solid var(--line); transition:transform .2s ease, box-shadow .2s ease; }
.why-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
.why-card .icon{ width:44px; height:44px; border-radius:12px; background:rgba(0,143,140,0.08); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.why-card .icon svg{ width:20px; height:20px; }
.why-card h3{ font-size:16.5px; font-weight:700; margin-bottom:8px; }
.why-card p{ color:var(--muted); font-size:13.5px; line-height:1.6; }

/* ---------- TRUST BADGES ---------- */
.badge-bar{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px 28px; margin-top:26px; }
.badge-item{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#EAF6F5; opacity:0.9; }
.badge-item svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; }
/* ---------- HERO INFINITY MOTION ---------- */
@keyframes hero-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-10px); }
}
.infinity-stage{ animation:hero-float 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce){ .infinity-stage{ animation:none; } }

.hero-particle{
  position:absolute; border-radius:50%; pointer-events:none; z-index:2;
  animation:particle-drift 4.5s ease-in-out infinite;
}
@keyframes particle-drift{
  0%{ transform:translate(0,0) scale(1); opacity:0.55; }
  50%{ transform:translate(var(--dx,10px),var(--dy,-14px)) scale(1.2); opacity:1; }
  100%{ transform:translate(0,0) scale(1); opacity:0.55; }
}
@media (prefers-reduced-motion: reduce){ .hero-particle{ animation:none; opacity:0.8; } }

.icon-pulse{
  position:absolute; width:58px; height:58px; border-radius:50%;
  transform:translate(-50%,-50%); pointer-events:none; z-index:1;
  animation:icon-pulse-anim 2.6s ease-in-out infinite;
}
@keyframes icon-pulse-anim{
  0%,100%{ box-shadow:0 0 0 0 rgba(0,143,140,0.30); }
  50%{ box-shadow:0 0 0 12px rgba(0,143,140,0); }
}
@media (prefers-reduced-motion: reduce){ .icon-pulse{ animation:none; } }

/* ---------- FAQ PREVIEW ---------- */
.faq-list{ max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover{ border-color:transparent; box-shadow:var(--shadow); }
.faq-item.open{ border-color:transparent; box-shadow:var(--shadow); }
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:20px 22px;
  font-family:'Manrope',sans-serif; font-weight:700; font-size:15.5px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  cursor:pointer; color:var(--navy);
}
.faq-q .plus{
  width:28px; height:28px; border-radius:50%; background:rgba(0,143,140,0.08); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; transition:background .2s ease, transform .2s ease;
}
.faq-q .plus svg{ width:14px; height:14px; color:var(--teal); transition:transform .25s ease; }
.faq-item.open .faq-q .plus{ background:var(--teal); transform:rotate(180deg); }
.faq-item.open .faq-q .plus svg{ color:#fff; transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-item.open .faq-a{ max-height:240px; }
.faq-a p{ padding:0 22px 20px; color:var(--muted); font-size:14px; line-height:1.65; }