/* ─── CSS VARIABLES ─────────────────────────── */
    :root {
      --blue:    #0A3D62;
      --blue-dk: #062d4a;
      --blue-mid:#0d5a8a;
      --green:   #1ABC9C;
      --green-dk:#15a589;
      --orange:  #F39C12;
      --gray:    #7F8C8D;
      --sand:    #F4F6F7;
      --white:   #ffffff;
      --dark:    #0d1b26;
      --radius:  14px;
      --shadow:  0 8px 40px rgba(10,61,98,.12);
      --shadow-lg:0 20px 60px rgba(10,61,98,.16);
    }

    *, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'DM Sans', sans-serif;
      color: #1a2a35;
      background: var(--white);
      overflow-x: hidden;
    }
    h1,h2,h3,h4,h5,h6 { font-family: 'Syne', sans-serif; }
    a { text-decoration: none; color: inherit; }
    img { max-width:100%; }

    /* ─── UTILITY ───────────────────────────────── */
    .text-green  { color: var(--green)!important; }
    .text-orange { color: var(--orange)!important; }
    .text-blue   { color: var(--blue)!important; }

    .btn-primary-ttl {
      background: var(--orange);
      color: var(--white);
      border: none;
      border-radius: 50px;
      padding: .75rem 2rem;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .95rem;
      letter-spacing: .03em;
      transition: all .3s ease;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      cursor: pointer;
    }
    .btn-primary-ttl:hover { background: #d68910; color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(243,156,18,.35); }

    .btn-outline-blue {
      border: 2px solid var(--blue);
      color: var(--blue);
      background: transparent;
      border-radius: 50px;
      padding: .72rem 2rem;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .95rem;
      transition: all .3s ease;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
    }
    .btn-outline-blue:hover { background:var(--blue); color:var(--white); }

    .btn-ghost-white {
      border: 2px solid rgba(255,255,255,.4);
      color: var(--white);
      background: transparent;
      border-radius: 50px;
      padding: .72rem 2rem;
      font-family: 'Syne', sans-serif;
      font-weight: 700;
      font-size: .95rem;
      transition: all .3s ease;
      display: inline-flex;
      align-items: center;
      gap: .5rem;
    }
    .btn-ghost-white:hover { background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.7); }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      background: rgba(26,188,156,.12);
      color: var(--green);
      border-radius: 50px;
      padding: .35rem 1rem;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }
    .section-label::before {
      content:'';
      width:7px; height:7px;
      border-radius:50%;
      background:var(--green);
    }
    .section-title { font-size: clamp(2rem,4vw,3rem); font-weight:800; line-height:1.1; }
    .underline-accent { position:relative; display:inline-block; }
    .underline-accent::after {
      content:'';
      position:absolute;
      bottom:-6px; left:0;
      height:4px; width:80px;
      background: linear-gradient(90deg,var(--green),var(--orange));
      border-radius:4px;
    }

    /* ─── ANIMATIONS ───────────────────── */
    @keyframes fadeUp    { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
    @keyframes fadeIn    { from{opacity:0} to{opacity:1} }
    @keyframes float     { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
    @keyframes pulse     { 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }
    @keyframes drift     { 0%{transform:translateX(0) translateY(0)} 50%{transform:translateX(20px) translateY(-10px)} 100%{transform:translateX(0) translateY(0)} }
    @keyframes shimmer   { 0%{background-position:-200% center} 100%{background-position:200% center} }
    @keyframes drawLine  { from{stroke-dashoffset:1000} to{stroke-dashoffset:0} }

    .fade-up    { animation: fadeUp  .7s ease both; }
    .fade-in    { animation: fadeIn  .7s ease both; }
    .delay-1{ animation-delay:.15s; }
    .delay-2{ animation-delay:.30s; }
    .delay-3{ animation-delay:.45s; }
    .delay-4{ animation-delay:.60s; }
    .delay-5{ animation-delay:.75s; }

    .reveal {
      opacity:0;
      transform:translateY(32px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .reveal.visible { opacity:1; transform:translateY(0); }

    /* ═══════════════════════════════════════════
       HERO
    ═══════════════════════════════════════════ */
    #hero {
      background: linear-gradient(125deg, var(--blue-dk) 0%, var(--blue) 55%, var(--blue-mid) 100%);
      min-height: 76vh;
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
      padding: 120px 0 80px;
    }
    #hero::before {
      content:'';
      position:absolute; inset:0;
      background: url('/images/pexels-1427541-w1600.jpeg') center/cover no-repeat;
      opacity:.1;
    }

    /* Geometric background grid lines */
    #hero::after {
      content:'';
      position:absolute; inset:0;
      background-image:
        linear-gradient(rgba(26,188,156,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26,188,156,.07) 1px, transparent 1px);
      background-size: 60px 60px;
      pointer-events:none;
    }

    .hero-orb {
      position:absolute;
      border-radius:50%;
      pointer-events:none;
    }
    .orb-1 { width:500px;height:500px;top:-150px;right:-100px;background:radial-gradient(circle,rgba(26,188,156,.15),transparent 70%); animation:pulse 5s ease-in-out infinite; }
    .orb-2 { width:300px;height:300px;bottom:-80px;left:-60px;background:radial-gradient(circle,rgba(243,156,18,.12),transparent 70%); animation:pulse 7s ease-in-out infinite reverse; }
    .orb-3 { width:200px;height:200px;top:40%;right:30%;background:radial-gradient(circle,rgba(255,255,255,.05),transparent 70%); animation:drift 9s ease-in-out infinite; }

    .hero-content { position:relative; z-index:2; }

    .hero-breadcrumb {
      display:flex; align-items:center; gap:.5rem;
      font-size:.82rem; color:rgba(255,255,255,.55);
      margin-bottom:1.5rem;
    }
    .hero-breadcrumb a { color:rgba(255,255,255,.55); transition:color .2s; }
    .hero-breadcrumb a:hover { color:var(--green); }
    .hero-breadcrumb i { font-size:.65rem; }

    .hero-title {
      font-size: clamp(2.8rem,5.5vw,5rem);
      font-weight:800;
      color:var(--white);
      line-height:1.06;
      margin-bottom:1.5rem;
    }
    .hero-title .accent { color:var(--green); }
    .hero-title .accent2 { color:var(--orange); }

    .hero-subtitle {
      font-size:1.1rem;
      color:rgba(255,255,255,.7);
      line-height:1.75;
      max-width:580px;
      margin-bottom:2.5rem;
    }

    .hero-chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.5rem; }
    .chip {
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.15);
      color:rgba(255,255,255,.8);
      border-radius:50px;
      padding:.3rem .9rem;
      font-size:.8rem;
      display:inline-flex; align-items:center; gap:.4rem;
      transition:all .3s;
    }
    .chip:hover { background:rgba(26,188,156,.2); border-color:var(--green); color:var(--white); }
    .chip i { color:var(--green); }

    .hero-cta { display:flex; flex-wrap:wrap; gap:1rem; }

    /* Hero visual panel */
    .hero-visual {
      position:relative; z-index:2;
    }
    .hero-img-grid {
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-template-rows: auto auto;
      gap:12px;
    }
    .hig-1 { grid-column:1/3; height:220px; object-fit:cover; border-radius:16px; box-shadow:var(--shadow-lg); }
    .hig-2 { height:150px; object-fit:cover; border-radius:14px; box-shadow:var(--shadow); }
    .hig-3 { height:150px; object-fit:cover; border-radius:14px; box-shadow:var(--shadow); }

    .hero-stat-pill {
      position:absolute;
      background:var(--white);
      border-radius:12px;
      padding:.7rem 1.1rem;
      display:flex; align-items:center; gap:.75rem;
      box-shadow:var(--shadow-lg);
    }
    .hero-stat-pill.p1 { bottom:-16px; left:-20px; }
    .hero-stat-pill.p2 { top:12px; right:-16px; }
    .pill-icon {
      width:38px;height:38px; border-radius:9px;
      display:flex;align-items:center;justify-content:center;
      font-size:1.1rem;
    }
    .pi-green  { background:rgba(26,188,156,.15); color:var(--green); }
    .pi-orange { background:rgba(243,156,18,.15);  color:var(--orange); }
    .pill-val  { font-family:'Syne',sans-serif; font-weight:700; font-size:.95rem; color:#1a2a35; line-height:1; }
    .pill-lbl  { font-size:.72rem; color:var(--gray); margin:0; }

    /* ═══════════════════════════════════════════
       SERVICE TABS / FILTER
    ═══════════════════════════════════════════ */
    #svc-filter {
      background: var(--white);
      padding: 40px 0 0;
      position: sticky;
      top: 0;
      z-index: 100;
      box-shadow: 0 2px 20px rgba(10,61,98,.07);
    }
    .filter-tabs {
      display:flex; gap:.5rem;
      overflow-x:auto; padding-bottom:0;
      scrollbar-width:none;
    }
    .filter-tabs::-webkit-scrollbar { display:none; }
    .ftab {
      border:none; background:transparent;
      font-family:'Syne',sans-serif;
      font-weight:600; font-size:.88rem;
      color:var(--gray);
      padding:.75rem 1.3rem;
      border-radius:10px 10px 0 0;
      cursor:pointer;
      transition:all .3s;
      white-space:nowrap;
      border-bottom:3px solid transparent;
      display:flex; align-items:center; gap:.4rem;
    }
    .ftab:hover { color:var(--blue); background:rgba(10,61,98,.04); }
    .ftab.active {
      color:var(--blue);
      background:var(--sand);
      border-bottom:3px solid var(--green);
    }
    .ftab i { font-size:1rem; }

    /* ═══════════════════════════════════════════
       MAIN SERVICES GRID
    ═══════════════════════════════════════════ */
    #services-main { padding:80px 0 60px; background:var(--sand); }

    .svc-mega-card {
      background:var(--white);
      border-radius:22px;
      overflow:hidden;
      box-shadow:var(--shadow);
      transition:all .4s ease;
      height:100%;
      border:1.5px solid #e8ecef;
    }
    .svc-mega-card:hover {
      transform:translateY(-8px);
      box-shadow:var(--shadow-lg);
      border-color:transparent;
    }
    .svc-card-img {
      width:100%; height:220px; object-fit:cover;
      transition:transform .6s ease;
    }
    .svc-mega-card:hover .svc-card-img { transform:scale(1.06); }
    .svc-img-wrap { overflow:hidden; position:relative; }
    .svc-tag {
      position:absolute; top:14px; left:14px;
      background:var(--blue);
      color:var(--white);
      border-radius:8px;
      padding:.25rem .75rem;
      font-size:.72rem;
      font-family:'Syne',sans-serif;
      font-weight:700;
      letter-spacing:.06em;
      text-transform:uppercase;
    }
    .svc-tag.green-tag  { background:var(--green); }
    .svc-tag.orange-tag { background:var(--orange); }

    .svc-card-body { padding:1.8rem 1.8rem 1.5rem; }
    .svc-icon-row {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:1rem;
    }
    .svc-icon-box {
      width:52px;height:52px; border-radius:14px;
      display:flex;align-items:center;justify-content:center;
      font-size:1.4rem;
    }
    .sib-blue   { background:rgba(10,61,98,.08);  color:var(--blue); }
    .sib-green  { background:rgba(26,188,156,.12); color:var(--green); }
    .sib-orange { background:rgba(243,156,18,.12); color:var(--orange); }

    .svc-num {
      font-family:'Syne',sans-serif;
      font-size:2.5rem; font-weight:800;
      color:rgba(10,61,98,.07);
      line-height:1;
    }
    .svc-card-body h3 { font-size:1.25rem; font-weight:700; margin-bottom:.6rem; color:#1a2a35; }
    .svc-card-body p  { font-size:.88rem; color:var(--gray); line-height:1.7; margin:0; }

    .svc-features {
      list-style:none;
      padding:0; margin:.8rem 0 1.2rem;
      display:flex; flex-direction:column; gap:.35rem;
    }
    .svc-features li {
      font-size:.84rem; color:#4a5c68;
      display:flex; align-items:center; gap:.5rem;
    }
    .svc-features li i { color:var(--green); font-size:.8rem; }

    .svc-card-footer {
      display:flex; align-items:center; justify-content:space-between;
      padding:1rem 1.8rem;
      border-top:1px solid #f0f3f5;
    }
    .svc-link {
      font-family:'Syne',sans-serif; font-size:.85rem; font-weight:700;
      color:var(--blue);
      display:flex; align-items:center; gap:.4rem;
      transition: gap .3s, color .3s;
    }
    .svc-mega-card:hover .svc-link { gap:.7rem; color:var(--green); }
    .svc-price-hint { font-size:.78rem; color:var(--gray); }

    /* ═══════════════════════════════════════════
       FEATURED / HIGHLIGHTED SERVICE
    ═══════════════════════════════════════════ */
    #featured-svc { padding: 80px 0; background: var(--white); }
    .featured-card {
      background: linear-gradient(130deg, var(--blue-dk) 0%, var(--blue) 60%, var(--blue-mid) 100%);
      border-radius:24px;
      overflow:hidden;
      position:relative;
    }
    .featured-card::before {
      content:'';
      position:absolute;inset:0;
      background:url('/images/pexels-906494-w1400.jpeg') center/cover;
      opacity:.1;
    }
    .featured-card-inner { position:relative;z-index:1; padding:4rem 3rem; }
    .featured-card h2 { font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; color:var(--white); margin-bottom:1rem; }
    .featured-card p  { color:rgba(255,255,255,.72); line-height:1.75; margin-bottom:1.5rem; font-size:1rem; }
    .featured-feats   { display:flex; flex-wrap:wrap; gap:.7rem; margin-bottom:2rem; }
    .feat-pill {
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.15);
      color:var(--white); border-radius:50px;
      padding:.3rem .9rem; font-size:.8rem;
      display:inline-flex;align-items:center;gap:.4rem;
    }
    .feat-pill i { color:var(--green); }
    .featured-img {
      width:100%;height:100%;min-height:320px;
      object-fit:cover;
      border-radius:16px;
      box-shadow:var(--shadow-lg);
    }

    /* ═══════════════════════════════════════════
       PROCESS SECTION
    ═══════════════════════════════════════════ */
    #process { padding:80px 0; background:var(--sand); }
    .process-line {
      display:flex; align-items:flex-start; gap:0;
      position:relative;
    }
    .process-line::before {
      content:'';
      position:absolute;
      top:28px; left:28px; right:28px;
      height:2px;
      background: linear-gradient(90deg, var(--green), var(--orange));
      z-index:0;
    }

    .process-step { flex:1; text-align:center; position:relative;z-index:1; padding:0 1rem; }
    .ps-dot {
      width:56px;height:56px;
      border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      font-size:1.3rem;
      margin:0 auto 1.2rem;
      font-family:'Syne',sans-serif; font-weight:800;
      font-size:1rem;
      box-shadow:0 6px 20px rgba(0,0,0,.1);
    }
    .ps-dot.blue   { background:var(--blue); color:var(--white); }
    .ps-dot.green  { background:var(--green); color:var(--white); }
    .ps-dot.orange { background:var(--orange); color:var(--white); }
    .ps-dot.teal   { background:#0d6680; color:var(--white); }
    .process-step h5 { font-size:.95rem; font-weight:700; margin-bottom:.4rem; color:#1a2a35; }
    .process-step p  { font-size:.82rem; color:var(--gray); line-height:1.6; margin:0; }

    /* ═══════════════════════════════════════════
       INDUSTRY SECTORS
    ═══════════════════════════════════════════ */
    #sectors { padding:80px 0; background:var(--white); }
    .sector-card {
      background:var(--sand);
      border-radius:16px;
      padding:1.6rem 1.4rem;
      text-align:center;
      border:1.5px solid #e8ecef;
      transition:all .35s;
      cursor:default;
    }
    .sector-card:hover {
      background:var(--blue);
      border-color:var(--blue);
      transform:translateY(-6px);
      box-shadow:var(--shadow);
    }
    .sector-card:hover h5,
    .sector-card:hover p { color:var(--white)!important; }
    .sector-card:hover .sec-icon { background:rgba(255,255,255,.15); color:var(--white); }
    .sec-icon {
      width:56px;height:56px;
      border-radius:14px;
      background:rgba(10,61,98,.08);
      color:var(--blue);
      display:flex;align-items:center;justify-content:center;
      font-size:1.4rem;
      margin:0 auto 1rem;
      transition:all .35s;
    }
    .sector-card h5 { font-size:.95rem; font-weight:700; margin-bottom:.35rem; }
    .sector-card p  { font-size:.78rem; color:var(--gray); margin:0; line-height:1.5; }

    /* ═══════════════════════════════════════════
       VALUE PROPS STRIP
    ═══════════════════════════════════════════ */
    #value-strip { background:var(--blue); padding:60px 0; }
    .vp-item { text-align:center; padding:1.5rem 1rem; }
    .vp-icon {
      width:64px;height:64px;
      border-radius:18px;
      background:rgba(255,255,255,.08);
      color:var(--green);
      display:flex;align-items:center;justify-content:center;
      font-size:1.6rem;
      margin:0 auto 1rem;
      transition:all .3s;
    }
    .vp-item:hover .vp-icon { background:var(--green); color:var(--white); transform:translateY(-4px); }
    .vp-item h5 { font-size:1rem; font-weight:700; color:var(--white); margin-bottom:.4rem; }
    .vp-item p  { font-size:.83rem; color:rgba(255,255,255,.6); line-height:1.6; margin:0; max-width:200px; margin:0 auto; }

    /* ═══════════════════════════════════════════
       PRICING TIER CARDS
    ═══════════════════════════════════════════ */
    #pricing { padding:80px 0; background:var(--sand); }
    .price-card {
      background:var(--white);
      border-radius:22px;
      padding:2.2rem 2rem;
      border:1.5px solid #e8ecef;
      transition:all .4s;
      height:100%;
    }
    .price-card.featured-price {
      background: linear-gradient(140deg, var(--blue-dk),var(--blue));
      border-color:transparent;
      position:relative;
      overflow:hidden;
    }
    .price-card.featured-price::before {
      content:'';
      position:absolute; inset:0;
      background:url('/images/pexels-1427541-w800.jpeg') center/cover;
      opacity:.07;
    }
    .price-card.featured-price > * { position:relative;z-index:1; }
    .price-card:not(.featured-price):hover { transform:translateY(-6px); box-shadow:var(--shadow); }

    .price-badge {
      background:var(--orange);
      color:var(--white);
      font-size:.72rem; font-family:'Syne',sans-serif; font-weight:700; letter-spacing:.06em;
      border-radius:50px;
      padding:.2rem .8rem;
      display:inline-block;
      margin-bottom:1rem;
    }
    .price-tier-name {
      font-size:1.3rem; font-weight:800; margin-bottom:.4rem;
    }
    .price-card:not(.featured-price) .price-tier-name { color:#1a2a35; }
    .price-card.featured-price .price-tier-name { color:var(--white); }
    .price-desc { font-size:.85rem; line-height:1.6; margin-bottom:1.5rem; }
    .price-card:not(.featured-price) .price-desc { color:var(--gray); }
    .price-card.featured-price .price-desc { color:rgba(255,255,255,.7); }

    .price-list { list-style:none; padding:0; margin:0 0 1.8rem; display:flex; flex-direction:column; gap:.6rem; }
    .price-list li { font-size:.86rem; display:flex; align-items:center; gap:.6rem; }
    .price-card:not(.featured-price) .price-list li { color:#3a4c58; }
    .price-card.featured-price .price-list li { color:rgba(255,255,255,.85); }
    .price-list li i { font-size:.85rem; }
    .price-card:not(.featured-price) .price-list li i { color:var(--green); }
    .price-card.featured-price .price-list li i { color:var(--green); }

    /* ═══════════════════════════════════════════
       FAQ
    ═══════════════════════════════════════════ */
    #faq { padding:80px 0; background:var(--white); }
    .faq-accordion .accordion-item {
      border:1.5px solid #e8ecef;
      border-radius:var(--radius)!important;
      margin-bottom:.75rem;
      overflow:hidden;
    }
    .faq-accordion .accordion-button {
      font-family:'Syne',sans-serif;
      font-weight:700;
      font-size:.97rem;
      color:#1a2a35;
      background:var(--white);
      padding:1.2rem 1.5rem;
    }
    .faq-accordion .accordion-button:not(.collapsed) {
      background:rgba(26,188,156,.06);
      color:var(--blue);
      box-shadow:none;
    }
    .faq-accordion .accordion-button::after {
      filter:none;
    }
    .faq-accordion .accordion-button:not(.collapsed)::after {
      filter:hue-rotate(130deg) saturate(2);
    }
    .faq-accordion .accordion-body {
      font-size:.88rem; color:var(--gray); line-height:1.75;
      background:var(--white); padding:0 1.5rem 1.2rem;
    }

    /* ═══════════════════════════════════════════
       CTA BOTTOM
    ═══════════════════════════════════════════ */
    #cta-bottom {
      padding:100px 0;
      background: linear-gradient(130deg, var(--blue-dk) 0%, var(--blue) 55%, var(--blue-mid) 100%);
      position:relative; overflow:hidden;
    }
    #cta-bottom::before {
      content:'';
      position:absolute;inset:0;
      background:url('/images/pexels-1427541-w1600.jpeg') center/cover;
      opacity:.07;
    }
    #cta-bottom::after {
      content:'';
      position:absolute;inset:0;
      background-image: linear-gradient(rgba(26,188,156,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(26,188,156,.05) 1px,transparent 1px);
      background-size:60px 60px;
    }
    .cta-inner { position:relative;z-index:2; text-align:center; }
    .cta-inner h2 { font-size:clamp(2rem,4.5vw,3.2rem); font-weight:800; color:var(--white); margin-bottom:1rem; }
    .cta-inner p  { color:rgba(255,255,255,.72); font-size:1.05rem; max-width:560px; margin:0 auto 2.5rem; line-height:1.75; }
    .cta-btns { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }

    /* Mobile */
    @media(max-width:991.98px){
      .hero-visual { margin-top:3rem; }
      .hero-img-grid .hig-1 { height:180px; }
      .hero-img-grid .hig-2,.hero-img-grid .hig-3 { height:120px; }
      .hero-stat-pill.p2 { right:0; }
      .hero-stat-pill.p1 { left:0; }
      .featured-card-inner { padding:2.5rem 2rem; }
      .process-line::before { display:none; }
      .process-line { flex-direction:column; align-items:center; gap:1.5rem; }
      .process-step { max-width:300px; }
    }
    @media(max-width:575.98px){
      .hero-title { font-size:2.4rem; }
      #svc-filter { position:relative; }
    }