/* ============================================================
   Hypervolt Blog Theme — main.css  (PREMIUM v2)
   Rebuilt to the updated Hypervolt Design System — the real
   hypervolt.com aesthetic: premium, Apple-grade, purple-accented.

   - System / SF Pro font stack.
   - Purple (#962DFF) is the PRIMARY accent; green = trust/success.
   - Pill buttons with a purple gradient fill + glow; glass secondaries.
   - Deep ink canvas (#0B0C10) with soft radial mesh glows on dark;
     clean premium white on light. Auto via prefers-color-scheme.
   - Frosted-glass sticky nav.
   - Signature magenta→purple→blue gradient (5-stop) for brand moments.
   ============================================================ */

:root {
  /* Brand primitives */
  --hv-ink:        rgb(22, 23, 28);
  --hv-black:      #000;
  --hv-paper:      #fff;
  --hv-magenta:    #EB01FF;
  --hv-purple:     #962DFF;
  --hv-blue:       #0356FF;
  --hv-green:      #42B982;

  --gradient:      linear-gradient(135deg, #EB01FF 0%, #C511FF 22%, #962DFF 47%, #5A45FF 72%, #0356FF 100%);
  --gradient-h:    linear-gradient(90deg,  #EB01FF 0%, #C511FF 22%, #962DFF 47%, #5A45FF 72%, #0356FF 100%);

  /* Purple button + link system (from the design system component set) */
  --btn-purple:      linear-gradient(180deg, #A343FF, #8A22EE);
  --btn-purple-fg:   #fff;
  --link-purple:     #8A22EE;
  --link-purple-h:   #6E17C7;
  --glow-purple:     0 10px 26px rgba(150, 45, 255, 0.40);
  --glow-purple-h:   0 16px 40px rgba(150, 45, 255, 0.52);

  /* ---- LIGHT semantic (default) ---- */
  --bg:          #ffffff;
  --bg-2:        #F6F6F8;
  --surface:     #ffffff;
  --surface-2:   #F6F6F8;
  --fg-1:        #16171C;
  --fg-2:        #4D5157;
  --fg-3:        #75787D;
  --fg-muted:    #9A9CA1;
  --hairline:    rgba(0, 0, 0, 0.09);
  --hairline-2:  rgba(0, 0, 0, 0.06);
  --nav-bg:      rgba(255, 255, 255, 0.72);
  --nav-border:  rgba(0, 0, 0, 0.08);
  --glass:       rgba(0, 0, 0, 0.04);
  --glass-border: rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05), 0 14px 34px rgba(0, 0, 0, 0.08);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.08), 0 26px 60px rgba(0, 0, 0, 0.14);
  --page-glow:   none;

  /* Type */
  --font-sans:    -apple-system, "SF Pro Display", "SF Pro Text", "Inter", "Roboto", system-ui, sans-serif;
  --font-mono:    "SF Mono", "Monaco", ui-monospace, monospace;
  --tracking-tight: -0.01em;

  /* Scale */
  --fs-hero: clamp(40px, 6vw, 64px);
  --fs-h1:   clamp(32px, 5vw, 48px);
  --fs-h2:   32px;
  --fs-h3:   24px;
  --fs-h4:   20px;
  --fs-lead: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-xs:   12px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:80px; --sp-10:112px;

  --radius-pill: 980px;
  --radius-lg:   20px;
  --radius-md:   14px;

  --container: 1200px;
  --container-narrow: 720px;
  --gutter: 40px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 160ms;
  --dur: 240ms;
}

/* ---- DARK premium (the hero look) ---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #0B0C10;
    --bg-2:        #16171C;
    --surface:     #16171C;
    --surface-2:   #1B1C22;
    --fg-1:        #ffffff;
    --fg-2:        rgba(255, 255, 255, 0.72);
    --fg-3:        rgba(255, 255, 255, 0.52);
    --fg-muted:    rgba(255, 255, 255, 0.40);
    --hairline:    rgba(255, 255, 255, 0.09);
    --hairline-2:  rgba(255, 255, 255, 0.06);
    --nav-bg:      rgba(11, 12, 16, 0.60);
    --nav-border:  rgba(255, 255, 255, 0.07);
    --glass:       rgba(255, 255, 255, 0.07);
    --glass-border: rgba(255, 255, 255, 0.14);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.40), 0 24px 60px rgba(0, 0, 0, 0.45);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.45), 0 30px 70px rgba(0, 0, 0, 0.55);
    --link-purple:   #B57BFF;
    --link-purple-h: #C99BFF;
    /* Soft brand mesh behind the whole page */
    --page-glow:
      radial-gradient(50% 60% at 82% -4%, rgba(150, 45, 255, 0.20), transparent 60%),
      radial-gradient(45% 55% at 6% 2%, rgba(235, 1, 255, 0.10), transparent 58%),
      radial-gradient(60% 70% at 60% 108%, rgba(3, 86, 255, 0.14), transparent 62%);
  }
}

/* ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--fg-1);
  background-color: var(--bg);
  background-image: var(--page-glow);
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--sp-4);
}
p { margin: 0 0 var(--sp-4); }
::selection { background: var(--hv-purple); color: #fff; }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--hv-green);
  outline-offset: 2px;
}

.container-fluid, .hv-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.row-fluid-wrapper, .row-fluid { width: 100%; }
.body-wrapper { min-height: 40vh; }

.hv-gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------
   BUTTONS — pill, purple gradient primary, glass secondary
   ------------------------------------------------------------ */
.hv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 590;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.hv-btn--sm { padding: 9px 18px; font-size: 14px; }

.hv-btn--primary {
  color: var(--btn-purple-fg);
  background: var(--btn-purple);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 1px 2px rgba(0, 0, 0, 0.30), var(--glow-purple);
}
.hv-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 2px 4px rgba(0, 0, 0, 0.32), var(--glow-purple-h);
}

.hv-btn--secondary {
  color: var(--fg-1);
  background: var(--glass);
  border-color: var(--glass-border);
}
.hv-btn--secondary:hover { transform: translateY(-1px); background: var(--glass); border-color: var(--fg-3); }

.hv-btn--link {
  border: none;
  padding: 12px 6px;
  color: var(--link-purple);
  font-weight: 600;
}
.hv-btn--link:hover { color: var(--link-purple-h); }

/* ------------------------------------------------------------
   HEADER — frosted glass, sticky
   ------------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--nav-border);
}
.header-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
.header-logo { display: inline-flex; align-items: center; }
.header-logo .logo-image { height: 17px; width: auto; }

/* Logo light/dark swap */
.dark-mode-logo { display: none; }
@media (prefers-color-scheme: dark) {
  .header .light-mode-logo { display: none; }
  .header .dark-mode-logo  { display: inline-block; }
}

.header-nav { display: flex; align-items: center; }
.nav-menu {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--sp-5);
}
.nav-item { display: flex; align-items: center; }
.nav-link {
  font-size: 13.5px;
  color: var(--fg-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav-link:hover { color: var(--fg-1); }

.mobile-menu-button {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 0; background: transparent; border: none; cursor: pointer;
}
.hamburger-line { display: block; width: 22px; height: 2px; background: var(--fg-1); }

/* ------------------------------------------------------------
   FOOTER — deep ink, gradient bar
   ------------------------------------------------------------ */
.footer {
  position: relative;
  background: #0B0C10;
  color: #fff;
  padding: var(--sp-9) var(--gutter) var(--sp-7);
  margin-top: var(--sp-10);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.footer-gradient-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-h); }
.footer-container { max-width: var(--container); margin: 0 auto; }
.footer-top {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-8);
  padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand { max-width: 320px; }
.footer-logo-container { margin-bottom: var(--sp-5); }
.footer-logo { height: 18px; width: auto; }
.footer .light-mode-logo { display: none; }
.footer .dark-mode-logo { display: inline-block; }
.footer-tagline { font-size: var(--fs-small); line-height: 1.6; color: rgba(255, 255, 255, 0.62); margin: 0 0 var(--sp-5); }
.footer-trustpilot { margin-bottom: var(--sp-5); }
.footer-social-links { display: flex; gap: var(--sp-3); }
.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(255, 255, 255, 0.12);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.footer-social-link:hover { color: #fff; border-color: rgba(150, 45, 255, 0.6); background: rgba(150, 45, 255, 0.12); }
.footer-menu-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }
.footer-menu-title {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42); margin: 0 0 var(--sp-5);
}
.footer-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-menu-link { font-size: var(--fs-small); color: rgba(255, 255, 255, 0.78); transition: color var(--dur-fast) var(--ease); }
.footer-menu-link:hover { color: #fff; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-6); margin-top: var(--sp-6); border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-copyright { margin: 0; font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.45); }
.footer-legal-links { display: flex; gap: var(--sp-5); }
.footer-legal-link { font-size: var(--fs-xs); color: rgba(255, 255, 255, 0.45); transition: color var(--dur-fast) var(--ease); }
.footer-legal-link:hover { color: #fff; }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  :root { --gutter: 22px; }
  .mobile-menu-button { display: flex; }
  .header-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--hairline);
    padding: var(--sp-4) var(--gutter); display: none;
  }
  .header-nav.mobile-open { display: block; }
  .nav-menu { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-7); }
}
@media (max-width: 560px) {
  .footer-menu-wrapper { grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}