/* ============================================================
   HostDeck Store — Design System (base)
   Dark-first, cyan/lime accent, premium VPS aesthetic
   ============================================================ */

/* ---------- Brand palette (fixed) ---------- */
:root {
  --brand-cyan:   #99FFFF;
  --brand-mint:   #99FFCC;
  --brand-lime:   #99FF66;
  --brand-lime2:  #99FF33;
  --brand-yellow: #99FF00;

  /* ---------- Dark mode (default) ---------- */
  --bg:            #0a0e14;
  --bg-2:          #0c111a;
  --bg-elev:       #10161f;
  --bg-card:       #121a26;
  --bg-card-hover: #16202f;
  --bg-inset:      #0d131c;

  --text:          #e9eff6;
  --text-2:        #c4cedb;
  --text-muted:    #8b98a9;
  --text-faint:    #64748b;

  --border:        rgba(153,255,255,0.14);
  --border-2:      rgba(153,255,255,0.26);
  --border-soft:   rgba(153,255,255,0.08);

  --accent:        #99FFFF;
  --accent-2:      #99FFCC;
  --highlight:     #99FF66;
  --cta:           #99FF00;
  --cta-text:      #0a0e14;

  --glow:          rgba(153,255,255,0.28);
  --glow-soft:     rgba(153,255,255,0.12);
  --shadow:        0 10px 34px rgba(0,0,0,0.45);
  --shadow-sm:     0 4px 16px rgba(0,0,0,0.35);

  --grad-brand:    linear-gradient(120deg, #99FFFF 0%, #99FFCC 45%, #99FF66 100%);
  --grad-cta:      linear-gradient(120deg, #99FF66 0%, #99FF00 100%);
  --grad-hero:     radial-gradient(1200px 600px at 70% -10%, rgba(153,255,255,0.16), transparent 60%),
                   radial-gradient(900px 500px at 10% 10%, rgba(153,255,102,0.10), transparent 55%);

  --radius:        14px;
  --radius-sm:     10px;
  --radius-lg:     20px;
  --radius-pill:   999px;

  --container:     1200px;
  --header-h:      72px;

  --font: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

/* ---------- Light mode ---------- */
html.light {
  --bg:            #f4f7fb;
  --bg-2:          #eef3f9;
  --bg-elev:       #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f7fbff;
  --bg-inset:      #eef3f9;

  --text:          #0f172a;
  --text-2:        #334155;
  --text-muted:    #5b6b7d;
  --text-faint:    #8494a6;

  --border:        rgba(15,23,42,0.12);
  --border-2:      rgba(15,23,42,0.22);
  --border-soft:   rgba(15,23,42,0.06);

  --accent:        #0e7490;
  --accent-2:      #0f766e;
  --highlight:     #4d7c0f;
  --cta:           #99FF00;
  --cta-text:      #0a0e14;

  --glow:          rgba(14,116,144,0.16);
  --glow-soft:     rgba(14,116,144,0.08);
  --shadow:        0 10px 34px rgba(15,23,42,0.10);
  --shadow-sm:     0 4px 16px rgba(15,23,42,0.08);

  --grad-hero:     radial-gradient(1200px 600px at 70% -10%, rgba(14,116,144,0.10), transparent 60%),
                   radial-gradient(900px 500px at 10% 10%, rgba(77,124,15,0.08), transparent 55%);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color .35s ease, color .35s ease;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4, h5 { line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1320px; }
.section { padding: 88px 0; position: relative; }
.section-sm { padding: 60px 0; }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 16px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--grad-brand); border-radius: 2px; }
.section-head h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 14px; }
.section-head p { color: var(--text-muted); font-size: 17px; }

/* ---------- Typography helpers ---------- */
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.muted { color: var(--text-muted); }
.mono { font-family: var(--mono); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: 15px; line-height: 1;
  padding: 14px 24px; border-radius: var(--radius-sm);
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
  position: relative;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary {
  background: var(--grad-cta); color: var(--cta-text);
  box-shadow: 0 6px 22px rgba(153,255,0,0.28);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(153,255,0,0.42); }
.btn-accent {
  background: var(--grad-brand); color: #06202a;
  box-shadow: 0 6px 22px var(--glow);
}
.btn-accent:hover { transform: translateY(-2px); box-shadow: 0 10px 30px var(--glow); }
.btn-ghost {
  background: transparent; color: var(--text);
  border-color: var(--border-2);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: var(--glow-soft); transform: translateY(-2px); }
.btn-lg { padding: 17px 30px; font-size: 16px; border-radius: var(--radius); }
.btn-sm { padding: 10px 16px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- Cards ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: transform .22s ease, border-color .22s ease, box-shadow .25s ease, background-color .22s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--border-2);
  box-shadow: var(--shadow), 0 0 0 1px var(--glow-soft), 0 0 30px var(--glow-soft);
  background: var(--bg-card-hover);
}

/* ---------- Icon chip ---------- */
.icon-chip {
  width: 46px; height: 46px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--glow-soft); border: 1px solid var(--border);
  color: var(--accent);
}
.icon-chip svg { width: 22px; height: 22px; }

/* ---------- Reveal animation ----------
   Subtle fade-in on load. Elements are visible by default (no opacity:0),
   so screenshots, no-JS and slow-JS always show content. The animation is a
   progressive enhancement that adds a gentle fade for real users. */
.reveal {
  animation: hdReveal 0.35s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes hdReveal {
  from { opacity: 0.001; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Utility ---------- */
.grid { display: grid; gap: 22px; }
.text-center { text-align: center; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--cta); color: var(--cta-text); padding: 10px 18px; border-radius: 8px;
  font-weight: 600; transition: top .2s ease;
}
.skip-link:focus { top: 16px; }