/* ==========================================================================
   Asobu — sakura theme
   Palette is lifted straight from the launcher so the site and the app read as
   one product. Accent is deliberately deeper than blossom pink so white text on
   it clears WCAG AA; the soft petal tint lives in --accent-soft.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&display=swap');

:root {
  --bg:           #FDF8FA;
  --bg-alt:       #F7EFF3;
  --surface:      #FFFFFF;
  --border:       #EDDFE6;
  --text:         #2C2126;
  --muted:        #7A6971;
  --accent:       #C44370;
  --accent-hover: #AE3A63;
  --accent-soft:  #FFE6EE;
  --on-accent:    #FFFFFF;

  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 26px;

  /* Soft-UI depth: shadows that lift without the muddy neumorphic look. */
  --shadow-sm: 0 2px 8px rgba(120, 60, 85, 0.06);
  --shadow:    0 8px 28px rgba(120, 60, 85, 0.10);
  --shadow-lg: 0 22px 60px rgba(120, 60, 85, 0.16);

  --display: 'Fredoka', ui-rounded, system-ui, sans-serif;
  --body:    'Nunito', system-ui, sans-serif;

  --page: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #161114;
    --bg-alt:       #1B1519;
    --surface:      #201A1E;
    --border:       #342B30;
    --text:         #F4EEF0;
    --muted:        #A2939A;
    --accent:       #FF9EC0;
    --accent-hover: #FFB6D0;
    --accent-soft:  #3B222B;
    --on-accent:    #2A1620;

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.32);
    --shadow:    0 8px 28px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.55);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .brand-name {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.18rem; }

p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

.wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }

/* Keyboard focus must stay obvious everywhere. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- petals ------------------------------------------------------- */

.petals { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

.petal {
  position: absolute;
  top: -8vh;
  width: 14px; height: 13px;
  background: var(--accent);
  opacity: 0.30;
  /* Lopsided radii read as a petal rather than a circle. */
  border-radius: 100% 0 100% 0;
  animation: fall linear infinite;
}

@keyframes fall {
  0%   { transform: translateY(-10vh) translateX(0) rotate(0deg); }
  100% { transform: translateY(112vh) translateX(14vw) rotate(420deg); }
}

.petal:nth-child(1) { left:  4%; animation-duration: 15s; animation-delay:  0s;   transform: scale(0.8); }
.petal:nth-child(2) { left: 18%; animation-duration: 19s; animation-delay: -4s;   opacity: 0.20; }
.petal:nth-child(3) { left: 31%; animation-duration: 13s; animation-delay: -8s;   transform: scale(0.6); }
.petal:nth-child(4) { left: 46%; animation-duration: 21s; animation-delay: -2s;   opacity: 0.16; }
.petal:nth-child(5) { left: 58%; animation-duration: 16s; animation-delay: -11s;  transform: scale(0.9); }
.petal:nth-child(6) { left: 71%; animation-duration: 24s; animation-delay: -6s;   opacity: 0.22; }
.petal:nth-child(7) { left: 84%; animation-duration: 17s; animation-delay: -14s;  transform: scale(0.7); }
.petal:nth-child(8) { left: 93%; animation-duration: 20s; animation-delay: -9s;   opacity: 0.18; }

/* ---------- header ------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--border);
}

.site-header .wrap {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.85rem 0;
}

.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px;
  background: var(--accent);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.brand-mark svg { width: 17px; height: 17px; }
.brand-name { font-size: 1.3rem; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.6rem; }
.nav a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: color 200ms ease; }
.nav a:hover { color: var(--text); }

/* ---------- buttons ------------------------------------------------------ */

.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.7rem;
  border-radius: 14px;
  font-family: var(--display);
  font-weight: 600; font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
.btn svg { width: 18px; height: 18px; }

.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--accent); transform: translateY(-2px); }

/* ---------- hero --------------------------------------------------------- */

.hero { position: relative; padding: 5.5rem 0 4rem; text-align: center; overflow: hidden; }

.hero-art { position: absolute; inset: 0; z-index: -1; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; }

/* Zero-alpha stop carries the page background's own RGB. A bare "transparent"
   is transparent *white*, so the image would haze out through grey on the way. */
.hero-art::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--bg) 62%, transparent) 0%,
      color-mix(in srgb, var(--bg) 78%, transparent) 45%,
      var(--bg) 100%);
}

.hero h1 { margin-bottom: 1rem; }
.hero h1 .accent { color: var(--accent); }

.tagline { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--muted); max-width: 34rem; margin: 0 auto 2rem; }

.hero-actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

.badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--accent-soft); color: var(--accent);
  padding: 0.4rem 0.95rem; border-radius: 999px;
  font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em;
  margin-bottom: 1.5rem;
}

/* Staggered entrance — one orchestrated moment beats scattered micro-motion. */
.rise { animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) backwards; }
.rise:nth-child(1) { animation-delay: 60ms; }
.rise:nth-child(2) { animation-delay: 150ms; }
.rise:nth-child(3) { animation-delay: 240ms; }
.rise:nth-child(4) { animation-delay: 330ms; }

@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- sections ----------------------------------------------------- */

section { position: relative; z-index: 1; padding: 4.5rem 0; }

.section-head { max-width: 40rem; margin-bottom: 2.5rem; }
.section-head p { color: var(--muted); margin: 0.7rem 0 0; }

.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }

.card-icon {
  width: 42px; height: 42px; border-radius: 13px;
  background: var(--accent-soft);
  display: grid; place-items: center;
  margin-bottom: 1rem;
}
.card-icon svg { width: 21px; height: 21px; stroke: var(--accent); }
.card h3 { margin-bottom: 0.45rem; }
.card p { color: var(--muted); font-size: 0.96rem; margin: 0; }

.panel {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(1.8rem, 4vw, 3rem);
}

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; counter-reset: step; }
.steps li { display: flex; gap: 1rem; align-items: flex-start; }
.steps li::before {
  counter-increment: step; content: counter(step);
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 600; font-size: 0.9rem;
}
.steps strong { display: block; }
.steps span { color: var(--muted); font-size: 0.96rem; }

.note {
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  padding: 1rem 1.3rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text);
}
.note p:last-child { margin-bottom: 0; }

/* ---------- prose (privacy page) ---------------------------------------- */

.prose { max-width: 46rem; }
.prose h2 { margin: 2.6rem 0 0.8rem; }
.prose h2:first-of-type { margin-top: 1.5rem; }
.prose h3 { color: var(--accent); margin-bottom: 0.5rem; }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--accent-soft);
  padding: 0.15em 0.45em;
  border-radius: 6px;
}
.prose ul { color: var(--muted); padding-left: 1.2rem; }
.prose li { margin-bottom: 0.5rem; }
.prose .lede { font-size: 1.1rem; color: var(--muted); }

/* ---------- footer ------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  padding: 3rem 0 2.5rem;
  position: relative; z-index: 1;
}
.footer-top { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; margin-bottom: 2rem; }
.footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.footer-links a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.footer-links a:hover { color: var(--accent); }
.disclaimer { color: var(--muted); font-size: 0.86rem; max-width: 46rem; margin: 0; }

/* ---------- motion preference ------------------------------------------- */

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