/* =========================================================================
   Bud — Landing page styles
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Creato Display';
  src: url('/assets/fonts/CreatoDisplay-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('/assets/fonts/CreatoDisplay-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Creato Display';
  src: url('/assets/fonts/CreatoDisplay-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg:           #121212;
  --bg-deep:      #0F0F11;
  --orange:       #FA441F;
  --orange-glow:  #FF5331;
  --orange-deep:  #A71C00;
  --text:         #F1F1F1;
  --text-muted:   #A0A0A0;
  --placeholder:  #666666;
  /* Frosted glass — pushed up vs. v1 so the cards read as glass on top of
     the orange wash, not as flat translucent rectangles. */
  --glass-bg:     rgba(255, 255, 255, 0.07);
  --glass-bg-2:   rgba(20, 20, 22, 0.35);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-shine:  rgba(255, 255, 255, 0.28);
  --radius-card:  20px;

  --max-w:        1280px;
  --pad-x:        24px;
}

/* Cursor: native system default everywhere. */

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Creato Display', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.01em;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; background: transparent; border: 0; outline: 0; }
input::placeholder { color: var(--placeholder); }

/* =========================================================================
   GRADIENT BACKGROUND
   - .gradient-base   = static "always lit" radial at the bottom
   - .gradient-wave-* = three drifting layers running through SVG turbulence
                        (CSS keyframes scale/translate; the filter does the
                         organic deformation in parallel)
   ========================================================================= */
.gradient-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 110%, rgba(255, 83, 49, 0.10) 0%, transparent 60%),
    var(--bg);
}
.gradient-svg-filters {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* DESKTOP — subtle, not loud. The orange hugs the bottom and fades into
   black before reaching the email form. The animation is here, just dialed
   way down so it reads as ambient motion, not a screensaver. */
.gradient-base {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -8%;
  height: 60%;
  background:
    radial-gradient(58% 70% at 50% 100%,
      rgba(250, 68, 31, 0.90) 0%,
      rgba(238, 60, 25, 0.65) 22%,
      rgba(200, 50, 20, 0.40) 42%,
      rgba(150, 28, 5, 0.18) 65%,
      transparent 85%);
  filter: blur(2px);
  pointer-events: none;
}

.gradient-wave {
  position: absolute;
  left: -20%;
  right: -20%;
  bottom: -25%;
  height: 90%;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  pointer-events: none;
}
.gradient-wave-1 {
  background:
    radial-gradient(50% 65% at 50% 105%,
      rgba(250, 68, 31, 0.55) 0%,
      rgba(220, 55, 22, 0.30) 32%,
      transparent 75%);
  filter: url(#liquid-waves) blur(22px);
  animation: waveDrift1 22s ease-in-out infinite;
  opacity: 0.85;
}
.gradient-wave-2 {
  background:
    radial-gradient(55% 50% at 32% 110%,
      rgba(255, 95, 60, 0.40) 0%,
      transparent 72%),
    radial-gradient(55% 50% at 68% 110%,
      rgba(220, 55, 22, 0.40) 0%,
      transparent 72%);
  filter: url(#liquid-waves) blur(28px);
  animation: waveDrift2 28s ease-in-out infinite;
  opacity: 0.75;
}
.gradient-wave-3 {
  background:
    radial-gradient(40% 60% at 50% 115%,
      rgba(255, 110, 75, 0.30) 0%,
      transparent 75%);
  filter: url(#liquid-waves-soft) blur(36px);
  animation: waveDrift3 36s ease-in-out infinite;
  opacity: 0.7;
}

/* Three offset drift loops — gentle, slow, never distracting. The SVG
   turbulence inside the filter does most of the visible "liquid" motion;
   these CSS transforms just keep the wave centers shifting so it never
   loops in an obvious way. */
@keyframes waveDrift1 {
  0%   { transform: translate3d(0,    0,    0)  scale(1.00); }
  25%  { transform: translate3d(-3%,  -4%, 0)   scale(1.05); }
  50%  { transform: translate3d(2%,   -7%, 0)   scale(1.08); }
  75%  { transform: translate3d(3%,   -3%, 0)   scale(1.05); }
  100% { transform: translate3d(0,    0,    0)  scale(1.00); }
}
@keyframes waveDrift2 {
  0%   { transform: translate3d(0,    0,    0)  scale(1.00); }
  33%  { transform: translate3d(4%,   -4%, 0)   scale(1.06); }
  66%  { transform: translate3d(-4%,  -7%, 0)   scale(1.09); }
  100% { transform: translate3d(0,    0,    0)  scale(1.00); }
}
@keyframes waveDrift3 {
  0%   { transform: translate3d(0,    0,    0)  scale(1.00); }
  50%  { transform: translate3d(0,    -5%, 0)   scale(1.06); }
  100% { transform: translate3d(0,    0,    0)  scale(1.00); }
}

/* Side vignette so corners always feel dark/cinematic */
.gradient-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 70% at 50% 90%,
      transparent 0%,
      transparent 55%,
      rgba(18, 18, 18, 0.55) 80%,
      rgba(18, 18, 18, 0.95) 100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .gradient-wave-1, .gradient-wave-2, .gradient-wave-3 { animation: none; }
  .gradient-svg-filters animate { display: none; }
}

/* =========================================================================
   PAGE LAYOUT
   ========================================================================= */
.page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-top: clamp(80px, 12vh, 140px);
  padding-bottom: clamp(40px, 6vh, 64px);
  gap: clamp(72px, 11vh, 140px);
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(36px, 5vh, 56px);
  text-align: center;
}

.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.logo-mark {
  width: 54px;
  height: 54px;
  /* No outer glow — Figma reference is the clean inner-shadow only */
}
.bud-logo { width: 100%; height: 100%; }

.brand-word {
  font-family: 'Creato Display', sans-serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--text);
  letter-spacing: -0.02em;
}

.hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vh, 36px);
  max-width: 820px;
}
.headline {
  font-family: 'Creato Display', sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text);
}

.appstore-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.appstore-label {
  font-family: 'Creato Display', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--text);
  letter-spacing: -0.01em;
}
.appstore-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.apple-glyph { width: 14px; height: 16px; color: var(--text); }
.appstore-text {
  font-family: 'Creato Display', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  letter-spacing: -0.01em;
}

/* =========================================================================
   SIGNUP FORM
   ========================================================================= */
.signup-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(420px, 100%);
  height: 48px;
  padding: 5px 6px 5px 16px;
  background: #ffffff;
  border-radius: 24px;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.6) inset;
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.signup-form:focus-within {
  box-shadow:
    0 8px 28px rgba(255, 83, 49, 0.35),
    0 0 0 2px rgba(255, 83, 49, 0.55) inset;
  transform: translateY(-1px);
}
.signup-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 18px; flex: none;
  color: var(--orange-glow);
}
.signup-icon svg { width: 100%; height: 100%; }
.signup-divider {
  width: 1px; height: 18px; background: #D9D9D9; flex: none;
}
.signup-input {
  flex: 1; min-width: 0; height: 100%;
  font-family: 'Creato Display', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}
.signup-input::placeholder { color: var(--placeholder); }

.signup-submit {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange); color: #ffffff;
  transition: transform 150ms ease, background 200ms ease, box-shadow 200ms ease;
  box-shadow: 0 4px 12px rgba(250, 68, 31, 0.45);
}
.signup-submit:hover    { transform: translateX(2px); background: var(--orange-glow); }
.signup-submit:active   { transform: scale(0.96); }
.signup-submit svg      { width: 18px; height: 18px; }
.signup-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-status {
  min-height: 1.4em;
  font-family: 'Creato Display', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-muted);
  margin-top: -16px;
  opacity: 0;
  transition: opacity 250ms ease;
}
.form-status.is-visible { opacity: 1; }
.form-status.is-success { color: #FFB29A; }
.form-status.is-error   { color: #ff8b6f; }

/* =========================================================================
   FEATURE CARDS (glass)
   ========================================================================= */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  width: 100%;
  max-width: 1340px;
  margin-inline: auto;
}
/* Glass cards — frosted, with a top inner-highlight, a faint dark tint
   underneath, and a strong backdrop-blur so the orange behind them reads
   as a soft, blurred wash through the glass. */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 28px 22px;
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.10) 100%),
    var(--glass-bg-2);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow:
    0  1px  0 0 rgba(255,255,255,0.12) inset,           /* top edge highlight */
    0 -1px  0 0 rgba(0,0,0,0.20)         inset,         /* bottom edge shadow */
    0 12px 28px -12px rgba(0,0,0,0.45);                 /* soft drop shadow */
  overflow: hidden;
  isolation: isolate;
}
/* Inner ring highlight — gives that glassy "rim" the Figma cards have. */
.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
  padding: 1px;
  background: linear-gradient(160deg,
    var(--glass-shine) 0%,
    rgba(255,255,255,0.04) 35%,
    transparent 65%,
    rgba(255,255,255,0.06) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* Subtle radial sheen on the top-left corner — sells the glass look */
.feature-card::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -10%;
  width: 80%;
  height: 60%;
  background: radial-gradient(60% 100% at 30% 0%, rgba(255,255,255,0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.feature-card > * { position: relative; z-index: 1; }
.feature-icon {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
}
.feature-icon svg { width: 100%; height: 100%; }
.feature-title {
  font-family: 'Creato Display', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.18;
  color: #ffffff;
  letter-spacing: -0.01em;
  display: flex; flex-direction: column; gap: 6px;
}
.feature-sub {
  font-family: 'Creato Display', sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: -0.005em;
}

/* =========================================================================
   RESPONSIVE — Mobile (≤ 768px)
   ========================================================================= */
@media (max-width: 768px) {
  :root { --pad-x: 16px; }
  .page {
    padding-top: clamp(56px, 9vh, 96px);
    padding-bottom: clamp(28px, 5vh, 48px);
    gap: clamp(48px, 8vh, 80px);
  }
  .logo-mark { width: 48px; height: 48px; }
  .brand-word { font-size: 30px; }
  .headline { font-size: clamp(26px, 7vw, 32px); line-height: 1.2; }
  .appstore-label { font-size: 14px; }
  .appstore-pill  { height: 32px; padding: 0 12px; }
  .appstore-text  { font-size: 13px; }

  .signup-form { width: 100%; height: 52px; padding: 6px 6px 6px 18px; }
  .signup-input { font-size: 16px; } /* prevents iOS zoom on focus */
  .signup-submit { width: 40px; height: 40px; }

  .features {
    grid-template-columns: 1fr;
    gap: 14px;
    max-width: 460px;
  }
  .feature-card  { padding: 22px 20px; gap: 18px; }
  .feature-icon  { width: 32px; height: 32px; }
  .feature-title { font-size: 22px; }
  .feature-sub   { font-size: 14px; }

  /* MOBILE — gradient sits in the bottom half only. The top edge fades to
     transparent well below the headline so the hero text stays clean.
     Single uniform hue across the bottom (no pinky hotspot). */
  .gradient-base {
    height: 65%;          /* down from 130% — caps around the form / mid-page */
    bottom: -8%;
    left:  -20%;
    right: -20%;
    background:
      radial-gradient(110% 90% at 50% 92%,
        rgba(250, 68, 31, 0.85) 0%,
        rgba(250, 68, 31, 0.85) 8%,
        rgba(238, 60, 25, 0.62) 28%,
        rgba(210, 50, 20, 0.38) 52%,
        rgba(160, 32, 8, 0.16) 76%,
        transparent 100%);
    filter: blur(4px);
  }
  .gradient-wave   { height: 80%; bottom: -25%; left: -22%; right: -22%; }

  .gradient-vignette {
    background:
      radial-gradient(ellipse 130% 95% at 50% 85%,
        transparent 0%,
        transparent 78%,
        rgba(18, 18, 18, 0.30) 93%,
        rgba(18, 18, 18, 0.70) 100%);
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .headline { font-size: 24px; }
  .feature-title { font-size: 20px; }
}

@media (min-width: 1400px) {
  .hero-text { max-width: 880px; }
}