:root {
  color-scheme: dark;
  --bg: #0e0e0e;
  --bg2: #161616;
  --bg3: #1e1e1e;
  --border: rgba(255,255,255,0.06);
  --text: #e8e8e8;
  --muted: #8a8a8a;
  --hero-glow: rgba(255,255,255,0.12);
  --hero-light-core: rgba(255,255,255,0.08);
  --hero-light-shade: rgba(0,0,0,0.18);
  --grid-line: rgba(255,255,255,0.025);
  --interactive-border: rgba(255,255,255,0.2);
  --tag-border: rgba(255,255,255,0.08);
  --btn-primary-hover-bg: #ffffff;
  --control-bg: transparent;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f4ee;
  --bg2: #fffaf3;
  --bg3: #ece5da;
  --border: rgba(31,29,24,0.12);
  --text: #1e1c18;
  --muted: #6f685f;
  --hero-glow: rgba(255,255,255,0.92);
  --hero-light-core: rgba(255,255,255,0.72);
  --hero-light-shade: rgba(115,91,57,0.09);
  --grid-line: rgba(31,29,24,0.055);
  --interactive-border: rgba(31,29,24,0.24);
  --tag-border: rgba(31,29,24,0.1);
  --btn-primary-hover-bg: #000000;
  --control-bg: rgba(255,255,255,0.68);
}

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

html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  line-height: 1.65;
  transition: background 0.25s ease, color 0.25s ease;
}


.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.backdrop-light {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 38% 55% at 58% -12%, var(--hero-light-core) 0%, transparent 78%),
    radial-gradient(ellipse 70% 85% at 62% 0%, var(--hero-glow) 0%, transparent 75%),
    radial-gradient(ellipse 55% 65% at 100% 28%, var(--hero-light-shade) 0%, transparent 80%);
  mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
}
.backdrop-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, black 0%, transparent 100%);
}

.page {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) clamp(16px, 6vw, 24px) 48px;
}

.top { display: flex; justify-content: flex-end; }
.controls { display: flex; align-items: center; gap: 10px; }

.lang-switcher { display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: 100px; background: var(--control-bg); }
.lang-btn {
  min-width: 36px;
  padding: 4px 10px;
  border: none;
  border-radius: 100px;
  background: none;
  color: var(--muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}
.lang-btn[aria-pressed="true"] { background: var(--bg3); color: var(--text); }
.lang-btn:hover { color: var(--text); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--control-bg);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--interactive-border); transform: translateY(-1px); }
.theme-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-icon-moon { display: none; fill: currentColor; stroke: none; }
:root[data-theme="light"] .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-icon-moon { display: block; }

.lang-btn:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.intro { margin-top: 24px; }
.eyebrow { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.name {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 800;
  font-size: clamp(3.5rem, 17vw, 5.5rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--text);
}
.name span { display: block; color: var(--muted); font-weight: 400; }
.desc { max-width: 30em; margin-top: 20px; font-size: 1rem; color: var(--muted); text-wrap: pretty; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 6px 12px;
  border: 1px solid var(--tag-border);
  border-radius: 100px;
  background: var(--bg2);
  color: var(--text);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.links { display: grid; gap: 8px; margin-top: 40px; }

.link {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  min-height: 76px;
  padding: 16px 16px 16px 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
a.link:hover { background: var(--bg3); border-color: var(--interactive-border); transform: translateY(-1px); }
a.link:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.link-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; }
.link-icon-fill { fill: currentColor; stroke: none; }
.link-text { display: flex; flex-direction: column; min-width: 0; }
.link-title { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 600; font-size: 1.08rem; line-height: 1.25; letter-spacing: -0.01em; }
.link-sub { margin-top: 2px; font-size: 0.8rem; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.link-arrow { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; transition: border-color 0.2s; }
.link-arrow svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
a.link:hover .link-arrow { border-color: var(--interactive-border); }

.link-primary { border-color: transparent; background: var(--text); color: var(--bg); }
a.link-primary:hover { border-color: transparent; background: var(--btn-primary-hover-bg); }
.link-primary .link-icon { opacity: 0.8; }
.link-primary .link-sub { color: inherit; opacity: 0.72; }
.link-primary .link-arrow, a.link-primary:hover .link-arrow { border-color: transparent; background: var(--bg); color: var(--text); }

.link-cv { grid-template-columns: 22px minmax(0, 1fr); row-gap: 14px; }
.cv-options { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--interactive-border);
  border-radius: 100px;
  color: var(--text);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
.cv-btn svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cv-btn:hover { border-color: var(--text); background: var(--text); color: var(--bg); transform: translateY(-1px); }
.cv-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  padding: 24px 16px max(24px, env(safe-area-inset-bottom));
  font-size: 0.72rem;
  color: var(--muted);
  text-align: center;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.top, .eyebrow, .name, .desc, .status, .links { opacity: 0; animation: fadeUp 0.8s ease forwards; }
.top { animation-delay: 0.1s; }
.eyebrow { animation-delay: 0.2s; }
.name { animation-delay: 0.3s; }
.desc, .status { animation-delay: 0.45s; }
.links { animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .top, .eyebrow, .name, .desc, .status, .links { opacity: 1; animation: none; }
  a.link:hover, .cv-btn:hover, .theme-toggle:hover { transform: none; }
}

@media (max-width: 559px) {
  .intro { margin-top: 36px; }
  .eyebrow { margin-bottom: 10px; }
  .desc { margin-top: 16px; }
  .status { margin-top: 16px; }
  .links { margin-top: 28px; }
  .link { min-height: 68px; padding-top: 12px; padding-bottom: 12px; }
}

@media (min-width: 560px) {
  .page { padding-top: 48px; }
  .intro { margin-top: 56px; }
}