:root{
  --bg:#F7F3EC;
  --bg-2:#EFE8DC;
  --ink:#111111;
  --ink-2:#3B3B36;
  --muted:#6E6A63;
  --line:#1a1a1a10;
  --accent:#FF5A1F;      /* warm signal orange */
  --accent-2:#0F5132;    /* deep green */
  --cream:#FFFDF7;
  --shadow:0 1px 0 rgba(0,0,0,.04), 0 20px 40px -20px rgba(0,0,0,.15);
  --radius:22px;
  --radius-lg:32px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
em{font-style:italic;color:var(--accent)}

/* Grain overlay */
body::before{
  content:"";
  position:fixed;inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.35;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* NAV */
.nav{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  background:rgba(247,243,236,.72);
  border-bottom:1px solid var(--line);
}
.logo{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:-.02em;
}
.logo .dot{color:var(--accent)}
.nav nav{display:flex;gap:18px;align-items:center;font-size:14px}
.nav nav a{color:var(--ink-2)}
.nav-cta{
  background:var(--ink);color:var(--cream)!important;
  padding:8px 14px;border-radius:999px;font-weight:600;
}
@media (max-width:520px){
  .nav nav a:not(.nav-cta){display:none}
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 22px;
  border-radius:999px;
  font-weight:600;font-size:16px;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:var(--cream);box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--accent);color:#fff}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-block{width:100%;padding:18px}

/* HERO */
.hero{
  position:relative;
  padding:32px 20px 40px;
  display:grid;
  grid-template-columns:1fr;
  gap:36px;
  z-index:2;
}
.hero-copy{position:relative;z-index:2}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.02em;
  padding:8px 14px;border-radius:999px;
  background:var(--cream);
  border:1px solid var(--line);
  color:var(--ink-2);
  margin-bottom:22px;
}
.pulse{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(255,90,31,.6);
  animation:pulse 1.8s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,90,31,.55)}
  70%{box-shadow:0 0 0 14px rgba(255,90,31,0)}
  100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}
}
h1{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-variation-settings:'SOFT' 60, 'opsz' 144;
  font-size:clamp(52px,13vw,110px);
  line-height:.92;
  letter-spacing:-.03em;
  margin:0 0 20px;
}
h1 em{font-style:italic;font-weight:400}
.lede{
  font-size:clamp(17px,4.4vw,20px);
  color:var(--ink-2);
  max-width:34ch;
  margin:0 0 28px;
}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.trust{
  display:flex;align-items:center;gap:12px;
  font-size:14px;color:var(--muted);
}
.trust b{color:var(--ink)}
.faces{display:flex}
.faces span{
  width:26px;height:26px;border-radius:50%;
  border:2px solid var(--bg);
  margin-left:-8px;
}
.faces span:first-child{margin-left:0}

/* Phone mock */
.phone{
  justify-self:center;
  width:min(320px,88vw);
  aspect-ratio:9/18;
  background:#0d0d0d;
  border-radius:44px;
  padding:10px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.05) inset;
  position:relative;
  transform:rotate(-2deg);
}
.phone::after{
  content:"";position:absolute;inset:auto 0 -18px 0;height:60px;
  background:radial-gradient(closest-side, rgba(0,0,0,.25), transparent 70%);
  z-index:-1;
}
.phone-inner{
  background:var(--cream);
  border-radius:36px;
  height:100%;
  overflow:hidden;
  display:flex;flex-direction:column;
  position:relative;
}
.phone-top{
  height:28px;
  display:flex;justify-content:center;align-items:flex-end;
  background:var(--cream);
}
.phone-top span{
  width:80px;height:22px;background:#0d0d0d;border-radius:0 0 14px 14px;
}
.chat{
  flex:1;
  padding:14px 12px;
  display:flex;flex-direction:column;gap:8px;
  overflow:hidden;
  font-size:14px;
}
.bubble{
  max-width:78%;
  padding:9px 13px;
  border-radius:18px;
  line-height:1.35;
  opacity:0;transform:translateY(6px);
  animation:pop .35s ease forwards;
}
.bubble.them{
  align-self:flex-start;
  background:#EEE9DE;
  border-bottom-left-radius:6px;
}
.bubble.me{
  align-self:flex-end;
  background:var(--accent);color:#fff;
  border-bottom-right-radius:6px;
}
.bubble.photo{
  padding:6px;background:#EEE9DE;
  display:flex;align-items:center;justify-content:center;
}
.bubble.photo .thumb{
  width:150px;height:110px;border-radius:12px;
  background:linear-gradient(135deg,#8B6E4A,#5A4028);
  position:relative;overflow:hidden;
}
.bubble.photo .thumb::before{
  content:"🛋️";font-size:52px;position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}
@keyframes pop{to{opacity:1;transform:none}}
.phone-bar{
  padding:8px 10px 14px;
  display:flex;gap:8px;align-items:center;
  border-top:1px solid #0000000a;
}
.phone-input{
  flex:1;background:#EEE9DE;color:#8a8a83;
  padding:9px 14px;border-radius:999px;font-size:13px;
}
.phone-send{
  width:34px;height:34px;border-radius:50%;
  background:var(--ink);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
}

/* MARQUEE */
.marquee{
  overflow:hidden;
  padding:14px 0;
  border-block:1px solid var(--line);
  background:var(--bg-2);
  position:relative;z-index:2;
}
.marquee-track{
  display:flex;gap:22px;
  width:max-content;
  animation:scroll 34s linear infinite;
  font-family:'Fraunces',serif;font-style:italic;
  font-size:22px;color:var(--ink);
  white-space:nowrap;
}
.marquee-track span:nth-child(even){color:var(--accent)}
@keyframes scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* Section shared */
section{position:relative;z-index:2}
.section-head{padding:56px 20px 22px;max-width:1100px;margin:0 auto}
.tag{
  display:inline-block;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);font-weight:600;
  margin-bottom:14px;
}
.tag.light{color:#FFB69B}
h2{
  font-family:'Fraunces',serif;
  font-weight:500;
  font-size:clamp(38px,8vw,64px);
  line-height:1;letter-spacing:-.025em;
  margin:0;max-width:16ch;
}
h2 em{font-style:italic;color:var(--accent)}

/* HOW */
.steps{
  list-style:none;margin:0;padding:0 20px 40px;
  display:grid;gap:14px;
  max-width:1100px;margin-inline:auto;
}
.steps li{
  background:var(--cream);
  border-radius:var(--radius-lg);
  padding:24px 22px 26px;
  border:1px solid var(--line);
  position:relative;
}
.steps li:nth-child(2){background:#EFE7F0}
.steps li:nth-child(3){background:#E5EEDE}
.step-num{
  font-family:'Fraunces',serif;
  font-size:44px;line-height:1;
  color:var(--accent);
  margin-bottom:12px;letter-spacing:-.03em;
}
.steps h3{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:26px;margin:0 0 8px;letter-spacing:-.02em;
}
.steps p{margin:0;color:var(--ink-2);font-size:16px;max-width:38ch}

/* WHY */
.why-grid{
  padding:0 20px 40px;
  display:grid;gap:12px;
  grid-template-columns:1fr;
  max-width:1100px;margin-inline:auto;
}
.why-card{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px 22px;
}
.why-card.accent{background:var(--accent);color:#fff}
.why-card.accent .big-stat{color:#fff}
.why-card.dark{background:var(--ink);color:var(--cream)}
.why-card.dark .big-stat{color:var(--cream)}
.big-stat{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:clamp(56px,14vw,84px);line-height:.95;
  letter-spacing:-.03em;color:var(--ink);
  margin-bottom:8px;
}
.big-stat span{
  font-size:.4em;font-style:italic;font-weight:400;
  margin-left:2px;vertical-align:baseline;
}
.why-card p{margin:0;font-size:16px;line-height:1.45;max-width:32ch;opacity:.92}

/* STORIES */
.story-grid{
  padding:0 20px 60px;
  display:grid;gap:14px;
  grid-template-columns:repeat(2,1fr);
  max-width:1100px;margin-inline:auto;
}
.story{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  display:flex;flex-direction:column;gap:10px;
  transition:transform .3s ease;
}
.story:hover{transform:translateY(-3px)}
.story .art{
  aspect-ratio:1/1;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:56px;
  position:relative;overflow:hidden;
}
.story .art::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.4), transparent 60%);
}
.story h4{
  font-family:'Fraunces',serif;font-weight:500;
  font-size:18px;margin:0;letter-spacing:-.01em;
}
.story p{margin:0;font-size:13px;color:var(--muted);line-height:1.4}
.story .meta{
  display:flex;justify-content:space-between;
  font-size:12px;color:var(--muted);
  border-top:1px dashed var(--line);
  padding-top:8px;margin-top:auto;
}
.story .meta b{color:var(--accent-2)}

/* WAITLIST */
.waitlist{
  margin:0 12px 24px;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,90,31,.35), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(15,81,50,.5), transparent 55%),
    #111111;
  color:var(--cream);
  padding:56px 24px 44px;
  overflow:hidden;
  position:relative;
}
.waitlist-inner{max-width:520px;margin:0 auto;text-align:center}
.waitlist h2{color:var(--cream);margin-inline:auto;text-align:center}
.waitlist p{color:#cfc9bd;margin:14px auto 26px;max-width:38ch}
.waitlist-form{
  display:grid;gap:10px;
  text-align:left;
}
.field input{
  width:100%;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid #ffffff20;
  background:#ffffff10;
  color:var(--cream);
  font-size:16px;
  font-family:inherit;
}
.field input::placeholder{color:#ffffff70}
.field input:focus{outline:none;border-color:var(--accent);background:#ffffff18}
.waitlist .btn-primary{
  background:var(--accent);color:#fff;
  margin-top:6px;
}
.waitlist .btn-primary:hover{background:#fff;color:var(--ink)}
.form-note{font-size:12px;color:#cfc9bd90;text-align:center;margin-top:10px}
.form-note.ok{color:#8FE0B4}
.form-note.err{color:#FFB59E}

/* Footer */
.foot{
  padding:24px 20px 100px;
  display:flex;flex-direction:column;gap:14px;
  color:var(--muted);font-size:13px;
  max-width:1100px;margin:0 auto;
}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a:hover{color:var(--accent)}

/* Sticky mobile CTA */
.sticky-cta{
  position:fixed;left:12px;right:12px;bottom:12px;
  z-index:30;
  background:var(--ink);color:var(--cream);
  padding:16px;text-align:center;font-weight:600;
  border-radius:999px;
  box-shadow:0 12px 30px -8px rgba(0,0,0,.35);
  transform:translateY(120%);
  transition:transform .35s cubic-bezier(.2,.9,.2,1);
}
.sticky-cta.show{transform:translateY(0)}
@media (min-width:820px){
  .sticky-cta{display:none}
}

/* Desktop layout */
@media (min-width:820px){
  .hero{
    grid-template-columns:1.15fr .85fr;
    gap:60px;
    padding:60px 48px 80px;
    max-width:1200px;margin:0 auto;align-items:center;
  }
  .phone{transform:rotate(3deg)}
  .section-head{padding:80px 48px 30px}
  .steps{padding:0 48px 60px;grid-template-columns:repeat(3,1fr)}
  .why-grid{padding:0 48px 60px;grid-template-columns:repeat(4,1fr)}
  .story-grid{padding:0 48px 80px;grid-template-columns:repeat(4,1fr)}
  .waitlist{margin:0 48px 40px;padding:80px 40px}
  .foot{flex-direction:row;justify-content:space-between;padding:32px 48px 40px}
}