/* ===== Homepage extras: typing headline, works strip, board demo, reviews ===== */

/* Typing headline */
.hb-type-wrap{white-space:nowrap;}
.hb-type{background:linear-gradient(90deg,#A78BFA,#F472B6 55%,#FB923C);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hb-caret{display:inline-block;width:3px;height:.9em;margin-left:4px;vertical-align:-0.08em;border-radius:2px;background:#C4B5FD;animation:hbBlink 1s steps(1) infinite;}
@keyframes hbBlink{50%{opacity:0;}}
@media (max-width:480px){.hb-type-wrap{display:block;min-height:1.35em;}.hb-type-wrap + br{display:none;}}

/* Stats count-up keeps its width steady */
.stat-num{font-variant-numeric:tabular-nums;}
a.stat-card:hover{border-color:rgba(124,58,237,0.45)!important;}

/* Works strip */
.hb-strip{position:relative;overflow:hidden;padding:34px 0 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.hb-strip-track{display:flex;gap:16px;width:max-content;animation:hbStrip calc(var(--n,8) * 4.5s) linear infinite;}
.hb-strip:hover .hb-strip-track{animation-play-state:paused;}
@keyframes hbStrip{to{transform:translateX(calc(-50% - 8px));}}
.hb-strip-item{position:relative;flex:none;width:250px;height:156px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.10);background:#111;text-decoration:none;transition:transform .3s,border-color .3s;}
.hb-strip-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s;}
.hb-strip-item span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 10px;font-size:13px;font-weight:600;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;}
.hb-strip-item:hover{transform:translateY(-4px);border-color:rgba(167,139,250,0.55);}
.hb-strip-item:hover img{transform:scale(1.06);}
.hb-strip-item:hover span{opacity:1;transform:none;}
@media (max-width:768px){.hb-strip{padding-top:24px;}.hb-strip-item{width:190px;height:120px;}.hb-strip-item span{opacity:1;transform:none;font-size:12px;}}

/* Free board section */
.hb-board{max-width:1180px;margin:30px auto 46px;padding:0 40px;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;}
.hb-kicker{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#34D399;background:rgba(52,211,153,0.10);border:1px solid rgba(52,211,153,0.28);padding:6px 12px;border-radius:999px;margin-bottom:14px;}
.hb-board h2{font-size:32px;line-height:1.3;font-weight:800;color:var(--text-white);margin-bottom:12px;}
.hb-board h2 span{background:linear-gradient(90deg,#A78BFA,#F472B6);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hb-board p{color:var(--text-gray);font-size:15px;line-height:1.7;margin-bottom:16px;}
.hb-board ul{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:9px;}
.hb-board li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--text-gray);}
.hb-board li i{color:#A78BFA;margin-top:4px;font-size:12px;}
.hb-board .btn-primary{display:inline-flex;}
.hb-demo{position:relative;}
.hb-demo::before{content:"";position:absolute;inset:8% 6%;background:radial-gradient(closest-side,rgba(124,58,237,.45),transparent);filter:blur(30px);z-index:0;}
.hb-win{position:relative;z-index:1;border-radius:18px;border:1px solid rgba(255,255,255,0.12);background:linear-gradient(160deg,rgba(255,255,255,0.07),rgba(255,255,255,0.02)),#0E0E12;box-shadow:0 40px 80px -30px rgba(0,0,0,.9);overflow:hidden;aspect-ratio:16/10;}
.hb-bar{height:40px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid rgba(255,255,255,0.07);}
.hb-bar>i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18);}
.hb-bar>i:first-child{background:#F87171;}.hb-bar>i:nth-child(2){background:#FBBF24;}.hb-bar>i:nth-child(3){background:#34D399;}
.hb-tabs{margin-left:16px;display:flex;gap:6px;}
.hb-tabs span{font-size:11px;font-weight:700;padding:5px 11px;border-radius:999px;color:#A3A8B5;border:1px solid rgba(255,255,255,.1);}
.hb-t1{animation:hbTab1 12s infinite;}.hb-t2{animation:hbTab2 12s infinite;}
@keyframes hbTab1{0%,46%{background:rgba(124,58,237,.35);color:#fff;}50%,96%{background:transparent;color:#A3A8B5;}100%{background:rgba(124,58,237,.35);color:#fff;}}
@keyframes hbTab2{0%,46%{background:transparent;color:#A3A8B5;}50%,96%{background:rgba(124,58,237,.35);color:#fff;}100%{background:transparent;color:#A3A8B5;}}
.hb-scene{position:absolute;left:0;right:0;top:40px;bottom:0;padding:18px;}
.hb-kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;animation:hbSceneA 12s infinite;}
.hb-mind{animation:hbSceneB 12s infinite;}
@keyframes hbSceneA{0%,44%{opacity:1;transform:none;}50%,94%{opacity:0;transform:scale(.97);}100%{opacity:1;transform:none;}}
@keyframes hbSceneB{0%,46%{opacity:0;transform:scale(1.03);}52%,94%{opacity:1;transform:none;}100%{opacity:0;}}
.hb-col{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.07);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;}
.hb-col b{font-size:11px;color:#C9CCD6;font-weight:700;margin-bottom:2px;}
.hb-card{height:34px;border-radius:8px;background:rgba(255,255,255,0.09);border:1px solid rgba(255,255,255,0.08);}
.hb-card.s{height:24px;opacity:.7;}
.hb-slot{height:34px;border-radius:8px;border:1.5px dashed rgba(167,139,250,.5);animation:hbSlot 12s infinite;}
@keyframes hbSlot{0%,10%{opacity:0;}16%,28%{opacity:1;}32%,100%{opacity:0;}}
.hb-move{position:relative;background:linear-gradient(90deg,rgba(124,58,237,.75),rgba(167,139,250,.55));border-color:rgba(196,181,253,.6);z-index:2;animation:hbMove 12s cubic-bezier(.5,0,.3,1) infinite;}
.hb-move em{position:absolute;left:10px;top:12px;width:55%;height:6px;border-radius:3px;background:rgba(255,255,255,.75);}
@keyframes hbMove{0%,8%{transform:translate(0,0) rotate(0);box-shadow:none;}14%{transform:translate(0,-4px) rotate(-2deg);box-shadow:0 14px 26px -10px rgba(124,58,237,.9);}30%{transform:translate(calc(100% + 32px),-2px) rotate(2deg);box-shadow:0 14px 26px -10px rgba(124,58,237,.9);}34%,46%{transform:translate(calc(100% + 32px),0) rotate(0);box-shadow:none;}52%,100%{transform:translate(0,0);}}
.hb-cursor{position:absolute;right:14%;top:45%;width:16px;height:20px;z-index:3;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));animation:hbCur 12s infinite;}
@keyframes hbCur{0%,4%{opacity:0;transform:translate(14px,16px);}9%,34%{opacity:1;transform:none;}40%,100%{opacity:0;transform:translate(10px,14px);}}
.hb-mind svg{position:absolute;inset:18px;width:calc(100% - 36px);height:calc(100% - 36px);}
.hb-mind path{fill:none;stroke:#A78BFA;stroke-width:2;stroke-dasharray:6 6;opacity:.75;animation:hbDraw 12s infinite;}
.hb-mind path:nth-child(2){stroke:#34D399;}.hb-mind path:nth-child(3){stroke:#60A5FA;}.hb-mind path:nth-child(4){stroke:#F59E0B;}
@keyframes hbDraw{0%,50%{stroke-dashoffset:120;opacity:0;}58%,94%{stroke-dashoffset:0;opacity:.8;}100%{opacity:0;}}
.hb-node{position:absolute;transform:translate(-50%,-50%);padding:8px 12px;border-radius:10px;font-size:11px;font-weight:700;color:#F4F4F6;white-space:nowrap;display:flex;align-items:center;gap:6px;background:linear-gradient(155deg,rgba(255,255,255,.16),rgba(255,255,255,.05)),rgba(28,28,34,.85);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 24px -12px rgba(0,0,0,.9);animation:hbPop 12s infinite;}
.hb-node i{width:7px;height:7px;border-radius:50%;}
.hb-node.c{left:50%;top:50%;background:linear-gradient(135deg,#8B5CF6,#6D28D9);padding:12px 18px;font-size:12px;box-shadow:0 0 30px rgba(124,58,237,.6);}
.hb-node.n1{left:76%;top:23%;animation-delay:.15s;}.hb-node.n2{left:76%;top:77%;animation-delay:.3s;}
.hb-node.n3{left:24%;top:23%;animation-delay:.45s;}.hb-node.n4{left:24%;top:77%;animation-delay:.6s;}
@keyframes hbPop{0%,50%{opacity:0;transform:translate(-50%,-50%) scale(.7);}56%,94%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;}}
@media (max-width:900px){.hb-board{grid-template-columns:1fr;gap:28px;padding:0 16px;margin:20px auto 36px;}.hb-board h2{font-size:24px;}.hb-demo{order:-1;}}
@media (max-width:480px){.hb-scene{padding:12px;}.hb-col{padding:7px;gap:6px;}.hb-card{height:26px;}.hb-card.s{height:18px;}.hb-slot{height:26px;}.hb-node{font-size:10px;padding:6px 9px;}}

/* Reviews */
.hb-rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.hb-rv{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:12px;}
.hb-rv-stars{color:#F59E0B;font-size:13px;letter-spacing:2px;}
.hb-rv p{color:var(--text-gray);font-size:14px;line-height:1.7;margin:0;flex:1;}
.hb-rv-who{display:flex;align-items:center;gap:10px;}
.hb-rv-who span{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#7C3AED,#A78BFA);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;}
.hb-rv-who b{display:block;color:var(--text-white);font-size:13px;}
.hb-rv-who small{color:var(--text-dim);font-size:12px;}
@media (max-width:900px){.hb-rv-grid{grid-template-columns:1fr;}}

/* Light theme */
[data-theme="light"] .hb-strip-item{border-color:#E2E8F0;background:#fff;}
[data-theme="light"] .hb-win{background:#0E0E12;}
[data-theme="light"] .hb-kicker{color:#047857;background:#ECFDF5;border-color:#A7F3D0;}

@media (prefers-reduced-motion:reduce){
  .hb-strip-track,.hb-caret,.hb-demo *{animation:none!important;}
  .hb-mind{opacity:0;}
}