/* Landing page styles. Mobile first: base rules are the phone layout.
   Poppins is used for the wordmark only, to match the logo's lettering. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Poppins:wght@600;700&display=swap');

:root {
    --ink: #0f172a;
    --body: #475569;
    --muted: #64748b;
    --line: #e2e8f0;
    --surface: #ffffff;
    --surface-alt: #f8fafc;
    --brand: #2563eb;
    --brand-dark: #1d4ed8;
    --brand-tint: #eff6ff;
    /* Estimated from the logo artwork; replace with the exact hex when known. */
    --logo-blue: #1a3ec8;
    --ok: #15803d;
    --ok-tint: #dcfce7;
    --radius: 14px;
    /* The page gutter. Defined once because two things must agree on it: the
       inset every `.wrap` uses, and the dropdown panel, which is positioned
       against the nav's PADDING box and so has to be offset by the same amount
       to line up with the bar rather than run wider than it. */
    --gutter: clamp(.9rem, 4vw, 1.5rem);
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* Anchored sections would otherwise land under the sticky header. */
section[id] { scroll-margin-top: 80px; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    /* Not overflow-x: hidden — it breaks position: sticky on the header.
       Overflow is contained in .hero instead. */
}

img, svg { max-width: 100%; height: auto; }

/* Lets long words break instead of forcing a grid track wider than the screen. */
* { min-width: 0; }

.wrap {
    width: 100%; max-width: 1120px; margin: 0 auto;
    padding: 0 var(--gutter);
}

.skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--brand); color: #fff; padding: .6rem 1rem; z-index: 100;
}
.skip-link:focus { left: 0; }

/* ── Launch overlay ──────────────────────────────────────────────────────── */
#launchOverlay {
    position: fixed; inset: 0; background: #fff; z-index: 90;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
}
/* Same lockup as the header, scaled up. */
.overlay-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    --mark-size: clamp(46px, 13vw, 58px);
}
.overlay-brand { --wordmark-size: clamp(1.4rem, 6.4vw, 1.8rem); }

.overlay-tagline {
    margin-top: .55rem;
    font-size: clamp(.72rem, 3vw, .8rem);
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Indeterminate: the session check has no knowable duration. */
.overlay-bar {
    position: relative;
    width: min(200px, 52vw);
    height: 3px;
    margin-top: 1.6rem;
    border-radius: 999px;
    background: #e2e8f0;
    overflow: hidden;
}
.overlay-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--brand), var(--logo-blue));
    animation: sweep 1.15s ease-in-out infinite;
}
@keyframes sweep {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* Reduced motion. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition: none !important; }
    /* Part-filled rather than empty, so it still reads as working. */
    .overlay-bar span { animation: none; left: 0; width: 100%; opacity: .55; }
}

/* ── Header ──────────────────────────────────────────────────────────────── */
header {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, box-shadow .2s ease;
}
header.scrolled { border-bottom-color: var(--line); box-shadow: 0 1px 12px rgba(15, 23, 42, .05); }

.nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem;
    /* Vertical padding ONLY, as longhands. This element carries `wrap nav`, so
       a `padding: .8rem 0` shorthand here also sets the horizontal padding to
       zero and silently overrides the inset `.wrap` just set — same specificity,
       declared later, so it wins. That is what pushed the logo and the menu
       button flat against the screen edges while every other section stayed
       inset, leaving the header visibly out of line with the page beneath it.
       `.footer-base` already uses the longhand for this reason. */
    padding-top: .8rem;
    padding-bottom: .8rem;
    /* The panel is positioned against this, not against <header>, so its edges
       line up with the bar on every width. */
    position: relative;
}

/* Header lockup: cropped mark plus the name as live text. */
.logo {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    flex-shrink: 0;
    text-decoration: none;
}

/* Lockup sizing per context. The lockup itself lives in assets/brand.css. */
.logo { --mark-size: clamp(34px, 8vw, 42px); --wordmark-size: clamp(1.02rem, 4.6vw, 1.3rem); }

/* Footer: same lockup, one size up. */
.logo-footer {
    --mark-size: clamp(40px, 10vw, 48px);
    --wordmark-size: clamp(1.15rem, 5vw, 1.4rem);
    margin-bottom: .7rem;
}

/* Mobile menu. One panel holds the links and the buttons. Animated on
   max-height; visibility is carried along so a closed panel is not focusable. */
.nav-panel {
    /* Offset by the gutter, not 0: an absolutely positioned element resolves
       left/right against the containing block's padding box, so left:0 would
       sit outside the inset the bar itself uses. */
    position: absolute; left: var(--gutter); right: var(--gutter); top: calc(100% + .35rem);
    display: flex; flex-direction: column;
    background: #fff;
    border: 1px solid var(--line); border-radius: 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .12);
    padding: 0 .9rem;
    max-height: 0; overflow: hidden; visibility: hidden; opacity: 0;
    border-color: transparent;
    transition: max-height .28s ease, opacity .2s ease, visibility .28s;
}
.nav-open .nav-panel {
    max-height: 34rem; visibility: visible; opacity: 1;
    border-color: var(--line);
    padding-top: .35rem; padding-bottom: .9rem;
}

.nav-links { display: flex; flex-direction: column; }
.nav-links a {
    color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 500;
    padding: .85rem .25rem; border-bottom: 1px solid var(--surface-alt);
}
.nav-links a:active { background: var(--surface-alt); }

.nav-actions { display: flex; flex-direction: column; gap: .5rem; padding-top: .9rem; }
.nav-actions .btn { text-align: center; padding: .8rem 1.15rem; }

.nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; flex-shrink: 0;
    background: none; border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle span {
    display: block; height: 2px; width: 100%; background: var(--ink); border-radius: 2px;
    transition: transform .22s ease, opacity .22s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
    display: inline-block; padding: .62rem 1.15rem; border-radius: 10px;
    font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap;
    border: 1px solid transparent; cursor: pointer; transition: background .15s ease;
}
.btn-lg { padding: .85rem 1.6rem; font-size: 1rem; border-radius: 12px; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-ghost { color: var(--ink); border-color: #cbd5e1; background: #fff; }
.btn-ghost:hover { background: var(--surface-alt); }
.btn-invert { background: #fff; color: var(--brand-dark); }
.btn-invert:hover { background: #eff6ff; }
.btn-outline-light { color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-outline-light:hover { background: rgba(255, 255, 255, .12); }

/* ── Sections ────────────────────────────────────────────────────────────── */
section { padding: clamp(2.5rem, 8vw, 3rem) 0; }
.alt { background: var(--surface-alt); }

.section-title {
    text-align: center; font-size: clamp(1.35rem, 5.6vw, 2rem);
    font-weight: 800; letter-spacing: -.02em; margin-bottom: .6rem;
    overflow-wrap: break-word;
}
.section-sub {
    text-align: center; color: var(--body);
    font-size: clamp(.9rem, 3.2vw, .97rem);
    max-width: 620px; margin: 0 auto 1.75rem;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
    position: relative; isolation: isolate;
    /* Clips its own decoration. Previously the glow below was allowed to spill
       past the viewport and the page was patched by clipping <body>, which
       broke the sticky header as a side effect. */
    overflow: hidden;
    padding: 2.75rem 0 3rem; text-align: center;
    background: linear-gradient(180deg, var(--brand-tint) 0%, #fff 62%);
}
/* A soft glow behind the headline. Decorative, so it is a pseudo-element with
   no markup of its own, and it never intercepts a tap. */
.hero::before {
    content: ''; position: absolute; z-index: -1; pointer-events: none;
    top: -35%; left: 50%; transform: translateX(-50%);
    width: min(760px, 100%); aspect-ratio: 1;
    background: radial-gradient(circle, rgba(37, 99, 235, .10) 0%, rgba(37, 99, 235, 0) 62%);
}
.hero h1 {
    /* 7.2vw rather than 8vw: at 8vw a 320px screen rendered "instantly" wide
       enough to touch both gutters. Long words are allowed to break rather
       than push the page sideways. */
    font-size: clamp(1.75rem, 7.2vw, 3.4rem); font-weight: 800;
    letter-spacing: -.03em; line-height: 1.14; margin-bottom: 1rem;
    overflow-wrap: break-word;
}
.hero h1 em { font-style: italic; color: var(--brand); }
.hero-sub {
    font-size: clamp(.95rem, 3.4vw, 1.12rem); color: var(--body);
    max-width: 620px; margin: 0 auto 1.6rem;
}
/* Full-width stacked buttons on a phone. Two side-by-side buttons on a 360px
   screen leave each about 160px wide, which wraps the label onto two lines and
   still misses the 44px minimum tap height. */
.hero-cta { display: flex; flex-direction: column; gap: .65rem; align-items: stretch; }
.hero-cta .btn { text-align: center; min-height: 48px; }

.hero-note {
    margin-top: 1.4rem; font-size: .88rem; color: var(--muted);
    max-width: 560px; margin-left: auto; margin-right: auto;
}

.networks {
    display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem;
}
.chip {
    padding: .45rem 1rem; border-radius: 999px; background: #fff;
    border: 1px solid var(--line); color: var(--body);
    font-size: .82rem; font-weight: 600; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

/* Keyboard focus must stay visible everywhere. :focus-visible rather than
   :focus so a mouse click does not leave a ring behind. */
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }

.card {
    position: relative;
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: clamp(1.15rem, 4.5vw, 1.5rem); background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    overflow-wrap: break-word;
}
/* Hover only where a pointer exists. On a touch screen :hover sticks after a
   tap, leaving a card raised until something else is touched. */
@media (hover: hover) {
    .card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
        border-color: #cbd5e1;
    }
}
.card-tight { padding: 1.15rem; }
.card h3 {
    font-size: 1.02rem; font-weight: 700; margin-bottom: .45rem;
    letter-spacing: -.01em;
}
.card p { color: var(--body); font-size: .91rem; }

.steps .step { padding-top: 1.6rem; }
.step-no {
    position: absolute; top: 1.2rem; right: 1.3rem;
    font-size: 2.1rem; font-weight: 800; line-height: 1;
    color: transparent;
    background: linear-gradient(160deg, #dbeafe 0%, #eff6ff 100%);
    -webkit-background-clip: text; background-clip: text;
}

/* ── Split (reseller) ────────────────────────────────────────────────────── */
.split { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
.split h2 {
    font-size: clamp(1.35rem, 5.6vw, 2rem); font-weight: 800;
    letter-spacing: -.02em; margin-bottom: .75rem; overflow-wrap: break-word;
}
.lead { color: var(--body); margin-bottom: 1.25rem; }

.ticks { list-style: none; margin-bottom: 1.5rem; }
.ticks li {
    position: relative; padding-left: 1.6rem; margin-bottom: .55rem;
    color: var(--body); font-size: .92rem;
}
.ticks li::before {
    content: '\2713'; position: absolute; left: 0; top: 0;
    color: var(--ok); font-weight: 700;
}

.panel {
    background: #fff; border: 1px solid var(--line);
    border-radius: 16px; padding: clamp(1.15rem, 4.5vw, 1.5rem);
    box-shadow: var(--shadow); overflow-wrap: break-word;
}
.panel h3 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; }
.panel-list > div { padding: .8rem 0; border-bottom: 1px solid var(--surface-alt); }
.panel-list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.panel-list dt { font-size: .92rem; font-weight: 600; margin-bottom: .15rem; }
.panel-list dd { font-size: .87rem; color: var(--body); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 760px; }
.faq-item {
    border: 1px solid var(--line); border-radius: 12px;
    margin-bottom: .6rem; background: #fff; overflow: hidden;
    transition: border-color .18s ease;
}
.faq-item[open] { border-color: #bfdbfe; background: #fbfdff; }
.faq-item summary {
    cursor: pointer; list-style: none; padding: 1.05rem 3rem 1.05rem 1.1rem;
    font-size: .95rem; font-weight: 600; position: relative;
    -webkit-tap-highlight-color: transparent;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '+'; position: absolute; right: 1.1rem; top: 50%;
    transform: translateY(-50%); font-size: 1.35rem; font-weight: 400;
    color: var(--brand); line-height: 1;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p {
    color: var(--body); font-size: .91rem;
    padding: 0 1.1rem 1.1rem; margin-top: -.25rem;
}

/* ── Final CTA ───────────────────────────────────────────────────────────── */
.cta-section {
    background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
    color: #fff; text-align: center;
}
.cta-section h2 {
    font-size: clamp(1.35rem, 5.6vw, 2rem); font-weight: 800;
    letter-spacing: -.02em; margin-bottom: .5rem; overflow-wrap: break-word;
}
.cta-section p {
    color: rgba(255, 255, 255, .88); margin-bottom: 1.5rem;
    font-size: clamp(.9rem, 3.2vw, 1rem);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--line); padding: 2.5rem 0 1.5rem; background: var(--surface-alt); }
.footer-grid { display: grid; gap: 1.75rem; grid-template-columns: 1fr; }
.footer-grid h4 {
    font-size: .8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--ink); margin-bottom: .7rem;
}
/* .5rem vertical padding gives each footer link a ~40px tap target. At .25rem
   they sat close enough together to hit the wrong one with a thumb. */
.footer-grid a {
    display: block; color: var(--body); text-decoration: none;
    font-size: .88rem; padding: .5rem 0; word-break: break-word;
}
.footer-grid a:hover { color: var(--brand); }
.footer-note { color: var(--muted); font-size: .86rem; max-width: 300px; }

.footer-base {
    margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
    text-align: center; color: var(--muted); font-size: .83rem;
}

/* ── Very small phones (320-360px) ───────────────────────────────────────── */
/* Still in use across Ghana. Everything above already scales with clamp(); this
   only relieves the places where fixed spacing still bites at the low end. */
@media (max-width: 360px) {
    .btn { padding: .6rem .9rem; font-size: .87rem; }
    .btn-lg { padding: .8rem 1rem; font-size: .95rem; }
    .chip { padding: .4rem .8rem; font-size: .78rem; }
    .nav-toggle { width: 42px; height: 42px; }
    .faq-item summary { padding-right: 2.6rem; font-size: .9rem; }
    .ticks li { font-size: .88rem; }
}

/* ── Large phones held sideways ──────────────────────────────────────────── */
/* A short landscape viewport should not spend half its height on hero padding
   before the first line of text appears. */
@media (max-height: 480px) and (orientation: landscape) {
    .hero { padding: 1.75rem 0 2rem; }
    section { padding: 2rem 0; }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    section { padding: 3.75rem 0; }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .hero-cta { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: .7rem; }
    .hero-cta .btn { min-height: 0; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Desktop ─────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
    section { padding: 4.5rem 0; }
    .hero { padding: 4rem 0 4.5rem; }

    /* The dropdown becomes an ordinary row in the bar. Every mobile-only
       property is reset explicitly — a leftover max-height or visibility would
       hide the desktop nav with no toggle left to reveal it. */
    .nav-panel {
        position: static; flex-direction: row; align-items: center; gap: 1.75rem;
        margin-left: auto; padding: 0;
        max-height: none; overflow: visible; visibility: visible; opacity: 1;
        background: none; border: 0; box-shadow: none; transition: none;
    }
    .nav-links { flex-direction: row; gap: 1.5rem; align-items: center; }
    .nav-links a { padding: .35rem 0; border-bottom: 0; font-size: .9rem; color: var(--body); }
    .nav-links a:hover { color: var(--brand); }
    .nav-actions { flex-direction: row; gap: .5rem; padding-top: 0; }
    .nav-actions .btn { padding: .62rem 1.15rem; }
    .nav-toggle { display: none; }

    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .split { grid-template-columns: 1fr 1fr; gap: 3rem; }
    .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
}