:root {
  color-scheme:dark;
  --bg:#081113;
  --text:#f7f5f0;
  --muted:#aebcc0;
  --mint:#8de1d0;
  --gold:#ffd479;
  --peach:#ffaaa1;
  --lavender:#bca5ff;
  --stroke:#ffffff16;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body {
  margin:0;
  background:radial-gradient(ellipse at 65% 8%,#17505255,transparent 35%),radial-gradient(ellipse at 100% 28%,#5b45652b,transparent 28%),var(--bg);
  color:var(--text);
  line-height:1.6
}
a {
  color:inherit
}
img {
  max-width:100%;
  object-fit:cover
}
button,a,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,summary:focus-visible {
  outline:3px solid var(--mint);
  outline-offset:6px
}
.wrap {
  width:min(1160px,calc(100% - 64px));
  margin-inline:auto
}
.site-header {
  display:flex;
  align-items:center;
  gap:32px;
  padding-block:28px;
  position:relative;
  z-index:2
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  font-size:25px;
  font-weight:750;
  letter-spacing:-1px
}
.brand-heart {
  font-size:20px;
  color:var(--peach)
}
.brand-mark {
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  background:#28443f;
  border:1px solid #8de1d040;
  border-radius:12px;
  color:var(--mint);
  box-shadow:0 0 24px #8de1d025
}
.brand-mark .glyph {
  width:23px;
  height:23px
}
nav {
  display:flex;
  gap:26px;
  margin-left:auto;
  font-size:14px;
  color:var(--muted)
}
nav a,.text-link {
  text-decoration:none
}
nav a:hover,.text-link:hover {
  color:var(--gold)
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  text-decoration:none;
  font-weight:700;
  border-radius:18px;
  padding:17px 27px;
  min-height:56px;
  transition:transform .2s,box-shadow .2s;
  border:1px solid transparent
}
.button:hover {
  transform:translateY(-3px)
}
.button.primary {
  background:linear-gradient(110deg,#ffe6a9,var(--gold));
  color:#202424;
  box-shadow:0 8px 35px #ffd47922
}
.button.primary:hover {
  box-shadow:0 8px 45px #ffd47940
}
.button.secondary {
  border-color:#ffffff26;
  background:#ffffff05
}
.button.small {
  padding:11px 18px;
  min-height:43px;
  font-size:13px
}
.hero {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:65px;
  align-items:center;
  padding-top:50px;
  padding-bottom:80px;
  min-height:640px
}
.eyebrow {
  font-size:13px;
  letter-spacing:1.2px;
  color:var(--mint);
  font-weight:600;
  margin:0 0 22px
}
.eyebrow>span {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--mint);
  border-radius:50%;
  box-shadow:0 0 13px var(--mint);
  margin-right:8px;
  vertical-align:middle
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-size:clamp(40px,4.5vw,58px);
  line-height:1.1;
  letter-spacing:-2.5px;
  margin-bottom:28px;
  font-weight:740
}
h1 em {
  font-style:normal;
  color:#ffe2a4
}
h2 {
  font-size:clamp(31px,3.5vw,44px);
  line-height:1.16;
  letter-spacing:-1.5px;
  margin-bottom:24px
}
h3 {
  font-size:20px;
  line-height:1.3;
  letter-spacing:-.4px
}
.lead {
  font-size:17px;
  color:var(--muted);
  max-width:485px;
  margin-bottom:28px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:25px;
  flex-wrap:wrap
}
.text-link {
  font-size:14px
}
.quiet {
  font-size:12px;
  color:var(--muted);
  margin:16px 0 28px
}
.hero-notes {
  display:flex;
  gap:20px;
  color:var(--muted);
  font-size:12px
}
.hero-notes>span {
  display:flex;
  align-items:center;
  gap:5px
}
.hero-notes .glyph {
  width:16px;
  height:16px;
  color:var(--mint)
}
.glyph {
  display:inline-block;
  width:32px;
  height:32px;
  background:currentColor;
  mask-image:var(--glyph);
  -webkit-mask-image:var(--glyph);
  mask-size:contain;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  mask-position:center;
  -webkit-mask-position:center;
  flex-shrink:0
}
.preview-scene {
  position:relative;
  padding:12px 30px
}
.preview-scene:before {
  content:'';
  position:absolute;
  inset:70px -20px;
  background:radial-gradient(ellipse,#43a89735,transparent 68%);
  filter:blur(25px);
  pointer-events:none
}
.phone {
  position:relative;
  margin:auto;
  width:350px;
  max-width:100%;
  padding:22px 17px 12px;
  border-radius:38px;
  background:linear-gradient(165deg,#112629,#0a1019);
  border:1px solid #ffffff22;
  box-shadow:0 30px 75px #0007,inset 0 1px 1px #ffffff16;
  transform:rotate(3deg)
}
.phone-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:0 4px 15px
}
.phone-top>strong {
  font-size:23px;
  letter-spacing:-.6px
}
.phone-top strong>span {
  color:var(--peach);
  font-size:18px
}
.phone-top>div {
  display:flex;
  gap:12px;
  color:#c7d3dc
}
.phone-top .glyph {
  width:21px;
  height:21px
}
.baby-banner {
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(100deg,#244843,#15212c);
  border-radius:22px;
  margin-bottom:12px;
  height:111px
}
.baby-banner:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 35%,#152b30 52%,transparent)
}
.baby-banner img {
  width:125px;
  height:111px;
  object-fit:cover;
  object-position:left center
}
.baby-banner>div {
  z-index:1;
  padding:10px 10px 10px 8px;
  display:flex;
  flex-direction:column
}
.baby-banner strong {
  font-size:24px
}
.baby-banner span {
  font-size:16px;
  font-weight:700
}
.baby-banner small {
  font-size:11px;
  color:var(--muted)
}
.baby-banner b {
  color:var(--gold)
}
.phone-card {
  border:1px solid var(--stroke);
  border-radius:20px;
  background:linear-gradient(135deg,#192c31,#121d24);
  padding:14px 12px;
  margin-bottom:12px
}
.card-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:6px;
  margin-bottom:12px
}
.card-title strong {
  font-size:16px
}
.card-title small {
  font-size:9px;
  color:var(--muted)
}
.metrics {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  text-align:center;
  gap:5px
}
.metric {
  display:flex;
  flex-direction:column;
  align-items:center
}
.peach {
  --accent:var(--peach);
  --glow:#ffaaa12b
}
.lavender {
  --accent:var(--lavender);
  --glow:#bca5ff2b
}
.mint {
  --accent:var(--mint);
  --glow:#8de1d02b
}
.gold {
  --accent:var(--gold);
  --glow:#ffd4792b
}
.ring {
  display:grid;
  place-items:center;
  width:73px;
  height:73px;
  border-radius:50%;
  border:5px solid var(--accent);
  border-bottom-color:#ffffff12;
  border-left-color:#ffffff12;
  color:var(--accent);
  box-shadow:0 0 19px var(--glow);
  margin-bottom:6px;
  transform:rotate(-30deg)
}
.ring .glyph {
  transform:rotate(30deg);
  filter:drop-shadow(0 0 5px var(--accent));
  width:33px;
  height:33px
}
.metric strong {
  font-size:18px;
  line-height:1.35
}
.metric small {
  font-size:10px;
  color:#c6d1d2
}
.quick-preview {
  display:flex;
  gap:7px
}
.quick-preview>div {
  flex:1;
  display:flex;
  align-items:center;
  flex-direction:column;
  border-radius:15px;
  border:1px solid var(--stroke);
  background:#ffffff03;
  padding:10px 5px;
  font-size:10px;
  gap:8px
}
.orb {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  color:#14282a;
  background:radial-gradient(circle at 30% 15%,color-mix(in srgb,var(--accent) 75%,white),var(--accent));
  box-shadow:0 0 24px var(--glow)
}
.orb .glyph {
  width:32px;
  height:32px
}
.phone-footer {
  display:flex;
  justify-content:space-around;
  background:#ffffff05;
  border:1px solid var(--stroke);
  border-radius:17px;
  padding:11px 5px 8px;
  color:#a3b2b8
}
.phone-footer>span {
  display:flex;
  align-items:center;
  flex-direction:column;
  font-size:9px;
  gap:6px
}
.phone-footer .glyph {
  width:24px;
  height:24px
}
.phone-footer .active {
  color:var(--gold);
  filter:drop-shadow(0 0 10px #ffd47970)
}
.demo-caption {
  text-align:center;
  margin:7px 0 0;
  font-size:9px;
  color:#8b9b9f
}
.moon {
  position:absolute;
  right:-14px;
  top:-8px;
  width:140px;
  mix-blend-mode:screen;
  pointer-events:none;
  animation:float 7s ease-in-out infinite
}
.floating-note {
  position:absolute;
  left:-18px;
  bottom:95px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 18px;
  background:#1d3333eb;
  border:1px solid #8de1d03a;
  border-radius:20px;
  z-index:1;
  box-shadow:0 10px 40px #0007;
  font-size:12px;
  line-height:1.4;
  animation:float 6s ease-in-out infinite
}
.floating-note .orb {
  width:35px;
  height:35px
}
.floating-note .glyph {
  width:24px;
  height:24px
}
.floating-note strong {
  font-size:14px
}
.section {
  padding-block:64px
}
.section-intro {
  color:var(--muted);
  max-width:565px;
  font-size:16px;
  margin-bottom:32px
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px
}
.feature-card {
  position:relative;
  overflow:hidden;
  padding:27px;
  border:1px solid var(--stroke);
  border-radius:25px;
  background:radial-gradient(circle at 0 0,var(--glow),transparent 65%),linear-gradient(145deg,#19282a,#111a22);
  transition:transform .25s,border-color .25s
}
.feature-card:hover {
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent)
}
.feature-card .orb {
  margin-bottom:22px
}
.feature-card h3 {
  margin-bottom:13px
}
.feature-card p {
  color:var(--muted);
  font-size:14px;
  margin-bottom:0
}
.family-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:80px
}
.family-art {
  min-height:340px;
  display:grid;
  place-items:center;
  background:radial-gradient(ellipse,#8de1d016,transparent 70%)
}
.family-orbit {
  position:relative;
  width:290px;
  height:290px;
  border-radius:50%;
  border:1px solid #8de1d025;
  display:grid;
  place-items:center
}
.family-orbit:before {
  content:'';
  position:absolute;
  inset:35px;
  border-radius:50%;
  border:1px dashed #ffffff18
}
.family-orbit img {
  position:absolute;
  width:105px;
  height:105px;
  border-radius:50%;
  border:3px solid #8de1d060;
  box-shadow:0 0 32px #8de1d027
}
.family-orbit img:nth-child(1) {
  top:-9px;
  left:14px;
  border-color:#ffaaa180;
  box-shadow:0 0 32px #ffaaa127
}
.family-orbit img:nth-child(2) {
  top:76px;
  right:-35px
}
.family-orbit img:nth-child(3) {
  bottom:-14px;
  left:32px;
  border-color:#bca5ff80;
  box-shadow:0 0 32px #bca5ff27
}
.family-center {
  font-size:23px;
  font-weight:700
}
.family-center b {
  display:block;
  text-align:center;
  font-size:26px;
  color:var(--gold)
}
.benefit-list {
  list-style:none;
  padding:0;
  margin:0;
  color:#c7d5d3;
  font-size:14px
}
.benefit-list li {
  margin-block:12px;
  padding-left:25px;
  position:relative
}
.benefit-list li:before {
  content:'✓';
  color:var(--mint);
  position:absolute;
  left:0
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px;
  list-style:none;
  padding:20px 0 0;
  margin:0
}
.steps span {
  display:block;
  color:var(--gold);
  font-size:32px;
  font-weight:650;
  margin-bottom:12px
}
.steps h3 {
  font-size:19px;
  margin-bottom:10px
}
.steps p {
  font-size:14px;
  color:var(--muted)
}
.faq {
  max-width:850px
}
.faq details {
  border-bottom:1px solid var(--stroke);
  padding-block:22px
}
.faq summary {
  font-size:18px;
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:35px;
  font-weight:500
}
.faq summary::-webkit-details-marker {
  display:none
}
.faq summary:after {
  content:'+';
  position:absolute;
  right:5px;
  color:var(--mint);
  font-size:24px;
  top:-6px
}
.faq details[open] summary:after {
  content:'−'
}
.faq details p {
  color:var(--muted);
  font-size:15px;
  padding-top:17px;
  margin:0
}
.faq details a {
  color:var(--mint)
}
.final-cta {
  text-align:center;
  border:1px solid #ffd47925;
  border-radius:35px;
  padding:60px 25px;
  margin-block:50px 80px;
  background:radial-gradient(ellipse at 50% 0,#ffd47914,transparent 60%),linear-gradient(135deg,#172c2c,#121923);
  position:relative;
  overflow:hidden
}
.final-cta img {
  margin-bottom:20px;
  mix-blend-mode:screen
}
.final-cta .eyebrow {
  margin-bottom:16px
}
.final-cta>p:not(.eyebrow) {
  color:var(--muted);
  margin-bottom:27px
}
.footer {
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
  border-top:1px solid var(--stroke);
  padding-block:30px 40px;
  color:var(--muted);
  font-size:13px
}
.footer>.brand {
  color:var(--text)
}
.footer>div {
  display:flex;
  gap:25px;
  margin-left:auto
}
.footer>div a {
  text-decoration:none
}
.footer>small {
  flex-basis:100%;
  font-size:11px
}
.skip-link {
  position:absolute;
  left:20px;
  top:10px;
  transform:translateY(-150%);
  z-index:9;
  background:var(--gold);
  color:var(--bg);
  padding:10px;
  border-radius:10px
}
.skip-link:focus {
  transform:none
}
@keyframes float {
  0%,100% {
    transform:translateY(0)
  }
  50% {
    transform:translateY(-9px)
  }
}
@media(max-width:1000px) {
  .hero {
    gap:25px
  }
  .hero-notes {
    gap:9px;
    font-size:11px
  }
  .site-header nav {
    display:none
  }
  .site-header>.button {
    margin-left:auto
  }
  .preview-scene {
    padding-inline:15px
  }
  .floating-note {
    left:-10px
  }
  .feature-card {
    padding:22px
  }
  .family-section {
    gap:40px
  }
}
@media(max-width:720px) {
  .wrap {
    width:calc(100% - 36px)
  }
  .site-header {
    padding-block:20px;
    gap:10px
  }
  .brand {
    font-size:22px
  }
  .brand-mark {
    display:none
  }
  .site-header>.button {
    font-size:11px;
    padding:9px 12px;
    gap:7px;
    border-radius:13px
  }
  .hero {
    grid-template-columns:1fr;
    padding-top:32px;
    padding-bottom:25px;
    gap:28px
  }
  .hero-copy {
    text-align:center
  }
  .eyebrow {
    font-size:11px;
    letter-spacing:.7px
  }
  h1 {
    font-size:42px;
    letter-spacing:-1.7px
  }
  .lead {
    font-size:15px;
    margin-inline:auto
  }
  .hero-actions,.hero-notes {
    justify-content:center
  }
  .hero-actions {
    gap:17px
  }
  .hero-notes {
    font-size:11px;
    gap:15px
  }
  .quiet {
    margin-bottom:22px
  }
  .preview-scene {
    width:min(390px,100%);
    margin-inline:auto;
    padding-inline:18px
  }
  .phone {
    transform:rotate(2deg);
    width:330px
  }
  .floating-note {
    left:0;
    bottom:70px;
    font-size:10px;
    padding:9px 12px
  }
  .floating-note strong {
    font-size:12px
  }
  .moon {
    width:100px;
    right:-4px
  }
  .section {
    padding-block:42px
  }
  .feature-grid {
    grid-template-columns:1fr 1fr;
    gap:12px
  }
  .feature-card {
    padding:20px 16px;
    border-radius:21px
  }
  .feature-card h3 {
    font-size:17px
  }
  .feature-card p {
    font-size:13px
  }
  .feature-card .orb {
    width:44px;
    height:44px;
    margin-bottom:18px
  }
  .feature-card .glyph {
    width:29px;
    height:29px
  }
  h2 {
    font-size:32px
  }
  .section-intro {
    font-size:15px
  }
  .family-section {
    grid-template-columns:1fr;
    gap:18px
  }
  .family-art {
    min-height:315px;
    order:2
  }
  .family-orbit {
    width:260px;
    height:260px
  }
  .family-orbit img:nth-child(2) {
    right:-20px
  }
  .steps {
    grid-template-columns:1fr;
    gap:20px;
    padding-top:5px
  }
  .steps li {
    position:relative;
    padding-left:57px
  }
  .steps span {
    position:absolute;
    left:0;
    top:-5px;
    font-size:26px
  }
  .steps h3 {
    font-size:18px
  }
  .steps p {
    margin-bottom:0
  }
  .faq summary {
    font-size:16px
  }
  .final-cta {
    margin-block:30px 55px;
    padding:38px 20px
  }
  .final-cta h2 {
    font-size:29px
  }
  .final-cta .button {
    font-size:14px;
    padding:16px 20px
  }
  .footer {
    gap:12px
  }
  .footer>span {
    flex-basis:100%;
    order:2
  }
  .footer>div {
    gap:16px
  }
  .footer>small {
    order:3
  }
}
@media(max-width:360px) {
  h1 {
    font-size:36px
  }
  .hero-notes {
    gap:8px;
    font-size:10px
  }
  .feature-grid {
    grid-template-columns:1fr
  }
  .card-title small {
    display:none
  }
  .ring {
    width:65px;
    height:65px
  }
  .metric strong {
    font-size:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}
.moon,.final-cta>img {
  mask-image:radial-gradient(ellipse at center,#000 38%,#000b 58%,transparent 73%);
  -webkit-mask-image:radial-gradient(ellipse at center,#000 38%,#000b 58%,transparent 73%)
}
@media(max-width:720px) {
  .hero {
    grid-template-columns:minmax(0,1fr)
  }
  .hero-copy,.preview-scene {
    min-width:0
  }
  .phone {
    width:min(330px,100%)
  }
  .preview-scene {
    overflow:clip;
    padding-block:20px
  }
  .moon {
    right:2px
  }
}