/* TeamVector hero — REAL product screenshot in a browser frame, tilted in
   subtle 3D with mouse parallax. Honest product-first hero (Linear/Stripe). */
.hero .mk.hero3d{width:150px;height:150px;margin:0 auto 28px;}
/* ---- CSS-3D logo cubes ---- */
.l3d{width:100%;height:100%;display:flex;align-items:center;justify-content:center;perspective:620px;}
.l3d-rot{position:relative;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-15deg);}
.l3d-cube{position:absolute;width:var(--s);height:var(--s);transform-style:preserve-3d;
  left:0;top:0;margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);
  transform:translate3d(var(--x),var(--y),0);}
.l3d-face{position:absolute;width:var(--s);height:var(--s);border-radius:6px;
  box-shadow:inset 0 0 14px rgba(94,234,212,.35),inset 0 0 0 1px rgba(255,255,255,.10);}
.l3d-face.fz{transform:translateZ(calc(var(--s)/2));background:linear-gradient(135deg,#2DD4BF,#0F766E);}
.l3d-face.bz{transform:rotateY(180deg) translateZ(calc(var(--s)/2));background:linear-gradient(135deg,#0c5750,#08312d);}
.l3d-face.rt{transform:rotateY(90deg) translateZ(calc(var(--s)/2));background:linear-gradient(135deg,#0f8d80,#0a443e);}
.l3d-face.lf{transform:rotateY(-90deg) translateZ(calc(var(--s)/2));background:linear-gradient(135deg,#11a596,#0c5750);}
.l3d-face.tp{transform:rotateX(90deg) translateZ(calc(var(--s)/2));background:linear-gradient(135deg,#7af3e2,#2DD4BF);}
.l3d-face.bt{transform:rotateX(-90deg) translateZ(calc(var(--s)/2));background:#082b28;}

/* ---- hero background: task tabs travelling along the project timeline ---- */
.hero .hero-bars{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  -webkit-mask-image:radial-gradient(58% 46% at 50% 44%,transparent 0%,transparent 34%,#000 76%);
  mask-image:radial-gradient(58% 46% at 50% 44%,transparent 0%,transparent 34%,#000 76%);}
.hero .hb-grid{position:absolute;inset:0;opacity:.55;
  background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:7.69% 100%;}
.hero .hb-today{position:absolute;top:6%;bottom:6%;width:1.5px;background:linear-gradient(180deg,transparent,rgba(94,234,212,.55),transparent);
  box-shadow:0 0 10px rgba(94,234,212,.4);animation:hbToday 14s linear infinite;}
@keyframes hbToday{0%{left:8%}100%{left:92%}}
.hero .hb-chip{position:absolute;height:16px;border-radius:8px;display:flex;align-items:center;gap:6px;padding:0 9px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.02em;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;
  border:1px solid rgba(255,255,255,.07);animation:hbMove linear infinite;will-change:transform;}
.hero .hb-chip .f{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:rgba(94,234,212,.22);}
.hero .hb-chip .t{position:relative;}
@keyframes hbMove{0%{transform:translateX(-130%);opacity:0}8%{opacity:.55}92%{opacity:.55}100%{transform:translateX(60vw);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero .hb-chip,.hero .hb-today{animation:none;}.hero .hb-chip{opacity:.3;}}
.hstage-wrap{position:relative;z-index:2;max-width:1200px;margin:46px auto 0;padding:0 28px;perspective:2000px;}
.hero h1 .hw-word{margin-right:.16em;}
.hero h1 .hw-word:last-child{margin-right:0;}
.hstage{position:relative;will-change:transform;transform:rotateX(7deg);
  transition:transform .3s cubic-bezier(.22,1,.36,1);opacity:0;}
.hstage.shown{opacity:1;}
.hstage.float{animation:hsFloat 10s ease-in-out infinite;}
@keyframes hsFloat{0%,100%{transform:rotateX(7deg) translateY(0)}50%{transform:rotateX(7deg) translateY(-9px)}}

/* browser frame */
.hbrowser{position:relative;border-radius:14px;overflow:hidden;background:#0b1018;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.02) inset,0 1px 0 rgba(255,255,255,.06) inset;}
.hb-bar{display:flex;align-items:center;gap:14px;padding:11px 16px;background:#11161f;border-bottom:1px solid rgba(255,255,255,.07);}
.hb-dots{display:flex;gap:7px;flex:none;}
.hb-dots i{width:11px;height:11px;border-radius:50%;background:#2a323d;}
.hb-dots i:nth-child(1){background:#ff5f57;}.hb-dots i:nth-child(2){background:#febc2e;}.hb-dots i:nth-child(3){background:#28c840;}
.hb-url{display:inline-flex;align-items:center;gap:8px;margin:0 auto;font-family:'JetBrains Mono',monospace;font-size:12px;color:#8B97A5;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:6px 16px;max-width:60%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hb-lock{width:11px;height:11px;border-radius:2px;border:1.6px solid #2DD4BF;border-bottom-width:6px;flex:none;opacity:.8;}
.hb-meta{flex:none;font-family:'JetBrains Mono',monospace;font-size:11px;color:#5C6775;}

/* screenshot */
.hb-shot{position:relative;max-height:600px;overflow:hidden;background:#0d1520;}
.hb-shot img{display:block;width:100%;height:auto;}
.hb-shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(180deg,transparent,rgba(11,16,24,.0) 0%,rgba(7,10,15,.0));pointer-events:none;}
/* soft glare sweep on load */
.hb-glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.07) 47%,transparent 64%);
  transform:translateX(-100%);}
.hstage.shown .hb-glare{animation:hsGlare 1.6s ease 1.1s 1;}
@keyframes hsGlare{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* aurora bg behind window */
.hero .aurora{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hero .aurora::before,.hero .aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;will-change:opacity;}
.hero .aurora::before{width:54vw;height:40vw;left:10%;top:-6%;background:radial-gradient(circle,rgba(20,184,166,.22),transparent 70%);}
.hero .aurora::after{width:48vw;height:36vw;right:6%;top:8%;background:radial-gradient(circle,rgba(94,234,212,.12),transparent 70%);}
@keyframes hsAur1{0%,100%{transform:translate(0,0)}50%{transform:translate(6%,8%)}}
@keyframes hsAur2{0%,100%{transform:translate(0,0)}50%{transform:translate(-7%,5%)}}

@media(max-width:980px){.hstage{transform:rotateX(5deg);}.hstage.float{animation:none;}.hb-shot{max-height:440px;}.hb-meta{display:none;}}
@media(max-width:560px){.hstage-wrap{padding-left:14px;padding-right:14px;}.hb-shot{max-height:320px;}.hb-url{max-width:70%;}}
@media(prefers-reduced-motion:reduce){.hstage,.hstage.float{animation:none;transform:rotateX(5deg);opacity:1;}.hstage.shown .hb-glare{animation:none;}.hero .aurora::before,.hero .aurora::after{animation:none;}}