:root{
  --pink:#F6C7D1;
  --peach:#F7D8C6;
  --lav:#EDE3F2;
  --plum:#4E3B44;
  --muted:#7A6A73;
  --mauve:#B06A7A;
  --teal:#6FA293;
  --card:#FFF6F4;
  --shadow:0 18px 50px rgba(78,59,68,.10)
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--plum);
  background:
    radial-gradient(circle at 10% 8%,rgba(246,199,209,.75),transparent 30%),
    radial-gradient(circle at 92% 18%,rgba(237,227,242,.85),transparent 35%),
    linear-gradient(135deg,#fffaf9 0%,#fff7f2 45%,#f8f1fb 100%);
  line-height:1.6
}

a{
  color:inherit;
  text-decoration:none
}

.container{
  width:min(1160px,calc(100% - 40px));
  margin:auto
}

.nav-wrap{
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(16px);
  background:rgba(255,250,249,.78);
  border-bottom:1px solid rgba(78,59,68,.06)
}

.nav{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:1.1rem
}

/* App icon container */
.brand-mark{
  width:32px;
  height:32px;
  min-width:32px;
  min-height:32px;
  flex:0 0 32px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  border-radius:8px;

  background:transparent;
  box-shadow:none
}

/* Actual Hello Mama app icon */
.brand-icon{
  width:32px !important;
  height:32px !important;

  min-width:32px !important;
  min-height:32px !important;

  max-width:32px !important;
  max-height:32px !important;

  display:block;
  object-fit:cover;

  border-radius:8px
}

.nav-links{
  display:flex;
  align-items:center;
  gap:26px;
  color:var(--muted);
  font-size:.95rem
}

.nav-links a:hover{
  color:var(--plum)
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 22px;
  border-radius:999px;
  background:var(--mauve);
  color:white;
  font-weight:700;
  box-shadow:0 10px 24px rgba(176,106,122,.22)
}

.btn.secondary{
  background:rgba(255,255,255,.65);
  color:var(--plum);
  border:1px solid rgba(78,59,68,.09);
  box-shadow:none
}

.menu-btn{
  display:none;
  border:0;
  background:transparent;
  font-size:1.5rem;
  color:var(--plum)
}

.hero{
  padding:74px 0 80px;
  overflow:hidden
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:70px
}

.eyebrow{
  display:inline-flex;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.58);
  color:var(--mauve);
  font-weight:700;
  font-size:.9rem;
  border:1px solid rgba(176,106,122,.12)
}

h1,h2,h3{
  margin-top:0;
  line-height:1.12;
  letter-spacing:-.035em
}

h1{
  font-size:clamp(3rem,6vw,5.6rem);
  margin:22px 0
}

.hero p{
  color:var(--muted);
  font-size:1.16rem;
  max-width:650px
}

.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:28px
}

.android-note{
  font-size:.9rem;
  color:var(--muted);
  margin-top:10px
}

.hero-art{
  position:relative;
  min-height:620px;
  display:grid;
  place-items:center
}

.blob{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:46% 54% 52% 48%;
  background:
    linear-gradient(
      135deg,
      rgba(246,199,209,.78),
      rgba(247,216,198,.72),
      rgba(237,227,242,.82)
    )
}

.phone{
  position:relative;
  width:min(330px,78vw);
  padding:12px;
  border-radius:48px;
  background:#282326;
  box-shadow:0 28px 80px rgba(78,59,68,.24);
  z-index:2
}

.phone::before{
  content:"";
  position:absolute;
  width:92px;
  height:22px;
  border-radius:999px;
  background:#161316;
  left:50%;
  transform:translateX(-50%);
  top:14px;
  z-index:4
}

.phone-screen{
  overflow:hidden;
  border-radius:38px;
  background:linear-gradient(
    180deg,
    #f8cbd2,
    #f7ddcc 60%,
    #f2e6f4
  );
  aspect-ratio:9/19.5
}

.phone-screen img,
.preview-screen img{
  width:100%;
  height:100%;
  object-fit:cover
}

.phone-placeholder{
  min-height:100%;
  padding:52px 18px 22px;
  display:flex;
  flex-direction:column;
  gap:14px
}

.mock-title{
  font-size:2rem;
  font-weight:800
}

.mock-card{
  background:rgba(255,246,244,.95);
  border-radius:22px;
  padding:18px;
  box-shadow:0 10px 24px rgba(78,59,68,.07)
}

.mock-label{
  color:var(--muted);
  font-weight:650;
  font-size:.9rem
}

.mock-big{
  font-size:1.25rem;
  font-weight:800;
  margin-top:4px
}

.mock-line{
  height:9px;
  border-radius:99px;
  background:#eadfe4;
  margin:14px 0 7px;
  overflow:hidden
}

.mock-line:after{
  content:"";
  display:block;
  width:72%;
  height:100%;
  background:#c796a6
}

section{
  padding:92px 0
}

.center-copy{
  max-width:780px;
  margin:auto;
  text-align:center
}

.kicker{
  color:var(--mauve);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.78rem
}

.section-title{
  font-size:clamp(2rem,4vw,3.4rem);
  margin:12px 0 16px
}

.section-copy{
  color:var(--muted);
  font-size:1.08rem
}

.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  margin-top:42px
}

.feature-card{
  background:rgba(255,246,244,.9);
  border:1px solid rgba(78,59,68,.06);
  box-shadow:var(--shadow);
  border-radius:30px;
  padding:28px
}

.icon-bubble{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  margin-bottom:22px;
  font-size:1.45rem
}

.pink{
  background:#f7dce3
}

.lav{
  background:#eee6f6
}

.green{
  background:#e4f1ed
}

.peach{
  background:#f8e5db
}

.feature-card p{
  color:var(--muted);
  margin-bottom:0
}

.previews{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  align-items:start;
  margin-top:46px
}

.preview-item{
  text-align:center
}

.preview-phone{
  background:#2b2729;
  padding:10px;
  border-radius:38px;
  box-shadow:0 22px 52px rgba(78,59,68,.16);
  margin-bottom:20px
}

.preview-screen{
  border-radius:30px;
  overflow:hidden;
  aspect-ratio:9/19.5;
  background:linear-gradient(
    180deg,
    #f7cdd5,
    #f8dfce,
    #eee5f3
  )
}

.preview-placeholder{
  height:100%;
  display:grid;
  place-items:center;
  color:var(--muted);
  padding:24px;
  font-weight:700
}

.preview-item p{
  margin:0;
  color:var(--muted)
}

.philosophy{
  padding:52px;
  border-radius:36px;
  background:
    linear-gradient(
      135deg,
      rgba(255,246,244,.88),
      rgba(255,255,255,.62)
    ),
    linear-gradient(
      135deg,
      var(--pink),
      var(--peach),
      var(--lav)
    );
  box-shadow:var(--shadow);
  text-align:center
}

.notice{
  background:rgba(255,246,244,.85);
  border:1px solid rgba(78,59,68,.06);
  border-radius:28px;
  padding:30px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:18px
}

.notice-icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#eee6f6
}

.notice p{
  color:var(--muted);
  margin:0
}

.notice a{
  color:var(--mauve);
  font-weight:750
}

.cta{
  background:linear-gradient(
    135deg,
    rgba(246,199,209,.78),
    rgba(247,216,198,.78),
    rgba(237,227,242,.9)
  );
  border-radius:42px;
  padding:58px 34px;
  text-align:center
}

.cta p{
  color:var(--muted);
  max-width:650px;
  margin:0 auto 24px
}

footer{
  padding:46px 0 54px;
  color:var(--muted)
}

.footer-grid{
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:flex-start;
  border-top:1px solid rgba(78,59,68,.08);
  padding-top:34px
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:18px
}

.small{
  font-size:.9rem
}

.legal-hero{
  padding:58px 0 24px
}

.legal-card{
  max-width:900px;
  margin:0 auto 80px;
  background:rgba(255,246,244,.94);
  border-radius:34px;
  box-shadow:var(--shadow);
  padding:48px
}

.legal-card h1{
  font-size:clamp(2.4rem,5vw,4rem);
  margin-bottom:8px
}

.updated{
  color:var(--muted);
  margin-bottom:30px
}

.legal-card h2{
  font-size:1.3rem;
  margin-top:34px;
  margin-bottom:8px
}

.legal-card p,
.legal-card li{
  color:#685a62
}

.callout{
  background:#f1e7ef;
  border-radius:20px;
  padding:20px 22px;
  margin:24px 0
}

@media(max-width:900px){

  .hero-grid{
    grid-template-columns:1fr;
    gap:30px
  }

  .hero{
    padding-top:48px
  }

  .hero-art{
    min-height:540px
  }

  .features{
    grid-template-columns:repeat(2,1fr)
  }

  .previews{
    grid-template-columns:1fr;
    max-width:360px;
    margin-left:auto;
    margin-right:auto
  }
}

@media(max-width:720px){

  .container{
    width:min(100% - 28px,1160px)
  }

  .nav{
    min-height:68px
  }

  .menu-btn{
    display:block
  }

  .nav-links{
    display:none;
    position:absolute;
    left:14px;
    right:14px;
    top:70px;
    background:rgba(255,250,249,.97);
    padding:18px;
    border-radius:22px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch
  }

  .nav-links.open{
    display:flex
  }

  .nav-links .btn{
    width:100%
  }

  h1{
    font-size:3rem
  }

  .hero p{
    font-size:1.02rem
  }

  .hero-art{
    min-height:490px
  }

  .blob{
    width:420px;
    height:420px
  }

  section{
    padding:70px 0
  }

  .features{
    grid-template-columns:1fr
  }

  .philosophy{
    padding:34px 22px
  }

  .notice{
    grid-template-columns:1fr
  }

  .footer-grid{
    flex-direction:column
  }

  .legal-card{
    padding:30px 22px;
    border-radius:26px
  }
}