/* ═══════════════════════════════════════
   VARIABLES
═══════════════════════════════════════ */
:root {
  --bg:        #0D1117;
  --bg2:       #13181F;
  --bg3:       #161B22;
  --border:    #30363D;
  --accent:    #58A6FF;
  --green:     #3FB950;
  --orange:    #F78166;
  --purple:    #BC8CFF;
  --text:      #E6EDF3;
  --muted:     #8B949E;
  --tag-bg:    #1C2333;
  --shadow:    rgba(0,0,0,0.5);
  --t:         0.3s ease;
  --font-mono: 'Space Mono', monospace;
  --font:      'Sora', sans-serif;
}

/* ═══════════════════════════════════════
   RESET
═══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:62.5%; }
body { font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.6; overflow:hidden; }
body.revealed { overflow-y:auto; overflow-x:hidden; }
a { text-decoration:none; }
img { max-width:100%; }
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg2); }
::-webkit-scrollbar-thumb { background:var(--accent); border-radius:3px; }

/* ═══════════════════════════════════════
   SCROLL PROGRESS
═══════════════════════════════════════ */
.scroll-progress {
  position:fixed; top:0; left:0; height:3px;
  background:linear-gradient(90deg, var(--accent), var(--green));
  width:0%; z-index:9999;
  transition:width 0.1s linear;
}

/* ═══════════════════════════════════════
   INTRO
═══════════════════════════════════════ */
.intro-overlay {
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  z-index:3000; transition:opacity 0.8s ease;
}
.intro-overlay.hidden { opacity:0; pointer-events:none; }
.intro-content { text-align:center; }
.intro-logo {
  width:100px; height:100px; border-radius:50%;
  border:3px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:3rem; font-weight:700;
  color:var(--accent); margin:0 auto 2rem;
  animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%,100% { box-shadow:0 0 20px rgba(88,166,255,0.2); }
  50%      { box-shadow:0 0 50px rgba(88,166,255,0.5); }
}
.intro-sub { font-size:1.4rem; color:var(--text); margin-bottom:0.8rem; font-weight:600; }
.intro-desc { font-size:1.2rem; color:var(--muted); margin-bottom:2.5rem; letter-spacing:1px; }
.intro-btn {
  display:inline-flex; align-items:center; gap:1rem;
  padding:1.2rem 2.8rem; background:var(--accent); color:var(--bg);
  border:none; border-radius:40px;
  font-size:1.4rem; font-weight:700; font-family:var(--font);
  cursor:pointer; transition:var(--t);
}
.intro-btn:hover { background:#79BAFF; transform:translateY(-3px); }

/* ═══════════════════════════════════════
   NAME ANIMATION
═══════════════════════════════════════ */
.name-animation {
  position:fixed; inset:0; background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  z-index:2000; transition:transform 1s ease-in-out;
}
.name-animation.hide { transform:translateY(-100vh); }
.name-text { display:flex; gap:0.5rem; }
.name-text span {
  font-family:var(--font-mono); font-size:6rem; font-weight:700; color:var(--text);
  animation:glow 2s ease-in-out infinite;
}
.name-text span:nth-child(1){animation-delay:0s}
.name-text span:nth-child(2){animation-delay:.12s}
.name-text span:nth-child(3){animation-delay:.24s}
.name-text span:nth-child(4){animation-delay:.36s}
.name-text span:nth-child(5){animation-delay:.48s}
.name-text span:nth-child(6){animation-delay:.6s}
@keyframes glow {
  0%,100% { color:var(--text); text-shadow:none; }
  50% { color:var(--accent); text-shadow:0 0 15px var(--accent), 0 0 30px var(--accent); }
}

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(13,17,23,0.92); backdrop-filter:blur(12px);
  display:flex; align-items:center; justify-content:space-between;
  padding:1.6rem 5%; border-bottom:1px solid var(--border);
  transition:var(--t);
}
header.scrolled { box-shadow:0 4px 20px rgba(0,0,0,0.4); }
.logo { font-family:var(--font-mono); font-size:1.8rem; font-weight:700; color:var(--text); }
.logo span { color:var(--accent); }
.navbar { display:flex; gap:2.5rem; }
.navbar a {
  font-size:1.3rem; color:var(--muted); font-weight:500;
  position:relative; transition:color var(--t);
}
.navbar a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:2px; background:var(--accent); transition:width var(--t);
}
.navbar a:hover, .navbar a.active { color:var(--accent); }
.navbar a:hover::after, .navbar a.active::after { width:100%; }
#menuIcon {
  display:none; background:none; border:none;
  color:var(--accent); font-size:2rem; cursor:pointer;
}

/* ═══════════════════════════════════════
   REVEAL ON SCROLL
═══════════════════════════════════════ */
.reveal {
  opacity:0; transform:translateY(30px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ═══════════════════════════════════════
   SECTIONS
═══════════════════════════════════════ */
section { padding:9rem 5%; }
.heading { text-align:center; font-size:3.5rem; font-weight:700; margin-bottom:5rem; }
.heading span { color:var(--accent); }

/* ═══════════════════════════════════════
   HOME
═══════════════════════════════════════ */
.home {
  min-height:100vh; display:flex; align-items:center;
  justify-content:space-between; gap:4rem; padding-top:10rem;
}
.home-content { flex:1; }
.home-greeting {
  font-family:var(--font-mono); font-size:1.3rem;
  color:var(--green); margin-bottom:1rem; letter-spacing:1px;
}
.home h1 { font-size:4.5rem; font-weight:700; margin-bottom:1.5rem; line-height:1.1; }
.home h1 span { color:var(--accent); }
.text-animate h3 {
  font-size:2.2rem; color:var(--text); display:flex;
  align-items:center; gap:0.8rem; margin-bottom:2rem;
}
.dynamic-text { color:var(--accent); font-weight:700; }
.cursor {
  color:var(--accent); font-weight:300;
  animation:blink 0.8s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.home-desc { font-size:1.5rem; color:var(--muted); max-width:520px; line-height:1.8; margin-bottom:3rem; }

/* STATS */
.stats-row {
  display:flex; align-items:center; gap:2rem;
  margin-bottom:3rem;
  padding:2rem 2.5rem;
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:12px;
  width:fit-content;
}
.stat-item { text-align:center; }
.stat-number {
  display:block; font-family:var(--font-mono);
  font-size:2.8rem; font-weight:700; color:var(--accent);
}
.stat-label { font-size:1.1rem; color:var(--muted); }
.stat-divider { width:1px; height:40px; background:var(--border); }

/* SOCIAL */
.social-icons { display:flex; gap:1.5rem; margin-bottom:2.5rem; }
.social-icons a {
  width:44px; height:44px; background:var(--bg3);
  border:1px solid var(--border); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:var(--muted); transition:var(--t);
}
.social-icons a:hover {
  background:var(--accent); color:var(--bg);
  border-color:var(--accent); transform:translateY(-4px);
}

/* BUTTONS */
.btn-container { display:flex; gap:1.5rem; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; gap:0.8rem;
  padding:1.2rem 2.8rem; background:var(--accent); color:var(--bg);
  border:2px solid var(--accent); border-radius:40px;
  font-size:1.4rem; font-weight:600; font-family:var(--font);
  cursor:pointer; transition:var(--t);
}
.btn:hover { background:transparent; color:var(--accent); transform:translateY(-3px); }
.btn-outline {
  background:transparent; color:var(--accent);
}
.btn-outline:hover { background:var(--accent); color:var(--bg); }

/* HOME IMAGE — CIRCLE */
.home-img { flex:1; display:flex; justify-content:center; }
.img-wrapper { position:relative; width:340px; height:340px; }
.img-circle {
  width:300px; height:300px; border-radius:50%;
  overflow:hidden; border:3px solid var(--accent);
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  box-shadow:0 0 40px rgba(88,166,255,0.2);
  z-index:2;
}
.img-circle img { width:100%; height:100%; object-fit:cover; object-position:center top; }
.img-ring {
  position:absolute; border-radius:50%; border:1px solid;
  top:50%; left:50%; transform:translate(-50%,-50%);
  animation:spin 10s linear infinite;
}
.ring1 { width:330px; height:330px; border-color:rgba(88,166,255,0.3); }
.ring2 { width:360px; height:360px; border-color:rgba(63,185,80,0.2); animation-direction:reverse; animation-duration:15s; }
@keyframes spin { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }
.img-dot {
  position:absolute; border-radius:50%; z-index:3;
}
.dot1 { width:14px; height:14px; background:var(--accent); top:20px; right:30px; animation:float 3s ease-in-out infinite; }
.dot2 { width:10px; height:10px; background:var(--green); bottom:30px; left:20px; animation:float 3s ease-in-out infinite 1.5s; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.img-badge {
  position:absolute; bottom:0; right:-10px; z-index:4;
  background:var(--bg3); border:1px solid var(--accent);
  border-radius:30px; padding:0.8rem 1.4rem;
  display:flex; align-items:center; gap:0.6rem;
  font-size:1.2rem; color:var(--accent); font-weight:600;
  box-shadow:0 4px 20px rgba(88,166,255,0.2);
}

/* ═══════════════════════════════════════
   SKILLS
═══════════════════════════════════════ */
.skills-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:2.5rem;
}
.skill-category {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:14px; padding:2.5rem;
  transition:var(--t);
}
.skill-category:hover { border-color:var(--accent); transform:translateY(-4px); }
.skill-cat-header { display:flex; align-items:center; gap:1.2rem; margin-bottom:1.8rem; }
.skill-cat-icon { font-size:2.2rem; }
.skill-cat-header h3 { font-size:1.6rem; font-weight:600; }
.skill-tags { display:flex; flex-wrap:wrap; gap:0.8rem; }
.skill-tag {
  font-size:1.1rem; padding:0.4rem 1.1rem;
  border-radius:20px; border:1px solid; background:var(--tag-bg);
  font-weight:500; transition:var(--t);
}
.skill-tag:hover { transform:translateY(-2px); }
.skill-tag.accent { color:var(--accent); border-color:var(--accent); }
.skill-tag.green  { color:var(--green);  border-color:var(--green); }
.skill-tag.orange { color:var(--orange); border-color:var(--orange); }
.skill-tag.purple { color:var(--purple); border-color:var(--purple); }
.skill-tag.muted  { color:var(--muted);  border-color:var(--border); }

/* ═══════════════════════════════════════
   PROJECTS
═══════════════════════════════════════ */
.projects { background:var(--bg2); }
.projects-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:2.5rem;
}
.project-card {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:14px; padding:2.5rem;
  position:relative; overflow:hidden;
  transition:var(--t);
}
.project-card:hover { transform:translateY(-6px); box-shadow:0 12px 40px rgba(0,0,0,0.4); }
.project-accent {
  position:absolute; top:0; left:0;
  width:4px; height:100%; border-radius:14px 0 0 14px;
}
.project-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; }
.project-icon { font-size:2.4rem; }
.project-badge {
  font-size:1.1rem; padding:0.4rem 1rem;
  border:1px solid; border-radius:20px;
  background:var(--tag-bg);
  display:flex; align-items:center; gap:0.5rem;
}
.badge-dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
.green-badge  { color:var(--green);  border-color:var(--green); }
.orange-badge { color:var(--orange); border-color:var(--orange); }
.accent-badge { color:var(--accent); border-color:var(--accent); }
.project-card h3 { font-size:2rem; font-weight:700; margin-bottom:1rem; }
.project-desc { font-size:1.3rem; color:var(--muted); line-height:1.7; margin-bottom:1.8rem; }
.project-tags { display:flex; flex-wrap:wrap; gap:0.7rem; }

/* ═══════════════════════════════════════
   PARCOURS
═══════════════════════════════════════ */
.parcours-container {
  display:flex; gap:12px; overflow-x:auto;
  padding:1rem 0.5rem; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}
.parcours-container::-webkit-scrollbar { height:5px; }
.parcours-container::-webkit-scrollbar-thumb { background:rgba(88,166,255,0.4); border-radius:3px; }
.education-card {
  position:relative; min-width:200px; height:320px;
  border-radius:14px; overflow:hidden; cursor:pointer;
  flex:0 0 auto; border:1px solid var(--border);
  transition:all 0.4s ease; outline:none;
}
.education-card.active { flex:0 0 380px; }
.education-card .background { width:100%; height:100%; object-fit:cover; filter:brightness(0.5); transition:var(--t); }
.education-card.active .background { filter:brightness(0.85); }
.backdrop {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
}
.card-content {
  position:absolute; bottom:20px; left:20px; right:20px;
  opacity:0; transform:translateY(15px);
  transition:all 0.4s ease 0.1s;
}
.education-card.active .card-content { opacity:1; transform:translateY(0); }
.school-logo {
  width:50px; height:50px; border-radius:50%;
  background:rgba(88,166,255,0.15);
  border:2px solid var(--accent);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1rem; font-size:1.8rem; color:var(--accent);
}
.card-title { font-size:2rem; font-weight:700; margin-bottom:0.4rem; }
.card-subtitle { font-size:1.2rem; color:var(--accent); margin-bottom:0.6rem; }
.card-description { font-size:1.2rem; color:rgba(255,255,255,0.75); line-height:1.5; }

/* ═══════════════════════════════════════
   SERVICES
═══════════════════════════════════════ */
.services-container {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:2.5rem;
}
.service-box {
  padding:3rem 2.5rem; background:var(--bg3);
  border:1px solid var(--border); border-radius:14px;
  text-align:center; cursor:pointer;
  transition:var(--t);
}
.service-box:hover { border-color:var(--accent); transform:translateY(-8px); box-shadow:0 10px 30px rgba(88,166,255,0.1); }
.service-box i { font-size:3.5rem; color:var(--accent); margin-bottom:1.5rem; display:block; }
.service-box h3 { font-size:1.8rem; font-weight:600; margin-bottom:1rem; }
.service-box p { font-size:1.3rem; color:var(--muted); line-height:1.6; }

/* ═══════════════════════════════════════
   CONTACT
═══════════════════════════════════════ */
.contact { background:var(--bg2); }
.contact-wrapper {
  display:grid; grid-template-columns:1fr 2fr;
  gap:4rem; max-width:1000px; margin:0 auto;
}
.contact-info { display:flex; flex-direction:column; gap:2.5rem; justify-content:center; }
.contact-item { display:flex; align-items:center; gap:1.5rem; }
.contact-item i { font-size:2rem; color:var(--accent); width:45px; height:45px; background:var(--bg3); border:1px solid var(--border); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.contact-label { display:block; font-size:1.1rem; color:var(--muted); }
.contact-val { display:block; font-size:1.3rem; color:var(--text); font-weight:500; }
.input-box { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:1.5rem; }
.input-field input, .text-field textarea {
  width:100%; padding:1.4rem 1.6rem;
  background:var(--bg3); border:1px solid var(--border);
  border-radius:10px; color:var(--text);
  font-size:1.4rem; font-family:var(--font);
  outline:none; transition:var(--t);
}
.input-field input:focus, .text-field textarea:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(88,166,255,0.1);
}
.input-field input::placeholder, .text-field textarea::placeholder { color:var(--muted); }
.text-field textarea { resize:none; height:140px; margin-bottom:1.5rem; }
#submitBtn { width:100%; justify-content:center; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:4rem 5%; text-align:center;
}
.footer-nav { display:flex; justify-content:center; flex-wrap:wrap; gap:2rem; margin:2rem 0; }
.footer-nav a { font-size:1.3rem; color:var(--muted); transition:color var(--t); }
.footer-nav a:hover { color:var(--accent); }
.credit { font-size:1.2rem; color:var(--muted); }
.credit span { color:var(--accent); }

/* ═══════════════════════════════════════
   MODAL
═══════════════════════════════════════ */
.modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  display:none; align-items:center; justify-content:center;
  z-index:4000; padding:2rem;
}
.modal-backdrop.active { display:flex; }
.modal {
  background:var(--bg3); border:1px solid var(--border);
  border-radius:14px; padding:3rem; max-width:480px; width:100%;
}
.modal h3 { font-size:2rem; color:var(--accent); margin-bottom:1rem; }
.modal p { font-size:1.4rem; color:var(--muted); margin-bottom:2rem; line-height:1.6; }
.modal-actions { display:flex; gap:1rem; justify-content:flex-end; }

/* ═══════════════════════════════════════
   CV LOADER
═══════════════════════════════════════ */
.cv-loader {
  position:fixed; inset:0; background:rgba(13,17,23,0.9);
  display:none; align-items:center; justify-content:center;
  z-index:5000; flex-direction:column; gap:2rem;
}
.cv-loader.active { display:flex; }
.cv-loader-box { text-align:center; }
.cv-loader-spinner {
  width:60px; height:60px; border-radius:50%;
  border:3px solid var(--border);
  border-top-color:var(--accent);
  animation:spin2 0.8s linear infinite;
  margin:0 auto 1.5rem;
}
@keyframes spin2 { to { transform:rotate(360deg); } }
.cv-loader-box p { font-size:1.5rem; color:var(--muted); }

/* ═══════════════════════════════════════
   SCROLL TO TOP
═══════════════════════════════════════ */
.scroll-top {
  position:fixed; bottom:3rem; right:3rem;
  width:48px; height:48px; border-radius:50%;
  background:var(--accent); color:var(--bg);
  border:none; font-size:1.6rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:var(--t); z-index:200;
  box-shadow:0 4px 20px rgba(88,166,255,0.3);
}
.scroll-top.visible { opacity:1; pointer-events:auto; }
.scroll-top:hover { transform:translateY(-4px); background:#79BAFF; }

/* ═══════════════════════════════════════
   NOTIFICATIONS
═══════════════════════════════════════ */
.notif {
  position:fixed; top:2rem; right:2rem;
  padding:1.4rem 2rem; border-radius:10px;
  font-size:1.4rem; font-weight:500;
  z-index:6000; animation:slideIn 0.3s ease;
  max-width:320px;
}
.notif.success { background:#1a3a1c; border:1px solid var(--green); color:var(--green); }
.notif.error   { background:#3a1a1a; border:1px solid var(--orange); color:var(--orange); }
.notif.info    { background:#1a2a3a; border:1px solid var(--accent); color:var(--accent); }
@keyframes slideIn { from{transform:translateX(400px);opacity:0} to{transform:translateX(0);opacity:1} }

/* ═══════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════ */
@media (max-width:991px) {
  html { font-size:55%; }
  .home { flex-direction:column; text-align:center; padding-top:12rem; }
  .home-desc { margin:0 auto 3rem; }
  .btn-container, .social-icons { justify-content:center; }
  .stats-row { margin:0 auto 3rem; }
  .contact-wrapper { grid-template-columns:1fr; gap:3rem; }
}
@media (max-width:768px) {
  #menuIcon { display:block; }
  .navbar {
    position:absolute; top:100%; left:0; width:100%;
    padding:2rem 5%; background:rgba(13,17,23,0.98);
    border-top:1px solid var(--border);
    flex-direction:column; gap:1.5rem;
    display:none;
  }
  .navbar.active { display:flex; }
  .home h1 { font-size:3.5rem; }
  .input-box { grid-template-columns:1fr; }
  .img-wrapper { width:260px; height:260px; }
  .img-circle { width:230px; height:230px; }
  .ring1 { width:255px; height:255px; }
  .ring2 { width:280px; height:280px; }
}
@media (max-width:520px) {
  html { font-size:50%; }
  .name-text span { font-size:5rem; }
  .stats-row { flex-direction:column; gap:1.5rem; }
  .stat-divider { width:40px; height:1px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}