/* Claymorphism preview: soft pastel surfaces, big radii, puffy double shadows.
   Loaded after main.css so it overrides the Neobrutalism layer. */
:root {
  --navy: #2e2a52;
  --navy-2: #241f45;
  --slate: #6b6890;
  --ink: #2e2a52;
  --mist: #ece6ff;
  --surface: #fbf9ff;
  --line: #d9d2f5;
  --line-soft: #e8e2fb;
  --orange: #ff8a65;
  --orange-dark: #f06a43;
  --orange-soft: #ffe3d6;
  --teal: #5fd4c0;
  --teal-soft: #d8f6ef;
  --blue: #7c6cf0;
  --blue-soft: #e4dfff;
  --green: #2fb487;
  --green-soft: #d5f5e6;
  --red: #ec6b84;
  --red-soft: #ffdfe6;
  --clay-out: 10px 12px 24px rgba(92, 78, 160, 0.22), -8px -8px 18px rgba(255, 255, 255, 0.9);
  --clay-in: inset 6px 6px 12px rgba(92, 78, 160, 0.14), inset -6px -6px 12px rgba(255, 255, 255, 0.9);
  --shadow-sm: var(--clay-out);
  --shadow-md: 14px 18px 34px rgba(92, 78, 160, 0.26), -10px -10px 22px rgba(255, 255, 255, 0.95);
  --radius: 28px;
}

body { background: linear-gradient(160deg, #f4efff 0%, #e9f7fb 100%); color: var(--ink); }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.01em; color: var(--navy); }

/* Buttons: pill-shaped, puffy, press in on click. */
.button {
  border: none;
  border-radius: 999px;
  box-shadow: var(--clay-out);
  font-weight: 800;
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.button:hover { transform: translateY(-2px); box-shadow: 12px 16px 28px rgba(92, 78, 160, 0.3), -8px -8px 18px rgba(255, 255, 255, 0.95); }
.button:active { transform: translateY(1px); box-shadow: var(--clay-in); }
.button-primary { background: var(--orange); color: #fff; }
.button-primary:hover { background: var(--orange-dark); }
.button-secondary { background: var(--blue); color: #fff; }
.button-secondary:hover { background: #6a59e6; }
.button-light, .hero .button-outline { background: #fff; color: var(--navy); border: none; box-shadow: var(--clay-out); }
.topbar { background: #fff; color: var(--navy); }
.topbar a, .topbar span, .topbar button { color: var(--navy); }
.topbar a:hover, .topbar button:hover { color: var(--blue); }
.menu-toggle { border: none; border-radius: 16px; background: #fff; color: var(--navy); box-shadow: var(--clay-out); }
.menu-toggle svg, .menu-toggle .icon { color: var(--navy); stroke: var(--navy); }
.button-outline { background: transparent; color: #fff; border: none; }
.button-ghost { box-shadow: none; background: transparent; }

/* Inputs sit in a recessed clay well. */
input, select, textarea {
  border: none;
  border-radius: 20px;
  background: #fff;
  color: var(--ink);
  box-shadow: var(--clay-in);
}
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(124, 108, 240, 0.35); outline-offset: 2px; }

/* Cards and panels: big rounded puffs. */
.plan-card, .promo-card, .promo-step, .speed-test-card, .metric, .compare-side, .audit,
.shot, .pay-method, .promo-code, .upi-qr, .upi-id, .admin-refund form, .portal-refund form,
.speed-lock, .tool-card, .service-card, .blog-card, .price-card {
  border: none;
  border-radius: 32px;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.pay-method.active { box-shadow: var(--clay-in); }

/* Pills and chips. */
.chip, .badge, .promo-offer, .achat-note-count, .speed-tier, .presence-chip, .hero-eyebrow {
  border: none;
  border-radius: 999px;
  box-shadow: var(--clay-out);
}
.promo-step span { border: none; border-radius: 50%; background: var(--teal); color: var(--navy); box-shadow: var(--clay-out); }

/* Hero: soft lilac block. */
.hero { background: linear-gradient(160deg, #e3dbff 0%, #d3f3ea 100%); color: var(--navy); border-bottom: none; border-radius: 0 0 48px 48px; }
.hero-copy, .hero-hints, .hero h1 { color: var(--navy); }
.hero-hints button { border: none; border-radius: 999px; background: #fff; color: var(--navy); box-shadow: var(--clay-out); }
.hero-hints button:hover { background: #fff; color: var(--navy); }

/* Header, footer and the black rules from the other theme. */
.site-header, .topbar, .footer { border-bottom: none; background: #fff; color: var(--ink); box-shadow: 0 8px 20px rgba(92, 78, 160, 0.12); }
.footer { border-top: none; background: #2a2550; color: #d9d4f7; }
.section-navy { background: linear-gradient(160deg, #3b3370 0%, #2d6e6a 100%); }
.section-navy .section-kicker { color: #ffd6b8; }

/* Tables, bubbles, launcher, meters. */
.data-table, .history-table, .waterfall { border: none; border-radius: 24px; box-shadow: var(--clay-out); overflow: hidden; }
.achat-bubble, .chat-panel { border: none; border-radius: 24px; box-shadow: var(--clay-out); }
.chat-launcher { border: none; border-radius: 999px; background: var(--blue); color: #fff; box-shadow: var(--clay-out); }
.primary-nav.open { border-bottom: none; box-shadow: var(--shadow-md); }
.quota-meter, .score-bar, .family .bar, .spark b { border: none; border-radius: 999px; box-shadow: var(--clay-in); }
.grade-dial, .grade-inner { border: none; box-shadow: var(--clay-out); }