:root{
      color-scheme: light;
      --bg: #f6f7fb;
      --bg2:#eef1f6;
      --card:#ffffff;
      --ink:#0b1020;
      --muted:#5b6676;
      --line: rgba(11,16,32,.10);

      --primary:#2457ff;
      --primary2:#5b8cff;
      --accent:#16c2a3;
      --teal:#16c2a3;

      --radius-xl: 28px;
      --radius-lg: 20px;
      --radius-md: 14px;

      --shadow-sm: 0 10px 24px rgba(11,16,32,.08);
      --shadow-md: 0 18px 40px rgba(11,16,32,.12);
      --shadow-lg: 0 28px 70px rgba(11,16,32,.16);

      --container: min(1180px, calc(100% - 3rem));
      --ease: cubic-bezier(.2,.8,.2,1);
    }

*{box-sizing:border-box}
html,body{height:100%; overflow-x:hidden}
html{scroll-behavior: smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior: auto;}
}
    body{
      margin:0;
      font-family:"Manrope", "Segoe UI", Arial, sans-serif;
      color:var(--ink);
      background:
        radial-gradient(900px 600px at 12% 12%, rgba(36,87,255,.10), transparent 62%),
        radial-gradient(900px 600px at 90% 0%, rgba(91,140,255,.10), transparent 58%),
        radial-gradient(900px 600px at 100% 85%, rgba(22,194,163,.10), transparent 62%),
        linear-gradient(180deg, var(--bg), var(--bg2));
      line-height:1.65;
      overflow-x:hidden;
      position:relative;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .container{width:var(--container); margin:0 auto}
    .section{padding: clamp(4.2rem, 5vw, 6.5rem) 0}
    .section.alt{background: linear-gradient(180deg, transparent, rgba(0,0,0,.02), transparent)}

    /* Accessibility */
    .skip-link{
      position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
    }
    .skip-link:focus{
      left:1rem; top:1rem; width:auto; height:auto;
      padding:.8rem 1rem; border-radius:999px;
      background:var(--card); box-shadow:var(--shadow-md);
      z-index:9999; outline:2px solid rgba(36,87,255,.45);
    }
    :focus-visible{outline: 3px solid rgba(36,87,255,.45); outline-offset: 3px; border-radius: 10px}

    /* Background objects */
    .bg-objects{
      position: fixed;
      inset: 0;
      overflow: hidden;
      z-index: 0;
      pointer-events: none;
    }
    .bg-obj{
      position: absolute;
      border-radius: 50%;
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), rgba(36,87,255,.30) 38%, rgba(22,194,163,.22) 70%, transparent 72%);
      opacity: .28;
      filter: blur(1px);
      animation: floatUp var(--dur, 34s) linear infinite;
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
    .bg-obj.obj-1{width: 360px; height: 360px; left: -6%; top: 110%; --dur: 42s; --x: 6vw; animation-delay: -8s;}
    .bg-obj.obj-2{width: 240px; height: 240px; left: 16%; top: 130%; --dur: 36s; --x: -4vw; animation-delay: -18s;}
    .bg-obj.obj-3{width: 480px; height: 480px; left: 52%; top: 118%; --dur: 48s; --x: 5vw; animation-delay: -28s; opacity:.2;}
    .bg-obj.obj-4{width: 200px; height: 200px; left: 78%; top: 128%; --dur: 30s; --x: -3vw; animation-delay: -12s; opacity:.32;}
    .bg-obj.obj-5{width: 280px; height: 280px; left: 86%; top: 140%; --dur: 38s; --x: -5vw; animation-delay: -22s; opacity:.22;}
    .bg-obj.obj-6{width: 180px; height: 180px; left: 34%; top: 150%; --dur: 28s; --x: 4vw; animation-delay: -16s; opacity:.3;}

    @keyframes floatUp{
      0%{transform: translate3d(0, 0, 0) scale(1);}
      100%{transform: translate3d(var(--x, 0), -240vh, 0) scale(1.05);}
    }

    /* Navbar */
    header.navbar{
      position:fixed; inset:0 0 auto 0;
      z-index:200;
      background: color-mix(in srgb, var(--bg) 75%, transparent);
      backdrop-filter: blur(14px);
      border-bottom:1px solid var(--line);
    }
    .nav-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:1.25rem;
      padding:.95rem 0;
    }
    .brand{
      display:flex; align-items:center; gap:.75rem;
      font-weight:700;
      letter-spacing:.2px;
      min-width: 0;
    }
    .brand img{
  width: clamp(120px, 18vw, 200px);
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

    /* Topbar */
    .topbar{
      border-bottom: 1px solid var(--line);
      background: color-mix(in srgb, var(--card) 35%, transparent);
    }
    .topbar-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap: 1rem;
      padding: .55rem 0;
      font-size: .92rem;
    }
    .topbar-left, .topbar-right{
      display:flex; align-items:center; gap: .85rem;
      flex-wrap: wrap;
    }
    .tb-item{
      display:inline-flex; align-items:center; gap: .45rem;
      color: color-mix(in srgb, var(--muted) 90%, var(--ink));
      font-weight: 650;
    }
    .tb-item i{opacity:.9}
    .tb-item:hover{color: var(--ink)}
    .tb-chip{
      display:inline-flex; align-items:center; gap:.5rem;
      padding: .38rem .75rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--card) 60%, transparent);
      font-weight: 850;
    }
    .tb-social{
      width: 34px; height: 34px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--card) 60%, transparent);
      display:grid; place-items:center;
      transition: transform .18s var(--ease), background .18s var(--ease);
    }
    .tb-social:hover{transform: translateY(-2px); background: rgba(36,87,255,.12)}

    /* Brand text */
    .brand-text{display:flex; flex-direction:column; line-height:1.05}
    .brand-name{font-weight: 950}
    .brand-tagline{
      font-size: .82rem;
      color: var(--muted);
      font-weight: 650;
      margin-top: .22rem;
    }

    .nav-links{
      display:flex; gap:1.35rem;
      padding:.35rem .6rem;
      border-radius:999px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--card) 55%, transparent);
    }
    .nav-links a{
      position:relative;
      font-weight:600; font-size:.95rem;
      color: color-mix(in srgb, var(--ink) 90%, var(--muted));
      padding:.55rem .85rem;
      border-radius:999px;
      transition: background .2s var(--ease), color .2s var(--ease);
    }
    .nav-links a:hover{
      background: rgba(36,87,255,.10);
      color: var(--ink);
    }
    .nav-links a.active{
      background: rgba(36,87,255,.14);
      color: var(--ink);
    }

    .nav-cta{display:flex; align-items:center; gap:.75rem}
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
      padding:.92rem 1.2rem;
      border-radius:999px;
      font-weight:700;
      border:1px solid transparent;
      cursor:pointer;
      transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
      user-select:none;
      white-space:nowrap;
    }
    .btn i{font-size:1.05rem}
    .btn-primary{
      background: linear-gradient(135deg, var(--primary), var(--primary2));
      color:#fff;
      box-shadow: 0 16px 36px rgba(36,87,255,.35);
    }
    .btn-primary:hover{transform: translateY(-2px); box-shadow: 0 20px 44px rgba(36,87,255,.42)}
    .btn-outline{
      background: color-mix(in srgb, var(--card) 55%, transparent);
      border-color: var(--line);
      color: var(--ink);
    }
    .btn-outline:hover{transform: translateY(-2px); background: rgba(255,255,255,.08)}
    .btn-ghost{
      width: 44px; height: 44px;
      padding: 0;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--card) 60%, transparent);
      color: var(--ink);
    }
    .btn-ghost:hover{transform: translateY(-2px); background: rgba(36,87,255,.12)}

    /* Burger */
    .menu-toggle{
      display:none;
      width:44px; height:44px;
      border-radius:14px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--card) 60%, transparent);
      color: var(--ink);
      place-items:center;
    }
    .burger{
      width: 20px; height: 2px;
      background: var(--ink);
      border-radius: 999px;
      position: relative;
      display:block;
      transition: transform .2s var(--ease), background .2s var(--ease);
    }
    .burger::before,.burger::after{
      content:"";
      position:absolute; left:0;
      width: 20px; height: 2px;
      background: var(--ink);
      border-radius: 999px;
      transition: transform .2s var(--ease), top .2s var(--ease), opacity .2s var(--ease);
    }
    .burger::before{top:-6px}
    .burger::after{top:6px}
    .menu-toggle.is-open .burger{background: transparent}
    .menu-toggle.is-open .burger::before{top:0; transform: rotate(45deg)}
    .menu-toggle.is-open .burger::after{top:0; transform: rotate(-45deg)}

    /* Mobile drawer */
    .mobile-drawer{
      position: fixed;
      inset: 0;
      display:none;
      z-index: 1000001;
    }
    .mobile-drawer.is-open{display:block}
    .mobile-drawer:target{display:block}
    .drawer-backdrop{
      position:absolute; inset:0;
      background: color-mix(in srgb, var(--bg) 70%, var(--card));
      border:none;
      z-index: 1;
    }
    .mobile-panel{
      position:absolute;
      top: 0; right: 0;
      height: 100%;
      width: min(420px, 92vw);
      background: color-mix(in srgb, var(--bg) 70%, var(--card));
      border-left: 1px solid var(--line);
      box-shadow: var(--shadow-lg);
      padding: 1.1rem;
      transform: translateX(16px);
      opacity: 0;
      transition: transform .22s var(--ease), opacity .22s var(--ease);
      z-index: 2;
    }
    .mobile-drawer.is-open .mobile-panel{
      transform: translateX(0);
      opacity: 1;
    }
    .mobile-drawer:target .mobile-panel{
      transform: translateX(0);
      opacity: 1;
    }
    .mobile-head{
      display:flex; align-items:center; justify-content:space-between;
      gap: 1rem;
      padding-bottom: .9rem;
      border-bottom: 1px solid var(--line);
    }
    .mobile-brand{display:flex; align-items:center; gap: .75rem}
    .mobile-sub{color: var(--muted); font-weight: 650; font-size: .9rem; margin-top: .1rem}
    .mobile-close{
      width: 44px; height: 44px;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--card) 60%, transparent);
      color: var(--ink);
      display:grid; place-items:center;
      cursor:pointer;
    }
    .mobile-links{
      display:grid; gap:.6rem;
      padding: 1rem 0;
    }
    .mobile-links a{
      display:flex; align-items:center; justify-content:space-between;
      padding: .95rem 1rem;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--card) 60%, transparent);
      font-weight: 850;
    }
    .mobile-actions{
      display:grid; gap:.7rem;
      padding-top: .6rem;
    }
    .mobile-meta{
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-weight: 650;
      display:grid; gap:.4rem;
    }
    .mobile-meta i{margin-right:.35rem}
    .hero{ overflow:hidden; }

    /* Responsive header rules */
@media (max-width: 860px){
  .topbar{display:none}
  .nav-links, .nav-cta{display:none}
  .menu-toggle{display:grid; margin-left:auto; position:relative;}
  .nav-inner{justify-content:space-between;}
  .brand-tagline{display:none}
}

/* Fallback if animations are disabled/unavailable */
.aos-disabled [data-aos],
.reveal-disabled .reveal,
.reveal-disabled .reveal > *{
  opacity: 1 !important;
  transform: none !important;
}
html:not(.aos-ready) [data-aos]{
  opacity: 1 !important;
  transform: none !important;
}
html:not(.reveal-ready) .reveal:not([data-aos]){
  opacity: 1 !important;
  transform: none !important;
}

    @media (max-width: 480px){
      header.navbar .container{width: calc(100% - 2rem)}
      .nav-inner{gap:.5rem; width:100%}
      .brand{max-width: calc(100% - 52px)}
      .brand img{width: clamp(96px, 28vw, 128px)}
      .menu-toggle{width: 40px; height: 40px; flex: 0 0 auto}
    }

    main{padding-top: 92px}
    @media (max-width: 860px){
      main{padding-top: 86px}
    }

    header.navbar,
    main,
    footer{
      position: relative;
      z-index: 1;
    }

    /* Hero */
    .hero{
      position:relative;
      padding: clamp(5.2rem, 7vw, 7.8rem) 0 4.5rem;
      min-height: calc(100vh - 92px);
      display:flex;
      align-items:center;
    }
    .hero::before{
      content:"";
      position:absolute; inset: -40px -60px -60px -60px;
      background:
        radial-gradient(600px 420px at 18% 30%, rgba(36,87,255,.22), transparent 60%),
        radial-gradient(520px 420px at 72% 20%, rgba(22,194,163,.16), transparent 58%),
        radial-gradient(520px 420px at 86% 82%, rgba(22,194,163,.14), transparent 60%);
      filter: blur(8px);
      opacity:.95;
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: clamp(1.8rem, 4vw, 3.2rem);
      align-items:center;
    }
    .pill{
      display:inline-flex; align-items:center; gap:.55rem;
      padding:.48rem 1rem;
      border-radius:999px;
      border:1px solid rgba(36,87,255,.25);
      background: rgba(36,87,255,.10);
      color: color-mix(in srgb, var(--ink) 92%, var(--primary));
      font-weight:800;
      font-size:.86rem;
      letter-spacing:.2px;
      width: fit-content;
    }
    .hero h1{
      font-family: inherit;
      font-size: clamp(2.6rem, 2.2rem + 2.8vw, 5.2rem);
      line-height:1.02;
      margin: 1.1rem 0 1.1rem;
      letter-spacing:.2px;
    }
    .hero p{
      color: var(--muted);
      font-size:1.08rem;
      max-width: 44rem;
    }
    .hero-actions{
      display:flex; gap:.85rem; flex-wrap:wrap;
      margin: 1.85rem 0 1.9rem;
    }
    .hero-stats{
      display:flex; gap:.9rem; flex-wrap:wrap;
      margin-top:.25rem;
    }
    .stat{
      flex: 1 1 160px;
      background: color-mix(in srgb, var(--card) 70%, transparent);
      border:1px solid var(--line);
      border-radius: 18px;
      padding: 1rem 1.1rem;
      box-shadow: var(--shadow-sm);
    }
    .stat-number{
      display:block;
      font-family: inherit;
      font-size: 1.7rem;
      line-height:1.1;
    }
    .stat-label{
      color: var(--muted);
      font-weight: 600;
      font-size:.92rem;
    }
    .hero-visual{display:grid; gap: 1rem;}
    .hero-card{
      background: color-mix(in srgb, var(--card) 72%, transparent);
      border:1px solid var(--line);
      border-radius: var(--radius-xl);
      overflow:hidden;
      box-shadow: var(--shadow-md);
      position:relative;
    }
    .hero-card--main{
      aspect-ratio: 16/12;
      min-height: 340px;
    }
    .hero-card--main img{
      width:100%; height:100%;
      object-fit: cover;
      transform: scale(1.02);
      filter: saturate(1.05) contrast(1.03);
    }
    .hero-card__overlay{
      position:absolute; inset: auto 1.2rem 1.2rem 1.2rem;
      display:flex; flex-wrap:wrap; gap:.6rem;
    }
    .hero-badge{
      background: rgba(11,16,32,.82);
      color:#fff;
      padding:.45rem .85rem;
      border-radius: 999px;
      font-size:.82rem;
      font-weight:750;
      letter-spacing:.2px;
      backdrop-filter: blur(10px);
    }
    .hero-card--accent{
      padding:1.25rem 1.25rem;
      background:
        radial-gradient(500px 260px at 18% 20%, rgba(22,194,163,.18), transparent 60%),
        radial-gradient(500px 260px at 80% 60%, rgba(36,87,255,.16), transparent 60%),
        color-mix(in srgb, var(--card) 65%, transparent);
    }
    .accent-row{
      display:flex; align-items:center; justify-content:space-between;
      padding:.85rem .95rem;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--card) 70%, transparent);
    }
    .accent-row strong{font-weight:850}
    .accent-row span{color:var(--muted); font-weight:750}

    /* Headings */
    .eyebrow{
      text-transform: uppercase;
      letter-spacing: .26em;
      font-size: .76rem;
      font-weight: 850;
      color: color-mix(in srgb, var(--muted) 95%, var(--ink));
    }
    .title{
      font-family: inherit;
      font-size: clamp(2rem, 1.8rem + 1.6vw, 3.6rem);
      margin:.7rem 0 1rem;
      line-height:1.08;
      letter-spacing:.2px;
    }
    .subtitle{
      color: var(--muted);
      font-size: 1.05rem;
      max-width: 46rem;
    }

    /* Grids */
    .grid-3{display:grid; gap:1.2rem; grid-template-columns: repeat(3, minmax(0,1fr))}
    .grid-2{display:grid; gap:1.2rem; grid-template-columns: repeat(2, minmax(0,1fr))}
    .card{
      background: color-mix(in srgb, var(--card) 74%, transparent);
      border:1px solid var(--line);
      border-radius: 24px;
      box-shadow: var(--shadow-sm);
    }
    .card.pad{padding:1.7rem}
    .card.hover{transition: transform .25s var(--ease), box-shadow .25s var(--ease);}
    .card.hover:hover{transform: translateY(-6px); box-shadow: var(--shadow-lg)}

    /* Services */
    .services-grid{margin-top: 2rem}
    .service-icon{
      width:52px; height:52px; border-radius:16px;
      display:grid; place-items:center;
      background: rgba(36,87,255,.12);
      border:1px solid rgba(36,87,255,.18);
      color: var(--primary);
      font-size: 1.35rem;
    }
    .text-link{
      display:inline-flex; align-items:center; gap:.45rem;
      font-weight:850;
      color: var(--primary);
      width:fit-content;
    }
    .text-link i{transition: transform .2s var(--ease)}
    .text-link:hover i{transform: translateX(3px)}

    /* Services cards with background images */
    .services-grid .card{
      position:relative;
      overflow:hidden;
      color:#f8f9ff;
      background:
        linear-gradient(135deg, rgba(11,16,32,.96), rgba(11,16,32,.68)),
        var(--service-bg);
      background-size: auto, 120% 120%;
      background-position: center, 50% 50%;
      animation: serviceBg 18s ease-in-out infinite;
      will-change: background-position;
      border-color: rgba(255,255,255,.18);
      box-shadow: var(--shadow-md);
    }
    .services-grid .card::before{
      content:"";
      position:absolute;
      inset:0;
      background: rgba(0,0,0,.24);
      pointer-events:none;
    }
    .services-grid .card::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(520px 280px at 18% 20%, rgba(36,87,255,.26), transparent 60%),
        radial-gradient(520px 300px at 85% 80%, rgba(22,194,163,.20), transparent 60%);
      opacity:.9;
      pointer-events:none;
      animation: serviceGlow 9s ease-in-out infinite alternate;
    }
    .services-grid .card > *{
      position:relative;
      z-index:1;
    }
    .services-grid .service-icon{
      background: rgba(255,255,255,.16);
      border:1px solid rgba(255,255,255,.28);
      color:#fff;
    }
    .services-grid .service-icon i{
      display:block;
      animation: iconPulse 3.6s ease-in-out infinite;
    }
    .services-grid .subtitle{
      color: rgba(248,249,255,.78);
    }
    .services-grid .text-link{
      color:#fff;
    }
    .services-grid .text-link:hover{
      color:#fff;
    }
    .services-grid .card:nth-child(1){ --service-bg: url("https://cdn.pixabay.com/photo/2017/01/04/20/17/web-design-1953138_1280.jpg"); }
    .services-grid .card:nth-child(2){ --service-bg: url("https://images.unsplash.com/photo-1766991517518-918acb35e8e3?auto=format&fit=crop&fm=jpg&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&ixlib=rb-4.1.0&q=60&w=3000"); }
    .services-grid .card:nth-child(3){ --service-bg: url("https://cdn.pixabay.com/photo/2022/12/11/20/41/artificial-intelligence-7649720_1280.jpg"); }
    .services-grid .card:nth-child(4){ --service-bg: url("https://cdn.pixabay.com/photo/2016/04/08/22/09/modern-analyst-1317115_1280.jpg"); }
    .services-grid .card:nth-child(5){ --service-bg: url("https://cdn.pixabay.com/photo/2019/11/08/10/34/cyber-4610993_1280.jpg"); }
    .services-grid .card:nth-child(6){ --service-bg: url("https://cdn.pixabay.com/photo/2018/07/01/16/54/hardware-3509893_1280.jpg"); }

    @keyframes serviceBg{
      0%{background-position: center, 45% 40%;}
      50%{background-position: center, 60% 50%;}
      100%{background-position: center, 50% 65%;}
    }
    @keyframes serviceGlow{
      0%{transform: translate3d(0,0,0); opacity:.75;}
      100%{transform: translate3d(-10px,-8px,0); opacity:1;}
    }
    @keyframes iconPulse{
      0%,100%{transform: scale(1);}
      50%{transform: scale(1.08);}
    }

    @media (prefers-reduced-motion: reduce){
      .services-grid .card,
      .services-grid .card::after,
      .services-grid .service-icon i{
        animation: none !important;
      }
    }

    @media (prefers-reduced-motion: reduce){
      .bg-obj{
        animation: none !important;
      }
    }

    /* Logos row */
    .logos{
      display:grid;
      grid-template-columns: repeat(6, minmax(0,1fr));
      gap:.8rem;
      margin-top: 1.6rem;
      opacity:.95;
    }
    .logo-pill{
      border: 1px dashed var(--line);
      border-radius: 18px;
      padding: .9rem 1rem;
      text-align:center;
      font-weight: 850;
      color: color-mix(in srgb, var(--muted) 92%, var(--ink));
      background: color-mix(in srgb, var(--card) 55%, transparent);
    }

    /* Split / Process */
    .split{display:grid; gap: 2.2rem; grid-template-columns: 1fr 1fr; align-items:center}
    .process-list{display:grid; gap:.85rem; margin-top:1.6rem}
    .process-item{
      display:grid;
      grid-template-columns: 44px 1fr;
      gap:.95rem;
      align-items:start;
      padding: 1rem 1rem;
      border-radius: 22px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--card) 65%, transparent);
    }
    .process-index{
      width:38px; height:38px; border-radius: 50%;
      display:grid; place-items:center;
      background: linear-gradient(135deg, var(--primary), var(--primary2));
      color:#fff; font-weight: 950;
      box-shadow: 0 12px 24px rgba(36,87,255,.35);
    }
    .insight-panel{padding: 1.9rem}
    .insight-row{
      display:flex; align-items:center; justify-content:space-between; gap:1rem;
      padding: 1rem 0;
      border-bottom: 1px dashed var(--line);
    }
    .insight-row:last-child{border-bottom:none}
    .insight-value{
      font-family: inherit;
      font-size: 1.85rem;
      letter-spacing:.2px;
      white-space:nowrap;
    }

    /* Projects */
    .project-grid{margin-top: 2rem}
    .project-card figure{
      margin:0;
      aspect-ratio: 4 / 3;
      overflow:hidden;
      position:relative;
    }
    .project-card img{
      width:100%; height:100%;
      object-fit:cover;
      transition: transform .45s var(--ease);
    }
    .project-card:hover img{transform: scale(1.06)}
    .project-tag{
      position:absolute; top:1rem; left:1rem;
      background: rgba(11,16,32,.80);
      color:#fff;
      padding:.35rem .85rem;
      border-radius: 999px;
      font-size:.78rem;
      font-weight: 850;
      backdrop-filter: blur(10px);
    }
    .project-content{padding: 1.3rem 1.4rem}

    /* Testimonials */
    .testimonials{margin-top: 2rem}
    .quote{display:grid; gap:.9rem; padding: 1.5rem;}
    .quote-top{
      display:flex; align-items:center; justify-content:space-between; gap:1rem;
      color: var(--muted); font-weight: 750;
    }
    .stars{color: color-mix(in srgb, var(--accent) 92%, #fff)}
    .quote p{margin:0; font-size: 1.03rem; color: color-mix(in srgb, var(--ink) 92%, var(--muted))}
    .quote-user{display:flex; align-items:center; gap:.75rem; margin-top:.2rem;}
    .avatar{
      width:42px; height:42px; border-radius: 14px;
      background: linear-gradient(135deg, rgba(36,87,255,.25), rgba(22,194,163,.20));
      border:1px solid var(--line);
    }
    .quote-user strong{font-weight: 950}
    .quote-user span{display:block; color: var(--muted); font-weight: 650; font-size:.92rem}

    /* FAQ */
    .faq{margin-top: 2rem}
    details{
      border:1px solid var(--line);
      border-radius: 20px;
      background: color-mix(in srgb, var(--card) 65%, transparent);
      padding: 1rem 1.1rem;
    }
    details + details{margin-top:.85rem}
    summary{
      cursor:pointer;
      font-weight: 900;
      list-style:none;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    summary::-webkit-details-marker{display:none}
    summary .chev{
      width:36px; height:36px;
      border-radius: 14px;
      display:grid; place-items:center;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--card) 60%, transparent);
      transition: transform .2s var(--ease);
    }
    details[open] summary .chev{transform: rotate(180deg)}
    details p{margin:.8rem 0 0; color: var(--muted); font-weight: 600}

    /* CTA */
    .cta{
      position:relative;
      overflow:hidden;
      color:#fff;
      background: linear-gradient(120deg, #1b2a5a, #2f6bff 45%, #19c6a5 95%);
      border-top: 1px solid rgba(255,255,255,.14);
      border-bottom: 1px solid rgba(255,255,255,.14);
    }
    .cta::before{
      content:"";
      position:absolute; inset: -40px;
      background:
        radial-gradient(500px 260px at 20% 30%, rgba(255,255,255,.18), transparent 60%),
        radial-gradient(540px 260px at 80% 60%, rgba(255,255,255,.14), transparent 62%);
      filter: blur(4px);
      opacity:.9;
      pointer-events:none;
    }
    .cta .cta-content{
      position:relative;
      text-align:center;
      display:grid;
      gap: 1.05rem;
      padding: clamp(3.6rem, 5vw, 5rem) 0;
    }
    .cta h2{
      font-family: inherit;
      font-size: clamp(2rem, 1.7rem + 1.8vw, 3.4rem);
      margin:0;
      line-height:1.08;
    }
    .cta .subtitle{color: rgba(255,255,255,.82); margin: 0 auto}
    .cta .btn-primary{box-shadow: 0 18px 50px rgba(0,0,0,.25)}

    /* Contact */
    .contact-grid{margin-top: 2rem; display:grid; gap:1.2rem; grid-template-columns: 1.1fr .9fr}
    .form-field{display:grid; gap:.4rem; margin-bottom: 1rem; font-weight: 750}
    .form-field input,.form-field textarea{
      border-radius: 16px;
      border: 1px solid var(--line);
      padding: .95rem 1rem;
      font: inherit;
      color: var(--ink);
      background: color-mix(in srgb, var(--card) 72%, transparent);
      transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
    }
    .form-field input::placeholder,.form-field textarea::placeholder{color: color-mix(in srgb, var(--muted) 85%, transparent)}
    .form-field input:focus,.form-field textarea:focus{
      outline:none;
      border-color: rgba(36,87,255,.45);
      box-shadow: 0 0 0 4px rgba(36,87,255,.18);
    }

    .form-actions{
      display:flex;
      gap:.75rem;
      flex-wrap:wrap;
      margin-top:.4rem;
    }
    .form-actions .btn{flex: 1 1 220px}

    .btn-whatsapp{
      background: linear-gradient(135deg, #16c2a3, #0ea88d);
      color:#fff;
      border: 1px solid transparent;
      box-shadow: 0 14px 30px rgba(22,194,163,.28);
    }
    .btn-whatsapp:hover{
      transform: translateY(-2px);
      box-shadow: 0 18px 40px rgba(22,194,163,.35);
    }

    .info-list{display:grid; gap:.8rem; margin: 1.1rem 0 1.2rem}
    .info-item{
      display:grid;
      grid-template-columns: 42px 1fr;
      gap:.8rem;
      align-items:start;
      padding: .9rem 1rem;
      border-radius: 18px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--card) 65%, transparent);
    }
    .info-ico{
      width:42px; height:42px;
      border-radius: 16px;
      display:grid; place-items:center;
      background: rgba(36,87,255,.12);
      border:1px solid rgba(36,87,255,.18);
      color: var(--primary);
      font-size: 1.1rem;
    }
    .info-item p{margin:.15rem 0 0; color: var(--muted); font-weight: 650}
    .socials{display:flex; flex-wrap:wrap; gap:.65rem}
    .socials a{
      width:42px; height:42px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: color-mix(in srgb, var(--card) 65%, transparent);
      display:grid; place-items:center;
      transition: transform .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
    }
    .socials a:hover{transform: translateY(-2px); background: rgba(36,87,255,.14)}
    .socials i{font-size:1.1rem}

    /* Footer */
    footer{
      background: color-mix(in srgb, #060814 85%, var(--bg));
      color:#fff;
      padding: 3.6rem 0 2.3rem;
      border-top:1px solid rgba(255,255,255,.10);
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap:1.6rem;
      margin-bottom: 2rem;
    }
    footer p, footer a{color: rgba(255,255,255,.72)}
    footer a:hover{color:#fff}
    .newsletter{
      display:flex; gap:.6rem; margin-top:.9rem;
    }
    .newsletter input{
      flex:1;
      border-radius: 999px;
      border:1px solid rgba(255,255,255,.22);
      padding: .85rem 1rem;
      background: rgba(255,255,255,.08);
      color:#fff;
    }
    .newsletter button,
    .newsletter a{
      border-radius: 999px;
      border:none;
      padding: 0 1.1rem;
      background: linear-gradient(135deg, var(--primary), var(--primary2));
      color:#fff;
      font-weight: 850;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      min-height: 42px;
    }
    .footer-bottom{
      padding-top: 1.2rem;
      border-top: 1px solid rgba(255,255,255,.10);
      text-align:center;
      color: rgba(255,255,255,.62);
      font-weight: 650;
      font-size: .92rem;
    }

    /* Scroll top + toast */
    .scroll-top{
      position:fixed; right: 1.6rem; bottom: 1.6rem;
      width: 50px; height: 50px;
      border-radius: 18px;
      border:1px solid var(--line);
      background: linear-gradient(135deg, var(--primary), var(--primary2));
      color:#fff;
      display:grid; place-items:center;
      box-shadow: var(--shadow-md);
      opacity:0; transform: translateY(10px);
      pointer-events:none;
      transition: opacity .2s var(--ease), transform .2s var(--ease);
      z-index:120;
      cursor:pointer;
    }
    .scroll-top.is-visible{opacity:1; transform: translateY(0); pointer-events:auto}

    .toast{
      position: fixed;
      left: 50%;
      bottom: 1.4rem;
      transform: translateX(-50%) translateY(14px);
      background: color-mix(in srgb, var(--card) 78%, transparent);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-md);
      border-radius: 18px;
      padding: .9rem 1rem;
      display:flex;
      align-items:center;
      gap:.65rem;
      opacity:0;
      pointer-events:none;
      transition: opacity .22s var(--ease), transform .22s var(--ease);
      z-index:130;
      max-width: min(560px, calc(100% - 2rem));
    }
    .toast.is-show{
      opacity:1;
      transform: translateX(-50%) translateY(0);
      pointer-events:auto;
    }
    .toast .dot{
      width:10px; height:10px; border-radius:50%;
      background: var(--teal);
      box-shadow: 0 0 0 6px rgba(22,194,163,.16);
    }
    .toast strong{font-weight: 950}
    .toast span{color: var(--muted); font-weight: 650}

    /* Modal */
    .modal{
      position: fixed;
      inset: 0;
      display:none;
      align-items:center;
      justify-content:center;
      z-index: 1000002;
      padding: 1rem;
    }
    .modal.is-open{display:flex}
    .modal:target{display:flex}
    .modal-backdrop{
      position:absolute;
      inset:0;
      background: rgba(8,12,24,.55);
      border:none;
    }
    .modal-panel{
      position:relative;
      width: min(520px, 92vw);
      background: color-mix(in srgb, var(--card) 78%, transparent);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-lg);
      border-radius: 24px;
      padding: 1.6rem;
      transform: translateY(14px) scale(.98);
      opacity:0;
      transition: opacity .22s var(--ease), transform .22s var(--ease);
      z-index:1;
    }
    .modal.is-open .modal-panel{
      transform: translateY(0) scale(1);
      opacity:1;
    }
    .modal:target .modal-panel{
      transform: translateY(0) scale(1);
      opacity:1;
    }
    .modal-close{
      position:absolute;
      top: 12px;
      right: 12px;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--card) 70%, transparent);
      color: var(--ink);
      display:grid;
      place-items:center;
      cursor:pointer;
    }

    .hp-field{
      position:absolute !important;
      left:-9999px !important;
      width:1px !important;
      height:1px !important;
      opacity:0 !important;
      pointer-events:none !important;
    }

    /* Reveal */
    .reveal:not([data-aos]){
      opacity:0;
      transform: translateY(18px);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    .reveal:not([data-aos]).is-visible{opacity:1; transform: translateY(0)}

    /* Responsive */
    @media (max-width: 1024px){
      .hero-grid{grid-template-columns: 1fr}
      .split{grid-template-columns: 1fr}
      .contact-grid{grid-template-columns: 1fr}
      .grid-3{grid-template-columns: repeat(2, minmax(0,1fr))}
      .logos{grid-template-columns: repeat(3, minmax(0,1fr))}
      .footer-grid{grid-template-columns: repeat(2, minmax(0,1fr))}
    }
    @media (max-width: 560px){
      .container{width: min(calc(100% - 2rem), 560px)}
      .grid-3, .grid-2{grid-template-columns: 1fr}
      .hero-actions{flex-direction: column; align-items: stretch}
      .btn{width: 100%}
      .newsletter{flex-direction: column}
      .newsletter button{padding: .9rem 1rem}
      .scroll-top{right: 1.1rem; bottom: 1.1rem}
    }

    /* ===== Added responsive refinements (improvements) ===== */
    /* Make hero and spacing slightly tighter on narrow screens */
    .hero{min-height: calc(100vh - 84px)}
    .hero .pill{font-size:.78rem;padding:.36rem .8rem}
    .hero p{font-size:1rem}
    .stat-number{font-size:1.45rem}

    /* Make mobile panel scrollable and enable momentum scrolling on iOS */
    .mobile-panel{
      -webkit-overflow-scrolling: touch;
      overflow:auto;
      padding-bottom:2.5rem;
    }

    /* Ensure images don't force fixed height on small screens */
    .hero-card--main img,
    .project-card img{
      width:100%;
      height:auto;
      object-fit:cover;
      object-position:center;
    }

    /* Tighten container/padding on small devices */
    @media (max-width:560px){
      .section{padding: clamp(2rem,4vw,3.2rem) 0}
      .nav-inner{padding:.6rem 0}
      .brand img{width: clamp(96px, 32vw, 140px); height:auto}
      .hero{padding: clamp(3rem,5vw,4.5rem) 0 2.5rem; min-height: calc(100vh - 88px)}
      .btn{padding:.78rem 1rem}
      .hero h1{font-size: clamp(1.8rem, 2.2rem, 2.6rem)}
      .logos{grid-template-columns: repeat(3,1fr)}
      .grid-3{grid-template-columns: 1fr}
    }

    /* Improve focus outline visibility */
    :focus{outline: 3px solid rgba(36,87,255,.2); outline-offset: 3px; border-radius:12px}

    /* Ensure mobile menu button is visible and right-aligned */
    @media (max-width: 860px) {
      .nav-inner { justify-content: flex-start; align-items: center; position:relative; }

      /* hide full desktop nav on small screens (safety) */
      .nav-links, .nav-cta { display: none !important; }

      /* force menu button visible, placed at right */
      .menu-toggle {
        display: grid !important;
        order: 99;
        margin-left: auto;
        width: 44px;
        height: 44px;
        z-index: 700;
        position: relative;
        touch-action: auto;
      }

      /* keep brand at start */
      .brand { order: 1; }
    }

    /* extra safety for any layout pushing button off */
.menu-toggle { box-shadow: 0 8px 20px rgba(0,0,0,.08); }
/* Fix: header above everything + responsive logo + force burger visible on small screens */
header.navbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:999999 !important;
}


/* Ensure burger always visible on small screens */

/* --- Fixe le débordement de l'image .hero-card--main sur mobile --- */
@media (max-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr; /* pile tout en colonne */
  }

  .hero-visual {
    width: 100%;
    max-width: 100vw;
  }
  .hero-card--main {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 160px;   /* tu peux ajuster pour le mobile */
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
  }
  .hero-card--main img {
    width: 100% !important;
    max-width: 100vw;
    height: auto !important;
    object-fit: cover !important; /* évite tout débordement */
    display: block;
  }
}

/* Pour le très petit mobile (<560px), éventuellement : */
@media (max-width: 560px){
  .hero-card--main { min-height: 120px !important; }
}