/* =========================================================
   EXPERIENCE — PREMIUM SECTION
   ========================================================= */

.experience-head{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:40px;
  align-items:end;
  margin-bottom:34px;
}

.experience-head .section-title{
  margin-bottom:0;
  flex-wrap:wrap;
}

.experience-intro{
  max-width:760px;
  margin:0;
  color:#9db3c7;
  font-size:12px;
  line-height:1.85;
}

.experience-grid{
  grid-template-columns:1.18fr .55fr 1.15fr !important;
  gap:30px !important;
  align-items:center !important;
}

.experience-timeline{
  padding-left:34px !important;
}

.experience-timeline::before{
  left:10px !important;
  width:1px !important;
  background:linear-gradient(
    180deg,
    rgba(42,226,255,.05),
    #2ae2ff 18%,
    #5278ff 68%,
    rgba(82,120,255,.08)
  ) !important;
  box-shadow:0 0 12px rgba(42,226,255,.14);
}

.experience-item{
  margin-bottom:18px !important;
}

.experience-item:last-child{
  margin-bottom:0 !important;
}

.experience-item .timeline-dot{
  left:-31px !important;
  top:22px !important;
  width:13px !important;
  height:13px !important;
  border:3px solid #061c35 !important;
  background:#2ae2ff !important;
  box-shadow:
    0 0 0 4px rgba(42,226,255,.06),
    0 0 16px rgba(42,226,255,.45) !important;
}

.experience-item.current-role .timeline-dot{
  background:#39e6aa !important;
  box-shadow:
    0 0 0 4px rgba(57,230,170,.06),
    0 0 18px rgba(57,230,170,.48) !important;
}

.experience-card{
  position:relative;
  padding:20px 20px 18px;
  overflow:hidden;
  border:1px solid rgba(90,164,215,.12);
  border-radius:15px;
  background:
    linear-gradient(145deg,rgba(8,28,52,.78),rgba(3,16,32,.84));
  box-shadow:
    0 15px 34px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.018);
  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

.experience-card::before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  bottom:16px;
  width:2px;
  border-radius:4px;
  background:linear-gradient(#2ae2ff,#5278ff);
  opacity:.6;
}

.experience-card:hover{
  transform:translateX(5px);
  border-color:rgba(42,226,255,.26);
  box-shadow:
    0 20px 42px rgba(0,0,0,.16),
    0 0 28px rgba(42,226,255,.045);
}

.experience-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px;
}

.experience-meta small{
  color:#76dfff !important;
  font:700 9px "JetBrains Mono",monospace;
  letter-spacing:.7px;
}

.experience-status,
.experience-stage{
  font-size:6px;
  letter-spacing:1px;
  font-weight:800;
  color:#718da5;
  padding:5px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.05);
  background:rgba(255,255,255,.02);
}

.experience-status{
  display:flex;
  align-items:center;
  gap:5px;
  color:#75e8bd;
  border-color:rgba(57,230,170,.12);
  background:rgba(57,230,170,.035);
}

.experience-status i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:#39e6aa;
  box-shadow:0 0 8px rgba(57,230,170,.6);
}

.experience-card h4{
  margin:0 0 7px !important;
  font-size:18px !important;
  color:#edf9ff;
  letter-spacing:-.25px;
}

.experience-company{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
  color:#7ca8c4;
  font-size:9px;
  font-weight:600;
}

.experience-company i{
  color:#4dcfff;
}

.experience-card p{
  margin:0 !important;
  color:#9fb3c6 !important;
  font-size:10.5px !important;
  line-height:1.75 !important;
}

.experience-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:13px;
}

.experience-tags span{
  padding:5px 7px;
  border-radius:999px;
  border:1px solid rgba(74,174,230,.10);
  background:rgba(42,226,255,.025);
  color:#7aa8c5;
  font-size:6.5px;
  letter-spacing:.35px;
  transition:.2s ease;
}

.experience-card:hover .experience-tags span{
  border-color:rgba(42,226,255,.18);
  color:#93c9e7;
}

/* Stats */
.experience-stats{
  gap:11px !important;
}

.experience-stat{
  min-height:100px;
  position:relative;
  padding:15px !important;
  overflow:hidden;
  border-radius:13px !important;
  border:1px solid rgba(75,157,211,.12) !important;
  background:
    linear-gradient(145deg,rgba(7,28,51,.82),rgba(3,16,31,.88)) !important;
  transition:transform .25s ease,border-color .25s ease !important;
}

.experience-stat:hover{
  transform:translateY(-4px);
  border-color:rgba(42,226,255,.24) !important;
}

.experience-stat > i{
  position:absolute;
  right:12px;
  top:12px;
  color:#2ae2ff;
  opacity:.33;
  font-size:17px;
}

.experience-stat strong{
  color:#f0fbff !important;
  font-size:27px !important;
  line-height:1;
  margin-bottom:8px;
}

.experience-stat span{
  display:block;
  max-width:130px;
  color:#718ba3 !important;
  font-size:7.5px !important;
  line-height:1.45;
  text-transform:uppercase;
  letter-spacing:.55px;
}

/* Developer visual */
.experience-scene{
  height:360px !important;
  border:1px solid rgba(42,185,241,.09);
  border-radius:20px;
  background:
    radial-gradient(circle at 50% 32%,rgba(42,226,255,.07),transparent 38%),
    linear-gradient(180deg,rgba(7,25,48,.38),rgba(2,12,25,.2));
  overflow:hidden;
}

.experience-scene::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(72,166,215,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,166,215,.025) 1px,transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
}

.experience-scene-label{
  position:absolute;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:7px;
  color:#607f99;
  font-size:6px;
  letter-spacing:1.3px;
  white-space:nowrap;
}

.experience-scene-label i{
  width:3px;
  height:3px;
  border-radius:50%;
  background:#2ae2ff;
  box-shadow:0 0 7px rgba(42,226,255,.5);
}

.experience-scene .main-monitor{
  border-radius:11px !important;
}

.experience-scene .main-monitor > span{
  position:absolute;
  left:14px;
  top:12px;
  font-size:10px;
}

.experience-scene .main-monitor small{
  position:absolute;
  right:12px;
  bottom:9px;
  color:#557b98;
  font-size:6px;
  letter-spacing:.5px;
}

.experience-scene .m1,
.experience-scene .m2,
.experience-scene .m3,
.experience-scene .m4{
  display:flex !important;
  flex-direction:column;
  gap:5px;
}

.experience-scene .monitor i{
  font-size:16px;
}

.experience-scene .monitor span{
  font-size:7px;
}

.experience-scene .m1 i{color:#ff6a3d}
.experience-scene .m2 i{color:#2f8fff}
.experience-scene .m3 i{color:#8388ff}
.experience-scene .m4 i{color:#31c6ff}

.scene-badge{
  position:absolute;
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 9px;
  border-radius:999px;
  border:1px solid rgba(76,181,235,.12);
  background:rgba(4,20,39,.78);
  backdrop-filter:blur(9px);
  color:#87aeca;
  font-size:7px;
  box-shadow:0 10px 22px rgba(0,0,0,.15);
  animation:experienceBadgeFloat 4.5s ease-in-out infinite;
}

.scene-badge i{
  font-size:12px;
  color:#50cfff;
}

.sb-wordpress{
  right:16px;
  top:88px;
}

.sb-wordpress i{
  color:#52b8ff;
}

.sb-server{
  left:14px;
  bottom:75px;
  animation-delay:1.2s;
}

.sb-server i{
  color:#39e6aa;
}

@keyframes experienceBadgeFloat{
  50%{transform:translateY(-6px)}
}

/* Responsive */
@media(max-width:1100px){
  .experience-head{
    grid-template-columns:1fr;
    gap:10px;
  }

  .experience-grid{
    grid-template-columns:1.2fr .55fr !important;
  }

  .experience-scene{
    grid-column:1/-1;
    max-width:620px;
    width:100%;
    margin:0 auto;
  }
}

@media(max-width:767px){
  .experience-grid{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  .experience-head{
    margin-bottom:24px;
  }

  .experience-intro{
    font-size:11px;
  }

  .experience-timeline{
    padding-left:30px !important;
  }

  .experience-item .timeline-dot{
    left:-27px !important;
  }

  .experience-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .experience-scene{
    grid-column:auto;
    height:330px !important;
  }
}

@media(max-width:480px){
  .experience-card{
    padding:17px 16px 16px;
  }

  .experience-card h4{
    font-size:16px !important;
  }

  .experience-card p{
    font-size:9.8px !important;
  }

  .experience-stats{
    grid-template-columns:1fr 1fr;
  }

  .experience-stat{
    min-height:94px;
  }

  .experience-scene{
    height:300px !important;
  }

  .scene-badge{
    display:none;
  }
}

@media(hover:none),(pointer:coarse){
  .experience-card:hover,
  .experience-stat:hover{
    transform:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .scene-badge{
    animation:none !important;
  }
}