/* ============================================================
   CivicConnect Ghana — design system
   Brand palette: navy authority + Ghana flag (red, gold, green)
   Display: Sora  ·  Body: Inter  ·  Mono labels: JetBrains Mono
   ============================================================ */
:root{
  --navy:#0a1f44; --navy-deep:#06163a; --navy-soft:#e6ebf5;
  --green:#006b3f; --green-deep:#004d2d; --green-soft:#e1f0e8;
  --gold:#fcd116; --gold-deep:#d4ae08; --gold-soft:#fff4c7;
  --red:#ce1126; --red-deep:#9a0c1c; --red-soft:#fde2e4;

  --ink:#0f172a; --ink-soft:#475569; --ink-faint:#94a3b8;
  --paper:#f8fafc; --paper-2:#ffffff; --card:#ffffff;
  --line:#e2e8f0; --line-strong:#cbd5e1;

  --maxw:1180px; --r:18px;
  --shadow:0 1px 2px rgba(10,31,68,.06), 0 20px 50px rgba(10,31,68,.08);
  --shadow-sm:0 1px 2px rgba(10,31,68,.06), 0 8px 22px rgba(10,31,68,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;}
img{max-width:100%; display:block}
a{color:var(--navy); text-decoration:none}
a:hover{text-decoration:underline}

h1,h2,h3,h4{font-family:'Sora',system-ui,sans-serif; font-weight:700; line-height:1.08;
  letter-spacing:-.018em; margin:0 0 .45em}
h1{font-size:clamp(2.4rem,5.6vw,4rem); font-weight:800}
h2{font-size:clamp(1.8rem,3.8vw,2.7rem)}
h3{font-size:1.3rem; letter-spacing:-.008em}
p{margin:0 0 1em}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.section{padding:88px 0}
.section.tight{padding:56px 0}

/* mono eyebrow */
.eyebrow{font-family:'JetBrains Mono',monospace; font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--navy);
  display:inline-flex; align-items:center; gap:.65em; margin-bottom:1.1rem}
.eyebrow::before{content:""; width:28px; height:2px; background:var(--gold)}
.eyebrow.red{color:var(--red)} .eyebrow.red::before{background:var(--red)}
.eyebrow.green{color:var(--green)} .eyebrow.green::before{background:var(--green)}
.eyebrow.gold{color:var(--gold-deep)} .eyebrow.gold::before{background:var(--gold)}

.muted{color:var(--ink-soft)}
.lead{font-size:1.18rem; color:var(--ink-soft); max-width:62ch}

/* Ghana flag bar — signature accent */
.flag-bar{height:5px; display:flex; border-radius:99px; overflow:hidden}
.flag-bar>span{flex:1}
.flag-bar>span:nth-child(1){background:var(--red)}
.flag-bar>span:nth-child(2){background:var(--gold)}
.flag-bar>span:nth-child(3){background:var(--green)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.55em; font-family:inherit; font-weight:600;
  font-size:.97rem; border:none; border-radius:999px; padding:.85em 1.55em; cursor:pointer;
  background:var(--navy); color:#fff; transition:transform .08s, background .18s, box-shadow .2s;
  text-decoration:none; box-shadow:0 4px 14px rgba(10,31,68,.18)}
.btn:hover{background:var(--navy-deep); text-decoration:none; box-shadow:0 6px 20px rgba(10,31,68,.28); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.gold{background:var(--gold); color:var(--navy-deep); box-shadow:0 4px 14px rgba(252,209,22,.4)}
.btn.gold:hover{background:var(--gold-deep)}
.btn.red{background:var(--red)} .btn.red:hover{background:var(--red-deep)}
.btn.green{background:var(--green)} .btn.green:hover{background:var(--green-deep)}
.btn.ghost{background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.btn.ghost:hover{background:#fff; box-shadow:inset 0 0 0 1.5px var(--navy)}
.btn.sm{padding:.55em 1.1em; font-size:.87rem}
.btn.lg{padding:1em 1.9em; font-size:1.02rem}

/* nav */
.nav{position:sticky; top:0; z-index:50; background:rgba(248,250,252,.88);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:68px}
.logo{font-family:'Sora',sans-serif; font-weight:800; font-size:1.05rem; color:var(--ink); display:flex; align-items:center; gap:.55em; letter-spacing:-.01em}
.logo .mark{display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:var(--navy); color:#fcd116; font-family:'Sora',sans-serif; font-weight:900; font-size:1.05rem;
  flex:0 0 auto;
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow:inset 0 -3px 0 var(--red), inset 0 3px 0 var(--green)}
.logo .gh{color:var(--green)}
.nav nav{display:flex; gap:4px; align-items:center}
.nav nav a{font-size:.92rem; font-weight:500; color:var(--ink-soft); padding:.45em .75em; border-radius:8px}
.nav nav a:hover{color:var(--navy); background:var(--navy-soft); text-decoration:none}
.nav .btn{margin-left:8px}
@media(max-width:820px){ .nav nav a:not(.btn){display:none} .nav .btn{display:none} }

/* hero */
.hero{position:relative; padding:60px 0 30px; overflow:hidden}
.hero::before{content:""; position:absolute; top:-200px; left:-200px; width:600px; height:600px;
  background:radial-gradient(circle, rgba(252,209,22,.13), transparent 70%); border-radius:50%; z-index:0}
.hero::after{content:""; position:absolute; top:-200px; right:-200px; width:600px; height:600px;
  background:radial-gradient(circle, rgba(206,17,38,.08), transparent 70%); border-radius:50%; z-index:0}
.hero .wrap{position:relative; z-index:1}
.hero-grid{display:grid; gap:42px; align-items:center}
@media(min-width:880px){ .hero-grid{grid-template-columns:1fr 1fr} }
.hero h1 .accent{background:linear-gradient(120deg, var(--red), var(--gold-deep) 50%, var(--green)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:28px}
.hero .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:36px; padding-top:24px; border-top:1px solid var(--line)}
.hero .stats .n{font-family:'Sora',sans-serif; font-size:1.7rem; font-weight:800; color:var(--navy); line-height:1}
.hero .stats .l{font-size:.78rem; color:var(--ink-soft); margin-top:4px}
.brand-art{position:relative}
.brand-art img{filter:drop-shadow(0 30px 60px rgba(10,31,68,.18))}

/* mini-stat / pill row */
.platform-pills{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.pill{display:inline-flex; align-items:center; gap:.4em; font-family:'JetBrains Mono',monospace; font-size:.72rem;
  padding:.45em .85em; border-radius:999px; background:var(--navy-soft); color:var(--navy);
  font-weight:600; letter-spacing:.04em}
.pill.live{background:var(--green-soft); color:var(--green-deep)}
.pill.live::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)} 50%{opacity:.5; transform:scale(1.15)}}

/* problem section */
.problem{background:var(--navy); color:#cfd6e8; position:relative}
.problem h2{color:#fff}
.problem .eyebrow{color:var(--gold)} .problem .eyebrow::before{background:var(--gold)}
.problem-grid{display:grid; gap:22px; margin-top:30px}
@media(min-width:780px){ .problem-grid{grid-template-columns:repeat(3,1fr)} }
.problem-card{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:24px}
.problem-card .ix{font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--gold); letter-spacing:.1em; margin-bottom:8px}
.problem-card h3{color:#fff; margin-bottom:.4em; font-size:1.1rem}
.problem-card p{font-size:.92rem; margin:0; color:#a8b4d1}

/* ecosystem cards */
.eco-grid{display:grid; gap:24px}
@media(min-width:860px){ .eco-grid{grid-template-columns:1fr 1fr} }
.eco{background:var(--card); border:1px solid var(--line); border-radius:24px; padding:0; overflow:hidden;
  box-shadow:var(--shadow-sm); display:flex; flex-direction:column; transition:transform .2s, box-shadow .2s}
.eco:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.eco .head{padding:28px 28px 0}
.eco .badge{display:inline-flex; align-items:center; gap:.5em; font-family:'JetBrains Mono',monospace;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:.4em .8em; border-radius:6px; margin-bottom:14px}
.eco.cc .badge{background:var(--navy); color:#fff}
.eco.ct .badge{background:var(--gold); color:var(--navy-deep)}
.eco h3{font-size:1.55rem; margin-bottom:.3em}
.eco .tagline{color:var(--ink-soft); margin-bottom:18px}
.eco ul{margin:0 0 22px; padding:0; list-style:none}
.eco ul li{padding:6px 0 6px 26px; position:relative; font-size:.95rem}
.eco ul li::before{content:""; position:absolute; left:0; top:14px; width:14px; height:2px; background:var(--gold)}
.eco .ctas{display:flex; gap:10px; flex-wrap:wrap; padding:0 28px 28px}
.eco .preview{margin-top:auto; padding:0 28px; background:linear-gradient(180deg, transparent, var(--paper))}
.eco .preview img{border-radius:12px 12px 0 0; box-shadow:0 -10px 30px rgba(10,31,68,.08); margin-bottom:-1px}

/* portal cards (the 6) */
.portals-grid{display:grid; gap:18px}
@media(min-width:640px){ .portals-grid{grid-template-columns:repeat(2,1fr)} }
@media(min-width:980px){ .portals-grid{grid-template-columns:repeat(3,1fr)} }
.portal{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px;
  box-shadow:var(--shadow-sm); transition:transform .15s}
.portal:hover{transform:translateY(-3px)}
.portal .icn{display:grid; place-items:center; width:46px; height:46px; border-radius:12px;
  font-size:22px; margin-bottom:14px; color:#fff}
.portal.citizen .icn{background:var(--green)}
.portal.police .icn{background:var(--navy)}
.portal.court .icn{background:var(--gold-deep)}
.portal.mp .icn{background:var(--red)}
.portal.employee .icn{background:#7c3aed}
.portal.admin .icn{background:#0891b2}
.portal h3{font-size:1.12rem; margin-bottom:.25em}
.portal p{font-size:.9rem; color:var(--ink-soft); margin:0 0 10px}
.portal ul{margin:0; padding:0; list-style:none; font-size:.83rem; color:var(--ink-soft)}
.portal ul li{padding:3px 0 3px 14px; position:relative}
.portal ul li::before{content:"›"; position:absolute; left:0; color:var(--gold-deep); font-weight:700}

/* feature showcase rows (alternating with screenshots) */
.feature-row{display:grid; gap:42px; align-items:center; margin-bottom:60px}
@media(min-width:880px){ .feature-row{grid-template-columns:1fr 1.15fr} .feature-row.reverse > div:first-child{order:2} }
.feature-row .shot{border-radius:14px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line)}
.feature-row h3{font-size:1.7rem; margin-bottom:.4em}
.feature-row p{color:var(--ink-soft)}
.tag-row{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px}
.tag-row .tag{font-family:'JetBrains Mono',monospace; font-size:.72rem; padding:.3em .65em; border-radius:6px; background:var(--navy-soft); color:var(--navy); font-weight:600}

/* how it works flow */
.flow{display:grid; gap:18px; margin-top:30px}
@media(min-width:780px){ .flow{grid-template-columns:repeat(4,1fr); position:relative} }
.flow-step{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; box-shadow:var(--shadow-sm); position:relative}
.flow-step .num{font-family:'Sora',sans-serif; font-weight:800; font-size:1.7rem; color:var(--gold-deep); margin-bottom:10px}
.flow-step h4{font-family:'Sora',sans-serif; font-weight:700; margin:0 0 .3em; font-size:1.05rem}
.flow-step p{font-size:.88rem; color:var(--ink-soft); margin:0}
@media(min-width:780px){
  .flow-step::after{content:"→"; position:absolute; right:-16px; top:50%; transform:translateY(-50%); color:var(--gold); font-size:1.3rem; font-weight:700; z-index:2}
  .flow-step:last-child::after{display:none}
}

/* demo video */
.demo{background:linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); border-radius:24px; padding:42px; color:#fff; position:relative; overflow:hidden}
.demo::before{content:""; position:absolute; top:0; left:0; right:0; height:5px; background:linear-gradient(90deg, var(--red), var(--gold), var(--green))}
.demo h2{color:#fff; margin-bottom:.3em}
.demo p{color:#c5cee0; margin-bottom:22px; max-width:55ch}
.demo .video-wrap{position:relative; padding-top:56.25%; border-radius:14px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.1)}
.demo iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.demo .yt-fallback{display:grid; place-items:center; text-align:center; padding:40px; position:absolute; inset:0; background:#000}
.demo .yt-fallback a{color:var(--gold); font-weight:600}

/* about founder */
.founder{display:grid; gap:32px; align-items:start}
@media(min-width:780px){ .founder{grid-template-columns:.8fr 1.2fr} }
.founder .card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow-sm)}
.founder .creds{font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--ink-soft); line-height:1.9}
.founder .creds b{color:var(--navy)}
.research-badge{display:inline-flex; align-items:center; gap:.6em; font-family:'JetBrains Mono',monospace;
  font-size:.74rem; padding:.5em 1em; border-radius:999px; background:var(--gold-soft); color:var(--gold-deep);
  font-weight:600; margin-top:14px}

/* CTA section */
.cta-banner{background:linear-gradient(135deg, #fff 0%, var(--gold-soft) 100%); border-radius:24px;
  padding:48px 40px; text-align:center; border:1px solid var(--line)}
.cta-banner h2{margin-bottom:.3em}
.cta-banner p{color:var(--ink-soft); max-width:55ch; margin:0 auto 22px}
.cta-banner .row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

/* contact */
.contact-grid{display:grid; gap:18px}
@media(min-width:680px){ .contact-grid{grid-template-columns:1fr 1fr} }
.contact-card{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px; box-shadow:var(--shadow-sm)}
.contact-card .kind{font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:8px}
.contact-card h3{font-size:1.05rem; margin-bottom:.4em}
.contact-card a.mail{font-family:'JetBrains Mono',monospace; font-size:.95rem; color:var(--navy); font-weight:600; word-break:break-all}
.socials{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; justify-content:center}
.socials a{font-family:'JetBrains Mono',monospace; font-size:.82rem; padding:.55em 1.1em; border-radius:999px; border:1px solid var(--line-strong); color:var(--navy)}
.socials a:hover{background:var(--navy); color:#fff; border-color:var(--navy); text-decoration:none}

/* footer */
.footer{padding:30px 0 40px; text-align:center; color:var(--ink-faint); font-size:.82rem; font-family:'JetBrains Mono',monospace; border-top:1px solid var(--line); margin-top:40px}
.footer .flag-bar{max-width:200px; margin:0 auto 18px}

/* reveal */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .65s ease, transform .65s ease}
.reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} *{scroll-behavior:auto; animation:none!important} }
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px}