/* ── 3D hero ── */
.hero{position:relative;min-height:82vh;display:grid;align-items:center;padding:3rem 0;overflow:hidden}
.hero-grid{display:grid;gap:2.5rem;grid-template-columns:1.05fr .95fr;align-items:center;position:relative;z-index:3}
.hero h1{margin-bottom:1rem}
.hero h1 em{font-style:normal;background:var(--grad-3);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{margin-bottom:1.6rem}
.cta-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.6rem}
.hero-facts{display:flex;gap:1.4rem;flex-wrap:wrap}
.hero-fact b{display:block;font-family:var(--font-head);font-size:1.35rem;color:var(--accent)}
.hero-fact span{font-size:.78rem;color:var(--text-muted)}

/* perspective stage */
.stage{perspective:1200px;perspective-origin:50% 45%;height:430px;position:relative}
.orb{
  position:absolute;inset:50% auto auto 50%;width:250px;height:250px;margin:-125px 0 0 -125px;
  border-radius:50%;transform-style:preserve-3d;animation:spin 26s linear infinite;
}
@keyframes spin{to{transform:rotateY(360deg) rotateX(12deg)}}
.orb i{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(56,189,248,.35);
  box-shadow:inset 0 0 60px rgba(34,197,94,.14)
}
.orb i:nth-child(1){transform:rotateY(0deg)}
.orb i:nth-child(2){transform:rotateY(60deg)}
.orb i:nth-child(3){transform:rotateY(120deg)}
.orb i:nth-child(4){transform:rotateY(180deg)}
.orb i:nth-child(5){transform:rotateY(240deg)}
.orb i:nth-child(6){transform:rotateY(300deg)}
.core{
  position:absolute;inset:50% auto auto 50%;width:96px;height:96px;margin:-48px 0 0 -48px;
  border-radius:30px;background:var(--grad-3);filter:blur(.3px);
  box-shadow:0 0 70px rgba(56,189,248,.55);animation:float 6s ease-in-out infinite;
  display:grid;place-items:center;color:#04140a
}
.core svg{width:44px;height:44px;stroke-width:1.6}
@keyframes float{0%,100%{transform:translateY(-9px) rotate(-6deg)}50%{transform:translateY(9px) rotate(6deg)}}

/* floating glass panes in 3D */
.pane{
  position:absolute;width:190px;padding:.75rem .9rem;border-radius:14px;
  background:rgba(13,21,38,.72);border:1px solid var(--border-strong);backdrop-filter:blur(12px);
  box-shadow:var(--shadow-lg);transform-style:preserve-3d
}
.pane b{font-size:.85rem;display:block}
.pane span{font-size:.72rem;color:var(--text-muted)}
.pane .meter{margin-top:.5rem;height:7px}
.pane.p1{top:6%;inset-inline-end:2%;animation:drift1 9s ease-in-out infinite}
.pane.p2{bottom:8%;inset-inline-start:0%;animation:drift2 11s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:translate3d(0,0,60px) rotateY(-14deg)}50%{transform:translate3d(10px,16px,90px) rotateY(-4deg)}}
@keyframes drift2{0%,100%{transform:translate3d(0,0,50px) rotateY(14deg)}50%{transform:translate3d(-12px,-14px,80px) rotateY(4deg)}}
#net{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.55}

/* ── 3D tilt cards ── */
.tilt{transform-style:preserve-3d;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.tilt-inner{transform:translateZ(34px);transform-style:preserve-3d}
.tilt:hover{box-shadow:var(--shadow-lg)}

/* ── 3D flip card ── */
.flip{perspective:1000px;height:210px}
.flip-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.flip:hover .flip-in{transform:rotateY(180deg)}
.flip-face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--radius);
  padding:1.25rem;border:1px solid var(--border);background:var(--surface);backdrop-filter:blur(12px);
  display:flex;flex-direction:column;gap:.5rem
}
.flip-back{
  transform:rotateY(180deg);
  background:linear-gradient(150deg,rgba(34,197,94,.18),rgba(56,189,248,.16));border-color:rgba(34,197,94,.35)
}
.flip-face .ic{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--surface-2);color:var(--accent)}
.flip-face .ic svg{width:24px;height:24px}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .stage{height:330px;order:-1}
  .hero{min-height:auto}
}