.head{
  position:fixed;
  top:14px;
  left:0;
  right:0;
  z-index:80;
  padding:0 24px;
  transition:transform var(--mid) var(--ease);
}

.head-in{
  display:flex;
  align-items:center;
  gap:18px;
  height:var(--head-h);
  padding:0 14px 0 16px;
  border-radius:100px;
  background:rgba(255,255,255,.52);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 8px 30px rgba(15,23,42,.07);
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.brand-mark{
  width:36px;
  height:36px;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 6px 16px rgba(37,99,235,.28);
  transition:transform var(--mid) var(--ease);
}

.brand:hover .brand-mark{transform:rotate(-6deg) scale(1.06)}

.brand-txt{display:flex;flex-direction:column;line-height:1.15}
.brand-txt b{font-size:14px;letter-spacing:.01em}
.brand-txt i{
  font-style:normal;
  font-size:8.5px;
  letter-spacing:.18em;
  color:var(--ink-4);
  font-weight:600;
}

.nav{
  display:flex;
  align-items:center;
  gap:2px;
  margin-left:8px;
}

.nav a{
  padding:8px 12px;
  border-radius:9px;
  font-size:13px;
  font-weight:500;
  color:var(--ink-3);
  transition:color var(--fast),background var(--fast);
}

.nav a:hover{color:var(--ink);background:rgba(255,255,255,.62)}

.head-act{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

.net{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 12px;
  border-radius:100px;
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-3);
  background:rgba(255,255,255,.42);
  border:1px solid var(--line);
  transition:background var(--fast),color var(--fast),border-color var(--fast);
}

.net:hover{background:rgba(255,255,255,.8);color:var(--ink)}

.net::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ink-4);
  box-shadow:0 0 0 3px rgba(138,152,172,.15);
  transition:background var(--fast),box-shadow var(--fast);
}

.net[data-s="ok"]::before{background:var(--brand-3);box-shadow:0 0 0 3px rgba(16,219,162,.2)}
.net[data-s="new"]::before{background:#F59E0B;box-shadow:0 0 0 3px rgba(245,158,11,.2)}
.net[data-s="off"]::before{background:#EF4444;box-shadow:0 0 0 3px rgba(239,68,68,.18)}
.net[data-s="checking"]::before{background:var(--brand-1);animation:pulse 1.1s infinite}

@keyframes pulse{
  0%,100%{box-shadow:0 0 0 2px rgba(37,99,235,.18)}
  50%{box-shadow:0 0 0 6px rgba(37,99,235,.05)}
}

.head-cta{
  height:36px;
  padding:0 15px;
  border-radius:100px;
  font-size:12.5px;
}

main{padding-top:calc(var(--head-h) + 58px)}

.hero{
  position:relative;
  padding:26px 0 46px;
}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:34px;
  align-items:center;
}

.hero-copy{min-width:0}
.hero-copy .eyebrow{margin-bottom:18px}

.hero-copy h1{
  font-size:clamp(38px,4.5vw,60px);
  line-height:1.04;
  letter-spacing:-.038em;
  margin-bottom:18px;
}

.hero-copy h1 em{
  display:block;
  margin-top:14px;
  font-style:normal;
  font-size:clamp(13px,1.25vw,15.5px);
  font-weight:500;
  line-height:1.6;
  letter-spacing:.004em;
  color:var(--ink-3);
  max-width:30em;
}

.lede{
  font-size:14.5px;
  line-height:1.78;
  color:var(--ink-3);
  max-width:32em;
  margin-bottom:22px;
}

.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:24px;
}

.hero-tags span{
  padding:5px 10px;
  border-radius:7px;
  font-size:11px;
  font-weight:600;
  color:var(--ink-2);
  background:rgba(255,255,255,.55);
  border:1px solid var(--line);
}

.hero-cta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:30px;
}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  max-width:430px;
}

.hero-stats > div{
  padding:13px 14px;
  border-radius:14px;
  background:var(--glass-2);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}

.hero-stats dt{
  font-size:21px;
  font-weight:700;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  line-height:1.2;
}

.hero-stats dd{
  margin-top:3px;
  font-size:11px;
  color:var(--ink-4);
  letter-spacing:.04em;
}

.sec{
  position:relative;
  padding:64px 0;
  scroll-margin-top:92px;
}

.sec-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:30px;
}

.sec-head > div:first-child{max-width:640px}

.sec-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brand-1);
}

.sec-kicker::before{
  content:"";
  width:18px;
  height:1.5px;
  background:linear-gradient(90deg,var(--brand-1),transparent);
}

.sec-head h2{
  font-size:clamp(25px,2.9vw,36px);
  letter-spacing:-.03em;
  margin-bottom:11px;
}

.sec-head p{
  font-size:14px;
  line-height:1.75;
  color:var(--ink-3);
  max-width:44em;
}

.sec-side{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:6px;
}

.foot{
  position:relative;
  margin-top:40px;
  padding:44px 0 90px;
  border-top:1px solid rgba(255,255,255,.6);
  background:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.52));
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}

.foot-in{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr);
  gap:36px;
}

.foot-main p{
  margin-top:14px;
  font-size:12.5px;
  line-height:1.75;
  color:var(--ink-4);
  max-width:34em;
}

.foot-links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.foot-links > div{display:flex;flex-direction:column;gap:9px}

.foot-links b{
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-4);
}

.foot-links a{
  font-size:13px;
  color:var(--ink-2);
  transition:color var(--fast),transform var(--fast);
  width:fit-content;
}

.foot-links a:hover{color:var(--brand-1);transform:translateX(2px)}

.copy{
  grid-column:1/-1;
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  padding-top:22px;
  margin-top:6px;
  border-top:1px solid var(--line-2);
  font-size:11.5px;
  color:var(--ink-4);
}

#dock{
  position:fixed;
  left:20px;
  bottom:20px;
  z-index:70;
}

.dock-btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 15px 7px 7px;
  border-radius:100px;
  background:rgba(255,255,255,.6);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 30px rgba(15,23,42,.1);
  transition:transform var(--mid) var(--ease),box-shadow var(--mid);
}

.dock-btn:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(15,23,42,.15)}

.dock-btn img{
  width:32px;
  height:32px;
  border-radius:9px;
  object-fit:cover;
}

.dock-txt{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.dock-txt b{font-size:11.5px}
.dock-txt span{font-size:9.5px;color:var(--ink-4);letter-spacing:.04em}

.dock-dot{
  position:absolute;
  top:6px;
  right:8px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ink-4);
  transition:background var(--fast);
}

.dock-btn[data-s="ok"] .dock-dot{background:var(--brand-3)}
.dock-btn[data-s="bad"] .dock-dot{background:#EF4444}
.dock-btn[data-s="loading"] .dock-dot{background:var(--brand-1);animation:pulse 1.1s infinite}

@media (max-width:1080px){
  .nav{display:none}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .hero-copy{max-width:640px;min-width:0}
  .foot-in{grid-template-columns:1fr;gap:26px}
}

@media (max-width:820px){
  .sec{padding:50px 0}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px}
  .sec-side{padding-bottom:0}
  main{padding-top:calc(var(--head-h) + 40px)}
  .net{display:none}
}

@media (max-width:640px){
  body{font-size:14.5px}
  .shell{padding:0 18px}
  .head{top:10px;padding:0 12px}
  .head-in{height:58px;padding:0 10px 0 12px;gap:10px}
  .brand-txt i{display:none}
  .brand-mark{width:32px;height:32px}
  .head-cta{display:none}
  .hero{padding:16px 0 26px}
  .hero-copy h1{font-size:34px}
  .hero-stats{max-width:none}
  .hero-stats dt{font-size:19px}
  .foot{padding:34px 0 100px}
  .foot-links{grid-template-columns:1fr 1fr}
  #dock{left:14px;bottom:14px}
  .dock-txt{display:none}
  .dock-btn{padding:7px;border-radius:14px}
  .dock-btn img{width:34px;height:34px}
}