/* Self-hosted Garet (TTF) for headings; Inter via Google Fonts for body */
@font-face {
  font-family: 'Garet';
  src: url('assets/fonts/garet.book.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg: rgb(40,40,59);
  --text:#e5e7eb;
  --muted:#cbd5e1;
  --brand:#93c5fd;
  --card:#111827;
  --border:#374151;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"}

h1,h2,h3{
  font-family:'Garet','Inter',system-ui,sans-serif;
  font-weight:400;
  letter-spacing:0.01em;
}

.container{max-width:960px;margin:0 auto;padding:1.25rem}
.site-header{position:sticky;top:0;background:rgba(17,24,39,.8);backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--border);z-index:10}
.nav-container{display:flex;align-items:center;gap:.75rem}
.logo{display:flex;align-items:center;text-decoration:none}
.logo-img{height:36px;width:auto;display:block}
.logo:hover .logo-img{opacity:.9;transition:opacity .2s}

.top-nav a{margin:0 .5rem;color:#ffffff;text-decoration:none}
.top-nav a:hover{opacity:.8;text-decoration:underline}

.lang-switch{display:flex;gap:.25rem}
.lang-btn{background:transparent;border:1px solid var(--border);border-radius:.5rem;padding:.25rem .5rem;cursor:pointer;color:var(--text)}
.lang-btn.active{border-color:var(--brand)}

.hero-logo {
  display: block;
  margin: 1.25rem auto;       /* centers the logo horizontally */
  width: min(100%, 820px);    /* limits max width to 820px, scales down on small screens */
  height: auto;               /* keeps correct aspect ratio */
}


.subtitle{color:var(--muted);margin-top:-.5rem}
.hero{width:100%;height:auto;margin:1rem 0}

.site-footer{border-top:1px solid var(--border);margin-top:2rem}
.flow>*+*{margin-top:1rem}
.card{background:var(--card);border:1px solid var(--border);border-radius:.75rem;padding:1rem;color:var(--text)}
.noscript{background:#fff3cd;border:1px solid #ffe58f;padding:.75rem;border-radius:.5rem;margin:1rem}

a{color:var(--brand); text-decoration: underline; cursor: pointer;}
a:hover{opacity:.9}
img{max-width:100%;height:auto}
.about-hero{display:flex;justify-content:center;margin:1.5rem 0}
.about-hero-img{width:50%;max-width:320px;min-width:200px;border-radius:.5rem;border:1px solid var(--border)}

@media (max-width:600px){
  .top-nav a{margin:.25rem}
  .logo-img{height:30px}
}