/* --- CSS RESET (lightweight) --- */
    *,*::before,*::after{box-sizing:border-box}
    html,body,h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd{margin:0}
    ul[role='list'],ol[role='list']{list-style:none}
    html:focus-within{scroll-behavior:smooth}
    body{min-height:100vh;text-rendering:optimizeLegibility;line-height:1.6}
    a:not([class]){text-decoration-skip-ink:auto}
    img, picture{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    @media (prefers-reduced-motion: reduce){ html:focus-within{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }

    /* --- THEME TOKENS --- */
    :root{
      --bg: #0b1220;         /* base-950 */
      --bg-soft: #0f172a;    /* slate-900 */
      --text: #e5e7eb;       /* gray-200 */
      --muted: #94a3b8;      /* slate-400 */
      --card: #111827aa;     /* glass */
      --accent: #0ea5e9;     /* sky-500 */
      --accent-2: #22d3ee;   /* cyan-400 */
      --border: #1f2937;     /* gray-800 */
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 18px;
      --maxw: 1100px;
      --fade-color: rgb(0, 0, 0);
      --background-color: rgba(0, 0, 0, 0.3);
      --timeline-background:#06080db3;
      --contact-field: #fcfcfc;

    }
    .light{
      --bg: #f8fafc;         /* slate-50 */
      --bg-soft: #ffffff;
      --text: #0f172a;        /* slate-900 */
      --muted: #475569;       /* slate-600 */
      --card: #ffffffcc;
      --accent: #0ea5e9;
      --accent-2: #0369a1;
      --border: #e2e8f0;
      --shadow: 0 10px 30px rgba(2, 6, 23, .08);
      --fade-color: rgba(255, 255, 255, 0.8);
      --background-color: rgba(255, 255, 255, 0.6);
      --timeline-background:#ffffffb3;
      --contact-field: #000000;


    }

    body{background: radial-gradient(1200px 600px at 10% -20%, #0ea5e910, transparent 60%), radial-gradient(900px 500px at 95% 10%, #22d3ee10, transparent 60%), var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";}

    /* --- LAYOUT --- */
    .wrap{max-width:var(--maxw); margin:0 auto; padding: 0 1.2rem}
    header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(1.3) blur(10px);background:linear-gradient(180deg, var(--bg-soft), transparent); border-bottom:1px solid var(--border)}
    .nav{display:flex;align-items:center;justify-content:space-between; gap:.5rem; padding: .8rem 0}
    .brand{display:flex;align-items:center;gap:.75rem;font-weight:800;letter-spacing:.2px}
    .brand .logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid;place-items:center;color:white; box-shadow: var(--shadow)}
    .nav a{color:var(--text); text-decoration:none; opacity:.9}
    .links{display:flex;gap:1rem;align-items:center}
    .links a{padding:.4rem .6rem;border-radius:10px;border:1px solid transparent}
    .links a:hover{border-color:var(--border);}
    .cta{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white !important; border:none !important}

    .theme-toggle{border:1px solid var(--border); background:var(--card); color:var(--text); padding:.4rem .6rem; border-radius:10px; cursor:pointer}

    main{display:grid;  }
    section{scroll-margin-top: 90px}

    /* --- HERO --- */
    .hero{display:grid; grid-template-columns: 1.3fr 1fr; gap:2rem; align-items:center}
    .kicker{color:var(--muted); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.8rem}
    h1{font-size:clamp(2.2rem, 4vw + 1rem, 4rem); line-height:1.1; letter-spacing:-.02em}
    .lead{font-size:1.1rem; color:var(--muted)}
    .hero-card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; box-shadow: var(--shadow)}
    .hero-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
    .stat{background:linear-gradient(180deg, #ffffff0a, #0000000a); border:1px solid var(--border); border-radius:16px; padding:1rem}
    .stat b{font-size:1.4rem}

    /* --- SECTIONS --- */
    .section-title{display:flex; align-items:baseline; justify-content:space-between; gap:1rem}
    .section-title h2{font-size:1.6rem}
    .muted{color:var(--muted)}

    /* --- PROJECTS --- */
    .toolbar{display:flex; flex-wrap:wrap; gap:.6rem}
    .chip{border:1px solid var(--border); background:var(--card); color:var(--text); padding:.45rem .7rem; border-radius:999px; cursor:pointer; font-size:.9rem}
    .chip[aria-pressed="true"], .chip.active{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:white;border-color:transparent}
    .search{flex:1; min-width:190px}
    .search input{width:100%; padding:.55rem .8rem; border-radius:10px; border:1px solid var(--border); background:var(--bg-soft); color:var(--text)}

    .grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:1.2rem}
    .card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; box-shadow: var(--shadow)}
    .thumb{aspect-ratio: 16/9; background: linear-gradient(135deg, #0ea5e920, #22d3ee20)}
    .card-body{padding:1rem; display:flex; flex-direction:column; gap:.6rem}
    .tags{display:flex; gap:.5rem; flex-wrap:wrap}
    .tag{font-size:.75rem; border:1px dashed var(--border); padding:.2rem .5rem; border-radius:999px; color:var(--muted)}
    .card-footer{display:flex; gap:.6rem; padding:1rem; padding-top:0; margin-top:auto}
    .btn{border:1px solid var(--border); background:var(--bg-soft); color:var(--text); padding:.5rem .8rem; border-radius:10px; text-decoration:none; text-align:center}
    .btn:hover{border-color:transparent; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:white}

    /* --- EXPERIENCE / SKILLS --- */
    .timeline{
    border-left: 2px solid #14a5d7;
    padding-left: 1rem;
    display: grid;
    gap: 1rem;
    background-color: var(--timeline-background);
    padding: 20px 7px;
    }
    .item{padding-left:.4rem}
    .item h3{font-size:1.1rem}
    .skills{display:flex; flex-wrap:wrap; gap:.6rem}
    .skill{border:1px solid var(--border); padding:.45rem .7rem; border-radius:999px; background:var(--card)}

    /* --- CONTACT --- */
    form{display:grid; gap:.8rem; max-width:680px}
    input, textarea{background:var(--bg-soft); border:1px solid var(--border); color:var(--text); padding:.8rem; border-radius:12px}
    textarea{min-height:140px}

    /* --- FOOTER --- */
    footer{border-top:1px solid var(--border); padding:2rem 0; color:var(--muted)}
    .foot{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}

    /* --- UTIL --- */
    .container{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem}
    .pill{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--border); padding:.4rem .6rem; border-radius:999px; background:var(--bg-soft); color:var(--muted); font-size:.85rem}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .reveal{opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease}
    .reveal.visible{opacity:1; transform:none}
    .top{position:fixed; right:1rem; bottom:1rem; border-radius:999px; padding:.7rem .9rem; border:1px solid var(--border); background:var(--card); box-shadow: var(--shadow)}

    
    /* --- RESPONSIVE --- */
    @media (max-width: 960px){
      .hero{grid-template-columns: 1fr}
      .hero-grid{grid-template-columns: 1fr 1fr}
      .grid{grid-template-columns: repeat(2, 1fr)}
    }
    @media (max-width: 640px){
      .links{display:none}
      .hero-grid{grid-template-columns: 1fr}
      .grid{grid-template-columns: 1fr}
    }

    .section-grid{
        display:grid; 
        grid-template-columns: 1fr; 
        align-items:center;
        align-items: center;
        align-content: center;
}

    

  .contact-card h2 {
    margin-top: 0;
    font-size: 20px;
    color: #fcfcfc;
    margin-bottom: 15px;
  }
  .contact-card p {
    margin: 8px 0;
    color: var(--contact-field);
    font-size: 16px;
  }
  .contact-card a {
    color: #1a73e8;
    text-decoration: none;
  }
  .contact-card a:hover {
    text-decoration: underline;
  }




    section#home-section,
    section#experience-section,
    section#about-section
    {
    position: relative;     
    width: 100%;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
    section#projects-section{
    position: relative;     
    width: 100%;
    min-height: 100vh;
    background-image: url('../source/backgrounds/mofreh3.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    background-attachment: fixed;
    }
    section#home-section {
        background-image: url('../source/backgrounds/mofreh4.png'); 
    }    
    section#projects-section {
        background-image: url('../source/backgrounds/mofreh2.png'); 
    }
    section#experience-section {
        background-image: url('../source/backgrounds/mofreh1.png'); 
    }    
    section#about-section {
        background-image: url('../source/backgrounds/mofreh3.png'); 
    }


    section#home-section::before,
    section#projects-section::before,
    section#experience-section::before,
    section#about-section::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(
    to bottom,
    var(--fade-color),   /* fade at top */
    transparent 50%,   /* clear middle */
    transparent 80%,   /* still clear */
    var(--fade-color)    /* fade at bottom */
    );
    z-index: 1;
}

    section#home-section::after,
    section#experience-section::after,
    section#projects-section::after,
    section#about-section::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--background-color); 
    z-index: 0;
    }

    div#home, div#experience, div#projects, div#about {
    min-height: 100vh;
    width: 100%;
    position: relative;
    z-index: 1; 
    }

    section#home-section,
    section#projects-section,
    section#experience-section,
    section#projects-section,
    section#about-section,
    section#contact-section   {
    padding: 6em 0;
    }


    .container {
  display: grid;
  grid-template-columns: 2fr 1fr; /* contact wider, profile narrower */
  gap: 1.5rem;
  align-items: center; /* vertically center */
  max-width: 100%;
  margin: 0 auto; /* center on page */
  padding: 2rem;
}

.contact-card, .profile-card {
  background: rgba(255,255,255,0.05); /* subtle background */
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    align-items: start;

}

.contact-card p {
  margin: 0.5rem 0;
  font-size: 1rem;
}

.profile-card img {
  width: 100%;
  max-width: 200px; 
  
  border-radius: 50%;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr; /* one column */
  }
  .profile-card {
    order: -1; /* make sure profile photo comes first */
    text-align: center;
  }
}