:root {
  --background: oklch(0.985 0.012 85);
  --foreground: oklch(0.25 0.08 265);
  --card: oklch(1 0 0);
  --primary: oklch(0.33 0.13 265);
  --primary-foreground: oklch(0.99 0.005 85);
  --secondary: oklch(0.95 0.025 85);
  --muted: oklch(0.96 0.015 85);
  --muted-foreground: oklch(0.5 0.04 265);
  --accent: oklch(0.56 0.21 25);
  --accent-foreground: oklch(0.99 0.005 85);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.9 0.02 85);
  --shadow-cute: 0 6px 0 0 var(--primary);
  --shadow-cute-red: 0 6px 0 0 var(--accent);
  --font-display: "Fredoka", sans-serif;
  --font-sans: "Nunito", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; border-color: var(--border); }
html { scroll-behavior: smooth; }
body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); line-height: 1.5; }
h1, h2, h3 { font-family: var(--font-display); color: var(--primary); line-height: 1.15; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.red { color: var(--accent); }
.muted { color: var(--muted-foreground); }
.small { font-size: 0.875rem; }
[hidden] { display: none !important; }

.flag-stripe {
  height: 8px;
  background: linear-gradient(90deg, var(--accent) 0 33.33%, var(--card) 33.33% 66.66%, var(--primary) 66.66% 100%);
}

.container { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; }
.section { padding-top: 3rem; padding-bottom: 3rem; scroll-margin-top: 1.5rem; }
.section h2, .contact h2 { text-align: center; font-size: 2.25rem; }

/* Header */
.header { display: flex; align-items: center; justify-content: space-between; padding-top: 1.25rem; padding-bottom: 1.25rem; }
.logo { display: flex; align-items: center; gap: 0.5rem; }
.logo-flag { width: 3rem; height: 2.25rem; border-radius: 0.375rem; box-shadow: var(--shadow-cute); }
.logo-text { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--primary); }
.nav { display: none; gap: 1.5rem; font-weight: 600; color: var(--primary); }
.nav a:hover { color: var(--accent); }
@media (min-width: 640px) { .nav { display: flex; } }

/* Hero */
.hero { max-width: 48rem; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; text-align: center; }
.pill { display: inline-block; border-radius: 999px; background: var(--secondary); padding: 0.25rem 1rem; font-size: 0.875rem; font-weight: 700; color: var(--accent); }
.hero h1 { margin-top: 1.25rem; font-size: 3rem; font-weight: 700; }
@media (min-width: 640px) { .hero h1 { font-size: 3.75rem; } }
.hero p { margin-top: 1.25rem; font-size: 1.125rem; color: var(--muted-foreground); }

/* Buttons */
.btn { display: inline-block; border: 0; cursor: pointer; border-radius: 999px; font-family: inherit; font-weight: 700; transition: transform 0.15s, opacity 0.15s; }
.btn-primary { margin-top: 2rem; padding: 0.75rem 2rem; background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-cute-red); }
.btn-primary:hover, .btn-send:hover { transform: translateY(2px); }
.btn-message { margin-top: 1.25rem; padding: 0.75rem; width: 100%; background: var(--accent); color: var(--accent-foreground); font-size: 1rem; }
.btn-message:hover { opacity: 0.9; }
.btn-send { width: 100%; padding: 0.75rem; background: var(--accent); color: var(--accent-foreground); box-shadow: var(--shadow-cute); font-size: 1rem; }
.btn-send:disabled { opacity: 0.6; }
.btn-small { margin-top: 1.5rem; padding: 0.5rem 1.5rem; background: var(--primary); color: var(--primary-foreground); }

/* Tutor cards */
.grid { margin-top: 2.5rem; display: grid; gap: 2rem; }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card { display: flex; flex-direction: column; overflow: hidden; border-radius: 1.5rem; border: 2px solid var(--primary); background: var(--card); box-shadow: var(--shadow-cute); transition: transform 0.15s; }
.card:hover { transform: translateY(-4px); }
.card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 1.5rem; }
.card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.card h3 { font-size: 1.5rem; }
.price { white-space: nowrap; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.price span { font-size: 0.875rem; color: var(--muted-foreground); }
.tagline { font-weight: 600; color: var(--accent); }
.bio { margin-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }
.tags { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tag { border-radius: 999px; background: var(--secondary); padding: 0.125rem 0.75rem; font-size: 0.75rem; font-weight: 700; color: var(--primary); }
.schedule { margin-top: 1rem; border-radius: 1rem; background: var(--muted); padding: 0.75rem; }
.schedule-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground); }
.slot { margin-top: 0.25rem; display: flex; justify-content: space-between; font-size: 0.875rem; }
.slot b { color: var(--primary); }
.card .spacer { flex: 1; }

/* FAQ */
.faq { margin-top: 2rem; display: grid; gap: 0.75rem; }
.faq details { border-radius: 1rem; border: 2px solid var(--border); background: var(--card); padding: 1.25rem; }
.faq details[open] { border-color: var(--primary); }
.faq summary { display: flex; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--primary); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary span { color: var(--accent); transition: transform 0.15s; }
.faq details[open] summary span { transform: rotate(45deg); }
.faq p { margin-top: 0.75rem; color: var(--muted-foreground); }

/* Contact */
.contact-wrap { max-width: 56rem; margin: 0 auto; padding: 0 1.5rem 5rem; scroll-margin-top: 1.5rem; }
.contact { border-radius: 1.5rem; background: var(--primary); padding: 2.5rem; text-align: center; color: var(--primary-foreground); box-shadow: var(--shadow-cute-red); }
.contact h2 { color: var(--primary-foreground); }
.contact > p { max-width: 36rem; margin: 0.75rem auto 0; opacity: 0.9; }
.contact .contact-email { margin-top: 1.5rem; font-family: var(--font-display); font-size: 1.25rem; opacity: 1; }
.contact .small { margin-top: 0.25rem; opacity: 0.75; }
.footer { padding-bottom: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }

/* Dialog */
.overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 1rem; background: color-mix(in oklab, var(--foreground) 40%, transparent); }
.dialog { width: 100%; max-width: 28rem; overflow: hidden; border-radius: 1.5rem; background: var(--card); box-shadow: var(--shadow-cute); }
.dialog-body { padding: 1.5rem; }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; }
.dialog h3 { font-size: 1.5rem; }
.close { border: 0; background: none; cursor: pointer; font-size: 1.5rem; color: var(--muted-foreground); }
.close:hover { color: var(--accent); }
#form { margin-top: 1rem; display: grid; gap: 0.75rem; }
#form input, #form textarea { width: 100%; border-radius: 0.75rem; border: 2px solid var(--border); background: var(--background); padding: 0.625rem 1rem; font: inherit; color: inherit; outline: none; }
#form input:focus, #form textarea:focus { border-color: var(--primary); }
#form .hp { display: none; }
.check { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--primary); }
#form .answer { width: 5rem; }
.error { font-size: 0.875rem; font-weight: 600; color: var(--destructive); }
.done { padding: 2rem 0; text-align: center; }
.emoji { font-size: 3rem; }
.done-text { margin-top: 0.75rem; font-family: var(--font-display); font-size: 1.25rem; color: var(--primary); }