:root {
  --bg: #08080d;
  --bg-2: #0f0f17;
  --bg-3: #14141d;
  --fg: #e8e8f0;
  --fg-dim: #a0a0b0;
  --fg-muted: #6b6b7c;
  --accent: #7c3aed;
  --accent-2: #06b6d4;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  /* Per-theme tint used for hover/focus surfaces. Defined as a
     variable so a light-mode override flips it to a black tint
     without rewriting every callsite. */
  --tint: rgba(255, 255, 255, 0.05);
  --tint-strong: rgba(255, 255, 255, 0.10);
  --max: 1140px;
}

:root[data-theme="light"] {
  /* Light palette — same hue family as the dark theme so the
     accent purple/cyan keep their identity. The bg is a warm
     off-white to dodge eye strain; fg drops to near-black. */
  --bg: #f7f7fb;
  --bg-2: #ffffff;
  --bg-3: #ececf2;
  --fg: #14141d;
  --fg-dim: #4d4d63;
  --fg-muted: #8888a0;
  --border: rgba(0, 0, 0, 0.10);
  --border-strong: rgba(0, 0, 0, 0.18);
  --tint: rgba(0, 0, 0, 0.05);
  --tint-strong: rgba(0, 0, 0, 0.08);
  color-scheme: light;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

.eyebrow {
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--fg-dim);
  font-weight: 600;
  margin-bottom: 1.2rem;
}
.eyebrow.centered { text-align: center; }
.centered { text-align: center; }

/* ============== HERO ============== */

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(124, 58, 237, 0.32), transparent 60%),
    radial-gradient(700px 400px at -10% 30%, rgba(6, 182, 212, 0.22), transparent 60%),
    var(--bg);
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 75%);
}

.nav {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 4vw;
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 800;
  letter-spacing: 0.18em;
  font-size: 0.95rem;
}

.cta-small {
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 500;
  transition: background 0.2s, border-color 0.2s;
}
.cta-small:hover { background: var(--tint); border-color: var(--border-strong); }

/* ============== NAV ACTIONS / THEME TOGGLE ============== */

.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
.theme-toggle:hover {
  background: var(--tint);
  border-color: var(--border-strong);
}
.theme-toggle:active { transform: scale(0.95); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-toggle svg { width: 16px; height: 16px; display: block; }
/* Show only the icon for the *next* mode the user can switch
   to: in dark we paint the sun (clicking goes to light); in
   light we paint the moon (clicking goes back to dark). */
.theme-toggle .theme-icon-sun { display: none; }
.theme-toggle .theme-icon-moon { display: block; }
[data-theme="light"] .theme-toggle .theme-icon-sun { display: block; }
[data-theme="light"] .theme-toggle .theme-icon-moon { display: none; }

/* ============== I18N (visibility swap by html.lang) ============== */
/*
 * Every translatable string is rendered twice — once inside a
 * <span data-lang="es"> and once inside a <span data-lang="en">.
 * The active language on <html> hides the inactive sibling so
 * the page reads in exactly one language at a time. The boot
 * script in <head> sets html.lang before first paint, so there
 * is no flash of the wrong language.
 */
html[lang="es"] [data-lang="en"],
html[lang="en"] [data-lang="es"] { display: none; }

/* ============== LANG SWITCH ============== */

.lang-switch {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  background: transparent;
}
.lang-opt {
  background: transparent;
  border: none;
  color: var(--fg-dim);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.3rem 0.65rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.lang-opt:hover { background: var(--tint); color: var(--fg); }
.lang-opt[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}
.lang-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.hero-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 4vw 5rem;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

.hero-content h1 {
  font-size: clamp(2.7rem, 7.5vw, 6.2rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 1.6rem;
}

.gradient {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  color: var(--fg-dim);
  max-width: 620px;
  margin-bottom: 2.6rem;
}

.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ============== BUTTONS ============== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.95rem 1.6rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s, border-color 0.2s;
}
.btn-primary {
  background: linear-gradient(120deg, var(--accent) 0%, var(--accent-2) 100%);
  color: white;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -12px rgba(124, 58, 237, 0.6);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.btn-secondary {
  background: rgba(255, 255, 255, 0.02);
  color: var(--fg);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.05); }

/* ============== SECTIONS ============== */

section {
  padding: 7rem 4vw;
  max-width: var(--max);
  margin: 0 auto;
}
section h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  margin-bottom: 1.2rem;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.section-sub {
  color: var(--fg-dim);
  margin: 0 auto 3rem;
  max-width: 600px;
  font-size: 1.05rem;
}

/* ============== FEATURES ============== */

.features { border-top: 1px solid var(--border); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  margin-top: 3.5rem;
}
@media (max-width: 540px) {
  .feature-grid { grid-template-columns: 1fr; }
}
.feature {
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  padding: 2.2rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.feature:hover {
  transform: translateY(-4px);
  border-color: rgba(124, 58, 237, 0.4);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(124, 58, 237, 0.18), rgba(6, 182, 212, 0.18));
  color: var(--accent-2);
  margin-bottom: 1.2rem;
}
.feature-icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 1.25rem; margin-bottom: 0.6rem; font-weight: 600; }
.feature p { color: var(--fg-dim); font-size: 0.97rem; }

/* ============== DEMO ============== */

.demo { border-top: 1px solid var(--border); }

.demo-form {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2.5rem;
  margin-top: 1rem;
}

/* Feedback section — its own block below the demo, picking up
   the same border-top separator the demo + (retired) waitlist
   used. The card stretches to the section's content width so
   the form lines up with the demo upload block above it. */
.feedback-section {
  border-top: 1px solid var(--border);
  text-align: center;
}
.feedback-section .section-sub { margin-bottom: 2rem; }

.feedback-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 2rem;
  text-align: left;
}

.feedback-fields {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
/* Name + Email share a row on wide viewports so the form
   reads as a single horizontal block. ``.feedback-row``
   collapses to a single column on narrow screens (≤ 600px)
   so the inputs stay tap-friendly on mobile. */
.feedback-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
@media (max-width: 600px) {
  .feedback-row { grid-template-columns: 1fr; }
}
.feedback-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.feedback-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-muted);
  font-weight: 600;
}
.feedback-field input[type="text"],
.feedback-field input[type="email"],
.feedback-field textarea {
  width: 100%;
  padding: 0.7rem 0.95rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--fg);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.feedback-field textarea {
  /* Fixed visible box; long messages scroll inside via
     ``overflow-y: auto`` while ``resize: none`` keeps the
     widget steady. */
  line-height: 1.55;
  min-height: 9rem;
  height: 9rem;
  max-height: 9rem;
  resize: none;
  overflow-y: auto;
}
.feedback-field input::placeholder,
.feedback-field textarea::placeholder { color: var(--fg-muted); }
.feedback-field input:focus,
.feedback-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

.feedback-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}
.feedback-submit {
  /* Send-feedback CTA shares the gradient pill used by the
     primary buttons on the page (hero, Anonymize). Spans the
     full width of the feedback card so it lines up with the
     inputs above. */
  padding: 0.9rem 1.2rem;
  font-size: 0.95rem;
  width: 100%;
}
.feedback-actions .demo-status { margin: 0; }
.param-select select:focus { outline: none; border-color: var(--accent); }

.demo-upload { display: flex; flex-direction: column; gap: 1.2rem; }
.dropzone {
  flex: 1;
  min-height: 260px;
  border: 2px dashed rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  text-align: center;
  padding: 1.8rem;
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--accent);
  background: rgba(124, 58, 237, 0.06);
}
.dz-content p { color: var(--fg-dim); font-size: 0.95rem; }
.dz-content p strong { color: var(--fg); font-weight: 600; }
.dz-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: rgba(124, 58, 237, 0.12);
  color: var(--accent);
  margin-bottom: 1rem;
}
.dz-icon svg { width: 26px; height: 26px; }
.dz-sub { font-size: 0.85rem; opacity: 0.75; margin-top: 0.3rem !important; }
.dz-name { color: var(--accent-2) !important; margin-top: 0.8rem !important; font-weight: 600; word-break: break-all; }

/* ============== DEMO SOURCE GRID ============== */
/*
 * Two square, rounded capture boxes side by side — free text
 * (left, pre-filled with a localised sample) and the file upload
 * (right). Whichever box captures last becomes the single pending
 * file the Anonymize button below submits; the active box is
 * highlighted and the other's captured-name label clears (one
 * active source at a time).
 */
.demo-sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 600px) {
  .demo-sources { grid-template-columns: 1fr; }
}
.source-box {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.source-box.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18);
  background: rgba(124, 58, 237, 0.05);
}
.source-title { font-weight: 600; font-size: 0.95rem; color: var(--fg); }
.source-name { color: var(--accent-2); font-size: 0.8rem; font-weight: 600; word-break: break-all; min-height: 1em; }

/* The file box keeps the dashed dropzone look but joins the grid,
   so drop its standalone min-height / flex and let aspect-ratio
   size it square like its siblings. */
.demo-sources .dropzone {
  min-height: 0;
  flex: none;
  padding: 1rem;
  border-width: 2px;
}
.demo-sources .dropzone .dz-content p { font-size: 0.85rem; }
.demo-sources .dropzone .dz-icon { width: 44px; height: 44px; margin-bottom: 0.6rem; }
.demo-sources .dropzone .dz-icon svg { width: 22px; height: 22px; }
.demo-sources .dropzone .dz-sub { display: none; }

/* The square source boxes clip their own overflow, so the upload's
   size limit is surfaced here — a always-visible line under the grid
   instead of inside the (hidden) dropzone sub-text. */
.demo-filelimit {
  margin-top: 0.6rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--fg-dim);
}

/* Text — fills the box. */
.source-text textarea {
  width: 100%;
  flex: 1;
  min-height: 0;
  resize: none;
  padding: 0.6rem 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  color: var(--fg);
  font-size: 0.9rem;
  font-family: inherit;
  line-height: 1.45;
}
.source-text textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15);
}

.demo-selected {
  text-align: center;
  font-size: 0.9rem;
  color: var(--accent-2);
  font-weight: 600;
  min-height: 1.2em;
  word-break: break-all;
}
.demo-selected:empty { display: none; }

.demo-status {
  color: var(--fg-dim);
  min-height: 1.5em;
  font-size: 0.95rem;
  margin: 0;
}
.demo-status.ok,
.demo-status.err {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  border-radius: 10px;
  border: 1px solid;
  font-weight: 500;
  line-height: 1.45;
}
.demo-status.ok {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.08);
  border-color: rgba(74, 222, 128, 0.35);
}
.demo-status.err {
  color: #f87171;
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.4);
}
.demo-status.ok::before { content: "✓"; font-size: 1.2em; line-height: 1; flex-shrink: 0; }
.demo-status.err::before { content: "⚠"; font-size: 1.2em; line-height: 1; flex-shrink: 0; }

.demo-consent-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.demo-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: var(--fg-dim);
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
.demo-consent input[type="checkbox"] {
  margin-top: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--accent);
  flex-shrink: 0;
  cursor: pointer;
}
.demo-consent a {
  color: var(--accent-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.demo-consent a:hover { color: var(--accent); }
.demo-consent.is-locked { opacity: 0.7; }
.demo-consent.is-locked input[type="checkbox"] {
  cursor: not-allowed;
}
.demo-consent-hint {
  margin: 0 0 0 1.65rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--fg-dim);
  font-style: italic;
}
.demo-consent-hint[hidden] { display: none; }

.demo-download[hidden] {
  /* The HTML ``hidden`` attribute is just a UA ``display:
     none`` rule with low specificity; a class-targeted
     ``display: inline-flex`` would override it and the link
     would render with an empty href until the first
     anonymization completed. Pin the hidden state with an
     attribute selector so the link only paints once
     ``showDownload()`` flips the attribute off. */
  display: none !important;
}
.demo-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: rgba(124, 58, 237, 0.16);
  border: 1px solid rgba(124, 58, 237, 0.45);
  color: var(--fg);
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 0.15s, border-color 0.15s;
}
.demo-download::before {
  content: "↓";
  font-size: 1.1em;
  line-height: 1;
}
.demo-download:hover {
  background: rgba(124, 58, 237, 0.28);
  border-color: rgba(124, 58, 237, 0.7);
}

/* ============== FOOTER ============== */

.footer {
  border-top: 1px solid var(--border);
  padding: 2.5rem 4vw;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 2rem; }
.footer-links a {
  color: var(--fg-dim);
  cursor: pointer;
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}
.footer-links a:hover { color: var(--fg); border-color: var(--fg-muted); }
.footer-copy { color: var(--fg-muted); font-size: 0.85rem; }

/* ============== MODAL ============== */

.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1.5rem;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
}
.modal-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  padding: 2.5rem;
  max-width: 880px;
  max-height: 80vh;
  overflow-y: auto;
  width: 100%;
  z-index: 1;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7);
}
.modal-card h2 {
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  font-weight: 700;
}
.modal-card h3 {
  color: var(--fg);
  margin: 1.6rem 0 0.6rem;
  font-size: 1.05rem;
  font-weight: 700;
}
.modal-card h3:first-child { margin-top: 0; }
.modal-card p {
  color: var(--fg-dim);
  margin-bottom: 1rem;
  font-size: 0.97rem;
  line-height: 1.65;
}
.modal-card p strong { color: var(--fg); }
.modal-card a {
  color: var(--accent, #6ea8fe);
  text-decoration: underline;
  word-break: break-word;
}
.modal-card a:hover { opacity: 0.85; }
.modal-card ul {
  color: var(--fg-dim);
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  font-size: 0.97rem;
  line-height: 1.65;
}
.modal-card li { margin-bottom: 0.5rem; }
.modal-card li strong { color: var(--fg); }
/* Data-processing table — mirrors the source document's three-column
   layout: bold header row underlined, hairline rules between rows, a
   bold first column, and a centred full-width note row at the foot. */
.modal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  line-height: 1.55;
}
.modal-table th,
.modal-table td {
  text-align: left;
  vertical-align: top;
  padding: 0.7rem 0.8rem;
  border-top: 1px solid var(--border-strong);
  color: var(--fg-dim);
}
.modal-table thead th {
  border-top: none;
  border-bottom: 2px solid var(--border-strong);
  color: var(--fg);
  font-weight: 700;
}
.modal-table tbody th[scope="row"] {
  color: var(--fg);
  font-weight: 700;
  width: 24%;
}
.modal-table td p { margin: 0 0 0.6rem; font-size: inherit; }
.modal-table td p:last-child { margin-bottom: 0; }
.modal-table .modal-table-note {
  text-align: center;
  font-style: italic;
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: var(--fg-dim);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.modal-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--fg); }

/* ============== LIGHT-MODE TWEAKS ============== */
/*
   Surfaces that hard-code a white tint don't read against a
   light background. These rules flip them to a black tint /
   solid white so the page looks coherent on either theme
   without rewriting every original rule.
*/

[data-theme="light"] .hero-glow {
  background-image:
    linear-gradient(to right, rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
}
[data-theme="light"] .btn-secondary {
  background: rgba(0, 0, 0, 0.04);
}
[data-theme="light"] .btn-secondary:hover {
  background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .feature {
  background: var(--bg-2);
  border-color: var(--border);
}
[data-theme="light"] .feature-icon {
  background: linear-gradient(120deg, rgba(124, 58, 237, 0.16), rgba(6, 182, 212, 0.16));
}
[data-theme="light"] .demo-form,
[data-theme="light"] .feedback-card {
  background: var(--bg-2);
}
[data-theme="light"] .dropzone {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.18);
}
[data-theme="light"] .dropzone:hover,
[data-theme="light"] .dropzone.dragover {
  background: rgba(124, 58, 237, 0.05);
  border-color: var(--accent);
}
[data-theme="light"] .dz-icon {
  background: rgba(124, 58, 237, 0.10);
}
[data-theme="light"] .feedback-field input[type="text"],
[data-theme="light"] .feedback-field input[type="email"],
[data-theme="light"] .feedback-field textarea {
  background: #ffffff;
}
[data-theme="light"] .modal-close:hover {
  background: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .modal-card {
  background: var(--bg-2);
}
[data-theme="light"] .footer {
  background: var(--bg-2);
}