.hero-preview{
  min-height:calc(100svh - var(--header-height));
  display:flex;
  align-items:center;
}
.hero-copy{position:relative;z-index:2}
.kicker .dot{flex:0 0 auto}
.line{display:block}
.grad{
  background:linear-gradient(92deg,var(--accent),var(--accent-bright));
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
}
.ctas{align-items:center}
.lede{font-size:17px}
.row-label{flex:0 0 auto}
.plat,
.flagitem{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.fl{
  display:inline-block;
  width:20px;
  height:20px;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(var(--text-rgb),.08);
}
.fl svg{display:block;width:20px;height:20px}
.stage{z-index:1}
.win-shell{position:relative}
.win{position:relative}
.chrome-title{font-size:13px;font-weight:700}
.grid15{position:relative}
.tile{position:relative}
.tname{min-width:0}
.tcheck{
  position:absolute;
  top:-7px;
  right:-7px;
  display:grid;
  width:18px;
  height:18px;
  place-items:center;
  border:2px solid var(--bg-panel);
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-bright));
  color:var(--on-accent);
  font-size:10px;
}
.win-foot{position:relative}
.status{display:inline-flex;align-items:center;gap:8px}
.live{
  position:relative;
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--accent);
  animation:home-pulse 2s ease-in-out infinite;
}
.pill-a{top:3px;right:-18px}
.pill-b{bottom:5px;left:-14px}

.rise{
  opacity:0;
  transform:translateY(16px);
  animation:home-rise .6s var(--ease-out) forwards;
}
.d0{animation-delay:0s}
.d1{animation-delay:.08s}
.d2{animation-delay:.18s}
.d3{animation-delay:.3s}
.d4{animation-delay:.38s}
.d5{animation-delay:.46s}
.d6{animation-delay:.52s}
.d7{animation-delay:.58s}
.stage-in{
  opacity:0;
  transform:translateY(22px);
  animation:home-rise .8s var(--ease-out) .2s forwards;
}
.route-tile.is-on::before{
  content:"";
  position:absolute;
  inset:-1px;
  border:2px solid var(--accent);
  border-radius:var(--radius);
  pointer-events:none;
  animation:home-breathe 3s ease-in-out infinite;
}
@keyframes home-rise{
  to{opacity:1;transform:translateY(0)}
}
@keyframes home-breathe{
  0%,100%{opacity:.7}
  50%{opacity:1}
}
@keyframes home-pulse{
  0%,100%{transform:scale(.9);opacity:.8}
  50%{transform:scale(1.14);opacity:1}
}

.feature-rows{display:grid;gap:16px}
.feature-mosaic-reverse .feature-stack{grid-column:1}
.feature-mosaic-reverse .feature-large{grid-column:2 / span 2}
.mini-route-panel{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
  padding:22px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-panel-2);
  box-shadow:inset 0 0 0 1px var(--highlight);
}
.route-connector{
  width:34px;
  height:2px;
  flex:0 0 auto;
  background:linear-gradient(90deg,var(--accent),var(--accent-bright));
}
.refund-checklist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:28px;
}
.refund-checklist span{
  display:flex;
  min-height:48px;
  align-items:center;
  gap:9px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  background:var(--bg-panel-2);
  color:var(--text-muted);
  font-size:14px;
  font-weight:700;
}
.refund-checklist span::before{
  content:"✓";
  color:var(--accent);
  font-weight:800;
}
.decision-note{margin-top:24px}

.server-status:empty{display:none}
.server-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  width:100%;
  max-width:100%;
  overflow:hidden;
  margin-bottom:32px;
}
.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:13px 15px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-panel);
  box-shadow:inset 0 0 0 1px var(--highlight),var(--shadow-card);
}
.server-status .srv-dot{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--success);
  animation:home-pulse 2s ease-in-out infinite;
}
.server-status .srv-flag{
  width:22px;
  height:22px;
  flex:0 0 auto;
  overflow:hidden;
  border-radius:50%;
}
.server-status .srv-name{
  min-width:0;
  overflow:hidden;
  color:var(--text);
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.server-status .srv-type{
  max-width:100%;
  overflow:hidden;
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--bg-panel-2);
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.server-status .srv-ms,
.server-status .srv-bw{
  color:var(--text-muted);
  font-family:var(--font-mono);
  font-size:12px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.route-advice{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 28px;
  align-items:start;
  margin-top:26px;
  padding:26px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-panel);
  box-shadow:inset 0 0 0 1px var(--highlight),var(--shadow-card);
}
.route-advice h3{grid-column:1}
.route-advice p{grid-column:1;color:var(--text-muted)}
.route-advice .article-link{grid-column:2;grid-row:1 / span 2;padding-top:0}

.client-note{
  max-width:880px;
  margin-top:26px;
  color:var(--text-muted);
}
.traffic-pack-panel{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  margin-top:24px;
  padding:28px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-panel);
  box-shadow:inset 0 0 0 1px var(--highlight),var(--shadow-card);
}
.traffic-pack-panel h3{margin-top:14px}
.traffic-pack-panel p{max-width:820px;margin-top:10px;color:var(--text-muted)}
.faq-home-grid{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:64px;
  align-items:start;
}
.faq-home-grid .section-heading{margin-bottom:0}
.blog-heading-row{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:28px;
}
.blog-heading-row > .article-link{
  flex:0 0 auto;
  margin-bottom:40px;
  padding-top:0;
}
.home-article-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.home-article-grid .article-card h3{font-size:20px}
.cta-section{
  padding-top:var(--section-space);
  padding-bottom:var(--section-space);
}
.home-promo{margin-top:0}

@media (max-width:1120px){
  .home-article-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .hero-preview{min-height:auto}
  .feature-mosaic-reverse .feature-stack,
  .feature-mosaic-reverse .feature-large{grid-column:auto}
  .feature-mosaic-reverse .feature-stack{order:2}
  .feature-mosaic-reverse .feature-large{order:1}
  .faq-home-grid{grid-template-columns:1fr;gap:34px}
  .server-status{grid-template-columns:1fr}
}
@media (max-width:768px){
  .route-advice{grid-template-columns:1fr}
  .route-advice h3,
  .route-advice p,
  .route-advice .article-link{grid-column:1;grid-row:auto}
  .traffic-pack-panel{grid-template-columns:1fr}
  .blog-heading-row{display:block}
  .blog-heading-row > .article-link{margin-bottom:30px}
}
@media (max-width:640px){
  .lede{font-size:16px}
  .refund-checklist{grid-template-columns:1fr}
  .route-connector{width:18px}
  .home-article-grid{grid-template-columns:1fr}
  .server-status .srv-row{
    grid-template-columns:auto auto minmax(0,1fr) auto;
  }
  .server-status .srv-bw{grid-column:3}
  .server-status .srv-ms{grid-column:4}
}
@media (max-width:380px){
  .server-status .srv-row{gap:7px;padding-inline:11px}
  .server-status .srv-type{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rise,
  .stage-in{
    opacity:1;
    transform:none;
    animation:none;
  }
  .route-tile.is-on::before,
  .live,
  .server-status .srv-dot{animation:none}
}