/* DezKVM-Go website — global styles */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#0a0a0c;color:#ededf0;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',system-ui,sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.011em}
a{text-decoration:none;color:inherit}
img{max-width:100%}
::selection{background:#f24a2e;color:#fff}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* hover states */
[data-h="0"]:hover{color:#ededf0 !important}
[data-h="1"]:hover{color:#ededf0 !important}
[data-h="2"]:hover{color:#ededf0 !important}
[data-h="3"]:hover{color:#ededf0 !important}
[data-h="4"]:hover{border-color:rgba(255,255,255,.4) !important; background:rgba(255,255,255,.04) !important}
[data-h="5"]:hover{filter:brightness(1.1) !important}
[data-h="6"]:hover{transform:translateY(-2px) !important; filter:brightness(1.08) !important}
[data-h="7"]:hover{background:rgba(255,255,255,.05) !important; border-color:rgba(255,255,255,.35) !important}
[data-h="8"]:hover{background:rgba(255,255,255,.05) !important}
[data-h="9"]:hover{filter:brightness(1.1) !important; transform:translateY(-2px) !important}
[data-h="10"]:hover{background:rgba(255,255,255,.05) !important}
[data-h="11"]:hover{border-color:rgba(255,255,255,.32) !important; background:rgba(255,255,255,.03) !important}
[data-h="12"]:hover{border-color:rgba(255,255,255,.32) !important; background:rgba(255,255,255,.03) !important}
[data-h="13"]:hover{border-color:rgba(255,255,255,.32) !important; background:rgba(255,255,255,.03) !important}
[data-h="14"]:hover{border-color:rgba(255,255,255,.32) !important; background:rgba(255,255,255,.03) !important}
[data-h="15"]:hover{border-color:rgba(255,255,255,.32) !important; background:rgba(255,255,255,.03) !important}
[data-h="16"]:hover{border-color:rgba(255,255,255,.32) !important; background:rgba(255,255,255,.03) !important}

/* ===== Responsive ===== */

/* Tablet & below */
@media (max-width: 960px) {
  /* Hero stacks into one column */
  .hero{grid-template-columns:1fr !important; gap:40px !important; padding-top:56px !important; padding-bottom:48px !important}
  .h-hero{font-size:clamp(40px,9vw,58px) !important}
  /* Dense card grids drop to two columns */
  .grid-3,.grid-4{grid-template-columns:1fr 1fr !important}
  /* Two-column content sections stack */
  .grid-2{grid-template-columns:1fr !important; gap:28px !important}
}

/* Hide secondary nav links once they would crowd the bar */
@media (max-width: 820px) {
  .nav-links{display:none !important}
}

/* Phones */
@media (max-width: 640px) {
  /* Everything collapses to a single column */
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important}
  /* Trim the generous side padding so content keeps breathing room */
  .wrap{padding-left:22px !important; padding-right:22px !important}
  /* Scale headings down */
  .h-hero{font-size:clamp(32px,11vw,44px) !important}
  .h-sec{font-size:28px !important}
  /* Hero buttons go full-width and stack */
  .hero-cta{flex-direction:column !important}
  .hero-cta>a{justify-content:center !important}
  /* Narrow the spec-table label column so values don't get squeezed */
  .spec-table>div{grid-template-columns:120px 1fr !important}
}

/* Small phones — keep logo + CTA buttons on one row without overflowing */
@media (max-width: 480px) {
  .nav-cta{gap:8px !important}
  .nav-cta>a{padding:8px 12px !important}
}