:root{
    --navy-deep:#0A1220;
    --navy-panel:#101B2D;
    --line-copper:#C9A15E;
    --circuit-green:#22D9A3;
    --amber:#F5A623;
    --text-hi:#EAF0F5;
    --text-mid:#9FB0C3;
    --text-dim:#5C6C80;
    --danger:#E5484D;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--navy-deep);
    color:var(--text-hi);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    overflow-x:hidden;
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }
  h1,h2,h3, .mono{
    font-family:'JetBrains Mono','Courier New',monospace;
  }
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-size:.7rem;
    color:var(--circuit-green);
  }
  a{color:inherit;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

  /* NAV */
  nav{
    position:sticky; top:0; z-index:50;
    background:rgba(10,18,32,.85);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(201,161,94,.15);
  }
  nav .wrap{display:flex; align-items:center; justify-content:space-between; height:64px;}
  .brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.05rem;}
  .brand-mark{
    width:30px;height:30px;border-radius:4px;
    background:linear-gradient(135deg,var(--circuit-green),var(--amber));
    display:flex;align-items:center;justify-content:center;
    color:#0A1220; font-family:'JetBrains Mono',monospace; font-weight:800; font-size:.8rem;
  }
  .navlinks{display:flex; gap:28px; font-size:.85rem; color:var(--text-mid);}
  .navlinks a:hover{color:var(--circuit-green);}
  .nav-cta{
    font-size:.8rem; padding:8px 16px; border-radius:3px;
    background:var(--circuit-green); color:#08140F; font-weight:700;
  }
  @media (max-width:760px){ .navlinks{display:none;} }

  /* HERO — single line diagram */
  .hero{position:relative; padding:80px 0 40px; overflow:hidden;}
  .hero .wrap{position:relative; z-index:2;}
  .hero-grid-bg{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(201,161,94,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(201,161,94,.05) 1px, transparent 1px);
    background-size:40px 40px;
    mask-image:radial-gradient(ellipse at 50% 30%, black 20%, transparent 75%);
  }
  .hero-tag{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid rgba(34,217,163,.35); color:var(--circuit-green);
    padding:5px 12px; border-radius:100px; font-size:.72rem; letter-spacing:.05em;
    margin-bottom:22px;
  }
  .hero-tag .dot{width:6px;height:6px;border-radius:50%; background:var(--circuit-green); animation:pulse 2s infinite;}
  @keyframes pulse{0%,100%{opacity:1} 50%{opacity:.3}}
  h1.hero-title{
    font-size:clamp(2rem, 5.5vw, 3.6rem);
    line-height:1.08; font-weight:800; letter-spacing:-.01em;
    max-width:820px;
  }
  h1.hero-title .accent{color:var(--circuit-green);}
  .hero-sub{
    color:var(--text-mid); font-size:1.05rem; max-width:560px; margin-top:20px; line-height:1.6;
  }
  .hero-ctas{display:flex; gap:14px; margin-top:32px; flex-wrap:wrap;}
  .btn-primary{
    background:var(--circuit-green); color:#08140F; font-weight:700;
    padding:13px 26px; border-radius:3px; font-size:.9rem; display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--circuit-green);
  }
  .btn-ghost{
    border:1px solid rgba(234,240,245,.25); color:var(--text-hi);
    padding:13px 26px; border-radius:3px; font-size:.9rem;
  }

  /* SLD diagram */
  .sld{
    margin-top:56px; padding:28px 20px;
    border:1px solid rgba(201,161,94,.25); border-radius:6px;
    background:rgba(16,27,45,.6); position:relative;
  }
  .sld-label{position:absolute; top:-11px; left:16px; background:var(--navy-deep); padding:0 10px; font-size:.65rem; color:var(--line-copper); letter-spacing:.12em;}
  svg.sld-svg{width:100%; height:auto; display:block;}
  .sld-node-box{fill:var(--navy-panel); stroke:rgba(234,240,245,.18); stroke-width:1;}
  .sld-node-label{fill:var(--text-hi); font-family:'JetBrains Mono',monospace; font-size:11px;}
  .sld-node-sub{fill:var(--text-dim); font-family:'JetBrains Mono',monospace; font-size:8.5px;}
  .sld-line{stroke:var(--line-copper); stroke-width:1.5; fill:none; opacity:.5;}
  .sld-pulse{stroke:var(--circuit-green); stroke-width:2; fill:none; stroke-dasharray:6 300; filter:drop-shadow(0 0 3px var(--circuit-green));
    animation:flow 3.5s linear infinite;}
  @keyframes flow{ to{ stroke-dashoffset:-306; } }
  .sld-hub{fill:var(--navy-deep); stroke:var(--circuit-green); stroke-width:1.5;}
  .sld-hub-text{fill:var(--circuit-green); font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px;}

  /* SERVICES */
  .section{padding:76px 0;}
  .section-head{margin-bottom:44px; max-width:640px;}
  .section-head h2{font-size:clamp(1.6rem,3.5vw,2.2rem); font-weight:800; margin-top:10px;}
  .section-head p{color:var(--text-mid); margin-top:14px; line-height:1.6;}

  .services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @media (max-width:900px){.services-grid{grid-template-columns:repeat(2,1fr);}}
  @media (max-width:560px){.services-grid{grid-template-columns:1fr;}}
  .svc-card{
    background:var(--navy-panel); border:1px solid rgba(234,240,245,.08);
    border-radius:6px; padding:22px; position:relative; transition:border-color .2s, transform .2s;
  }
  .svc-card:hover{border-color:var(--circuit-green); transform:translateY(-3px);}
  .svc-index{font-family:'JetBrains Mono',monospace; font-size:.7rem; color:var(--line-copper);}
  .svc-card h3{font-size:1.05rem; margin-top:10px; font-weight:700;}
  .svc-card p{color:var(--text-mid); font-size:.85rem; margin-top:8px; line-height:1.55;}
  .svc-tags{margin-top:12px; display:flex; flex-wrap:wrap; gap:6px;}
  .svc-tags span{font-size:.68rem; color:var(--circuit-green); border:1px solid rgba(34,217,163,.3); padding:2px 8px; border-radius:100px;}

  /* WHY */
  .why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  @media (max-width:760px){.why-grid{grid-template-columns:repeat(2,1fr);}}
  .why-item{padding:20px 0; border-top:1px solid rgba(234,240,245,.1);}
  .why-num{font-family:'JetBrains Mono',monospace; color:var(--amber); font-size:.85rem;}
  .why-item h3{font-size:1rem; margin-top:8px;}
  .why-item p{color:var(--text-mid); font-size:.83rem; margin-top:6px; line-height:1.5;}

  /* PROCESS */
  .process-line{position:relative; border-left:1px solid rgba(201,161,94,.3); margin-left:10px; padding-left:32px;}
  .proc-step{position:relative; padding-bottom:36px;}
  .proc-step:last-child{padding-bottom:0;}
  .proc-step::before{
    content:''; position:absolute; left:-38px; top:2px; width:14px; height:14px; border-radius:50%;
    background:var(--navy-deep); border:2px solid var(--circuit-green);
  }
  .proc-step .mono{color:var(--circuit-green); font-size:.75rem;}
  .proc-step h3{font-size:1.05rem; margin-top:6px;}
  .proc-step p{color:var(--text-mid); font-size:.85rem; margin-top:6px; max-width:560px; line-height:1.55;}

  /* CONTACT */
  .contact-panel{
    background:linear-gradient(135deg, rgba(34,217,163,.08), rgba(245,166,35,.05));
    border:1px solid rgba(34,217,163,.25); border-radius:10px; padding:44px 32px;
    display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap;
  }
  .contact-panel h2{font-size:1.7rem;}
  .contact-info{margin-top:16px; color:var(--text-mid); font-size:.9rem; line-height:1.8;}
  .contact-info b{color:var(--text-hi);}

  footer{border-top:1px solid rgba(234,240,245,.08); padding:36px 0; color:var(--text-dim); font-size:.78rem;}
  footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;}
  footer b{color:var(--text-mid);}

/* ===== Sub-service page additions ===== */
.subpage-hero{padding:70px 0 50px; position:relative; overflow:hidden;}
.subpage-hero .hero-grid-bg{position:absolute; inset:0;
  background-image:linear-gradient(rgba(201,161,94,.05) 1px, transparent 1px),
  linear-gradient(90deg, rgba(201,161,94,.05) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(ellipse at 50% 20%, black 20%, transparent 75%);}
.breadcrumb{font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--text-dim); margin-bottom:18px;}
.breadcrumb a{color:var(--circuit-green);}
.spec-table{width:100%; border-collapse:collapse; margin-top:14px;}
.spec-table td{padding:10px 0; border-bottom:1px solid rgba(234,240,245,.08); font-size:.87rem; color:var(--text-mid);}
.spec-table td:first-child{color:var(--text-hi); font-weight:600; width:38%;}
.brand-strip{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;}
.brand-strip span{font-size:.72rem; border:1px solid rgba(201,161,94,.35); color:var(--line-copper); padding:5px 12px; border-radius:100px;}
.related-nav{display:flex; gap:10px; flex-wrap:wrap; margin-top:8px;}
.related-nav a{font-size:.78rem; padding:8px 14px; border:1px solid rgba(234,240,245,.15); border-radius:100px; color:var(--text-mid);}
.related-nav a:hover, .related-nav a.active{border-color:var(--circuit-green); color:var(--circuit-green);}
.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start;}
@media (max-width:820px){.two-col{grid-template-columns:1fr;}}