:root {
  --orange: #f28c3a;
  --orange-dark: #e8542a;
  --ink: #2b1d17;
  --muted: #7a6a62;
  --cream: #fff8f0;
  --card: #ffffff;
  --radius: 28px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
}

* { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--orange-dark); }

h1, h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; margin: 0.2em auto 0.4em; max-width: 14em; }
h2 { font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.1; margin: 0.3em 0; }
p { font-size: 1.15rem; line-height: 1.55; }
.small { font-size: 0.92rem; color: var(--muted); }

.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px;
  background: rgba(255, 248, 240, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.brand img { width: 30px; }
.bar-right { display: flex; gap: 10px; align-items: center; }
.lang { border: 0; background: rgba(0,0,0,0.06); border-radius: 999px; padding: 7px 12px; font: inherit; font-weight: 600; font-size: 0.85rem; cursor: pointer; color: var(--ink); }
.pill { background: var(--ink); color: white; text-decoration: none; padding: 8px 16px; border-radius: 999px; font-weight: 600; font-size: 0.92rem; }

.hero {
  text-align: center;
  padding: 40px 20px 90px;
  background: linear-gradient(180deg, #fbe3cc 0%, var(--cream) 100%);
}
.hero .kura { width: 220px; height: auto; margin: 10px auto 0; filter: drop-shadow(0 20px 30px rgba(232, 84, 42, 0.25)); }
.eyebrow { font-weight: 700; color: var(--orange-dark); margin: 0.6em 0 0; font-size: 1.2rem; }
.lead { max-width: 36em; margin: 0 auto 1.6em; color: #4d3d35; }

.button {
  display: inline-block; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--orange), var(--orange-dark));
  color: white; font: inherit; font-weight: 700; font-size: 1.1rem;
  padding: 16px 30px; border-radius: 999px; text-decoration: none;
  box-shadow: 0 10px 24px rgba(232, 84, 42, 0.3);
  transition: transform 0.15s ease;
}
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: 0.6; cursor: default; transform: none; }

.bob { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .bob { animation: none; } }

section { padding: 70px 20px; max-width: 1080px; margin: 0 auto; }
.mood { width: 76px; }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.feature.flip .text { order: 2; }
.feature .text p { color: #4d3d35; max-width: 26em; }
.shot { border-radius: var(--radius); box-shadow: 0 30px 60px rgba(43, 29, 23, 0.16), 0 0 0 1px rgba(43, 29, 23, 0.06); background: white; }
.shot.phone { width: 300px; justify-self: center; border-radius: 40px; }
.shot.wide { border-radius: 14px; margin-top: 30px; }

.mac { text-align: center; }
.mac p { color: #4d3d35; max-width: 32em; margin: 0 auto; }

.privacy { text-align: center; max-width: 720px; }
.privacy .mood { margin: 0 auto; }
.privacy p { color: #4d3d35; }

.signup {
  text-align: center; max-width: 640px;
  background: var(--card); border-radius: var(--radius);
  padding: 50px 30px; margin: 40px auto 80px;
  box-shadow: 0 20px 50px rgba(43, 29, 23, 0.08);
}
.signup .mood { margin: 0 auto; width: 96px; }
.signup p { color: #4d3d35; }
form { display: grid; gap: 18px; margin-top: 24px; }
input[type=email] {
  font: inherit; font-size: 1.1rem; padding: 15px 20px; border-radius: 16px;
  border: 1px solid rgba(43, 29, 23, 0.15); background: var(--cream); outline: none;
}
input[type=email]:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(242, 140, 58, 0.2); }
fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
legend { width: 100%; font-weight: 600; margin-bottom: 8px; }
fieldset label { cursor: pointer; }
fieldset input { position: absolute; opacity: 0; }
fieldset label:has(input) { padding: 9px 18px; border-radius: 999px; background: var(--cream); border: 1px solid rgba(43, 29, 23, 0.12); }
fieldset label:has(input:checked) { background: var(--ink); color: white; border-color: var(--ink); }
fieldset label:has(input:focus-visible) { outline: 3px solid rgba(242, 140, 58, 0.5); }
.trap { position: absolute; left: -9999px; }
.message { font-weight: 600; min-height: 1.5em; margin: 0; }
.message.ok { color: #1f8a4c; }
.message.error { color: #c2331b; }

footer { text-align: center; padding: 30px 20px 50px; color: var(--muted); }
footer p { font-size: 0.92rem; }

@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .feature.flip .text { order: 0; }
  .feature .text p { margin: 0 auto; }
  .feature .mood { margin: 0 auto; }
  .shot.phone { width: 260px; }
  .pill { display: none; }
}