.copy{
  position:relative;
  z-index:2;
  min-width:0;
}
.h1{
  margin-top:20px;
  font-family:var(--font-display);
  font-size:66px;
  line-height:1.1;
  font-weight:850;
  letter-spacing:-.02em;
  color:var(--color-ink);
}
.h1 .line{display:block}
.h1 .grad{
  padding-bottom:.06em;
  margin-bottom:-.06em;
  color:transparent;
  background:linear-gradient(90deg,var(--color-accent),var(--color-accent-pair));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.lede{
  max-width:560px;
  margin-top:24px;
  color:var(--color-muted);
  font-size:19px;
  line-height:1.6;
}
.lede strong{
  color:var(--color-ink);
  font-weight:700;
}
.cta{
  display:flex;
  align-items:center;
  gap:28px;
  margin-top:32px;
}
.trust{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  row-gap:8px;
  margin-top:28px;
  color:var(--color-muted);
  font-size:14px;
  font-weight:520;
  list-style:none;
}
.trust li{
  display:inline-flex;
  align-items:center;
}
.trust li+li::before{
  content:"·";
  margin-inline:12px;
  color:var(--color-soft);
}
.trust strong{
  color:var(--color-ink);
  font-weight:650;
}
.meta-row .lbl{
  min-width:48px;
  flex:none;
  color:var(--color-soft);
  font-size:12px;
  font-weight:680;
  letter-spacing:.06em;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
  list-style:none;
}
.chips li{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--color-muted);
  font-size:13px;
  font-weight:650;
}
.chips li svg{
  width:16px;
  height:16px;
  flex:none;
  color:var(--color-muted);
}
.flag{
  display:inline-flex;
  width:22px;
  height:22px;
  flex:none;
  overflow:hidden;
  background:var(--color-panel);
  border:1px solid var(--color-border);
  border-radius:50%;
}
.flag svg{
  width:100%;
  height:100%;
}
.flag-md{
  width:26px;
  height:26px;
}
.f-red{fill:var(--color-flag-red)}
.f-white{fill:var(--color-panel)}
.f-blue{fill:var(--color-flag-blue)}
.f-navy{fill:var(--color-flag-navy)}

.device{
  position:relative;
  display:flex;
  justify-content:center;
  min-height:560px;
}
.stage{
  position:relative;
  width:520px;
  height:560px;
  max-width:100%;
}
.spectrum{
  position:absolute;
  inset:0;
  max-width:100%;
  background:repeating-linear-gradient(90deg,rgba(var(--color-accent-rgb),.42) 0 2px,transparent 2px 8px);
  -webkit-mask-image:linear-gradient(90deg,transparent,var(--color-ink) 46%,var(--color-ink) 54%,transparent),linear-gradient(180deg,transparent,var(--color-ink) 14%,var(--color-ink) 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,var(--color-ink) 46%,var(--color-ink) 54%,transparent),linear-gradient(180deg,transparent,var(--color-ink) 14%,var(--color-ink) 86%,transparent);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
.rc{
  position:absolute;
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 18px 0 16px;
  background:var(--color-panel);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card),var(--inner-highlight);
}
.rc-text{
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:center;
  line-height:1.2;
}
.rc-name{
  color:var(--color-ink);
  font-size:15px;
  font-weight:760;
}
.rc-type{
  margin-top:3px;
  color:var(--color-soft);
  font-family:var(--font-mono);
  font-size:12px;
}
.pill{
  display:inline-flex;
  align-items:center;
  height:24px;
  margin-left:auto;
  padding:0 10px;
  flex:none;
  border-radius:var(--radius-pill);
  font-size:12px;
  font-weight:700;
}
.pill-on{
  color:var(--color-success);
  background:var(--color-success-soft);
}
.pill-ready{
  color:var(--color-muted);
  background:var(--color-slot);
}
.tg{
  position:relative;
  width:42px;
  height:24px;
  flex:none;
  border-radius:var(--radius-pill);
}
.tg-knob{
  position:absolute;
  top:3px;
  width:18px;
  height:18px;
  border-radius:50%;
}
.tg-on{
  background:var(--color-accent);
  box-shadow:inset 0 1px 2px rgba(var(--color-ink-rgb),.18);
}
.tg-on .tg-knob{
  right:3px;
  background:var(--color-panel);
  box-shadow:0 1px 3px rgba(var(--color-ink-rgb),.22);
}
.tg-off{
  background:var(--color-panel);
  border:1px solid var(--color-border);
}
.tg-off .tg-knob{
  top:2px;
  left:2px;
  background:var(--color-slot);
  box-shadow:inset 0 0 0 1px var(--color-border);
}
.rc-1{
  top:74px;
  left:102px;
  width:390px;
  height:64px;
  opacity:.55;
  box-shadow:var(--shadow-soft),var(--inner-highlight);
}
.rc-2{
  top:154px;
  left:62px;
  width:430px;
  height:68px;
  opacity:.85;
}
.rc-3{
  top:238px;
  left:22px;
  z-index:3;
  width:470px;
  height:76px;
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-deep),var(--inner-highlight);
}
.rc-3 .rc-name{font-size:16px}
.rc-3 .tg{
  width:46px;
  height:26px;
}
.rc-3 .tg-knob{
  width:20px;
  height:20px;
}
.rc-3 .pill{
  height:26px;
  font-size:13px;
}
.rc-4{
  top:330px;
  left:62px;
  width:430px;
  height:68px;
  opacity:.85;
}
.rc-5{
  top:414px;
  left:102px;
  width:390px;
  height:64px;
  opacity:.55;
  box-shadow:var(--shadow-soft),var(--inner-highlight);
}
.rc-ghost{
  left:122px;
  width:370px;
  height:56px;
  opacity:.32;
  box-shadow:none;
}
.rc-ghost-t{
  top:4px;
  -webkit-mask-image:linear-gradient(180deg,transparent,var(--color-ink) 95%);
  mask-image:linear-gradient(180deg,transparent,var(--color-ink) 95%);
}
.rc-ghost-b{
  top:494px;
  -webkit-mask-image:linear-gradient(0deg,transparent,var(--color-ink) 95%);
  mask-image:linear-gradient(0deg,transparent,var(--color-ink) 95%);
}
.fl{
  position:absolute;
  z-index:5;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--color-panel);
  border:1px solid var(--color-border);
  box-shadow:var(--shadow-soft),var(--inner-highlight);
}
.fl-shield{
  top:10px;
  right:-22px;
  padding:10px 16px 10px 12px;
  border-radius:var(--radius-md);
}
.fl-shield .ic{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  flex:none;
  color:var(--color-panel);
  background:linear-gradient(135deg,var(--color-accent),var(--color-accent-pair));
  border-radius:var(--radius-xs);
}
.fl-shield .ic svg{
  width:18px;
  height:18px;
}
.fl-shield .t{line-height:1.2}
.fl-shield .t b{
  display:block;
  color:var(--color-ink);
  font-size:13px;
}
.fl-shield .t span{
  display:block;
  margin-top:2px;
  color:var(--color-soft);
  font-size:11px;
}
.fl-devices{
  bottom:14px;
  left:-22px;
  padding:9px 16px 9px 12px;
  color:var(--color-ink);
  border-radius:var(--radius-pill);
  font-size:13px;
  font-weight:680;
}
.fl-devices svg{
  width:18px;
  height:18px;
  color:var(--color-accent);
}
.fl-devices em{
  margin-inline:4px;
  color:var(--color-soft);
  font-style:normal;
  font-weight:520;
}
.matrix{
  position:relative;
  z-index:1;
}
.matrix-lbl{
  margin-bottom:16px;
  color:var(--color-soft);
  font-size:12px;
  font-weight:680;
  letter-spacing:.12em;
}
.flag-chips{gap:18px}

.route-preview{
  background:var(--color-canvas);
}
.route-head{max-width:800px}
.server-status:empty{display:none}
.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
  max-width:100%;
  margin-bottom:32px;
  overflow:hidden;
}
.server-status .srv-row{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  gap:10px;
  align-items:center;
  min-width:0;
  padding:14px 16px;
  background:var(--color-panel);
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
}
.server-status .srv-dot{
  width:8px;
  height:8px;
  flex:none;
  background:var(--color-success);
  border-radius:50%;
  box-shadow:0 0 0 5px var(--color-success-soft);
}
.server-status .srv-flag{
  display:grid;
  width:26px;
  height:26px;
  place-items:center;
  overflow:hidden;
  border:1px solid var(--color-border);
  border-radius:50%;
}
.server-status .srv-name{
  min-width:0;
  overflow:hidden;
  color:var(--color-ink);
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.server-status .srv-type{
  max-width:100%;
  padding:3px 8px;
  overflow:hidden;
  color:var(--color-muted);
  background:var(--color-slot);
  border-radius:var(--radius-pill);
  font-size:11px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.server-status .srv-ms,
.server-status .srv-bw{
  color:var(--color-accent);
  font-family:var(--font-mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.route-notes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:24px;
}
.route-notes article{
  min-width:0;
  padding:22px;
  background:var(--color-panel);
  border:1px solid var(--color-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-soft);
}
.route-notes h3{font-size:19px}
.route-notes p{
  margin-top:10px;
  color:var(--color-muted);
  font-size:14px;
}
.route-more{margin-top:24px}

.feature-section{
  background:linear-gradient(180deg,var(--color-slot),var(--color-canvas));
}
.feature-intro{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:70px;
  align-items:center;
  min-height:520px;
}
.feature-copy .btn-primary{margin-top:28px}
.client-scene{
  position:relative;
  min-height:500px;
  perspective:1400px;
}
.client-layer,
.client-window{
  position:absolute;
  top:72px;
  right:70px;
  width:min(520px,82%);
  min-height:340px;
  background:var(--color-panel);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  transform:rotateX(50deg) rotateZ(-40deg);
  transform-origin:center;
}
.client-layer-back{
  top:102px;
  right:46px;
  box-shadow:var(--shadow-soft);
}
.client-layer-middle{
  top:87px;
  right:58px;
  box-shadow:var(--shadow-card);
}
.client-window{
  z-index:3;
  overflow:hidden;
  box-shadow:var(--shadow-deep),var(--inner-highlight);
}
.client-chrome{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:48px;
  padding:0 18px;
  background:var(--color-slot);
  border-bottom:1px solid var(--color-border);
}
.client-chrome span{
  width:8px;
  height:8px;
  background:var(--color-border);
  border-radius:50%;
}
.client-chrome span:first-child{background:var(--color-accent)}
.client-chrome b{
  margin-left:8px;
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:12px;
}
.client-flow{padding:22px}
.flow-step,
.flow-connect{
  display:flex;
  align-items:center;
  gap:14px;
}
.flow-icon{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  flex:none;
  color:var(--color-panel);
  background:linear-gradient(135deg,var(--color-accent),var(--color-accent-pair));
  border-radius:var(--radius-sm);
}
.flow-icon svg{
  width:21px;
  height:21px;
}
.client-flow b{
  display:block;
  color:var(--color-ink);
  font-size:14px;
}
.client-flow small{
  display:block;
  margin-top:2px;
  color:var(--color-soft);
  font-size:11px;
}
.flow-divider{
  height:1px;
  margin:17px 0;
  background:var(--color-border);
}
.flow-route{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px;
  align-items:start;
}
.flow-route ul{
  display:grid;
  gap:6px;
  list-style:none;
}
.flow-route li{
  padding:7px 10px;
  color:var(--color-muted);
  background:var(--color-slot);
  border-radius:var(--radius-xs);
  font-size:12px;
}
.flow-route li.is-selected{
  color:var(--color-accent);
  background:rgba(var(--color-accent-rgb),.09);
}
.flow-connect{justify-content:space-between}
.flow-connect button{
  min-height:38px;
  padding:7px 20px;
  color:var(--color-panel);
  background:var(--color-accent);
  border:0;
  border-radius:var(--radius-pill);
  font-size:13px;
  font-weight:700;
}
.feature-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px 34px;
  margin-top:44px;
}
.feature-item{
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:18px;
  min-width:0;
  padding:24px 0;
  border-top:1px solid var(--color-border);
}
.feature-icon{
  display:grid;
  width:56px;
  height:56px;
  place-items:center;
  flex:none;
  color:var(--color-panel);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);
}
.feature-icon svg{
  width:27px;
  height:27px;
}
.icon-indigo{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-pair))}
.icon-sky{background:linear-gradient(135deg,var(--color-accent-pair),var(--color-success))}
.icon-violet{background:linear-gradient(135deg,var(--color-accent-deep),var(--color-accent))}
.feature-item h3{font-size:20px}
.feature-item p{
  margin-top:10px;
  color:var(--color-muted);
  font-size:14px;
}
.difference-panel{
  display:grid;
  grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);
  gap:30px;
  align-items:center;
  margin-top:42px;
  padding:28px;
  background:var(--color-panel);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card),var(--inner-highlight);
}
.difference-panel h3{
  margin-top:10px;
  font-size:22px;
}
.difference-panel p{color:var(--color-muted)}

.pricing-preview{background:var(--color-canvas)}
.plan-fit{
  margin-top:18px;
  color:var(--color-muted);
  font-size:14px;
}
.traffic-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  margin-top:42px;
  padding:28px;
  background:var(--color-panel);
  border:1px solid var(--color-border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
}
.traffic-panel h3{
  margin-top:10px;
  font-size:23px;
}
.traffic-panel p{
  max-width:650px;
  margin-top:8px;
  color:var(--color-muted);
}
.traffic-panel ul{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  list-style:none;
}
.traffic-panel li{
  display:flex;
  min-width:126px;
  padding:14px;
  flex-direction:column;
  color:var(--color-ink);
  background:var(--color-slot);
  border-radius:var(--radius-md);
}
.traffic-panel strong{
  font-family:var(--font-display);
  font-size:20px;
}
.traffic-panel span{
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:12px;
}
.pricing-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  margin-top:28px;
}
.pricing-foot p{
  max-width:760px;
  color:var(--color-muted);
}

.blog-preview{background:var(--color-slot)}
.blog-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}
.blog-heading .section-head{margin-bottom:0}
.home-article-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:42px;
}

@media (max-width:1100px){
  .h1{font-size:56px}
  .device{
    transform:scale(.9);
    transform-origin:center;
  }
  .feature-intro{gap:36px}
  .client-window,
  .client-layer{right:50px}
  .home-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .device{
    min-height:520px;
    transform:none;
  }
  .stage{width:520px}
  .feature-intro{grid-template-columns:1fr}
  .client-scene{min-height:480px}
  .route-notes{grid-template-columns:1fr}
}
@media (max-width:768px){
  .fl{display:none}
  .feature-list{grid-template-columns:1fr}
  .difference-panel{grid-template-columns:1fr}
  .traffic-panel{grid-template-columns:1fr}
  .traffic-panel ul{justify-content:flex-start}
  .pricing-foot{
    align-items:flex-start;
    flex-direction:column;
  }
  .blog-heading{
    align-items:flex-start;
    flex-direction:column;
  }
  .server-status{grid-template-columns:1fr}
}
@media (max-width:640px){
  .h1{font-size:40px}
  .lede{font-size:17px}
  .cta{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  .trust li{width:100%}
  .trust li+li::before{display:none}
  .meta-row{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .device{
    min-height:410px;
    justify-content:flex-start;
    overflow:hidden;
    transform:none;
  }
  .stage{
    width:520px;
    max-width:none;
    height:470px;
    transform:scale(.72);
    transform-origin:top left;
  }
  .server-status .srv-row{
    grid-template-columns:auto auto minmax(0,1fr) auto;
  }
  .server-status .srv-bw{display:none}
  .feature-item{
    grid-template-columns:56px minmax(0,1fr);
    gap:14px;
  }
  .client-scene{
    min-height:350px;
    overflow:hidden;
  }
  .client-layer,
  .client-window{
    top:48px;
    right:24px;
    width:88%;
    min-height:300px;
    transform:rotateX(46deg) rotateZ(-35deg) scale(.82);
    transform-origin:center;
  }
  .client-layer-middle{
    top:62px;
    right:15px;
  }
  .client-layer-back{
    top:76px;
    right:7px;
  }
  .flow-route{grid-template-columns:1fr}
  .traffic-panel li{min-width:0}
  .home-article-grid{grid-template-columns:1fr}
}
@media (max-width:380px){
  .stage{transform:scale(.66)}
  .feature-item{
    grid-template-columns:48px minmax(0,1fr);
    gap:12px;
  }
  .feature-icon{
    width:48px;
    height:48px;
  }
  .feature-icon svg{
    width:23px;
    height:23px;
  }
}