/* ============================================================
   PRODUCTS — interactive section inside index.html
   Loads on top of style.css (shares :root tokens, nav, footer)
   ============================================================ */
#products{position:relative;overflow:hidden;
  background:radial-gradient(110% 120% at 82% 6%, #0f2748 0%, transparent 52%),#070f1e}
#products .sec-inner{position:relative;z-index:1}

/* ── intro split (text + orbit) ── */
.pl-intro{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-bottom:1rem}
.pl-pill{display:inline-block;background:rgba(37,99,235,0.08);color:var(--blue2);
  border:1px solid rgba(37,99,235,0.3);padding:6px 18px;border-radius:100px;
  font-size:0.7rem;letter-spacing:2.5px;font-weight:700;margin-bottom:1.3rem;text-transform:uppercase}
.pl-title{font-family:'Space Grotesk',sans-serif;font-size:clamp(2.1rem,3.6vw,3.1rem);
  font-weight:700;line-height:1.05;letter-spacing:-0.04em;color:#fff;margin-bottom:1.1rem}
.pl-title .hl{display:block;background:linear-gradient(100deg,#2f7ff0,#46c8f0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.pl-sub{font-size:0.98rem;color:var(--gray);line-height:1.8;max-width:34em}


/* ── EXPLORE BAR ── */
.pl-explore{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin-top:2.6rem;
  padding-top:2rem;border-top:1px solid rgba(255,255,255,0.06)}
.pl-explore-label{color:var(--cyan);font-size:0.72rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase}
.pl-tabs{display:flex;gap:0.55rem;flex-wrap:wrap}
.pl-tab{background:transparent;border:1px solid rgba(255,255,255,0.12);color:rgba(255,255,255,0.62);
  padding:9px 17px;border-radius:9px;font-size:0.8rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all 0.2s}
.pl-tab:hover{border-color:rgba(0,200,232,0.4);color:#fff}
.pl-tab.active{background:rgba(37,99,235,0.12);border-color:rgba(70,140,255,0.55);color:#6ba6ff}
.pl-search{position:relative;margin-left:auto;min-width:230px}
.pl-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:rgba(255,255,255,0.35)}
.pl-search input{width:100%;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;padding:11px 14px 11px 40px;color:#fff;font-size:0.86rem;font-family:inherit;outline:none;transition:border-color 0.2s,background 0.2s}
.pl-search input::placeholder{color:rgba(255,255,255,0.32)}
.pl-search input:focus{border-color:var(--cyan);background:rgba(0,200,232,0.04)}

/* ── PRODUCT CARDS (flex, centers trailing row) ── */
.pl-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.4rem;margin-top:2.2rem}
.pl-card{flex:1 1 270px;max-width:300px;display:flex;flex-direction:column;
  background:rgba(255,255,255,0.022);border:1px solid rgba(255,255,255,0.07);border-radius:18px;
  padding:1.7rem 1.6rem;transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s}
.pl-card:hover{transform:translateY(-5px);border-color:rgba(0,150,235,0.4);box-shadow:0 20px 50px rgba(0,0,0,0.4)}
.pl-card.hidden{display:none}
.plc-logo{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.3rem;
  background:linear-gradient(160deg,#ffffff,#eef2f8);box-shadow:0 6px 18px rgba(0,0,0,0.35);overflow:hidden}
.plc-logo img{width:80%;height:80%;object-fit:contain}
.plc-logo.svg-chip svg{width:30px;height:30px}
.plc-name{font-family:'Space Grotesk',sans-serif;font-size:1.35rem;font-weight:700;color:#fff;letter-spacing:-0.02em}
.plc-cat{font-size:0.8rem;color:rgba(255,255,255,0.5);margin-top:2px;margin-bottom:1rem}
.plc-desc{font-size:0.85rem;color:var(--gray);line-height:1.62;margin-bottom:1.2rem}
.plc-feats{list-style:none;display:flex;flex-direction:column;gap:0.55rem;margin:0 0 1.2rem;
  padding-bottom:1.2rem;border-bottom:1px solid rgba(255,255,255,0.07)}
.plc-feats li{display:flex;align-items:center;gap:9px;font-size:0.83rem;color:rgba(255,255,255,0.78)}
.plc-feats svg{flex:0 0 auto;width:16px;height:16px}
.plc-link{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:0.85rem;font-weight:700;text-decoration:none}
.plc-link svg{width:15px;height:15px;transition:transform 0.25s}
.plc-link:hover svg{transform:translateX(4px)}
.pl-empty{flex:1 1 100%;text-align:center;color:var(--gray);padding:2.5rem 0;font-size:0.95rem;display:none}

/* accent themes */
.pl-card.t-blue    .plc-link,.pl-card.t-blue    .plc-feats svg{color:#46a6ff}
.pl-card.t-green   .plc-link,.pl-card.t-green   .plc-feats svg{color:#f3c537}
.pl-card.t-magenta .plc-link,.pl-card.t-magenta .plc-feats svg{color:#c98bff}
.pl-card.t-cyan    .plc-link,.pl-card.t-cyan    .plc-feats svg{color:#9d8bff}
.pl-card.t-teal    .plc-link,.pl-card.t-teal    .plc-feats svg{color:#34d6b0}
.pl-card.t-magenta .plc-logo.svg-chip svg{color:#a13bd6}
.pl-card.t-teal    .plc-logo.svg-chip svg{color:#0d9488}

/* ── PRODUCTS CTA ── */
.pl-cta{margin-top:2.4rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  padding:1.7rem 2.1rem;border-radius:18px;
  background:linear-gradient(120deg,rgba(13,31,60,0.6),rgba(10,20,40,0.5));border:1px solid rgba(255,255,255,0.07)}
.pl-cta .plt-icon{flex:0 0 auto;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;color:#cfe8ff;
  background:radial-gradient(circle at 32% 30%,rgba(45,120,220,0.28),rgba(10,30,70,0.25));border:1px solid rgba(90,160,255,0.3)}
.pl-cta .plt-icon svg{width:30px;height:30px}
.pl-cta .plt-text{flex:1;min-width:220px}
.pl-cta .plt-text h3{font-family:'Space Grotesk',sans-serif;font-size:1.22rem;font-weight:700;color:#fff;margin-bottom:.25rem}
.pl-cta .plt-text p{font-size:0.87rem;color:var(--gray)}
.pl-cta .plt-btn{display:inline-flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--blue2),var(--cyan2));
  color:#fff;padding:14px 28px;border-radius:11px;text-decoration:none;font-weight:700;font-size:0.9rem;transition:transform .2s,box-shadow .2s}
.pl-cta .plt-btn svg{width:16px;height:16px;transition:transform .2s}
.pl-cta .plt-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,99,235,.4)}
.pl-cta .plt-btn:hover svg{transform:translateX(3px)}

/* ── RESPONSIVE ── */
@media(max-width:960px){
  .pl-intro{grid-template-columns:1fr;gap:1rem}
  .pl-orbit{order:-1;height:300px}
  .pl-search{margin-left:0;width:100%}
}
@media(max-width:600px){
  .pl-card{max-width:none}
  .pl-orbit{height:260px}
  .pl-cta{flex-direction:column;align-items:flex-start}
  .pl-cta .plt-btn{width:100%;justify-content:center}
}

/* Ghive deep green card chip */
.plc-logo.green{background:#021f19;border:1px solid rgba(240,200,60,0.35);box-shadow:0 6px 18px rgba(0,0,0,0.4)}
.plc-logo.green img{width:100%;height:100%;object-fit:contain}


/* ============================================================
   ORBIT OF APPS (hero art): four tiles on a glowing ring
   ============================================================ */
.pl-orbit{position:relative;height:340px;width:100%;max-width:600px;margin:0 auto;min-width:0}
.pl-orbit svg.orbit-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pl-tile{position:absolute;width:118px;height:118px;border-radius:22px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;text-align:center;padding:12px;overflow:hidden;
  background:linear-gradient(160deg,#ffffff,#e8eef6);
  border:1px solid rgba(255,255,255,0.5);box-shadow:0 18px 50px rgba(0,0,0,0.55);
  animation:plFloat 6s ease-in-out infinite}
.pl-tile img{width:64%;max-width:96px;max-height:96px;height:auto;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.pl-tile .tl{font-size:0.58rem;font-weight:800;letter-spacing:1.5px;color:#0a2348;text-transform:uppercase}
@keyframes plFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.pl-tile.automob{width:118px;height:118px;left:1%;top:33%}
.pl-tile.skoolax{width:118px;height:118px;left:27%;top:3%;animation-delay:1.4s;
  border-color:rgba(120,180,255,0.6);box-shadow:0 18px 56px rgba(40,110,230,0.4)}
.pl-tile.ghive{width:118px;height:118px;left:53%;top:3%;animation-delay:2s;
  background:#021f19;border-color:rgba(240,200,60,0.5);
  box-shadow:0 18px 52px rgba(2,25,18,0.6)}
.pl-tile.ghive .tl{color:#f3c537}
.pl-tile.ghive img{width:86%}
.pl-tile.hustle{width:118px;height:118px;right:1%;top:33%;animation-delay:2.6s;
  background:linear-gradient(160deg,#13391f,#0c2415);border-color:rgba(240,200,60,0.45)}
.pl-tile.hustle .tl{color:#f3c537}
.pl-tile.hustle img{width:82%}

@media(max-width:960px){
  .pl-orbit{height:280px;max-width:480px}
  .pl-tile{border-radius:18px}
  .pl-tile.automob,.pl-tile.skoolax,.pl-tile.ghive,.pl-tile.hustle{width:96px;height:96px}
}
@media(prefers-reduced-motion:reduce){
  .pl-tile{animation:none!important}
}