/* Soft Trading — Light theme + extended tweaks */

/* ===== LIGHT THEME ===== */
html[data-theme="light"] {
  --bg-0: #f6f7f9;
  --bg-1: #ffffff;
  --bg-2: #f1f3f6;
  --bg-3: #e6e9ee;
  --bg-4: #dde0e6;

  --line-1: rgba(15, 20, 35, 0.08);
  --line-2: rgba(15, 20, 35, 0.14);
  --line-3: rgba(15, 20, 35, 0.22);

  --fg-0: #0c1424;
  --fg-1: #2a3344;
  --fg-2: #5b6577;
  --fg-3: #8a93a4;
  --fg-4: #b4bbc8;

  --accent-cyan: oklch(0.55 0.13 220);
  --accent-cyan-2: oklch(0.48 0.14 220);
  --accent-cyan-glow: oklch(0.55 0.13 220 / 0.25);

  --bg-tone:
    radial-gradient(900px 500px at 80% 0%, oklch(0.55 0.13 220 / 0.06), transparent 60%),
    radial-gradient(700px 400px at 10% 60%, oklch(0.70 0.13 295 / 0.04), transparent 60%);
}

html[data-theme="light"] body {
  background-color: var(--bg-0);
}

html[data-theme="light"] .btn--primary {
  background: linear-gradient(180deg, oklch(0.60 0.14 220) 0%, oklch(0.45 0.15 220) 100%);
  color: #ffffff;
  border-color: oklch(0.50 0.14 220);
  box-shadow: 0 0 0 1px oklch(0.50 0.14 220 / 0.3), 0 8px 24px -10px oklch(0.55 0.13 220 / 0.5);
}
html[data-theme="light"] .btn--primary:hover {
  box-shadow: 0 0 0 1px oklch(0.50 0.14 220 / 0.5), 0 12px 32px -10px oklch(0.55 0.13 220 / 0.6);
}

/* Nav adjustments for light */
html[data-theme="light"] .nav {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(15, 20, 35, 0.08);
}
html[data-theme="light"] .nav.is-scrolled {
  box-shadow: 0 8px 32px -16px rgba(15, 20, 35, 0.15);
}
html[data-theme="light"] .nav__links a:hover {
  background: rgba(15, 20, 35, 0.04);
}

/* Cards / surfaces */
html[data-theme="light"] .card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .pcard,
html[data-theme="light"] .testi,
html[data-theme="light"] .plan,
html[data-theme="light"] .cx__form {
  background: var(--bg-1);
  box-shadow: 0 1px 2px rgba(15, 20, 35, 0.04), 0 8px 24px -12px rgba(15, 20, 35, 0.08);
}

/* Secondary button on light theme — needs explicit override since .btn uses --bg-3 */
html[data-theme="light"] .btn:not(.btn--primary) {
  background: var(--bg-1);
  border-color: var(--line-2);
  color: var(--fg-0);
  box-shadow: 0 1px 2px rgba(15, 20, 35, 0.04);
}
html[data-theme="light"] .btn:not(.btn--primary):hover {
  background: var(--bg-2);
  border-color: var(--line-3);
}
html[data-theme="light"] .feature {
  background: var(--bg-1);
}
html[data-theme="light"] .feature:hover { background: var(--bg-2); }
html[data-theme="light"] .step { background: var(--bg-1); }

/* Hero terminal — keep darker for chart contrast */
html[data-theme="light"] .term {
  background: linear-gradient(180deg, #0e1419, #0a0d12);
  border-color: rgba(15, 20, 35, 0.16);
  box-shadow: 0 30px 80px -30px rgba(15, 20, 35, 0.25), 0 1px 0 rgba(255,255,255,0.04) inset;
}
html[data-theme="light"] .term__bar {
  border-bottom-color: rgba(255,255,255,0.06);
}
html[data-theme="light"] .term__title { color: rgba(255,255,255,0.6); }
html[data-theme="light"] .term__chip { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.1); }
html[data-theme="light"] .chart__yaxis,
html[data-theme="light"] .chart__xaxis { color: rgba(255,255,255,0.4); }
html[data-theme="light"] .chart__grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
}

/* Mini chart cards keep dark inset */
html[data-theme="light"] .pcard__media {
  background: linear-gradient(180deg, #0e1419, #0a0d12);
  border-bottom-color: rgba(15, 20, 35, 0.10);
}

/* Footer */
html[data-theme="light"] .footer__disclaimer {
  background: var(--bg-2);
  border-color: var(--line-1);
}
html[data-theme="light"] .footer__disclaimer p { color: var(--fg-2); }

/* FAQ icon */
html[data-theme="light"] .faq__icon {
  background: var(--bg-1);
}

/* Hiw steps card */
html[data-theme="light"] .hiw__tabs { background: var(--bg-1); }

/* Eyebrow on light */
html[data-theme="light"] .eyebrow { color: var(--fg-2); }

/* Selection on light */
html[data-theme="light"] ::selection { background: oklch(0.55 0.13 220 / 0.18); color: var(--fg-0); }

/* Scrollbar on light */
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg-0); }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--bg-3); border-color: var(--bg-0); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--bg-4); }

/* Service-card hover wash on light */
html[data-theme="light"] .service-card::after {
  background: radial-gradient(400px 200px at 80% 0%, oklch(0.55 0.13 220 / 0.04), transparent 60%);
}

/* Service-card category label */
html[data-theme="light"] .service-card__tag,
html[data-theme="light"] .step__num { color: var(--accent-cyan); }

/* Indicator detail preview */
html[data-theme="light"] .detail {
  background: var(--bg-1);
  box-shadow: 0 1px 2px rgba(15, 20, 35, 0.04), 0 8px 24px -12px rgba(15, 20, 35, 0.08);
}
html[data-theme="light"] .detail__preview {
  background: linear-gradient(180deg, #0e1419, #0a0d12);
  border-color: rgba(15, 20, 35, 0.10);
}
html[data-theme="light"] .detail__preview-bar {
  border-bottom-color: rgba(255,255,255,0.06);
}

/* Custom form on light */
html[data-theme="light"] .cx__input,
html[data-theme="light"] .cx__textarea,
html[data-theme="light"] .cx__select {
  background: var(--bg-2);
  border-color: var(--line-2);
  color: var(--fg-0);
}
html[data-theme="light"] .cx__choice {
  background: var(--bg-2);
}
html[data-theme="light"] .cx__choice.is-checked {
  background: oklch(0.55 0.13 220 / 0.08);
  border-color: var(--accent-cyan);
}
html[data-theme="light"] .cx__hero h1 { color: var(--fg-0); }
html[data-theme="light"] .cx__hero p { color: var(--fg-1); }

/* Brief card on light keeps dark inset */
html[data-theme="light"] .brief {
  background: linear-gradient(180deg, #0e1419, #0a0d12);
  border-color: rgba(15, 20, 35, 0.16);
  color: rgba(255,255,255,0.92);
}
html[data-theme="light"] .brief__v { color: rgba(255,255,255,0.92); }
html[data-theme="light"] .brief__k { color: rgba(255,255,255,0.5); }
html[data-theme="light"] .brief__head .label { color: rgba(255,255,255,0.5); }
html[data-theme="light"] .brief__id { color: rgba(255,255,255,0.7); }

/* ===== THEME TOGGLE BUTTON (nav) ===== */
.nav__theme-toggle {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--fg-1);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease, transform 200ms ease;
}
.nav__theme-toggle:hover {
  color: var(--fg-0);
  border-color: var(--line-3);
  background: var(--bg-3);
  transform: rotate(20deg);
}

/* ===== ACCENT VARIANTS (used by tweaks) ===== */
html[data-accent="emerald"] {
  --accent-cyan: oklch(0.72 0.16 165);
  --accent-cyan-2: oklch(0.62 0.18 165);
  --accent-cyan-glow: oklch(0.72 0.16 165 / 0.35);
}
html[data-theme="light"][data-accent="emerald"] {
  --accent-cyan: oklch(0.50 0.16 165);
  --accent-cyan-2: oklch(0.42 0.18 165);
  --accent-cyan-glow: oklch(0.50 0.16 165 / 0.25);
}

html[data-accent="amber"] {
  --accent-cyan: oklch(0.82 0.16 75);
  --accent-cyan-2: oklch(0.72 0.18 75);
  --accent-cyan-glow: oklch(0.82 0.16 75 / 0.35);
}
html[data-theme="light"][data-accent="amber"] {
  --accent-cyan: oklch(0.62 0.16 65);
  --accent-cyan-2: oklch(0.54 0.18 65);
  --accent-cyan-glow: oklch(0.62 0.16 65 / 0.25);
}

html[data-accent="rose"] {
  --accent-cyan: oklch(0.72 0.18 15);
  --accent-cyan-2: oklch(0.62 0.20 15);
  --accent-cyan-glow: oklch(0.72 0.18 15 / 0.35);
}
html[data-theme="light"][data-accent="rose"] {
  --accent-cyan: oklch(0.55 0.18 15);
  --accent-cyan-2: oklch(0.46 0.20 15);
  --accent-cyan-glow: oklch(0.55 0.18 15 / 0.25);
}

/* ===== FONT VARIANTS ===== */
html[data-font="sans"]      { --font-display: 'Inter Tight', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; }
html[data-font="serif"]     { --font-display: 'Instrument Serif', 'Fraunces', serif; --font-body: 'Inter', system-ui, sans-serif; }
html[data-font="grotesk"]   { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'Space Grotesk', system-ui, sans-serif; }
html[data-font="mono"]      { --font-display: 'JetBrains Mono', ui-monospace, monospace; --font-body: 'Inter', system-ui, sans-serif; }

html[data-font="serif"] h1 { letter-spacing: -0.02em; font-weight: 400; font-style: italic; }
html[data-font="serif"] h1 .accent { font-style: italic; }

/* ===== RADIUS VARIANTS ===== */
html[data-radius="sharp"] {
  --r-1: 2px; --r-2: 3px; --r-3: 4px; --r-4: 6px; --r-pill: 6px;
}
html[data-radius="rounded"] {
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 18px; --r-pill: 999px;
}
html[data-radius="soft"] {
  --r-1: 8px; --r-2: 14px; --r-3: 20px; --r-4: 28px; --r-pill: 999px;
}

/* ===== HERO LAYOUT VARIANTS ===== */
html[data-hero="centered"] .hero__grid {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}
html[data-hero="centered"] .hero__copy { display: flex; flex-direction: column; align-items: center; }
html[data-hero="centered"] .hero__cta { justify-content: center; }
html[data-hero="centered"] .hero__visual { width: 100%; max-width: 720px; margin: 24px auto 0; aspect-ratio: 16/9; }

html[data-hero="splitline"] .hero__grid { gap: 40px; }
html[data-hero="splitline"] .hero__copy { border-right: 1px solid var(--line-1); padding-right: 40px; }
@media (max-width: 980px) {
  html[data-hero="splitline"] .hero__copy { border-right: 0; padding-right: 0; }
}

/* ===== CARD STYLE VARIANTS ===== */
html[data-cards="bordered"] .pcard,
html[data-cards="bordered"] .service-card {
  background: transparent;
  border-width: 1px;
}
html[data-cards="filled"] .pcard,
html[data-cards="filled"] .service-card {
  background: var(--bg-2);
}
html[data-cards="elevated"] .pcard,
html[data-cards="elevated"] .service-card {
  background: var(--bg-2);
  box-shadow: 0 20px 50px -25px rgba(0,0,0,0.7);
}
html[data-theme="light"][data-cards="elevated"] .pcard,
html[data-theme="light"][data-cards="elevated"] .service-card {
  box-shadow: 0 20px 50px -25px rgba(15,20,35,0.20);
}

/* ===== TWEAKS PANEL — palette swatches ===== */
.tweak-color-row {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.tweak-color-swatch {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--line-2);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  position: relative;
}
.tweak-color-swatch.is-active {
  border-color: var(--fg-0);
  box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--fg-0);
}
.tweak-color-swatch:hover { transform: scale(1.08); }

/* ===== TELEGRAM POPUP ===== */
.tg-popup {
  position: fixed;
  bottom: 24px;
  left: 24px;
  width: 340px;
  max-width: calc(100vw - 48px);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 22px 22px 20px;
  z-index: 80;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.3);
  animation: tg-rise 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
html[data-theme="light"] .tg-popup {
  background: var(--bg-1);
  box-shadow: 0 20px 60px -20px rgba(15, 20, 35, 0.25), 0 1px 3px rgba(15, 20, 35, 0.08);
}
@keyframes tg-rise {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.tg-popup__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.tg-popup__close:hover { color: var(--fg-0); border-color: var(--line-3); background: var(--bg-3); }
.tg-popup__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, oklch(0.65 0.14 240), oklch(0.50 0.16 240));
  color: white;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px -10px oklch(0.55 0.16 240 / 0.5);
}
.tg-popup__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg-0);
  margin-bottom: 6px;
}
.tg-popup__body p {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.5;
  max-width: 30ch;
}
.tg-popup__cta { padding: 10px 16px; font-size: 13px; }
.tg-popup__later {
  display: block;
  margin-top: 10px;
  padding: 6px 0;
  background: transparent;
  border: 0;
  color: var(--fg-3);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color 160ms ease;
}
.tg-popup__later:hover { color: var(--fg-1); }

@media (max-width: 600px) {
  .tg-popup { width: calc(100vw - 32px); left: 16px; bottom: 16px; }
}

/* ===== Custom CTA product card ===== */
.pcard--custom {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 60%), var(--bg-2);
  border-style: dashed;
}
.pcard__media--custom {
  display: grid; place-items: center;
  background:
    radial-gradient(400px 200px at 50% 50%, oklch(0.78 0.13 220 / 0.10), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(255,255,255,0.025) 12px 13px),
    var(--bg-1);
}
.pcard__custom-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1.5px dashed var(--line-3);
  display: grid; place-items: center;
  color: var(--accent-cyan);
  background: rgba(0, 0, 0, 0.2);
}
html[data-theme="light"] .pcard__media--custom {
  background:
    radial-gradient(400px 200px at 50% 50%, oklch(0.55 0.13 220 / 0.06), transparent 60%),
    repeating-linear-gradient(45deg, transparent 0 12px, rgba(15, 20, 35, 0.025) 12px 13px),
    var(--bg-2);
}
html[data-theme="light"] .pcard__custom-icon {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--line-3);
}

/* ===== BUTTON SHAPE VARIANTS ===== */
html[data-buttons="pill"]    .btn { border-radius: 999px; }
html[data-buttons="rounded"] .btn { border-radius: 10px; }
html[data-buttons="square"]  .btn { border-radius: 3px; }
html[data-buttons="square"]  .btn--primary { border-radius: 3px; }

/* ===== BACKGROUND PATTERN ===== */
html[data-bg-pattern="grid"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  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: 60px 60px;
  pointer-events: none;
  z-index: -1;
  mask-image: radial-gradient(800px 600px at 50% 30%, black, transparent 80%);
}
html[data-theme="light"][data-bg-pattern="grid"] body::before {
  background-image:
    linear-gradient(to right, rgba(15,20,35,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,20,35,0.04) 1px, transparent 1px);
}
html[data-bg-pattern="dots"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1.5px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: -1;
  mask-image: radial-gradient(800px 600px at 50% 30%, black, transparent 80%);
}
html[data-theme="light"][data-bg-pattern="dots"] body::before {
  background-image: radial-gradient(circle, rgba(15,20,35,0.06) 1px, transparent 1.5px);
}
html[data-bg-pattern="none"] body::before { display: none; }

/* ===== ANIMATION TOGGLE ===== */
html[data-animations="off"] *, html[data-animations="off"] *::before, html[data-animations="off"] *::after {
  animation: none !important;
  transition: none !important;
}

/* ===== NAV STYLE VARIANTS ===== */
html[data-nav="bar"] .nav {
  top: 0;
  left: 0;
  transform: none;
  width: 100%;
  border-radius: 0;
  border-top: 0; border-left: 0; border-right: 0;
  padding: 12px 24px;
  max-width: none;
}
html[data-nav="minimal"] .nav {
  background: transparent;
  border: 0;
  backdrop-filter: none;
}
html[data-nav="minimal"] .nav.is-scrolled {
  background: rgba(10, 11, 15, 0.72);
  backdrop-filter: saturate(150%) blur(18px);
  border: 1px solid var(--line-1);
}
html[data-theme="light"][data-nav="minimal"] .nav.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(15, 20, 35, 0.08);
}

/* ===== PRODUCT CARD — dual CTAs ===== */
.pcard__actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.pcard__cta-btn {
  flex: 1;
  justify-content: center;
  padding: 11px 14px;
  font-size: 13px;
  white-space: nowrap;
}
@media (max-width: 540px) {
  .pcard__actions { flex-direction: column; }
}

/* Hover effect (keep some life since pcards are no longer fully clickable links) */
.pcard { transition: border-color 220ms ease, transform 220ms ease; }
.pcard:hover { border-color: var(--line-3); transform: translateY(-2px); }

/* ===== TRIAL MODAL ===== */
.trial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  animation: fade-in 220ms ease;
}
html[data-theme="light"] .trial-overlay { background: rgba(15, 20, 35, 0.40); }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise-in {
  from { transform: translateY(20px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}

.trial-modal {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 40%), var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-4);
  padding: 0;
  width: min(640px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 0, 0, 0.3);
  animation: rise-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
  display: flex;
  flex-direction: column;
}
html[data-theme="light"] .trial-modal {
  background: var(--bg-1);
  box-shadow: 0 30px 80px -20px rgba(15, 20, 35, 0.25), 0 1px 3px rgba(15, 20, 35, 0.08);
}

.trial-modal__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 2;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--fg-2);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.trial-modal__close:hover { color: var(--fg-0); border-color: var(--line-3); background: var(--bg-4); transform: rotate(90deg); }
html[data-theme="light"] .trial-modal__close { background: var(--bg-2); }
html[data-theme="light"] .trial-modal__close:hover { background: var(--bg-3); }

.trial-modal__head {
  padding: 36px 40px 24px;
  border-bottom: 1px solid var(--line-1);
  position: relative;
  overflow: hidden;
}
.trial-modal__head::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 20% 0%, oklch(0.78 0.13 220 / 0.08), transparent 60%);
  pointer-events: none;
}
html[data-theme="light"] .trial-modal__head::before {
  background: radial-gradient(600px 200px at 20% 0%, oklch(0.55 0.13 220 / 0.05), transparent 60%);
}
.trial-modal__head > * { position: relative; }

.trial-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: oklch(0.78 0.13 220 / 0.10);
  border: 1px solid oklch(0.78 0.13 220 / 0.30);
  margin-bottom: 18px;
}
.trial-modal__eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-cyan);
  box-shadow: 0 0 10px var(--accent-cyan-glow);
}
html[data-theme="light"] .trial-modal__eyebrow {
  background: oklch(0.55 0.13 220 / 0.06);
  border-color: oklch(0.55 0.13 220 / 0.30);
}

.trial-modal__head h3 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--fg-0);
  margin: 0 0 10px;
  line-height: 1.1;
}
.trial-modal__head p {
  margin: 0;
  font-size: 14.5px;
  color: var(--fg-2);
  line-height: 1.55;
  max-width: 54ch;
}

/* Body / form area */
.trial-modal__body {
  padding: 28px 40px 32px;
  overflow-y: auto;
}
@media (max-width: 560px) {
  .trial-modal__head { padding: 28px 24px 20px; }
  .trial-modal__body { padding: 22px 24px 24px; }
  .trial-modal__head h3 { font-size: 22px; }
}

.trial-modal__form { display: flex; flex-direction: column; gap: 18px; }
.trial-modal__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 540px) { .trial-modal__row { grid-template-columns: 1fr; } }

/* Self-contained field styling (independent of custom.css) */
.tm-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tm-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
}
.tm-field .optional {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg-4);
  font-weight: 400;
}
.tm-input,
.tm-textarea {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: 13px 14px;
  color: var(--fg-0);
  font-family: inherit;
  font-size: 14.5px;
  width: 100%;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.tm-input::placeholder,
.tm-textarea::placeholder {
  color: var(--fg-4);
}
.tm-input:focus,
.tm-textarea:focus {
  outline: none;
  border-color: var(--accent-cyan);
  background: var(--bg-2);
  box-shadow: 0 0 0 3px oklch(0.78 0.13 220 / 0.15);
}
html[data-theme="light"] .tm-input,
html[data-theme="light"] .tm-textarea {
  background: var(--bg-2);
}
html[data-theme="light"] .tm-input:focus,
html[data-theme="light"] .tm-textarea:focus {
  background: var(--bg-1);
  box-shadow: 0 0 0 3px oklch(0.55 0.13 220 / 0.12);
}
.tm-textarea {
  min-height: 88px;
  resize: vertical;
  line-height: 1.55;
  font-family: inherit;
}

/* Terms callout */
.trial-modal__terms {
  margin-top: 4px;
  padding: 14px 16px 14px 18px;
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-left: 2px solid var(--accent-cyan);
  border-radius: var(--r-2);
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.trial-modal__terms svg { flex-shrink: 0; color: var(--accent-cyan); margin-top: 1px; }
html[data-theme="light"] .trial-modal__terms { background: var(--bg-2); }

/* Action footer */
.trial-modal__actions {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.trial-modal__actions .btn { flex: 1; justify-content: center; min-width: 0; padding: 13px 18px; }
@media (max-width: 540px) {
  .trial-modal__actions .btn { flex: 1 1 100%; }
}

/* Success state */
.trial-modal__success {
  text-align: center;
  padding: 56px 40px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.trial-modal__success-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, oklch(0.85 0.14 220), oklch(0.55 0.16 220));
  color: white;
  display: grid; place-items: center;
  margin-bottom: 22px;
  box-shadow:
    0 0 0 6px oklch(0.78 0.13 220 / 0.12),
    0 16px 40px -10px var(--accent-cyan-glow);
  animation: pop 480ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.trial-modal__success h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg-0);
  margin: 0 0 12px;
}
.trial-modal__success p {
  color: var(--fg-1);
  font-size: 15px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto 12px;
}
.trial-modal__success p strong { color: var(--fg-0); font-weight: 500; }
.trial-modal__success-sub { font-size: 13.5px !important; color: var(--fg-2) !important; }
.trial-modal__success-cta {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
  width: 100%;
}
.trial-modal__success-cta .btn { flex: 1; justify-content: center; min-width: 0; }

/* ===== ACCESS MODEL SECTION ===== */
.access__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) { .access__grid { grid-template-columns: 1fr; } }

.access-card {
  position: relative;
  padding: 32px 28px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-4);
  transition: border-color 220ms ease, transform 220ms ease;
}
.access-card:hover { border-color: var(--line-3); transform: translateY(-2px); }
html[data-theme="light"] .access-card { background: var(--bg-1); box-shadow: 0 1px 2px rgba(15, 20, 35, 0.04), 0 8px 24px -12px rgba(15, 20, 35, 0.08); }

.access-card__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 24px;
}
.access-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-3);
  text-transform: uppercase;
}
.access-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--accent-cyan);
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid oklch(0.78 0.13 220 / 0.3);
  border-radius: var(--r-pill);
  background: oklch(0.78 0.13 220 / 0.08);
}
html[data-theme="light"] .access-card__tag {
  background: oklch(0.55 0.13 220 / 0.06);
  border-color: oklch(0.55 0.13 220 / 0.3);
}

.access-card__icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--bg-1);
  display: grid; place-items: center;
  color: var(--accent-cyan);
  margin-bottom: 18px;
}
html[data-theme="light"] .access-card__icon { background: var(--bg-2); }

.access-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg-0);
  margin: 0 0 10px;
}
.access-card p {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.6;
  margin: 0;
}

.access__note {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-pill);
  font-size: 13px;
  color: var(--fg-2);
}
.access__note svg { color: var(--accent-cyan); }
html[data-theme="light"] .access__note { background: var(--bg-1); }

/* ===== SPOTLIGHT GLOW EFFECT (product cards) ===== */
/* Mouse position is tracked globally and pushed onto :root as --mx/--my (px) and --mxp (0..1) */
/* Note: the double [data-glow] attribute selector boosts specificity to (0,3,0) so it wins
   over `html[data-cards="filled"] .pcard` (0,2,1) which would otherwise reset our background. */
.pcard[data-glow][data-glow] {
  --glow-base-hue: 220;
  --glow-spread: 180;
  --glow-size: 320;
  --glow-hue: calc(var(--glow-base-hue) + (var(--mxp, 0.5) * var(--glow-spread)));
  --glow-spotlight-size: calc(var(--glow-size) * 1px);

  position: relative;
  overflow: hidden;
  background-color: var(--bg-2);
  background-image:
    radial-gradient(
      var(--glow-spotlight-size) var(--glow-spotlight-size) at
      calc(var(--mx, 0) * 1px)
      calc(var(--my, 0) * 1px),
      hsl(var(--glow-hue) 90% 65% / 0.12),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, rgba(255,255,255,0) 60%);
  background-attachment: fixed, scroll;
  background-repeat: no-repeat, no-repeat;
  background-position: 50% 50%, 0 0;
  background-size: 100% 100%, 100% 100%;
}

/* Glowing border via mask trick */
.pcard[data-glow][data-glow]::before,
.pcard[data-glow][data-glow]::after {
  pointer-events: none;
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  border-radius: inherit;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
  -webkit-mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  mask: linear-gradient(transparent, transparent), linear-gradient(white, white);
  -webkit-mask-composite: source-in, xor;
  mask-composite: intersect;
  z-index: 3;
}
.pcard[data-glow][data-glow]::before {
  background-image: radial-gradient(
    calc(var(--glow-spotlight-size) * 0.7) calc(var(--glow-spotlight-size) * 0.7) at
    calc(var(--mx, 0) * 1px)
    calc(var(--my, 0) * 1px),
    hsl(var(--glow-hue) 95% 65% / 0.95),
    transparent 100%
  );
  filter: brightness(1.4);
}
.pcard[data-glow][data-glow]::after {
  background-image: radial-gradient(
    calc(var(--glow-spotlight-size) * 0.45) calc(var(--glow-spotlight-size) * 0.45) at
    calc(var(--mx, 0) * 1px)
    calc(var(--my, 0) * 1px),
    hsl(0 0% 100% / 0.7),
    transparent 100%
  );
}

/* Outer blurred halo — use longhand properties so the rule isn't dropped */
.pcard__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
  opacity: 0.85;
  filter: blur(22px);
  background-image: radial-gradient(
    calc(var(--glow-spotlight-size, 320px) * 0.5) calc(var(--glow-spotlight-size, 320px) * 0.5) at
    calc(var(--mx, 0) * 1px)
    calc(var(--my, 0) * 1px),
    hsl(var(--glow-hue, 220) 95% 60% / 0.35),
    transparent 100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
}

/* Keep card content above the glow layers */
.pcard[data-glow] > .pcard__media,
.pcard[data-glow] > .pcard__body { position: relative; z-index: 2; }

/* Light-theme adjustments — softer + warmer (boosted specificity to (0,3,1) to keep winning) */
html[data-theme="light"] .pcard[data-glow][data-glow] {
  background-color: var(--bg-1);
  background-image:
    radial-gradient(
      var(--glow-spotlight-size) var(--glow-spotlight-size) at
      calc(var(--mx, 0) * 1px)
      calc(var(--my, 0) * 1px),
      hsl(var(--glow-hue) 80% 60% / 0.10),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(15,20,35,0.02) 0%, rgba(15,20,35,0) 60%);
}
html[data-theme="light"] .pcard[data-glow][data-glow]::before {
  background-image: radial-gradient(
    calc(var(--glow-spotlight-size) * 0.7) calc(var(--glow-spotlight-size) * 0.7) at
    calc(var(--mx, 0) * 1px)
    calc(var(--my, 0) * 1px),
    hsl(var(--glow-hue) 85% 55% / 0.6),
    transparent 100%
  );
  filter: brightness(1.1);
}
html[data-theme="light"] .pcard[data-glow][data-glow]::after {
  background-image: radial-gradient(
    calc(var(--glow-spotlight-size) * 0.5) calc(var(--glow-spotlight-size) * 0.5) at
    calc(var(--mx, 0) * 1px)
    calc(var(--my, 0) * 1px),
    hsl(var(--glow-hue) 95% 50% / 0.5),
    transparent 100%
  );
}
html[data-theme="light"] .pcard__glow { opacity: 0.55; }

/* Reduce motion: disable continuous tracking work but keep cards visible */
html[data-animations="off"] .pcard[data-glow][data-glow] { background-attachment: scroll, scroll; }
html[data-animations="off"] .pcard[data-glow][data-glow]::before,
html[data-animations="off"] .pcard[data-glow][data-glow]::after,
html[data-animations="off"] .pcard__glow { display: none; }

/* Hue mapping per accent (light + dark) */
html[data-accent="blue"]    .pcard[data-glow][data-glow] { --glow-base-hue: 245; }
html[data-accent="violet"]  .pcard[data-glow][data-glow] { --glow-base-hue: 295; --glow-spread: 220; }
html[data-accent="emerald"] .pcard[data-glow][data-glow] { --glow-base-hue: 160; --glow-spread: 80;  }
html[data-accent="amber"]   .pcard[data-glow][data-glow] { --glow-base-hue: 35;  --glow-spread: 60;  }
html[data-accent="rose"]    .pcard[data-glow][data-glow] { --glow-base-hue: 0;   --glow-spread: 60;  }

/* ===== TESTIMONIALS MARQUEE ===== */
.testimonials { padding-bottom: calc(100px * var(--density)); }

.marquee {
  position: relative;
  overflow: hidden;
  padding: 28px 0 4px;
  margin-top: 12px;
  /* Soft fade at both edges */
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: marquee-scroll 70s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.testi-card {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 22px 20px;
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  transition: border-color 240ms ease, transform 240ms ease;
}
.testi-card:hover { border-color: var(--line-3); transform: translateY(-2px); }
html[data-theme="light"] .testi-card {
  background: var(--bg-1);
  box-shadow: 0 1px 2px rgba(15, 20, 35, 0.04), 0 8px 24px -12px rgba(15, 20, 35, 0.08);
}

.testi-card__stars {
  font-size: 13px;
  color: oklch(0.85 0.13 85);
  letter-spacing: 0.10em;
}
html[data-theme="light"] .testi-card__stars { color: oklch(0.70 0.16 65); }

.testi-card__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.55;
  color: var(--fg-0);
  letter-spacing: -0.005em;
  flex: 1;
}

.testi-card__who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-1);
}
.testi-card__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bg-3), var(--bg-4));
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--fg-1);
  flex-shrink: 0;
}
.testi-card__name {
  font-size: 13.5px;
  color: var(--fg-0);
  font-weight: 500;
  line-height: 1.25;
}
.testi-card__role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--fg-3);
  margin-top: 2px;
}

html[data-animations="off"] .marquee__track { animation: none; }
@media (max-width: 600px) {
  .testi-card { flex-basis: 280px; }
}