/* ============================================================
   RANKRIX — HERO TECH STACK ORB (TechFlow, vanilla)
   Floating tech tiles + live detail panel. No pricing.
   ============================================================ */
.rkxtf{
  --tf-bg:rgba(255,255,255,.045);
  --tf-brd:rgba(255,255,255,.12);
  --tf-brd-hi:rgba(255,255,255,.22);
  --tf-ink:#fff; --tf-soft:rgba(255,255,255,.74); --tf-dim:rgba(255,255,255,.48);
  position:relative; width:100%;
  background:rgba(7,9,18,.42); border:1px solid var(--tf-brd);
  border-radius: 1px; padding:22px;
  backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25);
  box-shadow:0 30px 80px -40px rgba(0,0,0,.8);
}
.rkxtf__head{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:16px}
.rkxtf__eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display,'Poppins',sans-serif);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#fff}
.rkxtf__dot{width:8px; height:8px; border-radius:50%; background:#1D24CA; box-shadow:0 0 10px #1D24CA; animation:rkxtfPulse 2.2s ease-in-out infinite}
.rkxtf__hint{font-size:11.5px; color:var(--tf-dim); font-family:var(--font-display,'Poppins',sans-serif); letter-spacing:.04em}

/* grid of tiles */
.rkxtf__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.rkxtf__tile{
  position:relative; display:flex; flex-direction:column; gap:8px; align-items:flex-start;
  padding:13px 12px; background:var(--tf-bg); border:1px solid var(--tf-brd);
  border-radius: 1px; cursor:pointer; text-align:left; color:#fff;
  transition:border-color .3s, transform .3s, box-shadow .3s, background .3s;
  animation:rkxtfBob 4s ease-in-out infinite; animation-delay:var(--d,0s); will-change:transform;
}
.rkxtf__tile:hover{transform:translateY(-6px)}
.rkxtf__tile.on{
  border-color:var(--c); background:color-mix(in srgb,var(--c) 12%,transparent);
  box-shadow:0 0 0 1px var(--c), 0 16px 40px -16px var(--c);
  transform:translateY(-6px) scale(1.03); animation-play-state:paused;
}
.rkxtf__badge{width:34px; height:34px; display:grid; place-items:center; border-radius: 1px;
  background:rgba(255,255,255,.05); transition:background .3s}
.rkxtf__tile.on .rkxtf__badge{background:color-mix(in srgb,var(--c) 18%,transparent)}
.rkxtf__badge img{width:60%; height:60%; object-fit:contain; display:block;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 60%,transparent))}
.rkxtf__name{font-size:12.5px; font-weight:600; color:#fff; line-height:1}
.rkxtf__ring{position:absolute; inset:0; border-radius: 1px; pointer-events:none; opacity:0;
  background:radial-gradient(110px 70px at 80% 0%, color-mix(in srgb,var(--c) 30%,transparent), transparent 60%);
  transition:opacity .3s}
.rkxtf__tile.on .rkxtf__ring{opacity:.6}

/* detail card */
.rkxtf__detail{position:relative; margin-top:14px; padding:18px; overflow:hidden;
  background:rgba(255,255,255,.035); border:1px solid var(--tf-brd); border-radius: 1px;
  --c:#1D24CA}
.rkxtf__detail-glow{position:absolute; inset:0; pointer-events:none; opacity:.85;
  background:radial-gradient(260px 170px at 100% 0%, color-mix(in srgb,var(--c) 55%,transparent), transparent 62%)}
.rkxtf__detail-top{display:flex; gap:13px; align-items:center; position:relative; margin-bottom:14px}
.rkxtf__detail-badge{width:44px; height:44px; display:grid; place-items:center; border-radius: 1px;
  background:rgba(255,255,255,.06); border:1px solid var(--c); flex:0 0 auto}
.rkxtf__detail-badge img{width:58%; height:58%; object-fit:contain;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 75%,transparent))}
.rkxtf__detail-name{font-family:var(--font-display,'Poppins',sans-serif); font-size:20px; font-weight:600; color:var(--c); line-height:1.1}
.rkxtf__detail-sub{font-size:12.5px; color:var(--tf-dim); margin-top:2px}
.rkxtf__adv{list-style:none; padding:0; margin:0 0 14px; display:grid; grid-template-columns:1fr 1fr; gap:7px 16px; position:relative}
.rkxtf__adv li{font-size:12.5px; color:var(--tf-soft); padding-left:16px; position:relative; line-height:1.3}
.rkxtf__adv li::before{content:'›'; position:absolute; left:0; color:var(--c); font-weight:700}
.rkxtf__fit{display:flex; flex-wrap:wrap; gap:6px; position:relative}
.rkxtf__fit span{font-size:11px; padding:4px 9px; border-radius: 1px; background:rgba(255,255,255,.05);
  border:1px solid var(--tf-brd); color:var(--tf-dim)}

@keyframes rkxtfBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes rkxtfPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
@keyframes rkxtfMorph{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rkxtf__detail.is-swap{animation:rkxtfMorph .4s ease}

@media (prefers-reduced-motion:reduce){
  .rkxtf__tile{animation:none}
  .rkxtf__dot{animation:none}
  .rkxtf__detail.is-swap{animation:none}
}

/* responsive */
@media (max-width:1100px){ .rkxtf__grid{grid-template-columns:repeat(4,1fr)} }
@media (max-width:560px){
  .rkxtf__grid{grid-template-columns:repeat(2,1fr)}
  .rkxtf__adv{grid-template-columns:1fr}
}
@media (max-width:360px){ .rkxtf__grid{grid-template-columns:repeat(2,1fr)} }

/* ============================================================
   HERO — SINGLE FULL-WIDTH COLUMN override
   Stacks the lead content and the tech orb in one column.
   Releases the 100svh height lock so the section flows.
   ============================================================ */
.rkx-section.rkx-hero--full{
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  display:block !important;
  overflow:visible !important;
  padding-block:clamp(96px,13vh,160px) clamp(52px,8vh,104px) !important;
}
.rkx-hero--full .rkx-hero__grid{
  grid-template-columns:1fr !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  gap:clamp(36px,5vh,60px) !important;
  align-items:stretch !important;
}
.rkx-hero--full .rkx-hero__lead{
  border-right:none !important;
  border-bottom:none !important;
  padding-block:0 !important;
  padding-inline:clamp(28px,5vw,90px) !important;
  max-width:1000px;
}
.rkx-hero--full .rkx-hero__widget{
  padding:0 clamp(28px,5vw,90px) !important;
  align-items:stretch !important;
  justify-content:flex-start !important;
  aspect-ratio:auto !important;
}
.rkx-hero--full .rkx-hero__widget .rkxtf{
  max-width:1100px;
  margin-inline:auto;
}
/* height lock is gone — restore comfortable hero type */
.rkx-hero--full .rkx-h1{ font-size:clamp(34px,5vw,66px) !important; }
.rkx-hero--full .rkx-lede{ font-size:clamp(15px,1.4vw,19px) !important; max-width:760px; }
@media (max-width:639px){
  .rkx-hero--full .rkx-h1{ font-size:clamp(28px,7.5vw,42px) !important; }
}