/* Narau v9 product page — original app-marketing layout inspired by the user's reference */
.narau-page{
  --n9-chocolate:#74584c;
  --n9-chocolate-deep:#60463d;
  --n9-chocolate-soft:#8a6b5d;
  --n9-cream:#f7f0e8;
  --n9-cream-light:#fffaf6;
  --n9-pink:#ee8299;
  --n9-pink-soft:#f7c9d3;
  --n9-ink:#272225;
  --n9-muted:#756a6d;
  background:var(--n9-cream);
}
.narau-nav{
  background:rgba(247,240,232,.9);
}
.narau-nav-links{gap:20px}

.n9-hero{padding:26px 0 245px}
.n9-hero-panel{
  position:relative;
  overflow:visible;
  min-height:780px;
  padding:72px 38px 0;
  border-radius:42px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.14),transparent 30%),
    linear-gradient(180deg,#7d6154 0%,var(--n9-chocolate) 58%,#6f5146 100%);
  box-shadow:0 30px 90px rgba(83,56,47,.16);
}
.n9-hero-copy{
  max-width:960px;
  margin:0 auto;
  text-align:center;
  color:#fff;
}
.n9-product-badge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 14px 8px 8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.09);
  border-radius:999px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.01em;
}
.n9-product-badge img{
  width:38px;height:38px;object-fit:cover;border-radius:11px;
}
.n9-hero h1{
  margin:25px auto 18px;
  max-width:980px;
  color:#fff;
  font-size:clamp(58px,8.1vw,108px);
  line-height:.93;
  letter-spacing:-.065em;
}
.n9-hero h1 em{
  color:#ffb5c4;
  font-style:normal;
}
.n9-hero-copy>p{
  max-width:850px;
  margin:0 auto;
  color:rgba(255,255,255,.82);
  font-size:clamp(18px,2vw,25px);
  line-height:1.52;
}
.n9-hero-actions{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:30px;
}
.n9-store-button,.n9-secondary-button{
  min-height:58px;
  border-radius:18px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-weight:800;
  text-decoration:none;
}
.n9-store-button{
  min-width:230px;
  background:#fff;
  color:#251f21;
  box-shadow:0 12px 28px rgba(55,38,32,.16);
}
.n9-store-button small{
  display:block;
  font-size:9px;
  letter-spacing:.08em;
  line-height:1.1;
  opacity:.64;
}
.n9-store-button>span:last-child{font-size:18px;line-height:1.1;text-align:left}
.n9-apple{font-size:17px}
.n9-secondary-button{
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
}
.n9-hero-meta{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px;
}
.n9-hero-meta span{
  padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.68);font-size:11px;font-weight:700;
}

.n9-hero-phones{
  position:absolute;
  left:30px;right:30px;
  bottom:-205px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}
.n9-phone{
  position:relative;
  width:32%;
  max-width:360px;
  aspect-ratio:9/19.25;
  padding:8px;
  border-radius:58px;
  background:#141214;
  border:2px solid rgba(255,255,255,.62);
  box-shadow:0 35px 70px rgba(41,29,25,.28);
}
.n9-phone-center{
  transform:translateY(-38px);
  z-index:3;
}
.n9-phone-left,.n9-phone-right{z-index:2}
.n9-phone::after{
  content:"";
  position:absolute;
  inset:5px;
  pointer-events:none;
  border-radius:51px;
  border:1px solid rgba(255,255,255,.12);
}
.n9-phone-notch,.n9-media-phone .n9-phone-notch{
  position:absolute;
  z-index:4;
  top:15px;
  left:50%;
  transform:translateX(-50%);
  width:36%;
  height:29px;
  border-radius:0 0 18px 18px;
  background:#141214;
}
.n9-phone-screen{
  width:100%;height:100%;
  border-radius:49px;
  background:#000;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.n9-video-label{
  color:rgba(255,255,255,.33);
  font-size:11px;
  font-weight:900;
  letter-spacing:.2em;
}

.n9-quick-strip{padding:20px 0 78px}
.n9-quick-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:26px;
  background:rgba(255,255,255,.5);
  overflow:hidden;
}
.n9-quick-grid>div{
  min-height:112px;padding:22px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  border-right:1px solid var(--line);
}
.n9-quick-grid>div:last-child{border-right:0}
.n9-quick-grid b{font-size:28px;margin-bottom:6px}
.n9-quick-grid span{font-size:13px;color:var(--n9-muted);font-weight:700}

.n9-section{padding:112px 0}
.n9-section-heading{max-width:820px;margin-bottom:62px}
.n9-centered{text-align:center;margin-left:auto;margin-right:auto}
.n9-kicker{
  color:var(--n9-pink);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.15em;
}
.n9-section-heading h2,.n9-showcase-copy h2,.n9-privacy-copy h2,.n9-faq-heading h2,.n9-final-panel h2{
  margin:12px 0 18px;
  font-size:clamp(42px,5.4vw,72px);
  line-height:.98;
  letter-spacing:-.055em;
}
.n9-section-heading p,.n9-faq-heading p{
  color:var(--n9-muted);
  font-size:18px;
  line-height:1.65;
}

.n9-feature-layout{
  display:grid;
  grid-template-columns:1fr .85fr 1fr;
  gap:22px;
  align-items:center;
}
.n9-feature-stack{display:grid;gap:18px}
.n9-feature-card{
  min-height:200px;
  padding:27px;
  display:flex;
  gap:20px;
  align-items:flex-start;
  border:1px solid var(--line);
  border-radius:28px;
  background:rgba(255,255,255,.55);
}
.n9-feature-glyph{
  flex:0 0 54px;
  height:54px;
  display:grid;place-items:center;
  border-radius:16px;
  background:var(--n9-pink-soft);
  font-size:24px;
  font-weight:800;
}
.n9-feature-card h3{margin:2px 0 8px;font-size:21px;letter-spacing:-.03em}
.n9-feature-card p{margin:0;color:var(--n9-muted);line-height:1.6;font-size:14px}
.n9-feature-center{
  position:relative;
  min-height:420px;
  display:grid;
  place-items:center;
  text-align:center;
}
.n9-feature-center img{
  position:relative;
  z-index:2;
  width:min(66%,235px);
  border-radius:26%;
  box-shadow:0 28px 60px rgba(92,59,63,.18);
}
.n9-feature-center span{
  position:absolute;
  bottom:12px;
  font-size:13px;font-weight:800;color:var(--n9-muted);
}
.n9-center-orbit{
  position:absolute;
  width:340px;height:340px;border-radius:50%;
  border:1px solid rgba(116,88,76,.16);
}
.n9-center-orbit::before,.n9-center-orbit::after{
  content:"";position:absolute;border-radius:50%;border:1px solid rgba(238,130,153,.18)
}
.n9-center-orbit::before{inset:45px}
.n9-center-orbit::after{inset:92px}

.n9-showcase{padding:110px 0}
.n9-showcase-soft{
  background:rgba(255,255,255,.34);
  border-top:1px solid rgba(38,33,36,.05);
  border-bottom:1px solid rgba(38,33,36,.05);
}
.n9-showcase-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:78px;
  align-items:center;
}
.n9-showcase-reverse .n9-showcase-copy{order:2}
.n9-showcase-reverse .n9-media-card{order:1}
.n9-showcase-copy p{
  color:var(--n9-muted);
  font-size:17px;
  line-height:1.7;
}
.n9-check-list{
  list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px;
}
.n9-check-list li{
  position:relative;padding-left:30px;font-weight:750;font-size:14px;
}
.n9-check-list li::before{
  content:"✓";position:absolute;left:0;top:-2px;
  width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--n9-pink-soft);
  font-size:12px;
}
.n9-media-card{
  position:relative;
  min-height:620px;
  display:grid;
  place-items:center;
  border-radius:38px;
  overflow:hidden;
  background:linear-gradient(145deg,#e7d1c7,#f4dfd7);
}
.n9-media-card-pink{background:linear-gradient(145deg,#f8d5dd,#efb2c2)}
.n9-media-phone{
  position:relative;
  z-index:2;
  width:300px;
  aspect-ratio:9/19.2;
  padding:8px;
  border-radius:54px;
  background:#151315;
  box-shadow:0 30px 68px rgba(63,43,48,.22);
}
.n9-media-placeholder{
  width:100%;height:100%;
  border-radius:47px;background:#000;
  display:grid;place-items:center;text-align:center;
  color:rgba(255,255,255,.32);font-size:12px;font-weight:900;letter-spacing:.18em;
}
.n9-media-accent{
  position:absolute;
  right:20px;
  bottom:-44px;
  font-size:220px;
  font-weight:800;
  line-height:1;
  color:rgba(255,255,255,.28);
}

.n9-steps{padding:120px 0}
.n9-step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.n9-step-card{
  position:relative;
  min-height:330px;
  padding:30px;
  border-radius:30px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.56);
}
.n9-step-number{color:var(--n9-pink);font-size:11px;font-weight:900;letter-spacing:.14em}
.n9-step-symbol{
  width:72px;height:72px;border-radius:22px;margin:44px 0 25px;
  display:grid;place-items:center;background:#ead9d0;font-size:32px;font-weight:800;
}
.n9-step-card:nth-child(2) .n9-step-symbol{background:var(--n9-pink-soft)}
.n9-step-card h3{margin:0 0 10px;font-size:28px;letter-spacing:-.035em}
.n9-step-card p{margin:0;color:var(--n9-muted);line-height:1.65}

.n9-privacy{padding:20px 0 120px}
.n9-privacy-panel{
  padding:62px;
  border-radius:40px;
  color:#fff;
  background:
    radial-gradient(circle at 92% 12%,rgba(255,255,255,.12),transparent 26%),
    linear-gradient(145deg,#806255,#684c42);
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:60px;
}
.n9-kicker-light{color:#ffc2cf}
.n9-privacy-copy p{color:rgba(255,255,255,.72);line-height:1.65;font-size:17px}
.n9-light-link{display:inline-block;margin-top:14px;color:#fff;font-weight:800;text-decoration:none}
.n9-privacy-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.n9-privacy-grid>div{
  padding:24px;
  border-radius:24px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
}
.n9-privacy-grid b{display:block;margin-bottom:8px;font-size:17px}
.n9-privacy-grid span{color:rgba(255,255,255,.66);font-size:13px;line-height:1.5}

.n9-faq{padding:120px 0}
.n9-faq-layout{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:80px;
  align-items:start;
}
.n9-faq-heading{position:sticky;top:120px}
.n9-faq-list{border-top:1px solid var(--line)}
.n9-faq-list details{border-bottom:1px solid var(--line);padding:0}
.n9-faq-list summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding:26px 44px 26px 0;
  font-size:20px;font-weight:800;letter-spacing:-.02em;
}
.n9-faq-list summary::-webkit-details-marker{display:none}
.n9-faq-list summary::after{
  content:"+";
  position:absolute;right:4px;top:21px;
  width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:rgba(116,88,76,.08);
}
.n9-faq-list details[open] summary::after{content:"–"}
.n9-faq-list details p{
  margin:0;padding:0 44px 26px 0;color:var(--n9-muted);line-height:1.65;
}

.n9-final-cta{padding:10px 0 130px}
.n9-final-panel{
  text-align:center;
  padding:80px 24px;
  border-radius:40px;
  border:1px solid rgba(38,33,36,.08);
  background:
    radial-gradient(circle at 50% 20%,rgba(247,201,211,.55),transparent 28rem),
    rgba(255,255,255,.48);
}
.n9-final-panel>img{
  width:92px;height:92px;object-fit:cover;border-radius:24px;margin:0 auto 24px;
  box-shadow:0 18px 42px rgba(63,43,48,.14);
}
.n9-final-panel p{color:var(--n9-muted);font-size:17px}
.n9-final-actions{
  display:flex;justify-content:center;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px;
}
.n9-store-button-dark{background:var(--n9-ink);color:#fff}
.n9-final-actions>a{font-weight:800;text-decoration:none}

@media (max-width:1050px){
  .narau-nav-links a:not(.nav-pill){display:none}
  .n9-hero{padding-bottom:210px}
  .n9-hero-panel{min-height:720px}
  .n9-hero-phones{left:20px;right:20px;bottom:-180px}
  .n9-phone{max-width:310px;border-radius:52px}
  .n9-phone-screen{border-radius:44px}
  .n9-feature-layout{grid-template-columns:1fr 1fr}
  .n9-feature-center{grid-column:1/-1;grid-row:1;min-height:340px}
  .n9-feature-stack{grid-row:2}
  .n9-showcase-grid{gap:45px}
}
@media (max-width:760px){
  .n9-hero{padding:14px 0 80px}
  .n9-hero-panel{
    min-height:0;
    padding:46px 18px 32px;
    border-radius:30px;
    overflow:hidden;
  }
  .n9-hero h1{font-size:54px}
  .n9-hero-copy>p{font-size:17px}
  .n9-hero-phones{
    position:relative;
    left:auto;right:auto;bottom:auto;
    margin:48px -18px -32px;
    padding:0 18px 28px;
    overflow-x:auto;
    justify-content:flex-start;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .n9-hero-phones::-webkit-scrollbar{display:none}
  .n9-phone{
    flex:0 0 245px;width:245px;max-width:none;
    scroll-snap-align:center;border-radius:45px;
  }
  .n9-phone-center{transform:none}
  .n9-phone-screen{border-radius:38px}
  .n9-quick-strip{padding-top:18px}
  .n9-quick-grid{grid-template-columns:1fr 1fr}
  .n9-quick-grid>div:nth-child(2){border-right:0}
  .n9-quick-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .n9-section,.n9-showcase,.n9-steps,.n9-faq{padding:84px 0}
  .n9-feature-layout{display:block}
  .n9-feature-center{min-height:340px;margin:18px 0}
  .n9-feature-stack{margin-bottom:18px}
  .n9-showcase-grid{grid-template-columns:1fr;gap:38px}
  .n9-showcase-reverse .n9-showcase-copy,.n9-showcase-reverse .n9-media-card{order:initial}
  .n9-media-card{min-height:520px}
  .n9-media-phone{width:245px}
  .n9-step-grid{grid-template-columns:1fr}
  .n9-step-card{min-height:260px}
  .n9-step-symbol{margin-top:28px}
  .n9-privacy-panel{grid-template-columns:1fr;padding:34px 26px;gap:35px;border-radius:30px}
  .n9-privacy-grid{grid-template-columns:1fr}
  .n9-faq-layout{grid-template-columns:1fr;gap:32px}
  .n9-faq-heading{position:static}
  .n9-final-panel{padding:60px 20px;border-radius:30px}
}


/* Narau v10 hero placement fix — keep copy clear, place phones below it */
@media (min-width:761px){
  .n9-hero{
    padding-bottom:250px;
  }

  .n9-hero-panel{
    min-height:0;
    padding-bottom:0;
  }

  .n9-hero-phones{
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin:86px auto -215px;
    width:100%;
    max-width:1160px;
    padding:0 6px;
  }

  .n9-phone-center{
    transform:translateY(-34px);
  }
}

/* Narau v11 launch-content additions */
.n9-screen-image{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center top;
}
.n9-stats{padding:0 0 42px}
.n9-stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
}
.n9-stats-grid>div{
  padding:28px 20px;border:1px solid var(--line);border-radius:24px;
  background:rgba(255,255,255,.56);text-align:center;
}
.n9-stats-grid strong{display:block;font-size:32px;letter-spacing:-.045em}
.n9-stats-grid span{display:block;margin-top:6px;color:var(--n9-muted);font-size:13px;font-weight:750}
.n9-languages{padding:20px 0 100px}
.n9-languages-panel{
  padding:48px;border:1px solid var(--line);border-radius:34px;background:rgba(255,255,255,.5);
  display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;
}
.n9-languages-panel h2{margin:10px 0 14px;font-size:clamp(38px,4vw,58px);letter-spacing:-.05em}
.n9-languages-panel p{margin:0;color:var(--n9-muted);font-size:16px;line-height:1.7}
.n9-language-badges{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.n9-language-badges span{
  min-height:58px;display:grid;place-items:center;border-radius:18px;background:var(--n9-cream);
  border:1px solid rgba(38,33,36,.06);font-weight:850;font-size:14px;
}
.n9-pricing{padding:110px 0 120px;background:rgba(255,255,255,.3);border-top:1px solid rgba(38,33,36,.05);border-bottom:1px solid rgba(38,33,36,.05)}
.n9-price-grid{max-width:880px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.n9-price-card{
  padding:38px;border-radius:30px;border:1px solid var(--line);background:rgba(255,255,255,.66);
}
.n9-price-featured{background:linear-gradient(145deg,#fff7f9,#f6d9e1);border-color:rgba(238,130,153,.35)}
.n9-price-label{display:block;color:var(--n9-pink);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.13em}
.n9-price-card strong{display:block;margin:14px 0 10px;font-size:50px;letter-spacing:-.055em}
.n9-price-card p{margin:0;color:var(--n9-muted);line-height:1.6}
.n9-price-note{text-align:center;margin:18px 0 0;color:var(--n9-muted);font-size:12px}
.n9-privacy-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){
  .n9-stats-grid{grid-template-columns:1fr 1fr}
  .n9-languages-panel{grid-template-columns:1fr;padding:30px 24px;gap:28px}
  .n9-language-badges{grid-template-columns:repeat(3,1fr)}
  .n9-price-grid{grid-template-columns:1fr}
  .n9-pricing{padding:84px 0}
}

/* Narau v15 real screenshot layout — use the provided screenshots directly with no fake device frames */
.n9-hero-phones{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:34px;
  max-width:1040px;
  margin:0 auto;
}

.n9-shot{
  width:29%;
  max-width:292px;
  display:block;
  border-radius:28px;
  box-shadow:0 28px 58px rgba(41,29,25,.20);
  background:transparent;
}

.n9-shot-center{
  max-width:310px;
  transform:translateY(-28px);
}

.n9-media-shot{
  width:282px;
  max-width:100%;
  display:block;
  border-radius:28px;
  box-shadow:0 28px 58px rgba(63,43,48,.18);
}

@media (max-width:1050px) and (min-width:761px){
  .n9-hero-phones{gap:24px;max-width:900px}
  .n9-shot{width:29.5%;max-width:270px}
  .n9-shot-center{max-width:286px}
}

@media (max-width:760px){
  .n9-hero-phones{
    gap:18px;
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:8px;
  }
  .n9-shot{
    flex:0 0 235px;
    width:235px;
    max-width:none;
    border-radius:22px;
  }
  .n9-shot-center{
    transform:none;
    max-width:none;
  }
  .n9-media-shot{
    width:235px;
    border-radius:22px;
  }
}