:root{
  --ink:#12192B;
  --paper:#F1EFE8;
  --teal:#3FA396;
  --copper:#C97A3D;
  --slate:#5B6472;
  --line: rgba(241,239,232,0.14);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; letter-spacing:-0.01em;}
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}

/* ---- Nav ---- */
nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 32px;
  background:rgba(241,239,232,0.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(18,25,43,0.08);
}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.05rem;}
.brand-dot{width:8px; height:8px; border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(63,163,150,0.18);}
.nav-links{display:flex; gap:28px; font-size:0.92rem; color:var(--slate);}
.nav-links a:hover{color:var(--ink);}
.nav-cta{
  background:var(--ink); color:var(--paper); padding:9px 18px; border-radius:3px;
  font-size:0.88rem; font-weight:500;
}
@media (max-width:720px){ .nav-links{display:none;} }

/* ---- Hero ---- */
.hero{
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:100px 32px 80px;
  overflow:hidden;
}
.hero-inner{max-width:1100px; margin:0 auto; position:relative; z-index:2;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--teal);
  letter-spacing:0.08em; text-transform:uppercase; margin-bottom:20px;
  display:flex; align-items:center; gap:8px;
}
.pulse{width:6px; height:6px; border-radius:50%; background:var(--teal); animation:pulse 2s infinite;}
@keyframes pulse{
  0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(63,163,150,0.5);}
  50%{opacity:0.6; box-shadow:0 0 0 6px rgba(63,163,150,0);}
}
.hero h1{
  font-size:clamp(2.1rem, 5vw, 3.6rem);
  font-weight:600; max-width:14ch; line-height:1.08; margin-bottom:22px;
}
.hero p{
  font-size:1.08rem; color:rgba(241,239,232,0.72); max-width:46ch; margin-bottom:36px;
}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.btn-primary{
  background:var(--teal); color:var(--ink); padding:13px 24px; border-radius:3px;
  font-weight:600; font-size:0.95rem;
}
.btn-secondary{
  border:1px solid rgba(241,239,232,0.3); color:var(--paper); padding:13px 24px; border-radius:3px;
  font-weight:500; font-size:0.95rem;
}

/* ---- Network diagram ---- */
.diagram{
  position:absolute; right:-40px; top:50%; transform:translateY(-50%);
  width:520px; height:520px; z-index:1; opacity:0.9;
}
@media (max-width:980px){ .diagram{display:none;} }
.diagram svg{width:100%; height:100%;}
.node-line{stroke:rgba(63,163,150,0.35); stroke-width:1.5; fill:none;}
.node-line.active{stroke:var(--teal);}
.node-dot{fill:var(--paper); stroke:rgba(241,239,232,0.4); stroke-width:1;}
.node-hub{fill:var(--teal);}
.flow{
  stroke:var(--teal); stroke-width:2; fill:none;
  stroke-dasharray:6 300; stroke-dashoffset:0;
  animation:flow 3.5s linear infinite;
}
@keyframes flow{ to{ stroke-dashoffset:-306; } }
.node-label{font-family:'IBM Plex Mono', monospace; font-size:10px; fill:rgba(241,239,232,0.55);}

@media (prefers-reduced-motion: reduce){
  .pulse, .flow{ animation:none; }
}

/* ---- Services ---- */
.section{padding:88px 32px;}
.section-inner{max-width:1100px; margin:0 auto;}
.section-head{max-width:60ch; margin-bottom:56px;}
.section-head .eyebrow{color:var(--copper);}
.section-head h2{font-size:clamp(1.6rem,3vw,2.2rem); font-weight:600; color:var(--ink);}

.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(18,25,43,0.1);}
@media (max-width:860px){ .services-grid{grid-template-columns:1fr;} }
.service-card{
  background:var(--paper); padding:36px 30px; position:relative;
}
.service-tag{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; color:var(--slate);
  text-transform:uppercase; letter-spacing:0.06em; margin-bottom:18px; display:block;
}
.service-card h3{font-size:1.25rem; font-weight:600; margin-bottom:12px;}
.service-card p{color:var(--slate); font-size:0.95rem;}
.service-icon{width:34px; height:34px; margin-bottom:20px; color:var(--teal);}

/* ---- Service icon animations ---- */
/* Networking: wifi arcs pulse outward in sequence */
.icon-wifi .arc{
  animation:wifi-pulse 2.4s ease-in-out infinite;
  transform-origin:12px 19px;
}
.icon-wifi .arc-1{animation-delay:0s;}
.icon-wifi .arc-2{animation-delay:0.25s;}
.icon-wifi .arc-3{animation-delay:0.5s;}
@keyframes wifi-pulse{
  0%,60%,100%{opacity:1;}
  30%{opacity:0.35;}
}

/* Security: slow breathing pulse, like a status LED */
.icon-camera{
  animation:camera-breathe 3.2s ease-in-out infinite;
}
@keyframes camera-breathe{
  0%,100%{opacity:1;}
  50%{opacity:0.55;}
}

/* Automation: grid lines gently sweep to suggest active control */
.icon-automation .grid-line{
  animation:automation-sweep 2.8s ease-in-out infinite;
}
.icon-automation .grid-line-h{animation-delay:0.2s;}
@keyframes automation-sweep{
  0%,100%{opacity:0.4;}
  50%{opacity:1;}
}

@media (prefers-reduced-motion: reduce){
  .icon-wifi .arc, .icon-camera, .icon-automation .grid-line{ animation:none; }
}

/* ---- About ---- */
.about{background:var(--ink); color:var(--paper);}
.about-grid{display:grid; grid-template-columns:1fr 1.3fr; gap:60px; align-items:center;}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr;} }
.about-card{
  border:1px solid rgba(241,239,232,0.14); border-radius:4px; padding:32px;
  background:rgba(241,239,232,0.03);
}
.about-card .mono{color:var(--teal); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; display:block; margin-bottom:16px;}
.about h2{font-size:clamp(1.6rem,3vw,2.1rem); margin-bottom:20px; font-weight:600;}
.about p{color:rgba(241,239,232,0.7); font-size:1rem; margin-bottom:16px; max-width:52ch;}
.about-link{color:var(--teal); font-weight:500; font-size:0.95rem;}

/* ---- Contact ---- */
.contact{text-align:center;}
.contact-inner{max-width:640px; margin:0 auto;}
.contact h2{font-size:clamp(1.8rem,4vw,2.6rem); margin-bottom:18px;}
.contact p{color:var(--slate); margin-bottom:32px; font-size:1.05rem;}

footer{
  padding:40px 32px; border-top:1px solid rgba(18,25,43,0.08);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  font-size:0.88rem; color:var(--slate);
}
footer .brand{font-size:0.95rem; color:var(--ink);}