/* Nectar & Greens — Boreal / iOS 26 glass */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Manrope:wght@400;500;600;700&display=swap");

:root {
  --pearl: oklch(0.985 0.003 180);
  --mist: oklch(0.945 0.006 180);
  --bg: oklch(0.985 0.003 180);
  --fg: oklch(0.22 0.015 200);
  --muted: oklch(0.48 0.012 200);
  --sage: oklch(0.72 0.035 180);
  --mint: oklch(0.62 0.07 175);
  --coral: oklch(0.7 0.09 30);
  --ochre: oklch(0.83 0.09 85);
  --primary: oklch(0.55 0.075 178);
  --primary-fg: oklch(0.99 0.003 180);
  --border: oklch(0.22 0.015 200 / 8%);
  --input: oklch(0.22 0.015 200 / 12%);
  --ring: oklch(0.62 0.07 175 / 45%);

  --glass-bg: oklch(1 0 0 / 55%);
  --glass-bg-soft: oklch(1 0 0 / 40%);
  --glass-border: oklch(1 0 0 / 60%);
  --glass-border-soft: oklch(1 0 0 / 50%);
  --shadow-glass:
    0 1px 0 oklch(1 0 0 / 70%) inset,
    0 0 0 1px oklch(0.22 0.015 200 / 5%),
    0 30px 60px -25px oklch(0.22 0.015 200 / 18%),
    0 10px 25px -15px oklch(0.22 0.015 200 / 12%);
  --shadow-glass-soft:
    0 1px 0 oklch(1 0 0 / 60%) inset,
    0 0 0 1px oklch(0.22 0.015 200 / 4%),
    0 12px 30px -18px oklch(0.22 0.015 200 / 14%);

  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }

body {
  font-family: var(--font-sans);
  color: var(--fg);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 55% at 15% 10%, oklch(0.62 0.07 175 / 14%), transparent 60%),
    radial-gradient(ellipse 60% 50% at 95% 90%, oklch(0.72 0.035 180 / 16%), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 15%, oklch(0.83 0.09 85 / 8%), transparent 70%),
    radial-gradient(ellipse 40% 35% at 10% 90%, oklch(0.7 0.09 30 / 6%), transparent 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; }

.page {
  position: relative;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.25rem;
}

.footer {
  margin-top: 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: color-mix(in oklab, var(--muted) 80%, transparent);
  text-align: center;
}

/* glass surfaces */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border-radius: 1.5rem;
}
.glass-soft {
  background: var(--glass-bg-soft);
  border: 1px solid var(--glass-border-soft);
  box-shadow: var(--shadow-glass-soft);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-radius: 1.5rem;
}

/* Bento layout (index) */
.bento {
  width: 100%;
  max-width: 64rem;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (min-width: 640px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
}

.tile { padding: 1.5rem; }
@media (min-width: 640px) { .tile { padding: 1.75rem; } }

.tile-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 2rem;
  min-height: clamp(320px, 48vh, 460px);
}
@media (min-width: 640px) {
  .tile-hero { grid-column: span 4 / span 4; grid-row: span 2 / span 2; padding: 3rem; }
}
.tile-status { display: flex; flex-direction: column; justify-content: space-between; }
@media (min-width: 640px) { .tile-status { grid-column: span 2 / span 2; } }
.tile-gears { display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (min-width: 640px) { .tile-gears { grid-column: span 2 / span 2; } }
.tile-feature { padding: 1.25rem; }
@media (min-width: 640px) { .tile-feature { grid-column: span 2 / span 2; } }

.eyebrow {
  font-size: 11px; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.4em; color: var(--mint);
}
.eyebrow-muted { color: var(--muted); letter-spacing: 0.3em; }

.h-hero {
  margin-top: 1.25rem;
  font-size: clamp(3rem, 8vw, 4.75rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.lede {
  margin-top: 1.5rem;
  max-width: 28rem;
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.6;
  color: var(--muted);
}

.logo-float { margin-top: 1.75rem; animation: float-soft 7s ease-in-out infinite; }
.logo-img {
  display: block; width: auto; height: auto; max-width: 220px;
  filter: drop-shadow(0 8px 24px oklch(0.22 0.015 200 / 12%));
  user-select: none;
}

.dot-wrap { display: inline-flex; align-items: center; gap: 0.5rem; }
.dot { position: relative; display: inline-flex; width: 0.5rem; height: 0.5rem; }
.dot::before {
  content: ""; position: absolute; inset: 0; border-radius: 9999px;
  background: var(--mint); opacity: 0.6; animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.dot::after {
  content: ""; position: relative; display: inline-block; width: 0.5rem; height: 0.5rem;
  border-radius: 9999px; background: var(--mint);
}

.tile-title {
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 500; line-height: 1.2;
}
.tile-body {
  margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.55; color: var(--muted);
}

.feature-head { display: flex; align-items: center; gap: 0.5rem; }
.feature-icon {
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem;
  border-radius: 9999px; background: color-mix(in oklab, var(--mint) 15%, transparent); color: var(--mint);
}
.feature-icon svg { width: 1rem; height: 1rem; }
.feature-title { font-family: var(--font-display); font-weight: 500; font-size: 0.875rem; letter-spacing: -0.01em; }
.feature-body { margin-top: 0.5rem; font-size: 13px; line-height: 1.55; color: var(--muted); }

/* Gears */
.gears { position: relative; width: 8rem; height: 6rem; margin: 0 auto; }
.gear { position: absolute; transform-origin: 50% 50%; }
.gear svg { display: block; }
.gear-a { left: 0.5rem; top: 0.5rem; animation: spin 18s linear infinite; color: color-mix(in oklab, var(--mint) 70%, transparent); }
.gear-b { right: 0.25rem; top: 1.75rem; animation: spin-rev 14s linear infinite; color: color-mix(in oklab, var(--sage) 80%, transparent); }
.gear-c { bottom: 0; left: 3rem; animation: spin 12s linear infinite; color: color-mix(in oklab, var(--ochre) 70%, transparent); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
@keyframes float-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin-base { to { transform: rotate(360deg); } }

.fade-up { animation: fade-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* Compact card (auth/reset pages) */
.shell-compact {
  width: 100%; max-width: 28rem; padding: 2rem;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-radius: 1.75rem;
}
@media (min-width: 640px) { .shell-compact { padding: 2.5rem; } }

.icon-wrap { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; }
.icon-wrap svg { width: 2.25rem; height: 2.25rem; color: var(--sage); }
.icon-wrap.error svg { color: var(--coral); }
.icon-wrap .spin { animation: spin-base 1s linear infinite; }

.h-card {
  margin-top: 1rem;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 500;
}
.lede-card {
  margin-top: 0.75rem; max-width: 22rem; font-size: 0.875rem; line-height: 1.6;
  color: var(--muted);
}

.form { margin-top: 1.5rem; width: 100%; display: grid; gap: 0.75rem; text-align: left; }
.label { display: grid; gap: 0.375rem; font-size: 0.875rem; color: var(--muted); }
.input {
  width: 100%; padding: 0.75rem 1rem; font-size: 1rem; color: var(--fg);
  background: color-mix(in oklab, white 80%, transparent);
  border: 1px solid var(--input); border-radius: 0.875rem;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.input:focus { border-color: var(--sage); box-shadow: 0 0 0 3px var(--ring); }
.btn {
  margin-top: 0.5rem; display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.75rem 1.25rem; font-size: 1rem; font-weight: 600;
  color: var(--primary-fg); background: var(--primary);
  border: none; border-radius: 0.875rem; cursor: pointer;
  box-shadow: 0 10px 25px -10px color-mix(in oklab, var(--primary) 30%, transparent);
  transition: filter .15s, opacity .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }