:root{
  --ink:#0d1620;
  --ink-2:#2a3b4d;
  --muted:#5c7189;
  --ground:#f5f7f9;
  --panel:#ffffff;
  --panel-2:#eaeff3;
  --line:#d6dee5;
  --line-soft:#e4eaef;
  --amber:#c8761f;
  --amber-soft:#f7e6d2;
  --on-amber:#ffffff;
  --cyan:#1d7a8c;
  --ok:#2e7d55;
  --dark:#0d1620;
  --dark-2:#14212e;
  --dark-ink:#eef3f7;
  --dark-muted:#8fa5bb;
  --dark-line:#27384b;
  --shadow:0 1px 2px rgba(13,22,32,.05), 0 10px 30px rgba(13,22,32,.06);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3",-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8eef4; --ink-2:#c2d0dd; --muted:#8ea3b8;
    --ground:#0b131c; --panel:#121d29; --panel-2:#16222e;
    --line:#26353f; --line-soft:#1d2a36;
    --amber:#e9a45c; --amber-soft:#35261a; --on-amber:#1b1206;
    --cyan:#5fbdcf; --ok:#5fb98a;
    --dark:#070d14; --dark-2:#101a25; --dark-line:#22313f;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ink:#e8eef4; --ink-2:#c2d0dd; --muted:#8ea3b8;
  --ground:#0b131c; --panel:#121d29; --panel-2:#16222e;
  --line:#26353f; --line-soft:#1d2a36;
  --amber:#e9a45c; --amber-soft:#35261a; --on-amber:#1b1206;
  --cyan:#5fbdcf; --ok:#5fb98a;
  --dark:#070d14; --dark-2:#101a25; --dark-line:#22313f;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:17.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; line-height:1.14; text-wrap:balance; margin:0; letter-spacing:-.015em}
p{margin:0}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1140px; margin:0 auto; padding-inline:22px}
.narrow{max-width:760px}
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan); margin:0 0 16px;
}
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--display); font-weight:600; font-size:15px;
  padding:14px 24px; border-radius:5px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:filter .15s, border-color .15s;
}
.btn-primary{background:var(--amber); color:var(--on-amber); border-color:var(--amber)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-outline{border-color:var(--line); color:var(--ink)}
.btn-outline:hover{border-color:var(--amber)}
.btn-ghost{border-color:var(--dark-line); color:var(--dark-ink)}
.btn-ghost:hover{border-color:var(--dark-muted)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px;
}

/* ---------- header ---------- */
.topbar{background:var(--dark); color:var(--dark-ink); border-bottom:1px solid var(--dark-line)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between; gap:14px 24px; padding-block:16px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit}
.mark{width:32px; height:32px; border-radius:8px; flex:none;
  background:linear-gradient(150deg,#e2913c,#a6561a); display:grid; place-items:center}
.mark span{width:9px; height:9px; border-radius:50%; background:#0d1620; display:block}
.brand b{font-family:var(--display); font-size:16.5px; letter-spacing:-.005em; display:block}
.brand small{display:block; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--dark-muted); margin-top:2px}
.topnav{display:flex; gap:17px; align-items:center; font-size:14.5px; flex-wrap:wrap; justify-content:flex-end}
.topnav a{text-decoration:none; color:var(--dark-muted); white-space:nowrap}
.topnav a:hover{color:var(--dark-ink)}
.topnav a.here{color:var(--dark-ink); box-shadow:inset 0 -2px 0 var(--amber)}
.topnav .tel{font-family:var(--mono); font-size:13px; color:var(--dark-ink); padding-left:3px}

/* ---------- hero ---------- */
.hero{background:var(--dark); color:var(--dark-ink)}
.hero .wrap{padding-block:58px 64px}
.hero h1{font-size:clamp(32px,4.6vw,50px); margin-bottom:20px}
.hero h1 em{font-style:normal; color:var(--amber)}
.hero .lede{color:var(--dark-muted); font-size:19.5px; max-width:60ch}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px}
.hero-rule{display:flex; gap:10px 26px; flex-wrap:wrap; margin-top:36px; padding-top:24px;
  border-top:1px solid var(--dark-line); font-family:var(--mono); font-size:12px;
  letter-spacing:.06em; color:var(--dark-muted); text-transform:uppercase}

/* home hero variant */
.hero-home .wrap{display:grid; grid-template-columns:1.06fr .94fr; gap:54px; align-items:center; padding-block:76px 82px}

/* panel mock */
.panelmock{background:var(--dark-2); border:1px solid var(--dark-line); border-radius:14px;
  padding:18px; box-shadow:0 26px 60px rgba(0,0,0,.35)}
.pm-head{display:flex; align-items:center; justify-content:space-between; padding-bottom:14px; border-bottom:1px solid var(--dark-line)}
.pm-head b{font-family:var(--display); font-size:14px}
.pm-head span{font-family:var(--mono); font-size:11px; color:var(--ok); display:flex; align-items:center; gap:7px}
.pm-head span i{width:6px; height:6px; border-radius:50%; background:var(--ok); display:block; animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pm-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:14px}
.tile{background:rgba(255,255,255,.03); border:1px solid var(--dark-line); border-radius:9px; padding:12px 13px}
.tile .lab{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dark-muted)}
.tile .val{font-family:var(--display); font-size:19px; margin-top:5px; font-variant-numeric:tabular-nums}
.tile.lit{border-color:rgba(233,164,92,.45); background:rgba(233,164,92,.08)}
.tile.lit .val{color:#e9a45c}
.pm-cams{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px}
.cam{aspect-ratio:4/3; max-width:100%; border-radius:7px; border:1px solid var(--dark-line); position:relative;
  background:linear-gradient(180deg,rgba(95,189,207,.12),rgba(13,22,32,.7)),
  repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 4px)}
.cam b{position:absolute; left:6px; bottom:5px; font-family:var(--mono); font-size:8.5px; letter-spacing:.06em; color:var(--dark-muted); font-weight:400}
.cam i{position:absolute; right:6px; top:6px; width:5px; height:5px; border-radius:50%; background:#e2574a; display:block}

/* ---------- sections ---------- */
section{padding-block:74px}
section.tight{padding-block:56px}
.band{background:var(--panel-2); border-block:1px solid var(--line-soft)}
.sec-head{max-width:66ch; margin-bottom:44px}
.sec-head h2{font-size:clamp(25px,3.2vw,35px); margin-bottom:14px}
.sec-head .kicker{color:var(--muted); font-size:18.5px}
.prose{max-width:66ch; display:flex; flex-direction:column; gap:18px; font-size:18px; color:var(--ink-2)}
.prose .lead{font-size:20px; color:var(--ink); font-family:var(--display); font-weight:600; line-height:1.4}

/* grids */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}

.card{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px 26px; box-shadow:var(--shadow)}
.card h3{font-size:20px; margin-bottom:10px}
.card p{color:var(--muted); font-size:16.5px}
.card.link{text-decoration:none; display:flex; flex-direction:column; transition:border-color .15s, transform .15s}
.card.link:hover{border-color:var(--amber); transform:translateY(-2px)}
.card.link .more{margin-top:auto; padding-top:18px; font-family:var(--mono); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--amber)}

/* plain feature list */
.feat{display:flex; flex-direction:column; gap:26px}
.feat .row{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start}
.feat .ico{width:36px; height:36px; border-radius:9px; background:var(--amber-soft); color:var(--amber);
  display:grid; place-items:center; font-family:var(--mono); font-size:15px; flex:none}
.feat b{font-family:var(--display); display:block; font-size:17.5px; margin-bottom:4px}
.feat p{color:var(--muted); font-size:16.5px}

/* checklist */
ul.check{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; font-size:17px}
ul.check li{display:flex; gap:12px; align-items:flex-start; color:var(--ink-2)}
ul.check li::before{content:""; width:7px; height:7px; margin-top:8px; flex:none; border-radius:2px;
  background:var(--amber); transform:rotate(45deg)}
ul.cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 30px}

/* steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line)}
.steps.two{grid-template-columns:repeat(2,1fr)}
.step{padding:28px 26px 30px; border-right:1px solid var(--line)}
.step:last-child{border-right:none}
.step .n{font-family:var(--mono); font-size:11.5px; color:var(--amber); letter-spacing:.12em; margin-bottom:13px}
.step h4{font-size:18.5px; margin-bottom:10px}
.step p{color:var(--muted); font-size:16px}
.step p + p{margin-top:10px}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:9px}
.chip{font-family:var(--mono); font-size:12px; padding:7px 13px; border-radius:20px;
  border:1px solid var(--line); color:var(--ink-2); background:var(--panel)}
.chip.on{border-color:var(--cyan); color:var(--cyan)}

/* note */
.note{background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--cyan);
  border-radius:8px; padding:20px 22px; font-size:16.5px; color:var(--muted); max-width:70ch}
.note b{color:var(--ink); font-family:var(--display)}

/* cta band */
.cta{background:var(--dark); color:var(--dark-ink)}
.cta .wrap{padding-block:62px; display:grid; grid-template-columns:1fr auto; gap:34px; align-items:center}
.cta h2{font-size:clamp(24px,3vw,32px); margin-bottom:12px}
.cta p{color:var(--dark-muted); font-size:18px; max-width:56ch}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap}

/* contact */
.contact-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:46px; align-items:start}
.cinfo{list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:18px}
.cinfo li{display:flex; flex-direction:column; gap:2px}
.cinfo .lab{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.cinfo a,.cinfo b{font-family:var(--display); font-size:19px; font-weight:600; text-decoration:none}
.cinfo a:hover{color:var(--amber)}
.cinfo .sub{font-family:var(--mono); font-size:13px; color:var(--muted)}

form{background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:28px; box-shadow:var(--shadow)}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:17px}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:17px}
label{font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted)}
input,select,textarea{font-family:var(--body); font-size:16px; color:var(--ink); background:var(--ground);
  border:1px solid var(--line); border-radius:7px; padding:12px 13px; width:100%}
textarea{resize:vertical; min-height:116px}
form .btn-primary{width:100%; justify-content:center; margin-top:4px}
.formnote{font-size:13.5px; color:var(--muted); margin-top:15px; text-align:center}
.sent{display:none; border-radius:8px; padding:15px 17px; font-size:15.5px; margin-top:16px;
  background:var(--amber-soft); border:1px solid var(--amber); color:var(--ink)}
.sent.show{display:block}

/* footer */
footer{background:var(--dark); color:var(--dark-muted); padding-block:52px 34px; font-size:15px; border-top:1px solid var(--dark-line)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:38px; padding-bottom:30px; border-bottom:1px solid var(--dark-line)}
.foot-grid h5{font-family:var(--mono); font-size:11px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dark-ink); margin:0 0 14px; font-weight:400}
.foot-links{display:flex; flex-direction:column; gap:10px}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:var(--dark-ink)}
.foot-about p{font-size:15.5px; max-width:42ch; margin-top:14px}
.foot-bottom{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px; font-size:14px}
.foot-bottom a{text-decoration:none}
.foot-bottom a:hover{color:var(--dark-ink)}
.tagline{font-family:var(--display); color:var(--dark-ink); font-size:15px}

@media (max-width:980px){
  .hero-home .wrap{grid-template-columns:1fr; gap:40px; padding-block:56px 62px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(2){border-right:none}
  .step:nth-child(1),.step:nth-child(2){border-bottom:1px solid var(--line)}
  .contact-grid{grid-template-columns:1fr; gap:32px}
  .cta .wrap{grid-template-columns:1fr; gap:24px}
  .foot-grid{grid-template-columns:1fr 1fr; gap:30px}
}
@media (max-width:680px){
  body{font-size:16.5px}
  section{padding-block:52px}
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .steps,.steps.two{grid-template-columns:1fr}
  .step{border-right:none; border-bottom:1px solid var(--line)}
  .step:last-child{border-bottom:none}
  ul.cols{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .topnav{gap:14px; font-size:14px}
  .foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}