/* ═══════════════════════════════════════════════
   KUEEN — She deserves her flowers
   ═══════════════════════════════════════════════ */

:root{
  --ink:        #2B1E14;
  --ink-soft:   #5C4A37;
  --ink-mute:   #8A7660;
  --gold:       #F1B24A;
  --amber:      #C98733;
  --sage:       #7A8A5E;
  --terracotta: #E07A4F;
  --cream:      #F6E7D6;
  --cream-soft: #FBF3E8;
  --cream-lift: #FFFDFA;
  --white:      #FFFFFF;

  --font-serif: 'Fraunces', Georgia, serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --r-xl: 32px;
  --r-lg: 24px;
  --r-md: 16px;
  --r-sm: 10px;

  /* layered, warm-tinted shadows */
  --sh-sm: 0 1px 2px rgba(43,30,20,.04), 0 4px 10px -4px rgba(43,30,20,.08);
  --sh-md: 0 1px 2px rgba(43,30,20,.04), 0 8px 20px -8px rgba(43,30,20,.12), 0 20px 40px -24px rgba(43,30,20,.14);
  --sh-lg: 0 2px 4px rgba(43,30,20,.04), 0 14px 34px -12px rgba(43,30,20,.16), 0 40px 80px -40px rgba(43,30,20,.24);
  --sh-phone: 0 6px 14px rgba(43,30,20,.10), 0 30px 60px -20px rgba(43,30,20,.30), 0 70px 120px -60px rgba(43,30,20,.35);

  --container: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-sans);
  font-size:16px;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ol,ul{ list-style:none; margin:0; padding:0; }
p{ margin:0; }
button{ font:inherit; color:inherit; }

h1,h2,h3,h4{
  font-family:var(--font-serif);
  font-variation-settings:'opsz' 96;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-0.015em;
  margin:0;
  color:var(--ink);
}
em{ font-style:italic; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.container{
  width:100%; max-width:var(--container);
  margin:0 auto; padding:0 32px;
}

/* ── Film grain ─────────────────────────────── */
.grain{
  position:fixed; inset:-50%; z-index:9999; pointer-events:none;
  opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ── Scroll reveal ──────────────────────────── */
.reveal, .reveal-scale{
  opacity:0;
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay:var(--d,0ms);
  will-change:opacity, transform;
}
.reveal{ transform:translateY(28px); }
.reveal-scale{ transform:translateY(28px) scale(.96); }
.reveal.in, .reveal-scale.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal,.reveal-scale{ opacity:1 !important; transform:none !important; transition:none !important; }
  .marquee-track{ animation:none !important; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ── Buttons ────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-sans); font-weight:600; font-size:15px; letter-spacing:-.005em;
  padding:15px 30px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap; overflow:hidden;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out),
             background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn-arrow{ transition:transform .35s var(--ease-out); }
.btn:hover .btn-arrow{ transform:translateX(4px); }

.btn-primary{
  background:var(--ink); color:var(--cream);
  box-shadow:0 2px 4px rgba(43,30,20,.12), 0 10px 24px -10px rgba(43,30,20,.45);
}
.btn-primary:hover{
  background:#3B2A1B;
  box-shadow:0 4px 8px rgba(43,30,20,.14), 0 18px 36px -12px rgba(43,30,20,.5);
  transform:translateY(-2px);
}
.btn-gold{
  background:var(--gold); color:var(--ink);
  box-shadow:0 2px 4px rgba(241,178,74,.2), 0 12px 28px -10px rgba(241,178,74,.55);
}
.btn-gold:hover{
  background:#F7C468; transform:translateY(-2px);
  box-shadow:0 4px 10px rgba(241,178,74,.25), 0 20px 40px -12px rgba(241,178,74,.6);
}
.btn-ghost{
  background:transparent; color:var(--ink);
  border-color:rgba(43,30,20,.22);
}
.btn-ghost:hover{ background:rgba(43,30,20,.05); border-color:rgba(43,30,20,.4); transform:translateY(-2px); }

.btn-sm{ padding:11px 22px; font-size:14px; }
.btn-lg{ padding:17px 34px; font-size:15.5px; }

/* ── Announcement bar ───────────────────────── */
.announcement-bar{
  background:var(--ink); color:var(--cream);
  font-size:13px; letter-spacing:.005em; padding:10px 0;
}
.announce-inner{ display:flex; align-items:center; justify-content:center; gap:10px; }
.announce-dot{
  width:6px; height:6px; border-radius:50%; background:var(--gold); flex-shrink:0;
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(241,178,74,.5); }
  50%    { opacity:.7; box-shadow:0 0 0 6px rgba(241,178,74,0); }
}

/* ── Header ─────────────────────────────────── */
/* No bar chrome — logo, links and CTA sit directly on whatever is behind them. */
.site-header{ position:relative; z-index:100; }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:78px; }

.logo{ display:flex; align-items:center; gap:11px; }
.logo-mark-img{
  width:44px; height:auto;
  transition:transform .5s var(--ease-out);
}
.logo:hover .logo-mark-img{ transform:translateY(-2px) rotate(-4deg); }
.logo-word{
  font-family:var(--font-serif); font-size:23px; letter-spacing:.16em;
  font-weight:500; color:var(--ink);
}

.main-nav{ display:flex; align-items:center; gap:34px; }
.main-nav a{ font-size:14.5px; font-weight:500; color:var(--ink-soft); transition:color .25s var(--ease); }
.main-nav a span{ position:relative; display:inline-block; }
.main-nav a span::after{
  content:''; position:absolute; left:0; right:0; bottom:-5px; height:1.5px;
  background:var(--amber); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a:hover span::after{ transform:scaleX(1); transform-origin:left; }
.nav-cta-mobile{ display:none; }

.header-actions{ display:flex; align-items:center; gap:14px; }
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; border-radius:12px; border:1px solid rgba(43,30,20,.16);
  background:transparent; cursor:pointer;
}
.nav-toggle span{ width:17px; height:1.5px; background:var(--ink); margin:0 auto; transition:.35s var(--ease-out); }
.nav-toggle.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; transform:scaleX(0); }
.nav-toggle.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* ── Section furniture ──────────────────────── */
section{ position:relative; padding:130px 0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:14px;
  font-size:11.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--amber); margin:0 0 22px;
}
.eyebrow-rule{ width:34px; height:1px; background:currentColor; opacity:.5; }
.eyebrow.center{ display:flex; justify-content:center; width:100%; }

.section-head{ max-width:720px; margin:0 auto 76px; text-align:center; }
.section-head h2{ font-size:clamp(34px,5vw,56px); }
.section-head h2 em{ color:var(--amber); }
.section-sub{ margin-top:22px; font-size:17.5px; line-height:1.65; color:var(--ink-soft); }

.section-head-split{
  max-width:none; text-align:left; display:grid;
  grid-template-columns:1.25fr .85fr; gap:60px; align-items:end; margin-bottom:64px;
}
.section-head-split .eyebrow.center{ justify-content:flex-start; }
.section-head-split .section-sub{ margin-top:0; padding-bottom:6px; }

/* ═══════════ HERO ═══════════ */
.hero{
  padding:78px 0 56px; overflow:hidden;
  background:url('assets/web/hero-bg.jpg') center / cover no-repeat;
}
/* thin scrim, just enough to guarantee text contrast on the busiest part of the photo */
.hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; display:block;
  background:linear-gradient(100deg, rgba(246,231,214,.5) 0%, rgba(246,231,214,.14) 45%, transparent 72%);
}
.hero-bloom{ position:absolute; border-radius:50%; pointer-events:none; filter:blur(72px); }
.hero-bloom-a{
  width:820px; height:660px; top:-160px; right:-160px;
  background:radial-gradient(circle, rgba(241,178,74,.16), transparent 68%);
}
.hero-bloom-b{
  width:660px; height:560px; bottom:-220px; left:-200px;
  background:radial-gradient(circle, rgba(122,138,94,.14), transparent 68%);
}

/* Giant faint word behind the phone, echoing the reference composition */
.hero-watermark{
  position:absolute; z-index:0; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  font-family:var(--font-serif); font-style:italic; font-weight:300;
  font-size:min(30vw, 340px); line-height:1; letter-spacing:-.02em;
  color:rgba(255,255,255,.14); white-space:nowrap;
}

.hero-stage{
  position:relative; z-index:1; min-height:640px;
  display:grid; align-items:center;
  grid-template-columns:88px 1fr 260px;
  grid-template-rows:auto 1fr auto;
  grid-template-areas:
    "giant top    right"
    "giant center right"
    "giant caption right";
  column-gap:36px;
}

/* Decorative left rail — small outlined marks + the rotated word, both purely ornamental */
.hero-rail{
  grid-area:giant; align-self:start; justify-self:center;
  display:flex; flex-direction:column; gap:10px; margin-top:4px;
}
.hero-rail span{
  width:9px; height:9px; border:1.3px solid rgba(43,30,20,.28); border-radius:3px;
}
.hero-rail span:nth-child(2){ border-radius:50%; }

.hero-giant{
  grid-area:giant; align-self:center; justify-self:center;
  height:100%; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.hero-giant span{
  writing-mode:vertical-rl;
  font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(46px,7vw,88px); letter-spacing:.02em;
  color:var(--sage); white-space:nowrap;
}

.hero-top{ grid-area:top; align-self:start; padding-top:6px; }
.hero-top .eyebrow{ color:var(--cream); }
.hero-title{
  margin-top:6px;
  font-size:clamp(42px,5.6vw,72px);
  line-height:1; letter-spacing:-.03em; font-weight:300;
  font-variation-settings:'opsz' 144;
  color:var(--terracotta);
}

.hero-caption{
  grid-area:caption; align-self:end; padding-bottom:4px;
  max-width:300px; font-size:13.5px; line-height:1.6; color:var(--cream);
  opacity:.82;
}

.hero-right{
  grid-area:right; align-self:center;
  display:flex; flex-direction:column; align-items:flex-start;
}
.hero-right-label{
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream); opacity:.75; margin-bottom:16px;
}
.hero-cta-stack{ display:flex; flex-direction:column; gap:12px; width:100%; }
.hero-cta-stack .btn{ width:100%; }
.hero-cta-stack .btn-ghost{ color:var(--cream); border-color:rgba(246,231,214,.4); }
.hero-cta-stack .btn-ghost:hover{ background:rgba(246,231,214,.1); border-color:rgba(246,231,214,.6); }

.store-badges{ display:flex; gap:12px; margin-top:44px; flex-wrap:wrap; }
.hero-right .store-badges{ flex-direction:column; margin-top:28px; width:100%; }
.store-badge{
  display:inline-flex; align-items:center; gap:11px;
  border:1px solid rgba(43,30,20,.16); border-radius:14px;
  padding:10px 18px; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-mute); background:rgba(255,255,255,.5);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.store-badge:hover{ border-color:rgba(43,30,20,.3); background:rgba(255,255,255,.8); }
.store-badge span{ display:flex; flex-direction:column; line-height:1.35; }
.store-badge b{ font-size:13px; font-weight:600; letter-spacing:-.01em; text-transform:none; color:var(--ink); }
.store-badges-light .store-badge{
  border-color:rgba(246,231,214,.22); background:rgba(255,255,255,.05); color:rgba(246,231,214,.6);
}
.store-badges-light .store-badge b{ color:var(--cream); }
.store-badges-light .store-badge:hover{ border-color:rgba(246,231,214,.4); background:rgba(255,255,255,.09); }

/* Phone — the focal point of the hero */
.hero-center{
  grid-area:center; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
}
.hero-visual{ position:relative; display:flex; justify-content:center; align-items:center; }
.hero-visual .phone-shell{ width:196px; }
.hero-halo{
  position:absolute; width:118%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 62%);
  pointer-events:none;
}
.phone{ position:relative; z-index:2; }
.phone-shell{
  position:relative; width:302px; padding:11px;
  background:linear-gradient(160deg,#3D2C1E,#231810 46%,#3A2919);
  border-radius:46px; box-shadow:var(--sh-phone);
}
.phone-shell::after{  /* screen bezel highlight */
  content:''; position:absolute; inset:0; border-radius:46px; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.16), transparent 34%, transparent 72%, rgba(255,255,255,.07));
}
.phone-notch{
  position:absolute; top:11px; left:50%; transform:translateX(-50%); z-index:4;
  width:104px; height:24px; background:#1B120B; border-radius:0 0 15px 15px;
}
.phone-screen{
  position:relative; aspect-ratio:640/1384; border-radius:36px; overflow:hidden;
  background:var(--cream-soft);
}
.phone-screen > img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

/* Logo lockup beneath the phone */
.hero-lockup{ display:flex; align-items:center; gap:10px; }
.hero-lockup img{ width:30px; height:auto; }
.hero-lockup-word{
  font-family:var(--font-serif); font-size:19px; letter-spacing:.22em; text-indent:.22em;
  color:var(--cream); font-weight:500;
}

@keyframes float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%    { transform:translateY(-11px) rotate(-.7deg); }
}

.scroll-hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:22px; height:36px; border:1.5px solid rgba(43,30,20,.22); border-radius:999px;
}
.scroll-hint span{
  position:absolute; top:8px; left:50%; margin-left:-2px;
  width:4px; height:7px; border-radius:2px; background:var(--amber);
  animation:scrolldot 2.1s var(--ease) infinite;
}
@keyframes scrolldot{
  0%{ opacity:0; transform:translateY(0); }
  35%{ opacity:1; }
  75%,100%{ opacity:0; transform:translateY(12px); }
}

/* ═══════════ MARQUEE ═══════════ */
.marquee{
  overflow:hidden; padding:26px 0;
  background:var(--ink); color:var(--cream);
  border-block:1px solid rgba(246,231,214,.1);
}
.marquee-track{ display:flex; width:max-content; animation:slide 42s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee-group{ display:flex; align-items:center; flex-shrink:0; }
.marquee-group span{
  display:inline-flex; align-items:center; gap:13px;
  font-family:var(--font-serif); font-size:23px; font-weight:400;
  letter-spacing:.02em; white-space:nowrap; padding:0 30px;
}
.marquee-group span img{ width:34px; height:34px; object-fit:contain; }
.marquee-group i{ color:var(--gold); font-style:normal; font-size:13px; opacity:.65; }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ═══════════ WHY — BENTO ═══════════ */
.why{ background:linear-gradient(180deg,var(--cream) 0%,var(--cream-soft) 32%,var(--cream-soft) 100%); }

.bento{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.bento-cell{
  position:relative; overflow:hidden;
  background:var(--cream-lift);
  border:1px solid rgba(43,30,20,.07);
  border-radius:var(--r-lg); padding:32px;
  box-shadow:var(--sh-sm);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease);
}
.bento-cell:hover{
  transform:translateY(-5px);
  box-shadow:var(--sh-lg);
  border-color:rgba(201,135,51,.28);
}
.bento-cell h3{ font-size:21px; margin-bottom:11px; letter-spacing:-.01em; }
.bento-cell p{ font-size:14.5px; line-height:1.68; color:var(--ink-soft); }
.bento-cell p em{ color:var(--amber); font-style:italic; font-weight:500; }

.bento-icon{
  width:46px; height:46px; margin-bottom:22px; color:var(--amber);
  display:flex; align-items:center; justify-content:center;
  background:rgba(241,178,74,.12); border-radius:14px;
}
.bento-icon svg{ width:22px; height:22px; }

/* Feature cell — spans 2 cols x 2 rows */
.bento-lg{
  grid-column:span 2; grid-row:span 2;
  display:flex; flex-direction:column; justify-content:space-between;
  background:
    radial-gradient(520px 380px at 78% 8%, rgba(241,178,74,.22), transparent 62%),
    var(--cream-lift);
  padding:38px;
}
.bento-visual{
  display:flex; justify-content:center; align-items:center; padding:12px 0 24px;
}
.bento-visual img{
  width:168px; height:auto;
  filter:drop-shadow(0 20px 32px rgba(43,30,20,.18));
  animation:float 8s ease-in-out infinite;
}
.bento-lg h3{ font-size:29px; margin-bottom:14px; }
.bento-lg p{ font-size:16px; max-width:46ch; }
.bento-tag{
  display:inline-block; margin-top:22px;
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--amber); padding:7px 15px; border-radius:999px;
  background:rgba(241,178,74,.14); border:1px solid rgba(241,178,74,.3);
}

.bento-dark{
  background:
    radial-gradient(420px 300px at 88% 100%, rgba(241,178,74,.2), transparent 65%),
    linear-gradient(150deg,#3A2A1B,#241811);
  border-color:rgba(246,231,214,.12);
}
.bento-dark h3{ color:var(--cream); }
.bento-dark p{ color:rgba(246,231,214,.76); }
.bento-dark p em{ color:var(--gold); }
.bento-dark .bento-icon{ color:var(--gold); background:rgba(241,178,74,.16); }
.bento-dark:hover{ border-color:rgba(241,178,74,.4); }

/* ═══════════ HOW IT WORKS ═══════════ */
.how{ background:var(--cream-soft); }
.steps{
  position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:44px;
  max-width:1000px; margin:0 auto;
}
.steps::before{  /* dotted connector */
  content:''; position:absolute; top:104px; left:16%; right:16%; height:1.5px;
  background:repeating-linear-gradient(90deg, rgba(201,135,51,.4) 0 7px, transparent 7px 15px);
}
.step{ position:relative; text-align:center; padding:0 10px; }
.step-num{
  display:block; font-family:var(--font-serif); font-size:13px; font-weight:600;
  letter-spacing:.24em; color:var(--terracotta); margin-bottom:20px;
}
.step-orb{
  position:relative; z-index:1;
  width:104px; height:104px; margin:0 auto 26px;
  border-radius:50%; background:var(--cream-lift);
  border:1px solid rgba(43,30,20,.09);
  display:flex; align-items:center; justify-content:center;
  color:var(--amber); box-shadow:var(--sh-md);
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.step:hover .step-orb{ transform:translateY(-6px) scale(1.04); box-shadow:var(--sh-lg); }
.step-orb svg{ width:38px; height:38px; }
.step-orb img{ width:56px; height:56px; object-fit:contain; }
.step h3{ font-size:22px; margin-bottom:12px; }
.step p{ font-size:14.5px; line-height:1.68; color:var(--ink-soft); max-width:30ch; margin:0 auto; }

/* ═══════════ SHOWCASE (sticky) ═══════════ */
.showcase{
  padding:130px 0 0;
  background:
    radial-gradient(900px 600px at 50% 0%, rgba(241,178,74,.13), transparent 62%),
    linear-gradient(180deg,#2B1E14,#1E150E);
  color:var(--cream);
}
.showcase-head{ text-align:center; max-width:720px; margin:0 auto; }
.showcase-head .eyebrow{ color:var(--gold); }
.showcase-head h2{ color:var(--cream); font-size:clamp(34px,5vw,56px); }

.showcase-scroll{ position:relative; height:520vh; margin-top:64px; }
.showcase-sticky{
  position:sticky; top:0; height:100vh;
  display:flex; align-items:center; overflow:hidden;
}
.showcase-grid{
  display:grid; grid-template-columns:1fr .82fr; gap:70px; align-items:center; width:100%;
}

.showcase-list{ position:relative; }
.showcase-item{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  opacity:0; transform:translateY(26px);
  transition:opacity .6s var(--ease-out), transform .7s var(--ease-out);
  pointer-events:none;
}
.showcase-item.is-active{ opacity:1; transform:none; pointer-events:auto; position:relative; }
.showcase-idx{
  font-size:11.5px; font-weight:700; letter-spacing:.22em; color:var(--gold); margin-bottom:20px;
}
.showcase-item h3{
  font-size:clamp(34px,4.6vw,54px); color:var(--cream); margin-bottom:20px; letter-spacing:-.025em;
}
.showcase-item p{
  font-size:17.5px; line-height:1.68; color:rgba(246,231,214,.72); max-width:44ch;
}

.showcase-stage{ position:relative; display:flex; flex-direction:column; align-items:center; gap:26px; }
.showcase-halo{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:150%; aspect-ratio:1; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(241,178,74,.22), transparent 60%);
  filter:blur(50px);
}
.phone-showcase .phone-shell{ width:290px; }
.phone-showcase .phone-screen{ background:var(--cream-soft); }

.screen{
  position:absolute; inset:0; margin:0;
  opacity:0; transform:scale(1.04);
  transition:opacity .65s var(--ease-out), transform .8s var(--ease-out);
  background:var(--cream-soft); overflow:hidden;
}
.screen.is-active{ opacity:1; transform:none; }
.screen > img{ width:100%; height:100%; object-fit:cover; object-position:top center; }

.showcase-dots{ display:flex; gap:7px; }
.showcase-dots button{
  width:7px; height:7px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:rgba(246,231,214,.26);
  transition:background .35s var(--ease), width .45s var(--ease-out);
}
.showcase-dots button.on{ background:var(--gold); width:24px; }

/* Rendered (non-screenshot) app screens */
.screen-mock{
  padding:44px 0 0; background:var(--cream-soft);
  display:flex; flex-direction:column;
}
.m-head{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-serif); font-size:15px; letter-spacing:.06em;
  color:var(--ink); padding-bottom:12px;
}
.m-head img{ width:26px; height:auto; }
.m-tabs{
  display:flex; gap:6px; justify-content:center; padding:0 14px 14px;
  border-bottom:1px solid rgba(43,30,20,.07); margin-bottom:14px;
}
.m-tabs span{
  font-size:10px; font-weight:600; color:var(--ink-mute);
  padding:5px 12px; border-radius:999px;
}
.m-tabs span.on{ background:var(--gold); color:var(--ink); }

.m-comm{
  --c:#C98733;
  display:flex; align-items:center; gap:11px;
  margin:0 14px 9px; padding:11px 13px; border-radius:14px;
  background:#fff; box-shadow:var(--sh-sm); border-left:3px solid var(--c);
}
.m-comm-em{ font-size:19px; }
.m-comm b{ display:block; font-size:12px; color:var(--ink); }
.m-comm em{ font-style:normal; font-size:9.5px; color:var(--ink-mute); }

.m-event{
  display:flex; align-items:center; gap:11px;
  margin:0 14px 9px; padding:10px; border-radius:14px;
  background:#fff; box-shadow:var(--sh-sm);
}
.m-date{
  flex-shrink:0; background:var(--ink); color:var(--cream);
  border-radius:11px; padding:7px 10px; text-align:center;
  font-size:8.5px; font-weight:700; letter-spacing:.08em; line-height:1.2;
}
.m-date b{ display:block; font-family:var(--font-serif); font-size:16px; letter-spacing:0; }
.m-event-b b{ display:block; font-size:12px; color:var(--ink); }
.m-event-b em{ font-style:normal; display:block; font-size:9.5px; color:var(--ink-mute); margin-top:1px; }
.m-going{
  display:inline-block; margin-top:5px; font-size:8.5px; font-weight:700;
  color:var(--sage); background:rgba(122,138,94,.14);
  padding:3px 8px; border-radius:999px;
}

.m-bar{
  margin-top:auto; display:flex; justify-content:space-around; align-items:center;
  padding:14px 22px 18px; border-top:1px solid rgba(43,30,20,.07); background:#fff;
}
.m-bar i{ width:17px; height:17px; border-radius:5px; background:rgba(43,30,20,.13); }
.m-bar i.on{ background:var(--gold); }

/* ═══════════ FLOWER LANGUAGE ═══════════ */
.flowers{ background:linear-gradient(180deg,var(--cream-soft),var(--cream)); }

.flower-lab{
  display:grid; grid-template-columns:.86fr 1.14fr; gap:26px; align-items:stretch;
  max-width:1060px; margin:0 auto;
}
.flower-picker{ display:flex; flex-direction:column; gap:9px; }
.fp{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:13px 18px; border-radius:var(--r-md); cursor:pointer; text-align:left;
  background:var(--cream-lift); border:1px solid rgba(43,30,20,.07);
  box-shadow:var(--sh-sm);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
             border-color .35s var(--ease), background .35s var(--ease);
}
.fp img{ width:40px; height:40px; object-fit:contain; transition:transform .45s var(--ease-out); }
.fp span{ font-size:15px; font-weight:600; letter-spacing:-.01em; }
.fp:hover{ transform:translateX(4px); box-shadow:var(--sh-md); }
.fp:hover img{ transform:scale(1.1) rotate(-5deg); }
.fp.is-active{
  background:var(--ink); color:var(--cream); border-color:var(--ink);
  box-shadow:var(--sh-lg);
}
.fp.is-active img{ transform:scale(1.12); }

.flower-preview{
  display:flex; gap:30px; align-items:center;
  padding:42px; border-radius:var(--r-xl);
  background:
    radial-gradient(480px 340px at 84% 12%, var(--fp-tint, rgba(241,178,74,.2)), transparent 64%),
    var(--cream-lift);
  border:1px solid rgba(43,30,20,.07);
  box-shadow:var(--sh-md);
  transition:background .7s var(--ease);
}
.fpv-flower{ flex-shrink:0; }
.fpv-flower img{
  width:132px; height:auto;
  filter:drop-shadow(0 18px 30px rgba(43,30,20,.2));
  transition:transform .55s var(--ease-out), opacity .35s var(--ease);
}
.fpv-flower img.swap{ opacity:0; transform:scale(.86) rotate(-9deg); }
.fpv-body{ flex:1; min-width:0; }
.fpv-body h3{ font-size:27px; margin-bottom:9px; }
.fpv-body > p{ font-size:15px; line-height:1.6; color:var(--ink-soft); margin-bottom:22px; }

.fpv-chat{ display:flex; flex-direction:column; gap:9px; }
.fpv-bubble{
  background:#fff; border-radius:18px 18px 18px 5px; padding:15px 18px;
  box-shadow:var(--sh-sm); border:1px solid rgba(43,30,20,.05);
}
.fpv-badge{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:9px;
  padding:5px 12px 5px 5px; border-radius:999px;
  background:rgba(241,178,74,.15); border:1px solid rgba(241,178,74,.3);
}
.fpv-badge img{ width:22px; height:22px; object-fit:contain; }
.fpv-badge em{
  font-style:normal; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--amber);
}
.fpv-bubble > p{ font-size:14.5px; line-height:1.55; color:var(--ink); }
.fpv-meta{ font-size:11.5px; color:var(--ink-mute); padding-left:4px; }

.flower-foot{
  text-align:center; margin-top:44px; font-size:15.5px; color:var(--ink-soft);
}
.flower-foot strong{ color:var(--ink); font-weight:600; }

/* ═══════════ TESTIMONIALS ═══════════ */
.testimonials{ background:var(--cream); }

.pull-quote{
  max-width:900px; margin:0 auto 26px; text-align:center;
  padding:56px 48px; border-radius:var(--r-xl);
  background:
    radial-gradient(600px 400px at 50% 0%, rgba(241,178,74,.16), transparent 66%),
    var(--cream-lift);
  border:1px solid rgba(43,30,20,.07);
  box-shadow:var(--sh-md);
}
.pull-quote blockquote{
  margin:0; font-family:var(--font-serif); font-weight:300;
  font-size:clamp(23px,3vw,34px); line-height:1.34; letter-spacing:-.02em; color:var(--ink);
}
.pull-quote blockquote em{ color:var(--amber); font-style:italic; }
.pull-quote figcaption{
  display:flex; align-items:center; justify-content:center; gap:13px; margin-top:32px;
}
.pull-quote figcaption > span:last-child{
  display:flex; flex-direction:column; text-align:left;
  font-size:12.5px; color:var(--ink-mute); line-height:1.45;
}
.pull-quote figcaption b{ font-size:14.5px; color:var(--ink); font-weight:600; }

.avatar{
  --avatar-color:#C98733;
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:var(--avatar-color); color:#fff;
  font-family:var(--font-serif); font-weight:500; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px -4px rgba(43,30,20,.3);
}

.testimonial-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.t-card{
  background:var(--cream-lift); border:1px solid rgba(43,30,20,.07);
  border-radius:var(--r-lg); padding:30px;
  box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; justify-content:space-between; gap:26px;
  transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.t-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-lg); }
.t-card > p{ font-family:var(--font-serif); font-size:17px; line-height:1.52; color:var(--ink); }
.t-card footer{ display:flex; align-items:center; gap:12px; }
.t-card footer > span:last-child{
  display:flex; flex-direction:column; font-size:12px; color:var(--ink-mute); line-height:1.45;
}
.t-card footer b{ font-size:13.5px; color:var(--ink); font-weight:600; }
.t-card .avatar{ width:40px; height:40px; font-size:16px; }

/* ═══════════ CTA ═══════════ */
.cta{
  text-align:center; overflow:hidden;
  background:linear-gradient(165deg,#332417,#1C1309 62%,#241811);
  color:var(--cream);
}
.cta-bloom{
  position:absolute; top:-40%; left:50%; transform:translateX(-50%);
  width:1000px; height:800px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(241,178,74,.3), transparent 62%);
  filter:blur(60px);
}
.cta-inner{ position:relative; z-index:1; max-width:680px; }

/* Composed lockup — the supplied artwork has dark lettering that
   disappears on dark ground, so the wordmark is set in type here. */
.lockup{ display:flex; flex-direction:column; align-items:center; }
.lockup > img{ width:96px; height:auto; }
.lockup-word{
  font-family:var(--font-serif); font-weight:400;
  font-size:40px; letter-spacing:.28em; text-indent:.28em;
  line-height:1; color:var(--cream); margin-top:6px;
}
.lockup-tag{
  display:flex; align-items:center; gap:14px; margin-top:12px;
  font-size:10.5px; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--sage);
}
.lockup-tag i{ width:32px; height:1px; background:var(--gold); opacity:.8; }
.lockup-sm > img{ width:62px; }
.lockup-sm .lockup-word{ font-size:26px; }
.lockup-sm .lockup-tag{ font-size:8.5px; gap:10px; margin-top:9px; }
.lockup-sm .lockup-tag i{ width:20px; }
.cta .lockup{ margin-bottom:36px; }
.cta h2{ color:var(--cream); font-size:clamp(38px,5.6vw,64px); letter-spacing:-.03em; font-weight:300; }
.cta > .container > p{ margin-top:20px; font-size:17.5px; line-height:1.65; color:rgba(246,231,214,.74); }

.waitlist-form{
  display:flex; gap:10px; margin:38px auto 0; max-width:460px;
  padding:7px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(246,231,214,.16);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.waitlist-form:focus-within{ border-color:rgba(241,178,74,.6); background:rgba(255,255,255,.09); }
.waitlist-form input{
  flex:1; min-width:0; padding:13px 22px; border:0; background:transparent;
  color:var(--cream); font-size:15px; font-family:var(--font-sans);
}
.waitlist-form input::placeholder{ color:rgba(246,231,214,.42); }
.waitlist-form input:focus{ outline:none; }
.form-msg{ margin-top:16px; font-size:14px; font-weight:600; min-height:21px; color:var(--gold); }
.cta .store-badges{ justify-content:center; margin-top:40px; }

/* ═══════════ FAQ ═══════════ */
.faq{ background:var(--cream); }
.faq-inner{ display:grid; grid-template-columns:.72fr 1.28fr; gap:70px; align-items:start; }
.faq-aside{ position:sticky; top:120px; }
.faq-aside h2{ font-size:clamp(32px,4vw,48px); }
.faq-aside > p{ margin-top:20px; font-size:15.5px; line-height:1.65; color:var(--ink-soft); }
.faq-aside a{ color:var(--amber); font-weight:600; border-bottom:1px solid rgba(201,135,51,.4); }
.faq-aside a:hover{ border-bottom-color:var(--amber); }

.faq-list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{
  background:var(--cream-lift); border:1px solid rgba(43,30,20,.07);
  border-radius:var(--r-md); box-shadow:var(--sh-sm);
  transition:border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.faq-item[open]{ border-color:rgba(201,135,51,.3); box-shadow:var(--sh-md); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:22px 26px;
  font-size:16.5px; font-weight:600; letter-spacing:-.01em;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-plus{
  position:relative; flex-shrink:0; width:15px; height:15px;
}
.faq-plus::before,.faq-plus::after{
  content:''; position:absolute; top:50%; left:0; width:15px; height:1.5px;
  background:var(--amber); transition:transform .4s var(--ease-out);
}
.faq-plus::after{ transform:rotate(90deg); }
.faq-item[open] .faq-plus::after{ transform:rotate(0deg); }
.faq-body{ padding:0 26px 24px; }
.faq-body p{ font-size:15px; line-height:1.7; color:var(--ink-soft); max-width:62ch; }

/* ═══════════ FOOTER ═══════════ */
.site-footer{ background:#1E150E; color:var(--cream); padding-top:84px; }
.footer-top{
  display:grid; grid-template-columns:1fr auto; gap:80px;
  padding-bottom:60px; border-bottom:1px solid rgba(246,231,214,.1);
}
.footer-brand{ max-width:330px; }
.footer-brand .lockup{ align-items:flex-start; }
.footer-tagline{
  margin-top:20px; font-size:15px; line-height:1.65; color:rgba(246,231,214,.62);
}
.social-row{ display:flex; gap:10px; margin-top:26px; }
.social-icon{
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(246,231,214,.2);
  display:flex; align-items:center; justify-content:center;
  color:rgba(246,231,214,.75);
  transition:.35s var(--ease);
}
.social-icon:hover{
  background:var(--gold); color:var(--ink); border-color:var(--gold); transform:translateY(-3px);
}

.footer-links{ display:flex; gap:72px; }
.footer-col{ display:flex; flex-direction:column; gap:13px; }
.footer-col h4{
  font-family:var(--font-sans); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--gold); margin-bottom:6px;
}
.footer-col a{
  font-size:14.5px; color:rgba(246,231,214,.68);
  transition:color .25s var(--ease), transform .3s var(--ease-out);
}
.footer-col a:hover{ color:var(--cream); transform:translateX(3px); }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center;
  padding:26px 32px; font-size:12.5px; color:rgba(246,231,214,.45); gap:12px; flex-wrap:wrap;
}
.footer-made{ display:inline-flex; align-items:center; gap:6px; }
.footer-made img{ width:17px; height:17px; object-fit:contain; }

/* ═══════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

@media (max-width:1080px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .main-nav.open{
    display:flex; flex-direction:column; align-items:flex-start; gap:20px;
    position:absolute; top:78px; left:0; right:0;
    background:var(--cream); padding:26px 32px 32px;
    border-bottom:1px solid rgba(43,30,20,.1);
    box-shadow:0 20px 40px -20px rgba(43,30,20,.3);
  }
  .main-nav.open a{ font-size:19px; font-family:var(--font-serif); color:var(--ink); }
  .main-nav.open .nav-cta-mobile{
    display:inline-flex; margin-top:8px; font-family:var(--font-sans); font-size:14px; color:var(--cream);
  }

  /* Rotated wordmark + rail marks are a desktop-width flourish only */
  .hero-rail,.hero-giant{ display:none; }
  .hero-stage{
    grid-template-columns:1fr; grid-template-rows:auto;
    grid-template-areas:"top" "center" "right" "caption";
    min-height:0; row-gap:40px; text-align:center; padding:26px 0 10px;
  }
  .hero-top .eyebrow{ justify-content:center; width:100%; }
  .hero-title{ font-size:clamp(40px,9vw,64px); }
  .hero-center{ gap:22px; }
  .hero-right{ align-items:center; }
  .hero-right-label{ text-align:center; }
  .hero-cta-stack{ max-width:340px; }
  .hero-right .store-badges{ align-items:center; max-width:340px; margin-inline:auto; }
  .hero-caption{ max-width:440px; margin:0 auto; text-align:center; }
  .hero-watermark{ font-size:min(46vw,300px); }
  .scroll-hint{ display:none; }

  .section-head-split{ grid-template-columns:1fr; gap:26px; text-align:left; }
  .section-head-split .eyebrow{ justify-content:flex-start; width:auto; }

  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento-lg{ grid-column:span 2; grid-row:auto; }
  .bento-dark{ grid-column:span 2; }

  .faq-inner{ grid-template-columns:1fr; gap:40px; }
  .faq-aside{ position:static; }

  .flower-lab{ grid-template-columns:1fr; }
  .flower-picker{ flex-direction:row; overflow-x:auto; padding-bottom:6px; gap:8px; }
  .fp{ flex-direction:column; gap:8px; min-width:118px; text-align:center; padding:16px 10px; }
  .fp span{ font-size:12.5px; }
  .fp:hover{ transform:translateY(-3px); }

  /* Sticky showcase → swipeable phone carousel on tablet/mobile */
  .showcase-scroll{ height:auto; margin-top:52px; }
  .showcase-sticky{ position:static; height:auto; display:block; padding-bottom:96px; }
  .showcase-grid{ grid-template-columns:1fr; gap:36px; }
  .showcase-stage{ order:-1; }

  .showcase-list{ min-height:200px; }
  .showcase-item{ text-align:center; padding:0 8px; }
  .showcase-item h3{ font-size:clamp(26px,6vw,36px); }
  .showcase-item p{ margin-inline:auto; font-size:16px; }

  /* The screens become a horizontal snap track inside the device. */
  .phone-showcase .phone-screen{
    display:flex; overflow-x:auto; overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .phone-showcase .phone-screen::-webkit-scrollbar{ display:none; }
  .phone-showcase .screen{
    position:relative; inset:auto; flex:0 0 100%;
    scroll-snap-align:center; opacity:1; transform:none;
  }
  .showcase-dots button{ width:9px; height:9px; }
  .showcase-dots button.on{ width:26px; }
}

@media (max-width:760px){
  .container{ padding:0 22px; }
  section{ padding:84px 0; }
  .hero{ padding:64px 0 72px; }

  .logo-word{ font-size:19px; }
  .logo-mark-img{ width:38px; }
  .header-actions .btn-primary{ display:none; }

  .phone-shell{ width:252px; }
  .hero-watermark{ font-size:min(52vw,220px); }

  .marquee-group span{ font-size:18px; padding:0 20px; }
  .marquee-group span img{ width:26px; height:26px; }

  .bento{ grid-template-columns:1fr; }
  .bento-lg,.bento-dark{ grid-column:span 1; }
  .bento-cell{ padding:26px; }
  .bento-lg{ padding:30px; }
  .bento-visual img{ width:132px; }

  .steps{ grid-template-columns:1fr; gap:44px; }
  .steps::before{ display:none; }

  .pull-quote{ padding:38px 26px; }
  .testimonial-grid{ grid-template-columns:1fr; }

  .flower-preview{ flex-direction:column; text-align:center; padding:30px 24px; gap:22px; }
  .fpv-bubble{ text-align:left; }
  .fpv-body > p{ margin-inline:auto; }

  .waitlist-form{
    flex-direction:column; border-radius:var(--r-lg); padding:12px; gap:10px;
  }
  .waitlist-form input{ padding:13px 16px; text-align:center; }
  .waitlist-form .btn{ width:100%; }

  .faq-item summary{ padding:18px 20px; font-size:15.5px; }
  .faq-body{ padding:0 20px 20px; }

  .footer-top{ grid-template-columns:1fr; gap:44px; }
  .footer-links{ gap:44px; flex-wrap:wrap; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; padding:24px 22px; }
}