:root{
  --night:#0e1726;
  --panel:#142136;
  --panel-2:#1a2a43;
  --rule:#2a3b57;
  --frost:#e4ecf4;
  --mist:#8ea3bc;
  --amber:#ffb01f;
  --grid:#7cb7ff;
  --sage:#7fd1b9;
  --gut:clamp(20px,4.2vw,72px);
  --f:"Archivo", "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}

body{margin:0;background:var(--night);color:var(--frost);font-family:var(--f);font-size:clamp(16px,1.05vw,19px);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(124,183,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(124,183,255,.045) 1px,transparent 1px);background-size:48px 48px}
main,header,footer{position:relative;z-index:1}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
h1,h2,h3{font-stretch:125%;font-weight:760;letter-spacing:-.02em;margin:0}

.bar{position:fixed;inset:0 0 auto;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:16px var(--gut);background:rgba(14,23,38,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-stretch:125%;font-weight:800;font-size:22px;letter-spacing:-.02em}
.logo svg{width:34px;height:34px;color:var(--frost)}
.bar nav{display:flex;gap:30px;align-items:center;font-size:15px;font-stretch:90%}
.bar nav a{text-decoration:none;color:var(--mist)}
.bar nav a:hover{color:var(--frost)}
.bar-cta{color:var(--night)!important;background:var(--amber);padding:9px 16px;border-radius:3px;font-weight:650}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 24px;border-radius:3px;font:inherit;font-weight:650;font-stretch:100%;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .2s,border-color .2s}
.btn-amber{background:var(--amber);color:var(--night)}
.btn-amber:hover{background:#ffc350}
.btn-ghost{border-color:var(--rule);color:var(--frost)}
.btn-ghost:hover{border-color:var(--mist)}

/* hero */
.hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3vw;align-items:center;padding:120px var(--gut) 60px}
.hero h1{font-size:clamp(52px,5.6vw,108px);line-height:.95;max-width:9.5em;margin-bottom:28px}
.lede{color:var(--mist);max-width:32em;font-size:clamp(17px,1.2vw,21px);margin:0 0 36px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.creds{display:flex;gap:0;margin:56px 0 0;border-top:1px solid var(--rule)}
.creds div{padding:16px 28px 0 0;margin-right:28px;border-right:1px solid var(--rule)}
.creds div:last-child{border:0}
.creds dt{font-stretch:125%;font-weight:800;font-size:20px}
.creds dd{margin:0;color:var(--mist);font-size:14px;font-stretch:85%}
.schematic{margin:0;position:relative}
.schematic svg{width:100%;height:auto;overflow:visible}
.schematic figcaption{display:flex;align-items:center;gap:10px;color:var(--mist);font-size:14px;font-stretch:85%;margin-top:14px;padding-left:4px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--amber);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.25}}

/* phone */
.phone{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:5vw;padding:120px var(--gut);border-top:1px solid var(--rule);background:linear-gradient(var(--panel),var(--night))}
.phone h2{font-size:clamp(38px,3.6vw,64px);line-height:1;margin-bottom:22px}
.phone-left p{color:var(--mist);max-width:30em}
#scope{width:100%;height:120px;margin-top:30px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.phone-meta{display:flex;justify-content:space-between;color:var(--mist);font-size:14px;font-stretch:85%;margin-top:10px}
.subs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;min-height:470px}
.subs li{display:grid;grid-template-columns:110px 1fr;gap:20px;font-size:clamp(20px,1.6vw,28px);line-height:1.3;animation:sub .5s ease both}
.subs li .who{font-size:14px;font-stretch:85%;color:var(--mist);padding-top:8px;border-top:1px solid var(--rule)}
.subs li.agent .txt{color:var(--frost)}
.subs li.caller .txt{color:var(--mist)}
.subs li.booked{grid-template-columns:1fr;font-size:18px}
.subs li.booked .txt{display:flex;align-items:center;gap:14px;background:var(--amber);color:var(--night);padding:16px 20px;border-radius:3px;font-weight:650}
.subs li.booked svg{width:22px;height:22px;flex:none}
@keyframes sub{from{opacity:0;transform:translateY(10px)}}

/* day */
.day{border-top:1px solid var(--rule)}
.day-pin{height:100vh;padding:100px var(--gut) 40px;display:grid;grid-template-rows:auto 1fr auto auto;gap:18px}
.day-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.day-head h2{font-size:clamp(34px,3.4vw,60px);line-height:1;max-width:12em}
.day-clock{text-align:right}
.day-clock span{display:block;font-stretch:125%;font-weight:300;font-size:clamp(60px,7vw,128px);line-height:.9;letter-spacing:-.04em;color:var(--amber)}
.day-clock small{display:block;color:var(--mist);font-size:16px;margin-top:8px;min-height:1.5em}
.day-chart{position:relative;min-height:0;border-left:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.day-chart svg{position:absolute;inset:0;width:100%;height:100%}
.day-axis{position:absolute;left:0;right:0;bottom:-26px;display:flex;justify-content:space-between;color:var(--mist);font-size:13px;font-stretch:85%}
.day-legend{display:flex;gap:8px 28px;flex-wrap:wrap;margin-top:22px;font-size:14px;color:var(--mist);font-stretch:85%}
.lg::before{content:"";display:inline-block;width:18px;height:3px;margin-right:8px;vertical-align:middle}
.lg-sun::before{background:var(--amber);height:10px}
.lg-hp::before{background:var(--grid)}
.lg-ev::before{background:var(--sage);height:10px}
.lg-bat::before{background:var(--frost);height:2px;border-top:1px dashed var(--frost)}
.day-totals{display:grid;grid-template-columns:repeat(4,1fr);margin:0;border-top:1px solid var(--rule)}
.day-totals div{padding:14px 18px 0 0}
.day-totals dt{font-size:13px;color:var(--mist);font-stretch:85%}
.day-totals dd{margin:0;font-stretch:125%;font-weight:700;font-size:clamp(22px,2vw,34px)}
.day-totals div:last-child dd{color:var(--mist);text-decoration:line-through;text-decoration-thickness:2px}

/* installs */
.installs{padding:140px var(--gut) 120px;border-top:1px solid var(--rule)}
.sec-title{font-size:clamp(38px,3.8vw,68px);line-height:1;margin-bottom:40px;max-width:14em}
.sheet{border-top:2px solid var(--frost)}
.sheet-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) minmax(0,.55fr) minmax(0,.6fr);gap:30px;align-items:center;padding:26px 0;border-bottom:1px solid var(--rule)}
.sheet-headrow{padding:12px 0;font-size:13px;color:var(--mist);font-stretch:85%}
.sheet-name{display:flex;align-items:center;gap:18px}
.sheet-name svg{width:48px;height:48px;flex:none;fill:none;stroke:var(--amber);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.sheet-name h3{font-size:clamp(22px,1.9vw,32px);line-height:1.05}
.sheet-row p{margin:0;color:var(--mist)}
.sheet-row .price{color:var(--frost);font-stretch:125%;font-weight:700;font-size:22px}
.sheet-row:not(.sheet-headrow):hover{background:linear-gradient(90deg,var(--panel),transparent)}

/* log */
.log{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:5vw;padding:120px var(--gut);background:var(--panel);border-top:1px solid var(--rule)}
.big{font-stretch:125%;font-weight:300;font-size:clamp(100px,10vw,180px);line-height:.85;letter-spacing:-.05em;margin:0;color:var(--amber)}
.big small{font-size:.3em;color:var(--mist);letter-spacing:0}
.muted{color:var(--mist)}
.log-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
.log-list article{padding:26px 30px 26px 0;border-top:1px solid var(--rule)}
.log-list article:nth-child(odd){border-right:1px solid var(--rule)}
.log-list article:nth-child(even){padding-left:30px}
.log-list p{margin:0 0 18px;font-size:clamp(17px,1.25vw,21px)}
.log-list footer{display:flex;flex-direction:column;font-size:14px;font-stretch:85%}
.log-list footer span{color:var(--mist)}

/* area */
.area{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5vw;align-items:center;padding:130px var(--gut);border-top:1px solid var(--rule)}
.area-text>p{color:var(--mist);max-width:30em}
.area-key{list-style:none;padding:0;margin:30px 0;display:grid;gap:10px;font-size:15px}
.area-key i{display:inline-block;width:14px;height:14px;margin-right:10px;vertical-align:-2px;clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}
.k1{background:var(--amber)}.k2{background:var(--rule)}
.area-picked{min-height:3em;font-size:16px;color:var(--frost)!important;border-left:2px solid var(--amber);padding-left:14px}
#hexmap{width:100%;max-width:760px;height:auto;justify-self:center}
#hexmap .hex{cursor:pointer;transition:transform .25s}
#hexmap .hex:hover polygon,#hexmap .hex.on polygon{stroke:var(--frost);stroke-width:2}

/* survey */
.survey{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:5vw;padding:130px var(--gut) 150px;border-top:1px solid var(--rule)}
.survey-text p{color:var(--frost);max-width:28em}
.survey-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--rule);border-radius:4px;background:var(--panel);overflow:hidden}
.cal{padding:28px;border-right:1px solid var(--rule)}
.cal-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.cal-top strong{font-stretch:125%;font-weight:700;font-size:20px}
.cal-nav{width:38px;height:38px;border:1px solid var(--rule);background:none;border-radius:3px;cursor:pointer;display:grid;place-items:center}
.cal-nav svg{width:16px;height:16px;fill:none;stroke:var(--frost);stroke-width:2}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-dow span{font-size:12px;color:var(--mist);padding-bottom:6px}
.cal-grid button{height:44px;border:1px solid transparent;border-radius:3px;background:var(--panel-2);color:var(--frost);font:inherit;font-size:15px;cursor:pointer;position:relative}
.cal-grid button:disabled{background:transparent;color:#4d5f79;cursor:default}
.cal-grid button:not(:disabled):hover{border-color:var(--mist)}
.cal-grid button[aria-pressed="true"]{background:var(--amber);color:var(--night);font-weight:700}
.cal-grid button.today{border-color:var(--rule)}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:6px;margin-top:18px}
.slots button{padding:10px 0;border:1px solid var(--rule);border-radius:3px;background:none;color:var(--frost);font:inherit;font-size:15px;cursor:pointer}
.slots button[aria-checked="true"]{border-color:var(--amber);color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.form{padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
.chips{grid-column:1/-1;border:0;padding:0;margin:0 0 6px;display:flex;flex-wrap:wrap;gap:8px}
.chips legend{font-size:13px;color:var(--mist);margin-bottom:10px;font-stretch:85%}
.chips label{display:flex;align-items:center;gap:8px;border:1px solid var(--rule);padding:8px 12px;border-radius:30px;font-size:14px;cursor:pointer}
.chips input{accent-color:var(--amber)}
.chips label:has(input:checked){border-color:var(--amber);background:rgba(255,176,31,.08)}
.f{display:flex;flex-direction:column;gap:6px}
.f span{font-size:13px;color:var(--mist);font-stretch:85%}
.f input,.f select{font:inherit;font-size:15px;padding:12px;border:1px solid var(--rule);border-radius:3px;background:var(--night);color:var(--frost)}
.form-foot{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.form-foot p{margin:0;font-size:14px;color:var(--mist)}
.form-foot p b{color:var(--frost);font-weight:650}
.form-done{grid-column:1/-1;margin:0;padding:12px 14px;border-left:2px solid var(--amber);background:var(--night)}

/* footer */
.foot{padding:20px var(--gut) 40px}
.foot-line svg{width:100%;height:60px}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr 1fr;gap:30px;font-size:15px;color:var(--mist);margin-top:20px}
.foot-name{color:var(--frost);font-stretch:125%;font-size:20px}

@media (max-width:1000px){
  .bar nav a:not(.bar-cta){display:none}
  .hero,.phone,.log,.area,.survey,.survey-box{grid-template-columns:1fr}
  .hero{padding-top:110px}
  .subs{min-height:380px}
  .subs li{grid-template-columns:1fr;gap:4px}
  .subs li .who{border:0;padding:0}
  .day-pin{height:auto;min-height:100vh;grid-template-rows:auto 300px auto auto;padding-top:90px}
  .day-head{flex-direction:column;align-items:flex-start}
  .day-clock{text-align:left}
  .day-totals{grid-template-columns:1fr 1fr}
  .sheet-headrow{display:none}
  .sheet-row{grid-template-columns:1fr;gap:8px}
  .log-list{grid-template-columns:1fr}
  .log-list article,.log-list article:nth-child(even){padding:22px 0;border-right:0}
  .cal{border-right:0;border-bottom:1px solid var(--rule)}
  .form{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .creds{flex-wrap:nowrap;margin-top:36px}
  .creds div{padding:12px 12px 0 0;margin-right:12px}
  .creds dt{font-size:16px}
  .creds dd{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}