:root{
    --ink:#0b2b3c;
    --ink-soft:#3a5566;
    --navy:#054d74;
    --navy-deep:#062a3d;
    --blue:#0a7ac2;
    --sky:#79c4ef;
    --amber:#d9670a;
    --gold:#e0a900;
    --seal:#b3230f;
    --bg:#f2f6f8;
    --surface:#ffffff;
    --surface-2:#e8eff3;
    --border:#d5e0e7;
    --text:#0b2b3c;
    --text-muted:#4c6575;
    --hero-bg:#062a3d;
    --hero-bg-2:#0a3d57;
    --hero-text:#eef5f9;
    --hero-muted:#a9c6d6;
    --shadow: 0 10px 30px -12px rgba(6,42,61,0.25);
    --radius: 14px;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#e7eef3;
      --ink-soft:#b7c9d4;
      --navy:#4fa9dd;
      --navy-deep:#eef5f9;
      --blue:#4fb1e8;
      --sky:#79c4ef;
      --amber:#ff9a44;
      --gold:#f0c04a;
      --seal:#ff6b52;
      --bg:#081b26;
      --surface:#0d2635;
      --surface-2:#112e3f;
      --border:#1d3d4f;
      --text:#e7eef3;
      --text-muted:#93aebd;
      --hero-bg:#041420;
      --hero-bg-2:#082334;
      --hero-text:#eef5f9;
      --hero-muted:#93aebd;
      --shadow: 0 10px 30px -12px rgba(0,0,0,0.55);
    }
  }
  :root[data-theme="dark"]{
    --ink:#e7eef3;
    --ink-soft:#b7c9d4;
    --navy:#4fa9dd;
    --navy-deep:#eef5f9;
    --blue:#4fb1e8;
    --sky:#79c4ef;
    --amber:#ff9a44;
    --gold:#f0c04a;
    --seal:#ff6b52;
    --bg:#081b26;
    --surface:#0d2635;
    --surface-2:#112e3f;
    --border:#1d3d4f;
    --text:#e7eef3;
    --text-muted:#93aebd;
    --hero-bg:#041420;
    --hero-bg-2:#082334;
    --hero-text:#eef5f9;
    --hero-muted:#93aebd;
    --shadow: 0 10px 30px -12px rgba(0,0,0,0.55);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  h1,h2,h3,h4{
    font-family:"Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
    font-weight:700;
    letter-spacing:0.01em;
    line-height:1.08;
    margin:0;
    color:var(--ink);
    text-wrap:balance;
  }
  .mono{font-family:"IBM Plex Mono", ui-monospace, monospace;}
  .eyebrow{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:0.76rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--blue);
    font-weight:500;
  }
  p{margin:0;}
  a{color:inherit;}
  img{max-width:100%; display:block;}
  .container{
    max-width:1180px;
    margin:0 auto;
    padding:0 28px;
  }
  section{padding:88px 0;}
  @media (max-width:720px){ section{padding:56px 0;} .container{padding:0 20px;} }

  /* ---------- Nav ---------- */
  .nav{
    position:sticky; top:0; z-index:50;
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
  }
  .nav .container{
    display:flex; align-items:center; justify-content:space-between;
    gap:24px; padding-top:12px; padding-bottom:12px;
  }
  .brand{display:flex; align-items:center; gap:12px; text-decoration:none;}
  .brand img{height:46px; width:auto;}
  .brand-name{display:flex; flex-direction:column; line-height:1.15;}
  .brand-name strong{
    font-family:"Barlow Condensed";
    font-weight:700;
    font-size:1.32rem;
    color:var(--ink);
  }
  .brand-name span{
    font-family:"IBM Plex Mono";
    font-size:0.66rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--text-muted);
  }
  .nav-links{
    display:flex; gap:26px; list-style:none; margin:0; padding:0;
    font-size:0.92rem; font-weight:500;
  }
  .nav-links a{
    text-decoration:none; color:var(--ink-soft);
    padding:6px 2px; border-bottom:2px solid transparent;
  }
  .nav-links a:hover{color:var(--blue); border-color:var(--blue);}
  .nav-cta{
    display:flex; align-items:center; gap:14px;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    font-weight:600; font-size:0.9rem;
    padding:11px 20px; border-radius:999px;
    text-decoration:none; white-space:nowrap;
    border:1px solid transparent;
    cursor:pointer;
  }
  .btn-primary{ background:var(--amber); color:#fff; }
  .btn-primary:hover{ filter:brightness(1.06); }
  .btn-ghost{ border-color:var(--border); color:var(--ink); background:transparent; }
  .btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
  .btn-light{ background:var(--surface); color:var(--navy-deep); }
  .navtoggle, .mobile-nav{display:none;}
  @media (max-width: 940px){
    .nav-links{display:none;}
    .navtoggle{
      display:inline-flex; align-items:center; justify-content:center;
      width:40px; height:40px; border-radius:10px; border:1px solid var(--border);
      background:transparent; color:var(--ink);
    }
    .mobile-nav{
      display:none; flex-direction:column; gap:2px;
      border-top:1px solid var(--border);
      background:var(--surface);
    }
    .mobile-nav.open{display:flex;}
    .mobile-nav a{
      padding:14px 20px; text-decoration:none; color:var(--ink-soft);
      border-bottom:1px solid var(--border); font-size:0.95rem; font-weight:500;
    }
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    background:
      radial-gradient(900px 500px at 88% -10%, color-mix(in srgb, var(--blue) 30%, transparent), transparent),
      linear-gradient(160deg, var(--hero-bg-2), var(--hero-bg) 70%);
    color:var(--hero-text);
    overflow:hidden;
    padding:96px 0 84px;
  }
  .hero-grid{
    position:absolute; inset:0; opacity:0.16;
    background-image:
      linear-gradient(color-mix(in srgb, var(--sky) 60%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--sky) 60%, transparent) 1px, transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(700px 500px at 78% 30%, black, transparent 75%);
    mask-image:radial-gradient(700px 500px at 78% 30%, black, transparent 75%);
  }
  .hero .container{
    position:relative; z-index:2;
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
  }
  @media (max-width:900px){ .hero .container{grid-template-columns:1fr;} .hero-visual{order:-1;} }
  .hero h1{ font-size:clamp(2.3rem, 4.2vw, 3.4rem); color:#fff; max-width:15ch;}
  .hero .eyebrow{ color:var(--sky); margin-bottom:16px; display:block;}
  .hero-sub{
    margin-top:20px; font-size:1.08rem; color:var(--hero-muted); max-width:52ch;
  }
  .hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
  .hero-stats{
    display:flex; gap:34px; margin-top:48px; flex-wrap:wrap;
  }
  .hero-stats div strong{
    display:block; font-family:"Barlow Condensed"; font-size:1.9rem; color:#fff;
    font-variant-numeric:tabular-nums;
  }
  .hero-stats div span{ font-size:0.82rem; color:var(--hero-muted); }
  .hero-visual{ display:flex; align-items:center; justify-content:center; }
  .hero-visual svg{ width:100%; max-width:380px; height:auto; }

  /* ---------- Trust bar ---------- */
  .trustbar{
    padding:26px 0; background:var(--surface-2); border-bottom:1px solid var(--border);
  }
  .trustbar .container{
    display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between;
  }
  .trust-item{ display:flex; align-items:center; gap:10px; font-size:0.88rem; font-weight:500; color:var(--ink-soft); }
  .trust-item svg{ width:20px; height:20px; flex:none; color:var(--blue); }

  /* ---------- Section heads ---------- */
  .sec-head{ max-width:720px; margin-bottom:48px; }
  .sec-head h2{ font-size:clamp(1.8rem, 3vw, 2.5rem); margin-top:10px; }
  .sec-head p{ margin-top:14px; color:var(--text-muted); font-size:1.02rem; max-width:60ch; }
  .sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

  /* ---------- About / why us ---------- */
  .about{ background:var(--surface); }
  .about-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;
  }
  @media (max-width:820px){ .about-grid{grid-template-columns:1fr;} }
  .about-points{ display:grid; gap:22px; }
  .about-point{ display:flex; gap:16px; }
  .about-point .num{
    font-family:"Barlow Condensed"; font-weight:700; font-size:1.6rem; color:var(--blue);
    min-width:2.2ch;
  }
  .about-point h4{ font-size:1.08rem; margin-bottom:4px; }
  .about-point p{ color:var(--text-muted); font-size:0.95rem; }
  .about-copy p + p{ margin-top:16px; }
  .about-copy{ color:var(--text-muted); font-size:1.03rem; }
  .about-copy strong{ color:var(--ink); }

  /* ---------- Products ---------- */
  .products{ background:var(--bg); }
  .product-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:40px;
    display:grid;
    grid-template-columns:0.9fr 1.5fr;
    gap:40px;
    margin-bottom:28px;
    box-shadow:var(--shadow);
  }
  .product-card:last-child{ margin-bottom:0; }
  @media (max-width:860px){ .product-card{ grid-template-columns:1fr; gap:28px; padding:28px;} }
  .product-card.reverse{ grid-template-columns:1.5fr 0.9fr; }
  @media (max-width:860px){ .product-card.reverse{ grid-template-columns:1fr; } .product-card.reverse .product-visual{order:-1;} }
  .product-visual{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    padding:28px;
    min-height:220px;
  }
  .product-visual svg{ width:100%; max-width:220px; height:auto; }
  .badge-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
  .badge{
    display:inline-flex; align-items:center; gap:6px;
    font-size:0.72rem; font-weight:600; letter-spacing:0.03em;
    padding:5px 11px; border-radius:999px;
    font-family:"IBM Plex Mono";
  }
  .badge-whitelabel{ background:color-mix(in srgb, var(--blue) 14%, transparent); color:var(--blue); }
  .badge-certified{ background:color-mix(in srgb, var(--seal) 14%, transparent); color:var(--seal); }
  .product-body h3{ font-size:1.7rem; }
  .product-tag{ color:var(--text-muted); font-size:0.98rem; margin-top:6px; }
  .product-desc{ margin-top:16px; color:var(--text-muted); font-size:0.98rem; }
  .chip-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
  .chip{
    font-size:0.8rem; font-weight:500; color:var(--ink-soft);
    background:var(--surface-2); border:1px solid var(--border);
    padding:6px 12px; border-radius:8px;
  }
  .chip-label{
    font-family:"IBM Plex Mono"; font-size:0.7rem; text-transform:uppercase;
    letter-spacing:0.08em; color:var(--text-muted); margin-top:22px; display:block;
  }
  .sub-products{ display:grid; gap:18px; margin-top:20px; }
  .sub-product{
    border-top:1px solid var(--border); padding-top:18px;
  }
  .sub-product h4{ font-size:1.12rem; display:flex; align-items:center; gap:10px;}
  .sub-product h4 svg{ width:22px; height:22px; color:var(--blue); flex:none; }
  .sub-product p{ color:var(--text-muted); font-size:0.94rem; margin-top:6px; }

  /* ---------- Applications ---------- */
  .applications{ background:var(--navy-deep); color:var(--hero-text); }
  :root[data-theme="light"] .applications, :root:not([data-theme="dark"]) .applications{ }
  .applications .sec-head h2{ color:#fff; }
  .applications .sec-head p{ color:var(--hero-muted); }
  .app-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:2px;
    background:color-mix(in srgb, #fff 10%, transparent);
    border-radius:var(--radius); overflow:hidden;
  }
  .app-item{
    background:color-mix(in srgb, var(--navy-deep) 96%, #000 10%);
    padding:28px 22px; display:flex; flex-direction:column; gap:14px;
  }
  :root:not([data-theme="dark"]) .app-item{ background: #072e42; }
  :root[data-theme="dark"] .app-item{ background: var(--surface-2); }
  .app-item svg{ width:30px; height:30px; color:var(--sky); }
  .app-item h4{ color:#fff; font-size:1.02rem; font-weight:600; font-family:"IBM Plex Sans"; }
  .app-item p{ color:var(--hero-muted); font-size:0.86rem; }

  /* ---------- Certifications ---------- */
  .certs{ background:var(--surface); }
  .cert-grid{
    display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;
  }
  @media (max-width:860px){ .cert-grid{ grid-template-columns:1fr; } }
  .cert-seal{
    display:flex; align-items:center; justify-content:center;
  }
  .cert-seal svg{ width:100%; max-width:260px; height:auto; }
  .cert-list{ display:grid; gap:18px; margin-top:8px; }
  .cert-list li{ list-style:none; display:flex; gap:14px; }
  .cert-list ul{ margin:0; padding:0; display:grid; gap:18px; }
  .cert-list svg{ width:22px; height:22px; color:var(--seal); flex:none; margin-top:2px; }
  .cert-list h4{ font-size:1.02rem; }
  .cert-list p{ color:var(--text-muted); font-size:0.92rem; margin-top:3px; }

  /* ---------- Contact ---------- */
  .contact{
    background:linear-gradient(160deg, var(--hero-bg-2), var(--hero-bg) 75%);
    color:var(--hero-text);
  }
  .contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:56px;
  }
  @media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact .sec-head h2{ color:#fff; }
  .contact .sec-head p{ color:var(--hero-muted); }
  .contact-card{
    background:color-mix(in srgb, #fff 6%, transparent);
    border:1px solid color-mix(in srgb, #fff 14%, transparent);
    border-radius:var(--radius);
    padding:32px;
  }
  .contact-row{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid color-mix(in srgb, #fff 12%, transparent); }
  .contact-row:last-child{ border-bottom:none; }
  .contact-row svg{ width:22px; height:22px; color:var(--sky); flex:none; margin-top:2px; }
  .contact-row h4{ color:#fff; font-size:0.98rem; font-weight:600; font-family:"IBM Plex Sans"; }
  .contact-row p{ color:var(--hero-muted); font-size:0.92rem; margin-top:4px; }
  .contact-actions{ display:flex; flex-direction:column; gap:14px; }
  .contact-actions .btn{ justify-content:center; padding:16px 24px; font-size:1rem; }
  .gst-pill{
    display:inline-flex; gap:8px; align-items:center; margin-top:22px;
    font-family:"IBM Plex Mono"; font-size:0.82rem; color:var(--hero-muted);
    border:1px dashed color-mix(in srgb, #fff 25%, transparent); padding:8px 14px; border-radius:8px;
  }
  .gst-pill b{ color:#fff; font-weight:500; letter-spacing:0.04em; }

  /* ---------- Footer ---------- */
  footer{ background:var(--navy-deep); color:var(--hero-muted); padding:44px 0 28px; }
  :root[data-theme="dark"] footer{ background:#03111a; }
  .foot-grid{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start; }
  .foot-brand{ display:flex; align-items:center; gap:12px; }
  .foot-brand img{ height:38px; }
  .foot-brand strong{ color:#fff; font-family:"Barlow Condensed"; font-size:1.15rem; }
  .foot-links{ display:flex; gap:24px; list-style:none; padding:0; margin:0; flex-wrap:wrap; }
  .foot-links a{ text-decoration:none; font-size:0.88rem; color:var(--hero-muted); }
  .foot-links a:hover{ color:#fff; }
  .foot-bottom{
    margin-top:32px; padding-top:20px; border-top:1px solid color-mix(in srgb, #fff 10%, transparent);
    display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:0.8rem;
  }