:root { --ink:#17211d; --muted:#66706b; --forest:#173d2f; --forest-deep:#102d23; --gold:#a8752d; --gold-soft:#dfbd7a; --cream:#f8f3e8; --paper:#fdfbf6; --line:rgba(23,61,47,.14); --shadow:0 18px 60px rgba(16,45,35,.09); --display:"Rubik","Heebo",Arial,sans-serif; --body:"Heebo",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:6rem; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
.page-shell { width:min(74rem,calc(100% - 2rem)); margin-inline:auto; }
.skip-link { position:fixed; z-index:100; top:.75rem; right:.75rem; padding:.7rem 1rem; border-radius:.5rem; color:white; background:var(--forest); transform:translateY(-180%); }
.skip-link:focus { transform:none; }
:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.certificate-header { position:sticky; z-index:20; top:0; border-bottom:1px solid var(--line); background:rgba(253,251,246,.94); backdrop-filter:blur(14px); }
.certificate-header__inner { min-height:5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.7rem; color:var(--forest); text-decoration:none; }
.brand img { width:3.1rem; height:3.1rem; border:1px solid rgba(168,117,45,.24); border-radius:50%; object-fit:cover; box-shadow:0 4px 15px rgba(16,45,35,.09); }
.brand span { display:grid; line-height:1; }
.brand strong { color:var(--gold); font:700 1.65rem var(--display); }
.brand small { color:var(--forest); font-size:.68rem; font-weight:700; letter-spacing:.12em; }
.certificate-navigation { display:flex; align-items:center; gap:1.15rem; }
.certificate-navigation a { color:var(--forest); font-weight:700; text-decoration:none; }
.certificate-navigation a:hover { color:var(--gold); }
.certificate-hero { overflow:hidden; border-bottom:1px solid rgba(168,117,45,.28); background:radial-gradient(circle at 15% 10%,rgba(223,189,122,.25),transparent 34%),linear-gradient(145deg,#fdfbf6,#f3ead8); }
.certificate-hero__grid { min-height:30rem; display:grid; grid-template-columns:1fr auto; align-items:center; gap:4rem; padding-block:clamp(3.5rem,8vw,6.5rem); }
.eyebrow { margin:0 0 .6rem; color:var(--gold); font-weight:700; letter-spacing:.16em; }
h1,h2,h3 { font-family:var(--display); }
h1 { max-width:45rem; margin:0; color:var(--forest-deep); font-size:clamp(3rem,7vw,6rem); line-height:1; letter-spacing:-.05em; }
h1 span { color:var(--gold); }
.certificate-hero p:not(.eyebrow) { max-width:40rem; margin:1.4rem 0 0; color:#4d5b55; font-size:1.1rem; }
.certificate-hero__seal { width:12rem; aspect-ratio:1; display:grid; place-content:center; border:1px solid var(--gold); border-radius:50%; color:white; background:var(--forest); text-align:center; box-shadow:0 0 0 1rem rgba(168,117,45,.1),var(--shadow); transform:rotate(-4deg); }
.certificate-hero__seal span { color:var(--gold-soft); font-size:2rem; }
.certificate-hero__seal strong { font:600 1.25rem/1.2 var(--display); }
.certificate-center { padding-block:clamp(4rem,9vw,8rem); }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:1.3rem; }
.section-heading h2 { margin:0; color:var(--forest); font-size:clamp(2rem,5vw,4rem); line-height:1; }
.section-heading > p { color:var(--muted); }
.certificate-filters { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.filter-button { min-height:2.7rem; padding:.55rem 1rem; border:1px solid var(--line); border-radius:999px; color:var(--forest); background:white; font:600 .85rem var(--body); cursor:pointer; }
.filter-button[aria-pressed="true"] { color:white; background:var(--forest); box-shadow:0 5px 15px rgba(16,45,35,.14); }
.certificate-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.certificate-card { min-width:0; display:grid; grid-template-columns:minmax(10rem,.72fr) 1fr; overflow:hidden; border:1px solid var(--line); border-radius:1.25rem; background:white; box-shadow:0 8px 30px rgba(16,45,35,.05); }
.certificate-card:target { border-color:var(--gold); box-shadow:0 0 0 4px rgba(168,117,45,.12),var(--shadow); }
.certificate-card__preview { min-height:20rem; display:grid; place-items:center; overflow:hidden; border-left:1px solid var(--line); background:linear-gradient(145deg,var(--cream),#eee2cc); }
.certificate-card__preview img { width:100%; height:100%; max-height:28rem; object-fit:contain; }
.pdf-mark { width:8rem; height:10rem; display:grid; place-content:center; border:1px solid rgba(168,117,45,.4); border-radius:.75rem; color:var(--forest); background:white; text-align:center; box-shadow:0 14px 30px rgba(16,45,35,.1); }
.pdf-mark strong { color:var(--gold); font:700 1.8rem var(--display); }
.pdf-mark small { color:var(--muted); }
.certificate-card__body { display:flex; flex-direction:column; padding:1.35rem; }
.certificate-card__tags { display:flex; flex-wrap:wrap; gap:.35rem; }
.certificate-card__tags span { padding:.24rem .55rem; border-radius:999px; color:#80561f; background:#f6ead4; font-size:.68rem; font-weight:700; }
.certificate-card h3 { margin:.75rem 0 .25rem; color:var(--forest); font-size:1.45rem; line-height:1.2; }
.issuer { color:var(--gold); font-size:.82rem; }
.certificate-card p { margin:.65rem 0 1rem; color:var(--muted); font-size:.88rem; }
.view-button { min-height:3rem; display:inline-flex; align-items:center; justify-content:center; margin-top:auto; padding:.6rem 1rem; border-radius:.7rem; color:white; background:var(--forest); font-weight:700; text-decoration:none; }
.view-button:hover { background:#20513f; }
.loading-card { grid-column:1/-1; min-height:15rem; display:grid; place-items:center; border:1px dashed var(--line); border-radius:1rem; color:var(--muted); }
.certificate-note { margin-top:1.5rem; padding:1.2rem 1.4rem; border-right:4px solid var(--gold); border-radius:.8rem; background:var(--cream); }
.certificate-note strong { color:var(--forest); }
.certificate-note p { margin:.25rem 0 0; color:var(--muted); }
footer { border-top:1px solid var(--line); background:var(--forest-deep); color:white; }
footer .page-shell { min-height:5.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
footer nav { display:flex; gap:1rem; }
@media (max-width:900px) { .certificate-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .certificate-header__inner { min-height:auto; align-items:flex-start; flex-direction:column; padding-block:.75rem; } .certificate-navigation { width:100%; justify-content:space-between; gap:.6rem; padding-top:.6rem; border-top:1px solid var(--line); font-size:.83rem; } .certificate-hero__grid { min-height:auto; grid-template-columns:1fr; gap:2rem; } .certificate-hero__seal { width:8rem; justify-self:start; } .section-heading { display:block; } .certificate-card { grid-template-columns:1fr; } .certificate-card__preview { min-height:17rem; max-height:24rem; border-left:0; border-bottom:1px solid var(--line); } footer .page-shell { align-items:flex-start; flex-direction:column; padding-block:1.2rem; } footer nav { flex-wrap:wrap; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }