/* TAKKEN BOOST interaction lab
   Purpose: add differentiated, lightweight Cyber Dark motion without changing core layout. */

.stat,
.proof-card,
.hero-phone-real,
.hero-dashboard-card,
.device-hero-img,
.device-phone-img,
.device-card-img,
.prob-card,
.sol-card,
.feat-card,
.beta-card,
.pwa-step,
.biz-card,
.faq{
  transform-style:preserve-3d;
}

.boost-rocket{
  position:fixed;
  left:-120px;
  bottom:8vh;
  z-index:1;
  width:110px;
  height:36px;
  opacity:.46;
  pointer-events:none;
  mix-blend-mode:screen;
  filter:drop-shadow(0 0 10px rgba(103,232,249,.55)) drop-shadow(0 0 24px rgba(139,92,246,.25));
  transform:translate3d(-12vw,0,0) rotate(-18deg) scale(.62);
  animation:rocketCruise 38s linear infinite;
  animation-delay:-16s;
}
.rocket-body{
  position:absolute;
  right:0;
  top:9px;
  width:76px;
  height:18px;
  border-radius:999px 80% 80% 999px;
  background:linear-gradient(90deg,rgba(7,18,37,.94),rgba(103,232,249,.86) 48%,rgba(255,255,255,.92));
  border:1px solid rgba(103,232,249,.55);
}
.rocket-body::before{
  content:"";
  position:absolute;
  right:-10px;
  top:2px;
  border-left:17px solid rgba(226,250,255,.92);
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  filter:drop-shadow(0 0 8px rgba(103,232,249,.45));
}
.rocket-body::after{
  content:"";
  position:absolute;
  left:16px;
  top:-9px;
  width:16px;
  height:11px;
  background:linear-gradient(135deg,rgba(139,92,246,.7),rgba(34,211,238,.72));
  clip-path:polygon(0 100%,100% 100%,44% 0);
}
.rocket-body i{
  position:absolute;
  right:21px;
  top:4px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#020817;
  box-shadow:0 0 0 2px rgba(103,232,249,.78),0 0 12px rgba(103,232,249,.8);
}
.rocket-flame{
  position:absolute;
  left:2px;
  top:10px;
  width:40px;
  height:16px;
  border-radius:999px 0 0 999px;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.56),rgba(34,211,238,.95),rgba(255,255,255,.88));
  transform-origin:right center;
  animation:rocketFlame .28s ease-in-out infinite alternate;
}
.rocket-trail{
  position:absolute;
  left:-240px;
  right:58px;
  top:18px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.08),rgba(103,232,249,.46),transparent);
  box-shadow:0 0 10px rgba(103,232,249,.28);
}

.stat{
  position:relative;
  overflow:hidden;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease;
}
.stat::before,
.stat::after{
  content:"";
  position:absolute;
  pointer-events:none;
  opacity:0;
  transition:opacity .28s ease,transform .48s ease;
}
.stat::before{
  inset:0;
  background:linear-gradient(115deg,transparent 24%,rgba(103,232,249,.2) 46%,rgba(255,255,255,.18) 50%,transparent 62%);
  transform:translateX(-120%);
  mix-blend-mode:screen;
}
.stat::after{
  left:18px;
  right:18px;
  bottom:16px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,rgba(34,211,238,.12),rgba(103,232,249,.92),rgba(139,92,246,.62),rgba(34,211,238,.12));
  box-shadow:0 0 16px rgba(34,211,238,.5);
  transform:scaleX(.22);
  transform-origin:left center;
}
.stat:hover{
  border-color:rgba(103,232,249,.62);
  box-shadow:0 0 42px rgba(34,211,238,.28),inset 0 0 26px rgba(34,211,238,.08);
}
.stat:hover::before{opacity:1;transform:translateX(120%)}
.stat:hover::after{opacity:1;transform:scaleX(1)}
.stat:hover .num{animation:digitPop .72s ease both}
.stat:nth-child(1):hover{transform:translateY(-9px) rotateX(5deg)}
.stat:nth-child(2):hover{transform:translateY(-5px) rotateZ(-.7deg) scale(1.025)}
.stat:nth-child(2)::after{
  top:18px;
  right:20px;
  left:auto;
  bottom:auto;
  width:42px;
  height:42px;
  border-radius:50%;
  background:conic-gradient(from 120deg,rgba(103,232,249,.92),rgba(139,92,246,.2),rgba(103,232,249,.92));
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 57%);
  mask:radial-gradient(circle,transparent 54%,#000 57%);
  transform:rotate(-45deg) scale(.72);
}
.stat:nth-child(2):hover::after{transform:rotate(240deg) scale(1);transition-duration:.85s}
.stat:nth-child(3):hover{transform:translateY(-7px) rotateZ(.85deg)}
.stat:nth-child(3)::after{
  left:16%;
  right:16%;
  bottom:18px;
  background:
    radial-gradient(circle at 0 50%,#67e8f9 0 3px,transparent 4px),
    radial-gradient(circle at 50% 50%,#8b5cf6 0 3px,transparent 4px),
    radial-gradient(circle at 100% 50%,#67e8f9 0 3px,transparent 4px),
    linear-gradient(90deg,rgba(103,232,249,.75),rgba(139,92,246,.55),rgba(103,232,249,.75));
}
.stat:nth-child(4):hover{transform:translateY(-6px) rotateY(-5deg)}
.stat:nth-child(4)::after{
  inset:auto 16px 16px 16px;
  height:18px;
  background:repeating-linear-gradient(90deg,rgba(103,232,249,.92) 0 14px,transparent 14px 24px);
  box-shadow:0 0 16px rgba(103,232,249,.42);
  transform:translateY(8px);
}
.stat:nth-child(4):hover::after{transform:translateY(0)}

.hero-phone-real{overflow:hidden}
.hero-phone-real:hover{
  animation:phoneTilt 1.8s ease-in-out infinite alternate;
}
.hero-phone-real:hover img{
  animation:phoneScreenScroll 3.8s ease-in-out infinite;
  transform-origin:center top;
}
.hero-dashboard-card:hover,
.device-hero-img:hover,
.device-card-img:hover{
  animation:panelFloat 2.4s ease-in-out infinite;
}
.device-phone-img{
  overflow:hidden;
}
.device-phone-img:hover{
  animation:phoneTilt 1.8s ease-in-out infinite alternate;
}

.proof-card{transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}
.proof-card:nth-child(1):hover{transform:translateY(-7px) rotateX(7deg);box-shadow:0 0 32px rgba(34,211,238,.26)}
.proof-card:nth-child(1):hover strong{animation:digitPop .7s ease both}
.proof-card:nth-child(2):hover{transform:translateY(-5px) rotateZ(-1deg) scale(1.03);box-shadow:0 0 34px rgba(139,92,246,.3)}
.proof-card:nth-child(2):hover strong{animation:aiFlicker 1.1s ease-in-out infinite}
.proof-card:nth-child(3):hover{transform:translateY(-5px) rotateY(-7deg);box-shadow:0 0 30px rgba(34,211,238,.25)}
.proof-card:nth-child(3):hover strong{animation:syncNudge 1.2s ease-in-out infinite}

.prob-card::before{
  inset:auto 18px 18px 18px;
  height:2px;
  opacity:0;
  background:linear-gradient(90deg,transparent,rgba(139,92,246,.92),rgba(103,232,249,.8),transparent);
  transform:scaleX(.18);
  transform-origin:left center;
  mix-blend-mode:screen;
}
.prob-card:hover::before{opacity:1;transform:scaleX(1)}
.prob-card:nth-child(1):hover{transform:translateY(-8px) rotateZ(-.8deg);border-color:rgba(139,92,246,.45)}
.prob-card:nth-child(2):hover{transform:translateY(-4px) translateX(4px);border-color:rgba(34,211,238,.38)}
.prob-card:nth-child(3):hover{transform:translateY(-6px) rotateY(5deg);border-color:rgba(103,232,249,.42)}
.prob-card:nth-child(4):hover{transform:translateY(-5px) scale(1.025);border-color:rgba(52,211,153,.34)}
.prob-card:nth-child(1):hover .content-visual{animation:iconOrbit 1.9s ease-in-out infinite}
.prob-card:nth-child(2):hover .content-visual{animation:chartLift 1.4s ease-in-out infinite}
.prob-card:nth-child(3):hover .content-visual{animation:chipPulse 1.1s ease-in-out infinite}
.prob-card:nth-child(4):hover .content-visual{animation:shieldSweep 1.5s ease-in-out infinite}

.sol-card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.sol-card::before{
  inset:auto;
  top:16px;
  left:16px;
  width:54px;
  height:54px;
  opacity:0;
  border-radius:50%;
  background:conic-gradient(from 90deg,transparent,rgba(103,232,249,.7),rgba(139,92,246,.5),transparent);
  -webkit-mask:radial-gradient(circle,transparent 54%,#000 57%);
  mask:radial-gradient(circle,transparent 54%,#000 57%);
  transform:rotate(-80deg) scale(.62);
}
.sol-card:hover::before{opacity:.9;transform:rotate(220deg) scale(1)}
.sol-card:nth-child(1):hover{transform:translateY(-7px) rotateX(4deg);box-shadow:0 0 38px rgba(34,211,238,.22)}
.sol-card:nth-child(2):hover{transform:translateY(-5px) rotateZ(.7deg);box-shadow:0 0 42px rgba(139,92,246,.22)}
.sol-card:nth-child(3):hover{transform:translateY(-6px) translateX(-4px);box-shadow:0 0 38px rgba(34,211,238,.2)}
.sol-card:nth-child(4):hover{transform:translateY(-7px) scale(1.02);box-shadow:0 0 42px rgba(103,232,249,.24)}
.sol-card:nth-child(1):hover .content-visual{animation:iconOrbit 2.1s ease-in-out infinite}
.sol-card:nth-child(2):hover .content-visual{animation:chartLift 1.5s ease-in-out infinite}
.sol-card:nth-child(3):hover .content-visual{animation:scanPulse 1.35s ease-in-out infinite}
.sol-card:nth-child(4):hover .content-visual{animation:syncNudge 1.2s ease-in-out infinite}

.feat-card:nth-child(1):hover{transform:translateY(-7px) rotateZ(-.45deg)}
.feat-card:nth-child(2):hover{transform:translateY(-5px) translateX(3px)}
.feat-card:nth-child(3):hover{transform:translateY(-8px) rotateX(4deg)}
.feat-card:nth-child(4):hover{transform:translateY(-6px) scale(1.015)}
.feat-card:nth-child(5):hover{transform:translateY(-7px) rotateZ(.55deg)}
.feat-card:nth-child(6):hover{transform:translateY(-5px) rotateY(-3deg)}
.feat-card:nth-child(7):hover{transform:translateY(-8px) scale(1.012)}
.feat-card:nth-child(8):hover{transform:translateY(-6px) rotateY(3deg)}
.feat-card:nth-child(9):hover{transform:translateY(-5px) rotateZ(-.35deg)}
.feat-card:nth-child(10):hover{transform:translateY(-7px) rotateX(-3deg)}
.feat-card:nth-child(1):hover .feature-visual img,
.feat-card:nth-child(6):hover .feature-visual img{transform:translateY(-4%) scale(1.065)}
.feat-card:nth-child(2):hover .feature-visual img,
.feat-card:nth-child(8):hover .feature-visual img{transform:translateX(-3%) scale(1.06)}
.feat-card:nth-child(3):hover .feature-visual img,
.feat-card:nth-child(7):hover .feature-visual img{transform:translateY(3%) scale(1.06)}
.feat-card:nth-child(4):hover .feature-visual img{filter:saturate(1.3) contrast(1.12) brightness(1.12) hue-rotate(8deg)}
.feat-card:nth-child(5):hover .feature-visual img{filter:saturate(1.2) contrast(1.1) brightness(1.1) hue-rotate(-10deg)}
.feat-card:nth-child(9):hover .feature-visual img{transform:scale(1.07);filter:saturate(1.18) contrast(1.12)}
.feat-card:nth-child(10):hover .feature-visual img{transform:translateX(2%) scale(1.06);filter:saturate(1.2) brightness(1.08)}

.beta-card:hover .tag,
.pwa-step:hover .step-no{
  animation:statusBlink 1.1s ease-in-out infinite;
}
.beta-card::before{
  inset:-30% -60%;
  opacity:0;
  background:linear-gradient(115deg,transparent 42%,rgba(103,232,249,.16),rgba(255,255,255,.16),transparent 58%);
  transform:translateX(-62%) rotate(.001deg);
}
.beta-card:hover::before{opacity:.9;transform:translateX(62%) rotate(.001deg)}
#beta .version-compare{grid-template-columns:.84fr 1.16fr;align-items:stretch}
#beta .base-app{
  opacity:.86;
  transform:scale(.97);
  background:linear-gradient(155deg,rgba(9,23,43,.62),rgba(5,11,24,.72));
}
#beta .base-app .btn-primary{
  background:linear-gradient(100deg,rgba(94,217,255,.78),rgba(0,184,255,.68));
  box-shadow:0 0 24px rgba(0,184,255,.18);
}
#beta .base-app:hover{transform:translateY(-4px) scale(.985)}
.version-points{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.version-points span{font-size:11.5px;font-weight:800;color:var(--text-1);padding:6px 10px;border-radius:999px;
  border:1px solid rgba(103,232,249,.22);background:rgba(34,211,238,.06)}
#beta .beta-upgrade{
  min-height:calc(100% + 18px);
  transform:translateY(-10px);
  border-color:rgba(167,139,250,.78)!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(139,92,246,.28),transparent 34%),
    radial-gradient(circle at 88% 24%,rgba(34,211,238,.18),transparent 30%),
    linear-gradient(145deg,rgba(15,23,66,.88),rgba(4,10,24,.78));
  box-shadow:0 0 64px rgba(139,92,246,.27),0 0 44px rgba(34,211,238,.18),inset 0 0 30px rgba(139,92,246,.12);
}
#beta .beta-upgrade::after{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:18px;
  pointer-events:none;
  border:1px solid rgba(167,139,250,.2);
  opacity:.9;
}
#beta .upgrade-ribbon{
  position:absolute;
  top:18px;
  right:-42px;
  z-index:5;
  width:170px;
  text-align:center;
  transform:rotate(34deg);
  font-family:"Inter",sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:.16em;
  color:#020817;
  background:linear-gradient(90deg,#67e8f9,#a78bfa);
  box-shadow:0 0 24px rgba(139,92,246,.35);
}
#beta .beta-points span{
  color:#fff;
  border-color:rgba(167,139,250,.44);
  background:linear-gradient(120deg,rgba(34,211,238,.14),rgba(139,92,246,.18));
}
#beta .beta-upgrade:hover{
  transform:translateY(-16px) scale(1.022);
  box-shadow:0 0 78px rgba(139,92,246,.38),0 0 52px rgba(34,211,238,.24),inset 0 0 34px rgba(139,92,246,.16);
}
#beta .beta-card.beta:not(.beta-upgrade):hover{
  box-shadow:0 0 48px rgba(139,92,246,.3),inset 0 0 24px rgba(139,92,246,.08);
}
#beta .beta-upgrade .btn-ghost{
  color:#fff;
  border-color:rgba(167,139,250,.72);
  background:linear-gradient(100deg,rgba(34,211,238,.16),rgba(139,92,246,.28));
  box-shadow:0 0 38px rgba(139,92,246,.24);
}
#beta .beta-upgrade .btn-ghost:hover{
  background:linear-gradient(100deg,rgba(34,211,238,.28),rgba(139,92,246,.42));
}
.pwa-step::before{
  inset:auto;
  left:50%;
  top:44%;
  width:96px;
  height:96px;
  opacity:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(103,232,249,.24),transparent 66%);
  transform:translate(-50%,-50%) scale(.32);
}
.pwa-step:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1.55)}
.pwa-step:nth-child(1):hover{transform:translateY(-7px) rotateZ(-.5deg)}
.pwa-step:nth-child(2):hover{transform:translateY(-6px) scale(1.018)}
.pwa-step:nth-child(3):hover{transform:translateY(-7px) rotateZ(.5deg)}

.biz-card:nth-child(1):hover{transform:translateY(-7px) rotateZ(-.55deg);box-shadow:0 0 36px rgba(34,211,238,.2)}
.biz-card:nth-child(2):hover{transform:translateY(-5px) translateX(4px);box-shadow:0 0 36px rgba(139,92,246,.2)}
.biz-card:nth-child(3):hover{transform:translateY(-7px) rotateY(-5deg);box-shadow:0 0 38px rgba(52,211,153,.16)}
.biz-card:nth-child(1):hover .content-visual{animation:chartLift 1.5s ease-in-out infinite}
.biz-card:nth-child(2):hover .content-visual{animation:syncNudge 1.25s ease-in-out infinite}
.biz-card:nth-child(3):hover .content-visual{animation:shieldSweep 1.45s ease-in-out infinite}
.biz-card::before{
  left:22px;
  right:22px;
  top:auto;
  bottom:22px;
  height:1px;
  opacity:0;
  background:
    radial-gradient(circle at 0 50%,rgba(103,232,249,.95) 0 3px,transparent 4px),
    radial-gradient(circle at 50% 50%,rgba(139,92,246,.9) 0 3px,transparent 4px),
    radial-gradient(circle at 100% 50%,rgba(103,232,249,.95) 0 3px,transparent 4px),
    linear-gradient(90deg,rgba(103,232,249,.5),rgba(139,92,246,.5),rgba(103,232,249,.5));
  transform:scaleX(.3);
  transform-origin:left center;
}
.biz-card:hover::before{opacity:1;transform:scaleX(1)}

.faq:nth-child(3n+1):hover{transform:translateX(5px)}
.faq:nth-child(3n+2):hover{transform:translateX(-5px)}
.faq:nth-child(3n):hover{transform:translateY(-3px)}
.faq:hover summary .q{animation:aiFlicker 1.1s ease-in-out infinite}

@keyframes digitPop{
  0%{transform:translateY(0);text-shadow:var(--glow-text-num)}
  38%{transform:translateY(-5px) scale(1.035);text-shadow:0 0 28px rgba(103,232,249,.9)}
  100%{transform:none;text-shadow:var(--glow-text-num)}
}
@keyframes phoneTilt{
  from{transform:translateY(0) rotateZ(0)}
  to{transform:translateY(-8px) rotateZ(.8deg)}
}
@keyframes phoneScreenScroll{
  0%,100%{transform:translateY(0) scale(1.045)}
  46%{transform:translateY(-9%) scale(1.045)}
  72%{transform:translateY(-4%) scale(1.045)}
}
@keyframes panelFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
@keyframes statusBlink{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.38);text-shadow:0 0 14px currentColor}
}
@keyframes rocketCruise{
  0%{transform:translate3d(-14vw,8vh,0) rotate(-18deg) scale(.58);opacity:0}
  6%{opacity:.18}
  18%{opacity:.34}
  42%{opacity:.46}
  72%{opacity:.3}
  100%{transform:translate3d(118vw,-76vh,0) rotate(-18deg) scale(.34);opacity:0}
}
@keyframes rocketFlame{
  from{transform:scaleX(.72);opacity:.74}
  to{transform:scaleX(1.18);opacity:1}
}
@keyframes aiFlicker{
  0%,100%{opacity:1;text-shadow:0 0 12px rgba(103,232,249,.65)}
  42%{opacity:.82;text-shadow:0 0 22px rgba(139,92,246,.75)}
  60%{opacity:1}
}
@keyframes syncNudge{
  0%,100%{transform:translateX(0)}
  45%{transform:translateX(5px)}
  70%{transform:translateX(-2px)}
}
@keyframes iconOrbit{
  0%,100%{transform:rotate(0) scale(1)}
  50%{transform:rotate(4deg) scale(1.06)}
}
@keyframes chartLift{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-8px) scale(1.05)}
}
@keyframes chipPulse{
  0%,100%{filter:drop-shadow(0 0 18px rgba(45,225,255,.42))}
  50%{filter:drop-shadow(0 0 30px rgba(139,92,246,.62)) brightness(1.16)}
}
@keyframes shieldSweep{
  0%,100%{transform:scale(1)}
  45%{transform:scale(1.06) rotateY(-8deg)}
}
@keyframes scanPulse{
  0%,100%{transform:translateY(0);filter:brightness(1)}
  50%{transform:translateY(-4px);filter:brightness(1.2)}
}

@media (max-width:520px){
  .stat:hover,
  .feat-card:hover,
  .pwa-step:hover{
    transform:translateY(-4px);
  }
  #beta .version-compare{grid-template-columns:1fr}
  #beta .base-app,#beta .beta-upgrade{transform:none;min-height:auto;opacity:1}
  #beta .beta-upgrade:hover{transform:translateY(-4px)}
  #beta .upgrade-ribbon{right:-48px;top:16px}
}
@media (prefers-reduced-motion:reduce){
  .stat,
  .hero-phone-real,
  .hero-phone-real img,
  .hero-dashboard-card,
  .device-hero-img,
  .device-phone-img,
  .device-card-img,
  .prob-card,
  .sol-card,
  .feat-card,
  .beta-card,
  .pwa-step,
  .biz-card,
  .faq{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}