:root{
  --teal-900:#024241;
  --teal-800:#053c3b;
  --teal-700:#0a5251;
  --teal-600:#0e6a68;
  --line:#d6e5e3;
  --amber:#024241;
  --amber-soft:rgba(2,66,65,.08);
  --cyan:#0e6a68;
  --text:#04201f;
  --muted:#5c7a78;
  --green:#0e9c72;
  --white:#ffffff;
}
.tpi-wrap, .tpi-wrap *{box-sizing:border-box;}
.tpi-wrap{
  color:var(--text);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  position:relative;
  max-width:1240px;
  margin:0 auto;
  padding:0 28px;
  z-index:1;
}
.tpi-wrap h3{ font-family:'Rajdhani',sans-serif; letter-spacing:.02em; }

/* blueprint grid backdrop */
.grid-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(2,66,65,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,66,65,.06) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 50% 0%, black, transparent 75%);
}

/* grid */
.tpi-wrap .grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:28px;
  padding:40px 0 120px;
  align-items:start;
}
@media(max-width:980px){ .tpi-wrap .grid{ grid-template-columns:repeat(2,1fr);} }
@media(max-width:640px){ .tpi-wrap .grid{ grid-template-columns:1fr; padding:24px 0 60px; } }

.tpi-wrap .card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 4px 16px -8px rgba(2,66,65,.12);
  opacity:0; transform:translateY(36px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1),
             border-color .35s ease, box-shadow .35s ease;
}
.tpi-wrap .card.in{ opacity:1; transform:translateY(0); }
.tpi-wrap .card:hover{
  border-color:rgba(2,66,65,.45);
  box-shadow:0 18px 40px -18px rgba(2,66,65,.35), 0 0 0 1px rgba(2,66,65,.1), 0 0 30px -8px rgba(2,66,65,.18);
}
.tpi-wrap .card:hover .terminal{ background:var(--teal-900); box-shadow:0 0 10px rgba(2,66,65,.6); }
.tpi-wrap .card:hover .media img{ transform:scale(1.06); }
.tpi-wrap .card:hover .scan{ opacity:1; }

/* corner terminal nodes - electrical motif */
.tpi-wrap .terminal{
  position:absolute; width:8px; height:8px; border-radius:50%;
  background:var(--muted); opacity:.6; transition:all .35s ease; z-index:3;
}
.tpi-wrap .terminal.tl{ top:12px; left:12px; }
.tpi-wrap .terminal.tr{ top:12px; right:12px; }

.tpi-wrap .media{
  position:relative; height:300px; overflow:hidden;
  background:radial-gradient(circle at 50% 40%, rgba(2,66,65,.08), transparent 70%), #f4f9f8;
  border-bottom:1px solid var(--line);
}
.tpi-wrap .media img{
  width:100%; height:100%; object-fit:contain; padding:8px;
  transition:transform .6s cubic-bezier(.16,.8,.3,1);
  filter:drop-shadow(0 10px 18px rgba(2,66,65,.18));
}
@media(max-width:640px){ .tpi-wrap .media{ height:230px; } }

.tpi-wrap .scan{
  position:absolute; inset:0; opacity:0; transition:opacity .4s ease;
  background:linear-gradient(180deg, transparent, rgba(2,66,65,.10), transparent);
  background-size:100% 220%;
  animation:tpiScan 2.6s linear infinite;
  pointer-events:none;
}

.tpi-wrap .body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.tpi-wrap .body .cta-wrap{ margin-top:auto; padding-top:6px; }

.tpi-wrap .card h3{ font-size:21px; font-weight:700; margin:12px 0 12px; color:var(--teal-900); line-height:1.2; }

.tpi-wrap .specs{ list-style:none; margin:0 0 8px; padding:0; display:flex; flex-direction:column; gap:9px; }
.tpi-wrap .specs li{
  position:relative; padding-left:18px; font-size:13.5px; line-height:1.5; color:var(--muted);
}
.tpi-wrap .specs li::before{
  content:''; position:absolute; left:0; top:6px; width:7px; height:7px;
  border:1.5px solid var(--cyan); border-radius:2px; transform:rotate(45deg);
}
.tpi-wrap .specs li.extra{ display:none; }
.tpi-wrap .card.expanded .specs li.extra{ display:block; }

.tpi-wrap .read-more{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal-700); margin-bottom:18px;
}
.tpi-wrap .read-more svg{ width:12px; height:12px; transition:transform .3s ease; }
.tpi-wrap .card.expanded .read-more svg{ transform:rotate(180deg); }
.tpi-wrap .read-more:hover{ color:var(--teal-900); }

/* CTA — centered + oval (pill) shape */
.tpi-wrap .cta-wrap{
  display:flex;
  justify-content:center;
}
.tpi-wrap .cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--white); background:var(--teal-900);
  padding:12px 30px; border-radius:999px; text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  box-shadow:0 8px 20px -8px rgba(2,66,65,.45);
  width:100%;
  max-width:220px;
}
.tpi-wrap .cta:hover{ background:var(--teal-700); transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(2,66,65,.55); }
.tpi-wrap .cta svg{ width:14px; height:14px; transition:transform .25s ease; }
.tpi-wrap .cta:hover svg{ transform:translateX(3px); }

@keyframes tpiPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes tpiScan{ 0%{ background-position:0 -120%; } 100%{ background-position:0 120%; } }

@media (prefers-reduced-motion: reduce){
  .tpi-wrap .card{ transition:none; opacity:1; transform:none; }
  .tpi-wrap .scan{ animation:none; }
}