/* ===== QuietGo Site CSS ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700;900&display=swap');

*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  background: #20201d;
  color: #e8e7e2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:root{
  --bg:#20201d; --bg-2:#262522; --bg-3:#171614;
  --text:#e8e7e2; --ivory:#ddd5c4; --rose:#cd9689;
  --teal:#3C9D9B; --sage:#6C985F; --divider:#2a2a27;
}

.container{ max-width:1200px; margin:0 auto; padding:0 1rem; }

/* Type */
h1,h2,h3{ font-family:'Playfair Display', Georgia, 'Times New Roman', serif; color:var(--ivory); line-height:1.2; margin:0 0 .5rem; }
p{ margin:0 0 1rem; }
.quiet{ color:var(--ivory); }
.go{ color:var(--rose); }

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:var(--bg); border-bottom:1px solid var(--divider);
  height:80px; display:flex; align-items:center;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo-area{ display:flex; align-items:center; gap:.75rem; }
.logo{ height:56px; width:auto; } /* keep header from growing */
.branding{ display:flex; flex-direction:column; line-height:1; }
.brand-name{ font-size:1.5rem; margin:0; font-weight:700; }
.tagline{ color:var(--ivory); opacity:.95; font-size:.9rem; margin-top:.15rem; }

/* Nav */
.nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:1.5rem; }
/* ➊ more space before the Hub CTA */
.nav .cta{
  margin-left:3.5rem;
  background:var(--teal);
  color:var(--ivory);
  padding:.55rem 1rem;
  border-radius:6px;
  font-weight:600;
  transition:background .2s ease, transform .05s ease;
}
.nav .cta:hover{ background:var(--sage); }
.nav .cta:active{ transform:translateY(1px); }
.nav a:hover{ text-decoration:underline; }

/* ===== Main / Hero ===== */
.main{ background:var(--bg); }
.hero{ padding:4rem 0 3.25rem; text-align:center; }
.hero .container{ max-width:900px; } /* tighter line length */

/* ➋ smaller, centered hero logo */
.hero-mark{
  height:68px;
  margin:0 auto 1.2rem;
  opacity:.98;
}

/* ➋/➌ headline layout & spacing */
.hero-title{ font-size:clamp(2.2rem, 3.8vw + 1rem, 3.6rem); margin-bottom:.1rem; }
.hero-subtitle{ font-size:clamp(2.2rem, 3.8vw + 1rem, 3.6rem); margin-top:.25rem; }

/* ➌ tagline under headline */
.hero-lead{
  margin:1.1rem auto 0;           /* “space it down a little” */
  font-size:clamp(1.05rem, .9rem + .5vw, 1.25rem);
  opacity:.95;
}

/* ➍ belief paragraph */
.hero-belief{
  margin:1.6rem auto 0;
  font-size:clamp(1rem, .85rem + .45vw, 1.15rem);
  opacity:.95;
  max-width:48rem;
}

/* ➎ store CTAs */
.store-ctas{
  margin:2rem auto 0;
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
}
.store-btn{
  display:flex; align-items:center; justify-content:center;
  min-width:240px; padding:1rem 1.25rem;
  background:var(--bg-2); border:1px solid var(--divider);
  border-radius:12px; text-align:left;
}
.store-btn strong{ display:block; font-weight:700; color:var(--ivory); }
.store-btn span{ opacity:.9; }

.store-btn:hover{ border-color:var(--sage); }

/* Footer (unchanged) */
.site-footer{ background:var(--bg-3); border-top:1px solid var(--divider); color:var(--text); padding:2rem 0; }
.footer-grid{ display:grid; grid-template-columns:1fr auto auto; gap:1.5rem; align-items:center; }
.footer-brand .brand{ font-family:'Playfair Display', Georgia, serif; font-size:1.25rem; font-weight:700; }
.footer-brand .quiet{ color:var(--ivory); }
.footer-brand .go{ color:var(--rose); }
.footer-brand .tagline{ color:var(--ivory); opacity:.9; margin-top:.25rem; font-size:.9rem; }
.footer-nav a{ margin-right:1rem; }
.footer-nav a:hover{ text-decoration:underline; }
.footer-copy small{ opacity:.8; }

/* Responsive tweaks */
@media (max-width:900px){
  .logo{ height:50px; }
  .brand-name{ font-size:1.35rem; }
  .nav ul{ gap:1.1rem; }
  .nav .cta{ margin-left:2rem; }
  .hero-mark{ height:60px; }
}
@media (max-width:768px){
  .footer-grid{ grid-template-columns:1fr; text-align:center; }
  .nav .cta{ margin-left:1.25rem; }
}