:root{
  --bg:#0c0f14;
  --card:#121722;
  --ink:#0b1220;
  --text:#e9eef7;
  --muted:#b7c3d7;
  --brand:#ffd100;
  --accent:#66d9ff;
  --shadow:0 10px 25px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--ink), #0f1626 40%, #0f1626);
  color:var(--text);
  line-height:1.55;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1100px, 92%);margin-inline:auto}
.row{display:flex;gap:1rem}
.row.wrap{flex-wrap:wrap}
.row.between{justify-content:space-between}
.row.center{align-items:center}
.row.start{align-items:flex-start}
.row.gap{gap:.75rem}
.grid{display:grid;gap:1rem}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.projects{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.section{padding:64px 0}
.section.alt{background:rgba(255,255,255,.02)}
.lead{font-size:1.125rem;color:var(--muted);max-width:60ch}
.small{font-size:.9rem;color:var(--muted)}
.btn{
  display:inline-block;
  padding:.75rem 1rem;
  border-radius:10px;
  background:var(--brand);
  color:#111;
  font-weight:700;
  border:2px solid transparent;
  box-shadow:var(--shadow);
}
.btn:hover{transform:translateY(-1px)}
.btn.small{padding:.5rem .75rem;font-weight:600}
.btn.ghost{background:transparent;color:var(--text);border-color:rgba(255,255,255,.2)}
.site-header{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(160%) blur(8px);
  background:rgba(12,15,20,.6);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.brand{display:flex;align-items:center;gap:.5rem}
.brand-name{font-weight:800;letter-spacing:.3px}
.nav{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.hero{
  padding:88px 0 56px;
  background:radial-gradient(1200px 450px at 60% -150px, rgba(255,209,0,.15), transparent 70%);
}
.trust{list-style:none;padding:0;margin:24px 0 0;gap:.75rem}
.trust li{background:rgba(255,255,255,.04);padding:.5rem .75rem;border-radius:8px}
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  padding:1rem;
  border-radius:12px;
  min-height:160px;
}
.project{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  overflow:hidden;
}
.proj-img{width:100%;height:auto}
.site-footer{padding:32px 0;border-top:1px solid rgba(255,255,255,.06)}
.contact-form{background:var(--card);padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,.06)}
.field{display:flex;flex-direction:column;flex:1;min-width:220px;margin-bottom:12px}
input,select,textarea{
  background:#0b1220;
  color:var(--text);
  padding:.75rem .8rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(255,209,0,.2)}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:static;width:auto;height:auto;padding:.5rem;background:var(--brand);color:#111}
.social-links{display:flex;gap:.75rem;align-items:center;margin:8px auto 0;justify-content:center}
.social-links a{color:var(--text);opacity:.8}
.social-links a:hover{opacity:1;transform:translateY(-1px)}
@media (max-width:720px){
  .nav a{display:none}
  .nav .btn.small{display:none}
  #lang-toggle{display:inline-block}
}