/* Davello homepage palette — the general (non-vertical) landing page.
   Maps the coffee-shop palette slots onto the Davello teal brand, then
   overrides the warm colors hardcoded in /shared/styles.css.
   NOTE: this file must be linked AFTER /shared/styles.css so the
   overrides win by cascade order. */
:root {
  --cream: #F1F9F7;
  --cream-deep: #E3F1ED;
  --paper: #FBFEFD;
  --espresso: #042F2E;
  --espresso-soft: #134E4A;
  --ink: #11302D;
  --muted: #54716C;
  --muted-soft: #78928E;
  --caramel: #0D9488;
  --caramel-deep: #0F766E;
  --gold: #2DD4BF;
  --terracotta: #14B8A6;
  --line: #D3E7E2;
  --line-soft: #E1EFEB;
  --shadow-warm: 38px 48px 90px -40px rgba(4, 47, 46, 0.45);
  --shadow-soft: 0 24px 48px -28px rgba(4, 47, 46, 0.35);
}

/* ---------- Overrides for colors hardcoded in shared/styles.css ---------- */

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #14B8A6 0%, #0F766E 100%);
  color: #ECFDF9;
  box-shadow: 0 14px 28px -12px rgba(15, 118, 110, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:hover { box-shadow: 0 20px 38px -12px rgba(15, 118, 110, 0.78), inset 0 1px 0 rgba(255, 255, 255, 0.22); }

/* Nav */
header.nav { background: rgba(3, 34, 33, 0.72); border-bottom-color: rgba(204, 251, 241, 0.08); }
header.nav.scrolled { border-color: rgba(204, 251, 241, 0.12); background: rgba(3, 34, 33, 0.92); }
.brand { color: #F0FDFA; }

/* Hero */
.blob-1 { background: radial-gradient(circle, #99F6E4, transparent 70%); }
.blob-2 { background: radial-gradient(circle, #5EEAD4, transparent 70%); }
/* Phone shadow lives on a static pseudo-element, NOT as a drop-shadow filter
   on the cross-fading container — a container filter pulses/flashes its
   rectangular layer on mobile WebKit while the images transition opacity.
   Same approach as the demo page's .phone::before. */
.hero-shots { filter: none; }
.hero-shots::before {
  content: ""; position: absolute; inset: 8px 4px; border-radius: 46px;
  box-shadow: 38px 48px 80px -30px rgba(4, 47, 46, 0.45);
  pointer-events: none; z-index: 0;
}
/* Cross-fade the frames with a subtle zoom — same transition as the demo. */
.hero-shot { opacity: 0; transform: scale(1.015); transition: opacity .6s ease, transform .6s ease; }
.hero-shot.active { opacity: 1; transform: none; }

/* The "See your app" button is its own hero-grid cell so it can stack BELOW
   the phone on mobile. On desktop, pin copy + button to column 1 and let the
   phone span both rows in column 2 — visually identical to the original. */
@media (min-width: 941px) {
  .hero-grid { column-gap: 40px; row-gap: 0; }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .hero-actions { grid-column: 1; grid-row: 2; }
  .phone-stage { grid-column: 2; grid-row: 1 / 3; }
}

/* Tap-to-pause on the hero rotator (structure not in shared/styles.css) */
.phone-stage { flex-direction: column; }
.hero-shots { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pausehint {
  margin-top: 16px; font-size: 12.5px; color: var(--muted-soft);
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pausehint svg { width: 12px; height: 12px; opacity: 0.8; }

/* Old way vs Davello (dark compare section) */
.compare-bg { background: radial-gradient(700px 360px at 85% 10%, rgba(13, 148, 136, 0.35), transparent 70%); }
.compare-head h2 { color: #F0FDFA; }
.compare-col.new { background: linear-gradient(160deg, rgba(13, 148, 136, 0.22), rgba(13, 148, 136, 0.06)); border-color: rgba(45, 212, 191, 0.32); }
.compare-col.old h3 { color: #7FA8A3; }
.old .ico { color: #6E938F; }
.new .ico { background: rgba(45, 212, 191, 0.22); }
.compare-col.old li { color: #A9C5C1; }
.compare-col.new li { color: #D6F5EF; }

/* Outcome cards */
.card-ico { background: linear-gradient(140deg, #CCFBF1, #99F6E4); }

/* Brand showcase */
.brand-points .chk { background: linear-gradient(140deg, #14B8A6, #0F766E); }
/* Tighten the space above the "Your name. Not ours." copy inside the card
   (shared/styles.css gives it 70px; keep the responsive versions in step) */
.brand-grid .copy { padding-top: 44px; }
@media (max-width: 940px) { .brand-grid .copy { padding-top: 40px; } }
@media (max-width: 560px) { .brand-grid .copy { padding-top: 32px; } }

/* Testimonial */
.quote-wrap::before {
  background:
    radial-gradient(620px 320px at 85% 8%, rgba(45, 212, 191, 0.20), transparent 70%),
    radial-gradient(560px 300px at 10% 100%, rgba(13, 148, 136, 0.18), transparent 72%);
}
.quote-wrap blockquote { color: #F0FDFA; }
.quote-avatar { background: linear-gradient(140deg, #2DD4BF, #0F766E); }
.quote-author .who b { color: #F0FDFA; }
.quote-author .who span { color: #A9C5C1; }

/* FAQ */
.faq-item.open .pm { background: #CCFBF1; }

/* Final CTA */
.final { background: linear-gradient(150deg, #0F766E 0%, #115E59 55%, #042F2E 100%); }
.final-grain { background: radial-gradient(500px 300px at 50% 0%, rgba(45, 212, 191, 0.35), transparent 70%); }
.final h2 { color: #F0FDFA; }
.final p { color: #A7D8D2; }
.final .btn-primary { background: #F0FDFA; color: #0F766E; }
.final .btn-primary:hover { background: #fff; }

/* Modal */
.modal-backdrop { background: rgba(2, 24, 23, 0.55); }
/* Reassurance note under the submit button (structure not in shared/styles.css) */
.form-note {
  margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.form-note svg { width: 13px; height: 13px; color: var(--caramel); flex-shrink: 0; }
.field input:focus { box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.14); }
.success-badge { background: linear-gradient(140deg, #14B8A6, #0F766E); box-shadow: 0 14px 28px -12px rgba(15, 118, 110, 0.7); }

/* FAQ section: was an inline 88px/48px; trim the top on mobile. */
#faq { padding-top: 88px; padding-bottom: 48px; }

@media (max-width: 940px) {
  .hero-shots { filter: none; }
  .hero-shots::before { box-shadow: 0 30px 50px -22px rgba(4, 47, 46, 0.32); }
  /* Tighten the gap between the sticky nav and the title on mobile. */
  .hero { padding-top: 40px; padding-bottom: 44px; }
  /* Stacked hero: pull the carousel up under the copy and the button up
     under the carousel (was a 56px grid gap between each). */
  .hero-grid { gap: 30px; }
  /* Brand image: give it breathing room on the sides and less below. */
  .phone-trio { padding: 24px 40px 28px; }
  #faq { padding-top: 52px; }
}
@media (max-width: 560px) {
  .phone-trio { padding: 16px 26px 20px; }
}