/* ==========================================================================
   Electi Landing v2 — Main Stylesheet
   Direction: Warm, organic, inviting — "a place for meaningful conversations"
   ========================================================================== */

:root {
  /* Electi palette */
  --el-purple:     #7B2D8E;
  --el-purple-mid: #9B4DBA;
  --el-purple-lt:  #C98ADE;
  --el-teal:       #2BBCC0;
  --el-teal-dk:    #1A8F92;
  --el-teal-lt:    #7EDCDE;
  --el-orange:     #F58220;
  --el-orange-lt:  #FFB366;
  --el-navy:       #1B3A4B;
  --el-cream:      #FFF9F4;

  /* Neutrals */
  --el-gray-50:  #FAFAFA;
  --el-gray-100: #F4F3F6;
  --el-gray-200: #E5E3EA;
  --el-gray-300: #D0CDD8;
  --el-gray-400: #9E99A7;
  --el-gray-500: #716B7A;
  --el-gray-600: #4A4453;
  --el-white:    #FFFFFF;

  /* Typography — overridden dynamically via Customizer */
  --el-font-body:    'Nunito', sans-serif;
  --el-font-display: 'Fraunces', serif;

  /* Spacing & Shape */
  --el-radius:    16px;
  --el-radius-sm: 10px;
  --el-radius-xs: 6px;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: var(--el-font-body);
  color: var(--el-navy);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ==========================================================================
   Background — Animated Mesh Gradient
   ========================================================================== */
.el-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2.5rem 1.25rem;
  position: relative;
  background: var(--el-cream);
  overflow: hidden;
}

/* Mesh gradient layer — soft organic blobs */
.el-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.el-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  will-change: transform;
  animation: blobFloat 20s ease-in-out infinite alternate;
}

.el-bg__blob--1 {
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(circle, var(--el-teal-lt), var(--el-teal) 60%, transparent 70%);
  top: -18%;
  left: -12%;
  animation-duration: 22s;
}

.el-bg__blob--2 {
  width: 50vmax;
  height: 50vmax;
  background: radial-gradient(circle, var(--el-purple-lt), var(--el-purple-mid) 55%, transparent 70%);
  bottom: -20%;
  right: -10%;
  animation-duration: 26s;
  animation-delay: -5s;
}

.el-bg__blob--3 {
  width: 35vmax;
  height: 35vmax;
  background: radial-gradient(circle, var(--el-orange-lt), var(--el-orange) 50%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-duration: 18s;
  animation-delay: -10s;
  opacity: .3;
}

@keyframes blobFloat {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(3%, -4%) scale(1.05); }
  66%  { transform: translate(-2%, 3%) scale(.97); }
  100% { transform: translate(1%, -1%) scale(1.02); }
}

/* Grain overlay for texture */
.el-bg__grain {
  position: absolute;
  inset: 0;
  opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.06'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Subtle geometric pattern */
.el-bg__pattern {
  position: absolute;
  inset: 0;
  opacity: .03;
  background-image:
    radial-gradient(circle at 25% 25%, var(--el-navy) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, var(--el-navy) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* ==========================================================================
   Card
   ========================================================================== */
.el-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 24px;
  padding: 3rem 2.5rem 2.5rem;
  box-shadow:
    0 24px 80px rgba(123, 45, 142, .10),
    0 8px 32px rgba(27, 58, 75, .06),
    0 1px 3px rgba(0, 0, 0, .04);
  animation: cardReveal .7s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes cardReveal {
  from { opacity: 0; transform: translateY(30px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Decorative top accent line */
.el-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 2.5rem;
  right: 2.5rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--el-teal), var(--el-purple-mid), var(--el-orange));
}

/* ==========================================================================
   Header
   ========================================================================== */
.el-header {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--el-gray-200);
}

.el-logo {
  max-height: 76px;
  width: auto;
  margin-bottom: 1.25rem;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.el-logo:hover { transform: scale(1.06) rotate(-1deg); }

.el-title {
  font-family: var(--el-font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--el-gray-600);
  line-height: 1.25;
  margin-bottom: .55rem;
  letter-spacing: -.02em;
  font-optical-sizing: auto;
}

.el-subtitle {
  font-size: .92rem;
  font-weight: 600;
  color: var(--el-teal-dk);
  letter-spacing: .01em;
  opacity: .9;
}

/* ==========================================================================
   Form
   ========================================================================== */
.el-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* --- Field group --- */
.el-field {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  animation: fieldIn .5s cubic-bezier(.16, 1, .3, 1) both;
}
.el-field:nth-child(1) { animation-delay: .08s; }
.el-field:nth-child(2) { animation-delay: .12s; }
.el-field:nth-child(3) { animation-delay: .16s; }
.el-field:nth-child(4) { animation-delay: .20s; }
.el-field:nth-child(5) { animation-delay: .24s; }
.el-field:nth-child(6) { animation-delay: .28s; }
.el-field:nth-child(7) { animation-delay: .32s; }
.el-field:nth-child(8) { animation-delay: .36s; }

@keyframes fieldIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.el-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--el-gray-500);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* --- Inputs --- */
.el-input,
.el-select,
.el-textarea {
  width: 100%;
  padding: .78rem 1rem;
  font-family: var(--el-font-body);
  font-size: .9rem;
  color: var(--el-navy);
  background: var(--el-white);
  border: 1.5px solid var(--el-gray-200);
  border-radius: var(--el-radius-sm);
  outline: none;
  transition: all .2s ease;
}
.el-input::placeholder,
.el-textarea::placeholder { color: var(--el-gray-400); font-weight: 400; }

.el-input:focus,
.el-select:focus,
.el-textarea:focus {
  border-color: var(--el-teal);
  box-shadow: 0 0 0 3.5px rgba(43, 188, 192, .10);
  background: var(--el-white);
}

.el-textarea {
  resize: vertical;
  min-height: 80px;
}

/* --- Select --- */
.el-select {
  appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239E99A7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 16px;
}

/* --- Radio & Checkbox groups --- */
.el-options {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding-top: .15rem;
}
.el-option-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  font-size: .88rem;
  color: var(--el-gray-600);
  padding: .55rem .75rem;
  border-radius: var(--el-radius-xs);
  border: 1.5px solid var(--el-gray-200);
  background: var(--el-white);
  transition: all .15s ease;
}
.el-option-label:hover {
  border-color: var(--el-teal-lt);
  background: rgba(43, 188, 192, .03);
}
.el-option-label input[type="radio"],
.el-option-label input[type="checkbox"] {
  accent-color: var(--el-teal);
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.el-option-label input:checked + span {
  color: var(--el-navy);
  font-weight: 600;
}
.el-option-label:has(input:checked) {
  border-color: var(--el-teal);
  background: rgba(43, 188, 192, .06);
}

/* --- Password toggle --- */
.el-pw-wrap { position: relative; }
.el-pw-wrap .el-input { padding-right: 3rem; }
.el-pw-toggle {
  position: absolute;
  right: .7rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--el-gray-400);
  padding: 4px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  transition: all .2s;
}
.el-pw-toggle:hover { color: var(--el-navy); background: var(--el-gray-100); }
.el-pw-toggle svg { width: 18px; height: 18px; }

/* Password strength meter */
.el-pw-strength {
  margin-top: 4px;
}
.el-pw-bar {
  height: 3px;
  background: var(--el-gray-200);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
}
.el-pw-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .3s ease, background .3s ease;
}
.el-pw-label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  transition: color .3s ease;
}

/* ==========================================================================
   Submit Button
   ========================================================================== */
.el-submit {
  margin-top: .6rem;
  width: 100%;
  padding: .9rem 1.5rem;
  font-family: var(--el-font-body);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--el-white);
  background: linear-gradient(135deg, var(--el-purple) 0%, var(--el-purple-mid) 100%);
  border: none;
  border-radius: var(--el-radius-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all .2s ease;
  box-shadow: 0 4px 16px rgba(123, 45, 142, .25);
}

/* Shimmer effect */
.el-submit::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: left .5s ease;
}
.el-submit:hover::after { left: 100%; }

.el-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(123, 45, 142, .35);
}
.el-submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(123, 45, 142, .2);
}
.el-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 4px 16px rgba(123, 45, 142, .15) !important;
}

/* Spinner */
.el-submit .el-spinner {
  display: none;
  width: 20px; height: 20px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: var(--el-white);
  border-radius: 50%;
  animation: spin .55s linear infinite;
}
.el-submit.is-loading .el-btn-text { opacity: 0; }
.el-submit.is-loading .el-spinner {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  margin: -10px 0 0 -10px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Feedback Messages
   ========================================================================== */
.el-msg {
  text-align: center;
  padding: 1rem 1.15rem;
  border-radius: var(--el-radius-sm);
  font-size: .88rem;
  font-weight: 600;
  margin-top: .5rem;
  display: none;
}
.el-msg.is-success {
  display: block;
  background: linear-gradient(135deg, rgba(43, 188, 192, .08), rgba(43, 188, 192, .04));
  color: var(--el-teal-dk);
  border: 1px solid rgba(43, 188, 192, .2);
  animation: msgIn .4s ease;
}
.el-msg.is-error {
  display: block;
  background: linear-gradient(135deg, rgba(220, 60, 60, .06), rgba(220, 60, 60, .03));
  color: #B83030;
  border: 1px solid rgba(220, 60, 60, .15);
  animation: msgIn .4s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Validation */
.el-input.is-invalid,
.el-select.is-invalid,
.el-textarea.is-invalid {
  border-color: #E05050;
  box-shadow: 0 0 0 3px rgba(224, 80, 80, .08);
}
.el-field-error {
  font-size: .73rem;
  font-weight: 600;
  color: #C83030;
  min-height: 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.el-footer {
  text-align: center;
  margin-top: 1.75rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--el-gray-200);
  font-size: .73rem;
  color: var(--el-gray-400);
  letter-spacing: .01em;
}
.el-footer a {
  color: var(--el-teal);
  text-decoration: none;
  font-weight: 700;
}
.el-footer a:hover { text-decoration: underline; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 540px) {
  .el-card {
    padding: 2.25rem 1.75rem 2rem;
    border-radius: 20px;
  }
  .el-card::before { left: 1.75rem; right: 1.75rem; }
  .el-title { font-size: 1.35rem; }
  .el-bg__blob { filter: blur(60px); }
}

@media (max-width: 380px) {
  .el-card { padding: 1.75rem 1.25rem 1.5rem; }
  .el-card::before { left: 1.25rem; right: 1.25rem; }
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .el-bg__blob { animation: none !important; }
  .el-card, .el-field { animation: none !important; }
  .el-submit::after { transition: none; }
}