:root{
    --bg:#F3F5F9;
    --surface:#FFFFFF;
    --surface-2:#E8EDF3;
    --ink:#101A2B;
    --muted:#57657C;
    --border:#D6DEE9;
    --accent:#B96F0C;
    --accent-ink:#FFFFFF;
    --signal:#0C8A90;
    --radius:2px;
    --maxw:1180px;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A111C;
      --surface:#111B2B;
      --surface-2:#172437;
      --ink:#E8EDF5;
      --muted:#8FA0B8;
      --border:#243450;
      --accent:#F5A623;
      --accent-ink:#17130A;
      --signal:#4DD6DC;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0A111C;
    --surface:#111B2B;
    --surface-2:#172437;
    --ink:#E8EDF5;
    --muted:#8FA0B8;
    --border:#243450;
    --accent:#F5A623;
    --accent-ink:#17130A;
    --signal:#4DD6DC;
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
    padding-inline:clamp(16px,4vw,32px);
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  img{max-width:100%;}
  .wrap{max-width:var(--maxw);margin-inline:auto;}
  h1,h2,h3{font-family:"Big Shoulders Display",system-ui,sans-serif;text-transform:uppercase;text-wrap:balance;line-height:0.95;letter-spacing:0.01em;margin:0;}
  .mono{font-family:"IBM Plex Mono",ui-monospace,monospace;}
  .eyebrow{
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:0.72rem;
    letter-spacing:0.16em;
    color:var(--signal);
    display:flex;align-items:center;gap:10px;
    margin-bottom:14px;
  }
  .eyebrow::after{content:"";flex:1;height:1px;background:var(--border);}
  .eyebrow.center{justify-content:center;}
  .eyebrow.center::after{display:none;}
  p{color:var(--muted);line-height:1.65;max-width:62ch;}
  :focus-visible{outline:2px solid var(--signal);outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}
  }

  /* ---------- nav ---------- */
  header.nav{
    position:sticky;top:0;z-index:20;
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav-row{
    max-width:var(--maxw);margin-inline:auto;
    display:flex;align-items:center;justify-content:space-between;
    padding-block:14px;gap:16px;
  }
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
  .logo-mark{width:38px;height:38px;border-radius:8px;object-fit:cover;flex-shrink:0;}
  .logo-text{display:flex;flex-direction:column;line-height:1;}
  .logo-text b{font-family:"Big Shoulders Display";font-weight:800;font-size:1.35rem;letter-spacing:0.02em;text-transform:uppercase;}
  .logo-text span{font-family:"IBM Plex Mono";font-size:0.58rem;letter-spacing:0.18em;color:var(--muted);text-transform:uppercase;margin-top:2px;}
  .navlinks{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;}
  .navlinks a{text-decoration:none;font-size:0.92rem;font-weight:500;color:var(--muted);transition:color .15s;}
  .navlinks a:hover{color:var(--ink);}
  .navlinks{display:none;}
  @media (min-width:840px){.navlinks{display:flex;}}
  .btn{
    font-family:"IBM Plex Mono";font-weight:600;font-size:0.82rem;letter-spacing:0.04em;
    padding:11px 20px;border-radius:var(--radius);border:1px solid transparent;
    text-decoration:none;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
    transition:transform .15s, background .15s;
  }
  .btn-accent{background:var(--accent);color:var(--accent-ink);}
  .btn-accent:hover{transform:translateY(-1px);}
  .btn-ghost{border-color:var(--border);color:var(--ink);background:transparent;}
  .btn-ghost:hover{border-color:var(--signal);}

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    padding-block:64px 56px;
  }
  .hero-copy{max-width:640px;margin-inline:auto;text-align:center;}
  .hero .eyebrow{color:#7FE3E8;justify-content:center;}
  .hero .eyebrow::after{display:none;}
  .hero h1{font-size:clamp(2.6rem,5.2vw,3.8rem);color:#fff;}
  .hero h1 .accent{color:var(--accent);}
  .hero p.lede{font-size:1.05rem;max-width:46ch;margin-top:18px;margin-inline:auto;color:#D7E0EA;}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;justify-content:center;}
  .hero .btn-ghost{color:#fff;border-color:rgba(255,255,255,.45);}
  .hero .btn-ghost:hover{border-color:#fff;}

  /* ---------- stat strip ---------- */
  .stats{
    display:grid;grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    padding-block:28px;margin-block:8px 64px;
  }
  @media (max-width:700px){.stats{grid-template-columns:repeat(2,1fr);row-gap:24px;}}
  .stat{padding-inline:20px;border-left:1px solid var(--border);}
  .stat:first-child, .stat:nth-child(3){border-left:none;}
  @media (min-width:700px){.stat:nth-child(3){border-left:1px solid var(--border);}}
  .stat .num{font-family:"IBM Plex Mono";font-variant-numeric:tabular-nums;font-weight:600;font-size:2.1rem;color:var(--ink);display:block;}
  .stat .lbl{font-size:0.82rem;color:var(--muted);margin-top:2px;}

  /* ---------- section shell ---------- */
  section{padding-block:20px 72px;}
  .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:36px;flex-wrap:wrap;}
  .section-head h2{font-size:clamp(1.9rem,4vw,2.7rem);}

  /* ---------- services ---------- */
  .services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
  @media (max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:520px){.services-grid{grid-template-columns:1fr;}}
  .svc{background:var(--surface);padding:28px 22px;position:relative;counter-increment:svc;}
  .svc::before{content:"SYS-0" counter(svc);position:absolute;top:16px;right:18px;font-family:"IBM Plex Mono";font-size:0.68rem;color:var(--muted);letter-spacing:0.06em;}
  .services-grid{counter-reset:svc;}
  .svc-icon{width:64px;height:64px;border-radius:8px;object-fit:cover;object-position:center;margin-bottom:18px;border:1px solid var(--border);}
  .svc h3{font-size:1.3rem;margin-bottom:10px;text-transform:none;letter-spacing:0;}
  .svc p{font-size:0.9rem;margin:0;max-width:none;}
  .svc-bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .2s;}
  .svc:hover .svc-bar{transform:scaleX(1);}

  /* ---------- about ---------- */
  .about{display:grid;grid-template-columns:0.95fr 1.05fr;gap:56px;align-items:start;}
  @media (max-width:900px){.about{grid-template-columns:1fr;}}
  .badge-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
  .badge{border:1px solid var(--border);padding:8px 14px;font-family:"IBM Plex Mono";font-size:0.74rem;color:var(--muted);border-radius:var(--radius);}

  /* ---------- why us ---------- */
  .why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--border);border:1px solid var(--border);}
  @media (max-width:700px){.why-grid{grid-template-columns:1fr;}}
  .why{background:var(--surface);padding:26px;display:flex;gap:16px;}
  .why-num{font-family:"IBM Plex Mono";font-weight:600;color:var(--accent);font-size:1.1rem;flex-shrink:0;}
  .why h3{font-size:1.05rem;text-transform:none;letter-spacing:0;margin-bottom:6px;}
  .why p{margin:0;font-size:0.9rem;}

  /* ---------- clients ---------- */
  .clients-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);margin-bottom:22px;}
  .client-plate{background:var(--surface);padding:24px;}
  .client-plate .logo-chip{height:76px;border-radius:var(--radius);background:#F5F1E8;display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:14px;}
  .client-plate .logo-chip img{max-height:56px;max-width:82%;object-fit:contain;}
  .client-plate .name{font-family:"Big Shoulders Display";font-weight:800;font-size:1.4rem;text-transform:uppercase;}
  .client-plate .meta{font-family:"IBM Plex Mono";font-size:0.72rem;color:var(--signal);margin-top:6px;display:block;}
  .note{border:1px dashed var(--border);padding:16px 18px;font-size:0.86rem;color:var(--muted);border-radius:var(--radius);}
  .note strong{color:var(--ink);}

  /* ---------- contact ---------- */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;}
  @media (max-width:800px){.contact-grid{grid-template-columns:1fr;}}
  .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
  .field label{font-size:0.78rem;font-family:"IBM Plex Mono";color:var(--muted);letter-spacing:0.04em;}
  .field input, .field textarea{
    background:var(--surface);border:1px solid var(--border);color:var(--ink);
    padding:11px 12px;font-family:inherit;font-size:0.94rem;border-radius:var(--radius);
  }
  .field textarea{resize:vertical;min-height:96px;}
  .contact-detail{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--border);}
  .contact-detail svg{width:20px;height:20px;color:var(--signal);flex-shrink:0;margin-top:2px;}
  .contact-detail .k{font-family:"IBM Plex Mono";font-size:0.72rem;color:var(--muted);letter-spacing:0.06em;display:block;}
  .contact-detail .v{font-size:0.98rem;margin-top:2px;}
  .placeholder-flag{color:var(--accent);font-style:italic;}

  footer{border-top:1px solid var(--border);padding-block:40px;margin-top:20px;}
  .foot-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start;}
  .foot-cols{display:flex;gap:56px;flex-wrap:wrap;}
  .foot-col h4{font-family:"IBM Plex Mono";font-size:0.74rem;letter-spacing:0.08em;color:var(--muted);margin:0 0 12px;text-transform:uppercase;}
  .foot-col a{display:block;font-size:0.88rem;color:var(--ink);text-decoration:none;margin-bottom:8px;opacity:0.85;}
  .foot-col a:hover{opacity:1;color:var(--signal);}
  .foot-bottom{margin-top:32px;padding-top:20px;border-top:1px solid var(--border);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:0.78rem;color:var(--muted);font-family:"IBM Plex Mono";}

  /* ---------- nav active state ---------- */
  .navlinks a.active{color:var(--ink);font-weight:600;}

  /* ---------- inner page hero ---------- */
  .page-hero{max-width:760px;margin-inline:auto;text-align:center;padding-block:48px 40px;}
  .page-hero h1{font-size:clamp(2.2rem,5vw,3.2rem);}
  .page-hero p{font-size:1.02rem;max-width:52ch;margin-inline:auto;margin-top:16px;}

  /* ---------- framed real photo ---------- */
  .img-frame{border:1px solid var(--border);border-radius:6px;overflow:hidden;}
  .img-frame img{width:100%;display:block;}
  .img-caption{font-family:"IBM Plex Mono";font-size:0.68rem;color:var(--muted);letter-spacing:0.04em;margin-top:8px;}

  /* ---------- service detail rows (services.html) ---------- */
  .svc-detail{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:center;padding-block:36px;border-bottom:1px solid var(--border);}
  .svc-detail:last-child{border-bottom:none;}
  @media (max-width:700px){.svc-detail{grid-template-columns:1fr;}}
  .svc-detail .img-frame{aspect-ratio:4/3;}
  .svc-detail .img-frame img{width:100%;height:100%;object-fit:cover;}
  .svc-detail h3{font-size:1.5rem;margin-bottom:10px;}
  .svc-detail .tag{font-family:"IBM Plex Mono";font-size:0.68rem;color:var(--signal);letter-spacing:0.08em;display:block;margin-bottom:8px;}

  /* ---------- blog ---------- */
  .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);}
  @media (max-width:900px){.blog-grid{grid-template-columns:1fr;}}
  .blog-card{background:var(--surface);display:flex;flex-direction:column;}
  .blog-card .img-frame{border:none;border-radius:0;aspect-ratio:16/10;}
  .blog-card .img-frame img{width:100%;height:100%;object-fit:cover;}
  .blog-card .body{padding:22px;}
  .blog-card .tag{font-family:"IBM Plex Mono";font-size:0.68rem;color:var(--signal);letter-spacing:0.08em;display:block;margin-bottom:8px;}
  .blog-card h3{font-size:1.15rem;text-transform:none;letter-spacing:0;margin-bottom:8px;}
  .blog-card p{font-size:0.9rem;margin:0;}

  /* ---------- map ---------- */
  .map-frame{border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-top:24px;}
  .map-frame iframe{width:100%;height:280px;display:block;border:none;}

  /* ---------- home page: dark tech background ---------- */
  body.home-dark{
    --bg:#0A111C;
    --surface:#111B2B;
    --surface-2:#172437;
    --ink:#E8EDF5;
    --muted:#93A0B4;
    --border:#243450;
    --accent:#F5A623;
    --accent-ink:#17130A;
    --signal:#4DD6DC;
    background-color:var(--bg);
    background-image:
      linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
      radial-gradient(circle at 12% 8%, rgba(77,214,220,.16), transparent 40%),
      radial-gradient(circle at 88% 45%, rgba(245,166,35,.12), transparent 45%),
      radial-gradient(circle at 50% 100%, rgba(77,214,220,.10), transparent 50%);
    background-size:46px 46px, 46px 46px, auto, auto, auto;
    background-attachment:fixed, fixed, fixed, fixed, fixed;
  }