:root{
    --onyx:#0E0F12; --charcoal:#15171C; --graphite:#1E222B; --slate:#2B313C;
    --ink:#F2F4F7; --muted:#B6BCCA; --accent:#00C8FF; --danger:#FF3B3B; --success:#27E1A0; --gold:#F5C660;
    --radius:14px; --shadow:0 12px 30px rgba(0,0,0,.45);
  }
  *{box-sizing:border-box} html,body{margin:0;height:100%}
  body{font:400 16px/1.6 Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:var(--onyx);color:var(--ink);-webkit-font-smoothing:antialiased}
  h1,h2,h3,h4{font-family:"Lexend Giga", Inter, sans-serif; letter-spacing:-.005em; margin:0 0 .5rem}
  h1{font-weight:800;font-size:clamp(2.2rem,4.5vw,4rem);line-height:1.05}
  h2{font-weight:800;font-size:clamp(1.6rem,2.8vw,2.4rem);line-height:1.15}
  h3{font-weight:700;font-size:clamp(1.1rem,2vw,1.4rem)}
  p{margin:.5rem 0 1rem;color:var(--ink)}
  a{color:var(--accent);text-decoration:none}
  .container{max-width:1200px;margin:0 auto;padding:0 24px}
  .btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;border:1px solid #ffffff1a;text-decoration:none;font-weight:700;transition:.2s ease;box-shadow:var(--shadow)}
  .btn--primary{background:var(--accent);color:#081017;border-color:transparent}
  .btn--ghost{background:transparent;color:var(--ink)}
  .btn:hover{transform:translateY(-1px);filter:saturate(1.1)}
  .chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;font-weight:700;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}
  .chip--emg{background:linear-gradient(180deg,#ff5858,#c61111);box-shadow:0 10px 22px rgba(255,61,61,.25)}
  .chip--emg svg{width:14px;height:14px}
  .muted{color:var(--muted)}
  .section{padding:64px 0}
  
  /* Header */
  .site-header{position:sticky;top:0;z-index:1000;background:
     radial-gradient(120% 220% at 50% -80%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%),
     linear-gradient(180deg,#181B22 0%, #0E0F12 100%); border-bottom:1px solid #ffffff14; box-shadow:var(--shadow)}
  .nav{display:flex;align-items:center;gap:18px; padding:14px 0}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
  .logo svg{width:40px;height:40px;transform:rotate(-18deg)}
  .brand{font:800 1rem/1 "Lexend Giga", Inter, sans-serif; letter-spacing:.05em}
  .spacer{flex:1}
  .top-links{display:none}
  .top-links a{color:var(--ink);opacity:.9;padding:8px 10px;border-radius:8px}
  .top-links a:hover{color:var(--accent);opacity:1;background:#ffffff0c}
  .services-dd{position:relative}
  .dd-btn{display:inline-flex;align-items:center;gap:6px}
  .dd-menu{position:absolute;right:0;top:120%;min-width:280px;background:linear-gradient(180deg,var(--graphite),var(--charcoal));border:1px solid #ffffff1a;border-radius:12px;padding:10px;box-shadow:var(--shadow);display:none}
  .dd-menu a{display:flex;gap:8px;align-items:center;color:var(--ink);padding:10px;border-radius:8px}
  .dd-menu a:hover{background:#ffffff12}
  .utility{display:flex;align-items:center;gap:12px}
  .phone{font:800 .95rem/1 "Lexend Giga"; white-space:nowrap}
  .hamburger{width:42px;height:42px;border:1px solid #ffffff22;border-radius:10px;display:grid;place-items:center;cursor:pointer}
  .hamburger span{width:20px;height:2px;background:var(--ink);display:block;position:relative}
  .hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
  .hamburger span::before{top:-6px}.hamburger span::after{top:6px}
  .mobile-panel{position:fixed;inset:0 0 0 35%;transform:translateX(100%);transition:transform .25s ease;background:linear-gradient(180deg,var(--charcoal),var(--onyx));padding:20px;z-index:999;box-shadow:var(--shadow)}
  .mobile-panel.open{transform:translateX(0)}
  .mnav a{display:block;color:var(--ink);padding:12px;border-bottom:1px solid #ffffff1a}
  .m-services{margin:10px 0 0 0}
  .m-services summary{cursor:pointer;padding:12px;border:1px solid #ffffff22;border-radius:10px}
  .m-cta{display:flex;gap:8px;margin-top:14px}
  
  /* Hero */
  .hero{position:relative;min-height:74vh;display:grid;place-items:center;overflow:hidden}
  .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55)), url('../img/hero1.jpg') center/cover no-repeat; transform:scale(1.12); animation:ken 22s ease-in-out infinite alternate}
  @keyframes ken{to{transform:scale(1)}}
  .hero-inner{position:relative;z-index:1;text-align:center;padding:28px}
  .badges{display:flex;flex-direction:column;gap:10px;margin:18px 0}
  .badge{display:flex;align-items:center;gap:8px;justify-content:center;background:#ffffff10;border:1px solid #ffffff22;border-radius:999px;padding:10px 14px}
  .badge svg{width:18px;height:18px;fill:var(--gold)}
  .cta-row{display:flex;flex-direction:column;gap:12px;align-items:center;margin-top:8px}
  
  /* Image band */
  .img-band{height:200px;background:url('https://images.unsplash.com/photo-1528460033278-a6ba57020470?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat;filter:grayscale(.1) contrast(1.05)}
  
  /* Intro */
  .intro{background:linear-gradient(180deg,var(--charcoal),var(--onyx));box-shadow:var(--shadow)}
  .intro p{max-width:900px;margin-left:auto;margin-right:auto}
  
  /* Services */
  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
  .card{background:linear-gradient(180deg,var(--graphite),var(--charcoal));border:1px solid #ffffff10;border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow);transition:.25s ease}
  .card:hover{transform:translateY(-4px)}
  .card figure{height:140px;overflow:hidden;background:#0c0f14}
  .card img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);opacity:.85;transition:.4s ease}
  .card:hover img{transform:scale(1.12);opacity:1}
  .card .body{padding:16px}
  .card .body p{color:var(--muted)}
  .callout{grid-column:1/-1;background:linear-gradient(135deg,var(--accent),#64e6ff);color:#0b0f14;border:none}
  .callout .body{display:flex;align-items:center;gap:14px;justify-content:center}
  
  /* Why choose */
  .icons{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
  .icon-tile{background:#ffffff0d;border:1px solid #ffffff1b;border-radius:12px;padding:16px;text-align:center}
  .icon-tile svg{width:34px;height:34px;fill:var(--accent);margin-bottom:8px}
  
  /* Brand strip */
  .brand-strip .wrap{display:flex;flex-direction:column;gap:24px}
  .tech{min-height:320px;border-radius:var(--radius);background:url('https://images.unsplash.com/photo-1581092921461-eab62e97a780?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat;filter:grayscale(.15)}
  .blurb{background:linear-gradient(180deg,var(--graphite),var(--charcoal));border:1px solid #ffffff12;border-radius:var(--radius);padding:20px}
  .logos{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;align-items:center;opacity:.9}
  .logos img{height:38px;filter:grayscale(1) brightness(.9);opacity:.9;transition:.25s}
  .logos img:hover{filter:none;opacity:1;transform:translateY(-2px)}
  
  /* Testimonials */
  .testimonials{background:linear-gradient(180deg,var(--charcoal),var(--onyx))}
  .slider{position:relative;overflow:hidden}
  .track{display:flex;gap:16px;transition:transform .45s ease}
  .tcard{min-width:320px;max-width:360px;background:linear-gradient(180deg,var(--graphite),var(--charcoal));border:1px solid #ffffff1a;border-radius:var(--radius);padding:18px}
  .stars{color:var(--gold);font-size:1.1rem;margin-bottom:6px}
  .slider-controls{display:flex;gap:8px;justify-content:center;margin-top:12px}
  .dot{width:8px;height:8px;border-radius:50%;background:#ffffff2a;border:none}
  .dot.active{background:var(--accent)}
  
  /* Partners sizing tweak */
  .peers .logos img{height:32px}
  
  /* SEO paragraph tone */
  .seo p{color:var(--muted)}
  
  /* Footer */
  .site-footer{border-top:1px solid #ffffff18;background:var(--onyx)}
  .fgrid{display:grid;grid-template-columns:1fr;gap:24px}
  .fcol h4{font:800 .95rem/1 "Lexend Giga"; letter-spacing:.06em; text-transform:uppercase;color:var(--accent);margin-bottom:10px}
  .flist{list-style:none;margin:0;padding:0;columns:2}
  .flist li{margin:6px 0}
  .copyright{text-align:center;color:#8f97a8;margin-top:24px;font-size:.9rem}
  
  /* Responsive */
  @media (min-width:768px){
    .top-links{display:flex;gap:8px}
    .hamburger{display:none}
    .badges{flex-direction:row;justify-content:center}
    .cta-row{flex-direction:row}
    .brand-strip .wrap{flex-direction:row;align-items:flex-start}
    .tech{flex:0 0 40%}
    .blurb{flex:1}
    .fgrid{grid-template-columns:repeat(4,1fr)}
    .flist{columns:1}
  }