:root{
  --bg:#f6f8fb;
  --card:#ffffff;
  --text:#1f2937;
  --muted:#667085;
  --line:#e6eaf0;
  --primary:#275df5;
  --primary-soft:#eef3ff;
  --success:#1f8f5f;
  --success-soft:#eaf8f1;
  --dev:#8a4baf;
  --dev-soft:#f5ecfb;
  --shadow:0 18px 42px rgba(16,24,40,.08);
  --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(39,93,245,.08), transparent 26%),
    radial-gradient(circle at top left, rgba(31,143,95,.08), transparent 22%),
    var(--bg);
}
a{color:inherit}
img{max-width:100%; display:block}
.container{width:min(1120px, calc(100% - 32px)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(246,248,251,.82);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(230,234,240,.8);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:74px;
}
.brand{
  display:flex; align-items:center; gap:14px; text-decoration:none;
}
.brand-mark{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#0f172a,#334155);
  color:white; font-weight:800; font-size:1rem; letter-spacing:.08em;
  box-shadow:var(--shadow);
}
.brand-copy{display:flex; flex-direction:column}
.brand-title{font-size:1.05rem; font-weight:800; letter-spacing:-.02em}
.brand-subtitle{font-size:.9rem; color:var(--muted)}
.lang-switch{
  display:flex; gap:8px; flex-wrap:wrap;
}
.lang-switch a{
  text-decoration:none; font-size:.88rem; font-weight:700;
  color:var(--muted); padding:9px 12px; border-radius:999px; border:1px solid var(--line);
  background:#fff;
}
.lang-switch a.active{
  color:var(--primary); border-color:rgba(39,93,245,.22); background:var(--primary-soft);
}
.hero{padding:72px 0 28px}
.hero-grid{
  display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:stretch;
}
.hero-card,.summary-card,.project-card,.footer-card,.privacy-card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
}
.hero-card{padding:34px}
.hero-kicker{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; background:var(--primary-soft); color:var(--primary);
  font-size:.84rem; font-weight:800; margin-bottom:18px;
}
.hero h1{
  margin:0 0 14px; font-size:clamp(2rem,4vw,3.35rem); line-height:1.04; letter-spacing:-.045em;
}
.hero p{
  margin:0; font-size:1.08rem; line-height:1.72; color:#475467; max-width:68ch;
}
.summary-card{padding:28px}
.summary-card h2{
  margin:0 0 10px; font-size:1.18rem; letter-spacing:-.02em
}
.summary-list{display:grid; gap:14px; margin-top:18px}
.summary-item{
  display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
}
.summary-badge{
  min-width:34px; height:34px; border-radius:999px; display:grid; place-items:center;
  background:#101828; color:#fff; font-size:.8rem; font-weight:800;
}
.summary-item strong{display:block; margin-bottom:2px}
.summary-item span{color:var(--muted); font-size:.95rem; line-height:1.5}
.section-title{
  margin:16px 0 18px; font-size:1.45rem; letter-spacing:-.03em;
}
.projects{padding:8px 0 40px}
.project-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:18px;
}
.project-card{
  padding:22px; display:grid; grid-template-columns:104px 1fr; gap:18px; align-items:start;
}
.project-logo-wrap{
  width:104px; height:104px; border-radius:24px; background:#fff;
  border:1px solid var(--line); display:grid; place-items:center; overflow:hidden;
}
.project-logo-wrap img{
  width:100%; height:100%; object-fit:contain; padding:8px;
}
.project-card h3{
  margin:0 0 10px; font-size:1.2rem; letter-spacing:-.02em;
}
.meta{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;
}
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 10px; border-radius:999px; font-size:.8rem; font-weight:700;
  border:1px solid transparent;
}
.tag.tech{background:#f8f9fc; color:#475467; border-color:#eaecf0}
.tag.active{background:var(--success-soft); color:var(--success); border-color:#cceedd}
.tag.dev{background:var(--dev-soft); color:var(--dev); border-color:#e8d7f7}
.project-card p{
  margin:0 0 16px; color:#475467; line-height:1.68;
}
.project-link{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:800;
  color:var(--primary);
}
.project-link.disabled{
  color:var(--muted); cursor:default; text-decoration:none;
}
.footer{padding:14px 0 52px}
.footer-card{
  padding:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-copy{color:var(--muted); line-height:1.6}
.footer-copy strong{display:block; color:var(--text); margin-bottom:4px}
.footer-links{display:flex; gap:14px; flex-wrap:wrap}
.footer-links a{
  text-decoration:none; font-weight:700; color:var(--primary);
}
.privacy{padding:44px 0 52px}
.privacy-card{padding:30px}
.privacy-card h1{margin:0 0 12px; font-size:2rem; letter-spacing:-.03em}
.privacy-card h2{margin:26px 0 10px; font-size:1.12rem}
.privacy-card p, .privacy-card li{color:#475467; line-height:1.72}
.privacy-card ul{padding-left:18px}
.small-top-link{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none; margin-bottom:20px;
  color:var(--primary); font-weight:700;
}
@media (max-width: 940px){
  .hero-grid, .project-grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .header-inner{align-items:flex-start; padding:12px 0}
  .brand-subtitle{display:none}
  .project-card{grid-template-columns:1fr}
  .project-logo-wrap{width:96px; height:96px}
  .hero{padding-top:34px}
  .hero-card,.summary-card,.project-card,.footer-card,.privacy-card{padding:20px}
}