/* BYNZO 9.1 · 3D animated homepage hero
   Scope: homepage hero only. Navigation, client marquee and lower homepage sections stay on v9.0. */
.page-home{
  background:
    radial-gradient(circle at 0 34%,rgba(87,206,231,.12),transparent 19%),
    radial-gradient(circle at 100% 4%,rgba(75,188,226,.14),transparent 17%),
    #fbf8f2;
}
.page-home .site-header{background:rgba(251,248,242,.88)}
.page-home .home-premium-hero{
  min-height:680px;
  max-width:1320px;
  padding-top:50px;
  padding-bottom:34px;
  grid-template-columns:minmax(0,.94fr) minmax(590px,1.06fr);
  gap:26px;
  overflow:visible;
}
.page-home .hero-copy{position:relative;z-index:8}
.page-home .hero-copy h1{
  max-width:710px;
  margin:18px 0 20px;
  font-size:clamp(60px,5.65vw,84px);
  line-height:.94;
}
.page-home .hero-copy h1 em{
  display:block;
  color:#0c6e86;
  font-style:italic;
  line-height:.93;
  text-decoration:none;
  position:relative;
}
.page-home .hero-copy h1 em:after{
  content:"";
  position:absolute;
  width:132px;
  height:9px;
  right:10%;
  bottom:-10px;
  border-top:3px solid #0b7189;
  border-radius:50%;
  transform:rotate(-4deg);
  opacity:.92;
}
.page-home .hero-copy>p{max-width:610px;font-size:16px;line-height:1.58}
.page-home .hero-actions{margin-top:25px}
.page-home .hero-actions .button:first-child{
  background:linear-gradient(145deg,#06151f,#0a2734);
  box-shadow:0 12px 30px rgba(4,47,68,.16),0 0 0 1px rgba(54,207,236,.1) inset;
}
.page-home .hero-actions .button:first-child:hover{box-shadow:0 17px 38px rgba(4,47,68,.22),0 0 22px rgba(53,209,239,.12)}
.page-home .home-proof{
  margin-top:30px;
  padding-top:22px;
  gap:11px;
  border-top:0;
}
.page-home .home-proof span{
  min-height:68px;
  grid-template-columns:38px 1fr;
  column-gap:9px;
  padding:10px 12px;
  border:1px solid rgba(26,73,86,.08);
  border-radius:14px;
  background:rgba(255,255,255,.66);
  box-shadow:0 9px 24px rgba(21,54,64,.045);
  backdrop-filter:blur(8px);
}
.page-home .home-proof span i{width:38px;height:38px;border-radius:11px;font-size:15px}
.page-home .home-proof b{font-size:21px}.page-home .home-proof small{font-size:9px}

/* 3D scene */
.page-home .hero-visual{min-height:575px;display:grid;place-items:center;perspective:1400px;overflow:visible}
.hero-cosmos{
  --tilt-x:0deg;
  --tilt-y:0deg;
  position:relative;
  width:min(720px,100%);
  height:575px;
  transform-style:preserve-3d;
  isolation:isolate;
  perspective:1500px;
}
.cosmos-ambient{position:absolute;border-radius:50%;filter:blur(38px);pointer-events:none;z-index:-4}
.ambient-a{width:420px;height:300px;right:20px;bottom:8px;background:rgba(36,190,221,.18);transform:rotate(-12deg)}
.ambient-b{width:300px;height:250px;left:90px;top:160px;background:rgba(255,176,125,.13)}
.cosmos-planet{
  position:absolute;
  z-index:-1;
  width:330px;
  height:330px;
  right:96px;
  top:18px;
  border-radius:50%;
  background:
    radial-gradient(circle at 32% 25%,rgba(255,255,255,.98) 0 1.8%,rgba(148,246,246,.92) 4%,transparent 12%),
    radial-gradient(circle at 31% 25%,#37d6e1 0 16%,#1599c4 35%,#0b5e91 58%,#06243c 80%,#041522 100%);
  box-shadow:
    inset -34px -34px 58px rgba(0,0,0,.34),
    inset 24px 18px 38px rgba(125,247,244,.22),
    0 0 55px rgba(25,176,216,.33),
    0 34px 65px rgba(12,59,84,.22);
  transform:translate3d(var(--hero-tx,0),var(--hero-ty,0),-80px);
  transition:transform .22s ease-out;
}
.cosmos-planet:before,.cosmos-planet:after{content:"";position:absolute;inset:16%;border-radius:50%;border:1px solid rgba(164,244,255,.18);transform:rotate(32deg)}
.cosmos-planet:after{inset:29%;border-color:rgba(255,255,255,.11);transform:rotate(-42deg)}
.planet-shine{position:absolute;width:50%;height:13%;left:16%;top:12%;border-radius:50%;background:rgba(255,255,255,.17);filter:blur(13px);transform:rotate(-18deg)}

.cosmos-orbit{
  position:absolute;
  z-index:0;
  left:55%;
  top:49%;
  width:600px;
  height:250px;
  border:2px solid rgba(40,207,227,.52);
  border-radius:50%;
  transform-style:preserve-3d;
  pointer-events:none;
  filter:drop-shadow(0 0 9px rgba(47,211,230,.2));
}
.orbit-a{animation:bynzoOrbitA 14s linear infinite}
.orbit-b{width:650px;height:208px;border-color:rgba(92,186,233,.4);animation:bynzoOrbitB 18s linear infinite}
.orbit-c{width:555px;height:320px;border-color:rgba(35,204,203,.26);animation:bynzoOrbitC 22s linear infinite}
.cosmos-orbit:before{content:"";position:absolute;inset:8px;border:1px solid rgba(255,255,255,.3);border-radius:inherit}
.orbit-node{position:absolute;width:15px;height:15px;border-radius:50%;background:linear-gradient(145deg,#66eff1,#08799f);box-shadow:0 0 17px rgba(39,210,228,.7)}
.node-a{left:7%;top:35%}.node-b{right:12%;bottom:10%}.node-c{left:56%;top:-8px}
@keyframes bynzoOrbitA{from{transform:translate(-50%,-50%) rotate(-9deg)}to{transform:translate(-50%,-50%) rotate(351deg)}}
@keyframes bynzoOrbitB{from{transform:translate(-50%,-50%) rotate(24deg) scaleY(.72)}to{transform:translate(-50%,-50%) rotate(384deg) scaleY(.72)}}
@keyframes bynzoOrbitC{from{transform:translate(-50%,-50%) rotate(68deg) scaleY(.58)}to{transform:translate(-50%,-50%) rotate(428deg) scaleY(.58)}}

.cosmos-moon{position:absolute;z-index:2;border-radius:50%;background:radial-gradient(circle at 32% 25%,#a6ffff 0 4%,#28c5d2 22%,#087c9d 58%,#063d5a 100%);box-shadow:0 8px 20px rgba(6,74,99,.25),0 0 16px rgba(34,202,218,.26);transform:translate3d(var(--hero-tx,0),var(--hero-ty,0),20px);transition:transform .22s ease-out}
.moon-a{width:25px;height:25px;right:15px;top:138px}.moon-b{width:18px;height:18px;left:155px;top:95px}.moon-c{width:15px;height:15px;right:62px;bottom:87px}
.cosmos-globe{position:absolute;z-index:6;width:48px;height:48px;right:50px;top:295px;border-radius:50%;background:radial-gradient(circle at 33% 27%,#9af6f2 0 5%,#1bb1c3 26%,#09778f 58%,#06475d 100%);box-shadow:0 10px 25px rgba(3,79,101,.25),inset -9px -9px 15px rgba(2,37,53,.28);transform:translate3d(var(--hero-tx,0),var(--hero-ty,0),70px);transition:transform .22s ease-out;animation:bynzoGlobeFloat 5.6s ease-in-out infinite}
.cosmos-globe:before,.cosmos-globe:after,.cosmos-globe i:before{content:"";position:absolute;border:1px solid rgba(220,255,255,.42);border-radius:50%}
.cosmos-globe:before{inset:7px 14px}.cosmos-globe:after{inset:12px 5px;transform:rotate(18deg)}.cosmos-globe i:before{left:2px;right:2px;top:23px;height:0;border-radius:0}
@keyframes bynzoGlobeFloat{50%{translate:0 -9px;rotate:6deg}}

/* dashboard */
.dashboard-shell{
  position:absolute;
  z-index:4;
  right:32px;
  top:145px;
  width:570px;
  height:370px;
  transform-style:preserve-3d;
  transform:perspective(1300px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotateZ(.3deg);
  transition:transform .2s ease-out;
}
.page-home .dashboard-mock-3d{
  position:absolute;
  inset:0;
  width:100%;
  height:330px;
  top:0;
  right:auto;
  border-radius:23px;
  transform:none;
  z-index:2;
  overflow:hidden;
  border:1px solid rgba(41,88,105,.10);
  background:rgba(255,255,255,.94);
  box-shadow:0 30px 70px rgba(18,55,72,.20),0 5px 16px rgba(42,132,160,.08);
  backdrop-filter:blur(16px) saturate(1.05);
}
.page-home .dashboard-mock-3d:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.44),transparent 22%,transparent 70%,rgba(77,214,228,.06))}
.page-home .dashboard-mock-main h3{font-size:20px;margin-top:1px}.page-home .dashboard-mock-main>p{font-size:8px;margin-bottom:11px}
.page-home .mock-chart{position:relative}.chart-growth{position:absolute;right:15%;top:55%;padding:4px 7px;border-radius:7px;background:#2489f5;color:#fff;font-size:7px;font-weight:850;box-shadow:0 6px 14px rgba(36,137,245,.25)}
.dashboard-growth-ring{
  position:absolute;
  z-index:3;
  left:48px;
  right:38px;
  bottom:3px;
  height:56px;
  border-radius:0 0 50% 50% / 0 0 100% 100%;
  border-bottom:10px solid rgba(10,128,153,.82);
  box-shadow:0 10px 18px rgba(8,104,130,.16),inset 0 -2px rgba(102,241,239,.38);
  color:#e8ffff;
  display:flex;
  align-items:end;
  justify-content:center;
  gap:14px;
  padding-bottom:5px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.05em;
  transform:translateZ(-20px);
  text-shadow:0 1px 2px rgba(0,35,51,.3);
}
.dashboard-growth-ring i{font-style:normal;opacity:.72}

/* floating business outcome cards */
.hero-benefit{position:absolute;z-index:9;transform:translate3d(var(--hero-tx,0),var(--hero-ty,0),90px);transition:transform .22s ease-out;pointer-events:auto}
.hero-benefit-inner{
  min-width:190px;
  min-height:68px;
  padding:10px 10px 10px 12px;
  border:1px solid rgba(31,94,115,.11);
  border-radius:17px;
  background:rgba(255,255,255,.89);
  box-shadow:0 16px 36px rgba(13,62,81,.13),inset 0 1px rgba(255,255,255,.8);
  backdrop-filter:blur(15px) saturate(1.15);
  display:grid;
  grid-template-columns:40px 1fr 26px;
  gap:9px;
  align-items:center;
  animation:bynzoBenefitFloat 5.2s ease-in-out infinite;
}
.hero-benefit:nth-of-type(even) .hero-benefit-inner{animation-delay:-2s}.hero-benefit:nth-of-type(3n) .hero-benefit-inner{animation-delay:-3.4s}
.benefit-icon{width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,#dcf7ff,#a9edfa);color:#087ca1;display:grid;place-items:center;font-size:21px;font-weight:900;box-shadow:inset 0 -5px 12px rgba(45,172,203,.08)}
.benefit-icon.bars{font-size:20px;color:#0f91c0}
.hero-benefit span:nth-child(2){display:grid;gap:3px}.hero-benefit b{font-size:11px;line-height:1.12;color:#09202d}.hero-benefit small{font-size:7px;color:#687a82;line-height:1.3}.hero-benefit-inner>i{width:25px;height:25px;border-radius:50%;background:#fff;border:1px solid rgba(13,64,82,.10);display:grid;place-items:center;font-style:normal;font-size:11px;color:#173d4a}
.benefit-launch{left:72px;top:32px}.benefit-convert{right:-2px;top:76px}.benefit-grow{left:28px;top:345px}.benefit-brand{left:155px;bottom:3px}.benefit-scale{right:-28px;bottom:82px}
@keyframes bynzoBenefitFloat{0%,100%{translate:0 0}50%{translate:0 -9px}}
.hero-partner-note-3d{right:-2px;bottom:192px;font-size:17px;transform:rotate(-8deg);z-index:10}.hero-partner-note-3d span{font-size:28px;left:7px;top:47px;transform:rotate(35deg)}

/* subtle entrance choreography */
.page-home .hero-visual.visible .cosmos-planet{animation:bynzoPlanetIn .8s cubic-bezier(.2,.8,.2,1) both}
.page-home .hero-visual.visible .dashboard-shell{animation:bynzoDashboardIn .9s .08s cubic-bezier(.2,.8,.2,1) both}
.page-home .hero-visual.visible .hero-benefit{animation:bynzoCardIn .65s cubic-bezier(.2,.8,.2,1) both}
.page-home .hero-visual.visible .benefit-convert{animation-delay:.16s}.page-home .hero-visual.visible .benefit-grow{animation-delay:.24s}.page-home .hero-visual.visible .benefit-brand{animation-delay:.32s}.page-home .hero-visual.visible .benefit-scale{animation-delay:.40s}
@keyframes bynzoPlanetIn{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
@keyframes bynzoDashboardIn{from{opacity:0;translate:35px 28px;scale:.94}to{opacity:1;translate:0 0;scale:1}}
@keyframes bynzoCardIn{from{opacity:0;scale:.86}to{opacity:1;scale:1}}

/* laptop / smaller desktop */
@media(max-width:1220px){
  .page-home .home-premium-hero{grid-template-columns:minmax(0,.94fr) minmax(520px,1.06fr);gap:12px;padding-left:28px;padding-right:28px}
  .page-home .hero-copy h1{font-size:clamp(57px,6vw,74px)}
  .hero-cosmos{width:620px;scale:.91;transform-origin:center}
  .benefit-convert{right:6px}.benefit-scale{right:-2px}
}

/* tablet: preserve the same content/order, place the 3D scene under the copy */
@media(max-width:980px){
  .page-home .home-premium-hero{min-height:auto;grid-template-columns:1fr;gap:18px;padding-top:48px;padding-bottom:24px}
  .page-home .hero-copy{max-width:820px}
  .page-home .hero-copy h1{max-width:760px;font-size:clamp(60px,9vw,78px)}
  .page-home .hero-copy>p{max-width:680px}
  .page-home .home-proof{max-width:720px}
  .page-home .hero-visual{min-height:545px;margin-top:-5px}
  .hero-cosmos{width:700px;height:545px;scale:.96}
  .dashboard-shell{right:55px;top:132px}
  .benefit-launch{left:82px}.benefit-grow{left:36px}.benefit-brand{left:168px}.benefit-scale{right:-3px}
}

/* tablet portrait */
@media(max-width:760px){
  .page-home .home-premium-hero{padding:38px 18px 18px;gap:8px}
  .page-home .hero-copy h1{font-size:clamp(48px,11.7vw,64px);margin-top:16px}
  .page-home .hero-copy h1 em:after{width:92px;right:8%;bottom:-8px}
  .page-home .hero-copy>p{font-size:14px;line-height:1.6}
  .page-home .hero-actions{margin-top:20px}.page-home .hero-actions .button{min-height:46px;padding-left:18px;padding-right:18px;font-size:12px}
  .page-home .home-proof{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:22px;padding-top:0}
  .page-home .home-proof span{min-height:61px;grid-template-columns:30px 1fr;padding:8px 7px;column-gap:6px;border-radius:12px}
  .page-home .home-proof span i{width:30px;height:30px;border-radius:9px;font-size:12px}.page-home .home-proof b{font-size:17px}.page-home .home-proof small{font-size:7px}
  .page-home .hero-visual{min-height:455px;margin-top:2px}
  .hero-cosmos{width:610px;height:455px;scale:.78;transform-origin:center top;margin-bottom:-90px}
  .cosmos-planet{right:95px;top:0}.dashboard-shell{right:22px;top:122px}
  .benefit-launch{left:50px;top:24px}.benefit-convert{right:-25px;top:64px}.benefit-grow{left:4px;top:320px}.benefit-brand{left:132px;bottom:-4px}.benefit-scale{right:-28px;bottom:68px}
  .hero-partner-note-3d{right:0;bottom:175px}
}

/* phone */
@media(max-width:560px){
  .page-home .home-premium-hero{padding-top:30px;padding-bottom:6px}
  .page-home .hero-copy .eyebrow{font-size:8px;letter-spacing:.14em}
  .page-home .hero-copy h1{font-size:clamp(44px,13.5vw,56px);line-height:.93;margin-bottom:18px}
  .page-home .hero-copy h1 em:after{width:72px;right:5%;border-top-width:2px}
  .page-home .hero-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:8px}.page-home .hero-actions .button{width:100%;padding:0 9px;font-size:10px;border-radius:12px;white-space:nowrap}
  .page-home .home-proof{gap:5px}.page-home .home-proof span{display:grid;grid-template-columns:1fr;place-items:center;text-align:center;padding:7px 4px;min-height:78px}.page-home .home-proof span i{grid-row:auto;margin-bottom:1px}.page-home .home-proof b{font-size:16px}.page-home .home-proof small{font-size:6.8px;line-height:1.12}
  .page-home .hero-visual{min-height:370px;margin-top:10px}
  .hero-cosmos{width:570px;height:430px;scale:.64;transform-origin:center top;margin-bottom:-155px}
  .cosmos-planet{right:105px;top:8px;width:310px;height:310px}.dashboard-shell{right:36px;top:130px;width:540px}
  .benefit-launch{left:52px;top:30px}.benefit-convert{right:-4px;top:82px}.benefit-grow{left:10px;top:320px}.benefit-brand{left:145px;bottom:12px}.benefit-scale{right:-5px;bottom:83px}
  .hero-partner-note-3d{right:2px;bottom:180px}
}

@media(max-width:390px){
  .page-home .hero-copy h1{font-size:42px}
  .page-home .hero-copy>p{font-size:13px}
  .page-home .hero-visual{min-height:335px}
  .hero-cosmos{scale:.57;margin-bottom:-185px}
  .page-home .home-proof small{font-size:6.3px}
}

/* accessibility: motion becomes still but the 3D composition remains intact */
@media(prefers-reduced-motion:reduce){
  .cosmos-orbit,.cosmos-globe,.hero-benefit-inner,.page-home .hero-visual.visible .cosmos-planet,.page-home .hero-visual.visible .dashboard-shell,.page-home .hero-visual.visible .hero-benefit{animation:none!important}
  .hero-cosmos [data-hero-depth],.dashboard-shell{transition:none!important}
}