/* ---------------------------------------------------------------
   electricrm-site — Option A palette, dark mode default.
   All palette tokens live in :root so they can be tweaked centrally.
   --------------------------------------------------------------- */

:root {
  /* palette (Option A, as specified) */
  --color-primary:     #5B6CFF;   /* indigo, primary accent + CTAs */
  --color-primary-hov: #7280FF;   /* hover lift for buttons */
  --color-accent:      #A855F7;   /* violet, used in blob gradient */
  --color-bg:          #0B0D12;   /* near-black */
  --color-text:        #F4F5F8;   /* body text */
  --color-muted:       #6B7280;   /* spec'd muted — used for decorative only */

  /* AA-tuned variants derived from the spec palette
     (#6B7280 is ~4.27:1 on the bg — fails AA normal text.
      We brighten for small body copy to clear AA comfortably.) */
  --color-muted-body:  #9AA1AC;   /* ~7.7:1 on bg — AA normal */
  --color-surface:     #171B24;   /* card bg */
  --color-border:      #242A36;   /* 1px outlines */
  --color-bg-soft:     #12151C;   /* input bg */

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif;

  /* type scale (rem) */
  --size-xs:  0.875rem;
  --size-sm:  1rem;
  --size-md:  1.125rem;
  --size-lg:  1.5rem;
  --size-xl:  2rem;
  --size-2xl: 2.5rem;
  --size-3xl: 3.5rem;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --container-max: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow-x: hidden; }

img, svg { display: block; max-width: 100%; }

a {
  color: var(--color-text);
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

h1, h2, h3 {
  margin: 0 0 var(--space-2);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 600;
}

p { margin: 0 0 var(--space-2); }

ul { margin: 0; padding: 0; list-style: none; }

/* skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-sm);
  z-index: 100;
  font-weight: 600;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

/* sticky nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(11, 13, 18, 0.78);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid transparent;
}
.nav {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-text);
}
.nav__mark { color: var(--color-primary); display: inline-flex; }
.nav__name { font-size: var(--size-md); }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--size-sm);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, transform .08s ease, border-color .15s ease;
  line-height: 1;
  white-space: nowrap;
}
.btn--sm { padding: 0.5rem 0.85rem; font-size: var(--size-xs); }
.btn--lg { padding: 0.95rem 1.4rem; font-size: var(--size-md); }
.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-hov);
  border-color: var(--color-primary-hov);
}
.btn--primary:active { transform: translateY(1px); }

/* hero */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  padding: var(--space-6) var(--space-2) var(--space-7);
  overflow: hidden;
  isolation: isolate;
}
.hero__blob {
  position: absolute;
  top: -10%;
  right: -20%;
  width: 85vw;
  max-width: 900px;
  aspect-ratio: 1 / 1;
  z-index: -1;
  pointer-events: none;
  animation: blob-rotate 12s linear infinite;
  opacity: 0.95;
  will-change: transform;
}
.hero__blob svg { width: 100%; height: 100%; }

@keyframes blob-rotate {
  from { transform: rotate(0deg)   scale(1); }
  50%  { transform: rotate(180deg) scale(1.05); }
  to   { transform: rotate(360deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__blob { animation: none; }
}

.hero__content {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  padding: 0 var(--space-1);
}
.hero__headline {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  margin-bottom: var(--space-3);
}
.hero__subhead {
  font-size: var(--size-md);
  color: var(--color-muted-body);
  max-width: 36rem;
  margin-bottom: var(--space-4);
}
.hero__footnote {
  margin-top: var(--space-3);
  color: var(--color-muted-body);
  font-size: var(--size-xs);
}

/* generic section */
main section { padding: var(--space-6) var(--space-2); }

.section-title {
  font-size: var(--size-xl);
  max-width: var(--container-max);
  margin: 0 auto var(--space-4);
  padding: 0 var(--space-1);
}

/* features */
.features__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-1);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.feature {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
}
.feature__icon {
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.feature__title { font-size: var(--size-md); margin-bottom: var(--space-1); }
.feature__body  { color: var(--color-muted-body); margin: 0; }

/* why */
.why__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-1);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.why__heading { font-size: var(--size-md); margin-bottom: var(--space-1); }
.why__body    { color: var(--color-muted-body); margin: 0; }

/* pricing */
.pricing__note {
  max-width: var(--container-max);
  margin: 0 auto var(--space-3);
  padding: 0 var(--space-1);
  color: var(--color-muted-body);
  font-size: var(--size-xs);
}
.pricing__grid {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-1);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}
.tier {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.tier--featured {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px rgba(91, 108, 255, 0.35) inset;
}
.tier__name   { font-size: var(--size-md); margin-bottom: var(--space-1); }
.tier__price  { margin-bottom: var(--space-1); }
.tier__amount { font-size: var(--size-xl); font-weight: 600; letter-spacing: -0.02em; }
.tier__per    { color: var(--color-muted-body); margin-left: 0.25rem; font-size: var(--size-sm); }
.tier__meta   { color: var(--color-muted-body); margin-bottom: var(--space-2); font-size: var(--size-xs); }
.tier__list li {
  padding: 0.35rem 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted-body);
  font-size: var(--size-sm);
}
.tier__list li:first-child { border-top: 0; }

/* CTA */
.cta {
  background: linear-gradient(180deg, rgba(91, 108, 255, 0.06) 0%, rgba(11, 13, 18, 0) 100%);
}
.cta__lead {
  max-width: var(--container-max);
  margin: 0 auto var(--space-3);
  padding: 0 var(--space-1);
  color: var(--color-muted-body);
  font-size: var(--size-md);
}
.cta__form {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-1);
}
.cta__label {
  display: block;
  font-size: var(--size-xs);
  color: var(--color-muted-body);
  margin-bottom: var(--space-1);
}
.cta__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 34rem;
}
.cta__input {
  flex: 1;
  padding: 0.85rem 1rem;
  background: var(--color-bg-soft);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--size-md);
  font-family: inherit;
}
.cta__input::placeholder { color: var(--color-muted-body); opacity: 0.7; }
.cta__input:focus-visible { border-color: var(--color-primary); outline-offset: 1px; }

/* honeypot — offscreen, not hidden (so the "hidden" attribute + CSS both apply) */
.cta__hp { position: absolute; left: -9999px; }

.cta__status {
  margin-top: var(--space-2);
  color: var(--color-muted-body);
  font-size: var(--size-xs);
  min-height: 1em;
}
.cta__status[data-state="ok"]  { color: var(--color-primary); }
.cta__status[data-state="err"] { color: #F87171; }

/* footer */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-2);
  color: var(--color-muted-body);
  font-size: var(--size-xs);
}
.site-footer > * {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-1);
}
.site-footer__tag { margin-bottom: var(--space-1); }
.footer__links {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.footer__links a { color: var(--color-muted-body); }
.footer__links a:hover { color: var(--color-text); }

/* ---------------- breakpoints ---------------- */

@media (min-width: 640px) {
  .cta__row        { flex-direction: row; }
  .features__grid  { grid-template-columns: repeat(2, 1fr); }
  .pricing__grid   { grid-template-columns: repeat(3, 1fr); }
  .why__grid       { grid-template-columns: repeat(2, 1fr); column-gap: var(--space-5); }
}

@media (min-width: 1024px) {
  main section     { padding: var(--space-7) var(--space-2); }
  .features__grid  { grid-template-columns: repeat(4, 1fr); }
}