:root{
  /* Fresh teal system matching your avatar */
  --bg: #0d1b1a;           /* deep teal/green */
  --surface: #0f2422;
  --card: #122a28;
  --text: #e9fbf8;
  --muted:#9cc7c0;
  --line: rgba(255,255,255,.12);
  --accent: #10b981;       /* emerald */
  --accent-2:#06b6d4;      /* cyan */
  --chip:#0c201e;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f6fbfa; --surface:#ffffff; --card:#ffffff; --text:#0d1b1a; --muted:#476a64; --line:#e6efed; --chip:#eef7f6; --shadow:0 8px 24px rgba(5,50,40,.08); }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; color:var(--text); background: radial-gradient(900px 600px at 100% -10%, rgba(16,185,129,.18), transparent 60%), radial-gradient(600px 400px at -10% -10%, rgba(6,182,212,.16), transparent 60%), var(--bg)}
a{color:inherit; text-decoration:none}
.container{max-width:1080px; margin:0 auto; padding:28px 20px 80px}

/* Header */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background .2s ease, box-shadow .2s ease;
}
.nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.logo-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }

.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:14px; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#04221f; font-weight:700; border:0}
.btn.ghost{background:transparent; color:var(--text); border:1px solid var(--line)}

/* Hero */
.hero{display:grid; grid-template-columns: .9fr 1.1fr; gap:24px; align-items:center; margin-top:26px}
@media (max-width:960px){.hero{grid-template-columns:1fr; text-align:center}}
.card{background:var(--card); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow)}
.hero .avatar{padding:26px; display:grid; place-items:center}
.avatar img{width:220px; height:220px; border-radius:50%; display:block; object-fit:cover; background:#0f7c75; border:6px solid rgba(255,255,255,.08)}
@media (max-width:520px){.avatar img{width:170px; height:170px}}
.pitch{padding:28px}
h1{margin:0; font-size:clamp(28px,4.2vw,44px); line-height:1.05}
.accent{background:linear-gradient(135deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lead{color:var(--muted); margin-top:10px}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px}
.chip{padding:8px 12px; background:var(--chip); border:1px solid var(--line); border-radius:999px; color:var(--muted); font-size:13px}

/* Sections */
section{margin-top:36px}
.section-title{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px; text-transform:uppercase; font-size:12px; color:var(--muted)}
.section-title .bar{height:10px; width:20px; border-radius:99px; background:linear-gradient(135deg,var(--accent),var(--accent-2))}

/* Skills */
.skills{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.skills{grid-template-columns:1fr}}
.skill{padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface)}
.skill h4{margin:0 0 8px}
.meter{height:8px; background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid var(--line); border-radius:999px; overflow:hidden}
.meter i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.level{font-size:12px; color:var(--muted); margin-top:6px}

/* Timeline */
.timeline{position:relative}
.tl{position:relative; padding:16px; border:1px solid var(--line); background:var(--surface); border-radius:16px; margin:12px 0}
.tl h4{margin:0 0 6px}
.tl .meta{font-size:12px; color:var(--muted)}

/* Projects */
.cards{display:grid; gap:14px; grid-template-columns:repeat(2,1fr)}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
.card2{border:1px solid var(--line); border-radius:16px; background:var(--surface); overflow:hidden}
.card2 .p{padding:16px}
.card2 h5{margin:0 0 6px}
.tag{display:inline-block; padding:4px 8px; background:var(--chip); border:1px solid var(--line); border-radius:999px; font-size:12px; color:var(--muted)}

footer{margin-top:40px; border-top:1px solid var(--line); padding-top:16px; color:var(--muted); font-size:13px}

/* ===== Navigation upgrades ===== */
.nav.scrolled { box-shadow: var(--shadow); }
.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0 0 0 auto; /* Push to the left, leave space for buttons */
  display: flex;
  gap: 24px;
}
.nav .nav-menu a{position:relative}
.nav .nav-menu a.active:after{content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); border-radius:2px}

.nav-buttons { display: flex; align-items: center; gap: 8px; }

/* Mobile menu */
#menuBtn{display:none}
@media (max-width:880px){
  #menuBtn{display:inline-flex}
  .nav-menu {
    position: fixed;
    inset: 58px 16px auto 16px;
    flex-direction: column;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    opacity: 0; transform: translateY(-10px) scale(0.98); pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .nav .nav-menu.open{opacity:1; transform:translateY(0); pointer-events:auto}
  .nav .nav-menu a{padding:10px 8px}
}

/* Focus ring */
:where(a,button){outline:none}
:where(a,button):focus-visible{box-shadow:0 0 0 2px rgba(6,182,212,.6), 0 0 0 6px rgba(6,182,212,.2); border-radius:12px}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto!important; transition:none!important; animation:none!important}
}

/* Scroll bar (inline style applied from JS; selector here for theming if needed) */
#scrollBar{background:linear-gradient(90deg,var(--accent),var(--accent-2))}

/* Buttons */
.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px; border: 0; background: transparent; color: var(--muted);
  cursor: pointer; border-radius: 10px;
  transition: background .2s, color .2s;
}
.icon-btn:hover { background: var(--chip); color: var(--text); }

/* Theme toggle icons */
#themeBtn .moon { display: none; }
#themeBtn .sun { display: block; }
:root[data-theme="dark"] #themeBtn .moon { display: block; }
:root[data-theme="dark"] #themeBtn .sun { display: none; }

@media (max-width: 880px) {
  .nav-menu { margin-left: 0; }
  .nav-buttons { margin-left: auto; }
}

/* Tighten spacing between social rail and hero */
.social-rail { padding-top: 6px; margin-bottom: 6px; }
.hero { margin-top: 8px; }                   /* אם היה גדול מדי קודם */
.hero .avatar, .hero .pitch { margin-top: 0; } /* ביטול מרווחים פנימיים מיותרים */
@media (max-width: 880px) {
  .social-rail { gap: 8px !important; }     /* אם מוגדר gap inline גדול */
  .hero { gap: 14px; }                       /* ריווח מאוזן במובייל */
}