.home-hero{
  min-height:calc(100svh - var(--header-height));
  padding-top:clamp(26px,4vw,50px);
  padding-bottom:26px;
  display:flex;
  align-items:center;
}
.home-hero::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:min(92vw,980px);
  height:210px;
  pointer-events:none;
  transform:translateX(-50%) perspective(440px) rotateX(62deg);
  transform-origin:center bottom;
  background-image:
    linear-gradient(var(--color-brand-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-brand-soft) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,transparent,var(--color-ink));
  -webkit-mask-image:linear-gradient(to bottom,transparent,var(--color-ink));
  opacity:.42;
}
.home-hero .hero-inner{
  max-width:1040px;
}
.home-hero .hero-title{
  margin-top:15px;
  margin-bottom:4px;
}
.home-hero .hero-actions{
  margin-top:18px;
  margin-bottom:13px;
}
.home-hero .hero-copy{
  max-width:780px;
  margin-bottom:11px;
  font-size:clamp(16px,1.7vw,19px);
}
.home-hero .hero-copy strong{
  color:var(--color-ink);
}
.home-hero-device{
  position:relative;
  z-index:2;
  max-width:980px;
  margin:15px auto 0;
  padding:14px 18px 16px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-page);
  box-shadow:var(--shadow-window);
}
.home-platform-row{
  justify-content:center;
  gap:12px 24px;
  padding-bottom:12px;
  border-bottom:1px solid var(--color-line);
}
.home-platform-row span{
  color:var(--color-ink);
  font-weight:700;
}
.home-platform-row svg{
  color:var(--color-muted);
}
.home-flag-row{
  justify-content:center;
  gap:10px 21px;
  padding-top:12px;
}
.home-flag-row svg{
  flex-shrink:0;
}
.flag-white{fill:var(--color-white)}
.flag-red{fill:var(--color-danger)}
.flag-blue{fill:var(--color-route)}

.hero-mini-panels{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:13px;
}
.hero-mini-panel{
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-sm);
  background:var(--color-panel);
  text-align:left;
}
.mini-label{
  display:block;
  margin-bottom:2px;
  color:var(--color-muted);
  font-family:var(--font-mono);
  font-size:.68rem;
}
.hero-mini-panel strong{
  display:block;
  overflow:hidden;
  color:var(--color-ink);
  font-size:.77rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mini-line{
  display:block;
  width:100%;
  height:3px;
  margin-top:8px;
  border-radius:var(--radius-pill);
  background:var(--color-line);
}
.mini-line::after{
  content:"";
  display:block;
  width:64%;
  height:100%;
  border-radius:inherit;
}
.mini-line-brand::after{background:var(--color-brand)}
.mini-line-route::after{width:78%;background:var(--color-route)}
.mini-line-success::after{width:52%;background:var(--color-success)}

.home-fact-band{
  position:relative;
  z-index:3;
  border-top:1px solid var(--color-line);
  border-bottom:1px solid var(--color-line);
  background:var(--color-panel);
}
.home-fact-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.home-fact-grid div{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:9px;
  min-width:0;
  padding:17px 12px;
  border-right:1px solid var(--color-line);
}
.home-fact-grid div:last-child{
  border-right:0;
}
.home-fact-grid strong{
  color:var(--color-ink);
  font-size:1rem;
  white-space:nowrap;
}
.home-fact-grid span{
  color:var(--color-muted);
  font-size:.75rem;
  white-space:nowrap;
}

.home-features{
  overflow-x:clip;
}
.feature-compare{
  display:grid;
  grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:20px;
  margin-bottom:36px;
}
.compare-card{
  min-width:0;
  padding:clamp(22px,3vw,34px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
}
.compare-card h3{
  margin:18px 0 20px;
}
.compare-problem{
  background:linear-gradient(145deg,var(--color-danger-soft),var(--color-page));
}
.compare-problem ul{
  display:grid;
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
}
.compare-problem li{
  position:relative;
  padding-left:31px;
  color:var(--color-muted);
}
.compare-problem li::before{
  content:"×";
  position:absolute;
  left:0;
  top:1px;
  display:grid;
  place-items:center;
  width:21px;
  height:21px;
  border:1px solid var(--color-danger);
  border-radius:50%;
  color:var(--color-danger);
  font-weight:800;
  line-height:1;
}
.compare-solution{
  background:linear-gradient(145deg,var(--color-success-soft),var(--color-page));
  box-shadow:var(--shadow-card);
}
.compare-point{
  position:relative;
  padding-left:31px;
}
.compare-point + .compare-point{
  margin-top:22px;
  padding-top:22px;
  border-top:1px solid var(--color-line);
}
.compare-point::before{
  content:"✓";
  position:absolute;
  left:0;
  top:1px;
  color:var(--color-success);
  font-weight:800;
}
.compare-point + .compare-point::before{
  top:23px;
}
.compare-point strong{
  display:block;
  margin-bottom:5px;
}
.compare-point p{
  margin:0;
  color:var(--color-muted);
}

.feature-strips{
  display:grid;
  gap:22px;
}
.feature-strip{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(270px,.75fr);
  align-items:center;
  gap:clamp(28px,6vw,76px);
  min-height:330px;
  padding:clamp(26px,5vw,54px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-page);
  box-shadow:var(--shadow-card);
}
.feature-strip-reverse .feature-copy{
  order:2;
}
.feature-strip-reverse .feature-diagram{
  order:1;
}
.feature-copy h3{
  margin:18px 0 13px;
}
.feature-copy p{
  margin:0;
  color:var(--color-muted);
}
.feature-diagram{
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  min-height:220px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:
    linear-gradient(var(--color-route-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--color-route-soft) 1px,transparent 1px),
    var(--color-panel);
  background-size:28px 28px;
  overflow:clip;
}
.diagram-core{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--color-brand),var(--color-brand-deep));
  color:var(--color-white);
  font-family:var(--font-display);
  font-size:.78rem;
  font-weight:800;
  box-shadow:var(--shadow-button);
}
.device-node{
  position:absolute;
  display:grid;
  place-items:center;
  min-width:58px;
  min-height:34px;
  padding:5px 9px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-pill);
  background:var(--color-page);
  color:var(--color-muted);
  font-size:.68rem;
  font-weight:700;
}
.device-node::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:72px;
  height:1px;
  background:var(--color-route);
}
.device-node-a{top:24px;left:20px}
.device-node-a::after{left:48px;top:38px;transform:rotate(31deg)}
.device-node-b{top:24px;right:20px}
.device-node-b::after{right:48px;top:38px;transform:rotate(-31deg)}
.device-node-c{bottom:24px;left:20px}
.device-node-c::after{left:48px;bottom:38px;transform:rotate(-31deg)}
.device-node-d{right:20px;bottom:24px}
.device-node-d::after{right:48px;bottom:38px;transform:rotate(31deg)}

.tunnel-diagram{
  grid-template-columns:auto 1fr auto;
  align-content:center;
  gap:10px;
  padding:28px;
}
.tunnel-end{
  display:grid;
  place-items:center;
  min-width:52px;
  min-height:52px;
  border:1px solid var(--color-line);
  border-radius:50%;
  background:var(--color-page);
  font-size:.72rem;
  font-weight:800;
}
.tunnel-track{
  position:relative;
  height:28px;
  border:1px solid var(--color-route);
  border-radius:var(--radius-pill);
  background:var(--color-route-soft);
}
.tunnel-track::before,
.tunnel-track::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  height:1px;
  background:var(--color-route);
}
.tunnel-track::before{top:8px}
.tunnel-track::after{bottom:8px}
.tunnel-track span{
  position:absolute;
  z-index:2;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--color-brand);
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 6px var(--color-brand-soft);
}

.media-screen{
  position:relative;
  width:150px;
  height:98px;
  border:7px solid var(--color-ink);
  border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--color-brand-soft),var(--color-route-soft));
}
.media-screen::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-24px;
  width:72px;
  height:7px;
  border-radius:var(--radius-pill);
  background:var(--color-ink);
  transform:translateX(-50%);
}
.media-play{
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  border-left:20px solid var(--color-brand);
  transform:translate(-40%,-50%);
}
.media-route{
  position:absolute;
  width:52px;
  height:52px;
  border:1px solid var(--color-route);
  border-radius:50%;
}
.media-route-a{left:15px;top:17px}
.media-route-b{right:15px;bottom:17px}

.refund-diagram{
  align-content:center;
}
.refund-ring{
  display:grid;
  place-items:center;
  width:118px;
  height:118px;
  border:12px solid var(--color-brand-soft);
  border-top-color:var(--color-brand);
  border-right-color:var(--color-brand);
  border-radius:50%;
  color:var(--color-ink);
  font-family:var(--font-mono);
  font-size:2.1rem;
  font-weight:800;
  transform:rotate(-18deg);
}
.refund-ring::first-letter{
  color:var(--color-brand-deep);
}
.refund-note{
  position:absolute;
  top:50%;
  left:50%;
  margin:28px 0 0 13px;
  color:var(--color-muted);
  font-size:.72rem;
}
.refund-check{
  position:absolute;
  right:22%;
  bottom:19%;
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border-radius:50%;
  background:var(--color-success);
  color:var(--color-white);
  font-weight:800;
  box-shadow:var(--shadow-float);
}
.home-principle{
  margin-top:34px;
  padding:clamp(24px,4vw,40px);
  border-left:4px solid var(--color-brand);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  background:var(--color-panel);
}
.home-principle h3{
  margin:16px 0 10px;
}
.home-principle p{
  max-width:920px;
  margin:0;
  color:var(--color-muted);
}

.home-routes,
.home-pricing,
.home-blog{
  background:var(--color-panel);
}
.home-split-heading{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(320px,.7fr);
  align-items:end;
  gap:48px;
  margin-bottom:34px;
}
.home-split-heading h2{
  margin:18px 0 0;
}
.home-split-heading > p{
  margin:0;
  color:var(--color-muted);
}
.route-guidance{
  display:grid;
  grid-template-columns:minmax(180px,.42fr) minmax(0,1fr);
  gap:18px 36px;
  align-items:start;
  margin-top:26px;
}
.route-guidance h3{
  margin:0;
}
.route-guidance p{
  margin:0;
  color:var(--color-muted);
}
.route-guidance .article-more{
  grid-column:2;
}

.home-client-note{
  max-width:900px;
  margin:28px auto 0;
}
.home-pricing .pricing-grid{
  margin-bottom:22px;
}
.traffic-pack-panel{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:34px;
  padding:clamp(24px,4vw,38px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-page);
}
.traffic-pack-panel h3{
  margin:16px 0 9px;
}
.traffic-pack-panel p{
  max-width:820px;
  margin:0;
  color:var(--color-muted);
}
.section-link-row{
  display:flex;
  justify-content:center;
  margin-top:30px;
}
.home-faq .faq-list{
  max-width:900px;
}
.home-article-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.home-article-grid .article-card h3{
  font-size:1.08rem;
}
.home-article-grid .article-card p{
  font-size:.9rem;
}

@media (max-width:1080px){
  .home-article-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media (max-width:900px){
  .feature-compare,
  .feature-strip{
    grid-template-columns:1fr;
  }
  .feature-strip-reverse .feature-copy,
  .feature-strip-reverse .feature-diagram{
    order:initial;
  }
  .feature-diagram{
    min-height:250px;
  }
  .home-split-heading{
    grid-template-columns:1fr;
    align-items:start;
    gap:18px;
  }
}
@media (max-width:768px){
  .home-hero{
    min-height:auto;
    padding-top:25px;
    padding-bottom:18px;
  }
  .home-hero::after{
    height:150px;
    opacity:.28;
  }
  .home-hero .hero-title{
    margin-top:12px;
  }
  .home-hero .hero-actions{
    margin-top:15px;
  }
  .home-hero .hero-copy{
    line-height:1.62;
  }
  .home-hero-device{
    padding:12px;
  }
  .home-platform-row{
    gap:9px 14px;
  }
  .home-platform-row span,
  .home-flag-row span{
    font-size:.68rem;
  }
  .hero-mini-panels{
    grid-template-columns:1fr;
  }
  .hero-mini-panel{
    padding:8px 10px;
  }
  .home-fact-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .home-fact-grid div:nth-child(2){
    border-right:0;
  }
  .home-fact-grid div:nth-child(-n+2){
    border-bottom:1px solid var(--color-line);
  }
  .route-guidance{
    grid-template-columns:1fr;
  }
  .route-guidance .article-more{
    grid-column:auto;
  }
  .traffic-pack-panel{
    grid-template-columns:1fr;
  }
}
@media (max-width:640px){
  .home-platform-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .home-platform-row span{
    justify-content:center;
  }
  .home-flag-row{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .home-flag-row span{
    justify-content:center;
  }
  .feature-strip{
    min-height:0;
    padding:22px;
  }
  .feature-diagram{
    min-height:220px;
  }
  .device-node-a,
  .device-node-c{left:10px}
  .device-node-b,
  .device-node-d{right:10px}
  .home-article-grid{
    grid-template-columns:1fr;
  }
  .home-fact-grid div{
    flex-direction:column;
    align-items:center;
    gap:0;
  }
}
@media (max-width:390px){
  .home-hero-device{
    padding-inline:9px;
  }
  .home-platform-row,
  .home-flag-row{
    gap:8px 4px;
  }
  .home-platform-row span,
  .home-flag-row span{
    white-space:normal;
  }
  .feature-diagram{
    min-height:205px;
  }
  .tunnel-diagram{
    padding:18px;
  }
  .tunnel-end{
    min-width:44px;
    min-height:44px;
  }
}