:root{
    --blue-1:#6f96e0;
    --blue-2:#4d7cd6;
    --blue-3:#3a68c2;
    --bg-page:#f2f2f2;
    --text-dark:#333;
    --text-nav:#e8eefc;
    --orange:#e8951f;
    --tagline:#5a5a5a;
    --white:#fff;
  }
  [data-theme="dark"]{
    --blue-1:#2b3350;
    --blue-2:#1f2740;
    --blue-3:#171d33;
    --bg-page:#14161c;
    --text-dark:#e8e8e8;
    --text-nav:#cdd6ee;
    --orange:#f0a83a;
    --tagline:#9aa0ad;
    --white:#1c1f28;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg-page);
    transition:background .3s ease;
  }

  .site-header{
    position:fixed;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    width:calc(100% - 48px);
    max-width:1280px;
    background:rgba(12,14,28,0.55);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:50px;
    padding:10px 12px 10px 26px;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 10px 34px rgba(0,0,0,0.35), 0 0 26px rgba(0,224,255,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
    transition:background .35s ease, box-shadow .35s ease, top .35s ease, padding .35s ease;
  }
  [data-theme="dark"] .site-header{
    background:rgba(244,246,251,0.88);
    border-color:rgba(20,22,40,0.1);
    box-shadow:0 10px 34px rgba(0,0,0,0.18), 0 0 26px rgba(0,224,255,0.10), inset 0 1px 0 rgba(255,255,255,0.6);
  }
  .site-header::before{
    content:"";
    position:absolute;
    inset:-1px;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(90deg, transparent, #00e0ff, var(--orange), #00e0ff, transparent);
    background-size:200% 100%;
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    animation:headerGlowScan 6s linear infinite;
    pointer-events:none;
}
  @keyframes headerGlowScan{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
  }
  .site-header.is-scrolled{
    top:14px;
    background:rgba(10,11,22,0.78);
    box-shadow:0 14px 40px rgba(0,0,0,0.45), 0 0 30px rgba(0,224,255,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  [data-theme="dark"] .site-header.is-scrolled{
    background:rgba(250,251,254,0.95);
    box-shadow:0 14px 40px rgba(0,0,0,0.16), 0 0 30px rgba(0,224,255,0.14), inset 0 1px 0 rgba(255,255,255,0.7);
  }

  /* Logo panel */
  .logo-panel{
    display:flex;
    align-items:center;
    flex-shrink:0;
  }
  .logo-panel .logo{
    display:flex;
    align-items:center;
  }
  .logo-panel .logo img{
    height:50px;
    width:auto;
    display:block;
  }

  /* Nav */
  nav.main-nav{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  nav.main-nav ul{
    list-style:none;
    display:flex;
    margin:0;
    padding:0;
    gap:8px;
  }
  nav.main-nav li{
    display:flex;
  }
  nav.main-nav a{
    position:relative;
    display:inline-block;
    padding:10px 18px;
    text-decoration:none;
    color:var(--text-nav);
    font-size:14.5px;
    font-weight:600;
    letter-spacing:.2px;
    border-radius:6px;
     transition: color .3s ease;
  }
  nav.main-nav a::after{
    content:"";
    position:absolute;
    left:18px;
    right:18px;
    bottom:5px;
    height:2px;
    background:var(--orange);
    transform:scaleX(0);
    transform-origin:left;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
}
  nav.main-nav li.active a,
  nav.main-nav a:hover{
    color:var(--orange);
  }
  nav.main-nav li.active a::after,
  nav.main-nav a:hover::after{
    transform:scaleX(1);
  }
  [data-theme="dark"] nav.main-nav a{
    color:#20232f;
  }
  [data-theme="dark"] nav.main-nav li.active a,
  [data-theme="dark"] nav.main-nav a:hover{
    color:var(--orange);
  }

  .header-actions{
    display:flex;
    align-items:center;
    gap:14px;
    flex-shrink:0;
  }
  .header-cta{
    background:#ffffff;
    color:#14162a;
    text-decoration:none;
    font-size:13.5px;
    font-weight:700;
    letter-spacing:.2px;
    padding:10px 22px;
    border-radius:999px;
    box-shadow:0 6px 16px rgba(0,0,0,0.25);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    white-space:nowrap;
  }
  .header-cta:hover{
    transform:translateY(-2px);
    background:#f0f0f0;
    box-shadow:0 10px 22px rgba(0,0,0,0.35);
  }
  [data-theme="dark"] .header-cta{
    background:#1a1c2e;
    color:#f4f6fb;
    box-shadow:0 6px 16px rgba(0,0,0,0.15);
  }
  [data-theme="dark"] .header-cta:hover{
    background:#282b42;
    box-shadow:0 10px 22px rgba(0,0,0,0.2);
  }

  @media (max-width:960px){
    .site-header{ width:calc(100% - 24px); padding:8px 8px 8px 20px; gap:18px; }
    nav.main-nav ul{ gap:2px; }
    nav.main-nav a{ padding:10px 12px; font-size:13.5px; }
    .header-cta{ display:none; }
    .logo-panel .logo img{ height:44px; }
    #theme-toggle,
    .mobile-nav-toggle{ width:36px; height:36px; }
    #theme-toggle .icon{ width:15px; height:15px; }
  }

  /* Mobile nav toggle (hamburger) */
  .mobile-nav-toggle{
    display:none;
    align-items:center;
    justify-content:center;
    position:relative;
    width:38px;
    height:38px;
    flex-shrink:0;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:50%;
    cursor:pointer;
    padding:0;
  }
  .mobile-nav-toggle span{
    position:absolute;
    left:9px;
    right:9px;
    height:2px;
    border-radius:2px;
    background:#fff;
    transition:transform .25s ease, opacity .2s ease, top .25s ease;
  }
  .mobile-nav-toggle span:nth-child(1){ top:13px; }
  .mobile-nav-toggle span:nth-child(2){ top:18px; }
  .mobile-nav-toggle span:nth-child(3){ top:23px; }
  .mobile-nav-toggle.is-open span:nth-child(1){ top:18px; transform:rotate(45deg); }
  .mobile-nav-toggle.is-open span:nth-child(2){ opacity:0; }
  .mobile-nav-toggle.is-open span:nth-child(3){ top:18px; transform:rotate(-45deg); }
  [data-theme="dark"] .mobile-nav-toggle{
    background:rgba(20,22,40,0.06);
    border-color:rgba(20,22,40,0.15);
  }
  [data-theme="dark"] .mobile-nav-toggle span{
    background:#20232f;
  }

  @media (max-width:860px){
    .mobile-nav-toggle{ display:flex; }

    nav.main-nav{
      display:none;
      position:absolute;
      top:calc(100% + 12px);
      left:0;
      right:0;
      flex:none;
      flex-direction:column;
      background:rgba(10,11,22,0.94);
      border:1px solid rgba(255,255,255,0.1);
      border-radius:18px;
      padding:10px;
      backdrop-filter:blur(18px);
      -webkit-backdrop-filter:blur(18px);
      box-shadow:0 20px 50px rgba(0,0,0,0.45);
    }
    nav.main-nav.open{ display:flex; }
    [data-theme="dark"] nav.main-nav{
      background:rgba(250,251,254,0.97);
      border-color:rgba(20,22,40,0.1);
    }
    nav.main-nav ul{
      flex-direction:column;
      width:100%;
      gap:2px;
    }
    nav.main-nav li{
      display:block;
    }
    nav.main-nav a{
      display:block;
      padding:14px 16px;
      border-radius:10px;
    }
    nav.main-nav a::after{ display:none; }
    nav.main-nav li.active a,
    nav.main-nav a:hover{
      background:rgba(255,255,255,0.08);
    }
    [data-theme="dark"] nav.main-nav li.active a,
    [data-theme="dark"] nav.main-nav a:hover{
      background:rgba(20,22,40,0.06);
    }
  }
  @media (min-width:861px){
    .mobile-nav-toggle{ display:none !important; }
  }

  /* Dark mode toggle */
  .theme-toggle-wrap{
    display:flex;
    align-items:center;
  }
  #theme-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.18);
    color:#fff;
    padding:0;
    border-radius:50%;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease, border-color .2s ease;
  }
  #theme-toggle:hover{
    background:rgba(232,149,31,0.15);
    border-color:var(--orange);
    transform:rotate(15deg);
  }
  [data-theme="dark"] #theme-toggle{
    background:rgba(20,22,40,0.06);
    border-color:rgba(20,22,40,0.15);
    color:#20232f;
  }
  [data-theme="dark"] #theme-toggle:hover{
    background:rgba(232,149,31,0.12);
    border-color:var(--orange);
  }
  #theme-toggle{
    position:relative;
  }
  #theme-toggle .icon{
    position:absolute;
    width:16px;
    height:16px;
    transition:opacity .2s ease, transform .3s ease, width .2s ease, height .2s ease;
  }
  #theme-toggle .icon-sun{
    opacity:0;
    transform:scale(.5) rotate(-45deg);
  }
  #theme-toggle .icon-moon{
    opacity:1;
    transform:scale(1) rotate(0deg);
  }
  #theme-toggle.is-dark .icon-sun{
    opacity:1;
    transform:scale(1) rotate(0deg);
  }
  #theme-toggle.is-dark .icon-moon{
    opacity:0;
    transform:scale(.5) rotate(45deg);
  }

  /* Back to top button */
  .back-to-top{
    position:fixed;
    right:28px;
    bottom:28px;
    z-index:1000;
    width:52px;
    height:52px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(12,14,28,0.82);
    border:1px solid rgba(255,255,255,0.22);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    cursor:pointer;
    opacity:0;
    visibility:hidden;
    transform:translateY(16px) scale(.9);
    transition:opacity .35s ease, transform .35s ease, visibility .35s ease, border-color .3s ease, background .3s ease;
  }
  [data-theme="dark"] .back-to-top{
    background:rgba(8,9,18,0.88);
  }
  .back-to-top.show{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }
  .back-to-top:hover{
    border-color:var(--orange);
    background:rgba(232,149,31,0.16);
    transform:translateY(-3px) scale(1.04);
  }
  .back-to-top:active{
    transform:translateY(-1px) scale(0.97);
  }
  .back-to-top svg{
    width:20px;
    height:20px;
    stroke:#fff;
    fill:none;
    stroke-width:2.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform .25s ease;
  }
  .back-to-top:hover svg{
    transform:translateY(-2px);
    stroke:var(--orange);
  }

  @media (max-width:640px){
    .back-to-top{
      right:16px;
      bottom:16px;
      width:46px;
      height:46px;
    }
    .back-to-top svg{ width:18px; height:18px; }
  }

  /* Mesh-gradient tabbed hero */
  .hero{
    position:relative;
    width:100%;
    height:620px; /* was 680px — a bit shorter now with only 3 paragraphs */
    overflow:hidden;
    background:#0b0d12;
    border-radius:0 0 14px 14px;
  }
  .hero::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:3px;
    background:linear-gradient(90deg, transparent, #00e0ff, var(--orange), #00e0ff, transparent);
    background-size:200% 100%;
    animation:headerGlowScan 6s linear infinite;
    box-shadow:0 0 16px rgba(0,224,255,0.7);
    z-index:5;
    pointer-events:none;
  }
  .mesh-bg{
    position:absolute;
    inset:0;
    overflow:hidden;
  }
  .mesh-grain{
    position:absolute;
    inset:0;
    background-image:radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size:3px 3px;
    mix-blend-mode:overlay;
    pointer-events:none;
  }
  .mesh-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.15) 50%,
    rgba(0,0,0,0.6) 100%
  );
  pointer-events:none;
}
  .hero-bg-image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.06);
  filter:brightness(0.55);
  transition:opacity 1.1s cubic-bezier(.4,0,.2,1),
             transform 8s cubic-bezier(.4,0,.2,1),
             filter 1.6s cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform, filter;
  }
  .hero-bg-image.active{
    opacity:1;
    transform:scale(1);
    filter:brightness(1);
  }
  .hero-inner{
    position:relative;
    z-index:2;
    height:100%;
    padding:120px 60px 80px;
    display:flex;
    flex-direction:column;
    justify-content:center;   /* vertically centers children (intro, content, desc) */
  }
  .hero-intro{
    max-width:340px;
    color:rgba(255,255,255,0.9);
    font-size:14.5px;
    line-height:1.6;
    margin:0;
  }
  .hero-content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;   /* keeps it on the left */
    text-align:left;
    transform:translateY(24px);
  }
  .hero-heading{
    position:relative;
    width:620px;
    max-width:100%;
    min-height:140px;
  }
  .hero-heading h1{
    position:absolute;
    left:0;
    bottom:0;
    width:auto;
    max-width:100%;
    margin:0;
    font-size:52px;
    font-weight:700;
    line-height:1.1;
    color:#fff;
    text-shadow:0 4px 20px rgba(0,0,0,0.25);
    opacity:0;
    transform:translateY(24px);
    pointer-events:none;
    transition:opacity .8s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1);
  }
  .hero-heading h1.active{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    transition-delay:.1s;
  }
  
  .hero-desc{
    position:relative;
    width:50%;
    max-width:50%;
    margin:0;
    margin-top:30px;
    font-size:15px;
    line-height:1.6;
    color:rgba(255,255,255,0.85);
    min-height:40px;
    text-align:left;
  }
  .hero-desc div[data-desc]{
    position:absolute;
    left:0;
    top:0;
    width:auto;       /* was 100% — now shrinks to fit the actual text instead of always filling the container */
    max-width:100%;   /* still capped by .hero-desc's own 50% width so long text still wraps */
    margin:0;
    opacity:0;
    transform:translateY(14px);
    pointer-events:none;
    transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
  }
  .hero-desc div[data-desc].active{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    transition-delay:.2s;
  }
  .hero-desc div[data-desc] p{
    margin:0;
    text-align:justify;
    text-align-last:left;
  }
  .hero-desc div[data-desc] p:last-child{
    margin-bottom:0;
  }
  .hero-desc span{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    margin:0;
    opacity:0;
    transform:translateY(14px);
    pointer-events:none;
    transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
  }
  .hero-desc span.active{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    transition-delay:.2s;
  }
  
  /* === Auto-sizing blue highlight pill behind hero heading + description === */
  .hero-text-block{
    position:relative;
  }

  .hero-content,
  .hero-desc{
    position:relative;
    z-index:1;
  }

  .hero-highlight-bg{
    position:absolute;
    z-index:0;
    left:-400px;
    top:0;
    width:0;
    height:0;
    background:linear-gradient(135deg, rgba(30,66,140,0.9), rgba(14,36,86,0.92));
    border-radius:0 24px 24px 0;
    box-shadow:0 25px 60px rgba(0,0,0,0.35);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
    transition:width .55s cubic-bezier(.65,0,.35,1),
               height .55s cubic-bezier(.65,0,.35,1),
               top .55s cubic-bezier(.65,0,.35,1);
    pointer-events:none;
  }

  @media (max-width:900px){
    /* The JS sizes this pill using desktop-only constants (a 400px left
       bleed) that don't make sense against a narrow mobile column, so on
       mobile it's turned into a plain full-bleed card behind the text
       instead of a pixel-measured highlight. !important beats the inline
       styles the JS sets on this element. */
    .hero-text-block{
      padding:20px 22px;
    }
    .hero-highlight-bg{
      top:0 !important;
      right:0 !important;
      bottom:0 !important;
      left:0 !important;
      width:auto !important;
      height:auto !important;
      border-radius:16px;
    }
    .hero-desc div[data-desc] p{
      text-align:left;
    }
  }

  .hero-tabs{
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  z-index:3;
  display:flex;
  width:calc(100% - 80px);
  max-width:900px;
  background:rgba(12,14,28,0.55);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  padding:8px;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 10px 34px rgba(0,0,0,0.35), 0 0 26px rgba(0,224,255,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}

.hero-tabs::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(90deg, transparent, #00e0ff, var(--orange), #00e0ff, transparent);
  background-size:200% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:headerGlowScan 6s linear infinite;
  pointer-events:none;
}
  
  .hero-tabs-indicator{
  position:absolute;
  top:8px;
  left:8px;
  height:calc(100% - 16px);
  width:calc((100% - 16px) / 9);
  background:#ffffff;
  border-radius:999px;
  box-shadow:0 10px 24px rgba(0,0,0,0.2);
  transition:transform .55s cubic-bezier(.65,0,.35,1);
  z-index:1;
  pointer-events:none;
}

  .hero-tabs button{
  position:relative;
  z-index:2;
  flex:1;
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.8);
  font-size:13px;
  font-weight:600;
  padding:14px 14px;
  cursor:default;
  pointer-events:none;
  transition:color .55s cubic-bezier(.65,0,.35,1);
}
.hero-tabs button.active{
  color:#0b0d12;
}
.hero-tabs button.in-transition{
  color:var(--orange);
}
  

  @media (max-width:900px){
    .hero{ height:auto; min-height:480px; }
    .hero-inner{ padding:100px 24px 24px; }
    .hero-desc{
      position:static;
      width:100%;
      max-width:100%;
      min-height:0;
      margin-top:22px;
      font-size:13.5px;
      line-height:1.55;
    }
    .hero-heading h1{ font-size:34px; }
    .hero-heading{ position:static; min-height:0; width:100%; }

    /* Desktop nudges the heading down 24px via transform for a fixed-height
       layout; on mobile the heading/description are in normal flow, so that
       transform just eats into the margin above and makes them look
       cramped/touching. Neutralize it so the margin is what you actually see. */
    .hero-content{ transform:none; }

    /* Swap the desktop crossfade for a plain show/hide so the box height
       always matches the active slide's real content instead of the fixed
       min-height the absolute-positioned crossfade relied on. */
    .hero-heading h1{
      position:static;
      display:none;
      opacity:1;
      transform:none;
      transition:none;
      pointer-events:auto;
    }
    .hero-heading h1.active{ display:block; }
    .hero-desc div[data-desc]{
      position:static;
      display:none;
      opacity:1;
      transform:none;
      transition:none;
      width:100%;
      max-width:100%;
    }
    .hero-desc div[data-desc].active{ display:block; }

    /* Small, single-row strip that hugs the bottom of the hero instead of
       the desktop's absolutely-positioned pill (which needs a tall fixed
       hero to avoid colliding with the content above it). Horizontal
       scroll keeps all 9 tabs reachable without growing the hero's height. */
    .hero-tabs{
      position:relative;
      bottom:auto;
      left:auto;
      transform:none;
      width:calc(100% - 32px);
      max-width:100%;
      margin:14px auto 0;
      flex-wrap:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      gap:3px;
      padding:5px;
    }
    /* This animated gradient outline is an absolutely-positioned child of
       .hero-tabs, which is now the horizontally-scrolling element — so it
       would scroll away with the buttons instead of staying put as the
       bar's outline. Drop it on mobile and keep the plain static border
       (set in the base rule) that's part of the box itself and never moves. */
    .hero-tabs::before{
      display:none;
    }
    .hero-tabs::-webkit-scrollbar{ display:none; }
    .hero-tabs button{
      flex:0 0 auto;
      padding:7px 8px;
      font-size:10px;
      white-space:nowrap;
    }
    .hero-tabs-indicator{ display:none; }
    .hero-tabs button.active{
      background:#ffffff;
      border-radius:999px;
    }
  }

  /* Names strip below hero */
  .partner-strip{
    position:relative;
    overflow:hidden;
    background:#0f1e3d;
    display:flex;
    align-items:center;
    justify-content:space-around;
    flex-wrap:wrap;
    gap:12px;
    padding:16px 40px;
    transition:background .3s ease;
  }
  .partner-strip span{
    position:relative;
    z-index:1;
    font-size:14px;
    font-weight:700;
    letter-spacing:.5px;
    color:#ffffff;
    padding:7px 14px;
    border-radius:6px;
    background:transparent;
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s ease, transform .6s ease, background .5s cubic-bezier(.4,0,.2,1), color .5s cubic-bezier(.4,0,.2,1);
  }
  .partner-strip.in-view span{
    opacity:.75;
    transform:translateY(0);
  }
  .partner-strip.in-view span:nth-child(1){ transition-delay:.05s; }
  .partner-strip.in-view span:nth-child(2){ transition-delay:.15s; }
  .partner-strip.in-view span:nth-child(3){ transition-delay:.25s; }
  .partner-strip.in-view span:nth-child(4){ transition-delay:.35s; }
  .partner-strip span.active{
    background:#ffffff;
    color:#0f1e3d;
    opacity:1;
    box-shadow:0 8px 18px rgba(0,0,0,0.25);
  }
  .partner-strip span:hover:not(.active){
    color:var(--orange);
    opacity:1;
    transform:translateY(-2px) scale(1.05);
  }

  /* Services section */
  .services{
    position:relative;
    background:#ffffff;
    padding:60px 60px 90px;
    transition:background .3s ease;
  }
  [data-theme="dark"] .services{
    background:#0f1e3d;
  }
  .services::after{
    content:"";
    position:absolute;
    left:0; right:0; bottom:0;
    height:3px;
    background:linear-gradient(90deg, transparent, #00e0ff, var(--orange), #00e0ff, transparent);
    background-size:200% 100%;
    animation:headerGlowScan 6s linear infinite;
    box-shadow:0 0 16px rgba(0,224,255,0.7);
    z-index:5;
    pointer-events:none;
  }
  .services-header{
    text-align:center;
    margin-bottom:36px;
  }
  .services-header h2{
    margin:0;
    font-size:34px;
    font-weight:800;
    color:#14162a;
  }
  [data-theme="dark"] .services-header h2{
    color:#fff;
  }

  .services-banner{
    position:relative;
    max-width:1100px;
    margin:0 auto;
  }
  .services-banner-image{
    width:100%;
    height:280px;
    border-radius:8px;
    overflow:hidden;
  }
  .services-banner-image video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  }

  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:26px;
    max-width:1020px;
    margin:-70px auto 0;
    position:relative;
    z-index:2;
    padding:0 20px;
  }
  .service-card{
    background:var(--white);
    border-radius:8px;
    padding:40px 26px 32px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:background .3s ease;
  }
  .service-icon{
    width:52px;
    height:52px;
    margin:0 auto 22px;
    border-radius:10px;
    background:#1a1a1a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#fff;
  }
  .service-icon svg{
    width:24px;
    height:24px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.75;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  [data-theme="dark"] .service-icon{
    background:var(--orange);
  }
  .service-card h3{
    margin:0 0 14px;
    font-size:19px;
    font-weight:700;
    color:var(--text-dark);
  }
  .service-card p{
    margin:0 0 20px;
    font-size:13.5px;
    line-height:1.7;
    color:var(--tagline);
  }
  .service-card a{
    color:var(--text-dark);
    font-weight:700;
    font-size:12.5px;
    letter-spacing:.5px;
    text-decoration:none;
    text-transform:uppercase;
    padding-bottom:4px;
    border-bottom:1px solid var(--text-dark);
  }
  .service-card a:hover{
    color:var(--orange);
    border-color:var(--orange);
  }

  @media (max-width:900px){
    .services-grid{ grid-template-columns:1fr; margin-top:20px; }
    .services-banner-image{ height:220px; }
  }

  /* Rotating photo carousel section */
  .carousel-section{
    position:relative;
    background:#ffffff;
    padding:80px 20px 130px;
    text-align:center;
    overflow:hidden;
    transition:background .3s ease;
  }
  [data-theme="dark"] .carousel-section{
    background:#0f1e3d;
  }
  .carousel-header{
    margin-bottom:10px;
  }
  .carousel-header .eyebrow{
    color:var(--orange);
    font-weight:bold;
    letter-spacing:1px;
    font-size:13px;
    text-transform:uppercase;
  }
  .carousel-header h2{
    margin:8px 0 10px;
    font-size:30px;
    color:#14162a;
  }
  [data-theme="dark"] .carousel-header h2{
    color:#fff;
  }
  .carousel-header p{
    max-width:560px;
    margin:0 auto;
    color:rgba(20,22,42,0.65);
    font-size:15px;
    line-height:1.6;
  }
  [data-theme="dark"] .carousel-header p{
    color:rgba(255,255,255,0.65);
  }

  .carousel-3d-stage{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:90px;
    padding:0 40px;
    perspective:1800px;
  }
  .carousel-3d{
    position:relative;
    width:190px;
    height:250px;
    transform-style:preserve-3d;
    animation:carouselSpin 48s linear infinite;
  }
  .carousel-3d-stage:hover .carousel-3d{
    animation-play-state:paused;
  }
  .carousel-item{
    position:absolute;
    inset:0;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(20,22,42,0.18);
    border:2px solid rgba(20,22,42,0.12);
    transform:rotateY(calc(var(--i) * (360deg / var(--count)))) translateZ(var(--radius));
    transition:border-color .3s ease, box-shadow .3s ease;
  }
  [data-theme="dark"] .carousel-item{
    box-shadow:0 12px 30px rgba(0,0,0,0.4);
    border:2px solid rgba(255,255,255,0.15);
  }
  .carousel-item:hover{
    border-color:var(--orange);
    box-shadow:0 12px 34px rgba(232,149,31,0.4);
  }
  .carousel-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  @keyframes carouselSpin{
    from{ transform:rotateY(0deg); }
    to{ transform:rotateY(360deg); }
  }

  @media (max-width:640px){
    .carousel-3d{ width:150px; height:200px; }
    .carousel-3d-stage{ margin-top:70px; perspective:1200px; }
    .carousel-item{ transform:rotateY(calc(var(--i) * (360deg / var(--count)))) translateZ(220px); }
  }

  /* About section */
  .about{
    position:relative;
    background:#ffffff;
    padding:70px 60px;
    display:flex;
    align-items:center;
    gap:50px;
    transition:background .3s ease;
  }
  [data-theme="dark"] .about{
    background:#0f1e3d;
  }
  .about::before,
  .about::after{
    content:"";
    position:absolute;
    left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, transparent, #00e0ff, var(--orange), #00e0ff, transparent);
    background-size:200% 100%;
    animation:headerGlowScan 6s linear infinite;
    box-shadow:0 0 12px rgba(0,224,255,0.6);
  }
  .about::before{ top:0; }
  .about::after{ bottom:0; }
  .about-media{
    flex:1;
    min-width:0;
  }
 .about-media{
  flex:1;
  min-width:0;
  }
  .video-wrapper{
    position:relative;
    width:100%;
    border-radius:10px;
    overflow:hidden;
    cursor:pointer;
    box-shadow:0 20px 50px rgba(0,0,0,0.3);
  }
  .video-wrapper video{
    width:100%;
    border-radius:10px;
    display:block;
    aspect-ratio:7/5;
    object-fit:cover;
    background:#0b0d12;
  }
  .play-button{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    width:92px;
    height:64px;
    border-radius:16px;
    background:rgba(20,20,20,0.8);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 28px rgba(0,0,0,0.4);
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s ease, background-color .3s ease;
  }
  .play-button svg{
    transform:translateX(4px);
  }
  .video-wrapper:hover .play-button{
    transform:translate(-50%, -50%) scale(1.08);
    box-shadow:0 14px 34px rgba(0,0,0,0.45), 0 0 26px rgba(255,0,0,0.45);
    background-color:#ff0000;
  }
  .play-button.hidden{
    opacity:0;
    pointer-events:none;
    transform:translate(-50%, -50%) scale(.8);
  }
  @media (max-width:640px){
    .play-button{ width:76px; height:52px; border-radius:13px; }
  }

  @media (max-width:900px){
    .video-wrapper video{ aspect-ratio:4/3; }
  }
  .about-content{
    flex:1;
  }
  .about-content .eyebrow{
    color:var(--orange);
    font-weight:bold;
    letter-spacing:1px;
    font-size:13px;
    text-transform:uppercase;
  }
  .about-content h2{
    margin:8px 0 16px;
    font-size:30px;
    color:#1a1a1a;
    transition:color .3s ease;
  }
  [data-theme="dark"] .about-content h2{
    color:#ffffff;
  }
  .about-content p{
    color:#555;
    font-size:15px;
    line-height:1.7;
    margin:0 0 24px;
    transition:color .3s ease;
  }
  [data-theme="dark"] .about-content p{
    color:#b7c3dd;
  }
  .about-stats{
    display:flex;
    gap:36px;
  }
  .about-stats div{
    text-align:left;
  }
  .about-stats .num{
    font-size:28px;
    font-weight:bold;
    color:var(--blue-3);
    display:block;
    transition:color .3s ease;
  }
  [data-theme="dark"] .about-stats .num{
    color:#4fc3ff;
  }
  .about-stats .label{
    font-size:13px;
    color:var(--tagline);
    transition:color .3s ease;
  }
  [data-theme="dark"] .about-stats .label{
    color:#8fa1c4;
  }

  @media (max-width:900px){
    .about{ flex-direction:column; }
  }

  /* Contact section - modern split card */
  .contact{
    background:var(--bg-page);
    padding:80px 60px;
    transition:background .3s ease;
  }
  .contact-header{
    text-align:center;
    margin-bottom:44px;
  }
  .contact-header .eyebrow{
    color:var(--orange);
    font-weight:bold;
    letter-spacing:1px;
    font-size:13px;
    text-transform:uppercase;
  }
  .contact-header h2{
    margin:8px 0 10px;
    font-size:30px;
    color:var(--text-dark);
  }
  .contact-header p{
    max-width:600px;
    margin:0 auto;
    color:var(--tagline);
    font-size:15px;
    line-height:1.6;
  }

  .contact-card{
    position:relative;
    max-width:1080px;
    margin:0 auto;
    display:flex;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(20,30,60,0.18),
               0 0 0 1px rgba(0,224,255,0.35),
               0 0 30px rgba(0,224,255,0.25);
  }

  .contact-info{
    flex:1;
    position:relative;
    background:radial-gradient(circle at 20% 20%, #1c2540, #0a0e1a 70%);
    color:#dbe6fb;
    padding:48px 40px;
    display:flex;
    flex-direction:column;
    gap:30px;
    overflow:hidden;
  }
  .contact-info::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(0,224,255,0.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,224,255,0.06) 1px, transparent 1px);
    background-size:30px 30px;
    pointer-events:none;
  }
  .contact-info::after{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(0,224,255,0.25), transparent 70%);
    top:-60px;
    right:-60px;
    pointer-events:none;
  }
  .contact-info h3{
    position:relative;
    z-index:1;
    margin:0;
    font-size:20px;
    color:#fff;
  }
  .contact-info > p.lead{
    position:relative;
    z-index:1;
    margin:-18px 0 0;
    font-size:13.5px;
    line-height:1.6;
    color:#8b98b8;
  }
  .contact-info-item{
    position:relative;
    z-index:1;
    display:flex;
    gap:16px;
    align-items:flex-start;
  }
  .contact-info-icon{
    width:42px;
    height:42px;
    flex-shrink:0;
    border-radius:10px;
    background:rgba(0,224,255,0.1);
    border:1px solid rgba(0,224,255,0.35);
    color:#00e0ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
  }
  .contact-info-icon svg{
    width:19px;
    height:19px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .contact-info-item h4{
    margin:0 0 4px;
    font-size:14px;
    color:#fff;
    font-weight:600;
  }
  .contact-info-item p{
    margin:0;
    font-size:13.5px;
    color:#8b98b8;
    line-height:1.5;
  }
  .contact-social{
    position:relative;
    z-index:1;
    display:flex;
    gap:10px;
    margin-top:auto;
  }
  .contact-social a{
    width:36px;
    height:36px;
    border-radius:8px;
    background:rgba(0,224,255,0.08);
    border:1px solid rgba(0,224,255,0.3);
    color:#00e0ff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    text-decoration:none;
    transition:all .25s ease;
  }
  .contact-social a:hover{
    background:#00e0ff;
    color:#0a0e1a;
    box-shadow:0 0 14px rgba(0,224,255,0.6);
    transform:translateY(-2px);
  }

  .contact-form{
    flex:1.3;
    background:var(--white);
    padding:48px 44px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .contact-form .form-row{
    display:flex;
    gap:16px;
    margin-bottom:18px;
  }
  .field{
    position:relative;
    width:100%;
  }
  .field input,
  .field textarea{
    width:100%;
    padding:14px 16px;
    border:1.5px solid #e2e6ee;
    border-radius:8px;
    font-family:inherit;
    font-size:14px;
    background:var(--bg-page);
    color:var(--text-dark);
    box-sizing:border-box;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  .field input:focus,
  .field textarea:focus{
    outline:none;
    border-color:#00b8d9;
    box-shadow:0 0 0 4px rgba(0,184,217,0.12);
  }
  .field textarea{
    resize:vertical;
    min-height:110px;
  }
  .contact-form > .field{
    margin-bottom:18px;
  }
  .contact-form button{
    position:relative;
    background:linear-gradient(135deg, #00c2e0, var(--orange));
    color:#fff;
    border:none;
    padding:15px 30px;
    border-radius:8px;
    font-weight:bold;
    font-size:14px;
    letter-spacing:.3px;
    cursor:pointer;
    transition:transform .2s ease, box-shadow .2s ease;
    box-shadow:0 8px 20px rgba(0,150,200,0.25);
  }
  .contact-form button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 26px rgba(0,150,200,0.35);
  }
  .form-note{
    margin-top:14px;
    font-size:13px;
    font-weight:600;
    color:#00b8a9;
    display:none;
  }
  .form-note.show{ display:block; }

  @media (max-width:900px){
    .contact-card{ flex-direction:column; }
    .contact-form .form-row{ flex-direction:column; }
  }

  /* Footer - modern tech style */
  .site-footer{
    position:relative;
    background:#ffffff;
    color:#5a6478;
    padding:70px 60px 0;
    overflow:hidden;
    font-family:'Courier New', Consolas, monospace;
    transition:background .3s ease, color .3s ease;
  }
  [data-theme="dark"] .site-footer{
    background:#0a0e14;
    color:#a8b2c4;
  }
  .site-footer::before{
    content:"";
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(0,224,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,224,255,0.05) 1px, transparent 1px);
    background-size:36px 36px;
    pointer-events:none;
  }
  .site-footer::after{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:2px;
    background:linear-gradient(90deg, transparent, #00e0ff, var(--orange), #00e0ff, transparent);
    background-size:200% 100%;
    animation:footerScan 6s linear infinite;
  }
  @keyframes footerScan{
    0%{ background-position:200% 0; }
    100%{ background-position:-200% 0; }
  }
  .site-footer .footer-grid,
  .site-footer .footer-bottom{
    position:relative;
    z-index:1;
  }

  .footer-grid{
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr 1.2fr;
    gap:40px;
    padding-bottom:40px;
    border-bottom:1px solid rgba(0,224,255,0.15);
  }
  .footer-col h3{
    color:#0099b8;
    font-size:14px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin:0 0 20px;
    position:relative;
    padding-left:14px;
  }
  [data-theme="dark"] .footer-col h3{
    color:#00e0ff;
  }
  .footer-col h3::before{
    content:">";
    position:absolute;
    left:0;
    color:var(--orange);
  }
  .footer-col p{
    font-size:13px;
    line-height:1.8;
    color:#5a6478;
    margin:0 0 16px;
  }
  [data-theme="dark"] .footer-col p{
    color:#7d8aa3;
  }
  .footer-logo{
    display:flex;
    align-items:center;
    margin-bottom:16px;
    filter:drop-shadow(0 0 8px rgba(0,224,255,0.35));
  }
  .footer-logo img{
    height:70px;
  }
  .footer-social{
    display:flex;
    gap:10px;
  }
  .footer-social a{
    width:36px;
    height:36px;
    border-radius:6px;
    background:rgba(0,153,184,0.08);
    border:1px solid rgba(0,153,184,0.3);
    color:#0099b8;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:13px;
    transition:all .25s ease;
  }
  [data-theme="dark"] .footer-social a{
    background:rgba(0,224,255,0.06);
    border:1px solid rgba(0,224,255,0.25);
    color:#00e0ff;
  }
  .footer-social a:hover{
    background:#0099b8;
    color:#ffffff;
    box-shadow:0 0 14px rgba(0,153,184,0.5);
    transform:translateY(-2px);
  }
  [data-theme="dark"] .footer-social a:hover{
    background:#00e0ff;
    color:#0a0e14;
    box-shadow:0 0 16px rgba(0,224,255,0.6);
  }
  .footer-col ul{
    list-style:none;
    margin:0;
    padding:0;
  }
  .footer-col ul li{
    margin-bottom:12px;
  }
  .footer-col ul a{
    color:#5a6478;
    text-decoration:none;
    font-size:13px;
    transition:color .2s ease, padding-left .2s ease;
    display:inline-block;
  }
  [data-theme="dark"] .footer-col ul a{
    color:#7d8aa3;
  }
  .footer-col ul a::before{
    content:"// ";
    color:rgba(0,153,184,0.5);
  }
  [data-theme="dark"] .footer-col ul a::before{
    color:rgba(0,224,255,0.4);
  }
  .footer-col ul a:hover{
    color:#0099b8;
    padding-left:4px;
  }
  [data-theme="dark"] .footer-col ul a:hover{
    color:#00e0ff;
  }

  .footer-newsletter{
    display:flex;
    border:1px solid rgba(0,153,184,0.35);
    border-radius:6px;
    overflow:hidden;
    background:rgba(0,153,184,0.05);
  }
  [data-theme="dark"] .footer-newsletter{
    border:1px solid rgba(0,224,255,0.3);
    background:rgba(0,224,255,0.04);
  }
  .footer-newsletter input{
    flex:1;
    background:transparent;
    border:none;
    padding:12px 14px;
    color:#1a1c2e;
    font-size:13px;
    font-family:inherit;
    outline:none;
  }
  .footer-newsletter input::placeholder{
    color:#9aa2b4;
  }
  [data-theme="dark"] .footer-newsletter input{
    color:#e8edf5;
  }
  [data-theme="dark"] .footer-newsletter input::placeholder{
    color:#5c6980;
  }
  .footer-newsletter button{
    background:#0099b8;
    color:#ffffff;
    border:none;
    padding:0 18px;
    font-weight:bold;
    font-size:13px;
    cursor:pointer;
    transition:background .2s ease;
  }
  [data-theme="dark"] .footer-newsletter button{
    background:#00e0ff;
    color:#0a0e14;
  }
  .footer-newsletter button:hover{
    background:var(--orange);
  }

  .footer-bottom{
    text-align:center;
    padding:26px 0;
    font-size:12px;
    color:#6b7488;
    letter-spacing:.5px;
  }
  [data-theme="dark"] .footer-bottom{
    color:#5c6980;
  }
  .footer-bottom a{
    color:#0099b8;
    text-decoration:none;
  }
  [data-theme="dark"] .footer-bottom a{
    color:#00e0ff;
  }
  .footer-bottom a:hover{
    text-decoration:underline;
  }

  @media (max-width:900px){
    .footer-grid{ grid-template-columns:1fr 1fr; }
  }
  @media (max-width:560px){
    .footer-grid{ grid-template-columns:1fr; }
  }

  /* Site-wide mobile tightening */
  @media (max-width:640px){
    .services{ padding:50px 20px 70px; }
    .about{ padding:50px 20px; }
    .contact{ padding:50px 20px; }
    .contact-info{ padding:36px 24px; }
    .contact-form{ padding:36px 24px; }
    .site-footer{ padding:50px 20px 0; }
    .footer-grid{ gap:28px; }
    .hero-inner{ padding:100px 20px 20px; }

    .site-header{ gap:10px; padding:7px 7px 7px 14px; }
    .logo-panel .logo img{ height:34px; }
    #theme-toggle,
    .mobile-nav-toggle{ width:32px; height:32px; }
    #theme-toggle .icon{ width:13px; height:13px; }
    .mobile-nav-toggle span{ left:7px; right:7px; }
    .mobile-nav-toggle span:nth-child(1){ top:11px; }
    .mobile-nav-toggle span:nth-child(2){ top:15px; }
    .mobile-nav-toggle span:nth-child(3){ top:19px; }
  }

  @media (max-width:480px){
    .site-header{ padding:6px 6px 6px 12px; gap:6px; }
    .logo-panel .logo img{ height:28px; }
    .hero-heading h1{ font-size:28px; }
    .services-header h2{ font-size:26px; }
    .about-content h2{ font-size:24px; }
    .contact-header h2{ font-size:24px; }
    .carousel-header h2{ font-size:24px; }
    .about-stats{ flex-wrap:wrap; row-gap:16px; }
  }

  /* Legal pages (Privacy Policy / Terms of Service) */
  .legal-page{
    padding:170px 24px 100px;
    max-width:820px;
    margin:0 auto;
  }
  .legal-header{
    text-align:center;
    margin-bottom:48px;
  }
  .legal-header .eyebrow{
    color:var(--orange);
    font-weight:bold;
    letter-spacing:1px;
    font-size:13px;
    text-transform:uppercase;
  }
  .legal-header h1{
    margin:8px 0 10px;
    font-size:36px;
    color:var(--text-dark);
  }
  .legal-header p{
    color:var(--tagline);
    font-size:14px;
    margin:0;
  }
  .legal-page section{
    margin-bottom:36px;
  }
  .legal-page section h2{
    font-size:19px;
    color:var(--text-dark);
    margin:0 0 12px;
  }
  .legal-page section p{
    color:var(--tagline);
    font-size:14.5px;
    line-height:1.75;
    margin:0 0 14px;
  }
  .legal-page section ul{
    margin:0 0 14px;
    padding-left:22px;
  }
  .legal-page section li{
    color:var(--tagline);
    font-size:14.5px;
    line-height:1.75;
    margin-bottom:8px;
  }
  .legal-page a{
    color:var(--blue-3);
  }
  [data-theme="dark"] .legal-page a{
    color:#4fc3ff;
  }

  @media (max-width:640px){
    .legal-page{ padding:130px 20px 70px; }
    .legal-header h1{ font-size:28px; }
  }