/* =========================================================
   GENERAL STYLING
   ========================================================= */
:root,
[data-md-color-scheme="voltquant"] {
  /* hero gradients */
  --v-green: #52B230;
  --v-cyan:  #00d4ff;
  --v-teal:  #1BA19F;

  /* buttons inside hero */
  --v-btn-bg: #0b1b1f;
  --v-btn-fg: #ffffff;
}

[data-md-color-scheme="voltquant-dark"] {
  --v-btn-bg: #e7f6f3;
  --v-btn-fg: #0b1b1f;
}

/* ---- fonts ---- */
.v-hero h1,
.v-hero p,
.v-header-main h1,
.v-header-main p { color: #ffffff !important; }

.v-actions,
.v-hero button,
.v-hero input { color: #ffffff !important; }

.v-hero {
  position: relative;
  padding: 3.5rem 2rem;
  border-radius: 1.25rem;
  border: 1px solid #ffffff22;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  color: #fff;
  overflow: hidden;
}

[data-md-color-scheme="voltquant"] .v-hero {
  background:
    radial-gradient(1200px 600px at 80% 10%, var(--v-cyan) 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 30%, var(--v-green) 0%, transparent 55%),
    linear-gradient(180deg, #0b1b1f 0%, #122b2f 100%);
}

[data-md-color-scheme="voltquant-dark"] .v-hero {
  background:
    radial-gradient(1200px 600px at 80% 10%, #00d4ff 0%, transparent 60%),
    radial-gradient(900px 500px at 10% 30%, #00f59d 0%, transparent 55%),
    linear-gradient(180deg, #0b2326 0%, #071618 100%);
  border-color: #ffffff14;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Headline + body inside hero */
.v-hero h1 { margin: 0 0 .5rem; font-size: 2.6rem; letter-spacing: .2px; }
.v-hero p  { margin: 0 0 1.25rem; opacity: .95; }

/* Buttons inside hero */
.v-hero .v-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem; border-radius: .75rem;
  background: var(--v-btn-bg); color: var(--v-btn-fg);
  text-decoration: none; border: 1px solid #fff;
}
.v-hero .v-btn.secondary { background: transparent; color: #fff; border-color: #fff; }
.v-hero .v-btn:hover { text-decoration: none; }

/* =========================================================
   HEADER SHELL + FOREGROUND LAYOUT
   ========================================================= */
.v-header {
  position: relative;
  margin: 1rem 1rem;
  padding: 1.25rem 1rem;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(40deg, var(--color-bg1, #0b2326), var(--color-bg2, #071618));
  border: 1px solid #ffffff22;
}

/* light/dark harmonics for header bg */
:root[data-md-color-scheme="voltquant"] .v-header {
  background: linear-gradient(40deg, #0b1b1f, #122b2f);
}
:root[data-md-color-scheme="voltquant-dark"] .v-header {
  background: linear-gradient(40deg, #0b2326, #071618);
  border-color: #ffffff14;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

/* Diagonal clipped corners */
.diagonal-corner-container {
  clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}
.diagonal-corner-button {
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* Foreground layout */
.v-header-inner { position: relative; padding: 0.5rem 1.25rem 3rem; }
.v-header-top   { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.v-actions      { display:flex; align-items:center; gap:.6rem; }
.btn-container  { display:flex; align-items:center; gap:.6rem; }

/* Center block (title/subtitle/search) */
.v-header-main {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 1rem;
  margin-top: 1.25rem;
  text-align: center;
}

/* Branding */
.v-logo {
  height: clamp(20px, 3vw, 32px);
  width: auto;
  display: block;
}
.v-brand { display: inline-flex; align-items: center; gap: .6rem; }
.v-title { visibility: hidden; }

/* Heading + subtitle in header */
.v-hero-heading {
  margin: 0;
  font-weight: 400;
  letter-spacing: .2px;
  line-height: 1.1;
  font-size: clamp(2rem, 4vw, 4.25rem);
}
.v-hero-sub {
  margin: 0;
  opacity: .70;
  max-width: 72ch;
  font-weight: 400;
  line-height: 1.55;
  font-size: clamp(0.95rem, 0.9vw + 0.6rem, 1.125rem);
}

/* =========================================================
   SEARCH (embedded Material search inside hero)
   ========================================================= */
.v-search { width: 100%; max-width: 680px; margin: 0 auto; }

.v-search [data-md-component="search"],
.v-search .md-search {
  width: 100%;
  margin: 0 !important;
  float: none !important;
  display: flex;
  justify-content: center;
}

.v-search .md-search__inner,
.v-search .md-search__form {
  width: 100%;
  max-width: 680px;
  color: #e0f2ef !important;
}

/* Some Material versions add inline max-width on wrapper */
.v-search .md-search__input-wrap {
  width: 100% !important;
  max-width: none !important;
}

/* =========================================================
   BUTTONS + TOGGLE (dark/light scheme switch)
   ========================================================= */
/* Button box */
.v-actions [data-md-component="palette"] .md-header__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 10px;
  line-height: 0;
  border: 1px solid #ffffff33;
  background: #ffffff14;
  color: #fff;
}

/* light scheme */
:root[data-md-color-scheme="voltquant"]
  .v-actions [data-md-component="palette"] .md-header__button {
  color: #0b1b1f;
  border-color: #0b1b1f22;
  background: transparent;
}

.v-actions [data-md-component="palette"] .md-header__button .md-icon,
.v-actions [data-md-component="palette"] .md-header__button .md-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.v-actions [data-md-component="palette"] .md-header__button .md-icon svg:has(use[href$="weather-night"]) {
  transform: scale(1.08);
  transform-origin: 50% 50%;
}

.v-actions [data-md-component="palette"] [hidden] { display: none !important; }

.v-header .v-actions .v-btn { border-color: #fff; color: #fff; }
.v-header .v-actions .v-btn:hover { background: #fff; color: #0b1b1f; border-color: #fff; }

.v-header .v-actions .v-btn.secondary {
  background: #fff; color: #0b1b1f; border-color: #fff;
}
.v-header .v-actions .v-btn.secondary:hover {
  background: transparent; color: #fff; border-color: #fff;
}

/* =========================================================
   ANIMATED BACKGROUND BLOBS (“gooey gradients”)
   ========================================================= */
.v-svg-filter { position: absolute; width: 0; height: 0; }

.v-gradients {
  position: absolute; inset: 0;
  filter: url(#v-goo) blur(40px);
  z-index: 0;
}
.v-gradients .g1, .v-gradients .g2, .v-gradients .g3, .v-gradients .g4 {
  position: absolute; mix-blend-mode: hard-light;
  will-change: transform; transform-style: preserve-3d;
}
.v-gradients .g1 {
  background: radial-gradient(circle closest-side at center, rgba(34,252,85,.8) 0, rgba(34,252,85,0) 100%);
  width: 26rem; height: 26rem; top: -30%; left: -20%;
  animation: moveAcrossDiagonal 10s ease-in-out infinite;
}
.v-gradients .g2 {
  background: radial-gradient(circle closest-side at center, rgba(20,226,220,.8) 0, rgba(20,226,220,0) 100%);
  width: 36rem; height: 36rem; top: 30%; right: -20%;
  animation: moveInArc 15s ease-in-out infinite;
}
.v-gradients .g3 {
  background: radial-gradient(circle closest-side at center, rgba(58,161,27,.8) 0, rgba(58,161,27,0) 100%);
  width: 26rem; height: 26rem; bottom: -60%; left: 10%;
  animation: moveAcrossHorizontal 8s ease-in-out infinite;
}
.v-gradients .g4 {
  background: radial-gradient(circle closest-side at center, rgba(27,161,159,.8) 0, rgba(27,161,159,0) 100%);
  width: 30rem; height: 30rem; top: -20%; right: -20%; opacity: .7;
  animation: moveAcrossDiagonal 7s ease-in-out reverse infinite;
}

/* Animations */
@keyframes moveAcrossHorizontal {
  0% { transform: translateX(-30%) translateY(0); }
  50% { transform: translateX(30%) translateY(10%); }
  100% { transform: translateX(-30%) translateY(0); }
}
@keyframes moveAcrossDiagonal {
  0% { transform: translateX(-30%) translateY(-30%); }
  50% { transform: translateX(15%) translateY(10%); }
  100% { transform: translateX(-30%) translateY(-30%); }
}
@keyframes moveInArc {
  0% { transform: translateX(30%) translateY(-20%) rotate(0deg); }
  50% { transform: translateX(5%) translateY(-65%) rotate(180deg); }
  100% { transform: translateX(30%) translateY(-20%) rotate(360deg); }
}