.home-hero{
  min-height:calc(100svh - var(--header-height));
  padding-top:34px;
  padding-bottom:42px;
}
.hero-actions{
  margin-bottom:22px;
}
.hero-actions .button-primary svg{
  transition:transform var(--motion-fast);
}
.hero-actions .button-primary:hover svg{
  transform:translateX(3px);
}
.home-hero .hero-title{
  max-width:680px;
}
.home-hero .hero-description{
  margin-bottom:18px;
}
.home-hero .trust-row{
  margin-top:0;
}
.hero-quick-specs{
  display:grid;
  gap:10px;
  margin-top:22px;
}
.quick-spec-row{
  display:flex;
  min-width:0;
  align-items:flex-start;
  gap:13px;
}
.quick-spec-label{
  width:68px;
  flex:none;
  padding-top:7px;
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:11px;
  text-align:right;
}
.quick-spec-list{
  display:flex;
  min-width:0;
  flex-wrap:wrap;
  gap:7px;
  list-style:none;
}
.quick-spec-list li{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:var(--radius-pill);
  background:var(--color-canvas);
  box-shadow:0 0 0 1px var(--color-line);
  color:var(--color-muted);
  font-size:11px;
  line-height:1.2;
}
.spec-icon{
  width:14px;
  height:14px;
  flex:none;
  color:var(--color-primary-deep);
}
.android-line{
  overflow:visible;
}
.linux-belly{
  fill:var(--color-canvas);
}
.linux-eye{
  fill:var(--color-canvas);
}
.linux-beak{
  fill:var(--color-warning);
}
.flag-white{
  fill:var(--color-canvas);
}
.flag-red{
  fill:var(--color-flag-red);
}
.flag-blue{
  fill:var(--color-flag-blue);
}
.flag-japan{
  fill:var(--color-flag-japan);
}
.flag-korea{
  fill:var(--color-flag-korea);
}
.flag-stroke{
  stroke:var(--color-text);
}
.home-editor{
  z-index:2;
  min-height:286px;
}
.home-editor .code-lines{
  padding-top:34px;
  padding-bottom:48px;
}
.visual-route-map{
  position:relative;
  z-index:1;
  width:78%;
  height:116px;
  margin:-14px auto 0;
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  background:var(--color-panel);
  box-shadow:var(--shadow-card);
}
.route-node{
  position:absolute;
  z-index:2;
  width:15px;
  height:15px;
  border:4px solid var(--color-canvas);
  border-radius:50%;
  background:var(--color-primary);
  box-shadow:var(--shadow-pill);
}
.route-node-origin{
  top:58px;
  left:12%;
}
.route-node-mid{
  top:26px;
  left:48%;
  background:var(--color-warning);
}
.route-node-end{
  top:64px;
  right:11%;
  background:var(--color-success);
}
.route-line{
  position:absolute;
  height:2px;
  transform-origin:left center;
  border-radius:var(--radius-pill);
  background:var(--color-primary-soft);
}
.route-line-a{
  top:63px;
  left:15%;
  width:36%;
  transform:rotate(-13deg);
}
.route-line-b{
  top:35px;
  left:51%;
  width:36%;
  transform:rotate(14deg);
}
.feature-section{
  background:var(--color-panel);
}
.home-feature-browser{
  align-items:start;
}
.feature-panel-stack{
  min-width:0;
}
.feature-panel h3{
  margin-top:17px;
}
.feature-panel p{
  max-width:850px;
  font-size:16px;
  line-height:1.9;
}
.feature-panel code{
  display:inline-flex;
  margin-top:8px;
}
.selection-notes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:24px;
}
.selection-notes article{
  min-width:0;
  padding:25px;
  border-radius:var(--radius-lg);
  background:var(--color-canvas);
  box-shadow:var(--shadow-card);
}
.selection-index{
  color:var(--color-primary);
  font-family:var(--font-mono);
  font-size:12px;
}
.selection-notes h3{
  margin-top:10px;
  font-size:20px;
}
.selection-notes p{
  margin-top:10px;
  margin-bottom:0;
  color:var(--color-muted);
  font-size:14px;
}
.section-heading-row{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:34px;
}
.section-heading-row .preview-heading{
  margin-bottom:0;
}
.section-more{
  flex:none;
  padding-bottom:5px;
  font-weight:700;
}
.route-preview-section .table-scroll{
  margin-top:8px;
}
.route-guidance{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:25px;
}
.route-guidance .callout p{
  margin-top:7px;
  margin-bottom:0;
  color:var(--color-muted);
}
.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:20px;
}
.srv-row{
  display:grid;
  min-width:0;
  grid-template-columns:auto auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  border-radius:var(--radius-lg);
  background:var(--color-canvas);
  box-shadow:var(--shadow-card);
  font-family:var(--font-mono);
  font-size:12px;
}
.srv-dot{
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:var(--color-success);
  box-shadow:0 0 0 5px var(--color-success-soft);
  animation:srv-pulse 2.4s ease-in-out infinite;
}
.srv-flag{
  width:24px;
  height:16px;
  overflow:hidden;
  border-radius:var(--radius-sm);
  box-shadow:0 0 0 1px var(--color-ring);
}
.srv-flag svg{
  width:100%;
  height:100%;
}
.srv-name{
  min-width:0;
  overflow:hidden;
  color:var(--color-text);
  text-overflow:ellipsis;
  white-space:nowrap;
}
.srv-type{
  padding:4px 8px;
  border-radius:var(--radius-pill);
  background:var(--color-primary-soft);
  color:var(--color-primary-deep);
  white-space:nowrap;
}
.srv-ms{
  color:var(--color-success);
  white-space:nowrap;
}
.srv-bw{
  color:var(--color-muted);
  white-space:nowrap;
}
.client-section{
  background:var(--color-panel);
}
.client-section .platform-card p{
  min-height:86px;
}
.client-note{
  margin-top:24px;
}
.client-note p{
  margin-top:7px;
  margin-bottom:0;
  color:var(--color-muted);
}
.plan-summary{
  min-height:100px;
  color:var(--color-muted);
  font-size:14px;
}
.traffic-pack-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  margin-top:24px;
  padding:clamp(24px,4vw,40px);
  border-radius:var(--radius-xl);
  background:var(--color-panel);
  box-shadow:var(--shadow-card);
}
.traffic-pack-panel h3{
  margin-top:13px;
}
.traffic-pack-panel p{
  max-width:900px;
  margin-top:10px;
  margin-bottom:0;
  color:var(--color-muted);
}
.blog-preview-section{
  background:var(--color-panel);
}
.home-article-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.home-promo .button{
  min-width:140px;
}
@keyframes srv-pulse{
  0%,100%{opacity:.72;transform:scale(.92)}
  50%{opacity:1;transform:scale(1)}
}
@media (max-width:1180px){
  .home-article-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:1000px){
  .home-hero{
    padding-top:58px;
  }
  .home-hero .hero-layout{
    gap:76px;
  }
  .selection-notes{
    grid-template-columns:1fr;
  }
  .route-guidance{
    grid-template-columns:1fr;
  }
  .traffic-pack-panel{
    grid-template-columns:1fr;
  }
}
@media (max-width:768px){
  .home-hero{
    padding-top:44px;
    padding-bottom:64px;
  }
  .quick-spec-row{
    display:block;
  }
  .quick-spec-label{
    display:block;
    width:auto;
    margin-bottom:8px;
    padding-top:0;
    text-align:left;
  }
  .home-editor{
    min-height:0;
  }
  .visual-route-map{
    width:88%;
  }
  .section-heading-row{
    align-items:flex-start;
    flex-direction:column;
  }
  .section-more{
    padding-bottom:0;
  }
  .server-status{
    grid-template-columns:1fr;
  }
}
@media (max-width:640px){
  .home-hero .hero-layout{
    gap:64px;
  }
  .hero-quick-specs{
    margin-top:20px;
  }
  .quick-spec-list li{
    padding-inline:8px;
  }
  .region-spec-list li{
    flex:1 1 86px;
  }
  .platform-spec-list li{
    flex:1 1 98px;
  }
  .visual-route-map{
    height:96px;
  }
  .route-node-origin{
    top:51px;
  }
  .route-node-mid{
    top:22px;
  }
  .route-node-end{
    top:54px;
  }
  .route-line-a{
    top:56px;
  }
  .route-line-b{
    top:31px;
  }
  .home-article-grid{
    grid-template-columns:1fr;
  }
  .srv-row{
    grid-template-columns:auto auto minmax(0,1fr) auto;
  }
  .srv-bw{
    grid-column:3 / 5;
    justify-self:end;
  }
  .traffic-pack-panel{
    padding:22px;
  }
  .traffic-pack-panel .button{
    width:100%;
  }
  .plan-summary{
    min-height:0;
  }
}
@media (max-width:380px){
  .quick-spec-list li{
    flex-basis:100%;
  }
  .editor-run{
    padding-inline:10px;
  }
  .editor-tab{
    margin-left:5px;
  }
}
@media (prefers-reduced-motion:reduce){
  .srv-dot{
    animation:none;
  }
}