/* Tech Showcase Elementor – Styles (no H1, no stats band) */
.tse-wrapper{overflow:hidden}
.tse-wrapper .wrap{ max-width: 1200px; margin-inline:auto; padding: 48px 20px 64px }
.tse-wrapper .section{ margin-bottom: 28px }
.tse-wrapper .eyebrow{ display:block; text-align:center; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#0ea5e9; font-size:12px }
.tse-wrapper h2{ text-align:center; font-size: clamp(24px, 3vw, 36px); margin: 6px 0 10px }
.tse-wrapper h3{ font-size: clamp(18px, 2.2vw, 24px); margin: 0 0 8px }
.tse-wrapper .subtitle{ text-align:center; color:#475569; margin: 0 auto 20px; max-width: 760px }

.tse-wrapper .tabs{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:22px }
.tse-wrapper .tab{
  --c1:#7c3aed; --c2:#06b6d4;
  appearance:none; border:1px solid rgba(2,6,23,.08); background: var(--panel);
  color:#475569; font-weight:700; font-size:14px; letter-spacing:.2px; border-radius:999px;
  padding:10px 14px; display:inline-flex; align-items:center; gap:8px; cursor:pointer; position:relative;
  transition: all .22s ease; box-shadow: 0 10px 26px rgba(2,6,23,.10);
}
.tse-wrapper .tab:before{
  content:""; position:absolute; inset:0; border-radius:999px;
  background: linear-gradient(90deg, var(--c1), var(--c2));
  opacity:0; transition:opacity .22s ease;
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000,#000);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding:1px;
}
.tse-wrapper .tab[data-active="true"], .tse-wrapper .tab:hover{ color:#0f172a; background: #f6f7fb }
.tse-wrapper .tab[data-active="true"]::before{ opacity:1 }

.tse-wrapper .grid{ display:grid; gap:20px; grid-template-columns: repeat(5, minmax(0,1fr)); margin-bottom:36px }
@media (max-width: 1000px){ .tse-wrapper .grid{ grid-template-columns: repeat(4, minmax(0,1fr)) } }
@media (max-width: 760px){ .tse-wrapper .grid{ grid-template-columns: repeat(3, minmax(0,1fr)) } }
@media (max-width: 560px){ .tse-wrapper .grid{ grid-template-columns: repeat(2, minmax(0,1fr)) } }

.tse-wrapper .tech{ position:relative; border-radius: 16px; padding: 18px 14px 16px; text-align:center;
       background: var(--panel); border:1px solid rgba(2,6,23,.08); box-shadow: 0 10px 26px rgba(2,6,23,.10);
       transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.tse-wrapper .tech:hover{ transform: translateY(-4px) }
.tse-wrapper .logo-ring{ --size:62px; width:var(--size); height:var(--size); margin-inline:auto; border-radius: 18px; padding:3px; background: var(--ring); display:grid; place-items:center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22) }
.tse-wrapper .logo-core{ width:100%; height:100%; border-radius: 15px; display:grid; place-items:center; background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.65)) }
.tse-wrapper .logo-core svg{ width:28px; height:28px; stroke: #0f172a }
.tse-wrapper .tech h4{ margin:10px 0 2px; font-size:14px; letter-spacing:.2px; color:#0f172a }
.tse-wrapper .tag{ font-size:11px; color:#475569 }

/* full width WHY */
.tse-wrapper .why-bleed{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  background:
    radial-gradient(950px 450px at 15% 30%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(900px 520px at 85% 70%, rgba(16,185,129,.25), transparent 60%),
    radial-gradient(800px 500px at 50% 0%, rgba(236,72,153,.22), transparent 60%),
    linear-gradient(180deg, #f0f9ff, #fef2ff);
  border-top:1px solid rgba(2,6,23,.06);
  border-bottom:1px solid rgba(2,6,23,.06);
  padding: 42px 0;
  position:relative;
  overflow:hidden;
}
.tse-wrapper .why-inner{ max-width: 1200px; margin: 0 auto; padding: 0 20px }
.tse-wrapper .why-header{ text-align:center; margin-bottom:14px }
.tse-wrapper .why-header p{ color:#334155; max-width: 760px; margin: 6px auto 0 }

.tse-wrapper .why-grid{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:14px }
@media (max-width:1100px){ .tse-wrapper .why-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) } }
@media (max-width:720px){ .tse-wrapper .why-grid{ grid-template-columns: 1fr } }

.tse-wrapper .why-card{
  position:relative; isolation:isolate;
  border-radius: 16px; padding:16px 14px;
  background: var(--panel); border:1px solid rgba(2,6,23,.08); box-shadow: 0 10px 26px rgba(2,6,23,.10);
  transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.tse-wrapper .why-card::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; background: var(--ring);
  filter: blur(16px); opacity:0; transition: opacity .25s ease; z-index:-1;
}
.tse-wrapper .why-card:hover{ transform: translateY(-6px) rotateX(2deg) rotateY(-2deg); box-shadow: 0 16px 40px rgba(2,6,23,.18) }
.tse-wrapper .why-card:hover::after{ opacity:.28 }
.tse-wrapper .why-card:focus-within{ outline:3px solid rgba(59,130,246,.5); outline-offset:2px }

.tse-wrapper .why-card h3{ display:flex; align-items:center; gap:10px; margin:0 0 6px }
.tse-wrapper .dot{ width:24px; height:24px; border-radius:10px; display:grid; place-items:center; color:white; background: linear-gradient(135deg, #7c3aed, #06b6d4); transition: transform .25s ease }
.tse-wrapper .why-card:hover .dot{ transform: translateZ(18px) scale(1.1) rotate(8deg) }
.tse-wrapper .why-card p{ margin:0; color:#475569 }

.tse-wrapper .why-card .ripple{
  position:absolute; inset:0; pointer-events:none; border-radius:inherit; background: radial-gradient(350px 200px at var(--x,50%) var(--y,50%), rgba(99,102,241,.18), transparent 60%);
  opacity:0; transition: opacity .25s ease;
}
.tse-wrapper .why-card:hover .ripple{ opacity:1 }

.tse-wrapper .hint{ margin-top:8px; font-size:12px; color:#64748b; max-height:0; overflow:hidden; transition:max-height .25s ease }
.tse-wrapper .why-card:hover .hint, .tse-wrapper .why-card:focus-within .hint{ max-height:44px }

/* Trusted */
.tse-wrapper .trusted{ background: var(--panel); border:1px solid rgba(2,6,23,.08); border-radius: 18px; box-shadow: 0 10px 26px rgba(2,6,23,.10); padding:20px }
.tse-wrapper .logos{ display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap:18px; margin-top:12px }
@media (max-width:1000px){ .tse-wrapper .logos{ grid-template-columns: repeat(4, minmax(0,1fr)) } }
@media (max-width:760px){ .tse-wrapper .logos{ grid-template-columns: repeat(3, minmax(0,1fr)) } }
@media (max-width:520px){ .tse-wrapper .logos{ grid-template-columns: repeat(2, minmax(0,1fr)) } }
.tse-wrapper .logo{ aspect-ratio: 5/3; border:1px solid rgba(2,6,23,.08); border-radius:12px; background: #fff; display:grid; place-items:center; color:#94a3b8; font-weight:800; box-shadow: inset 0 1px 0 rgba(255,255,255,.8) }
.tse-wrapper .logo img{ max-width: 90%; max-height: 70%; object-fit: contain; filter: grayscale(1) opacity(.85) }

/* Width helpers */
.tse-wrapper.wrap-full, .tse-wrapper .wrap-full{ max-width: 100%; padding-left:0; padding-right:0 }
.tse-wrapper .wrap-boxed{ max-width: 1200px; margin-inline:auto; padding-left:20px; padding-right:20px }
.tse-wrapper .tse-tech.wrap-full .wrap, .tse-wrapper .tse-trusted.wrap-full .wrap{ max-width:100% }

/* Ensure H2/H3 style scoping */
.tse-wrapper .tse-tech h2, .tse-wrapper .why-bleed h2, .tse-wrapper .trusted h2{}
