/* =========================================================
   Healthcare Performance Analytics — Project Showcase
   Matched to main site (zainab-abbass.github.io):
   Palette : Ink #0d0d0d · Gold #d4af37 · Soft gold #e3c65c · White #ffffff
   Type    : Arial (everything) · Georgia (serif "ZA" logo mark)
   ========================================================= */

:root{
    --ink:        #0d0d0d;
    --ink-soft:   #161616;
    --ink-card:   #1b1b1b;
    --gold:       #d4af37;
    --gold-soft:  #e3c65c;
    --gold-line:  rgba(212,175,55,.28);
    --gold-glow:  rgba(212,175,55,.08);
    --paper:      #f7f6f3;
    --white:      #ffffff;
    --text:       #111111;
    --text-soft:  #41434a;
    --text-mute:  #8a8d96;
    --maxw:       1180px;
    --narrow:     860px;
    --radius:     18px;
    --ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
    font-family:Arial, Helvetica, sans-serif;
    background:var(--white);
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- layout ---------- */
.container{ width:90%; max-width:var(--maxw); margin-inline:auto; }
.narrow{ width:90%; max-width:var(--narrow); margin-inline:auto; }
.section{ padding:clamp(64px,9vw,120px) 0; }
.section--paper{ background:var(--paper); }
.section--ink{ background:var(--ink); color:#fff; }

/* ---------- type ---------- */
h1,h2,h3{ font-family:Arial, Helvetica, sans-serif; letter-spacing:-.01em; }
h1{ font-size:clamp(40px,7vw,76px); line-height:1.05; font-weight:700; }
h2{ font-size:clamp(30px,4.2vw,48px); line-height:1.1; font-weight:700; }
h3{ font-size:21px; line-height:1.3; font-weight:700; }
p{ font-size:clamp(16px,1.2vw,18px); }

.eyebrow{
    font-family:Arial, Helvetica, sans-serif;
    font-weight:700;
    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--gold);
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:22px;
}
.eyebrow::before{
    content:""; width:26px; height:1px; background:var(--gold);
    display:inline-block;
}
.section-head{ max-width:680px; }
.section-head p{ color:var(--text-soft); margin-top:14px; }
.section--ink .section-head p{ color:rgba(255,255,255,.62); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
    position:sticky; top:0; z-index:60;
    background:#000;
}
.nav__inner{
    display:flex; align-items:center; justify-content:space-between;
    min-height:72px;
}
/* ZA monogram — same overlapping Georgia recipe as the main site, scaled to fit */
.logo{
    position:relative; display:inline-block; width:49px; height:44px;
    font-family:Georgia, "Times New Roman", serif; text-decoration:none;
}
.logo .z, .logo .a{
    position:absolute; font-size:44px; color:var(--gold);
    font-weight:400; line-height:1;
}
.logo .z{ left:3px; top:-3px; }
.logo .a{ left:17px; top:13px; }
.nav__links{ display:flex; gap:35px; }
.nav__links a{
    font-size:16px; font-weight:600; letter-spacing:.5px;
    color:#fff; position:relative;
    transition:color .25s var(--ease);
}
.nav__links a::after{
    content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0;
    background:var(--gold); transition:width .3s var(--ease);
}
.nav__links a:hover{ color:var(--gold); }
.nav__links a:hover::after{ width:100%; }
@media(max-width:760px){ .nav__links{ display:none; } }

/* =========================================================
   HERO
   ========================================================= */
.hero{
    background:
        radial-gradient(1100px 520px at 78% -10%, var(--gold-glow), transparent 60%),
        radial-gradient(800px 400px at 0% 110%, rgba(212,175,55,.05), transparent 55%),
        var(--ink);
    color:#fff;
    padding:clamp(88px,13vw,150px) 0 clamp(72px,10vw,120px);
    position:relative;
}
.hero::after{
    content:""; position:absolute; inset:0 0 auto 0; height:1px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent);
    opacity:.5;
}
.hero__inner{ max-width:920px; }
.tag{
    display:inline-block; background:var(--gold); color:#1a1300;
    padding:9px 20px; border-radius:999px;
    font-family:Arial, Helvetica, sans-serif; font-size:12px; letter-spacing:.06em;
    font-weight:700; margin-bottom:30px;
}
.hero h1 .accent{ color:var(--gold); }
.hero .subtitle{
    max-width:680px; font-size:clamp(18px,2vw,22px);
    margin-top:26px; color:rgba(255,255,255,.86); line-height:1.5;
}
.hero .note{
    max-width:640px; margin-top:18px; font-size:15px; color:var(--text-mute);
}
.hero__tags{
    display:flex; flex-wrap:wrap; gap:11px;
    margin-top:38px; padding-top:30px; max-width:860px;
    border-top:1px solid var(--gold-line);
}
.hero__tags span{
    padding:8px 16px; border:1px solid rgba(212,175,55,.55);
    border-radius:999px; color:var(--gold); font-size:13px; font-weight:500;
    background:var(--gold-glow);
    transition:background .25s var(--ease), transform .25s var(--ease);
}
.hero__tags span:hover{ background:rgba(212,175,55,.16); transform:translateY(-2px); }

/* =========================================================
   STAT STRIP
   ========================================================= */
.stats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:rgba(255,255,255,.08);
    border-top:1px solid rgba(255,255,255,.08);
}
.stat{ background:var(--ink); padding:34px 28px; text-align:center; }
.stat__num{
    font-family:Arial, Helvetica, sans-serif; font-size:clamp(30px,4vw,42px);
    font-weight:700; color:var(--gold); line-height:1;
}
.stat__label{
    font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--text-mute); margin-top:12px;
}
@media(max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }

/* =========================================================
   OVERVIEW
   ========================================================= */
.overview p{ color:var(--text-soft); margin-top:20px; max-width:760px; }
.overview p:first-of-type{ margin-top:34px; }

/* =========================================================
   DASHBOARD SHOWCASE
   ========================================================= */
.gallery{
    display:flex; flex-direction:column; gap:clamp(40px,5vw,64px);
    margin-top:54px;
}
.shot{
    background:var(--white);
    border:1px solid #ececec;
    border-top:3px solid var(--gold);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:0 14px 40px rgba(0,0,0,.06);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.shot:hover{ transform:translateY(-5px); box-shadow:0 22px 55px rgba(0,0,0,.11); }

.shot__frame{
    position:relative; background:var(--ink);
    cursor:zoom-in; overflow:hidden; line-height:0;
}
.shot__frame img{
    width:100%; height:auto; display:block;
}

/* placeholder shown only if a screenshot is missing */
.shot__ph{
    display:none; width:100%; aspect-ratio:16/9;
    flex-direction:column; align-items:center; justify-content:center;
    gap:16px; text-align:center; line-height:1.5;
    background:
        repeating-linear-gradient(45deg,#141414,#141414 14px,#171717 14px,#171717 28px);
    color:var(--text-mute); padding:24px;
}
.shot__frame.is-missing img{ display:none; }
.shot__frame.is-missing .shot__ph{ display:flex; }
.shot__frame.is-missing{ cursor:default; }
.shot__ph .bars{ display:flex; align-items:flex-end; gap:6px; height:46px; }
.shot__ph .bars i{
    width:11px; background:var(--gold); opacity:.85; border-radius:3px 3px 0 0;
    display:block;
}
.shot__ph .bars i:nth-child(1){ height:40%; }
.shot__ph .bars i:nth-child(2){ height:70%; }
.shot__ph .bars i:nth-child(3){ height:100%; }
.shot__ph .bars i:nth-child(4){ height:55%; opacity:.5; }
.shot__ph code{
    font-family:Arial, Helvetica, sans-serif; font-size:12px;
    color:var(--gold-soft); background:rgba(212,175,55,.08);
    padding:5px 10px; border-radius:6px;
}
.shot__zoom{
    position:absolute; top:14px; right:14px; z-index:2;
    font-family:Arial, Helvetica, sans-serif; font-size:11px; letter-spacing:.1em;
    color:#fff; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.2);
    padding:6px 12px; border-radius:999px; opacity:0;
    transition:opacity .25s var(--ease);
}
.shot__frame:hover .shot__zoom{ opacity:1; }
.shot__frame.is-missing .shot__zoom{ display:none; }

.shot__meta{
    display:flex; gap:18px; align-items:flex-start;
    padding:24px clamp(22px,3vw,32px);
}
.shot__num{
    font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:700;
    color:var(--gold); padding-top:3px; min-width:34px;
}
.shot__meta h3{ color:var(--gold); }
.shot__meta p{ color:var(--text-soft); font-size:15px; margin-top:6px; }

/* =========================================================
   CAPABILITIES
   ========================================================= */
.cards{
    display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:50px;
}
.card{
    background:var(--ink-card);
    border:1px solid var(--gold-line);
    border-radius:var(--radius);
    padding:30px 28px;
    transition:transform .3s var(--ease), border-color .3s var(--ease);
    position:relative; overflow:hidden;
}
.card::before{
    content:attr(data-n);
    position:absolute; top:18px; right:22px;
    font-family:Arial, Helvetica, sans-serif; font-size:12px; color:rgba(212,175,55,.4);
}
.card:hover{ transform:translateY(-6px); border-color:var(--gold); }
.card h3{ color:var(--gold); margin-bottom:13px; padding-right:30px; }
.card p{ color:#cfcfcf; font-size:15px; }

/* =========================================================
   CONTRIBUTION
   ========================================================= */
.contrib{
    display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:50px;
}
.contrib__item{
    background:var(--white);
    border:1px solid #ededed;
    border-top:3px solid var(--gold);
    border-radius:14px;
    padding:26px 22px;
    text-align:left;
    box-shadow:0 8px 22px rgba(0,0,0,.05);
    transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.contrib__item:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(0,0,0,.09); }
.contrib__item .n{
    font-family:Arial, Helvetica, sans-serif; font-weight:700; font-size:12px; color:var(--gold);
    display:block; margin-bottom:12px;
}
.contrib__item span.t{ font-weight:700; font-size:16px; line-height:1.4; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ background:var(--ink); color:#fff; padding:clamp(72px,10vw,110px) 0 48px; }
.footer__top{ text-align:center; max-width:640px; margin-inline:auto; }
.footer__top h2{ color:var(--gold); }
.footer__top p{ color:rgba(255,255,255,.7); margin-top:16px; }
.footer__links{
    display:flex; justify-content:center; flex-wrap:wrap; gap:14px; margin-top:34px;
}
.footer__links a{
    display:inline-flex; align-items:center; gap:8px;
    padding:13px 30px; border:none; border-radius:6px;
    font-size:14px; font-weight:700; color:#0d0d0d; background:var(--gold);
    transition:.25s var(--ease);
}
.footer__links a:hover{ background:var(--gold-soft); transform:translateY(-2px); }
.footer__base{
    margin-top:54px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08);
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
    font-size:13px; color:var(--text-mute);
    font-family:Arial, Helvetica, sans-serif; letter-spacing:.04em;
}

/* =========================================================
   LIGHTBOX
   ========================================================= */
.lightbox{
    position:fixed; inset:0; z-index:120;
    background:rgba(8,8,8,.92); backdrop-filter:blur(6px);
    display:none; align-items:center; justify-content:center; padding:30px;
}
.lightbox.open{ display:flex; }
.lightbox img{
    max-width:94vw; max-height:86vh; border-radius:10px;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.lightbox__cap{
    position:absolute; bottom:24px; left:0; right:0; text-align:center;
    color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:13px; letter-spacing:.08em;
}
.lightbox__close{
    position:absolute; top:22px; right:26px; width:44px; height:44px;
    border-radius:50%; border:1px solid rgba(255,255,255,.25);
    background:rgba(0,0,0,.4); color:#fff; font-size:22px; cursor:pointer;
    transition:.2s var(--ease);
}
.lightbox__close:hover{ background:var(--gold); color:#1a1300; border-color:var(--gold); }

/* =========================================================
   SCROLL REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- focus visibility ---------- */
a:focus-visible, button:focus-visible, .shot__frame:focus-visible{
    outline:2px solid var(--gold); outline-offset:3px; border-radius:6px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media(max-width:1024px){
    .cards{ grid-template-columns:repeat(2,1fr); }
    .contrib{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:640px){
    .cards{ grid-template-columns:1fr; }
    .contrib{ grid-template-columns:1fr; }
    .shot__meta{ flex-direction:column; gap:6px; }
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
    .reveal{ opacity:1; transform:none; }
}