.tech-section{
  position:relative;
  padding: 48px 16px 72px;
  min-height:100vh;
  background:#f9f9f9;
  background-image:
    linear-gradient(to right, rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size:40px 40px;
  background-attachment: fixed;
}
.tech-container{max-width:1440px;margin:0 auto;padding:0 16px;}
.tech-title{
  text-align:center;
  font-size:clamp(24px, 2.8vw, 40px);
  font-weight:700;
  color:#111827;
  margin-bottom:32px;
  letter-spacing:.2px;
}

.tech-content{
  display:flex;
  flex-direction:column;
  gap:32px;
  align-items:center;
}
@media (min-width:1024px){
  .tech-content{flex-direction:row; gap:48px; align-items:flex-start;}
}

/* Left */
.tech-visual{flex:1; min-width:45%; position:relative; display:flex; flex-direction:column; align-items:center;}
.tech-image-wrap{position:relative; overflow:hidden;}
.tech-image{width:100%; max-width:480px; object-fit:contain; border-radius:14px; display:block;}
.tech-desc{
  position:absolute;
  left:50%;
  bottom:-56px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.95);
  border:1px solid #e5e7eb;
  color:#6b7280;
  border-radius:14px;
  padding:12px 16px;
  max-width:560px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  font-size:14px;
  line-height:1.6;
  text-align:center;
}
@media (max-width:640px){
  .tech-desc{bottom:-48px; font-size:13px;}
}

/* Right Tabs */
.tech-tabs{flex:1; width:100%; max-width:720px; display:flex; flex-direction:column; gap:12px; margin-top:64px;}
@media (min-width:1024px){ .tech-tabs{margin-top:0;} }

.tech-tab{
  width:100%;
  display:flex; align-items:center; gap:16px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid #e5e7eb;
  background:rgba(255,255,255,.7);
  color:#374151;
  text-align:left;
  cursor:pointer;
  transition:.25s ease;
}
.tech-tab:hover{ background:#f3f4f6; transform:translateX(2px); }
.tech-tab.active{
  background:#eff6ff;
  color:#2563eb;
  border-color:#bfdbfe;
}

.tech-progress{position:relative; width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;}
.ring{position:absolute; inset:0;}
.ring .bg{fill:none; stroke:#e5e7eb; stroke-width:3;}
.ring .fg{fill:none; stroke:#2563eb; stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset .1s linear;}
.icon{
  position:relative; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:#f3f4f6; color:#6b7280;
}
.tech-tab.active .icon{ background:#dbeafe; color:#2563eb; }

.label{font-size:14px; font-weight:600; letter-spacing:.2px;}