:root{--bg:#0b0c10;--text:#e5e7eb;--muted:#9ca3af;--primary:#7c3aed;--primary2:#06b6d4;--card:#111317;--border:#1f2430;--radius:18px;--shadow:0 10px 30px rgba(0,0,0,.35);--maxw:1160px}@media (prefers-color-scheme:light){:root{--bg:#fff;--text:#0b1020;--muted:#4b5563;--card:#fff;--border:#e5e7eb;--shadow:0 10px 30px rgba(0,0,0,.08)}}html{scroll-behavior:smooth}body{background:radial-gradient(1200px 700px at 80% -10%,rgba(124,58,237,.25),transparent 60%),radial-gradient(1000px 600px at 10% 120%,rgba(6,182,212,.25),transparent 60%),var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.container{max-width:var(--maxw);margin:0 auto;padding:28px 20px}@media (max-width:680px){.container{padding-left:24px;padding-right:24px}}.header{position:sticky;top:0;z-index:30;backdrop-filter:saturate(180%) blur(8px);background:color-mix(in oklab,var(--bg) 80%,transparent);border-bottom:1px solid var(--border)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:12px;font-weight:700}.brand-badge{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:var(--shadow)}.nav{display:flex;gap:18px;align-items:center}.nav a{color:var(--muted);font-weight:600}.nav a:hover,.nav a:focus{color:var(--text);text-decoration:underline;text-underline-offset:4px}.lang-inline{display:flex;gap:10px;align-items:center;border-left:1px solid var(--border);padding-left:12px;color:var(--muted)}.lang-inline .active{color:var(--text);font-weight:700}.fab{position:fixed;right:18px;bottom:18px;width:64px;height:64px;border-radius:999px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:var(--shadow);z-index:50;border:0;color:#fff;cursor:pointer}.drawer{position:fixed;inset:0;display:none;z-index:40}.drawer.open{display:block}.drawer .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}.panel{position:absolute;right:0;top:0;height:100%;width:min(92vw,380px);background:var(--card);border-left:1px solid var(--border);box-shadow:var(--shadow);padding:20px;display:flex;flex-direction:column;gap:16px}.panel h3{margin:0 0 8px 0}.panel .menu a{display:block;padding:12px 10px;border-radius:12px;border:1px solid var(--border);margin-bottom:10px;color:var(--text)}.panel .lang{display:flex;gap:8px;flex-wrap:wrap}.panel .lang a{padding:8px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted)}.panel .lang .active{color:var(--text);border-color:rgba(124,58,237,.5)}.hero{padding:60px 0 30px}.kicker{text-transform:uppercase;letter-spacing:.24em;font-size:12px;font-weight:700;color:var(--muted)}h1.hero-title{font-size:clamp(36px,5.5vw,64px);line-height:1.1;margin:14px 0 12px;letter-spacing:-.01em;max-width:22ch;overflow-wrap:anywhere;hyphens:auto}.hero-sub{max-width:70ch;color:var(--muted);font-size:clamp(16px,2.2vw,18px);overflow-wrap:anywhere;hyphens:auto}.section{padding:36px 0}.section h2{font-size:clamp(22px,2.6vw,32px);margin:0 0 16px}.grid{display:grid;gap:20px;grid-template-columns:repeat(12,1fr)}.card{grid-column:span 4;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:clip;box-shadow:var(--shadow);transition:transform .3s ease,box-shadow .3s ease}.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.35)}@media (max-width:1024px){.card{grid-column:span 6}}@media (max-width:640px){.card{grid-column:span 12}}.card-media{aspect-ratio:4/3;background:linear-gradient(135deg,color-mix(in oklab,var(--primary) 70%,var(--bg) 30%),color-mix(in oklab,var(--primary2) 70%,var(--bg) 30%));display:grid;place-items:center}.card-body{padding:16px}.card-title{font-weight:700;font-size:18px;margin:0 0 4px}.card-meta{color:var(--muted);font-size:14px}.prose p{margin:12px 0;overflow-wrap:anywhere;hyphens:auto}.post-list{display:grid;gap:16px}.post-card{display:block;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--card)}.post-card h3{margin:0 0 6px 0;font-size:18px}.footer{margin-top:40px;border-top:1px solid var(--border);background:color-mix(in oklab,var(--bg) 85%,transparent)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted)}@media (max-width:820px){.nav{display:none}.lang-inline{display:none}.header-inner{gap:12px}h1.hero-title{font-size:clamp(28px,6vw,44px)}.container{padding-left:24px;padding-right:24px}}html,body{overflow-x:hidden}
/* --- Fix: bind dot to brand and autoscale FAB on tiny screens --- */
.footer .dot-sep{white-space:nowrap}

@media (max-width: 480px){
  .fab{transform:scale(0.82); right:10px; bottom:10px}
  .panel{width:min(92vw, 420px)}
}

@media (orientation: landscape) and (max-height: 480px){
  .fab{transform:scale(0.7); right:6px; bottom:6px}
  .panel{width:min(92vw, 420px); max-height:100vh}
}


/* --- Autoscale drawer/panel for mobile + keep content visible --- */
:root{ --fab-size:64px }

.fab{ width: var(--fab-size); height: var(--fab-size) }

.drawer.open{ display:block; z-index: 80 } /* ensure panel overlays the FAB */

.panel{
  max-height: 100svh;
  height: 100svh;
  overflow: auto;
  overscroll-behavior: contain;
  padding-bottom: calc(24px + env(safe-area-inset-bottom) + var(--fab-size));
}

/* Landscape small heights: tighten padding */
@media (orientation: landscape) and (max-height: 480px){
  .panel{
    padding-bottom: calc(12px + env(safe-area-inset-bottom) + var(--fab-size));
  }
}

/* Extra small phones */
@media (max-width: 380px){
  .fab{ transform: scale(0.74); right: 6px; bottom: 6px }
  .panel{ width: min(94vw, 420px) }
}

/* Reduce vertical spacing inside panel on tight screens */
@media (max-height: 560px){
  .panel{ gap:12px }
  .panel .menu a{ padding:10px 10px }
}


/* Certificates page */
.cert-card .card-media{
  padding:0;
}
.cert-card .card-media button{
  display:block;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}
.cert-card img{
  width:100%;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.cert-lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
}
.cert-lightbox.is-open{
  display:flex;
}
.cert-lightbox-inner{
  position:relative;
  max-width:90vw;
  max-height:90vh;
}
.cert-lightbox-image{
  max-width:100%;
  max-height:90vh;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.cert-lightbox-close{
  position:absolute;
  top:-40px;
  right:0;
  font-size:2rem;
  line-height:1;
  background:none;
  border:0;
  color:#fff;
  cursor:pointer;
}