:root{
  --bg:#fcfbf8;
  --muted:#6b7280;
  --accent:#2f855a;
  --accent-2:#34d399;
  --card:#ffffff;
  --max-width:1100px;
  --radius:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family: 'Montserrat', 'Roboto', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:var(--bg); color:#0f172a; line-height:1.4; font-weight:500}

/* Global link appearance: no underlines, same color in all states */
a, a:link, a:visited, a:active, a:hover, a:focus{
  color: inherit;
  text-decoration: none;
}

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

/* Topbar */
.topbar{background:linear-gradient(180deg, rgba(12,74,71,0.95), rgba(4,34,55,0.95));position:sticky;top:0;z-index:20}
.topbar{border-bottom:2px solid rgba(255,255,255,0.25)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;padding:0.5rem 0;gap:1rem}
.top-links a{color:#fff;text-decoration:none;margin-right:1rem;font-size:0.95rem}
.top-actions{display:flex;gap:0.5rem}
.top-actions .small{padding:0.35rem 0.6rem;font-size:0.85rem;color:#fff}
.top-actions .btn{border:2px solid rgba(255,255,255,0.25);background:transparent;padding:0.35rem 0.6rem;border-radius:5px;color:#fff;text-decoration:none}
.top-actions .btn.btn-primary{background:transparent;border:2px solid rgba(255,255,255,0.25);color:#fff}
.topbar-logo{order:1}
.top-links{order:0}
.top-actions{order:2}

/* Uppercase header links and actions */
.top-links a, .top-actions a{ text-transform:uppercase; letter-spacing:0.06em }

/* Full-bleed hero */
.hero-hero{position:relative;min-height:56vh;display:flex;align-items:center}
.hero-bg{position:absolute;inset:0;background-image:linear-gradient(180deg, rgba(12,74,71,0.5), rgba(4,34,55,0.35)), url('../assets/pickapp_visualisation.png');background-size:cover;background-position:center;filter:brightness(0.95);background-repeat:no-repeat}
.hero-content{position:relative;z-index:2;padding:3rem 1rem}
.hero-center{max-width:900px;margin:0 auto;text-align:center;color:white}
.topbar-logo{width:64px;height:auto;display:block;margin:0 auto;filter:brightness(1);}
.hero-center h1{font-size:2.4rem;line-height:1.05;margin:0 0 0.65rem;font-weight:800;text-transform:uppercase;letter-spacing:0.04em}
.hero-center .big{font-size:2rem;display:block;text-transform:uppercase;margin-top:0.2rem}

/* Support variant where classes are swapped in markup:
  - <h1 class="big"> ... <span class="big2">...</span></h1>
  Ensure h1.big keeps the larger size and span.big2 is the smaller size. */
.hero-center h1.big{font-size:2.4rem}
.hero-center .big2{font-size:2rem;display:block;margin-top:0.2rem}
.hero-ctas{display:flex;gap:0.75rem;justify-content:center;margin-top:1rem}

/* Make hero lead text readable over background visualization */
.hero-center .lead{
  color: #fff; /* ensure white text on hero */
  background: rgba(0,0,0,0.28); /* subtle dark translucent panel */
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  display: inline-block;
  margin: 0.6rem 0 1rem;
}

/* Match header button styling in hero */
.hero-ctas .btn{border:2px solid rgba(255,255,255,0.25);background:transparent;color:#fff;padding:0.35rem 0.6rem;border-radius:5px;text-transform:uppercase;letter-spacing:0.06em}
.hero-ctas .btn.btn-primary{background:transparent;border:2px solid rgba(255,255,255,0.25);color:#fff}

/* Intro/download section */
.app-intro{padding:2.25rem 0;background:#fff}
.intro-inner{max-width:900px;margin:0 auto;text-align:center}
.intro-text{color:#064e45;font-size:1.05rem;margin-bottom:1rem}
.download-buttons{display:flex;gap:0.75rem;justify-content:center}
/* Make both store buttons identical size (match Google Play) */
.store-btn{display:inline-flex;align-items:center;justify-content:center;padding:4px;border-radius:8px;background:transparent;border:0;width:auto;height:auto}
.store-btn img{width:120px;height:auto;display:block}

/* Slightly smaller on very small screens */
@media(max-width:420px){
  .store-btn img{width:100px}
}

/* Mobile adjustments (improve layout on small screens) */
@media(max-width:700px){
  /* Topbar on mobile: show only the centered logo (hide links and action buttons) */
  .top-links{display:none}
  .top-actions{display:none}
  .topbar-inner{display:flex;justify-content:center;align-items:center;padding:0.5rem 0}
  .topbar-logo{display:block;width:64px;height:auto;margin:0 auto}

  /* Hero: smaller typography and tighter spacing */
  .hero-content{padding:2rem 0.75rem}
  .hero-center h1{font-size:1.6rem}
  .hero-center .big{font-size:1.25rem}
  .hero-center .big2{font-size:1.25rem}
  .hero-center .lead{font-size:0.95rem;padding:0.4rem 0.6rem}

  /* Stack CTAs vertically and make buttons more tappable */
  .hero-ctas{flex-direction:column;gap:0.5rem}
  .hero-ctas .btn{width:100%;padding:0.75rem;border-radius:8px}

  /* Cards: single column and larger tappable areas */
  .cards{grid-template-columns:1fr}
  .card{flex-direction:row;gap:0.5rem}
  .card img{width:90px;height:90px}

  /* Move store download buttons above intro text on mobile */
  .intro-inner{display:flex;flex-direction:column;align-items:center;gap:0.75rem}
  .download-buttons{order:-1;display:flex;gap:0.6rem;justify-content:center}

  /* Reduce container padding on very small screens */
  .container{padding:0.75rem}
}

/* Hero */
.hero{padding:2rem 0}
.hero-gradient{background:linear-gradient(180deg, #f0fdf4 0%, #ffffff 100%)}
.hero-inner{display:grid;grid-template-columns:1fr;gap:1rem;align-items:center}
.hero-copy h1{font-size:1.5rem;margin:0 0 0.5rem}
.hero-copy .accent{color:var(--accent-2);display:block}
.lead{color:var(--muted);margin:0 0 1rem}

.search-form{display:flex;gap:0.5rem;align-items:center;margin-bottom:1rem}
.search-form input[type="search"]{flex:1;padding:0.75rem;border-radius:10px;border:1px solid #e6edf0}
.search-form .btn{padding:0.7rem 0.9rem;border-radius:10px}

.how{display:flex;gap:0.75rem;margin-top:0.5rem}
.how-step{background:var(--card);padding:0.5rem 0.75rem;border-radius:10px;display:flex;align-items:center;gap:0.5rem;box-shadow:0 6px 18px rgba(15,23,42,0.04)}
.how-step strong{background:#fff;padding:6px 10px;border-radius:8px;color:var(--accent)}

.hero-media img{width:100%;max-width:380px;border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,0.06)}

/* Offers */
.offers{padding:1.5rem 0}
.offers h2{margin:0 0 0.25rem}
.muted{color:var(--muted)}
.cards{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}
.card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 8px 26px rgba(15,23,42,0.04);display:flex;flex-direction:row}
.card img{width:110px;height:110px;object-fit:cover}
.card-body{padding:0.75rem}
.card h3{margin:0 0 0.25rem;font-size:1rem}
.card-meta{font-size:0.85rem;color:var(--muted)}

.cta{padding:1.25rem 0;background:linear-gradient(90deg,#ffffff, #f7fffa)}
.cta-inner{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:space-between}
.btn-outline{border:1px solid #e6eef0;padding:0.6rem 0.9rem;border-radius:999px;background:transparent}

.contact{padding:1rem 0}

.site-footer{padding:1rem 0;border-top:1px solid rgba(15,23,42,0.04);text-align:center;color:var(--muted);font-size:0.9rem}

/* Responsive */
@media(min-width:700px){
  /* Swap sizes on larger screens as well so the intended heading stays larger */
  .hero-center h1{font-size:3.6rem}
  .hero-center .big{font-size:3rem}
  /* Also handle swapped-class variant at larger breakpoint */
  .hero-center h1.big{font-size:3.6rem}
  .hero-center .big2{font-size:3rem}
  .cards{grid-template-columns:repeat(2,1fr)}
  .cta-inner{flex-direction:row}
}

@media(min-width:1000px){
  .container{padding:2rem}
  .hero-copy h1{font-size:2rem}
}

/* small helpers */
.small{color:var(--muted);font-size:0.9rem}