/* ===== App landing pages (Next Call / Next Lift) ===========
   One stylesheet, two accents. The page sets body class
   `app-page app-call` or `app-page app-lift`.                */

.app-page{
  --accent:var(--moss);
  --accent-dark:var(--moss-d);
  --accent-soft:rgba(70,96,63,.10);
  --accent-line:rgba(185,140,90,.12);
  --accent-num:rgba(185,140,90,.35);
  --accent-eyebrow:var(--amber);
  --accent-thanks:rgba(185,140,90,.9);
  --accent-note:rgba(185,140,90,.75);
}
.app-page.app-lift{
  --accent:var(--clay);
  --accent-dark:#a03e18;
  --accent-soft:rgba(194,86,42,.10);
  --accent-line:rgba(194,86,42,.15);
  --accent-num:rgba(194,86,42,.30);
  --accent-eyebrow:#e08050;
  --accent-thanks:#e08050;
  --accent-note:rgba(224,128,80,.8);
}

/* HERO */
.hero{
  min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:120px 40px 90px; background:var(--forest);
  position:relative; overflow:hidden;
}
.hero .topo-bg{
  position:absolute; inset:0;
  background-image:url('/media/contours.png');
  background-size:1400px auto; background-position:center; opacity:.15;
}
.hero > *{ position:relative; z-index:2; }
.hero .app-icon-lg{
  width:96px; height:96px; border-radius:22px; overflow:hidden;
  box-shadow:0 20px 48px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08);
  margin:0 auto 28px;
}
.hero .app-icon-lg img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero .eyebrow{ font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent-eyebrow); margin-bottom:18px; }
.hero h1{ font-size:clamp(52px,8vw,108px); color:var(--sand); margin-bottom:20px; line-height:.96; }
.hero .sub{ font-size:19px; color:rgba(240,232,216,.72); max-width:32em; margin:0 auto 42px; line-height:1.6; }

/* WHY */
.why{ background:var(--sand); padding:96px 0; position:relative; overflow:hidden; }
.why .topo-r{
  position:absolute; right:0; top:0; bottom:0; width:500px;
  background-image:url('/media/contours.png');
  background-size:600px auto; background-position:left center; opacity:.4;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);
          mask-image:linear-gradient(90deg,transparent,#000 40%);
}
.why .wrap{ position:relative; max-width:720px; margin:0 auto; padding:0 40px; }
.why .eyebrow{ color:var(--accent); margin-bottom:20px; }
.why h2{ font-size:clamp(30px,4vw,52px); margin-bottom:24px; color:var(--ink); }
.why p{ font-size:19px; color:var(--ink-soft); margin:0 0 18px; line-height:1.7; }

/* FEATURES */
.features{ background:#fff; padding:90px 0; border-top:1px solid var(--line); }
.features .wrap{ max-width:1120px; margin:0 auto; padding:0 40px; }
.features .sec-head{ text-align:center; margin-bottom:60px; }
.features .sec-head .eyebrow{ color:var(--accent); margin-bottom:14px; }
.features .sec-head h2{ font-size:clamp(28px,3.2vw,42px); }
.feat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.feat-card{ padding:36px 32px; border:1px solid var(--line); border-radius:18px; }
.feat-icon{
  width:48px; height:48px; border-radius:13px; display:flex; align-items:center;
  justify-content:center; margin-bottom:22px; background:var(--accent-soft);
}
.feat-icon svg{ width:24px; height:24px; stroke:var(--accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.feat-card h3{ font-size:22px; margin-bottom:10px; }
.feat-card p{ font-size:16px; color:var(--ink-soft); margin:0; line-height:1.65; }

/* HOW IT WORKS */
.how{ background:var(--forest-2); padding:96px 0; position:relative; overflow:hidden; }
.how .topo-bg{
  position:absolute; inset:0;
  background-image:url('/media/topo-green.svg');
  background-size:1400px auto; background-position:center; opacity:.12;
}
.how .wrap{ max-width:1120px; margin:0 auto; padding:0 40px; position:relative; z-index:2; }
.how .sec-head{ text-align:center; margin-bottom:64px; }
.how .sec-head .eyebrow{ color:var(--accent-eyebrow); margin-bottom:14px; }
.how .sec-head h2{ font-size:clamp(28px,3.2vw,42px); color:var(--sand); }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.step{ background:rgba(255,255,255,.04); border:1px solid var(--accent-line); border-radius:18px; padding:40px 36px; }
.step .n{ font-size:56px; font-weight:200; line-height:1; color:var(--accent-num); margin-bottom:20px; display:block; }
.step h3{ font-size:20px; color:var(--sand); margin-bottom:10px; }
.step p{ font-size:15.5px; color:rgba(240,232,216,.58); line-height:1.65; margin:0; }

/* SCREENSHOTS */
.screens{ background:var(--forest); padding:96px 0; position:relative; overflow:hidden; }
.screens .topo-bg{
  position:absolute; inset:0;
  background-image:url('/media/contours.png');
  background-size:1400px auto; background-position:center; opacity:.10;
}
.screens .wrap{ max-width:1120px; margin:0 auto; padding:0 40px; position:relative; z-index:2; }
.screens .sec-head{ text-align:center; margin-bottom:64px; }
.screens .sec-head .eyebrow{ color:var(--accent-eyebrow); margin-bottom:14px; }
.screens .sec-head h2{ font-size:clamp(28px,3.2vw,42px); color:var(--sand); }
.phones-row{ display:flex; gap:28px; justify-content:center; align-items:flex-end; }
.mockup{
  border-radius:34px; padding:10px;
  background:linear-gradient(160deg,#2c2f2b,#1a1d19);
  box-shadow:0 28px 60px rgba(0,0,0,.55); flex:none;
}
.mockup.mid{ transform:translateY(-28px); }
.mockup .scr{ border-radius:25px; overflow:hidden; aspect-ratio:9/19.5; }
.mockup .scr img{ width:100%; height:100%; object-fit:cover; display:block; }
.app-call .mockup .scr{ background:linear-gradient(165deg,#3a4f32,#1e2b1a); }
.app-lift .mockup .scr{ background:linear-gradient(165deg,#4a3520,#2a1f12); }
.mockup.sm{ width:170px; }
.mockup.lg{ width:200px; }
.screen-caption{ text-align:center; margin-top:48px; font-size:15px; color:rgba(240,232,216,.45); letter-spacing:.04em; font-style:italic; }

/* FAQ */
.faq{ background:var(--sand); padding:96px 0; }
.faq .wrap{ max-width:760px; margin:0 auto; padding:0 40px; }
.faq .sec-head{ text-align:center; margin-bottom:52px; }
.faq .sec-head .eyebrow{ color:var(--accent); margin-bottom:14px; }
.faq .sec-head h2{ font-size:clamp(28px,3.2vw,42px); }
.faq-list{ border-top:1px solid var(--line); }
details.faq-item{ border-bottom:1px solid var(--line); }
details.faq-item summary{
  padding:22px 4px; cursor:pointer; font-size:18px; font-weight:300;
  display:flex; justify-content:space-between; align-items:center;
  list-style:none; color:var(--ink); gap:20px; transition:color .15s;
}
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary:hover{ color:var(--accent); }
details.faq-item summary .q-icon{
  width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; flex:none; color:var(--ink-soft);
  transition:background .15s, border-color .15s;
}
details.faq-item[open] summary .q-icon{ background:var(--accent); border-color:var(--accent); color:#fff; }
details.faq-item[open] summary .q-icon::after{ content:"−"; }
details.faq-item summary .q-icon::after{ content:"+"; }
details.faq-item .answer{ padding:2px 4px 26px; font-size:16.5px; color:var(--ink-soft); line-height:1.7; max-width:56em; }
.faq-more{ text-align:center; margin-top:44px; font-size:16.5px; color:var(--ink-soft); }
.faq-more a{ color:var(--accent); text-decoration:underline; text-decoration-color:var(--accent-note); text-underline-offset:3px; }
.faq-more a:hover{ text-decoration-color:var(--accent); }

/* CTA */
.cta-section{ background:var(--forest-2); padding:100px 0; text-align:center; position:relative; overflow:hidden; }
.cta-section .topo-bg{
  position:absolute; inset:0;
  background-image:url('/media/contours.png');
  background-size:1200px auto; background-position:center; opacity:.14;
}
.cta-section > *{ position:relative; z-index:2; }
.cta-section .wrap{ max-width:600px; margin:0 auto; padding:0 40px; }
.cta-section h2{ font-size:clamp(30px,4vw,52px); color:var(--sand); margin-bottom:18px; }
.cta-section p{ font-size:18px; color:rgba(240,232,216,.65); margin:0 auto 38px; line-height:1.6; }
.cta-section .badges{ justify-content:center; }

@media(max-width:768px){
  .feat-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .phones-row{ gap:16px; }
  .mockup.mid{ transform:none; }
  .mockup.sm{ width:130px; }
  .mockup.lg{ width:155px; }
}