:root{
  --bg: #0b0c10;
  --card: #11131a;
  --text: #e8e8ea;
  --muted: #a6a8ad;
  --accent: #7c5cff;
  --line: #22242c;
}
:root.light{
  --bg: #f8f9fb;
  --card: #ffffff;
  --text: #1b1f2a;
  --muted: #5a5f69;
  --accent: #5b6cff;
  --line: #e8eaf0;
}
*{box-sizing:border-box}
html,body{padding:0;margin:0}
body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.65;
}
a{color: var(--accent); text-decoration: none}
img{max-width:100%; display:block}
small, .small{font-size:.9rem}
.muted{color: var(--muted)}
.accent{color: var(--accent)}

.site-header{
  position: sticky; top:0; z-index: 10;
  backdrop-filter: saturate(180%) blur(10px);
  background: color-mix(in oklab, var(--bg), transparent 70%);
  border-bottom: 1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px;
}
.brand{font-weight:700; letter-spacing:.5px}
.nav a{margin:0 10px; color:var(--text)}
.icon-btn{background:transparent;border:1px solid var(--line);border-radius:8px;padding:8px;cursor:pointer;color:var(--text)}

.hero{
  display:grid; gap:28px; align-items:center;
  grid-template-columns: 1.15fr .85fr;
  max-width: 1100px; padding:48px 20px; margin:0 auto;
}
.hero-text h1{font-size: clamp(28px, 4vw, 44px); margin:0 0 10px}
.tagline{color:var(--muted); max-width: 60ch}
.cta{margin:18px 0 8px; display:flex; gap:12px; flex-wrap:wrap}
.btn{
  display:inline-block; padding:10px 14px; border-radius:10px;
  border:1px solid var(--line); color:var(--text)
}
.btn.primary{background: var(--accent); color:white; border-color: transparent}
.btn.outline{background: transparent}
.btn.small{font-size:.92rem; padding:8px 12px}

.section{max-width:1100px;margin:0 auto;padding:36px 20px}
.section.alt{background: color-mix(in oklab, var(--card), var(--bg))}
.section-head h2{margin:0 0 4px}
.grid{display:grid; gap:18px}
.projects{grid-template-columns: repeat(auto-fit,minmax(260px,1fr))}
.card{
  background: var(--card); border:1px solid var(--line);
  border-radius:14px; padding:16px; display:flex; flex-direction:column; justify-content:space-between
}
.card h3{margin:0 0 6px}
.card p{margin:0 0 10px}
.card-foot{display:flex; gap:10px; margin-top:10px}
.badges{display:flex; gap:8px; list-style:none; padding:0; margin:0; flex-wrap:wrap}
.badges li{border:1px solid var(--line); padding:4px 8px; border-radius:999px; font-size:.85rem; color:var(--muted)}

.about{display:grid; grid-template-columns: 1.2fr .8fr; gap:24px}
.timeline{list-style:none; margin:0; padding:0}
.timeline li{border-left:2px solid var(--line); padding:8px 12px; margin:8px 0 8px 6px}
.timeline span{color:var(--accent); font-weight:600; margin-right:6px}

.skills{display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:12px}
.skill{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px}

.contact{display:grid; gap:12px; max-width:680px}
.field{display:grid; gap:6px}
input, textarea{
  background: var(--card); color: var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px; outline:none
}
input:focus, textarea:focus{border-color: var(--accent)}
.site-footer{border-top:1px solid var(--line); padding:24px 20px; text-align:center; color:var(--muted)}

@media (max-width: 900px){
  .hero{grid-template-columns: 1fr}
  .about{grid-template-columns: 1fr}
}


/* === PATCH MINIM === */

/* 1) Theme toggle: fa SVG-ul sa urmeze culoarea butonului (vizibil pe dark) */
.icon-btn { color: var(--text); }
.icon-btn svg,
.icon-btn svg * { fill: currentColor; stroke: currentColor; }

/* 2) Werdegang/Timeline: pastreaza stilul ini?ial, dar asigura vizibilitatea liniei */
.timeline li{
  border-left: 2px solid var(--line) !important;
  padding: 8px 12px 8px 14px; /* +2px la st�nga pentru spa?iu fa?a de linie */
  margin: 8px 0 8px 6px;
}
.timeline span{
  color: var(--accent);
  font-weight: 600;
  margin-right: 6px;
}

/* ===== MOBILE NAV SCROLL � fara hamburger ===== */
@media (max-width: 700px) {
  .site-header{
    padding: 8px 10px;
    gap: 8px;
    justify-content: space-between;
  }
  .brand img{ height: 26px; }

  .nav{
    display: flex;
    flex: 1 1 auto;
    overflow-x: auto;
    white-space: nowrap;
    gap: 8px;
    /* ascunde bara de scroll */
    -ms-overflow-style: none; scrollbar-width: none;
    mask-image: linear-gradient(to right, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  }
  .nav::-webkit-scrollbar{ display:none; }

  .nav a{
    margin: 0;                 /* suprascrie marginul global */
    padding: 6px 10px;
    font-size: .9rem;
    border: 1px solid var(--line);
    border-radius: 999px;      /* stil �chip� */
    flex: 0 0 auto;            /* nu se mic?oreaza, doar scroll */
    color: var(--text);
  }

  #themeToggle{ flex: 0 0 auto; }
}

@media (max-width: 700px) {
  .nav a {
    border: 1px solid var(--accent);  /* contur mov */
    color: var(--accent);             /* text mov */
    background: transparent;          /* fără fundal */
  }

  .nav a:hover {
    background: var(--accent);        /* fundal mov la hover */
    color: #fff;                      /* text alb la hover */
  }
}