:root {
  --bb-coral: #FC9989;
  --bb-purple: #6D3867;
  --bb-cream: #FFEDE4;
  --bb-surface: #FFE2D1;
  --bb-heart: #E94560;

  --font-display: -apple-system, "Helvetica Neue", "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bb-cream);
  color: var(--bb-purple);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}
/* Clip horizontal overflow at the viewport level so decorative blobs
   that bleed off-screen don't create a horizontal scrollbar. Crucially,
   this lives on html — NOT on .site — because overflow-x: hidden on a
   div creates a BFC that hijacks scroll from the body. */
html { overflow-x: hidden; }

/* ========== Site wrapper + page-wide texture layer ========== */
.site { position: relative; }

/* Page-wide texture layer. Uses the COMPLETE original brand texture
   SVGs (gradient rect + organic overlay paths) as large background
   panels. The SVG gradient goes from cream (#FFE2D1) at top to coral
   (#FC9989) at bottom — the cream end disappears into the page
   background, so only the warm coral tones and organic texture show
   through. Each panel is wider than the viewport so its rectangular
   edges bleed off-screen. */
.page-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.bg-tex {
  position: absolute;
  pointer-events: none;
  width: clamp(550px, 70vw, 1000px);
  height: auto;
  /* Large opaque center so the organic shapes read clearly; soft
     fade at the edges to dissolve the SVG rect boundary. */
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at center, black 20%, transparent 58%);
  mask-image: radial-gradient(ellipse 75% 70% at center, black 20%, transparent 58%);
  filter: saturate(1.4);
}

/* Positioned so the organic center overlaps the viewport edge. Close
   enough that shapes are bold, far enough that rect edges are in the
   mask's transparent zone. */
.bg-1 { top: -250px; right: -200px; opacity: 1; animation: drift-a 16s ease-in-out infinite; }
.bg-2 { top:  150px; left:  -250px; opacity: 1; animation: drift-b 20s ease-in-out infinite; }
.bg-3 { top:  850px; right: -180px; opacity: 1; animation: drift-c 18s ease-in-out infinite; }
.bg-4 { top: 1450px; left:  -230px; opacity: 1; animation: drift-a 22s ease-in-out infinite; }
.bg-5 { top: 2050px; right: -200px; opacity: 1; animation: drift-b 17s ease-in-out infinite; }

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
  33%      { transform: translate(-18px, 22px) scale(1.04) rotate(2deg); }
  66%      { transform: translate(10px, -12px) scale(0.97) rotate(-1deg); }
}
@keyframes drift-b {
  0%, 100% { transform: scaleY(-1) translate(0, 0) scale(1) rotate(0deg); }
  33%      { transform: scaleY(-1) translate(14px, -16px) scale(1.03) rotate(-2deg); }
  66%      { transform: scaleY(-1) translate(-8px, 18px) scale(0.98) rotate(1.5deg); }
}
@keyframes drift-c {
  0%, 100% { transform: scaleX(-1) translate(0, 0) scale(1) rotate(0deg); }
  33%      { transform: scaleX(-1) translate(-12px, 20px) scale(1.05) rotate(1.5deg); }
  66%      { transform: scaleX(-1) translate(16px, -10px) scale(0.96) rotate(-2deg); }
}

/* All sections sit above the texture layer */
.hero, .features, .site-footer { position: relative; z-index: 1; }

/* ========== HERO ========== */

.hero {
  padding: clamp(40px, 7vw, 80px) clamp(24px, 5vw, 64px);
  min-height: clamp(420px, 75vh, 720px);
  overflow: hidden;
}
/* Headline */
.hero h1 {
  font-size: clamp(48px, 10vw, 100px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 26px;
  font-weight: 900;
  max-width: 780px;

  color: var(--bb-purple);
  position: relative;
  z-index: 5;
}

.hero .sub {
  font-size: clamp(16px, 2vw, 20px);
  max-width: 540px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--bb-purple);
  position: relative; z-index: 5;
  margin: 0;
}

/* "launching in 🇦🇺" sticker */
.sticker {
  position: absolute;
  top: clamp(20px, 4vw, 44px);
  right: clamp(20px, 4vw, 56px);
  z-index: 6;
  background: var(--bb-purple);
  color: var(--bb-cream);
  padding: 12px 22px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(109, 56, 103, 0.18);
  transform-origin: center;
  animation: sticker-breathe 4.5s ease-in-out infinite;
}
.sticker .flag { font-size: 30px; line-height: 1; }
@keyframes sticker-breathe {
  0%, 100% { transform: rotate(6deg) scale(1); }
  50%      { transform: rotate(6deg) scale(1.05); }
}

/* ========== Bubba pill ========== */

.bubba-pill {
  background: var(--bb-purple);
  color: var(--bb-coral);
  padding: 0 14px;
  border-radius: 10px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transform-origin: center 60%;
  animation: bubba-cuddle 3.2s ease-in-out infinite;
  z-index: 6;
  /* Discourage text-selection on tap-and-hold for the touch experience. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@keyframes bubba-cuddle {
  0%, 100% { transform: rotate(-2deg) scale(1)    translateY(0); }
  35%      { transform: rotate(-2deg) scale(1.05) translateY(-2px); }
  50%      { transform: rotate(-2deg) scale(1.04) translateY(-1px); }
  65%      { transform: rotate(-2deg) scale(1.02) translateY(0); }
}
.bubba-pill:hover,
.bubba-pill.active {
  animation: bubba-snuggle 0.42s ease-in-out infinite;
}
@keyframes bubba-snuggle {
  0%, 100% { transform: rotate(-3deg) scale(1.06) translateY(-1px); }
  25%      { transform: rotate(-6deg) scale(1.09) translateY(-2px); }
  75%      { transform: rotate(1deg)  scale(1.09) translateY(0); }
}
/* .paused must come AFTER .active so its animation: none wins. */
.bubba-pill.paused { animation: none; }

/* Hearts */
.bubba-pill .heart {
  position: absolute;
  left: 50%; top: 0;
  width: 38px; height: 38px; line-height: 38px;
  text-align: center; font-size: 38px;
  color: var(--bb-heart);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 10px rgba(233, 69, 96, 0.4));
  transform: translate(-50%, 0);
}
.bubba-pill .heart.is-finn {
  width: 60px; height: 38px;
  color: transparent;
  filter: drop-shadow(0 6px 14px rgba(109, 56, 103, 0.35));
}
.bubba-pill .heart.is-finn svg { width: 100%; height: 100%; display: block; }

.bubba-pill:hover .heart,
.bubba-pill.active .heart {
  animation: heart-fly 2.0s cubic-bezier(.2, .6, .4, 1) forwards;
}
.bubba-pill:hover .heart.is-finn,
.bubba-pill.active .heart.is-finn {
  animation: finn-pop 2.2s cubic-bezier(.2, .7, .3, 1) forwards;
}

.bubba-pill .heart.h1 { animation-delay: 0.00s !important; --dx: -56px; --rot: -16deg; }
.bubba-pill .heart.h2 { animation-delay: 0.14s !important; --dx:  38px; --rot:  14deg; }
.bubba-pill .heart.h3 { animation-delay: 0.28s !important; --dx: -22px; --rot:  -8deg; }
.bubba-pill .heart.h4 { animation-delay: 0.42s !important; --dx:  60px; --rot:  18deg; }
.bubba-pill .heart.h5 { animation-delay: 0.56s !important; --dx: -42px; --rot: -12deg; }
.bubba-pill .heart.h6 { animation-delay: 0.70s !important; --dx:  12px; --rot:   6deg; }

@keyframes heart-fly {
  0%   { opacity: 0; transform: translate(-50%, 0)    scale(0.3) rotate(0); }
  15%  { opacity: 1; transform: translate(-50%, -10px) scale(1.0) rotate(calc(var(--rot) * 0.4)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -160px) scale(1.4) rotate(var(--rot)); }
}
@keyframes finn-pop {
  0%   { opacity: 0; transform: translate(-50%, 0)    scale(0.15) rotate(0); }
  10%  { opacity: 1; transform: translate(-50%, -14px) scale(1.7)  rotate(-4deg); }
  22%  { opacity: 1; transform: translate(-50%, -34px) scale(1.25) rotate(8deg); }
  40%  { opacity: 1; transform: translate(calc(-50% + 6px), -70px) scale(1.45) rotate(-6deg); }
  70%  { opacity: 1; transform: translate(calc(-50% + var(--dx) * 0.6), -140px) scale(1.55) rotate(calc(var(--rot) * 0.7)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -220px) scale(1.65) rotate(var(--rot)); }
}

/* ========== CTA badges ========== */

.cta-row {
  margin-top: 32px;
  display: flex;
  gap: 14px;
  position: relative;
  z-index: 5;
  align-items: center;
  flex-wrap: wrap;
}
.store-link {
  display: inline-block;
  line-height: 0;
  transform-origin: center center;
  transition: transform 0.18s ease;
}
.store-link:hover,
.store-link:focus-visible { transform: scale(1.06); }
.store-link img { display: block; width: auto; }
.store-link.apple img  { height: 54px; }
.store-link.google img { height: 80px; margin: -13px 0; }

/* ========== Finn mascot ========== */

.finn-wrapper {
  position: absolute;
  bottom: clamp(24px, 4vw, 40px);
  right: clamp(40px, 7vw, 100px);
  width: clamp(90px, 12vw, 140px);
  z-index: 7;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  animation: finn-idle 5s ease-in-out infinite;
}
.finn-wrapper.flying {
  animation: finn-idle-fast 2.5s ease-in-out infinite;
}
@keyframes finn-idle {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-8px) rotate(0.5deg); }
}
@keyframes finn-idle-fast {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}
.finn-mark {
  display: block;
  width: 100%;
  transform: rotate(-5deg) translate(0, 0) scale(1);
  filter: drop-shadow(0 10px 20px rgba(109, 56, 103, 0.3));
}

/* ========== FEATURES ========== */

.features {
  padding: clamp(56px, 9vw, 120px) clamp(24px, 5vw, 64px);
  /* Background blobs now live in .page-bg, not per-section. */
}
.features-inner {
  position: relative;
  z-index: 5;
  max-width: 1100px;
  margin: 0 auto;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 12px;
  color: var(--bb-coral);
  margin: 0 0 12px;
}
.section-title {
  font-size: clamp(34px, 5.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 900;
  margin: 0 0 56px;

  max-width: 760px;
  color: var(--bb-purple);
}

/* Each feature row */
.f-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  padding: clamp(36px, 6vw, 72px) 0;
  border-top: 1px solid rgba(109, 56, 103, 0.12);
}
.f-row:first-of-type { border-top: none; padding-top: 0; }
.f-row.reverse .f-text   { order: 2; }
.f-row.reverse .f-visual { order: 1; }

@media (max-width: 720px) {
  .f-row,
  .f-row.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .f-row.reverse .f-text   { order: 1; }
  .f-row.reverse .f-visual { order: 2; }
}

.f-text .f-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--bb-coral);
  letter-spacing: 0.1em;
}
.f-text h3 {
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1;
  font-weight: 900;
  margin: 12px 0 12px;
  letter-spacing: -0.02em;

  color: var(--bb-purple);
}
.f-text .f-lead {
  font-size: clamp(16px, 2vw, 19px);
  font-style: italic;
  color: var(--bb-coral);
  margin: 0 0 14px;
  font-weight: 600;
}
.f-text .f-body {
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.55;
  margin: 0;
  color: rgba(109, 56, 103, 0.85);
  max-width: 460px;
}

/* Phone bezel + glowing halo behind */
.f-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 16px 0;
}
.f-visual::before {
  content: '';
  position: absolute;
  inset: 8% 18%;
  background: var(--bb-coral);
  border-radius: 50%;
  opacity: 0.3;
  z-index: 0;
  filter: blur(20px);
}
.phone {
  position: relative;
  z-index: 1;
  width: clamp(200px, 22vw, 280px);
  aspect-ratio: 1/2;
  background: #000;
  border-radius: 28px;
  padding: 6px;
  box-shadow: 0 24px 48px rgba(109, 56, 103, 0.28),
              0 6px 14px rgba(109, 56, 103, 0.14);
}
.phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 18px;
}

/* ========== Scroll reveal ==========
   One class per element. IntersectionObserver in main.js adds .in-view
   when 18% of an element is visible. CSS transitions do the motion. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
/* Phone visuals get a longer slide so the rise reads as deliberate.
   Slight delay vs. their text twin so text lands first. */
.reveal-phone {
  transform: translateY(56px) scale(0.94);
  transition-delay: 0.18s;
}
html.no-js .reveal,
html.no-js .reveal-phone {
  opacity: 1;
  transform: none;
}

/* ========== FOOTER ========== */
.site-footer {
  background: var(--bb-purple);
  color: var(--bb-cream);
  padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 64px);
  margin-top: clamp(40px, 6vw, 80px);
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.footer-brand .footer-mark {
  display: block;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 900;
  letter-spacing: -0.02em;

  color: var(--bb-coral);
  margin-bottom: 8px;
}
.footer-tag {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
  font-weight: 500;
}
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-nav a {
  color: var(--bb-cream);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease, color 0.18s ease;
  width: fit-content;
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: var(--bb-coral);
  border-bottom-color: var(--bb-coral);
}
.footer-meta {
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.75;
  text-align: right;
}
.footer-meta p { margin: 0 0 6px; }
.footer-meta .footer-copy { margin-top: 14px; opacity: 0.85; }

@media (max-width: 720px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-meta { text-align: left; }
}

/* ========== LEGAL PAGES ========== */
.legal-header {
  position: relative;
  z-index: 5;
  padding: clamp(20px, 3vw, 32px) clamp(24px, 5vw, 64px);
}
.legal-back {
  text-decoration: none;
  color: var(--bb-purple);
  font-weight: 700;
  font-size: 14px;

  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.18s ease;
}
.legal-back:hover { border-bottom-color: var(--bb-coral); color: var(--bb-coral); }

.legal {
  position: relative;
  z-index: 5;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(24px, 5vw, 64px) clamp(60px, 8vw, 100px);
  color: var(--bb-purple);
  line-height: 1.6;
}
.legal h1 {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 900;
  letter-spacing: -0.025em;

  margin: 0 0 8px;
}
.legal .legal-intro {
  font-size: 16px;
  opacity: 0.7;
  margin: 0 0 36px;
  font-style: italic;
}
.legal h2 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 36px 0 12px;

}
.legal h3 {
  font-size: clamp(17px, 2vw, 19px);
  font-weight: 700;
  margin: 24px 0 8px;
  color: var(--bb-coral);
}
.legal p, .legal li { font-size: 15px; }
.legal ul { padding-left: 1.4em; margin: 8px 0 16px; }
.legal li { margin: 4px 0; }
.legal a { color: var(--bb-coral); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.legal a:hover { color: var(--bb-purple); }
.legal address {
  font-style: normal;
  background: rgba(255, 226, 209, 0.5);
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  margin: 8px 0 16px;
}
.legal .legal-owner {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(109, 56, 103, 0.15);
  font-size: 13px;
  opacity: 0.65;
  text-align: center;
}

/* ========== Reduced motion ========== */
@media (prefers-reduced-motion: reduce) {
  .bg-blob,
  .sticker, .bubba-pill,
  .finn-wrapper {
    animation: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}