/* iSoko brand layer over the Start Bootstrap New Age theme.
   Colours and type follow the app's Oisoko tokens (isoko_app/lib/design/oisoko.dart). */

:root {
  --msasa: #2d5f3f;
  --msasa-bright: #4a956a;
  --msasa-deep: #1b3d28;
  --msasa-wash: #e6f2ea;
  --maize: #fbbf24;
  --maize-wash: #fef3c7;
  --ochre: #d4745f;
  --indigo: #0ea5e9;
  --paper: #f6f7f5;
  --ink: #172019;
  --ink-soft: #44403c;
  --ink-muted: #6b6560;
  --bs-primary: #2d5f3f;
  --bs-primary-rgb: 45, 95, 63;
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-color: #172019;
}

body { font-family: var(--bs-body-font-family); color: var(--ink); }
h1, h2, h3, .display-1, .display-4, .font-alt, .navbar-brand {
  font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif !important;
  letter-spacing: -0.02em;
}
.text-muted { color: var(--ink-muted) !important; }

/* Gradients and accents: purple/blue -> msasa green */
.bg-gradient-primary-to-secondary { background: linear-gradient(45deg, var(--msasa-deep), var(--msasa-bright)) !important; }
.text-gradient {
  background: -webkit-linear-gradient(var(--msasa), var(--msasa-bright));
  background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
/* The theme scopes its stops under .masthead-device-mockup .circle, so these need !important */
.gradient-start-color { stop-color: var(--msasa-bright) !important; }
.gradient-end-color { stop-color: var(--maize) !important; }
.shape-1, .shape-2 { fill: var(--msasa) !important; }

.btn-primary {
  --bs-btn-bg: var(--msasa); --bs-btn-border-color: var(--msasa);
  --bs-btn-hover-bg: var(--msasa-deep); --bs-btn-hover-border-color: var(--msasa-deep);
  --bs-btn-active-bg: var(--msasa-deep); --bs-btn-active-border-color: var(--msasa-deep);
  --bs-btn-focus-shadow-rgb: 45, 95, 63;
}
.btn-maize { background: var(--maize); color: var(--ink); border: 0; font-weight: 600; }
.btn-maize:hover { background: #f5b000; color: var(--ink); }
a { color: var(--msasa); }

/* Navbar */
/* Brand wordmark: the icon *is* the "a" of amusika, so it is followed by "musika". */
.brand { display: inline-flex; align-items: center; gap: .06em; text-decoration: none; color: var(--ink);
  font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif !important; font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.brand img { height: .92em; width: .92em; border-radius: 22%; display: block; }
.brand:hover, .brand:focus { color: var(--msasa); }
.brand--light, .brand--light:hover { color: #fff; }
#mainNav .brand { font-size: 30px; padding: 0; }
footer .brand { font-size: 26px; }
#mainNav .nav-link { font-weight: 500; }
#mainNav .nav-link:hover { color: var(--msasa); }

/* Hero */
.masthead { background: radial-gradient(1200px 600px at 85% 20%, var(--msasa-wash), transparent 60%), var(--paper); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--msasa-wash); color: var(--msasa);
  font-weight: 600; font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
  padding: .4rem .9rem; border-radius: 999px;
}
.masthead h1 .highlight { color: var(--msasa); }
.hero-stats { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.5rem; }
.hero-stats div { font-size: .9rem; color: var(--ink-muted); }
.hero-stats strong { display: block; font-family: "Bricolage Grotesque", sans-serif; font-size: 1.5rem; color: var(--ink); }
.app-badge { height: 3.5rem !important; }
.badge-soon { position: relative; display: inline-block; opacity: .55; }
.badge-soon::after {
  content: "Coming soon"; position: absolute; top: -.6rem; right: -.6rem;
  background: var(--maize); color: var(--ink); font-size: .65rem; font-weight: 700;
  padding: .15rem .45rem; border-radius: 999px;
}

/* Screenshots inside the template's CSS phone */
.device .screen { background: #fff !important; }
.device .screen img.app-shot { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }

/* Trust strip */
.trust-strip { padding: 2.25rem 0; }
.trust-strip .item { color: #fff; display: flex; align-items: center; gap: .75rem; font-weight: 500; }
.trust-strip .item i { font-size: 1.6rem; color: var(--maize); }

/* Role sections */
section { padding: 6rem 0; }
.role-tag { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
.role-farmer .role-tag { color: var(--msasa); }
.role-buyer .role-tag { color: var(--ochre); }
.role-transporter .role-tag { color: var(--indigo); }
.check-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.check-list li { display: flex; gap: .75rem; margin-bottom: .9rem; color: var(--ink-soft); }
.check-list i { color: var(--msasa-bright); font-size: 1.2rem; line-height: 1.4; }
.phone-shot {
  max-width: 300px; width: 100%; margin: 0 auto; display: block;
  border-radius: 2.5rem; border: 10px solid #111; background: #111;
  box-shadow: 0 40px 80px -30px rgba(23, 32, 25, .45);
  aspect-ratio: 1080 / 2424; object-fit: cover; object-position: top;
}
.phone-stage { position: relative; }
.phone-stage::before {
  content: ""; position: absolute; inset: 10% 5%; border-radius: 50%;
  background: radial-gradient(circle, var(--stage, var(--msasa-wash)) 0%, transparent 70%);
  z-index: 0;
}
.phone-stage img { position: relative; z-index: 1; }
.role-buyer .phone-stage { --stage: #fbeae5; }
.role-transporter .phone-stage { --stage: #e0f2fe; }

/* How it works */
.step-card { background: #fff; border-radius: 1.5rem; padding: 2rem; height: 100%; border: 1px solid #e7e5e4; }
.step-num {
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700;
  background: var(--msasa); color: #fff; margin-bottom: 1rem;
}

/* Feature cards */
.feature-card { background: #fff; border-radius: 1.5rem; padding: 1.75rem; height: 100%; border: 1px solid #e7e5e4; transition: transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(23, 32, 25, .35); }
.feature-card i { font-size: 1.75rem; color: var(--msasa); }
.feature-card h3 { font-size: 1.2rem; margin: 1rem 0 .5rem; }
.feature-card p { color: var(--ink-muted); margin: 0; }

/* Screenshot gallery */
.gallery { display: flex; gap: 1.5rem; overflow-x: auto; padding: 1rem .25rem 2rem; scroll-snap-type: x mandatory; }
.gallery figure { flex: 0 0 220px; margin: 0; scroll-snap-align: start; text-align: center; }
.gallery img { width: 100%; border-radius: 1.75rem; border: 7px solid #111; background: #111; aspect-ratio: 1080 / 2424; object-fit: cover; object-position: top; }
.gallery figcaption { margin-top: .75rem; font-weight: 600; color: var(--ink-soft); font-size: .95rem; }

/* FAQ */
.faq details { background: #fff; border: 1px solid #e7e5e4; border-radius: 1rem; padding: 1.1rem 1.4rem; margin-bottom: .9rem; }
.faq summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--msasa); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .75rem 0 0; color: var(--ink-muted); }

/* CTA + footer */
.cta { background: var(--msasa-deep) !important; }
.cta::before { display: none !important; }
footer a { color: rgba(255, 255, 255, .7); text-decoration: none; }
footer a:hover { color: #fff; }

/* Legal pages */
.legal { max-width: 760px; margin: 0 auto; padding: 8rem 1rem 4rem; }
.legal h1 { font-size: 2.4rem; margin-bottom: 1.5rem; }
.legal h2 { font-size: 1.6rem; margin-top: 2.5rem; }
.legal h3 { font-size: 1.15rem; margin-top: 1.5rem; }
.legal p, .legal li { color: var(--ink-soft); line-height: 1.7; }

@media (max-width: 575.98px) {
  section { padding: 4rem 0; }
  .container.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
  .display-1 { font-size: 2.6rem; }
  .app-badge { height: 3rem !important; }
}

/* ── Web-app call to action ──────────────────────────────────────────
   The site used to push Google Play badges for an app that does not
   exist. Amusika runs in the browser, which is the advantage worth
   stating plainly: no install, no 40MB download on a metered bundle. */
.cta-note {
  font-size: 0.95rem;
  color: #6b7280;
  font-weight: 500;
}
.cta-sub {
  font-size: 0.95rem;
  color: #6b7280;
  max-width: 34rem;
}
.cta-sub strong { color: #047857; }
@media (max-width: 991.98px) {
  .cta-note, .cta-sub { text-align: center; }
  .cta-sub { margin-left: auto; margin-right: auto; }
}