/* ═══════════════════════════════════════════════════════════
   TRAKVEN — refinements
   eyebrow · AI icons · premium clickable pillars · play button
   ═══════════════════════════════════════════════════════════ */

/* ── HERO EYEBROW (subtle, monochrome) ── */
.hero-eyebrow{padding:9px 18px;gap:10px}
.eb-cat{font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--ink-2);letter-spacing:.1px}
.eb-dot{width:3px;height:3px;border-radius:50%;background:var(--ink-3);opacity:.45}
@media(max-width:760px){
  .hero-eyebrow{flex-wrap:wrap;justify-content:center;row-gap:4px}
}

/* ── AI ICONS (real holographic bot) ── */
.trust-ic-img{width:20px;height:20px;object-fit:contain;vertical-align:-5px;
  filter:drop-shadow(0 1px 3px rgba(34,211,238,.4))}
.chip-ai-img{width:26px;height:26px;object-fit:contain;border-radius:9px;
  background:#172033;padding:2px;border:1px solid rgba(103,232,249,.4);
  box-shadow:0 2px 8px rgba(6,182,212,.25)}
.bn-ai .bn-ai-img{width:24px;height:24px;object-fit:contain}
.bn-item.bn-ai{background:#172033;border-radius:11px}

/* ── GOOGLE PLAY button: matches App Store + own shine ── */
.btn-play .btn-shine{animation-delay:2.2s}
.btn-play svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}

/* ── PREMIUM CLICKABLE PILLARS ── */
.pillars-row{gap:10px}
.pillar{position:relative;overflow:hidden;cursor:pointer;text-decoration:none;
  padding:22px 24px 18px;min-width:140px;isolation:isolate}
.pillar-glow{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s var(--ease);
  background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--p) 22%,transparent),transparent 70%)}
.pillar:hover{transform:translateY(-10px);border-color:color-mix(in srgb,var(--p) 45%,var(--line));
  box-shadow:0 22px 50px -16px color-mix(in srgb,var(--p) 35%,transparent)}
.pillar:hover .pillar-glow{opacity:1}
.pillar:hover .pillar-ic{transform:scale(1.08) rotate(-4deg);
  box-shadow:0 10px 24px -6px color-mix(in srgb,var(--p) 55%,transparent)}
.pillar-ic{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.pillar-go{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--p);
  height:0;margin-top:0;opacity:0;overflow:hidden;transform:translateY(4px);
  transition:height .3s var(--ease),margin-top .3s var(--ease),opacity .3s,transform .3s;
  text-transform:uppercase;letter-spacing:.4px}
.pillar-go ion-icon{font-size:12px}
.pillar:hover .pillar-go{height:14px;margin-top:9px;opacity:1;transform:none}
/* keep the row tidy: reserve space so hover doesn't shift layout */
.pillar-name{transition:color .3s}
.pillar:hover .pillar-name{color:var(--p)}
@media(max-width:760px){
  .pillar{min-width:96px;padding:16px 12px 14px}
  .pillar-go{display:none}
}