/* Ported 1:1 from components/Technologies/index.tsx's Tailwind classes
   (rem values below match Tailwind's defaults: text-sm=.875rem,
   mb-5=1.25rem, gap-6=1.5rem, etc.) into the theme's plain-CSS convention. */

.tech-root{position:relative;background:#0a0a0a;padding:128px 0;overflow:hidden;}
@media(min-width:768px){.tech-root{padding:176px 0;}}

.tech-head{position:relative;max-width:1280px;margin:0 auto 80px;padding:0 24px;}
@media(min-width:768px){.tech-head{padding:0 40px;}}

.tech-eyebrow{color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.28em;
  text-transform:uppercase;margin-bottom:20px;}

.tech-head-row{display:flex;flex-direction:column;gap:32px;}
@media(min-width:768px){
  .tech-head-row{flex-direction:row;align-items:flex-end;justify-content:space-between;}
}

.tech-h{color:#fff;font-weight:900;letter-spacing:-.04em;line-height:1.05;
  font-size:clamp(36px,7vw,57.6px);}
.tech-h span{color:#fff;}

.tech-intro{color:#fff;font-size:.875rem;line-height:1.625;max-width:320px;}

.tech-panels{position:relative;max-width:1280px;margin:0 auto 96px;padding:0 24px;
  display:grid;grid-template-columns:1fr;gap:24px;}
@media(min-width:768px){.tech-panels{padding:0 40px;}}
@media(min-width:1024px){.tech-panels{grid-template-columns:1fr 1fr;}}

.tech-card{position:relative;display:flex;flex-direction:column;height:100%;
  padding:36px;border-radius:16px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);overflow:hidden;
  transition:border-color .5s,background-color .5s;}
@media(min-width:768px){.tech-card{padding:48px;}}
.tech-card:hover{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.05);}

.tech-card-scanline{position:absolute;top:0;left:36px;right:36px;height:1px;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.4),transparent);
  opacity:0;transition:opacity .7s;}
@media(min-width:768px){.tech-card-scanline{left:48px;right:48px;}}
.tech-card:hover .tech-card-scanline{opacity:1;}

.tech-badge{color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;margin-bottom:24px;}

.tech-name{color:#fff;font-weight:900;letter-spacing:-.03em;margin-bottom:12px;
  font-size:clamp(30px,4vw,36px);}

.tech-tagline{color:#fff;font-weight:600;font-size:.95rem;margin-bottom:20px;}

.tech-desc{color:#fff;font-size:.875rem;line-height:1.625;margin-bottom:40px;flex:1;}

.tech-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  padding-top:28px;border-top:1px solid rgba(255,255,255,.07);}

.tech-spec-value{color:#fff;font-weight:900;letter-spacing:-.025em;
  font-size:clamp(20px,2.4vw,24px);}
.tech-spec-unit{color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;margin-top:4px;}