/* ========== Tapwise — 2025 Apple-style UI (refined) ========== */
:root{
  --bg: #f5f5f7;
  --panel: #ffffff;
  --text: #1d1d1f;
  --text-subtle: #6e6e73;
  --link: #06c;
  --hairline: rgba(0,0,0,.08);
  --shadow: 0 8px 30px rgba(0,0,0,.06);
  --radius: 20px;
  --maxw: 1100px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #000000;
    --panel: #111112;
    --text: #f5f5f7;
    --text-subtle: #a1a1a6;
    --link: #2997ff;
    --hairline: rgba(255,255,255,.12);
    --shadow: 0 12px 40px rgba(0,0,0,.6);
  }
}

/* Base */
*{ box-sizing: border-box }
html,body{ margin:0; padding:0 }
body{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a{ color: var(--link); text-decoration: none }
a:hover{ text-decoration: underline }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem }

/* Header */
header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in oklab, var(--panel) 80%, transparent);
  border-bottom: 1px solid var(--hairline);
}
header .container{
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem;
}
.brand a{ color: var(--text); text-decoration:none; font-weight:700; letter-spacing:-.02em }
nav a{ margin-left: 1.2rem; font-weight: 600; color: var(--text-subtle) }
nav a:hover{ color: var(--text) }

/* Make anchor jumps account for sticky header */
[id]{ scroll-margin-top: 80px; }

/* Hero */
.hero{
  position: relative;
  padding: 6.5rem 0 4rem;
  text-align: left;
  background:
    radial-gradient(1200px 600px at 20% -10%, color-mix(in oklab, var(--panel) 70%, transparent), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--hairline);
}
@media (prefers-color-scheme: dark){
  .hero{
    background:
      radial-gradient(1100px 520px at 20% -10%, rgba(255,255,255,.05), transparent 60%),
      var(--bg);
  }
}

.hero-grid{
  display: grid; gap: 2.2rem; align-items: center;
  grid-template-columns: 1.1fr .9fr;
}
@media (max-width: 920px){
  .hero-grid{ grid-template-columns: 1fr }
}

.hero-text{ max-width: 640px }
.hero-title-balance{
  font-size: clamp(2.2rem, 4vw + 1rem, 3.4rem);
  line-height: 1.06;
  letter-spacing: -.03em;
  margin: 0 0 .75rem;
  text-wrap: balance;
}
.subtitle{
  font-size: clamp(1.05rem, .6vw + .9rem, 1.25rem);
  color: var(--text-subtle);
  margin: 0 0 1.3rem;
  max-width: 56ch;
}

/* Social proof row */
.rating-row{
  display:flex; align-items:center; flex-wrap:wrap; gap:.6rem .9rem;
  margin: .2rem 0 .4rem;
}
.stars{ font-size:1.25rem; color:#ffb400; line-height:1 }
.rating-text{ font-weight:600 }
.rating-sub{ color: var(--text-subtle) }
.trust-text{ color: var(--text-subtle); margin:.2rem 0 1rem; font-weight:500 }

/* Buttons */
.app-store-button{
  display:inline-flex; align-items:center; gap:.6rem;
  background:#000; color:#fff; border-radius:999px;
  padding:.9rem 1.25rem; font-weight:600; letter-spacing:.01em;
  text-decoration:none; transition:transform .2s ease, opacity .2s ease;
  white-space:nowrap;
}
.app-store-button:hover{ text-decoration:none; transform:translateY(-1px); opacity:.95 }
@media (prefers-color-scheme: dark){ .app-store-button{ background:#1c1c1e } }
.app-logo{ width:20px; height:20px; fill:#fff; flex:0 0 auto }
.app-store-button .label{ font-size:1rem; line-height:1 }

.hero-buttons{
  display:flex; align-items:center; gap:1.2rem; margin: 1.1rem 0 0;
  flex-wrap: wrap;
}

/* QR block */
.qr-download{
  text-align:center; font-size:.9rem; color: var(--text-subtle);
  display:flex; flex-direction:column; align-items:center;
}
.qr-download a{ display:inline-block; line-height:0 }
.qr-download img{
  display:block; width:98px; height:98px;
  border:1px solid var(--hairline);
  border-radius:14px; margin:0; background: var(--panel);
}
.qr-download .caption{ margin-top:.45rem; display:block }

/* Mobile: stack QR under button (prevents overflow) */
@media (max-width: 768px){
  .hero-buttons{
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
  }
  .qr-download{
    order: 2;
    margin-top: .25rem;
    align-items: flex-start;
    text-align: left;
  }
  .hero-image{ margin-top: .5rem; }
}

/* App preview */
.hero-image{ display:flex; justify-content:center }
.hero-image img{
  width: clamp(220px, 38vw, 420px);
  height: auto;
  border-radius: 28px;
  box-shadow: var(--shadow);
}

/* Sections */
.section{ padding: 3.5rem 0 }
.section.alt{ background: color-mix(in oklab, var(--panel) 30%, var(--bg)) }

/* Prose / headings */
h2,h3{ letter-spacing:-.02em; margin:0 0 1rem }
h2{ font-size: clamp(1.6rem, 1.2vw + 1rem, 2rem) }
h3{ font-size: clamp(1.4rem, .8vw + 1rem, 1.75rem) }

/* Features */
.features-grid{
  display:grid; gap:1rem; grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 860px){ .features-grid{ grid-template-columns: 1fr 1fr } }
@media (max-width: 560px){ .features-grid{ grid-template-columns: 1fr } }

.feature{
  padding:1.2rem 1.2rem 1rem;
  border:1px solid var(--hairline); border-radius:16px;
  background: var(--panel); box-shadow: var(--shadow)
}
.feature h4{ margin:.2rem 0 .4rem; letter-spacing:-.01em }
.feature p{ color: var(--text-subtle); margin:0 }

/* Feature icons */
.feature-icon{
  width:28px; height:28px;
  margin-bottom:.5rem;
  opacity:.85;
}
@media (prefers-color-scheme: dark){
  .feature-icon{ filter: brightness(0) invert(1); }
}

/* Reviews */
.reviews-grid{
  display:grid; gap:1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.review{
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:1rem 1.2rem;
  background: var(--panel);
  box-shadow: var(--shadow);
}
.review-author{
  display:block; margin-top:.5rem;
  font-size:.9rem; color: var(--text-subtle); font-weight:600;
}

/* CTA panel */
.cta-panel{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  border:1px solid var(--hairline); border-radius:20px; padding:1.4rem 1.6rem;
  background: var(--panel); box-shadow: var(--shadow);
}
.cta-panel p{ color: var(--text-subtle); margin:.2rem 0 0 }
@media (max-width: 700px){
  .cta-panel{ flex-direction:column; text-align:center }
}

/* CTA download stack */
.cta-download{
  display:flex; flex-direction:column; align-items:center;
}
.cta-app-icon{
  width:48px; height:48px;
  display:block; margin:0 auto 8px;
  border-radius:10px;
  box-shadow: var(--shadow);
}

/* FAQ */
.faq-list details{
  border:1px solid var(--hairline); border-radius:14px; background: var(--panel);
  padding:.9rem 1.1rem; margin:.7rem 0; box-shadow: var(--shadow);
}
.faq-list summary{ cursor:pointer; font-weight:600; list-style:none }
.faq-list summary::-webkit-details-marker{ display:none }
.faq-list p{ color: var(--text-subtle); margin:.5rem 0 0 }

/* Footer & pages */
footer{
  text-align:center; padding: 2.5rem 1.5rem 3rem;
  color: var(--text-subtle); border-top: 1px solid var(--hairline);
  background: color-mix(in oklab, var(--panel) 40%, var(--bg));
}
.footer-links{ margin-bottom:.8rem }
.footer-links a{ margin: 0 .7rem; color: var(--text-subtle) }
.footer-links a:hover{ color: var(--text) }

.page{ padding: 4rem 0 5rem }
.page p, .page li{ color: var(--text-subtle) }

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}
:focus-visible{
  outline: 2px solid color-mix(in oklab, var(--link) 70%, white);
  outline-offset: 2px; border-radius: 8px;
}