/* Nouri Landing — warm organic */
:root{
  --cream: #F5EFE8;
  --cream-2: #EFE6DB;
  --cream-3: #E6DAC9;
  --ink: #2D1F16;
  --ink-2: #4A3626;
  --muted: #8B6E5A;
  --muted-2: #A89080;
  --terracotta: #C97A5E;
  --terracotta-deep: #B8684C;
  --sage: #6B8E5F;
  --sage-deep: #567A4C;
  --line: rgba(45, 31, 22, 0.10);
  --line-2: rgba(45, 31, 22, 0.06);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family: 'Geist', 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 16px; line-height: 1.55;
  min-height: 100vh;
}
.serif{ font-family: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif; font-weight: 400; letter-spacing: -0.01em;}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

/* ── Nav ─────────────────────────────────── */
.nav{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  background: rgba(245, 239, 232, 0.75);
  border-bottom: 1px solid var(--line-2);
}
.nav-inner{
  max-width: 1200px; margin: 0 auto;
  padding: 18px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em;}
.brand-mark{
  width: 28px; height: 28px; display:flex; align-items:center; justify-content:center;
}
.nav-links{ display:flex; align-items:center; gap: 4px; }
.nav-link{
  padding: 9px 16px; border-radius: 999px;
  font-size: 14px; color: var(--ink-2); font-weight: 500;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav-link:hover{ background: var(--cream-2); color: var(--ink); }
.nav-link.active{ background: var(--ink); color: var(--cream); }

/* ── Hero ─────────────────────────────────── */
.hero{
  max-width: 1200px; margin: 0 auto;
  padding: 70px 32px 110px;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 80px; align-items: center;
}

/* stacked variant — phone sandwiched between title and paragraph */
.hero-stacked{
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  gap: 56px;
  padding: 64px 32px 110px;
}
.hero-stacked .hero-top{
  display:flex; flex-direction:column; align-items:center; max-width: 880px;
}
.hero-stacked .hero-bottom{
  display:flex; flex-direction:column; align-items:center; max-width: 640px;
}
.hero-stacked .hero-sub{ margin-left:auto; margin-right:auto; }
.hero-stacked .hero-meta{ justify-content:center; flex-wrap:wrap; }
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px;
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px; color: var(--ink-2); font-weight: 500;
  margin-bottom: 28px;
}
.eyebrow-dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }

h1.hero-title{
  font-size: clamp(48px, 6.2vw, 84px);
  line-height: 0.98; letter-spacing: -0.025em;
  color: var(--ink); margin-bottom: 24px;
}
h1.hero-title em{
  font-style: italic; color: var(--terracotta);
}
.hero-sub{
  font-size: 19px; line-height: 1.55;
  color: var(--ink-2); max-width: 480px; margin-bottom: 40px;
  text-wrap: pretty;
}
.hero-meta{
  display:flex; align-items:center; gap: 24px;
  margin-top: 28px;
  font-size: 13px; color: var(--muted);
}
.meta-dot{ width:3px; height:3px; background: var(--muted-2); border-radius:50%; }
.stars{ display:inline-flex; gap:2px; color: var(--terracotta); }

/* App store button */
.btn-appstore{
  display:inline-flex; align-items:center; gap: 12px;
  background: var(--ink); color: var(--cream);
  padding: 14px 22px 14px 18px; border-radius: 14px;
  transition: transform .2s, background .2s, box-shadow .2s;
  box-shadow: 0 1px 2px rgba(45,31,22,.08), 0 8px 24px rgba(45,31,22,.10);
}
.btn-appstore:hover{
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(45,31,22,.10), 0 14px 34px rgba(45,31,22,.14);
}
.btn-appstore .apple{ width: 28px; height: 28px; }
.btn-appstore .label-sm{ font-size: 11px; opacity: 0.75; line-height: 1; letter-spacing: 0.02em; }
.btn-appstore .label-lg{ font-size: 19px; font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; margin-top: 3px; }

/* iPhone mockup */
.phone-wrap{
  display:flex; justify-content:center; align-items:center;
  position: relative;
}
.phone-glow{
  position: absolute; inset: -40px;
  background: radial-gradient(ellipse at center, rgba(201,122,94,0.18), transparent 65%);
  z-index: 0; pointer-events: none;
}
.phone{
  position: relative; z-index: 1;
  width: 340px; height: 696px;
  border-radius: 54px;
  background: #1a1a1a;
  padding: 11px;
  box-shadow:
    0 0 0 2px #2a2a2a,
    0 40px 90px -20px rgba(45,31,22,0.35),
    0 18px 40px -12px rgba(45,31,22,0.22);
  transform: rotate(-2deg);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.phone:hover{ transform: rotate(0deg) translateY(-6px); }
.phone-screen{
  width: 100%; height: 100%;
  border-radius: 44px; overflow: hidden;
  background: var(--cream);
  position: relative;
}
.phone-screen img{
  width: 100%; height: 100%; object-fit: cover; display:block;
}
.notch{
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 32px; border-radius: 20px;
  background: #000; z-index: 3;
}
.side-btn{
  position: absolute; background:#2a2a2a;
  border-radius: 2px;
}
.side-btn.vol1{ left:-2px; top: 120px; width: 3px; height: 32px; }
.side-btn.vol2{ left:-2px; top: 170px; width: 3px; height: 56px; }
.side-btn.vol3{ left:-2px; top: 240px; width: 3px; height: 56px; }
.side-btn.power{ right:-2px; top: 180px; width: 3px; height: 90px; }

/* floating badges */
.float-badge{
  position: absolute; z-index: 2;
  padding: 10px 14px; border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(45,31,22,.05), 0 12px 28px rgba(45,31,22,.10);
  display:flex; align-items:center; gap: 10px;
  font-size: 13px; font-weight: 500; color: var(--ink);
  animation: floaty 6s ease-in-out infinite;
}
.float-badge .dot{ width: 10px; height: 10px; border-radius: 50%; }
.float-badge.one{ top: 14%; left: -8%; animation-delay: 0s; }
.float-badge.two{ bottom: 22%; right: -6%; animation-delay: -2s; }
.float-badge.three{ top: 52%; left: -10%; animation-delay: -4s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Legal pages ─────────────────────────── */
.legal-wrap{
  max-width: 760px; margin: 0 auto;
  padding: 72px 32px 120px;
}
.legal-kicker{
  font-size: 13px; color: var(--muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.legal-title{
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1.0; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.legal-updated{
  font-size: 14px; color: var(--muted); margin-bottom: 48px;
  padding-bottom: 32px; border-bottom: 1px solid var(--line);
}
.legal-body h2{
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 28px; font-weight: 400;
  margin-top: 44px; margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.legal-body h2:first-child{margin-top:0}
.legal-body p, .legal-body li{
  font-size: 16px; line-height: 1.7; color: var(--ink-2);
  margin-bottom: 14px;
}
.legal-body ul{ padding-left: 22px; margin-bottom: 14px; }
.legal-body li{ margin-bottom: 8px; }
.legal-body strong{ color: var(--ink); font-weight: 600; }
.legal-callout{
  background: var(--cream-2);
  border-left: 3px solid var(--terracotta);
  padding: 18px 22px; border-radius: 4px;
  margin: 24px 0; font-size: 15px; color: var(--ink-2);
}
.legal-placeholder{
  font-family: 'SF Mono', 'JetBrains Mono', Menlo, monospace;
  font-size: 12px; color: var(--muted);
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 8px,
    rgba(139, 110, 90, 0.06) 8px, rgba(139, 110, 90, 0.06) 9px
  );
  border: 1px dashed var(--line);
  padding: 14px 18px; border-radius: 8px;
  margin: 18px 0; display:block;
}

/* ── Footer ─────────────────────────────── */
.footer{
  max-width: 1200px; margin: 0 auto;
  padding: 40px 32px;
  border-top: 1px solid var(--line-2);
  display:flex; align-items:center; justify-content:space-between;
  font-size: 13px; color: var(--muted);
}
.footer-links{ display:flex; gap:24px; }
.footer-links a:hover{ color: var(--ink); }

/* ── Responsive ─────────────────────────── */
@media (max-width: 900px){
  .hero{
    grid-template-columns: 1fr; gap: 60px;
    padding: 48px 24px 80px; text-align:center;
  }
  .hero-text{ display:flex; flex-direction:column; align-items:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-meta{ justify-content:center; flex-wrap:wrap; }
  .nav-inner{ padding: 14px 20px; }
  .nav-link{ padding: 8px 12px; font-size: 13px; }
  .phone{ width: 280px; height: 574px; }
  .float-badge.one{ left: -4%; }
  .float-badge.two{ right: -2%; }
  .float-badge.three{ left: -4%; }
  .footer{ flex-direction:column; gap: 16px; padding: 32px 24px; }
}
@media (max-width: 520px){
  h1.hero-title{ font-size: 44px; }
  .phone{ width: 240px; height: 492px; border-radius: 44px; }
  .phone-screen{ border-radius: 34px; }
  .float-badge{ display:none; }
  .nav-links .nav-link-text{display:none}
}