:root{
  --primary-color:#ff4757;          /* site-wide red */
  --bg-color:#0d0f17;
  --text-color:#e1e3e8;
  --font:'Poppins',sans-serif;
  --header-height:70px;

  /* hex spotlight */
  --mx:50vw;
  --my:50vh;
  --spot-size:320px;

  /* about photo */
  --about-photo-max: 380px;

  /* timeline */
  --timeline-center: 70%;            /* moved line & dots slightly right */

  /* DARKER / HIGHER CONTRAST cards & chips */
  --tile-bg:#0f1422;
  --tile-border:rgba(255,255,255,.14);
  --tile-hover:#131a2b;
  --panel-bg:rgba(12,15,24,.98);
  --panel-border:rgba(255,255,255,.16);
}

/* base */
html{scroll-behavior:smooth;scroll-padding-top:var(--header-height)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg-color);color:var(--text-color)}

/* ===== GLOBAL HEX BACKGROUND ===== */
#hex-grid{position:fixed;inset:0;z-index:-2;pointer-events:none}
#hex-grid .grid{position:absolute;inset:0;background-image:url("grid.svg");background-repeat:repeat;background-size:520px}
#hex-grid .grid-base{opacity:.28;filter:contrast(1.05) brightness(.75);background-color:#0b0d14}
#hex-grid .grid-color{
  background-image:
    linear-gradient(rgba(255,20,20,.95),rgba(255,20,20,.95)),
    url("grid.svg");
  background-size:520px,520px;background-repeat:repeat,repeat;background-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(circle var(--spot-size) at var(--mx) var(--my),rgba(0,0,0,1) 0%,rgba(0,0,0,0) 72%);
          mask-image:radial-gradient(circle var(--spot-size) at var(--mx) var(--my),rgba(0,0,0,1) 0%,rgba(0,0,0,0) 72%);
  filter:contrast(1.5) brightness(.65) saturate(1.8) drop-shadow(0 14px 22px rgba(0,0,0,.45));
}

/* ===== SECTIONS ===== */
.section{
  padding:calc(var(--header-height) + 1rem) 2rem 1.5rem;
  opacity:1 !important;
  position:relative;z-index:1
}
.section-hero{min-height:100vh;display:flex;align-items:center;justify-content:center;background:rgba(13,15,23,.6)}
.section:not(.section-hero)::before{
  pointer-events:none;
}

/* === About section should be bright like Experience === */
#about::before{ background:none; }               /* remove dark scrim only here */
.about-container{position:relative;z-index:2;}   /* stay above any overlay */

.container{max-width:1100px;margin:auto}

/* keep key blocks above scrim */
.skills-list li,.project-card,.edu-card,.exp-card,#contact form,.about-left p{position:relative;z-index:1}

/* ===== HEADER ===== */
header{
  position:fixed;top:0;left:0;right:0;height:var(--header-height);
  background:rgba(13,15,23,.95);backdrop-filter:saturate(120%) blur(4px);
  display:flex;align-items:center;z-index:1000;border-bottom:1px solid rgba(255,255,255,.08)
}
.header-inner{width:100%;max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 1rem}
header nav ul{list-style:none;display:flex;gap:1.5rem}
header nav a{color:var(--text-color);text-decoration:none;font-weight:600}
header nav a:hover{color:var(--primary-color)}
.contact-inline{display:flex;gap:.5rem;align-items:center;font-size:.9rem;opacity:.95;flex-wrap:wrap}
.contact-inline .dot{opacity:.4}
.contact-inline a{color:#dfe3ea;text-decoration:none}
.contact-inline a:hover{color:var(--primary-color)}

/* ===== HERO ===== */
.hero-content{text-align:center;padding:2rem;position:relative;z-index:2}
#hero h1{font-size:3rem;margin-bottom:1rem}
#hero h1 span{color:var(--primary-color)}
.hero-buttons{margin-top:1.5rem}
.btn{
  display:inline-block;padding:.75rem 1.5rem;background:var(--primary-color);color:#fff;border-radius:8px;
  text-decoration:none;font-weight:700;margin:0 .5rem;
  transition:transform .15s ease, box-shadow .15s ease, background .3s;
  box-shadow:0 10px 24px rgba(255,71,87,.18)
}
.btn:hover{background:#e74c3c;transform:translateY(-2px);box-shadow:0 16px 30px rgba(255,71,87,.25)}
.btn-outline{background:transparent;border:2px solid var(--primary-color)}

/* ===== ABOUT / SKILLS ===== */
.about-container{display:grid;grid-template-columns:minmax(280px,520px) 1fr;gap:2rem;align-items:start}
.about-left img{
  width:100%;height:auto;max-height:var(--about-photo-max);object-fit:cover;border-radius:12px;display:block;
  position:relative;z-index:2;filter:none;                    /* brighter photo */
  box-shadow:0 18px 42px rgba(0,0,0,.6);
}
.about-left p{
  margin-top:.75rem;background:var(--panel-bg);padding:1rem;border-radius:12px;
  border:1px solid var(--panel-border);
  box-shadow:0 14px 40px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 2px rgba(255,71,87,.06)
}
.about-right h2{margin-bottom:.5rem}

/* SKILLS section titles – uniform bright red */
.about-right .skill-group h4{
  color:#ff4757 !important;
  opacity:1 !important;
  mix-blend-mode:normal !important;
  filter:none !important;
  text-shadow:none !important;
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  display:block;
  font-weight:800;
  font-size:clamp(1.15rem,1.6vw,1.35rem);
  margin:.25rem 0 .6rem;
}
.skill-group{margin-bottom:1.1rem}

/* skills chips */
.skills-list{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:.65rem;
}
.skills-list li{
  background:var(--tile-bg);
  border:1px solid var(--tile-border);
  box-shadow:0 8px 18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,71,87,.05);
  padding:.75rem .8rem;
  border-radius:12px;
  text-align:center;
  font-weight:700;
  letter-spacing:.2px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.skills-list li:hover{
  transform:translateY(-2px);
  background:var(--tile-hover);
  box-shadow:0 14px 26px rgba(0,0,0,.7);
}

/* ===== EDUCATION ===== */
.edu-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem}
.edu-card{
  background:var(--panel-bg);padding:1.1rem;border-radius:14px;border:1px solid var(--panel-border);
  box-shadow:0 16px 38px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 2px rgba(255,71,87,.06)
}
.edu-top{display:grid;grid-template-columns:90px 1fr;gap:1rem;align-items:center}
.edu-img{width:90px;height:90px;border-radius:12px;overflow:hidden;background:#0f1219;display:grid;place-items:center;border:1px solid rgba(255,255,255,.08)}
.edu-img img{width:100%;height:100%;object-fit:cover}
.edu-card h3{color:var(--primary-color);margin-bottom:.25rem}
.courses{margin-top:.6rem}
.courses h5{margin-bottom:.25rem;opacity:.85}
/* Courses as a standard vertical bulleted list */
/* Two-column list with custom dots */
.courses ul{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:.35rem 1rem;
}
.courses li{
  position:relative;
  padding-left:1rem;        /* space for the custom dot */
}
.courses li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.6em;                /* aligns to text midline */
  width:.35em;
  height:.35em;
  border-radius:50%;
  background:var(--primary-color);
}



/* ===== EXPERIENCE — TIMELINE ===== */
/* Wider cards, more spacing, line shifted right via --timeline-center */
.timeline{position:relative;padding:1rem 0 0}
.timeline-line{
  position:absolute;left:var(--timeline-center);top:0;bottom:0;width:6px;transform:translateX(-50%);
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.1));
  border-radius:6px;box-shadow:0 0 12px rgba(255,255,255,.25) inset; z-index:1;
}
.timeline-item{position:relative;margin:4rem 0} /* more vertical space */

/* circle stays visible above card */
.timeline-dot{
  position:absolute;left:var(--timeline-center);top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;
  background:var(--bg-color);
  border:4px solid #fff;
  box-shadow:0 0 0 6px rgba(255,255,255,.14), 0 0 18px rgba(255,255,255,.25);
  z-index:3;
}

/* date inline to the right of the circle */
.timeline-date{
  position:absolute;
  left:calc(var(--timeline-center) + 28px);
  top:50%;
  transform:translateY(-50%);
  white-space:nowrap;
  font-weight:800;
  font-size:clamp(1rem,2.2vw,1.4rem);
  color:#cfd3dc;
  z-index:2;
}

/* card on the left, now wider due to shifted center */
.timeline-card.exp-card{
  width: clamp(420px, calc(var(--timeline-center) - 72px), 920px);
  margin: 0 auto 0 0; /* align left */
  background:var(--panel-bg);
  border:1px solid var(--panel-border);
  border-radius:16px;
  box-shadow:0 18px 42px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 2px rgba(255,71,87,.06);
  padding:1rem;display:flex;gap:1rem;align-items:flex-start;position:relative;z-index:2;
}
.logo-frame{
  width:96px;height:96px;border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--panel-border);display:grid;place-items:center;position:relative;overflow:hidden;flex:0 0 auto
}
.logo-frame img{width:100%;height:100%;object-fit:contain;background:#0f1219}
.logo-placeholder{position:absolute;color:#9aa0ac;font-size:.9rem;letter-spacing:.5px}
.exp-content h3{color:var(--primary-color);margin-bottom:.15rem}
.exp-content h4{opacity:.9;margin-bottom:.45rem}
.exp-content ul{padding-left:1.1rem;display:grid;gap:.35rem}

/* mobile timeline */
@media (max-width:820px){
  .timeline-line{left:24px;transform:none;width:4px}
  .timeline-dot{left:24px;transform:translate(-50%,-50%)}
  .timeline-date{left:52px;font-size:1rem}
  .timeline-card.exp-card{width:auto;margin-left:44px}
}

/* ===== PROJECTS ===== */
.projects-shell{width:min(1400px,95vw);margin:0 auto}
.projects-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
@media (max-width:820px){.projects-grid{grid-template-columns:1fr}}

.project-card{
  background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 16px 38px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 2px rgba(255,71,87,.06)
}
.project-thumb{width:100%;height:220px;object-fit:cover;display:block;background:#0f1219}
.project-body{padding:1rem;display:flex;flex-direction:column;gap:.5rem}
.project-body h3{color:var(--primary-color)}
.project-body a{color:var(--primary-color);font-weight:600;text-decoration:none}

/* ===== CONTACT ===== */
#contact{text-align:center}
#contact h2{margin-bottom:1rem}
#contact form{
  background:var(--panel-bg);border:1px solid var(--panel-border);max-width:600px;margin:auto;padding:1.25rem;border-radius:14px;display:grid;gap:.75rem;
  box-shadow:0 16px 38px rgba(0,0,0,.72), inset 0 0 0 1px rgba(255,255,255,.06), inset 0 0 0 2px rgba(255,71,87,.06)
}
#contact input,#contact textarea{background:#101523;border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:.85rem;color:#fff;font-family:var(--font)}
#contact button{background:var(--primary-color);border:none;padding:.85rem;border-radius:8px;font-weight:700;cursor:pointer;box-shadow:0 10px 24px rgba(255,71,87,.18)}
#contact button:hover{background:#e74c3c}
.form-status{margin-top:.25rem;opacity:.9}

/* CONTACT – simple details list under the form */
.contact-simple{
  max-width:1100px;
  margin:2.5rem auto 0;   /* more space below the form */
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  text-align:left;
}
@media (max-width:900px){
  .contact-simple{ grid-template-columns:1fr; }
}

.cs-col{display:grid;gap:.9rem}
.cs-row{
  display:grid;
  grid-template-columns:28px 120px 1fr;
  align-items:center;
  gap:.5rem;
  padding:.45rem 0;
}
.cs-ico{
  font-size:1.2rem;
  line-height:1;
  color:var(--primary-color);
}
.cs-label{
  font-weight:800;
  color:#ffffff;          /* bright white */
}
.cs-val,
.cs-val a{
  color:#ffffff;          /* pure bright white like project text */
  font-weight:500;
  text-decoration:none;
}
.cs-val a:hover{
  color:var(--primary-color);
}

.contact-actions{
  margin-top:2rem;
  display:flex;
  justify-content:center;
}


/* ===== FOOTER ===== */
.footer{position:relative;background:#000;color:#fff;margin-top:2rem;overflow:hidden;border-top:1px solid rgba(255,255,255,.06)}
.footer .wave{display:block;width:100%;height:140px}
.footer-inner{padding:1.25rem 1rem 1.75rem;display:grid;place-items:center;gap:1rem}
.socials{display:flex;gap:1rem}
.icon{color:#000;background:#fff;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;transition:transform .2s ease,opacity .2s ease}
.icon:hover{transform:translateY(-2px);opacity:.9}
.copy{opacity:.85}

/* small screens fallback for card layout (not timeline) */
@media (max-width:640px){
  .exp-card{grid-template-columns:1fr; text-align:left}
  .logo-frame{width:80px;height:80px}
}