/* ============================================================
   DrillUp | site design system
   Style: Refined premium-consumer (playful edge), one accent
   Brand accent : indigo #4F46E5  (locked)
   Semantic CTA  : emerald #22C55E (not a decorative accent)
   Display font  : Baloo 2   Body font : Nunito
   Radius lock   : cards 24px | buttons 14px | chips/pills 999px
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;500;600;700;800;900&family=Comic+Neue:wght@400;700&display=swap');

:root {
  /* Brand */
  --primary: #4F46E5;          /* accent, decorative */
  --primary-strong: #4238D6;   /* hover */
  --primary-ink: #312E81;
  --cta: #059669;              /* emerald 600, CTA only */
  --cta-ink: #064E3B;

  /* Neutrals */
  --bg: #F6F7FC;
  --surface: #FFFFFF;
  --surface-muted: #EEF0FA;
  --surface-strong: #E4E8FA;
  --ink: #17143A;
  --ink-soft: #4A4680;
  --muted: #6B66A8;
  --line: #DFE2F3;
  --line-strong: #C6C9F0;

  /* Semantic */
  --amber: #F59E0B;
  --amber-bg: #FFF3D6;
  --amber-ink: #92400E;
  --rose: #F43F5E;
  --rose-bg: #FFE8EC;
  --sky: #0284C7;
  --sky-bg: #E0F2FE;

  /* Shape lock */
  --radius-card: 12px;
  --radius-btn: 14px;
  --radius-pill: 999px;
  --border-w: 1px;

  /* Elevation */
  --shadow-soft: 0 1px 2px rgba(24, 22, 66, 0.05), 0 20px 38px -20px rgba(79, 70, 229, 0.22);
  --shadow-lift: 0 2px 4px rgba(24, 22, 66, 0.06), 0 26px 52px -22px rgba(79, 70, 229, 0.32);
  --shadow-press: 0 1px 0 rgba(24, 22, 66, 0.08), 0 6px 12px -8px rgba(79, 70, 229, 0.18);
  --ring: 0 0 0 3px rgba(79, 70, 229, 0.45);
}

/* Dark: tokens flip, page theme stays one. */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #818CF8;
    --primary-strong: #A5B4FC;
    --primary-soft: #6366F1;
    --cta: #34D399;
    --cta-ink: #022C22;

    --bg: #0E0F23;
    --surface: #171735;
    --surface-muted: #1B1C3E;
    --surface-strong: #24264F;
    --ink: #EEEDFF;
    --ink-soft: #C5C3EC;
    --muted: #9A97CF;
    --line: #2C2E5C;
    --line-strong: #3A3D79;

    --amber: #FBBF24;
    --amber-soft: #3A2E0E;
    --amber-ink: #FDE68A;
    --rose: #FB7185;
    --rose-bg: #3A1220;
    --sky: #38BDF8;
    --sky-bg: #0B2333;

    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 40px -18px rgba(0, 0, 0, 0.6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 28px 54px -22px rgba(0, 0, 0, 0.7);
  }
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography ---------- */

.font-display {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
}

.font-playful {
  font-family: 'Comic Neue', 'Baloo 2', cursive;
}

.h1-clay {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-size: clamp(2.5rem, 6.5vw, 4.1rem);
  color: var(--ink);
}

.h2-clay {
  font-family: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  font-size: clamp(1.65rem, 3.4vw, 2.3rem);
  color: var(--ink);
  letter-spacing: -0.005em;
}

.text-balance { text-wrap: balance; }

.text-soft { color: var(--muted); }
.text-primary { color: var(--primary); }
.text-primary-soft { color: var(--primary-soft); }
.on-surface { color: var(--ink); }
.on-surface-soft { color: var(--muted); }

/* Secondary text on the deep indigo CTA panel */
.on-brand { color: rgba(255, 255, 255, 0.88); }
.on-brand-muted { color: rgba(255, 255, 255, 0.66); }

.underline-wavy {
  text-decoration: underline;
  text-decoration-thickness: 5px;
  text-decoration-color: var(--amber);
  text-decoration-style: wavy;
  text-underline-offset: 6px;
}

::selection {
  background: var(--primary-soft);
  color: #fff;
}

/* ---------- Surfaces (section backgrounds adapt to theme) ---------- */

.surface { background: var(--bg); }
.surface-alt { background: var(--surface-muted); }
.surface-card { background: var(--surface); }

.line-top { border-top: var(--border-w) solid var(--line) !important; }

/* ---------- Cards ---------- */

.clay {
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.clay-flat {
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-card);
}

.clay-primary {
  background: var(--primary);
  color: #fff;
  border: var(--border-w) solid var(--primary-soft);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lift);
}

.clay-cream {
  background: var(--amber-soft);
  border: var(--border-w) solid var(--amber);
  border-radius: var(--radius-card);
}

.clay-hover {
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}
.clay-hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
  border-color: var(--line-strong);
}
.clay-hover:active {
  transform: translateY(0);
  box-shadow: var(--shadow-press);
}

/* ---------- Chips / pills ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  background: var(--surface-muted);
  border: var(--border-w) solid var(--line);
  padding: 4px 14px;
  font-weight: 800;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink);
  white-space: nowrap;
}

.chip-amber { background: var(--amber-soft); border-color: var(--amber); color: var(--amber-ink); }
.chip-sky { background: var(--sky-bg); border-color: var(--sky); color: var(--sky); }
.chip-green { background: #DCFCE7; border-color: #059669; color: #065F46; }
.chip-rose { background: var(--rose-bg); border-color: var(--rose); color: var(--rose); }
.chip-indigo { background: var(--surface-strong); border-color: var(--primary-soft); color: var(--primary-soft); }

/* ---------- Navigation ---------- */

.nav-floating {
  position: sticky;
  top: 14px;
  z-index: 50;
}

.nav-pill {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-press);
}

.nav-link {
  position: relative;
  font-weight: 800;
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  font-size: 0.92rem;
  transition: background-color 180ms ease-out, color 180ms ease-out;
}
.nav-link:hover {
  background: var(--surface-strong);
  color: var(--ink);
  text-decoration: none;
}
.nav-link[aria-current='page'] {
  background: var(--ink);
  color: var(--bg);
}

/* ---------- Buttons ---------- */

.btn-clay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  cursor: pointer;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-btn);
  padding: 13px 22px;
  font-size: 1rem;
  line-height: 1.2;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
  text-decoration: none;
}
.btn-clay:hover { transform: translateY(-2px); }
.btn-clay:active { transform: translateY(0); }

.btn-primary {
  background: var(--primary);
  border-color: var(--primary-soft);
  color: #fff;
  box-shadow: 0 2px 0 var(--primary-soft), var(--shadow-soft);
}
.btn-primary:hover { background: var(--primary-strong); box-shadow: 0 3px 0 var(--primary-soft), var(--shadow-lift); }
.btn-primary:active { box-shadow: 0 1px 0 var(--primary-soft), var(--shadow-press); }

.btn-cta {
  background: var(--cta);
  border-color: var(--cta);
  color: #fff;
  box-shadow: 0 2px 0 var(--cta-ink), var(--shadow-soft);
}
.btn-cta:hover { background: color-mix(in srgb, var(--cta) 88%, #fff); box-shadow: 0 3px 0 var(--cta-ink), var(--shadow-lift); }
.btn-cta:active { box-shadow: 0 1px 0 var(--cta-ink), var(--shadow-press); }

.btn-white {
  background: var(--surface);
  border-color: var(--primary-soft);
  color: var(--ink);
  box-shadow: 0 2px 0 var(--surface-strong), var(--shadow-soft);
}
.btn-white:hover { box-shadow: 0 3px 0 var(--surface-strong), var(--shadow-lift); }
.btn-white:active { box-shadow: 0 1px 0 var(--surface-strong), var(--shadow-press); }

/* ---------- Forms ---------- */

.field {
  width: 100%;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--ink);
  padding: 12px 16px;
  font-weight: 600;
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out;
}
.field::placeholder { color: var(--muted); }
.field:focus {
  outline: none;
  border-color: var(--primary-soft);
  box-shadow: var(--ring);
}

.field-label {
  display: block;
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 8px;
  font-size: 0.92rem;
}

/* ---------- Floating animation (hero asset) ---------- */

@keyframes clay-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}
.clay-float { animation: clay-float 6s ease-in-out infinite; }

@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50% { transform: scale(1.1) rotate(3deg); }
}
.flame-flicker {
  display: inline-block;
  animation: flame-flicker 1.6s ease-in-out infinite;
  transform-origin: 50% 85%;
}

/* ---------- Phone mockup ---------- */

.phone {
  width: 280px;
  border: var(--border-w) solid var(--ink-soft);
  border-radius: 40px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  padding: 12px;
}

.phone-notch {
  width: 96px;
  height: 22px;
  margin: 2px auto 8px;
  border-radius: var(--radius-pill);
  background: var(--ink);
}

/* ---------- Focus & a11y ---------- */

:focus-visible {
  outline: 3px solid var(--primary-soft);
  outline-offset: 3px;
  border-radius: 8px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 18px;
  border-radius: 0 0 14px 0;
  z-index: 100;
  font-weight: 700;
}
.skip-link:focus { left: 0; }

details summary::-webkit-details-marker { display: none; }
details summary { cursor: pointer; list-style: none; }

/* FAQ rows as hairline lists */
.faq-row {
  border-top: 1px solid var(--line);
}
.faq-row:last-of-type {
  border-bottom: 1px solid var(--line);
}

/* Hairline dividers for numbered steps */
.step-row {
  border-top: 1px solid var(--line);
}
.step-row:first-child {
  border-top: none;
}

/* ---------- Shared primitives (theme-aware) ---------- */

.thick-line { border: 1px solid var(--line-strong); }
.soft-panel {
  background: var(--surface-muted);
  border-radius: var(--radius-card);
}
.screen {
  background: var(--surface-muted);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 14px;
}
.note-amber {
  background: var(--amber-soft);
  border: 1px solid var(--amber);
  color: var(--amber-ink);
  border-radius: var(--radius-btn);
}
.note-sky {
  background: var(--sky-bg);
  border: 1px solid var(--sky);
  color: var(--sky);
  border-radius: var(--radius-btn);
}
.note-indigo {
  background: var(--surface-strong);
  border: 1px solid var(--primary-soft);
  color: var(--primary-soft);
  border-radius: var(--radius-btn);
}
.icon-tile {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--surface-strong);
  color: var(--primary-soft);
  border: 1px solid var(--line-strong);
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--line-strong);
}
.dot-active {
  background: var(--primary-strong);
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}