/* ===== HERO ===== */
.hero{position:relative;min-height:clamp(620px,92vh,880px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}

/* receding voxel grid plane */
.hero-grid-plane{
  position:absolute;left:-30%;right:-30%;bottom:-10%;height:120%;
  background-image:
    linear-gradient(rgba(34,211,197,.085) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,197,.085) 1px, transparent 1px);
  background-size:58px 58px;
  transform:perspective(680px) rotateX(62deg) translateY(var(--pv-y,0px)) translateX(var(--pv-x,0px));
  transform-origin:50% 100%;
  animation:heroDrift 26s linear infinite;
  mask-image:radial-gradient(75% 62% at 50% 62%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(75% 62% at 50% 62%, #000 20%, transparent 78%);
  transition:transform .5s cubic-bezier(.22,.9,.24,1)}
@keyframes heroDrift{from{background-position:0 0}to{background-position:0 58px}}

/* floating blocks */
.hero-voxels{position:absolute;inset:0}
.hero-voxels i{
  position:absolute;display:block;border-radius:5px;
  background:linear-gradient(145deg, rgba(34,211,197,.34), rgba(23,179,168,.10));
  border:1px solid rgba(125,239,223,.28);
  box-shadow:0 0 22px -6px rgba(34,211,197,.5);
  animation:heroFloat var(--d,7s) ease-in-out var(--dl,0s) infinite;
  will-change:transform}
@keyframes heroFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg);opacity:.35}
  50%{transform:translate3d(0,-22px,0) rotate(10deg);opacity:.9}}

.hero-glow{
  position:absolute;inset:0;
  background:radial-gradient(52% 46% at 68% 38%, rgba(34,211,197,.16), transparent 70%),
             radial-gradient(40% 40% at 12% 78%, rgba(23,179,168,.09), transparent 72%)}

.hero-inner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,70px);align-items:center;padding-block:clamp(60px,9vw,96px)}
.hero-copy{max-width:60ch}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:var(--text-dim);margin:0 0 20px}
.hero-dot{width:7px;height:7px;border-radius:2px;background:var(--accent);box-shadow:0 0 12px var(--accent);animation:heroPulse 2.6s ease-in-out infinite}
@keyframes heroPulse{0%,100%{opacity:.45}50%{opacity:1}}
.hero-title{font-size:clamp(38px,5.4vw,66px);line-height:1.03;letter-spacing:-.031em;font-weight:800;margin:0 0 20px}
.hero-title-accent{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{font-size:clamp(15px,1.5vw,17.5px);line-height:1.62;color:var(--text-dim);max-width:52ch;margin:0 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:26px}
.btn-lg{height:52px;padding:0 28px;font-size:15.5px}
.hero-trust{display:flex;align-items:center;gap:13px;flex-wrap:wrap}
.hero-trust-text{font-size:13.5px;color:var(--text-dim);margin:0}
.hero-trust-text strong{color:var(--text);font-weight:600}
.hero-trust-sep{width:1px;height:15px;background:var(--hairline-strong)}
.hero-trust-scan{font-size:13.5px;color:var(--text-dim)}
.hero-trust-scan:hover{color:var(--accent)}

.hero-mark{display:flex;justify-content:center;align-items:center;position:relative}

.hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:22px;height:38px;border-radius:12px;border:1px solid var(--hairline-strong);display:grid;place-items:start center;padding-top:7px}
.hero-scroll-line{width:2px;height:8px;border-radius:2px;background:var(--accent);animation:heroScroll 1.9s ease-in-out infinite}
@keyframes heroScroll{0%{opacity:0;transform:translateY(0)}35%{opacity:1}100%{opacity:0;transform:translateY(13px)}}

@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;text-align:center}
  .hero-copy{margin:0 auto}
  .hero-actions,.hero-trust{justify-content:center}
  .hero-mark{order:-1}
  .hero-scroll{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-grid-plane,.hero-voxels i,.hero-dot,.hero-scroll-line{animation:none}
}