:root {
  --color-bg: #090d14;
  --color-surface: rgba(18, 24, 38, 0.68);
  --color-surface-strong: rgba(19, 26, 41, 0.9);
  --color-text: #e8ecf3;
  --color-muted: #a3aec2;
  --color-border: rgba(173, 184, 205, 0.2);
  --color-accent: #9ec4ff;

  --radius-md: 16px;
  --radius-lg: 24px;

  --shadow-soft: 0 18px 42px rgba(3, 7, 18, 0.34);
  --shadow-float: 0 22px 44px rgba(42, 93, 168, 0.16);

  --motion-fast: 180ms;
  --motion-base: 320ms;
  --motion-slow: 520ms;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;

  --container-max: 1240px;

  --font-heading: "Sora", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  --fs-h1: clamp(2.45rem, 3.7vw, 4rem);
  --fs-h2: clamp(1.85rem, 2.8vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.8vw, 1.55rem);
  --fs-body: 1rem;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: 1.65;
  letter-spacing: 0.01em;
  background:
    radial-gradient(1000px 520px at 15% -8%, rgba(135, 169, 222, 0.22), transparent 64%),
    radial-gradient(880px 480px at 86% 5%, rgba(102, 122, 173, 0.2), transparent 62%),
    radial-gradient(760px 560px at 50% 115%, rgba(41, 66, 103, 0.26), transparent 64%),
    var(--color-bg);
}

h1,
h2,
h3 {
  font-family: var(--font-heading);
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.07;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.12;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.22;
}

.container {
  max-width: var(--container-max);
  padding-inline: var(--space-3);
}

header {
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--color-bg) 52%, transparent);
  border-bottom: 1px solid rgba(196, 203, 219, 0.14);
  transition: background var(--motion-base) var(--ease-premium), border-color var(--motion-base) var(--ease-premium);
}

.nav {
  height: 78px;
  transition: height var(--motion-base) var(--ease-premium);
}

body.nav-scrolled header {
  background: rgba(9, 14, 23, 0.86);
  border-bottom-color: rgba(196, 203, 219, 0.22);
}

body.nav-scrolled .nav {
  height: 66px;
}

.navlinks a,
.footlinks a,
.menu-links a,
.btn {
  border-radius: var(--radius-md);
}

.btn {
  position: relative;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface-strong) 84%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    transform var(--motion-fast) var(--ease-premium),
    box-shadow var(--motion-base) var(--ease-premium),
    border-color var(--motion-base) var(--ease-premium),
    background var(--motion-base) var(--ease-premium),
    color var(--motion-base) var(--ease-premium);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft), 0 0 0 1px rgba(160, 198, 255, 0.2);
  border-color: rgba(163, 199, 255, 0.44);
}

.btn:active {
  transform: scale(0.98);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(158, 196, 255, 0.24), var(--shadow-soft);
}

.btn.primary {
  background: linear-gradient(130deg, #2d4f82, #7a9bc6);
  border-color: rgba(175, 208, 255, 0.48);
}

.hero {
  position: relative;
  isolation: isolate;
  padding-top: clamp(68px, 7vw, 96px);
  padding-bottom: clamp(28px, 4.5vw, 56px);
}

.hero::before {
  content: "";
  position: absolute;
  width: min(66vw, 760px);
  height: min(52vw, 530px);
  left: 50%;
  top: 8%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(122, 171, 240, 0.22) 0%, rgba(122, 171, 240, 0.04) 48%, transparent 72%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
}

.hero-copy .lead {
  color: var(--color-muted);
  font-size: 1.06rem;
  line-height: 1.75;
  letter-spacing: 0.005em;
}

section {
  padding-block: clamp(56px, 7.5vw, 88px);
}

.card,
.tool-card,
.price,
details,
.cta,
.hero-card,
.note,
.modal,
.menu-sheet .panel,
.flowers-faq {
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-border) 88%, transparent);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.03));
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-soft);
}

.card,
.tool-card,
.price {
  transition:
    transform var(--motion-base) var(--ease-premium),
    border-color var(--motion-base) var(--ease-premium),
    box-shadow var(--motion-base) var(--ease-premium);
}

.card:hover,
.tool-card:hover,
.price:hover {
  transform: translateY(-6px);
  border-color: rgba(186, 213, 255, 0.38);
  box-shadow: var(--shadow-soft), var(--shadow-float);
}

.card img,
.tool-card img,
a.card img {
  transition: transform var(--motion-slow) var(--ease-premium);
}

a.card:hover img,
.tool-card:hover img {
  transform: scale(1.045);
}

.section-head p,
.card p,
.small,
.note,
.faq-a {
  color: var(--color-muted);
}

#faq details {
  overflow: clip;
}

#faq summary {
  cursor: pointer;
}

.faq-content {
  height: auto;
  overflow: hidden;
}

.premium-main {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition:
    opacity var(--motion-slow) var(--ease-premium),
    transform var(--motion-slow) var(--ease-premium),
    filter var(--motion-slow) var(--ease-premium);
}

body.premium-loaded .premium-main {
  opacity: 1;
  transform: none;
  filter: none;
}

.reveal {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  transition:
    opacity var(--motion-slow) var(--ease-premium),
    transform var(--motion-slow) var(--ease-premium),
    filter var(--motion-slow) var(--ease-premium);
  transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Flowers page hooks */
.wrap {
  padding: var(--space-4);
}

.wrap .card {
  width: min(var(--container-max), 96vw);
  background: rgba(16, 23, 36, 0.72);
  border-color: rgba(166, 183, 215, 0.28);
}

.wrap h1,
.wrap .badge,
.wrap .note strong {
  color: var(--color-text);
}

.wrap p,
.wrap .mini,
.wrap .note .mini {
  color: var(--color-muted);
}

.wrap .stage {
  border-color: rgba(156, 188, 236, 0.34);
  background:
    radial-gradient(700px 420px at 50% -10%, rgba(158, 196, 255, 0.2), transparent 62%),
    rgba(8, 13, 24, 0.5);
}

.wrap .btn-ghost {
  color: var(--color-text);
  border: 1px solid var(--color-border);
  background: rgba(27, 35, 52, 0.66);
}

@media (max-width: 920px) {
  .container {
    padding-inline: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .premium-main,
  .reveal,
  .btn,
  .card,
  .tool-card,
  .price,
  .nav,
  header {
    transition: none !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .premium-main,
  .reveal {
    opacity: 1 !important;
  }
}