/* ==========================================================================
   CHAX — joinchax.com "Coming Soon" landing page
   Visual language shared with arc/ prototypes — see arc/design.md
   (cream canvas, ink black, single green accent, brand blob decor)
   ========================================================================== */

:root{
  --cream: #F4EEE0;
  --cream-2: #EDE5D2;
  --ink: #16140F;
  --ink-soft: #4A463C;
  --muted: #8C876F;
  --white: #FFFFFF;
  --green: #2FBE6A;
  --green-soft: #C9F1D9;
  --orange: #FF6B3D;
  --mint: #BCEFE6;
  --brand-blue: #2E9BFF;
  --brand-teal: #3ED6C4;
  --brand-yellow: #F5A623;
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 14px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html,body{
  margin:0; padding:0;
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:hidden;
}

/* ---------- Brand blob decor (see design.md §3.11) ---------- */
.blob{
  position:fixed; filter: blur(60px); z-index:0; pointer-events:none;
  border-radius: 42% 58% 66% 34% / 46% 40% 60% 54%;
}
.blob-green{ width:38vw; max-width:420px; height:38vw; max-height:420px; background: var(--green); top:-10%; left:-12%; opacity:0.45; }
.blob-orange{ width:32vw; max-width:360px; height:32vw; max-height:360px; background: var(--orange); bottom:10%; right:-10%; opacity:0.3; }
.blob-blue{ width:28vw; max-width:320px; height:28vw; max-height:320px; background: var(--brand-blue); top:20%; right:-8%; opacity:0.28; }
.blob-teal{ width:34vw; max-width:380px; height:34vw; max-height:380px; background: var(--brand-teal); bottom:-14%; left:-10%; opacity:0.32; }

/* ---------- Top bar ---------- */
.topbar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding: 28px 24px 0;
}
.topbar img{ height: 30px; width:auto; }

/* ---------- Hero ---------- */
.hero{
  position:relative; z-index:1;
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  padding: 40px 24px 20px;
  gap: 22px;
}

.hero-logo{
  width: min(360px, 78vw);
  height:auto;
  filter: drop-shadow(0 16px 34px rgba(22,20,15,0.16));
  animation: float 4.5s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

.eyebrow{
  font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  color: var(--green);
  background: var(--green-soft);
  padding: 8px 18px;
  border-radius: 999px;
  display:inline-flex; align-items:center; gap:8px;
}
.eyebrow .dot{
  width:7px; height:7px; border-radius:50%; background: var(--green);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(0.7); }
}

h1.headline{
  font-size: clamp(28px, 6vw, 48px);
  line-height:1.12; font-weight:800; letter-spacing:-1px;
  margin: 0; color: var(--ink);
  max-width: 720px;
}
h1.headline .accent{ color: var(--green); }

p.subcopy{
  font-size: clamp(15px, 2.4vw, 18px); line-height:1.55; color: var(--ink-soft);
  font-weight:500; max-width: 480px; margin:0;
}

/* ---------- App store badges ---------- */
.store-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap: 14px; margin-top: 6px;
}
.store-badge{
  display:flex; align-items:center; gap:10px;
  background: var(--ink); color: var(--cream);
  border-radius: var(--radius-md);
  padding: 11px 20px 11px 16px;
  text-decoration:none;
  cursor: default;
  position:relative;
  min-width: 168px;
}
.store-badge svg{ flex-shrink:0; }
.store-badge .txt{ display:flex; flex-direction:column; line-height:1.2; text-align:left; }
.store-badge .txt .small{ font-size:10.5px; font-weight:600; opacity:0.75; }
.store-badge .txt .big{ font-size:16px; font-weight:800; letter-spacing:-0.2px; }
.store-badge .soon{
  position:absolute; top:-9px; right:-8px;
  background: var(--orange); color: var(--white);
  font-size:10px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
  padding: 3px 8px; border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

/* ---------- Social row ---------- */
.social-row{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-top: 6px;
}
.social-btn{
  width:44px; height:44px; border-radius:50%;
  background: var(--white); border: 2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  color: var(--ink); text-decoration:none;
  transition: background .15s ease, color .15s ease, transform .1s ease;
}
.social-btn:hover{ background: var(--ink); color: var(--cream); }
.social-btn:active{ transform: scale(0.92); }

/* ---------- About (SEO content) ---------- */
.about-seo{
  position:relative; z-index:1;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 24px;
  text-align:center;
}
.about-seo h2{
  font-size:13px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color: var(--muted); margin: 0 0 8px;
}
.about-seo p{
  font-size:13px; line-height:1.6; color: var(--muted); font-weight:500; margin:0;
}

/* ---------- Footer ---------- */
footer{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding: 22px 24px 32px;
  text-align:center;
}
.contact-link{
  color: var(--ink-soft); font-weight:700; font-size:14px; text-decoration:none;
  border-bottom: 2px solid var(--green);
  padding-bottom: 1px;
}
.contact-link:hover{ color: var(--ink); }
.copyright{ color: var(--muted); font-size:12.5px; font-weight:600; }

@media (max-width: 420px){
  .store-badge{ min-width: 148px; padding: 10px 14px 10px 12px; }
}