/* ==========================================================================
   Theme: Clay Soft 3D, rounded forms, soft double shadows, squishy buttons.
   Friendly modern UI for education and approachable brands.
   ========================================================================== */

[data-theme="clay"] {
  --bg: #eef0f7;
  --bg-soft: #e5e8f2;
  --surface: #f8f9fd;
  --ink: #3a3f55;
  --muted: #5d6280;
  --accent: #f2705d;
  --accent-ink: #ffffff;
  --accent-2: #5e9df2;
  --line: #dcdfee;
  --border-w: 1px;
  --radius: 22px;
  --radius-lg: 28px;
  --shadow: 8px 8px 20px rgba(83, 92, 135, 0.14), -6px -6px 16px rgba(255, 255, 255, 0.9);
  --shadow-strong: 14px 14px 34px rgba(83, 92, 135, 0.2), -8px -8px 22px rgba(255, 255, 255, 0.95);

  --font-display: "Nunito", "Inter", sans-serif;
  --font-body: "Nunito", "Inter", sans-serif;
  --h-weight: 800;
  --h-tracking: -0.015em;
  --h-transform: none;
  --kicker-font: "Nunito", sans-serif;
  --btn-radius: 99px;
  --tk-speed: 45;
}

[data-theme="clay"] .kicker {
  color: var(--accent-2);
  font-weight: 800;
  letter-spacing: 0.18em;
}
[data-theme="clay"] .hero-title em { color: var(--accent); }
[data-theme="clay"] .why .section-title em { color: var(--accent); }

/* Squishy pressed-clay buttons */
[data-theme="clay"] .btn {
  border: none;
  font-weight: 800;
  padding: 0.95rem 1.9rem;
  box-shadow: var(--shadow);
}
[data-theme="clay"] .btn--primary { background: var(--accent); color: #fff; }
[data-theme="clay"] .btn--primary:hover {
  background: #f3826f; color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}
[data-theme="clay"] .btn--primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 4px 4px 10px rgba(140, 40, 25, 0.3);
}
[data-theme="clay"] .btn--ghost { background: var(--surface); color: var(--ink); }
[data-theme="clay"] .btn--ghost:hover {
  background: var(--accent-2); color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-strong);
}
[data-theme="clay"] .btn--ghost:active { transform: translateY(1px) scale(0.98); }

[data-theme="clay"] .site-header { border-bottom: none; box-shadow: 0 6px 18px rgba(83, 92, 135, 0.08); }
[data-theme="clay"] .brand-name i { color: var(--accent); }
[data-theme="clay"] .nav-link { font-weight: 700; }
[data-theme="clay"] .lang-btn { border: none; background: var(--surface); box-shadow: var(--shadow); border-radius: 99px; }

[data-theme="clay"] .hp {
  border: none;
  background: var(--surface);
  border-radius: 99px;
  box-shadow: var(--shadow);
  font-weight: 700;
}

/* Hero: pressed clay pebbles */
[data-theme="clay"] .ha-1 {
  opacity: 1; width: 9rem; height: 9rem; border-radius: 38%;
  background: linear-gradient(135deg, #fcd1ca, #f2705d);
  box-shadow: var(--shadow-strong);
  top: -8%; right: 0;
  animation: clay-bob 6s ease-in-out infinite alternate;
}
[data-theme="clay"] .ha-2 {
  opacity: 1; width: 5.5rem; height: 5.5rem; border-radius: 50%;
  background: linear-gradient(135deg, #cfe2fd, #5e9df2);
  box-shadow: var(--shadow);
  bottom: 0; left: -2%;
  animation: clay-bob 7s 0.8s ease-in-out infinite alternate-reverse;
}
[data-theme="clay"] .ha-3 {
  opacity: 1; width: 3rem; height: 3rem; border-radius: 30% 70% 60% 40% / 50% 45% 55% 50%;
  background: linear-gradient(135deg, #d3f2e3, #54bd9c);
  box-shadow: var(--shadow);
  top: 10%; left: 3%;
  animation: clay-bob 5s 0.4s ease-in-out infinite alternate;
}
@keyframes clay-bob { from { transform: translateY(0) rotate(0); } to { transform: translateY(-10px) rotate(3deg); } }

[data-theme="clay"] .win {
  border: none;
  border-radius: 24px;
  box-shadow: var(--shadow-strong);
}
[data-theme="clay"] .win-bar { border-bottom: 1px solid var(--line); }
[data-theme="clay"] .win-dots i { background: var(--accent); }
[data-theme="clay"] .win-dots i:nth-child(2) { background: #f7b32b; }
[data-theme="clay"] .win-dots i:nth-child(3) { background: #54bd9c; }
[data-theme="clay"] .ha-line { background: var(--bg-soft); }
[data-theme="clay"] .ha-chip { background: var(--accent); border-radius: 99px; }
[data-theme="clay"] .ha-chip--alt { background: var(--bg-soft); border: none; border-radius: 99px; }

/* Ticker: a soft pill lane */
[data-theme="clay"] .ticker {
  background: var(--bg-soft);
  border: none;
  box-shadow: inset 4px 4px 10px rgba(83, 92, 135, 0.1), inset -4px -4px 10px rgba(255, 255, 255, 0.8);
}
[data-theme="clay"] .tk-item { color: var(--ink); font-weight: 800; letter-spacing: 0.1em; }
[data-theme="clay"] .tk-sep { color: var(--accent); }
[data-theme="clay"] .tk-sep::before { content: "●"; font-size: 0.6em; }
[data-theme="clay"] .tk-group .tk-sep:nth-of-type(2n)::before { color: var(--accent-2); }

/* Cards: pillowy surfaces, no hard lines anywhere */
[data-theme="clay"] .svc-card, [data-theme="clay"] .why-card,
[data-theme="clay"] .step, [data-theme="clay"] .demo-card,
[data-theme="clay"] .price-card, [data-theme="clay"] .form,
[data-theme="clay"] .win--admin, [data-theme="clay"] .mode-panel {
  border: none;
  box-shadow: var(--shadow);
}
[data-theme="clay"] .svc-card:hover, [data-theme="clay"] .demo-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-strong);
}
[data-theme="clay"] .svc-icon {
  color: #fff;
  background: linear-gradient(135deg, #f3917f, #f2705d);
  border-radius: 16px;
  padding: 0.5rem;
  width: 2.9rem; height: 2.9rem;
  box-shadow: 4px 4px 10px rgba(83, 92, 135, 0.18);
}
[data-theme="clay"] .svc-card:nth-child(2n) .svc-icon { background: linear-gradient(135deg, #8db9f6, #5e9df2); }
[data-theme="clay"] .svc-card:nth-child(3n) .svc-icon { background: linear-gradient(135deg, #7fd0b4, #54bd9c); }

[data-theme="clay"] .why-num {
  display: inline-grid; place-items: center;
  width: 2.3rem; height: 2.3rem;
  border-radius: 40%;
  background: linear-gradient(135deg, #8db9f6, #5e9df2);
  color: #fff;
  font-weight: 800;
}
[data-theme="clay"] .step-num {
  border: none;
  background: linear-gradient(135deg, #f3917f, #f2705d);
  color: #fff;
  font-weight: 800;
  box-shadow: 3px 3px 8px rgba(83, 92, 135, 0.2);
}
[data-theme="clay"] .demo-thumb { border: none; border-radius: 16px; background: var(--bg-soft); }
[data-theme="clay"] .dt-b { background: var(--accent); }
[data-theme="clay"] .demo-status { border: none; background: var(--bg-soft); font-weight: 700; }
[data-theme="clay"] .demo-status--prod { background: #def0e9; color: #2e8a6d; }

[data-theme="clay"] .price-badge {
  background: linear-gradient(135deg, #f3917f, #f2705d);
  border-radius: 99px;
  box-shadow: 4px 4px 10px rgba(83, 92, 135, 0.2);
}
[data-theme="clay"] .price-card--featured { box-shadow: var(--shadow-strong); }
[data-theme="clay"] .price-list li::before { content: "●"; color: var(--accent-2); font-size: 0.65em; top: 0.45em; }

[data-theme="clay"] .field input, [data-theme="clay"] .field select, [data-theme="clay"] .field textarea {
  border: none;
  border-radius: 14px;
  background: var(--bg);
  box-shadow: inset 3px 3px 8px rgba(83, 92, 135, 0.12), inset -3px -3px 8px rgba(255, 255, 255, 0.9);
}
[data-theme="clay"] .field input:focus, [data-theme="clay"] .field select:focus, [data-theme="clay"] .field textarea:focus {
  box-shadow: inset 3px 3px 8px rgba(83, 92, 135, 0.12), 0 0 0 3px rgba(94, 157, 242, 0.35);
}
[data-theme="clay"] .site-footer { border-top: none; background: var(--bg-soft); }

[data-theme="clay"] .car-btn { border: none; border-radius: 50%; box-shadow: var(--shadow); }
[data-theme="clay"] .car-btn:hover { background: var(--accent-2); color: #fff; }
[data-theme="clay"] .mp-label { color: var(--accent-2); }
[data-theme="clay"] .mp-dot { border-color: rgba(58, 63, 85, 0.18); }
[data-theme="clay"] .mode-card.is-selected::after { border-radius: 14px; }

/* Motion: gentle pop */
[data-theme="clay"] .reveal {
  transform: translateY(12px) scale(0.96);
  transition-duration: 0.55s;
  transition-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1);
}
[data-theme="clay"] .reveal.in-view { transform: none; }

/* --------------------------------------------------------------------------
   Self-preview
   -------------------------------------------------------------------------- */
.mode-card[data-mode="clay"] .mc-prev {
  background: #eef0f7;
  border: none;
  border-radius: 16px;
  box-shadow: inset 2px 2px 6px rgba(83, 92, 135, 0.12), inset -2px -2px 6px rgba(255, 255, 255, 0.9);
}
.mode-card[data-mode="clay"] .mp-a {
  width: 2.1rem; height: 2.1rem; border-radius: 38%;
  background: linear-gradient(135deg, #fcd1ca, #f2705d);
  box-shadow: 3px 3px 8px rgba(83, 92, 135, 0.2);
  right: 0.6rem; top: 0.6rem;
}
.mode-card[data-mode="clay"] .mp-b {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: linear-gradient(135deg, #cfe2fd, #5e9df2);
  box-shadow: 2px 2px 6px rgba(83, 92, 135, 0.2);
  left: 0.7rem; top: 0.7rem;
}
.mode-card[data-mode="clay"] .mp-c {
  width: 2.4rem; height: 0.6rem; border-radius: 99px;
  background: #ffffff;
  box-shadow: 2px 2px 5px rgba(83, 92, 135, 0.15);
  left: 0.7rem; bottom: 1.5rem;
}
.mode-card[data-mode="clay"] .mc-aa {
  font-family: "Nunito", sans-serif; font-weight: 800;
  color: #3a3f55; left: 0.7rem; bottom: 0.4rem;
}