@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --bg:#080a0f; --text:#f3f4f6; --muted:#8e98a8; --line:rgba(255,255,255,.09); --accent:#72e6c4; --max:1160px; }
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-height:100vh; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; line-height:1.6; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:80px 80px; mask-image:linear-gradient(to bottom,black,transparent 75%); }
a { color:inherit; }
.navbar { position:fixed; top:18px; left:50%; transform:translateX(-50%); width:min(calc(100% - 36px),1180px); z-index:1000; display:flex; align-items:center; gap:26px; padding:11px 14px 11px 18px; background:rgba(12,15,21,.84); backdrop-filter:blur(20px); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 60px rgba(0,0,0,.25); }
.logo { font-family:'Space Grotesk'; text-decoration:none; font-size:22px; font-weight:700; letter-spacing:-.05em; margin-right:auto; }
.logo span { color:var(--accent); }
.menu { list-style:none; display:flex; gap:4px; }
.menu a { text-decoration:none; color:#b9c0cb; font-size:13px; font-weight:600; padding:8px 11px; border-radius:10px; transition:.25s; }
.menu a:hover,.menu a.active { color:var(--text); background:rgba(255,255,255,.07); }
.menu a.active { box-shadow:inset 0 -2px 0 var(--accent); }
.nav-cta { text-decoration:none; font-size:13px; font-weight:700; padding:9px 14px; border-radius:11px; background:var(--text); color:#0a0c10; white-space:nowrap; }
.nav-cta:hover { background:var(--accent); }
.menu-toggle { display:none; background:none; border:0; cursor:pointer; padding:8px; }
.menu-toggle span { display:block; width:23px; height:2px; background:var(--text); margin:5px 0; }
.certificates { width:min(calc(100% - 40px),var(--max)); margin:0 auto; padding:155px 0 90px; }
.page-heading { max-width:760px; margin-bottom:55px; }
.page-heading > span { color:var(--accent); text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:800; }
.page-heading h1 { font-family:'Space Grotesk'; font-size:clamp(43px,6vw,72px); letter-spacing:-.05em; line-height:1.05; margin-top:14px; }
.page-heading em { color:var(--accent); font-style:normal; }
.page-heading p { color:var(--muted); font-size:14px; max-width:610px; margin-top:18px; }
.certificate-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.certificate-card { padding:12px 12px 20px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.015)); transition:.3s; overflow:hidden; }
.certificate-card:hover { transform:translateY(-6px); border-color:rgba(114,230,196,.3); box-shadow:0 25px 65px rgba(0,0,0,.25); }
.certificate-card > a:first-child { display:block; overflow:hidden; border-radius:13px; background:#e9e9e9; }
.certificate-card img { display:block; width:100%; height:205px; object-fit:cover; transition:.35s; }
.certificate-card:hover img { transform:scale(1.025); }
.certificate-meta { display:flex; justify-content:space-between; margin:17px 4px 8px; }
.certificate-meta span { color:#596372; font-size:10px; font-weight:800; }
.certificate-meta small { color:var(--accent); font-size:9px; text-transform:uppercase; letter-spacing:.1em; font-weight:800; }
.certificate-card h2 { font-family:'Space Grotesk'; font-size:19px; letter-spacing:-.03em; margin:0 4px; }
.certificate-card p { color:#778191; font-size:11px; margin:6px 4px 0; }
.view-link { display:inline-block; color:#9da6b4; text-decoration:none; font-size:10px; font-weight:800; margin:15px 4px 0; }
.view-link:hover { color:var(--accent); }
footer { border-top:1px solid var(--line); }
footer > div { width:min(calc(100% - 40px),var(--max)); min-height:75px; margin:auto; display:flex; justify-content:space-between; align-items:center; color:#596372; font-size:10px; }
footer a { color:#8d96a4; text-decoration:none; }
footer a:hover { color:var(--accent); }
@media (max-width:900px) { .navbar { width:calc(100% - 24px); top:12px; } .menu-toggle { display:block; order:3; } .menu { position:absolute; top:calc(100% + 9px); left:0; right:0; display:none; flex-direction:column; padding:9px; border:1px solid var(--line); border-radius:15px; background:rgba(12,15,21,.97); } .menu.open { display:flex; } .menu a { display:block; padding:11px 13px; } .nav-cta { display:none; } .certificate-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px) { .certificates { width:calc(100% - 28px); padding-top:125px; } .certificate-grid { grid-template-columns:1fr; } .certificate-card img { height:auto; max-height:300px; } .page-heading { margin-bottom:38px; } footer > div { width:calc(100% - 28px); min-height:95px; flex-direction:column; justify-content:center; gap:8px; } }