/* === Platform section — Stack vs Bento variants (review scaffolding) === */

.hz-variants .hz-view{display:none;}
.hz-variants[data-mode="stack"] .hz-view-stack{display:block;}
.hz-variants[data-mode="bento"]  .hz-view-bento{display:block;}

/* ---- floating review toggle ---- */
.hz-toggle{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);z-index:9999;
  display:flex;align-items:center;gap:.2rem;padding:.3rem;border-radius:999px;
  background:rgba(18,18,18,.92);border:1px solid rgb(255 255 255/.12);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 10px 34px rgba(0,0,0,.55);
}
.hz-toggle .hz-tog-label{color:rgb(255 255 255/.4);font:500 11px/1 "JetBrains Mono",monospace;
  letter-spacing:.12em;text-transform:uppercase;padding:.5rem .6rem;}
.hz-toggle button{font:600 12px/1 Inter,sans-serif;letter-spacing:.01em;color:rgb(255 255 255/.6);
  background:transparent;border:0;padding:.55rem .95rem;border-radius:999px;cursor:pointer;
  transition:color .2s,background .2s;}
.hz-toggle button:hover{color:#fff;}
.hz-toggle button[data-on="true"]{color:#0a0a0a;background:#FBB320;}

/* shared card bits */
.hz-cap-tag,.hz-bcell .btag{font:500 9px/1 "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:rgb(255 255 255/.42);}
.ai .hz-cap-tag,.hz-bcell.ai .btag{color:#FBB320;}

/* ---------- STACK ---------- */
.hz-stack{display:flex;flex-direction:column;border:1px solid rgb(255 255 255/.08);border-radius:18px;overflow:hidden;}
.hz-flow{display:flex;align-items:center;justify-content:center;gap:.55rem;padding:1rem;
  font:500 11px/1 Inter,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgb(255 255 255/.42);
  background:rgb(255 255 255/.015);}
.hz-flow .ar{color:#FBB320;font-size:13px;}
.hz-tier{display:grid;grid-template-columns:210px 1fr;gap:1.75rem;padding:1.9rem;
  border-top:1px solid rgb(255 255 255/.08);transition:background .25s;}
.hz-tier:hover{background:rgb(255 255 255/.018);}
.hz-tier-head .name{font:600 16px/1.2 Inter,sans-serif;letter-spacing:-.015em;color:#fff;}
.hz-tier-head .role{margin-top:.4rem;font:500 11px/1.3 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:rgb(255 255 255/.4);}
.hz-tier-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:.75rem;}
.hz-cap{padding:1.05rem;border-radius:11px;border:1px solid rgb(255 255 255/.08);background:rgb(255 255 255/.02);
  transition:transform .2s cubic-bezier(.16,1,.3,1),border-color .2s,background .2s;}
.hz-cap:hover{transform:translateY(-2px);border-color:rgb(255 255 255/.22);background:rgb(255 255 255/.045);}
.hz-cap .hz-cap-tag{display:block;margin-bottom:.55rem;}
.hz-cap .ct{font:600 14px/1.25 Inter,sans-serif;letter-spacing:-.01em;color:#fff;}
.hz-cap .cd{margin-top:.5rem;font:400 12.5px/1.5 Inter,sans-serif;color:rgb(255 255 255/.56);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.hz-cap.ai{border-color:rgba(251,179,32,.28);background:rgba(251,179,32,.05);}
.hz-cap.ai:hover{border-color:rgba(251,179,32,.55);}

/* ---------- BENTO ---------- */
.hz-bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(155px,auto);gap:.8rem;grid-auto-flow:dense;}
.hz-bcell{padding:1.45rem;border-radius:15px;border:1px solid rgb(255 255 255/.08);background:rgb(255 255 255/.02);
  display:flex;flex-direction:column;min-width:0;
  transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s,background .22s;}
.hz-bcell:hover{transform:translateY(-3px);border-color:rgb(255 255 255/.22);background:rgb(255 255 255/.05);}
.hz-bcell .bhead{display:flex;justify-content:space-between;align-items:flex-start;}
.hz-bcell .bnum{font:500 11px/1 "JetBrains Mono",monospace;color:rgb(255 255 255/.28);}
.hz-bcell .bt{font:600 17px/1.2 Inter,sans-serif;letter-spacing:-.02em;color:#fff;margin-top:.9rem;}
.hz-bcell .bd{margin-top:.55rem;font:400 13px/1.55 Inter,sans-serif;color:rgb(255 255 255/.56);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.hz-bcell.ai{border-color:rgba(251,179,32,.26);background:rgba(251,179,32,.05);}
.hz-bcell.ai:hover{border-color:rgba(251,179,32,.5);}
.hz-bcell.span2{grid-column:span 2;}
.hz-bcell.tall{grid-row:span 2;}
.hz-bcell.big{grid-column:span 2;grid-row:span 2;}
.hz-bcell.big .bt{font-size:23px;}
.hz-bcell.big .bd{-webkit-line-clamp:7;}

@media (max-width:900px){
  .hz-bento{grid-template-columns:repeat(2,1fr);}
  .hz-bcell.big,.hz-bcell.span2{grid-column:span 2;}
  .hz-bcell.big,.hz-bcell.tall{grid-row:span 1;}
  .hz-tier{grid-template-columns:1fr;gap:1rem;}
}
/* ===== Featured data point + real spec tags (no fake UI) ===== */
.hz-dp{margin:.2rem 0 .2rem;}
.hz-dp .dp-big{font:600 23px/1.08 Inter,sans-serif;letter-spacing:-.03em;color:#fff;}
.hz-bcell.big .hz-dp .dp-big{font-size:38px;}
.hz-bcell.ai .hz-dp .dp-big{color:#FBB320;}
.hz-dp .dp-cap{margin-top:.55rem;font:500 10px/1.4 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:rgb(255 255 255/.42);}
.hz-bcell.feat .bd{margin-top:.85rem;-webkit-line-clamp:3;}
.hz-specs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:1.1rem;}
.hz-spec{font:500 10px/1 "JetBrains Mono",monospace;letter-spacing:.04em;color:rgb(255 255 255/.55);
  background:rgb(255 255 255/.035);border:1px solid rgb(255 255 255/.09);border-radius:6px;padding:.42rem .58rem;
  transition:color .2s,border-color .2s;}
.hz-bcell:hover .hz-spec{color:rgb(255 255 255/.78);border-color:rgb(255 255 255/.16);}
.hz-bcell.ai .hz-spec{border-color:rgba(251,179,32,.2);color:rgba(251,179,32,.82);}

/* ===== Consolidated 6-cell bento (icon + short line + specs) ===== */
.hz-bento6{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;}
@media (max-width:880px){.hz-bento6{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.hz-bento6{grid-template-columns:1fr;}}
.b6{display:flex;flex-direction:column;min-height:236px;padding:1.9rem;border-radius:16px;
  border:1px solid rgb(255 255 255/.08);background:rgb(255 255 255/.02);
  transition:transform .22s cubic-bezier(.16,1,.3,1),border-color .22s,background .22s;}
.b6:hover{transform:translateY(-3px);border-color:rgb(255 255 255/.2);background:rgb(255 255 255/.045);}
.b6.ai{border-color:rgba(251,179,32,.22);
  background:radial-gradient(150px 150px at 88% 6%, rgba(251,179,32,.13), transparent 70%), rgba(251,179,32,.035);}
.b6.ai:hover{border-color:rgba(251,179,32,.45);}
.b6-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgb(255 255 255/.1);color:rgb(255 255 255/.72);margin-bottom:1.5rem;}
.b6.ai .b6-icon{color:#FBB320;border-color:rgba(251,179,32,.3);background:rgba(251,179,32,.06);}
.b6-icon svg{width:22px;height:22px;}
.b6-title{font:600 18px/1.25 Inter,sans-serif;letter-spacing:-.02em;color:#fff;margin-bottom:.55rem;}
.b6-dp{font:600 14px/1 Inter,sans-serif;letter-spacing:-.01em;color:#FBB320;margin-bottom:.7rem;}
.b6-val{font:400 13.5px/1.55 Inter,sans-serif;color:rgb(255 255 255/.56);}
.b6-specs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:auto;padding-top:1.4rem;}
.b6-spec{font:500 10px/1 "JetBrains Mono",monospace;letter-spacing:.04em;color:rgb(255 255 255/.5);
  border:1px solid rgb(255 255 255/.09);border-radius:6px;padding:.4rem .55rem;transition:color .2s,border-color .2s;}
.b6:hover .b6-spec{color:rgb(255 255 255/.72);}
.b6.ai .b6-spec{border-color:rgba(251,179,32,.2);color:rgba(251,179,32,.78);}

/* ===== Animated cell backgrounds (vanilla Eldora ports) ===== */
.b6-has-bg{position:relative;overflow:hidden;}
.b6-has-bg > *:not(.b6-bg){position:relative;z-index:2;}
.b6-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}

/* Integrations marquee */
.b6-bg-mq{display:flex;flex-direction:column;justify-content:center;gap:.7rem;opacity:.6;}
.b6-mq-row{overflow:hidden;display:flex;}
.b6-mq-track{display:flex;gap:.7rem;width:max-content;animation:b6mq var(--dur,28s) linear infinite;}
.b6-mq-row.rev .b6-mq-track{animation-direction:reverse;}
@keyframes b6mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.b6-tile{position:relative;flex:0 0 auto;width:40px;height:40px;border-radius:11px;
  border:1px solid rgb(255 255 255/.1);background:rgb(255 255 255/.025);
  display:flex;align-items:center;justify-content:center;overflow:hidden;}
.b6-tile-glow{position:absolute;width:62%;height:62%;border-radius:999px;filter:blur(11px);opacity:.75;}
.b6-tile-ic{width:18px;height:18px;color:rgb(255 255 255/.82);}
.b6-tile-ic svg{width:18px;height:18px;}
/* scrim keeps the cell text readable over the motion */
.b6-bg-scrim{position:absolute;inset:0;
  background:radial-gradient(120% 120% at 18% 30%, rgba(8,7,10,.82) 30%, rgba(8,7,10,.5) 100%);}

/* Animated Frameworks — sequential 3D lift */
.b6-bg-fw{opacity:.85;}
.b6-fw-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:.85rem;perspective:600px;}
.b6-fw-card{position:relative;width:46px;height:46px;border-radius:12px;
  border:1px solid rgba(251,179,32,.28);background:linear-gradient(180deg,rgba(44,34,12,.65),rgba(20,15,6,.65));
  display:flex;align-items:center;justify-content:center;transform-style:preserve-3d;
  animation:b6fw 5.4s ease-in-out infinite;animation-delay:calc(var(--i)*1.6s);}
@keyframes b6fw{0%,16%,100%{transform:none}8%{transform:translateY(-5px) rotateX(12deg) translateZ(18px);}}
.b6-fw-glow{position:absolute;bottom:-7px;width:72%;height:14px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,179,32,.6),transparent 70%);filter:blur(6px);
  opacity:0;animation:b6fwg 5.4s ease-in-out infinite;animation-delay:calc(var(--i)*1.6s);}
@keyframes b6fwg{0%,16%,100%{opacity:0}8%{opacity:.9}}
.b6-fw-ic{width:20px;height:20px;color:#FFB320;}
.b6-fw-ic svg{width:20px;height:20px;}
.b6-fw-base{position:absolute;left:18%;right:18%;top:calc(50% + 32px);height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,179,32,.32),transparent);}
/* lighter scrim so the centered cards stay visible (text area stays dark) */
.b6-bg-fw .b6-bg-scrim{background:radial-gradient(125% 125% at 16% 26%, rgba(8,7,10,.82) 20%, rgba(8,7,10,.22) 100%);}

/* Map — dotted texture + pulsing location pings */
.b6-bg-map{opacity:.95;}
.b6-map-dots{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(circle, rgb(255 255 255/.13) 1px, transparent 1.6px);
  background-size:13px 13px;
  -webkit-mask-image:radial-gradient(125% 105% at 72% 42%, #000 28%, transparent 100%);
  mask-image:radial-gradient(125% 105% at 72% 42%, #000 28%, transparent 100%);}
.b6-map-ping{position:absolute;width:7px;height:7px;transform:translate(-50%,-50%);}
.b6-map-dot{position:absolute;inset:0;border-radius:50%;background:#FFB320;
  box-shadow:0 0 8px rgba(255,179,32,.85);}
.b6-map-ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(255,179,32,.7);
  animation:b6ping 2.8s ease-out infinite;animation-delay:var(--d);}
@keyframes b6ping{0%{transform:scale(1);opacity:.8}100%{transform:scale(4.6);opacity:0}}

@media (prefers-reduced-motion:reduce){
  .hz-cap,.hz-bcell,.hz-tier,.b6{transition:none!important;}
  .b6-mq-track,.b6-fw-card,.b6-fw-glow,.b6-map-ring{animation:none!important;}
}