:root {
  --bg: #070a12;
  --bg-elev: #0c111e;
  --card: rgba(16, 23, 40, 0.72);
  --card-solid: #101728;
  --text: #f3f6fb;
  --muted: #9aa6bb;
  --line: rgba(255,255,255,.10);
  --line-strong: rgba(255,255,255,.18);
  --accent: #7c8cff;
  --accent-2: #31d7c9;
  --ok: #68e0a5;
  --shadow: 0 30px 100px rgba(0,0,0,.35);
  --max: 1180px;
}

[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-elev: #ffffff;
  --card: rgba(255,255,255,.78);
  --card-solid: #ffffff;
  --text: #121827;
  --muted: #667085;
  --line: rgba(17,24,39,.10);
  --line-strong: rgba(17,24,39,.17);
  --accent: #5366ef;
  --accent-2: #0ba89e;
  --shadow: 0 30px 90px rgba(30,41,59,.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: rgba(124,140,255,.35); }

.page-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: -1; opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
}
.orb { position: fixed; width: 420px; height: 420px; border-radius: 50%; filter: blur(100px); opacity: .12; z-index: -2; }
.orb-a { top: -120px; left: -80px; background: var(--accent); }
.orb-b { right: -140px; top: 300px; background: var(--accent-2); }

.section-shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.site-header {
  position: sticky; top: 16px; z-index: 50;
  width: min(calc(100% - 32px), 1220px); margin: 16px auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px 14px 12px 16px;
  border: 1px solid var(--line); border-radius: 18px;
  background: color-mix(in srgb, var(--bg-elev) 78%, transparent);
  backdrop-filter: blur(18px); box-shadow: 0 12px 40px rgba(0,0,0,.10);
}
.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:-.02em; }
.brand-mark {
  display:grid; place-items:center; width:34px; height:34px; border-radius:10px;
  color:#fff; font-size:12px; background: linear-gradient(135deg,var(--accent),var(--accent-2));
}
.nav { display:flex; gap: 6px; }
.nav a { color:var(--muted); padding:9px 12px; border-radius:10px; font-size:14px; transition:.2s ease; }
.nav a:hover { color:var(--text); background:rgba(127,127,127,.08); }
.theme-toggle { width:38px; height:38px; border:1px solid var(--line); border-radius:11px; background:transparent; color:var(--text); cursor:pointer; }

.hero { min-height: 780px; display:grid; grid-template-columns: 1.15fr .85fr; align-items:center; gap:70px; padding-top:90px; padding-bottom:90px; }
.eyebrow, .section-kicker { color:var(--accent-2); text-transform:uppercase; font-size:12px; font-weight:800; letter-spacing:.16em; }
.status-dot { display:inline-block; width:8px; height:8px; margin-right:9px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 5px rgba(104,224,165,.10); }
h1 { margin:22px 0; font-size:clamp(48px,6.2vw,82px); line-height:1.02; letter-spacing:-.058em; font-weight:800; }
.gradient-text { background:linear-gradient(100deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-text { max-width:720px; color:var(--muted); font-size:18px; }
.hero-actions, .contact-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 18px; border-radius:12px; border:1px solid var(--line); font-weight:700; font-size:14px; cursor:pointer; transition:transform .18s ease, border-color .18s ease, background .18s ease; }
.button:hover { transform:translateY(-2px); }
.button-primary { color:white; border-color:transparent; background:linear-gradient(135deg,var(--accent),#6e66ff); box-shadow:0 14px 36px rgba(92,102,255,.22); }
.button-secondary { color:var(--text); background:rgba(127,127,127,.06); }
.hero-meta { margin-top:28px; display:flex; flex-wrap:wrap; gap:10px 22px; color:var(--muted); font-size:13px; }
.hero-meta strong { color:var(--text); font-weight:600; }

.terminal-card { border:1px solid var(--line); border-radius:22px; overflow:hidden; background:var(--card); backdrop-filter:blur(18px); box-shadow:var(--shadow); transform:rotate(1.2deg); }
.terminal-top { display:flex; align-items:center; gap:14px; padding:13px 15px; color:var(--muted); font:500 12px "JetBrains Mono", monospace; border-bottom:1px solid var(--line); }
.terminal-dots { display:flex; gap:6px; margin-right:auto; }.terminal-dots i { width:8px; height:8px; border-radius:50%; background:var(--line-strong); }
.terminal-live { color:var(--ok); }
.terminal-body { padding:28px; font:500 13px/1.75 "JetBrains Mono", monospace; }
.prompt { color:var(--accent-2); }.terminal-muted { color:var(--muted); }
.terminal-grid { margin:22px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.terminal-grid div { display:flex; justify-content:space-between; gap:18px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; background:rgba(127,127,127,.035); }
.terminal-grid span { color:var(--muted); }.ok { color:var(--ok); font-weight:600; }.cursor { animation:blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

.trust-strip { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; padding:18px 0 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--muted); font:600 11px "JetBrains Mono", monospace; letter-spacing:.08em; text-align:center; }
.section { padding:120px 0; }
.section-heading { margin-bottom:52px; }
.section-heading h2, .cta-card h2, .contact-card h2 { margin:14px 0 0; font-size:clamp(35px,5vw,58px); line-height:1.08; letter-spacing:-.045em; }
.about-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; }
.glass-card, .principles, .skill-card, .project-card, .cta-card, .contact-card { border:1px solid var(--line); background:var(--card); backdrop-filter:blur(16px); box-shadow:var(--shadow); }
.about-copy { padding:34px; border-radius:20px; color:var(--muted); font-size:17px; }
.about-copy p:first-child { margin-top:0; }.about-copy p:last-child { margin-bottom:0; }
.principles { padding:12px; border-radius:20px; }
.principle { display:grid; grid-template-columns:44px 1fr; gap:10px; padding:20px; border-bottom:1px solid var(--line); }
.principle:last-child { border-bottom:0; }.principle>span { color:var(--accent); font:600 12px "JetBrains Mono",monospace; }.principle strong { font-size:15px; }.principle p { color:var(--muted); margin:3px 0 0; font-size:14px; }
.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.skill-card { min-height:250px; padding:26px; border-radius:18px; transition:transform .22s ease, border-color .22s ease; }
.skill-card:hover { transform:translateY(-5px); border-color:var(--line-strong); }.skill-index { color:var(--accent); font:600 12px "JetBrains Mono",monospace; }.skill-card h3 { margin:36px 0 10px; font-size:20px; }.skill-card p { color:var(--muted); font-size:14px; }
.tags, .project-points { display:flex; flex-wrap:wrap; gap:7px; margin-top:20px; }.tags span, .project-points span { border:1px solid var(--line); border-radius:999px; padding:5px 9px; color:var(--muted); font-size:11px; }
.projects-stack { display:grid; gap:14px; }.project-card { display:grid; grid-template-columns:80px 1fr; border-radius:20px; overflow:hidden; }.project-card.featured { border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }.project-number { display:grid; place-items:start center; padding-top:28px; color:var(--muted); font:600 12px "JetBrains Mono",monospace; border-right:1px solid var(--line); }.project-content { padding:28px 30px; }.project-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }.project-label { color:var(--accent-2); font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.project-card h3 { margin:7px 0 8px; font-size:24px; letter-spacing:-.025em; }.project-card p { max-width:850px; color:var(--muted); margin:0; }
.project-visual { margin:24px 0 0; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#f5f8fc; box-shadow:0 16px 40px rgba(0,0,0,.16); }
.project-visual img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; cursor:zoom-in; transition:transform .25s ease, filter .25s ease; }
.project-visual:hover img { transform:scale(1.012); filter:brightness(.96); }
.project-visual-dark { background:#07111d; }
.project-state { white-space:nowrap; border:1px solid rgba(104,224,165,.26); background:rgba(104,224,165,.08); color:var(--ok); border-radius:999px; padding:6px 10px; font-size:11px; font-weight:700; }
.cta-card { border-radius:24px; padding:46px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:40px; overflow:hidden; }.cta-code { display:grid; gap:7px; min-width:220px; font:600 13px "JetBrains Mono", monospace; }.cta-code span { border:1px solid var(--line); background:rgba(127,127,127,.04); padding:10px 12px; border-radius:10px; }.cta-code span:nth-child(2) { transform:translateX(14px); }.cta-code span:nth-child(3) { transform:translateX(28px); color:var(--accent-2); }.cta-code span:nth-child(4) { transform:translateX(42px); color:var(--ok); }
.contact-section { padding-top:50px; }.contact-card { padding:54px; border-radius:26px; text-align:center; }.contact-card p { color:var(--muted); max-width:620px; margin:20px auto 0; }.contact-actions { justify-content:center; }
.footer { display:flex; justify-content:space-between; gap:20px; padding:30px 0 45px; color:var(--muted); border-top:1px solid var(--line); font-size:13px; }.footer-note { font-family:"JetBrains Mono",monospace; }
.toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); opacity:0; pointer-events:none; z-index:100; padding:10px 14px; border-radius:10px; color:var(--text); background:var(--card-solid); border:1px solid var(--line); box-shadow:var(--shadow); transition:.25s ease; }.toast.show { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; }.reveal.visible { opacity:1; transform:none; }.delay-1 { transition-delay:.10s; }.delay-2 { transition-delay:.18s; }

@media (max-width: 920px) {
  .nav { display:none; }
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:90px; gap:42px; }
  .terminal-card { transform:none; max-width:640px; }
  .trust-strip { grid-template-columns:repeat(3,1fr); row-gap:16px; }
  .about-grid, .skills-grid { grid-template-columns:1fr 1fr; }
  .about-copy { grid-column:1/-1; }
  .cta-card { grid-template-columns:1fr; }.cta-code { max-width:300px; }
}
@media (max-width: 620px) {
  .section-shell { width:min(calc(100% - 26px), var(--max)); }
  .site-header { width:calc(100% - 20px); top:10px; margin-top:10px; }
  .brand > span:last-child { display:none; }
  .hero { padding-top:70px; padding-bottom:70px; }
  h1 { font-size:clamp(42px,13vw,62px); }
  .hero-text { font-size:16px; }
  .terminal-grid { grid-template-columns:1fr; }
  .trust-strip { grid-template-columns:1fr 1fr; }
  .section { padding:88px 0; }
  .about-grid, .skills-grid { grid-template-columns:1fr; }
  .project-card { grid-template-columns:1fr; }.project-visual { margin-top:20px; border-radius:12px; }.project-number { display:none; }.project-content { padding:24px; }.project-header { display:block; }.project-state { display:inline-block; margin-top:10px; }
  .cta-card, .contact-card { padding:30px 22px; }.cta-code span:nth-child(n) { transform:none; }
  .footer { flex-direction:column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
}

.image-lightbox { position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; background:rgba(3,8,18,.88); backdrop-filter:blur(14px); opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease; }
.image-lightbox.open { opacity:1; visibility:visible; }
.image-lightbox img { display:block; max-width:min(94vw,1600px); max-height:86vh; width:auto; height:auto; object-fit:contain; border-radius:14px; box-shadow:0 28px 90px rgba(0,0,0,.48); transform:scale(.975); transition:transform .22s ease; }
.image-lightbox.open img { transform:scale(1); }
.lightbox-close { position:fixed; top:22px; right:26px; width:46px; height:46px; border:1px solid rgba(255,255,255,.22); border-radius:50%; background:rgba(8,14,26,.72); color:#fff; font-size:30px; line-height:1; cursor:pointer; backdrop-filter:blur(10px); }
.lightbox-close:hover { background:rgba(255,255,255,.14); }
.lightbox-caption { margin:14px 0 0; max-width:900px; color:rgba(255,255,255,.78); text-align:center; font-size:13px; }
body.lightbox-open { overflow:hidden; }
@media (max-width:620px) { .image-lightbox { padding:14px; } .image-lightbox img { max-width:96vw; max-height:82vh; border-radius:10px; } .lightbox-close { top:12px; right:12px; } }

/* Personal profile and bilingual navigation */
section[id], main[id] { scroll-margin-top:110px; }
.skip-link { position:fixed; top:-100px; left:16px; z-index:100; padding:12px 18px; background:var(--card-solid); border:1px solid var(--accent); border-radius:8px; }
.skip-link:focus { top:16px; }
a:focus-visible, button:focus-visible { outline:2px solid var(--accent-2); outline-offset:4px; }
.header-tools { display:flex; gap:10px; align-items:center; }
.language-switch { display:flex; gap:2px; padding:3px; border:1px solid var(--line); border-radius:11px; }
.language-switch button { background:transparent; border:0; color:var(--muted); padding:6px 9px; border-radius:7px; font-size:12px; font-weight:700; cursor:pointer; }
.language-switch button[aria-pressed="true"] { background:var(--accent); color:#fff; }
.hero { min-height:660px; gap:48px; grid-template-columns:1.35fr .85fr; }
h1 { font-size:clamp(48px,5.5vw,72px); line-height:1.08; }
.hero-role { display:block; font-size:clamp(29px,3.4vw,44px); letter-spacing:-.04em; margin-top:14px; padding-bottom:4px; }
.hero-lead { font-size:clamp(20px,2.1vw,26px); line-height:1.5; max-width:650px; }
.hero-text { font-size:16px; }
.profile-panel { padding:32px; border-radius:22px; }
.profile-panel h2 { font-size:27px; line-height:1.3; letter-spacing:-.03em; margin:18px 0 28px; }
.profile-panel dl { margin:0 0 28px; }
.profile-panel dt { margin-top:20px; color:var(--muted); font-size:12px; }
.profile-panel dd { margin:4px 0 0; font-size:14px; }
.text-link { color:var(--accent-2); font-size:13px; font-weight:600; }
.section { padding:90px 0; }
.principle { display:block; font-size:15px; padding:26px 20px; color:var(--text); }
.timeline { list-style:none; padding:0; margin:0; }
.timeline-item { display:grid; grid-template-columns:190px 1fr; gap:28px; position:relative; }
.timeline-date { color:var(--accent-2); font-family:'JetBrains Mono',monospace; font-size:12px; margin:5px 0 0; padding:0 24px 32px 0; border-right:1px solid var(--line-strong); }
.timeline-date::after { content:''; position:absolute; left:185px; top:7px; width:9px; height:9px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 5px var(--bg); }
.timeline-card { padding:0 0 38px; }
.timeline-card h3 { margin:0; font-size:23px; line-height:1.3; letter-spacing:-.02em; }
.timeline-company { margin:7px 0 12px; color:var(--accent); font-size:15px; font-weight:600; }
.timeline-description { color:var(--muted); font-size:15px; margin:0; max-width:790px; }
.timeline-item:last-child .timeline-card { padding-bottom:0; }
.timeline-item:last-child .timeline-date { border-right-color:transparent; }
.contact-email { display:block; width:fit-content; max-width:100%; margin:28px auto 0; font-size:clamp(18px,3.5vw,32px); letter-spacing:-.03em; font-weight:600; color:var(--accent-2); overflow-wrap:anywhere; }
.contact-email:hover, .text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.contact-actions { margin-top:24px; }
.skill-card h3 { margin-top:26px; }
@media(max-width:1050px) { .nav a { padding:9px 7px; font-size:13px; } .site-header { gap:12px; } }
@media(max-width:920px) { .hero { grid-template-columns:1fr; gap:30px; min-height:0; padding-top:70px; padding-bottom:60px; } .profile-panel { max-width:640px; } .profile-panel dl { display:grid; grid-template-columns:100px 1fr; gap:16px 12px; } .profile-panel dt,.profile-panel dd { margin:0; } }
@media(max-width:620px) { .brand>span:last-child { display:block; font-size:13px; } .brand { gap:7px; } .brand-mark { width:30px; height:30px; } .site-header { gap:8px; padding:10px; } .header-tools { gap:6px; } .language-switch button { padding:6px; } .hero { padding-top:52px; } h1 { font-size:clamp(39px,10.2vw,60px); } .hero-role { font-size:clamp(25px,6.4vw,36px); } .eyebrow { font-size:10px; letter-spacing:.09em; } .timeline-item { grid-template-columns:1fr; gap:12px; padding-left:22px; border-left:1px solid var(--line-strong); } .timeline-date { border:0; padding:0; font-size:11px; margin-top:0; } .timeline-date::after { left:-5px; top:5px; } .timeline-card { padding-bottom:34px; } .timeline-card h3 { font-size:21px; } .profile-panel { padding:24px; } .section { padding:64px 0; } .section-heading { margin-bottom:32px; } .section-heading h2, .contact-card h2 { font-size:35px; } .footer-note { font-size:11px; } }

/* Concurrent roles and touch-friendly mobile navigation */
.timeline-note { width:fit-content; max-width:100%; margin:0 0 14px; padding:7px 11px; border:1px solid var(--line); border-radius:9px; font-size:12px; line-height:1.6; color:var(--accent-2); background:var(--bg-elev); }
@media (max-width:920px) {
  .site-header { flex-wrap:wrap; gap:8px 12px; }
  .header-tools { margin-left:auto; }
  .nav { display:flex; order:3; flex-basis:100%; justify-content:center; flex-wrap:wrap; gap:2px 6px; border-top:1px solid var(--line); padding-top:5px; }
  .nav a { min-height:44px; display:inline-flex; align-items:center; padding:8px 12px; }
  .language-switch button { min-width:40px; min-height:40px; padding:8px; }
  .theme-toggle { width:44px; height:44px; }
  section[id], main[id] { scroll-margin-top:160px; }
  .hero > *, .about-grid > *, .skills-grid > * { min-width:0; }
}
@media (max-width:620px) {
  .nav { gap:0; justify-content:space-between; }
  .nav a { padding:8px 7px; font-size:12px; }
  .hero-role { overflow-wrap:normal; }
  .contact-actions .button { min-height:48px; }
  .tags span { overflow-wrap:anywhere; }
}
@media (max-width:360px) {
  .brand > span:last-child { font-size:11px; }
  .brand-mark { width:26px; height:26px; font-size:10px; }
  .site-header { padding:8px; gap:6px; }
  .header-tools { gap:4px; }
  .language-switch button { min-width:36px; }
  .nav a { padding-inline:5px; }
  .profile-panel dl { grid-template-columns:1fr; gap:5px; }
  .profile-panel dd { margin-bottom:12px; }
}