:root{
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface2:#F3F4F6;
  --text:#111827;
  --text2:#1F2937;
  --muted:#4B5563;
  --muted2:#6B7280;
  --gray:#9CA3AF;
  --line:#E5E7EB;
  --brand:#7C3AED;
  --brand2:#F472B6;
  --shadowCard:0 4px 6px -1px rgba(0,0,0,.10), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadowSoft:0 20px 35px rgba(17,24,39,.08);
  --shadowBtnHover:0 14px 32px rgba(124,58,237,.22);
  --radius:12px;
  --radius2:16px;
  --rBtn:8px;
  --container:1200px;
  --focus:0 0 0 4px rgba(124,58,237,.22);
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(900px 520px at 12% -10%, rgba(124,58,237,.16), rgba(124,58,237,0) 56%),
    radial-gradient(900px 560px at 92% -2%, rgba(244,114,182,.10), rgba(244,114,182,0) 60%),
    radial-gradient(780px 520px at 80% 92%, rgba(124,58,237,.08), rgba(124,58,237,0) 55%),
    linear-gradient(180deg, #ffffff, #fbfbfd);
}

body:not([data-loaded="true"]) #homeRoot{opacity:0;transform:translateY(10px)}
body[data-loaded="true"] #homeRoot{opacity:1;transform:translateY(0);transition:opacity .38s var(--ease), transform .38s var(--ease)}
@media (prefers-reduced-motion: reduce){
  body[data-loaded="true"] #homeRoot{transition:none}
  .button,.card,.pick,.panel,.nav__link,.tocBar__link{transition:none}
}

a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.topbar{
  position:relative;
  z-index:5;
  background:rgba(255,255,255,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.4) blur(12px);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 0;
  font-size:13px;
  color:var(--muted);
}
.topbar__left{display:flex;align-items:center;gap:10px;min-width:0}
.topbar__right{color:var(--text);font-weight:800;white-space:nowrap}
.pill{
  display:inline-flex;
  align-items:center;
  height:20px;
  padding:0 8px;
  border-radius:999px;
  background:rgba(124,58,237,.10);
  border:1px solid rgba(124,58,237,.26);
  color:rgba(124,58,237,1);
  font-weight:900;
  letter-spacing:.06em;
  font-size:11px;
}

.header{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.4) blur(12px);
  box-shadow:none;
}
.header[data-scrolled="true"]{
  background:rgba(255,255,255,.94);
  box-shadow:0 10px 24px rgba(17,24,39,.06);
}
.header__inner{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  align-items:center;
  column-gap:18px;
  height:64px;
}
.brand{
  display:flex;
  align-items:center;
  gap:16px;
  min-width:0;
}
.brand__mark{
  width:34px;
  height:34px;
  border-radius:12px;
  background:transparent;
  border:1px solid var(--line);
  box-shadow:0 10px 22px rgba(17,24,39,.08);
  overflow:hidden;
  flex:0 0 auto;
}
.brand__mark svg,.brand__mark img{width:100%;height:100%;display:block;object-fit:cover}
.brand__name{font-weight:950;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav{
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
  justify-content:center;
  overflow:visible;
}
.nav__link{
  color:var(--muted);
  font-weight:800;
  font-size:15px;
  padding:0 10px;
  height:40px;
  display:inline-flex;
  align-items:center;
  border-radius:12px;
  white-space:nowrap;
  transition:background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}
.nav__link:hover{color:var(--text);background:rgba(124,58,237,.06)}
.nav__link--active{
  color:var(--text);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:6px;
  text-decoration-color:rgba(124,58,237,.55);
}
.header__actions{display:flex;align-items:center;gap:12px;justify-self:end;min-width:0}
.header__ctaStack{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
.header__ctaStack .button{min-height:40px;padding:10px 16px;white-space:nowrap}
.header__actions .langSelect{height:40px}
.navMenu{position:relative}
.nav__link--summary{list-style:none}
.nav__link--summary::-webkit-details-marker{display:none}
.navMenu[open] > .nav__link--summary{background:rgba(124,58,237,.06);color:var(--text)}
.navMenu__panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:220px;
  padding:8px;
  border-radius:14px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  box-shadow:0 18px 40px rgba(17,24,39,.12);
  display:grid;
  gap:6px;
  z-index:30;
  max-height:min(70vh, 520px);
  overflow:auto;
}
#moreMenu .navMenu__panel{left:auto;right:0}
.navMenu__item{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  font-weight:900;
  color:rgba(17,24,39,.86);
}
.navMenu__item:hover{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.20)}
.navToggle{display:none}

@media (min-width: 981px){
  .header__ctaStack{flex-direction:row}
}

@media (max-width: 980px){
  .nav{display:none}
  .navToggle{display:inline-flex}
  .header__ctaStack{display:none}
  .header__actions{gap:10px}
}

.navOverlay{
  position:fixed;
  inset:0;
  background:rgba(17,24,39,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
  z-index:60;
}
.navDrawer{
  position:fixed;
  top:0;
  right:0;
  width:min(360px, 88vw);
  height:100vh;
  background:#fff;
  border-left:1px solid var(--line);
  box-shadow:var(--shadowCard);
  transform:translateX(102%);
  transition:transform .18s ease;
  z-index:61;
  display:flex;
  flex-direction:column;
}
.navDrawer__head{
  padding:16px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--line);
}
.navDrawer__title{font-weight:950}
.navDrawer__links{padding:12px 16px;display:grid;gap:6px;overflow:auto}
.navDrawer__link{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  font-weight:900;
  color:rgba(17,24,39,.88);
}
.navDrawer__link:hover{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.20)}
body[data-nav-open="true"] .navOverlay{opacity:1;pointer-events:auto}
body[data-nav-open="true"] .navDrawer{transform:translateX(0)}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:44px;
  border:1px solid rgba(124,58,237,.40);
  background:linear-gradient(135deg, rgba(124,58,237,1), rgba(244,114,182,1));
  color:#fff;
  font-weight:900;
  padding:12px 24px;
  border-radius:var(--rBtn);
  box-shadow:0 10px 22px rgba(124,58,237,.14);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.button:hover{filter:brightness(1.02);transform:translateY(-1px) scale(1.01);box-shadow:var(--shadowBtnHover)}
.button:focus-visible{outline:none;box-shadow:var(--focus)}
.button--ghost{
  background:rgba(17,24,39,.03);
  border:1px solid var(--line);
  box-shadow:none;
  color:var(--text);
}
.button--ghost:hover{background:rgba(17,24,39,.05);transform:translateY(-1px)}
.button--large{padding:12px 24px;border-radius:var(--rBtn)}
.button--block{width:100%}

.button--outline{
  background:#fff;
  border:1px solid var(--line);
  color:var(--text2);
  box-shadow:none;
}
.button--outline:hover{background:rgba(17,24,39,.03)}

.btnLabel{display:inline-flex;align-items:center;gap:10px}
.btnLabel::before{
  content:"";
  width:16px;
  height:16px;
  border-radius:4px;
  box-shadow:0 1px 0 rgba(17,24,39,.08);
  -webkit-mask:var(--icon) center/contain no-repeat;
  mask:var(--icon) center/contain no-repeat;
  background-color:currentColor;
  opacity:.95;
}
.button .btnLabel::before{
  background-color:rgba(255,255,255,.98);
  opacity:1;
}
.button--ghost .btnLabel::before,.button--outline .btnLabel::before{
  background-color:rgba(31,41,55,.86);
}
.button--iconFilter .btnLabel{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M7 12h10M10 18h4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.button--iconStar .btnLabel{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3l2.6 5.7 6.2.6-4.7 4.1 1.4 6.1L12 16.9 6.5 19.6l1.4-6.1L3.2 9.3l6.2-.6L12 3z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E")}
.button--iconList .btnLabel{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 7h14M5 12h14M5 17h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}

.langSelect{
  height:44px;
  border-radius:var(--rBtn);
  padding:0 10px;
  background:rgba(17,24,39,.03);
  border:1px solid var(--line);
  outline:none;
  color:var(--text);
  font-weight:800;
  max-width:150px;
}
.langSelect:focus{box-shadow:var(--focus);border-color:rgba(124,58,237,.35)}

.hero{padding:64px 0 28px}
.hero__inner{
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:40px;
  align-items:start;
}
.hero__kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(124,58,237,.08);
  border:1px solid rgba(124,58,237,.20);
  color:rgba(124,58,237,1);
  font-weight:950;
  letter-spacing:.02em;
  margin-bottom:14px;
}
.hero__content h1{
  margin:0 0 12px;
  font-size:clamp(2.25rem, 3vw, 3rem);
  line-height:1.2;
  letter-spacing:-.03em;
  font-weight:700;
  color:transparent;
  background:linear-gradient(135deg, rgba(124,58,237,1), rgba(244,114,182,1));
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 1px 0 rgba(17,24,39,.04);
}
.hero__lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  max-width:64ch;
}
.hero__meta{margin:16px 0 14px;display:grid;gap:12px}
.byline{
  display:flex;
  gap:12px;
  align-items:center;
  padding:24px 24px;
  border-radius:var(--radius);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadowCard);
}
.byline__avatar{
  width:42px;
  height:42px;
  border-radius:12px;
  overflow:hidden;
  flex:0 0 auto;
  box-shadow:0 18px 35px rgba(124,58,237,.10);
}
.byline__avatar svg{width:100%;height:100%;display:block}
.byline__text{min-width:0}
.byline__top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.byline__name{font-weight:950}
.byline__dot{color:rgba(90,85,101,.75)}
.byline__date{color:var(--muted);font-weight:800;font-size:12px}
.byline__sub{margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5}
.disclosure{
  padding:14px 16px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(244,114,182,.18), rgba(124,58,237,.10));
  border:1px solid rgba(229,231,235,1);
  color:rgba(17,24,39,.90);
  line-height:1.6;
  font-size:14px;
}
.disclosure__head{display:flex;align-items:center;gap:10px}
.disclosure__icon{
  width:28px;
  height:28px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(229,231,235,1);
  color:rgba(124,58,237,1);
}
.disclosure__icon svg{width:16px;height:16px}
.disclosure__text{margin-top:6px;color:rgba(31,41,55,.86)}
.hero__cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.hero__trust{margin-top:18px}
.kpis{display:flex;gap:12px;flex-wrap:wrap}
.kpi{
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:rgba(255,255,255,.75);
  box-shadow:0 1px 0 rgba(17,24,39,.03);
}
.kpi__num{font-weight:950;font-size:22px}
.kpi__label{color:var(--muted);font-size:12px;margin-top:4px}

.panel{
  border-radius:var(--radius2);
  background:rgba(255,255,255,.80);
  border:1px solid rgba(229,231,235,1);
  box-shadow:var(--shadowSoft);
  overflow:hidden;
  backdrop-filter:saturate(1.25) blur(14px);
}
.panel__media{
  height:150px;
  background:
    url("./assets/illus-vps-panel.svg") center/cover no-repeat,
    linear-gradient(135deg, rgba(124,58,237,.12), rgba(244,114,182,.10));
  border-bottom:1px solid rgba(229,231,235,1);
}
.panel__image{display:none}
.panel__header{
  padding:18px 18px 12px;
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:baseline;
}
.panel__title{font-weight:950}
.panel__hint{color:var(--muted);font-size:12px}
.panel__body{padding:0 18px 14px}
.panel__row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:12px 0;
  border-top:1px solid rgba(229,231,235,1);
  border-radius:12px;
  transition:background .2s var(--ease), transform .2s var(--ease);
}
.panel__row:first-child{border-top:none}
.panel__row--strong .panel__value{color:var(--text);font-weight:900}
.panel__label{color:var(--muted);font-size:13px}
.panel__value{font-size:13px;text-align:right}
.panel__row:hover{
  background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(244,114,182,.06));
  transform:translateY(-1px);
}
.panel__footer{padding:0 18px 18px}

.section{padding:56px 0}
.section--tinted{
  background:linear-gradient(180deg, rgba(124,58,237,.06), rgba(124,58,237,0));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.section__header{
  display:flex;
  justify-content:space-between;
  gap:24px;
  align-items:baseline;
  margin-bottom:18px;
}
.section__header h2{margin:0;font-size:1.5rem;letter-spacing:-.02em;font-weight:600;color:var(--text2)}
.section__sub{margin:0;color:var(--muted);max-width:72ch;line-height:1.6}

.grid{display:grid;gap:14px}
.grid--3{grid-template-columns:repeat(3, 1fr)}
.grid--cards{grid-template-columns:1fr}

.card{
  position:relative;
  padding:24px;
  border-radius:var(--radius2);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadowCard);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.card[data-icon]{padding-top:64px}
.card[data-icon]::before{
  content:"";
  position:absolute;
  top:18px;
  left:18px;
  width:40px;
  height:40px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(124,58,237,.95), rgba(244,114,182,.85));
  box-shadow:0 12px 26px rgba(124,58,237,.22);
}
.card[data-icon]::after{
  content:"";
  position:absolute;
  top:18px;
  left:18px;
  width:40px;
  height:40px;
  border-radius:16px;
  background:rgba(255,255,255,.96);
  -webkit-mask:var(--icon) center/20px 20px no-repeat;
  mask:var(--icon) center/20px 20px no-repeat;
  opacity:.98;
}
.card[data-icon="web"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5h16v13H4z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M4 9h16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 5.5v3.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.card[data-icon="api"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 8.5 4 12l3.5 3.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.5 8.5 20 12l-3.5 3.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 19l4-14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.card[data-icon="dev"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 6.5h15v11h-15z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8 10h8' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8 13.5h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.card[data-icon="game"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.5 15.5h-2a3 3 0 0 1-3-3l1.2-4.3a3 3 0 0 1 2.9-2.2h11.8a3 3 0 0 1 2.9 2.2l1.2 4.3a3 3 0 0 1-3 3h-2l-2-2h-4l-2 2z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M8.8 11.5h2.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M10 10.3v2.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M16.2 10.8h.01' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M18 12.2h.01' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.card[data-icon="cpu"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 9h6v6H9z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M7 7h10v10H7z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 10h2M4 14h2M18 10h2M18 14h2M10 4v2M14 4v2M10 18v2M14 18v2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.card[data-icon="globe"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3.8 12h16.4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12 3.8c2.6 2.2 4.2 5.1 4.2 8.2S14.6 18 12 20.2C9.4 18 7.8 15.1 7.8 12S9.4 6 12 3.8z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E")}
.card[data-icon="support"]{--icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 12a7.5 7.5 0 0 1 15 0v4a2 2 0 0 1-2 2h-1.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M6 12v3a2 2 0 0 1-2 2h-.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M9.5 20h5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.card:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(17,24,39,.08);border-color:rgba(209,213,219,1)}
.card__meta{
  color:rgba(124,58,237,1);
  font-weight:950;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.card__title{margin:10px 0 8px;font-size:18px;line-height:1.25}
.card__text{margin:0;color:var(--muted);line-height:1.6}

.picks{display:grid;grid-template-columns:repeat(3, 1fr);gap:14px}
.pick{
  border-radius:var(--radius2);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadowCard);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.pick--rich{padding:0;gap:0;overflow:hidden}
.pick__cover{height:120px;background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(244,114,182,.10));border-bottom:1px solid var(--line)}
.pick__cover img{width:100%;height:100%;object-fit:cover;display:block}
.pick__body{padding:24px;display:flex;flex-direction:column;gap:12px}
.pick__head{display:flex;align-items:flex-start;gap:12px}
.pick__head .badge{margin-left:auto}
.pick__name{font-weight:950;font-size:18px;line-height:1.15}
.pick__meta{margin-top:6px;color:var(--muted);font-size:12px}
.pick__dealBox{
  border-radius:12px;
  border:1px solid rgba(124,58,237,.18);
  background:linear-gradient(135deg, rgba(124,58,237,.06), rgba(244,114,182,.05));
  padding:12px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.pick__dealLeft{display:flex;flex-direction:column;gap:2px}
.pick__dealK{font-size:11px;color:var(--muted);font-weight:950;letter-spacing:.06em;text-transform:uppercase}
.pick__dealV{font-weight:950;color:rgba(31,41,55,.90)}
.pick__cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pickCol{
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  border-radius:18px;
  padding:12px 12px;
}
.pickCol__title{font-weight:950;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(31,41,55,.82)}
.pickCol__list{margin-top:10px;display:grid;gap:8px}
.pickItem{color:var(--muted);font-size:13px;line-height:1.5}
.pickItem--pro::before{content:"+";display:inline-block;width:14px;color:rgba(124,58,237,1);font-weight:950}
.pickItem--con::before{content:"–";display:inline-block;width:14px;color:rgba(244,114,182,1);font-weight:950}
.pick__top{display:flex;gap:12px;align-items:flex-start}
.pick__top .badge{margin-left:auto}
.pick__rank{
  width:40px;
  height:40px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#fff;
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadowCard);
}
.pick__name{font-weight:950;font-size:18px;line-height:1.2}
.pick__meta{margin-top:6px;color:var(--muted);font-size:12px}
.badge{
  font-weight:950;
  font-size:12px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(124,58,237,.10);
  border:1px solid rgba(124,58,237,.22);
  color:rgba(124,58,237,1);
  white-space:nowrap;
}
.pick__bullets{display:grid;gap:8px}
.bulletRow{
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  border-radius:12px;
  padding:10px 12px;
  color:var(--muted);
  line-height:1.5;
  font-size:13px;
}
.pick__actions{display:flex;gap:10px}
.pick__actions .button{flex:1}
.pick__actions .button--ghost{flex:1}

.controls{
  margin-top:14px;
  padding:24px;
  border-radius:var(--radius2);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadowCard);
}

.tocBar{
  position:sticky;
  top:64px;
  z-index:15;
  background:rgba(255,255,255,.90);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.4) blur(12px);
}
.tocBar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
}
.tocBar__label{font-weight:700;color:rgba(31,41,55,.90);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.tocBar__links{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.tocBar__link{
  padding:10px 14px;
  min-height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  color:var(--muted);
  font-weight:900;
  font-size:12px;
  transition:background .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.tocBar__link:hover{color:var(--text);background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.22);transform:translateY(-1px)}
.controls__row{
  display:grid;
  grid-template-columns:1.5fr .9fr .9fr .9fr;
  gap:12px;
}
.controls__row--range{
  grid-template-columns:1.2fr 1.8fr;
  margin-top:12px;
  align-items:center;
}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field__label{color:var(--muted);font-size:12px;font-weight:800}
.field__input,.field__select{
  height:44px;
  border-radius:var(--rBtn);
  padding:0 14px;
  background:rgba(17,24,39,.03);
  border:1px solid var(--line);
  outline:none;
}
.field__input::placeholder{color:rgba(107,114,128,.92)}
.field__input:focus,.field__select:focus{box-shadow:var(--focus);border-color:rgba(124,58,237,.32)}

.range{display:flex;flex-direction:column;gap:10px}
.range__header{display:flex;justify-content:space-between;gap:12px}
.range__label{color:var(--muted);font-size:12px;font-weight:800}
.range__value{font-weight:700;font-size:12px;color:rgba(124,58,237,1)}
input[type="range"]{width:100%}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  background:rgba(17,24,39,.03);
  border:1px solid var(--line);
  color:var(--muted);
  font-weight:900;
  font-size:12px;
}
.chip[data-active="true"]{
  color:rgba(124,58,237,1);
  border-color:rgba(124,58,237,.26);
  background:rgba(124,58,237,.10);
}
.chip:focus-visible{outline:none;box-shadow:var(--focus)}

.results{margin-top:16px}
.results__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.results__count{color:var(--muted);font-size:13px;font-weight:800}

.serverCard{
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadowCard);
  display:flex;
  overflow:hidden;
}
.serverCard--wide{flex-direction:row}
.serverCard__cover{
  width:220px;
  min-height:190px;
  border-right:1px solid var(--line);
  background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(244,114,182,.10));
}
.serverCard__cover img{width:100%;height:100%;object-fit:cover;display:block}
.serverCard__body{flex:1;padding:24px;display:flex;flex-direction:column;gap:12px}
.serverCard__top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.serverCard__right{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.serverCard__price{font-weight:950;color:rgba(31,41,55,.90)}
.serverCard__deal{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.serverCard__deal .button{white-space:nowrap}
.serverCard__facts{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
}
.fact{
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  border-radius:12px;
  padding:10px 12px;
}
.fact__k{font-size:11px;color:var(--muted);font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.fact__v{margin-top:4px;font-weight:950;color:rgba(31,41,55,.90)}
.serverCard__name{font-weight:950;font-size:16px;line-height:1.25}
.serverCard__meta{margin-top:5px;color:var(--muted);font-size:12px}
.brandRow{display:flex;gap:10px;align-items:flex-start}
.providerLogo{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.03);
  overflow:hidden;
  flex:0 0 auto;
}
.providerLogo img{width:100%;height:100%;display:block}
.serverCard__excerpt{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(124,58,237,.06);
  border:1px solid rgba(124,58,237,.14);
  color:rgba(31,41,55,.82);
  font-size:13px;
  line-height:1.55;
}
.serverCard__grid{display:none}
.kv{
  padding:10px;
  border-radius:12px;
  background:rgba(17,24,39,.02);
  border:1px solid var(--line);
}
.kv__k{color:var(--muted);font-size:12px;font-weight:800}
.kv__v{margin-top:5px;font-weight:950}
.serverCard__tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-size:11px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  color:var(--muted);
  font-weight:900;
}
.catBar{margin-top:14px}
.catBar__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.catBar__title{margin:0;font-size:14px;font-weight:950}
.catBar__hint{color:var(--muted);font-size:13px;line-height:1.45}
.catBar__buttons{
  margin-top:10px;
  display:flex;
  gap:10px;
  align-items:center;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-bottom:2px;
}
.catBar__buttons::-webkit-scrollbar{display:none}
.catBtn{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  color:rgba(31,41,55,.92);
  border-radius:999px;
  padding:10px 14px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:950;
  cursor:pointer;
  white-space:nowrap;
  box-shadow:0 2px 10px rgba(17,24,39,.05);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.catBtn:hover{border-color:rgba(124,58,237,.35);box-shadow:0 10px 22px rgba(124,58,237,.12);transform:translateY(-1px)}
.catBtn--active{
  border-color:rgba(124,58,237,.45);
  background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(244,114,182,.10));
}
.catBtn__count{
  font-size:12px;
  font-weight:950;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(17,24,39,.06);
  color:rgba(31,41,55,.78);
}
.catBtn--active .catBtn__count{
  background:rgba(124,58,237,.14);
  color:rgba(124,58,237,1);
}
.serverCard__actions{display:flex;gap:10px;align-items:center;justify-content:space-between}
.serverCard__actions .button{flex:1}
.serverCard__actions .button--ghost{flex:1}

.compare{margin-top:18px}
.compare__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:14px}
.compare__title{margin:0;font-size:16px}
.compare__sub{margin:0;color:var(--muted);font-size:13px;line-height:1.5;max-width:60ch}
.compare__note{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.5}
.tableWrap{
  margin-top:12px;
  overflow:auto;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadowCard);
}
.table{width:100%;border-collapse:separate;border-spacing:0;min-width:860px}
.th{
  text-align:left;
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(31,41,55,.78);
  padding:12px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72));
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:1;
}
.sortTh{
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  color:inherit;
  text-transform:inherit;
  letter-spacing:inherit;
  font-weight:950;
  cursor:pointer;
}
.sortTh:hover{color:rgba(31,41,55,1)}
.sortTh[data-dir="asc"]::after{content:" ↑";font-weight:950}
.sortTh[data-dir="desc"]::after{content:" ↓";font-weight:950}
.th--right{text-align:right}
.td{
  padding:12px 12px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}
.td--right{text-align:right}
.rowProvider{display:flex;align-items:center;gap:10px}
.rowProvider__name{font-weight:950}
.rowProvider__meta{color:var(--muted);font-size:12px;margin-top:2px}
.rowProvider__text{min-width:0}
.dealBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:12px;
  min-height:44px;
  padding:12px 14px;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:white;
  font-weight:950;
  border:0;
  text-decoration:none;
  box-shadow:0 4px 18px rgba(124,58,237,.14);
}
.dealBtn:hover{filter:brightness(1.02);box-shadow:var(--shadowBtnHover)}

.faq{display:grid;gap:10px}
.faq__item{
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadowCard);
  padding:18px 18px;
}
.faq__q{
  font-weight:950;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.faq__q::after{
  content:"▾";
  color:rgba(124,58,237,1);
  font-weight:950;
}
details[open]>.faq__q::after{content:"▴"}
.faq__a{margin-top:12px;color:var(--muted);line-height:1.7}

.teamGrid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
}
.personCard{
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadowCard);
  padding:20px;
  display:flex;
  gap:14px;
  align-items:flex-start;
}
.personCard__ava{
  width:56px;
  height:56px;
  border-radius:16px;
  overflow:hidden;
  flex:0 0 auto;
  border:1px solid var(--line);
  background:rgba(17,24,39,.03);
}
.personCard__ava img{width:100%;height:100%;object-fit:cover;display:block}
.personCard__name{font-weight:950}
.personCard__role{margin-top:4px;color:var(--muted);font-weight:850;font-size:13px}
.personCard__bio{margin-top:10px;color:var(--muted);line-height:1.6;font-size:14px}
.personCard__links{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
.personCard__link{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  color:rgba(31,41,55,.90);
  border-radius:999px;
  padding:8px 12px;
  font-weight:950;
  font-size:13px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  min-height:36px;
}
.personCard__link:hover{border-color:rgba(124,58,237,.35);background:rgba(124,58,237,.06)}

.footer{
  padding:34px 0 0;
  border-top:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(124,58,237,.16), rgba(0,0,0,0) 60%),
    radial-gradient(900px 520px at 90% 15%, rgba(244,114,182,.12), rgba(0,0,0,0) 62%),
    linear-gradient(180deg, #0B1220, #0A1020);
}
.footerTop{
  display:grid;
  grid-template-columns:1.2fr 1.8fr;
  gap:26px;
  align-items:start;
}
.brand--footer .brand__name{color:rgba(255,255,255,.95)}
.brand--footer .brand__mark{width:32px;height:32px;border-radius:12px;border:0;box-shadow:none}
.footerTagline{margin-top:10px;color:rgba(255,255,255,.78);line-height:1.6}
.footerSub{margin-top:10px;color:rgba(255,255,255,.56);line-height:1.6;font-size:13px}

.footerCols{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.footerCol__title{color:rgba(255,255,255,.92);font-weight:950;font-size:14px;margin:4px 0 10px}
.footerLink{
  appearance:none;
  border:none;
  padding:0;
  margin:0;
  background:transparent;
  color:rgba(255,255,255,.62);
  font-weight:850;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  text-decoration:none;
  line-height:1.9;
}
.footerLink:hover{color:rgba(255,255,255,.92)}

.footerBottom{margin-top:26px;border-top:1px solid rgba(255,255,255,.08);padding:18px 0}
.footerBottom__inner{display:flex;justify-content:center}
.footerCopy{color:rgba(255,255,255,.48);font-size:12px;font-weight:850;text-align:center}

.reviewsGrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}
.reviewCard{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadowCard);
  text-decoration:none;
  color:inherit;
  transition:transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.reviewCard:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(17,24,39,.12);border-color:rgba(124,58,237,.24)}
.reviewCard__meta{font-size:12px;font-weight:950;color:var(--muted2);letter-spacing:.06em;text-transform:uppercase}
.reviewCard__title{margin:0;font-size:18px;line-height:1.25;letter-spacing:-.02em;font-weight:950;color:var(--text)}
.reviewCard__sub{margin:0;color:var(--muted);line-height:1.6;font-size:14px}
.reviewCard__tags{display:flex;flex-wrap:wrap;gap:8px}
.reviewTag{
  display:inline-flex;
  align-items:center;
  height:26px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  color:rgba(31,41,55,.80);
  font-weight:900;
  font-size:12px;
}
.articleBody{margin-top:18px;display:grid;gap:14px}
.articleBody h2{margin:16px 0 6px;font-size:20px;letter-spacing:-.02em;font-weight:950;color:var(--text)}
.articleBody p{margin:0;color:var(--muted);line-height:1.75}
.toc{
  margin-top:12px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  border-radius:16px;
  padding:14px;
}
.toc__title{font-weight:950;color:var(--text);margin-bottom:8px}
.toc__links{display:flex;flex-wrap:wrap;gap:10px}
.toc__link{color:rgba(124,58,237,1);text-decoration:underline;font-weight:900}
.figure{
  border:1px solid var(--line);
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadowCard);
}
.figure__cap{padding:12px 14px;border-top:1px solid var(--line);color:var(--muted2);font-size:12px;font-weight:850}
.speedSvg{display:block;width:100%;height:auto;background:radial-gradient(900px 320px at 20% 0%, rgba(124,58,237,.14), rgba(0,0,0,0) 55%), #fff}
.faqBlock{margin-top:10px;display:grid;gap:10px}
.faqBlock details{border-radius:16px;border:1px solid var(--line);background:rgba(255,255,255,.70);box-shadow:var(--shadowCard);padding:10px 12px}
.faqBlock summary{cursor:pointer;font-weight:950;color:rgba(17,24,39,.92)}
.faqBlock details[open]{background:#fff;border-color:rgba(124,58,237,.22)}
.faqBlock .faqA{margin-top:8px;color:var(--muted);line-height:1.75}
.iconButton{
  width:36px;
  height:36px;
  border-radius:12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.03);
  color:var(--text);
  font-size:18px;
  line-height:1;
}
.iconButton:hover{background:rgba(17,24,39,.05)}
.iconButton:focus-visible{outline:none;box-shadow:var(--focus)}

.detailGrid{display:grid;grid-template-columns:repeat(2, 1fr);gap:12px}
.detail{
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  border-radius:16px;
  padding:12px;
}
.detail__k{color:rgba(90,85,101,.92);font-size:12px;font-weight:800}
.detail__v{margin-top:6px;font-weight:950;color:var(--text)}
.detail__v a{color:rgba(124,58,237,1);text-decoration:underline}

.stars{display:inline-flex;gap:4px;align-items:center}
.star{
  width:18px;
  height:18px;
  border-radius:6px;
  background:rgba(17,24,39,.06);
  border:1px solid var(--line);
}
.star[data-on="true"]{background:rgba(124,58,237,.22);border-color:rgba(124,58,237,.30)}

.formGrid{display:grid;gap:10px}
.submitHint{color:var(--muted2);font-size:12px;line-height:1.5}
.submitMsg{
  min-height:18px;
  color:rgba(185,28,28,1);
  font-weight:850;
  font-size:13px;
}
.submitCheck{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  color:var(--muted);
  line-height:1.55;
  font-weight:850;
}
.submitCheck input{margin-top:3px}
.submitActions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.submitPostList{display:grid;gap:10px;margin-top:10px}
.submitPostRow{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px 12px;
  align-items:center;
  padding:14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadowCard);
}
.submitPostLink{font-weight:950;color:rgba(17,24,39,.92);text-decoration:none}
.submitPostLink:hover{text-decoration:underline;color:rgba(124,58,237,1)}
.submitPostMeta{grid-column:1 / 2;color:var(--muted2);font-size:12px;font-weight:850}
.submitPostRow .button{grid-column:2 / 3;justify-self:end}
.textarea{
  min-height:110px;
  resize:vertical;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(17,24,39,.03);
  border:1px solid var(--line);
  outline:none;
}
.textarea:focus{box-shadow:var(--focus);border-color:rgba(124,58,237,.30)}

@media (max-width: 960px){
  .reviewsGrid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (max-width: 640px){
  .reviewsGrid{grid-template-columns:1fr}
  .toc__links{gap:8px}
}

.pageRoot{padding:26px 0 56px}
.pageTop{
  margin-top:10px;
  padding:24px;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadowCard);
}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--muted2);font-weight:850;font-size:14px;margin-bottom:10px}
.crumb{display:inline-flex;align-items:center;gap:10px}
.crumb a{color:rgba(124,58,237,1);text-decoration:underline}
.crumbSep{opacity:.55}
.crumbCurrent{font-weight:950;color:rgba(17,24,39,.92)}
.pageTitle{margin:12px 0 10px;font-size:36px;letter-spacing:-.03em;line-height:1.08;font-weight:950}
.pageSub{margin:0;color:#4B5563;line-height:1.6;max-width:80ch;font-size:16px}
.geoLine{margin-top:10px;display:flex;flex-wrap:wrap;gap:10px}
.geoPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  min-height:44px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  font-weight:900;
  font-size:14px;
  color:#4B5563;
}
.geoPill:hover{background:rgba(124,58,237,.06);border-color:rgba(124,58,237,.22)}
.articleMeta{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:#6B7280;
  font-weight:850;
  font-size:14px;
}
.articleMeta__left{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.articleMeta__dot{opacity:.55}
.articleMeta__right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.articleMetaBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  padding:12px 20px;
  min-height:44px;
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  font-weight:950;
  color:rgba(31,41,55,.86);
}
.articleMetaBtn:hover{background:rgba(20,18,26,.05)}
.editorLine{
  margin-top:8px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  color:#6B7280;
  font-size:14px;
  font-weight:850;
}
.editorLine a{color:rgba(20,18,26,.86);text-decoration:underline;font-weight:950}
.headerGrid{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:stretch;
}
.expertCard{
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.70);
  box-shadow:var(--shadowCard);
  padding:24px;
  display:flex;
  gap:12px;
  align-items:center;
  height:100%;
}
.expertBadge{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(17,24,39,.04);
  border:1px solid var(--line);
  color:rgba(31,41,55,.78);
  font-weight:950;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.expertAva{
  width:56px;
  height:56px;
  border-radius:12px;
  border:1px solid var(--line);
  object-fit:cover;
  background:rgba(17,24,39,.03);
  flex:0 0 auto;
}
.expertName{font-weight:950}
.expertRole{margin-top:4px;color:var(--muted);font-size:12px;font-weight:850}
.expertBio{margin-top:12px;color:var(--muted);font-size:14px;line-height:1.5}
.labCard{
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.70);
  box-shadow:var(--shadowCard);
  padding:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
}
.labTop{display:flex;justify-content:space-between;gap:10px;align-items:center}
.labTitle{font-weight:950;color:rgba(31,41,55,.90)}
.labLink{color:rgba(124,58,237,1);font-weight:950;text-decoration:underline;font-size:12px}
.labStats{display:grid;grid-template-columns:repeat(3, 1fr);gap:10px}
.labStat{
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  border-radius:12px;
  padding:10px;
  text-align:center;
}
.labNum{font-weight:950;font-size:18px;color:rgba(31,41,55,.90)}
.labLbl{margin-top:6px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.pageGrid{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;align-items:start;margin-top:14px}
.mediaCard{
  border-radius:var(--radius2);
  border:1px solid var(--line);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadowCard);
}
.mediaCard__img{width:100%;height:320px;object-fit:cover;display:block;background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(244,114,182,.10))}
.mediaCard__cap{padding:12px 14px;color:var(--muted);font-size:12px;line-height:1.5;border-top:1px solid var(--line)}
.sideStack{display:grid;gap:12px}
.dealCard{
  padding:0;
  border-radius:var(--radius2);
  border:1px solid rgba(124,58,237,.18);
  background:#fff;
  box-shadow:var(--shadowCard);
}
.dealCard__header{
  padding:20px 24px;
  background:linear-gradient(135deg, rgba(124,58,237,.10), rgba(244,114,182,.08));
  border-bottom:1px solid var(--line);
}
.dealCard__body{padding:24px}
.dealCard__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dealCard__logo{display:flex;align-items:center;gap:10px;min-width:0}
.dealCard__logoImg{
  width:52px;
  height:52px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  object-fit:contain;
  padding:8px;
}
.dealCard__brand{font-weight:950}
.dealCard__hint{margin-top:4px;color:var(--muted);font-size:12px}
.ratingPill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(124,58,237,.10);
  border:1px solid rgba(124,58,237,.22);
  color:rgba(124,58,237,1);
  font-weight:950;
  white-space:nowrap;
}
.starsInline{display:inline-flex;gap:3px;align-items:center}
.starSvg{width:18px;height:18px;display:block}
.starDot{
  width:10px;
  height:10px;
  border-radius:4px;
  background:rgba(17,24,39,.10);
  border:1px solid var(--line);
}
.starDot[data-on="true"]{background:rgba(124,58,237,.35);border-color:rgba(124,58,237,.36)}
.dealCard__price{margin-top:12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.priceNow{font-weight:950;font-size:26px;letter-spacing:-.02em}
.priceWas{color:var(--muted2);text-decoration:line-through;font-weight:900}
.couponRow{margin-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.couponBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px dashed rgba(244,114,182,.45);
  background:rgba(244,114,182,.10);
  color:rgba(31,41,55,.88);
  font-weight:950;
}
.couponCode{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
.ctaStack{margin-top:12px;display:grid;gap:10px}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap}
.ctaRow .button{flex:1;min-width:190px}
.ctaTrust{margin-top:10px;color:var(--muted2);font-size:14px;line-height:1.6;font-weight:850}
.specGrid{margin-top:12px;display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
.specItem{
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  border-radius:12px;
  padding:14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.specIcon{
  width:28px;
  height:28px;
  border-radius:12px;
  background:linear-gradient(135deg, rgba(124,58,237,.14), rgba(244,114,182,.10));
  border:1px solid rgba(124,58,237,.18);
  flex:0 0 auto;
}
.specText{min-width:0}
.specK{color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.specV{margin-top:6px;font-weight:950}
.sectionCard{
  margin-top:14px;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadowCard);
  overflow:hidden;
}
.sectionCard__head{
  padding:18px 24px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sectionCard__title{font-weight:950;font-size:20px}
.sectionCard__body{padding:24px}
.proConGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.proCon{
  border:1px solid var(--line);
  background:rgba(17,24,39,.02);
  border-radius:12px;
  padding:18px;
  display:grid;
  gap:10px;
}
.proCon__title{font-weight:950;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(17,24,39,.78)}
.proCon__item{display:flex;gap:10px;align-items:flex-start;color:var(--muted);line-height:1.55;font-size:13px}
.proCon__icon{
  width:22px;
  height:22px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  font-weight:950;
}
.proCon__icon--pro{background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.24);color:rgba(22,163,74,1)}
.proCon__icon--con{background:rgba(220,38,38,.10);border:1px solid rgba(220,38,38,.20);color:rgba(220,38,38,1)}
.gallery{display:grid;grid-template-columns:repeat(2, 1fr);gap:12px}
.shot{
  border-radius:18px;
  border:1px solid rgba(20,18,26,.10);
  overflow:hidden;
  background:rgba(20,18,26,.03);
}
.shot img{width:100%;height:200px;object-fit:cover;display:block}
.shotCap{padding:10px 12px;color:var(--muted);font-size:12px;border-top:1px solid rgba(20,18,26,.08);line-height:1.5}
.reviewList{display:grid;gap:10px}
.review{
  border:1px solid rgba(20,18,26,.10);
  background:rgba(20,18,26,.03);
  border-radius:12px;
  padding:16px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.review__ava{
  width:44px;
  height:44px;
  border-radius:12px;
  object-fit:cover;
  border:1px solid rgba(20,18,26,.12);
  background:rgba(255,255,255,.7);
  flex:0 0 auto;
}
.review__top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.review__name{font-weight:950}
.review__date{color:var(--muted);font-size:12px;font-weight:850}
.review__text{margin-top:8px;color:var(--muted);line-height:1.65}
.review__rating{margin-left:auto}
.topicList{display:grid;gap:14px;margin-top:14px}
.topicProvider{
  border-radius:var(--radius2);
  border:1px solid rgba(20,18,26,.10);
  background:#fff;
  box-shadow:var(--shadowCard);
  overflow:hidden;
}
.topicProvider__head{
  padding:18px 24px;
  border-bottom:1px solid rgba(20,18,26,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.topicProvider__left{display:flex;gap:12px;align-items:center;min-width:0}
.topicProvider__logo{
  width:46px;
  height:46px;
  border-radius:12px;
  border:1px solid rgba(20,18,26,.10);
  background:rgba(255,255,255,.7);
  object-fit:contain;
  padding:8px;
}
.topicProvider__name{font-weight:950}
.topicProvider__meta{margin-top:4px;color:var(--muted);font-size:12px}
.topicProvider__body{padding:24px;display:grid;gap:12px}
.topicProvider__body .mediaCard__img{height:240px;border-radius:12px;border:1px solid rgba(20,18,26,.10)}
.topicProvider__copy{color:var(--muted);line-height:1.7}
.topicProvider__actions{display:flex;gap:10px;flex-wrap:wrap}
.topicProvider__actions .button{min-width:220px;flex:1}

@media (max-width: 980px){
  .hero__inner{grid-template-columns:1fr;gap:18px}
  .grid--3{grid-template-columns:1fr}
  .controls__row{grid-template-columns:1fr 1fr}
  .controls__row--range{grid-template-columns:1fr}
  .chips{justify-content:flex-start}
  .picks{grid-template-columns:1fr}
  .teamGrid{grid-template-columns:1fr}
  .footerTop{grid-template-columns:1fr;gap:18px}
  .footerCols{grid-template-columns:1fr;gap:16px}
  .nav{display:none}
  .navToggle{display:inline-flex}
  .tocBar{top:64px}
  .serverCard--wide{flex-direction:column}
  .serverCard__cover{width:100%;min-height:150px;border-right:0;border-bottom:1px solid var(--line)}
  .serverCard__facts{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .compare__head{flex-direction:column;align-items:flex-start}
  .pageGrid{grid-template-columns:1fr}
  .sideStack{order:-1}
  .specGrid{grid-template-columns:1fr}
  .proConGrid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .mediaCard__img{height:240px}
  .pageTitle{font-size:32px}
  .headerGrid{grid-template-columns:1fr}
  .labStats{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

@media (max-width: 620px){
  .hero__content h1{font-size:34px}
  .grid--cards{grid-template-columns:1fr}
  .header__actions .button{display:none}
  .detailGrid{grid-template-columns:1fr}
}