:root{
  --bg:#EEEDE7;
  --surface:#FFFFFF;
  --ink:#20262B;
  --ink-soft:#5B6570;
  --border:#D8D5CC;
  --green:#2E7D4F;
  --green-soft:#E3EFE7;
  --amber:#C97F1E;
  --amber-soft:#F5E9D8;
  --blue:#2E6F8E;
  --blue-soft:#E1EBEF;
  --radius:14px;
  --max:1120px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', system-ui, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:'Space Grotesk', sans-serif;
  margin:0;
  letter-spacing:-0.01em;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.04em;
}
a{color:inherit;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px;}
section{padding:88px 0;}
:focus-visible{outline:2px solid var(--green); outline-offset:3px;}

/* Header */
header{
  position:sticky; top:0; z-index:20;
  background:rgba(238,237,231,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  max-width:var(--max); margin:0 auto;
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand-mark{
  width:26px; height:26px; border-radius:6px;
  background:var(--ink);
  display:grid; grid-template-columns:1fr 1fr; gap:3px; padding:5px;
}
.brand-mark span{background:var(--green); border-radius:1px;}
.brand-name{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:17px;}
nav.links{display:flex; gap:28px;}
nav.links a{
  font-size:14.5px; font-weight:500; text-decoration:none; color:var(--ink);
  position:relative; padding-bottom:3px;
}
nav.links a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--green); transform:scaleX(0); transform-origin:left;
  transition:transform .2s ease;
}
nav.links a:hover::after, nav.links a.current::after{transform:scaleX(1);}

/* Hero */
.hero{padding:88px 0 64px;}
.hero .wrap{
  display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--border); background:var(--surface);
  padding:6px 12px; border-radius:100px;
  font-size:12px; font-weight:600; color:var(--ink-soft);
  text-transform:uppercase;
}
.dot{width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0;}
h1.headline{
  font-size:clamp(34px, 4.5vw, 52px);
  font-weight:700; margin:18px 0 18px;
  line-height:1.08;
}
.hero p.sub{
  font-size:17px; color:var(--ink-soft); max-width:46ch; margin-bottom:28px;
}
.cta-row{display:flex; align-items:center; gap:22px; flex-wrap:wrap;}
.btn{
  display:inline-block; text-decoration:none;
  background:var(--ink); color:#fff;
  padding:13px 22px; border-radius:9px;
  font-weight:600; font-size:15px;
  transition:transform .15s ease, background .15s ease;
}
.btn:hover{background:var(--green); transform:translateY(-1px);}
.link-quiet{
  font-size:14.5px; font-weight:600; text-decoration:none;
  color:var(--ink-soft); border-bottom:1px solid var(--border);
  padding-bottom:2px;
}
.link-quiet:hover{color:var(--ink); border-color:var(--ink);}

/* Status panel (signature element) */
.panel{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 22px 10px; box-shadow:0 1px 0 rgba(0,0,0,0.02);
}
.panel-head{
  display:flex; justify-content:space-between; align-items:center;
  font-size:11.5px; color:var(--ink-soft); text-transform:uppercase;
  padding-bottom:14px; margin-bottom:6px; border-bottom:1px solid var(--border);
}
.panel-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 2px; border-bottom:1px dashed var(--border);
  font-size:13.5px;
}
.panel-row:last-child{border-bottom:none;}
.panel-row .label{color:var(--ink); font-weight:600; letter-spacing:0.06em;}
.status{
  display:flex; align-items:center; gap:8px;
  color:var(--ink-soft); font-weight:600; font-size:12px;
}
.led{
  width:9px; height:9px; border-radius:50%;
  background:#C6C2B6;
  box-shadow:0 0 0 3px rgba(0,0,0,0.03);
  animation: light-up 0.4s ease forwards;
  animation-delay: calc(var(--i) * 0.35s + 0.3s);
}
.status-text{opacity:0; animation:fade-text 0.3s ease forwards; animation-delay: calc(var(--i) * 0.35s + 0.35s);}
@keyframes light-up{
  to{ background:var(--green); box-shadow:0 0 0 3px var(--green-soft);}
}
@keyframes fade-text{ to{opacity:1;} }
@media (prefers-reduced-motion: reduce){
  .led, .status-text{animation:none; opacity:1; background:var(--green); box-shadow:0 0 0 3px var(--green-soft);}
}

/* Section headings */
.section-head{margin-bottom:40px; max-width:60ch;}
.eyebrow{
  font-size:12px; font-weight:600; color:var(--ink-soft);
  text-transform:uppercase; margin-bottom:10px; display:block;
}
h2.section-title{font-size:clamp(26px, 3vw, 34px); font-weight:700;}

/* Guides / card grid */
.guides{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.card{
  border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; background:var(--bg);
  transition:border-color .15s ease, transform .15s ease;
  display:block; text-decoration:none;
}
.card:hover{border-color:var(--ink); transform:translateY(-2px);}
.card-cat{
  display:flex; align-items:center; gap:7px;
  font-size:11px; font-weight:600; text-transform:uppercase; margin-bottom:14px;
}
.card-cat .dot{width:6px; height:6px;}
.cat-network .dot{background:var(--blue);} .cat-network{color:var(--blue);}
.cat-power .dot{background:var(--amber);} .cat-power{color:var(--amber);}
.cat-perf .dot{background:var(--green);} .cat-perf{color:var(--green);}
.cat-hardware .dot{background:var(--blue);} .cat-hardware{color:var(--blue);}
.cat-record .dot{background:var(--blue);} .cat-record{color:var(--blue);}
.card h3{font-size:18px; margin-bottom:8px;}
.card p{color:var(--ink-soft); font-size:14.5px; margin:0 0 16px;}
.card-meta{font-size:11.5px; color:var(--ink-soft); border-top:1px solid var(--border); padding-top:12px;}

/* Service banner (cross-links a paid service from a free-content section) */
.service-banner{
  margin-top:20px; display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  border:1px solid var(--ink); border-radius:var(--radius);
  padding:22px 26px; background:var(--bg);
  text-decoration:none; color:var(--ink);
  transition:transform .15s ease;
}
.service-banner:hover{transform:translateY(-2px);}
.service-banner h3{font-size:17px; margin-bottom:4px;}
.service-banner p{margin:0; font-size:14px; color:var(--ink-soft);}
.service-banner .btn{flex-shrink:0;}

/* Steps (ordered process) */
.steps{display:flex; flex-direction:column;}
.step{
  display:grid; grid-template-columns:70px 1fr; gap:22px;
  padding:26px 0; border-bottom:1px solid var(--border);
  position:relative;
}
.step:first-child{padding-top:0;}
.step:last-child{border-bottom:none;}
.step-num{
  font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:22px;
  color:var(--border);
}
.step h3{font-size:18px; margin-bottom:6px;}
.step p{color:var(--ink-soft); font-size:14.5px; margin:0; max-width:60ch;}

/* About-style two column */
.about-grid{display:grid; grid-template-columns:0.6fr 1.4fr; gap:56px; align-items:start;}
.about-grid p{font-size:16.5px; color:var(--ink-soft); max-width:56ch; margin:0 0 24px;}
.principles{display:flex; gap:12px; flex-wrap:wrap;}
.principle{
  font-size:11.5px; font-weight:600; text-transform:uppercase;
  border:1px solid var(--border); border-radius:100px; padding:7px 13px;
  color:var(--ink-soft); display:flex; align-items:center; gap:7px;
}

/* Pricing card */
.price-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; text-align:center;
}
.price-amount{font-family:'Space Grotesk', sans-serif; font-weight:700; font-size:46px; line-height:1; color:var(--ink);}
.price-label{font-size:12px; color:var(--ink-soft); text-transform:uppercase; margin-top:10px; letter-spacing:0.05em;}
.price-note{font-size:13px; color:var(--ink-soft); margin-top:18px; border-top:1px solid var(--border); padding-top:18px; text-align:left;}
.price-note ul{margin:0; padding-left:18px;}
.price-note li{margin-bottom:6px;}

/* Contact */
.contact-card{
  background:var(--ink); color:#fff; border-radius:var(--radius);
  padding:44px; display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap;
}
.contact-card h2{color:#fff; font-size:24px; margin-bottom:8px;}
.contact-card p{color:#B9BFC5; margin:0; font-size:14.5px;}
.contact-card .btn{background:var(--green);}
.contact-card .btn:hover{background:#3E9564;}

footer{
  border-top:1px solid var(--border); padding:28px 0;
}
.foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;}
.foot-row .mono{font-size:11px; color:var(--ink-soft); display:flex; align-items:center; gap:7px;}
.foot-row p{margin:0; font-size:13px; color:var(--ink-soft);}

@media (max-width: 860px){
  .hero .wrap{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  nav.links{display:none;}
  .contact-card{flex-direction:column; align-items:flex-start;}
  .service-banner{flex-direction:column; align-items:flex-start;}
  section{padding:64px 0;}
}