: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:60; backdrop-filter:saturate(160%) blur(10px); background:linear-gradient(180deg, rgba(13,27,26,.75), rgba(13,27,26,.35)); border-bottom:1px solid var(--line)}
.nav{max-width:1080px; margin:0 auto; padding:12px 16px; display:flex; align-items:center; gap:14px; transition: box-shadow .2s ease, background .25s ease}
.brand{display:flex; align-items:center; gap:10px; font-weight:800}
.logo{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(from 220deg, var(--accent), var(--accent-2)); box-shadow:0 10px 24px rgba(16,185,129,.35)}
.links{margin-inline-start:auto; display:flex; gap:18px}
.links a{opacity:.9}
.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:0 10px 24px rgba(0,0,0,.25)}
.nav .nav-menu{list-style:none; padding:0; margin:0; display:flex; gap:18px}
.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}

/* Mobile menu */
#menuBtn{display:none}
@media (max-width:880px){
  #menuBtn{display:inline-flex}
  .nav .nav-menu{position:absolute; right:16px; top:56px; flex-direction:column; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:10px; width:min(260px, 90vw); opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .18s ease, transform .18s 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))}

/* Simpler header */
.simple-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(16, 24, 24, 0.7);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Brand & logo */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.brand-text { font-weight: 800; letter-spacing: .2px; }
.logo {
  width: 28px; height: 28px; border-radius: 8px;
  display: inline-grid; place-items: center;
  font-size: 12px; font-weight: 800; line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #2c8b7f, #186a60);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* Buttons */
.icon-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 10px; border: 0; background: transparent; color: inherit;
  cursor: pointer; border-radius: 10px;
}
.icon-btn:hover { background: rgba(255,255,255,.06); }

/* Menu – desktop default */
.nav-menu {
  display: flex; gap: 14px; margin-left: auto; list-style: none; padding: 0; align-items: center;
}
.nav-menu a { text-decoration: none; color: inherit; opacity: .9; }
.nav-menu a:hover { opacity: 1; }

/* Mobile layout */
@media (max-width: 880px) {
  .icon-btn { margin-left: auto; }          /* hamburger to the right */
  .nav-menu {
    position: fixed;
    inset: 56px 0 auto 0;                   /* below header */
    display: block;
    padding: 12px 16px 18px;
    background: rgba(16, 24, 24, 0.98);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
  }
  .nav-menu li { margin: 10px 0; }
  .nav-menu.open {
    opacity: 1; pointer-events: auto; transform: none;
  }
}

/* Small shadow when page is scrolled */
.nav.scrolled { box-shadow: 0 6px 18px rgba(0,0,0,.22); }

/* Optional: dark/light with data-theme on <html> */
:root[data-theme="light"] .simple-nav { background: rgba(250, 250, 250, 0.75); border-bottom-color: rgba(0,0,0,.08); }
:root[data-theme="light"] .nav-menu { background: rgba(255, 255, 255, 0.98); }
:root[data-theme="light"] .logo { background: linear-gradient(135deg, #2fa596, #1b7f73); }

/* Header tone + blend with page background */
:root { --hdr-alpha-dark: .35; --hdr-alpha-light: .70; }

/* מצב כהה */
:root[data-theme="dark"] .simple-nav {
  background: rgba(16,24,24,var(--hdr-alpha-dark)); /* היה ~.7, עכשיו עדין יותר */
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* מצב בהיר */
:root[data-theme="light"] .simple-nav {
  background: rgba(255,255,255,var(--hdr-alpha-light));
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.simple-nav { background: rgba(16,24,24,.35); backdrop-filter: blur(6px); }

/* Mobile menu: anchor to the right edge under the header */
@media (max-width: 880px) {
  .simple-nav { position: sticky; top: 0; }        /* שיהיה מגדיר מיקום לאבסולוט */
  .nav-menu {
    position: absolute;
    top: 100%;
    right: 12px;            /* עיגון לימין */
    left: auto;             /* חשוב: מבטל כללים קודמים של left:0/inset */
    width: min(280px, calc(100vw - 24px));
    padding: 12px 14px;
    margin: 0;
    list-style: none;
    background: rgba(16,24,24,.98);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
    transform: translateY(-8px);
    opacity: 0; pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    /* טקסט נשאר LTR לאנגלית; אם תרצה ימין-יישור: */
    /* text-align: right; */
  }
  :root[data-theme="light"] .nav-menu {
    background: rgba(255,255,255,.98);
    border-color: rgba(0,0,0,.08);
  }
  .nav-menu.open {
    opacity: 1; pointer-events: auto; transform: none;
  }

  /* שהכפתור יישב בקצה ימין */
  #menuBtn.icon-btn { 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; }                       /* ריווח מאוזן במובייל */
}