/* Light theme: set brand header background to #D4FFFB (do not change .logo) */
  .brand { background: #D4FFFB; }
html.theme-light .brand { background: #D4FFFB; }
/* Minimal, modern landing page styles */
/* Two-color palette: #584AA4 (purple) and #FFFFFF (white) */
:root {
  /* Night (default) */
  --bg: #584AA4;        /* background */
  --text: #ECEBFF;      /* primary text (softer than pure white) */
  --muted: rgba(255,255,255,0.85);
  --panel-bg: rgba(255,255,255,0.10);
  --panel-brd: rgba(255,255,255,0.25);
  --shadow: rgba(0,0,0,0.25);
  --ring: rgba(255,255,255,0.25);
  /* Softer background for the logo container to reduce white glow */
  --logo-bg: rgba(255,255,255,0.06);
  /* Gradient used for primary buttons (teal → violet) */
  --btn-gradient: linear-gradient(180deg, #4BE4C0 0%, #75EEE2 15%, #8980F3 100%);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  background: radial-gradient(1200px 800px at 10% 10%, rgba(255,255,255,0.10), transparent 60%),
              radial-gradient(1000px 700px at 90% 20%, rgba(255,255,255,0.08), transparent 60%),
              var(--bg);
  color: var(--text);
  line-height: 1.6;
}

.wrapper {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto;
  align-items: center;
  justify-items: center;
  padding: 4rem 1.25rem;
}

.brand {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1rem;
  justify-items: center;
  max-width: 900px;
  width: 100%;
  background: var(--panel-bg);
  border: 1px solid var(--panel-brd);
  border-radius: 4px;
  padding: 2.25rem 2rem;
  backdrop-filter: blur(8px);
  text-align: center;
}

/* Floating theme toggle removed in favor of CTA switcher */
.theme-toggle { display: none; }

.logo {
  display: block;
  width: 215px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
}
.brand .logo { margin-bottom: 0.5rem; }
.logo img {
  display: block;
  width: 215px;
  height: auto;
}

.brand-text h1 {
  margin: 0 0 0.5rem 0;
  font-size: clamp(1.75rem, 3.5vw + 1rem, 3rem);
  line-height: 1.15;
}
.brand-text { max-width: 820px; }

.tagline {
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, 1vw + 0.75rem, 1.25rem);
}

.cta {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Toggle Switch UI */
.switcher { display: inline-flex; align-items: center; gap: 0.25rem; position: fixed; top: 8px; right: 8px; z-index: 10; }
.switcher-label { display: none; }
.switcher-icon { font-size: 1.1rem; line-height: 1; transition: opacity 0.2s ease; }
.switcher.is-light .sun { opacity: 1; text-shadow: 0 0 8px #75EEE2; }
.switcher.is-light .moon { opacity: 0.4; font-size: 0.825rem; }
.switcher.is-dark .sun { opacity: 0.4; font-size: 0.825rem; }
.switcher.is-dark .moon { opacity: 1; text-shadow: 0 0 8px #75EEE2; }
.switch { position: relative; display: inline-block; width: 28px; height: 16px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: 999px; transition: background 0.2s ease; }
/* Default (dark) unchecked track */
.slider { background: var(--btn-gradient); }
.slider:before { content: ""; position: absolute; height: 12px; width: 12px; left: 2px; top: 2px; background: #FFFFFF; border-radius: 50%; transition: transform 0.2s ease; }
.switch input:checked + .slider { background: #43387d; }
.switch input:checked + .slider:before { transform: translateX(12px); }
.switch input:focus-visible + .slider { outline: 2px solid #75EEE2; outline-offset: 2px; }

/* Light theme overrides for unchecked track */
@media (prefers-color-scheme: light) {
  .slider { background: var(--btn-gradient); }
  .switch input:checked + .slider { background: #43387d; }
}
html.theme-light .slider { background: var(--btn-gradient); }
html.theme-light .switch input:checked + .slider { background: #43387d; }

.button {
  --btn-bg: rgba(255,255,255,0.10);
  --btn-brd: rgba(255,255,255,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.1rem;
  border-radius: 12px;
  color: #FFFFFF;
  text-decoration: none;
  border: 0;
  background: var(--btn-gradient);
  transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-shadow: 0 0 1px rgba(0,0,0,0.08);
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }

.button.primary {
  background: var(--btn-gradient);
  border: 0;
  color: #FFFFFF;
  text-shadow: 0 0 1px rgba(0,0,0,0.08);
}

.button.ghost { opacity: 1; }

.footer {
  margin-top: 3rem;
  color: var(--muted);
}

@media (prefers-color-scheme: light) {
  :root {
    /* Day */
    --bg: #FFFFFF;
    --text: #584AA4;
    --muted: rgba(88,74,164,0.85);
    --panel-bg: rgba(88,74,164,0.06);
    --panel-brd: rgba(88,74,164,0.20);
    --shadow: rgba(2,6,23,0.06);
    --ring: rgba(88,74,164,0.25);
    --btn-gradient: linear-gradient(180deg, #4BE4C0 0%, #75EEE2 15%, #8980F3 100%);
  }
  body {
    background: #FFFFFF;
  }
  /* Light theme: set brand header background to #D4FFFB (do not change .logo) */
  .brand { background: #D4FFFB; }
  .button {
    width: 246px;
    height: 41px;
    background: linear-gradient(360deg, #4BE4C0 -89.47%, #75EEE2 -55.58%, #8980F3 130.26%), #C4C4C4;
    border-radius: 4px;
    color: #FFFFFF;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0.05em;
    text-shadow: none;
    --btn-bg: rgba(88,74,164,0.06);
    --btn-brd: rgba(88,74,164,0.30);
    border: 0;
  }
  .button.primary {
    background: linear-gradient(360deg, #4BE4C0 -89.47%, #75EEE2 -55.58%, #8980F3 130.26%), #C4C4C4;
    border: 0;
    color: #FFFFFF;
    text-shadow: none;
  }
}

/* Dark theme button styling to match light theme */
@media (prefers-color-scheme: dark) {
  .button {
    width: 246px;
    height: 41px;
    background: linear-gradient(360deg, #4BE4C0 -89.47%, #75EEE2 -55.58%, #8980F3 130.26%), #C4C4C4;
    border-radius: 4px;
    color: #FFFFFF;
    font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
    font-size: 16px;
    line-height: 110%;
    letter-spacing: 0.05em;
    text-shadow: none;
    --btn-bg: rgba(255,255,255,0.10);
    --btn-brd: rgba(255,255,255,0.35);
    border: 0;
  }
  .button.primary {
    background: linear-gradient(360deg, #4BE4C0 -89.47%, #75EEE2 -55.58%, #8980F3 130.26%), #C4C4C4;
    border: 0;
    color: #FFFFFF;
    text-shadow: none;
  }
}

/* Explicit theme override via data-theme attribute */
html.theme-dark .button {
  width: 246px;
  height: 41px;
  background: linear-gradient(360deg, #4BE4C0 -89.47%, #75EEE2 -55.58%, #8980F3 130.26%), #C4C4C4;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  font-size: 16px;
  line-height: 110%;
  letter-spacing: 0.05em;
  text-shadow: none;
}
html.theme-dark .button.primary {
  color: #FFFFFF;
  text-shadow: none;
}
html.theme-light {
  --bg: #FFFFFF;
  --text: #584AA4;
  --muted: rgba(88,74,164,0.85);
  --panel-bg: rgba(88,74,164,0.06);
  --panel-brd: rgba(88,74,164,0.20);
  --shadow: rgba(2,6,23,0.06);
  --ring: rgba(88,74,164,0.25);
  --logo-bg: var(--panel-bg);
  --btn-gradient: linear-gradient(180deg, #4BE4C0 0%, #75EEE2 15%, #8980F3 100%);
}
/* Explicit light override styles */
html.theme-light .brand { background: #D4FFFB; }
html.theme-light .button {
  width: 246px;
  height: 41px;
  background: linear-gradient(360deg, #4BE4C0 -89.47%, #75EEE2 -55.58%, #8980F3 130.26%), #C4C4C4;
  border-radius: 4px;
  color: #FFFFFF;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', sans-serif;
  font-size: 16px;
  line-height: 110%;
  letter-spacing: 0.05em;
  text-shadow: none;
}
html.theme-light .button.primary {
  color: #FFFFFF;
  text-shadow: none;
}

/* Ensure body background reflects explicit theme too */
@media (prefers-color-scheme: dark) {
  html.theme-light body { background: #FFFFFF; }
}
@media (prefers-color-scheme: light) {
  html.theme-dark body { background: radial-gradient(1200px 800px at 10% 10%, rgba(255,255,255,0.10), transparent 60%),
                                   radial-gradient(1000px 700px at 90% 20%, rgba(255,255,255,0.08), transparent 60%),
                                   var(--bg); }
}