/* ═══ Local fonts ═══ */
@font-face{font-family:'Space Grotesk';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/space-grotesk-light.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/space-grotesk-regular.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/space-grotesk-medium.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/space-grotesk-semibold.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/space-grotesk-bold.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/inter-light.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/inter-regular.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/inter-medium.woff2') format('woff2')}
@font-face{font-family:'Inter';font-weight:600;font-style:normal;font-display:swap;src:url('../fonts/inter-semibold.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/jetbrains-mono-regular.woff2') format('woff2')}

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --fg:#e2e8f0;
  --fg-dim:#94a3b8;
  --fg-muted:#475569;
  --bg:#050a15;
  --card:rgba(15,23,42,0.55);
  --border:rgba(148,163,184,0.07);
  --green:#34d399;
  --purple:#a78bfa;
  --pink:#f472b6;
  --amber:#fbbf24;
  --sky:#38bdf8;
}

html{scroll-behavior:smooth;font-size:16px}

body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

/* ═══ WebGL background ═══ */
#bg{
  position:fixed;inset:0;z-index:0;
  width:100%;height:100%;
  image-rendering:optimizeSpeed;
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;
  background:radial-gradient(ellipse at 30% 20%,rgba(52,211,153,0.04),transparent 60%),
             radial-gradient(ellipse at 70% 80%,rgba(167,139,250,0.03),transparent 60%),
             var(--bg);
  pointer-events:none;
}

/* ═══ Layout ═══ */
.page{position:relative;z-index:1}
.container{
  max-width:720px;
  margin:0 auto;
  padding:6rem 2rem 3rem;
}

/* ═══ Language switcher — top right ═══ */
.lang-switcher{
  position:fixed;top:1.2rem;right:1.5rem;z-index:10;
  display:flex;gap:0.15rem;
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;letter-spacing:0.1em;
  text-transform:uppercase;
}
.lang-switcher a{
  color:var(--fg-muted);text-decoration:none;
  padding:0.3rem 0.45rem;border-radius:4px;
  transition:color 0.2s;
}
.lang-switcher a:hover{color:var(--fg)}
.lang-switcher strong{
  color:var(--green);
  padding:0.3rem 0.45rem;
  background:rgba(52,211,153,0.08);
  border-radius:4px;
}

/* ═══ Hero ═══ */
.hero{
  text-align:center;
  margin-bottom:5rem;
  padding-top:1rem;
}
.hero-photo{
  display:block;
  margin:0 auto 2.5rem;
  width:180px;height:180px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(52,211,153,0.25);
  box-shadow:0 0 0 12px rgba(52,211,153,0.03),0 0 80px rgba(52,211,153,0.06);
  transition:all 0.5s ease;
}
.hero-photo:hover{
  border-color:var(--green);
  box-shadow:0 0 0 12px rgba(52,211,153,0.06),0 0 100px rgba(52,211,153,0.1);
}
.hero h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:3.5rem;
  font-weight:300;
  letter-spacing:-0.03em;
  margin-bottom:0.6rem;
  color:#fff;
}
.hero-sub{
  font-size:0.85rem;
  color:var(--fg-muted);
  letter-spacing:0.15em;
  text-transform:uppercase;
  font-weight:400;
  margin-bottom:2.5rem;
}
.hero-contact{
  display:flex;
  gap:2rem;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  font-size:0.82rem;
  font-family:'JetBrains Mono',monospace;
}
.hero-contact a{
  color:var(--fg-dim);
  text-decoration:none;
  transition:color 0.2s;
  letter-spacing:0.02em;
}
.hero-contact a:hover{color:var(--green)}
.hero-contact span{color:var(--fg-muted);user-select:none}

/* ═══ Sections ═══ */
.section{
  margin-bottom:2rem;
  animation:fadeUp 0.7s ease both;
}
.section:nth-child(2){animation-delay:0.05s}
.section:nth-child(3){animation-delay:0.1s}
.section:nth-child(4){animation-delay:0.15s}
.section:nth-child(5){animation-delay:0.2s}
.section:nth-child(6){animation-delay:0.25s}

.card{
  background:var(--card);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--border);
  border-left:2px solid var(--green);
  border-radius:12px;
  padding:2.5rem 2.8rem;
  transition:all 0.4s ease;
}
.card:hover{
  border-color:rgba(148,163,184,0.12);
  background:rgba(15,23,42,0.7);
  transform:translateY(-2px);
  box-shadow:0 32px 64px -16px rgba(0,0,0,0.4);
}

#software .card{border-left-color:var(--green)}
#blockchain .card{border-left-color:var(--purple)}
#blindstack .card{border-left-color:var(--pink)}
#solar .card{border-left-color:var(--amber)}
#research .card{border-left-color:var(--sky)}

.card h2{
  font-family:'Space Grotesk',sans-serif;
  font-size:1.35rem;
  font-weight:500;
  letter-spacing:-0.01em;
  margin-bottom:1rem;
}
#software .card h2{color:var(--green)}
#blockchain .card h2{color:var(--purple)}
#blindstack .card h2{color:var(--pink)}
#solar .card h2{color:var(--amber)}
#research .card h2{color:var(--sky)}

.card-desc{
  color:var(--fg-dim);
  font-size:0.92rem;
  line-height:1.8;
  margin-bottom:1.2rem;
}

/* ═══ Timeline ═══ */
.tl{margin:1.5rem 0;display:flex;flex-direction:column;gap:0}
.tl-row{
  display:grid;
  grid-template-columns:90px 1fr;
  gap:1.2rem;
  padding:0.7rem 0;
  border-bottom:1px solid var(--border);
}
.tl-row:last-child{border-bottom:none}
.tl-date{
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  color:var(--green);
  letter-spacing:0.04em;
  padding-top:0.15rem;
  white-space:nowrap;
}
#blockchain .tl-date{color:var(--purple)}

.tl-text{
  font-size:0.88rem;
  color:var(--fg-dim);
  line-height:1.6;
}
.tl-text strong{color:var(--fg);font-weight:600}

.tags{
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  color:var(--fg-muted);
  letter-spacing:0.03em;
  margin-top:0.6rem;
}

/* ═══ Links (arrow style) ═══ */
.links{
  display:flex;gap:1.5rem;flex-wrap:wrap;
  margin-top:1.8rem;
  padding-top:1.2rem;
  border-top:1px solid var(--border);
}
.link{
  font-family:'Space Grotesk',sans-serif;
  font-size:0.85rem;
  font-weight:500;
  text-decoration:none;
  transition:all 0.2s;
  display:inline-flex;align-items:center;gap:0.3rem;
}
.link::after{content:'>';font-size:0.75rem;opacity:0.5;transition:all 0.2s}
.link:hover::after{opacity:1;transform:translateX(3px)}

#software .link{color:var(--green)}
#blockchain .link{color:var(--purple)}
#blindstack .link{color:var(--pink)}
#solar .link{color:var(--amber)}
#research .link{color:var(--sky)}

.link:hover{filter:brightness(1.3)}
.link-dim{color:var(--fg-muted) !important}
.link-dim:hover{color:var(--fg-dim) !important;filter:none}

/* ═══ Footer ═══ */
.footer{
  margin-top:3rem;
  padding:2rem 0;
  text-align:center;
  font-family:'JetBrains Mono',monospace;
  font-size:0.65rem;
  color:var(--fg-muted);
  letter-spacing:0.1em;
  text-transform:uppercase;
}

/* ═══ Animation ═══ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

/* ═══ Responsive — small ═══ */
@media(max-width:640px){
  .container{padding:4rem 1.2rem 2rem}
  .hero h1{font-size:2.4rem}
  .hero-photo{width:130px;height:130px}
  .hero-contact{gap:1rem;font-size:0.75rem}
  .card{padding:2rem 1.6rem;border-radius:10px}
  .card h2{font-size:1.15rem}
  .tl-row{grid-template-columns:1fr;gap:0.1rem}
  .tl-date{padding-top:0}
  .lang-switcher{position:static;justify-content:center;margin-bottom:1rem;padding-top:1rem}
}

/* ═══ Responsive — large desktop (1440p+) ═══ */
@media(min-width:1441px){
  .container{max-width:900px;padding:8rem 2.5rem 4rem}
  .hero{margin-bottom:6rem}
  .hero-photo{width:220px;height:220px;margin-bottom:3rem}
  .hero h1{font-size:4.2rem}
  .hero-sub{font-size:1rem;margin-bottom:3rem;letter-spacing:0.18em}
  .hero-contact{font-size:0.95rem;gap:2.5rem}
  .section{margin-bottom:2.5rem}
  .card{padding:3rem 3.5rem;border-radius:16px}
  .card h2{font-size:1.6rem;margin-bottom:1.2rem}
  .card-desc{font-size:1.05rem}
  .tl-row{grid-template-columns:110px 1fr;gap:1.5rem;padding:0.9rem 0}
  .tl-date{font-size:0.8rem}
  .tl-text{font-size:1rem}
  .tags{font-size:0.8rem}
  .links{margin-top:2rem;padding-top:1.5rem;gap:2rem}
  .link{font-size:1rem}
  .lang-switcher{font-size:0.75rem;top:1.5rem;right:2rem}
  .footer{font-size:0.75rem;margin-top:4rem}
}

/* ═══ Responsive — 2K (2560px+) ═══ */
@media(min-width:2200px){
  .container{max-width:1100px;padding:10rem 3rem 5rem}
  .hero{margin-bottom:7rem}
  .hero-photo{width:260px;height:260px;margin-bottom:3.5rem;border-width:3px}
  .hero h1{font-size:5rem}
  .hero-sub{font-size:1.15rem;margin-bottom:3.5rem}
  .hero-contact{font-size:1.1rem;gap:3rem}
  .section{margin-bottom:3rem}
  .card{padding:3.5rem 4rem;border-radius:18px;border-left-width:3px}
  .card h2{font-size:1.9rem;margin-bottom:1.4rem}
  .card-desc{font-size:1.15rem;line-height:1.9}
  .tl-row{grid-template-columns:130px 1fr;gap:1.8rem;padding:1rem 0}
  .tl-date{font-size:0.9rem}
  .tl-text{font-size:1.1rem}
  .tags{font-size:0.9rem}
  .links{margin-top:2.5rem;padding-top:1.8rem;gap:2.5rem}
  .link{font-size:1.1rem}
  .lang-switcher{font-size:0.85rem;top:2rem;right:2.5rem;gap:0.3rem}
  .lang-switcher a,.lang-switcher strong{padding:0.4rem 0.6rem}
  .footer{font-size:0.85rem;margin-top:5rem}
}

/* ═══ Responsive — 4K (3400px+) ═══ */
@media(min-width:3400px){
  .container{max-width:1500px;padding:14rem 4rem 6rem}
  .hero{margin-bottom:9rem}
  .hero-photo{width:340px;height:340px;margin-bottom:4.5rem;border-width:4px;
    box-shadow:0 0 0 20px rgba(52,211,153,0.03),0 0 120px rgba(52,211,153,0.06)}
  .hero h1{font-size:7rem;margin-bottom:1rem}
  .hero-sub{font-size:1.5rem;margin-bottom:4.5rem;letter-spacing:0.2em}
  .hero-contact{font-size:1.4rem;gap:4rem}
  .section{margin-bottom:4rem}
  .card{padding:5rem 5.5rem;border-radius:24px;border-left-width:4px}
  .card h2{font-size:2.6rem;margin-bottom:2rem}
  .card-desc{font-size:1.5rem;line-height:2;margin-bottom:1.8rem}
  .tl-row{grid-template-columns:170px 1fr;gap:2.5rem;padding:1.4rem 0}
  .tl-date{font-size:1.15rem}
  .tl-text{font-size:1.4rem;line-height:1.7}
  .tags{font-size:1.1rem;margin-top:1rem}
  .links{margin-top:3rem;padding-top:2.5rem;gap:3rem}
  .link{font-size:1.4rem}
  .link::after{font-size:1.1rem}
  .lang-switcher{font-size:1.1rem;top:2.5rem;right:3rem;gap:0.4rem}
  .lang-switcher a,.lang-switcher strong{padding:0.5rem 0.8rem;border-radius:6px}
  .footer{font-size:1rem;margin-top:6rem;padding:3rem 0}
}