/* ============================================================
   /tech — THE KIT reveal + THE LOADOUT, ported from the order forms
   (football/travel.digiwristtech.com, /var/www/az-digiwrist) and scoped
   under .tech so nothing collides with style.css. Mo6 2026-09-06.
   ============================================================ */
.tech{
  --bg:#0a1020; --bg2:#0c1428; --card:#111a30;
  --line:rgba(96,165,250,.14); --line2:rgba(96,165,250,.3);
  --txt:#e8eefc; --muted:#8da2c8; --dim:#5b6d94;
  --acc:#3b82f6; --hot:#60a5fa;
  --m:ui-monospace,'JetBrains Mono',SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(0.16,1,0.3,1);
  --clip:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  background:var(--bg);color:var(--txt);font-size:16px;line-height:1.6;overflow-x:hidden;
}
.tech *{box-sizing:border-box}
.tech img,.tech video{max-width:100%;display:block}
.tech .wrap{max-width:1120px;margin:0 auto;padding:0 20px;position:relative}
.tech h2,.tech h3{line-height:1.12;margin:0}
.tech h2{font-family:'Archivo Black','Arial Black',sans-serif;font-weight:400;font-size:clamp(26px,3.8vw,40px);letter-spacing:-.01em}
.tech section{padding:52px 0}
.tech .mono{font-family:var(--m);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--hot)}
.tech .mono .dim{color:var(--dim)}
.tech .sub{color:var(--muted);font-size:clamp(15.5px,1.9vw,18px);max-width:560px;margin:0}
.tech .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.tech .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.tech .rv{opacity:1;transform:none}}

/* the drop (kit reveal) */
.tech .armory{background:var(--bg2);border-bottom:1px solid var(--line);padding:28px 0 52px}
.tech .armory-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.tech .stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);overflow:hidden;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);box-shadow:0 30px 90px rgba(0,0,0,.55);background:#05080f}
.tech .stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px rgba(59,130,246,.14)}
.tech .stage video,.tech .stage>img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:center bottom}
.tech .stage>img{display:none}
.tech .stage.done video{display:none}
.tech .stage.done>img{display:block}
.tech .hs{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;cursor:pointer;background:transparent;border:0;opacity:0;pointer-events:none;transition:opacity .5s var(--ease);z-index:5;padding:0}
.tech .stage.done .hs{opacity:1;pointer-events:auto}
.tech .hs::before,.tech .hs::after{content:"";position:absolute;inset:0;border-radius:50%}
.tech .hs::before{border:2px solid var(--hot);background:rgba(59,130,246,.18);transform:scale(.42)}
.tech .hs::after{border:1.5px solid rgba(96,165,250,.8);animation:tech-pulse 2.2s var(--ease) infinite}
.tech .hs:hover::before,.tech .hs.on::before{background:rgba(59,130,246,.5)}
.tech .hs:focus-visible{outline:2px solid var(--hot);outline-offset:4px}
@keyframes tech-pulse{0%{transform:scale(.42);opacity:1}70%{transform:scale(1.15);opacity:0}100%{transform:scale(1.15);opacity:0}}
.tech .co-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s var(--ease) .25s}
.tech .stage.done .co-svg{opacity:1}
.tech .co-svg line{stroke:rgba(96,165,250,.55);stroke-width:1.2;vector-effect:non-scaling-stroke}
.tech .co-svg circle{fill:var(--hot)}
.tech .colab{position:absolute;z-index:6;font-family:var(--m);font-size:10.5px;font-weight:500;letter-spacing:.12em;color:var(--txt);background:rgba(10,16,32,.78);border:1px solid var(--line2);border-radius:99px;padding:5px 11px;opacity:0;transition:opacity .5s var(--ease) .4s,color .2s,border-color .2s;pointer-events:none;white-space:nowrap;backdrop-filter:blur(3px);cursor:pointer}
.tech .stage.done .colab{opacity:1;pointer-events:auto}
.tech .colab:hover{color:var(--hot);border-color:var(--acc)}
@media(max-width:700px){
.tech .stage video,.tech .stage>img{aspect-ratio:1/1}
.tech .co-svg{display:none}
.tech .colab{font-size:8.5px;padding:3px 7px;letter-spacing:.09em}
.tech .hs[data-item="tablet"]{left:45.8%!important;top:43.1%!important}
.tech .hs[data-item="tx"]{left:76.3%!important;top:53.5%!important}
.tech .hs[data-item="receiver"]{left:38.2%!important;top:65.3%!important}
.tech .hs[data-item="band"]{left:63.1%!important;top:68.8%!important}
.tech .hs[data-item="case"]{left:19.4%!important;top:79.2%!important}
.tech .colab[data-item="tablet"]{left:45.8%!important;top:43.1%!important;transform:translate(-50%,-36px)!important}
.tech .colab[data-item="tx"]{left:76.3%!important;top:53.5%!important;transform:translate(-70%,16px)!important}
.tech .colab[data-item="receiver"]{left:38.2%!important;top:65.3%!important;transform:translate(-50%,16px)!important}
.tech .colab[data-item="band"]{left:63.1%!important;top:68.8%!important;transform:translate(-50%,16px)!important}
.tech .colab[data-item="case"]{left:19.4%!important;top:79.2%!important;transform:translate(-25%,-36px)!important}
}
.tech .replay{position:absolute;right:14px;bottom:12px;z-index:5;display:none;font-family:var(--m);font-size:11px;letter-spacing:.1em;color:var(--muted);background:rgba(10,16,32,.75);border:1px solid var(--line2);border-radius:99px;padding:7px 14px;cursor:pointer;backdrop-filter:blur(4px)}
.tech .stage.done .replay{display:inline-flex}
.tech .replay:hover{color:var(--hot);border-color:var(--acc)}
.tech .spec{margin-top:16px;background:var(--card);border:1px solid var(--line2);border-radius:16px;padding:0;overflow:hidden;display:none;box-shadow:inset 0 1px 0 rgba(232,238,252,.06),0 20px 60px rgba(0,0,0,.35)}
.tech .spec.open{display:grid}
@media(min-width:860px){.tech .spec.open{grid-template-columns:1fr 1.15fr}}
.tech .spec-vis{background:#05080f;display:flex;align-items:center;justify-content:center;min-height:230px}
.tech .spec-vis video,.tech .spec-vis img{width:100%;height:100%;object-fit:contain;max-height:330px}
.tech .spec-body{padding:26px 28px}
.tech .spec-body .mono{margin-bottom:6px;display:block}
.tech .spec-body h3{font-size:23px;margin-bottom:6px}
.tech .spec-body p{color:var(--muted);font-size:15px;margin:0 0 16px}
.tech .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px}
.tech .stat .k{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tech .stat .v{font-weight:700;font-size:17px}
.tech .spec-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.tech .spec-nav button{font-family:var(--m);font-size:11px;letter-spacing:.08em;color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:99px;padding:7px 13px;cursor:pointer;transition:all .18s var(--ease)}
.tech .spec-nav button:hover,.tech .spec-nav button.on{color:var(--hot);border-color:var(--acc)}

/* gear grid (loadout) */
.tech .gear{display:grid;gap:16px;grid-template-columns:repeat(4,1fr);margin-top:26px}
@media(max-width:940px){.tech .gear{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tech .gear{grid-template-columns:1fr}}
.tech .gcard{position:relative;background:var(--card);border:1px solid var(--line2);clip-path:var(--clip);padding:14px 16px 18px;cursor:pointer;transition:transform .25s var(--ease),border-color .25s var(--ease);box-shadow:inset 0 1px 0 rgba(232,238,252,.06)}
.tech .gcard:hover,.tech .gcard.on{transform:translateY(-5px);border-color:rgba(96,165,250,.55)}
.tech .gimg{position:relative;height:190px;overflow:hidden;border-radius:8px;background:#05080f;margin-bottom:14px}
.tech .gimg img,.tech .gimg video{width:100%;height:100%;object-fit:cover}
.tech .gimg--contain video{object-fit:contain;background:#05080f}
.tech .gcard .mono{display:block}
.tech .gcard h3{font-size:18px;margin:4px 0 2px}
.tech .gcard .gsub{color:var(--dim);font-size:13px}
.tech .gspec{position:absolute;inset:14px 16px auto;top:14px;height:190px;background:rgba(7,12,26,.94);border:1px solid var(--line2);clip-path:var(--clip);padding:16px 18px;display:flex;flex-direction:column;justify-content:center;gap:9px;opacity:0;transform:translateY(14px);transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none;backdrop-filter:blur(3px)}
.tech .gcard:hover .gspec,.tech .gcard.on .gspec{opacity:1;transform:none}
.tech .grow{display:flex;justify-content:space-between;gap:12px;font-family:var(--m);font-size:11.5px;letter-spacing:.06em;opacity:0;transform:translateX(-8px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.tech .gcard:hover .grow,.tech .gcard.on .grow{opacity:1;transform:none}
.tech .gcard:hover .grow:nth-child(2),.tech .gcard.on .grow:nth-child(2){transition-delay:.05s}
.tech .gcard:hover .grow:nth-child(3),.tech .gcard.on .grow:nth-child(3){transition-delay:.1s}
.tech .gcard:hover .grow:nth-child(4),.tech .gcard.on .grow:nth-child(4){transition-delay:.15s}
.tech .gcard:hover .grow:nth-child(5),.tech .gcard.on .grow:nth-child(5){transition-delay:.2s}
.tech .grow .k{color:var(--dim);text-transform:uppercase}
.tech .grow .v{color:var(--txt);font-weight:700;text-align:right}
.tech .build-pic{margin-top:40px;border-radius:16px;overflow:hidden;border:1px solid var(--line2);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.tech .build-pic img{width:100%}

/* home page carries the loadout directly under the hero */
.tech--home #loadout{padding-top:44px}

/* ---- light variant (Romano 2026-09-06: hero dark, loadout LIGHT, Friday Nights dark, Every Pitch light, Join Winners dark) */
.tech--light{
  --bg:#f4f6fa; --bg2:#f4f6fa; --card:#ffffff;
  --line:rgba(5,116,188,.16); --line2:rgba(5,116,188,.32);
  --txt:#0a0a0a; --muted:#4a5568; --dim:#6b7a90;
  --acc:#0574bc; --hot:#0574bc;
}
.tech--light .gcard{box-shadow:0 10px 30px rgba(10,20,40,.08)}
.tech--light .gcard:hover,.tech--light .gcard.on{border-color:rgba(5,116,188,.6)}
.tech--light .gimg{background:#0b1220}
.tech--light .gspec{background:rgba(255,255,255,.96);border-color:var(--line2)}
.tech--light .grow .v{color:#0a0a0a}
.tech--light .grow .k{color:#6b7a90}
.tech--light .gtag{background:rgba(255,255,255,.9)}