@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --bg:      #0B0E11;
  --bg2:     #10141a;
  --card:    #12161B;
  --card2:   #171c22;
  --teal:    #f7ac0c;   
  --teal-l:  #db891e;   
  --amber:   #e09f12;   
  --amber-l: #FFC768;
  --text:    #ECEEF0;
  --muted:   #7A8590;
  --border:  rgba(255,255,255,0.08);
  --hh:      76px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background-color:var(--bg);
  background-image:
    linear-gradient(180deg, rgba(6, 6, 7, 0.9) 0%, rgba(5, 7, 10, 0.96) 100%),
    url('images/background.png');
  background-position:center;
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-size:100%;
  animation:bgzoom 30s ease-in-out infinite alternate;
  color:var(--text);
  font-family:'Inter',sans-serif;
  line-height:1.6; overflow-x:hidden;
}
@keyframes bgzoom{
  0%{background-size:100%;}
  100%{background-size:118%;}
}

@media (prefers-reduced-motion: reduce){
  body{animation:none;}
}
h1,h2,h3,h4{font-family:'Sora',sans-serif; font-weight:700; letter-spacing:-0.02em;}
a{color:inherit; text-decoration:none;}
.mono{font-family:'IBM Plex Mono',monospace;}
img{max-width:100%; display:block;}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
section{padding:120px 0;}
@media(max-width:768px){section{padding:72px 0;}}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:var(--hh); display:flex; align-items:center;
  background:rgba(11,14,17,0.75); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  transition:background .3s;
}
header .wrap{display:flex; align-items:center; justify-content:space-between; width:100%;}
.logo{font-family:'Sora',sans-serif; font-weight:800; font-size:20px; display:flex; align-items:center; gap:2px;}
.logo img{height:80px; width:auto; display:block; margin-right:3px;}
.logo .dot{color:var(--amber);}
.logo span.sub{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted); font-weight:400; margin-left:8px; letter-spacing:.15em; text-transform:uppercase;}
nav.links{display:flex; gap:8px; align-items:center;}
nav.links a{
  font-size:14px; font-weight:500; color:var(--muted); padding:8px 16px; border-radius:8px;
  transition:color .2s, background .2s; position:relative;
}
nav.links a:hover, nav.links a.active{color:var(--text); background:rgba(255,255,255,0.05);}
nav.links a.active{color:var(--teal-l);}
.nav-cta{
  background:linear-gradient(135deg,var(--teal),var(--amber)); color:#08110F !important;
  font-weight:700 !important; padding:9px 20px !important; border-radius:8px;
}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1100;}
.burger span{width:24px; height:2px; background:var(--text); transition:transform .3s ease, opacity .3s ease;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media(max-width:860px){
  nav.links{position:fixed; top:0; right:-100%; height:100vh; width:min(320px,80vw);
    background:rgba(11,14,17,0.98); flex-direction:column; justify-content:center; align-items:flex-start;
    padding:40px; gap:6px; transition:right .35s ease; border-left:1px solid var(--border);}
  nav.links.open{right:0;}
  nav.links a{width:100%; font-size:18px; padding:14px 0;}
  .burger{display:flex;}
}

/* ---------- HERO SLIDESHOW (multiple crossfading images) ---------- */
.hero-bg{position:absolute; inset:0; overflow:hidden; z-index:0;}
.hero-bg-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0;
  animation:kenburns 26s ease-in-out infinite alternate;
  transition:opacity 1.8s ease-in-out;
  will-change:transform, opacity;
}
.hero-bg-img.active{
  opacity:1;
}
@media (prefers-reduced-motion: reduce){
  .hero-bg-img{animation:none;}
}

/* ---------- HERO / WAVEFORM ---------- */
.hero{
  min-height:100vh; display:flex; align-items:center; position:relative;
  padding-top:var(--hh); overflow:hidden;
}
.hero-bg{position:absolute; inset:0; overflow:hidden; z-index:0;}
.hero-bg img{
  width:100%; height:100%; object-fit:cover;
  animation:kenburns 26s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenburns{
  0%{transform:scale(1.0) translate(0,0);}
  100%{transform:scale(1.12) translate(-1.5%,-1.5%);}
}
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(11,14,17,.55) 0%, rgba(11,14,17,.75) 55%, rgba(11,14,17,.96) 100%),
             linear-gradient(90deg, rgba(11,14,17,.5), transparent 60%);
}
#signal-canvas{position:absolute; inset:0; width:100%; height:100%; opacity:.55; pointer-events:none; z-index:1;}
.hero .wrap{position:relative; z-index:2;}
@media (prefers-reduced-motion: reduce){ .hero-bg img{animation:none;} }
.eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--teal-l); letter-spacing:.25em;
  text-transform:uppercase; display:flex; align-items:center; gap:10px; margin-bottom:24px;
}
.eyebrow::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 12px var(--amber); animation:pulse 1.6s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.hero h1{font-size:clamp(40px,6vw,76px); line-height:1.05; max-width:900px;}
.hero h1 .grad{background:linear-gradient(90deg,var(--teal-l),var(--amber-l)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p.lead{font-size:18px; color:var(--muted); max-width:560px; margin:24px 0 36px;}
.btn-row{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:10px;
  font-weight:600; font-size:15px; transition:transform .2s, box-shadow .2s; cursor:pointer; border:none;
}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--amber)); color:#08110F;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 30px rgba(30,140,130,.3);}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--text);}
.btn-ghost:hover{border-color:var(--teal-l); color:var(--teal-l);}

/* ---------- STATS ---------- */
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:80px;}
@media(max-width:768px){.stats{grid-template-columns:repeat(2,1fr);}}
.stat-n{font-family:'Sora',sans-serif; font-size:40px; font-weight:800; color:var(--teal-l);}
.stat-l{font-size:13px; color:var(--muted); margin-top:4px;}

/* ---------- REVEAL ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease;}
.reveal.revealed{opacity:1; transform:translateY(0);}

/* ---------- SCROLL PROGRESS BAR ---------- */
#mhub-scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--teal-l),var(--amber-l));
  z-index:2000; transition:width .1s linear;
  box-shadow:0 0 8px rgba(47,187,173,.5);
}

/* ---------- SCROLL-TO-EXPLORE CUE ---------- */
.scroll-cue{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; z-index:3; background:none; border:none;
}
.scroll-cue span{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); transition:color .2s;
}
.scroll-cue:hover span{color:var(--teal-l);}
.scroll-cue svg{width:22px; height:34px;}
.scroll-cue .cue-bar{stroke:var(--teal-l); stroke-width:2; fill:none;}
.scroll-cue .cue-dot{fill:var(--amber-l); animation:scroll-cue-move 1.8s ease-in-out infinite;}
@keyframes scroll-cue-move{
  0%{transform:translateY(0); opacity:1;}
  70%{transform:translateY(16px); opacity:0;}
  100%{transform:translateY(0); opacity:0;}
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue .cue-dot{animation:none;}
}

/* ---------- SECTION HEADERS ---------- */
.sec-head{max-width:640px; margin-bottom:56px;}
.sec-head .eyebrow{margin-bottom:14px;}
.sec-head h2{font-size:clamp(28px,4vw,42px);}
.sec-head p{color:var(--muted); margin-top:14px; font-size:16px;}

/* ---------- CARDS / GRID ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media(max-width:900px){.grid3,.grid2{grid-template-columns:1fr;}}
.card{
  background:var(--card); border:1px solid var(--border); border-radius:16px; padding:32px;
  transition:transform .25s, border-color .25s;
}
.card:hover{transform:translateY(-6px); border-color:var(--teal);}
.card .icon{width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(30,140,130,.12); color:var(--teal-l); font-size:20px; margin-bottom:20px;}
.card h3{font-size:19px; margin-bottom:10px;}
.card p{color:var(--muted); font-size:14.5px;}
.card .tag{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--amber);
  background:rgba(242,169,59,.1); border:1px solid rgba(242,169,59,.25); padding:4px 10px; border-radius:6px; margin-bottom:16px;}

/* ---------- DIVIDER (signature) ---------- */
.signal-divider{height:60px; display:flex; align-items:center; justify-content:center; margin:0 auto;}
.signal-divider svg{width:100%; max-width:400px; height:40px;}
.signal-divider path{
  stroke-dasharray:12 8;
  animation:signal-flow 1.4s linear infinite;
}
.signal-divider path:nth-of-type(2){
  animation-duration:1.8s;
  animation-direction:reverse;
}
@keyframes signal-flow{
  to{stroke-dashoffset:-40;}
}
@media (prefers-reduced-motion: reduce){
  .signal-divider path{animation:none;}
}

/* ---------- WORK / PORTFOLIO ---------- */
.filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px;}
.filter-btn{
  font-family:'IBM Plex Mono',monospace; font-size:12px; padding:9px 18px; border-radius:20px;
  border:1px solid var(--border); background:transparent; color:var(--muted); cursor:pointer; transition:all .2s;
}
.filter-btn.active, .filter-btn:hover{border-color:var(--teal-l); color:var(--teal-l); background:rgba(30,140,130,.08);}
.work-card{
  border-radius:16px; overflow:hidden; background:var(--card); border:1px solid var(--border);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.work-card:hover{
  transform:translateY(-6px);
  border-color:var(--teal-l);
  box-shadow:0 12px 32px rgba(0,0,0,.35), 0 0 0 1px rgba(47,187,173,.15);
}
.work-card .thumb{aspect-ratio:16/10; background:linear-gradient(135deg,var(--card2),var(--bg2)); position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.work-card .thumb .mono{color:var(--muted); font-size:12px; position:relative; z-index:1;}
.work-card .thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease, filter .5s ease; filter:brightness(.85);}
.work-card:hover .thumb img{transform:scale(1.08); filter:brightness(1);}

/* ---------- PRICING TABS ---------- */
.price-tabs{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.price-panel{display:none;}
.price-panel.active{display:block;}
.price-card-row{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:18px 22px; border-radius:12px; background:var(--card); border:1px solid var(--border); margin-bottom:12px;
}
.price-card-row:hover{border-color:var(--teal);}
.price-card-row .pcr-name{font-weight:600; font-size:15px;}
.price-card-row .pcr-desc{color:var(--muted); font-size:13px; margin-top:3px;}
.price-card-row .pcr-val{font-family:'IBM Plex Mono',monospace; color:var(--amber-l); font-size:14px; white-space:nowrap; text-align:right;}
.price-table-note{color:var(--muted); font-size:13px; margin-top:20px; font-family:'IBM Plex Mono',monospace;}

/* ---------- PRICING GLASS TABLE (matches portfolio repo style) ---------- */
.glass-card{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  padding:8px 28px; margin-bottom:12px; overflow-x:auto;
}
table.pricing-table{width:100%; border-collapse:collapse; font-size:15px;}
table.pricing-table th{
  text-align:left; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--amber); padding:18px 12px; border-bottom:1px solid var(--border);
}
table.pricing-table td{padding:16px 12px; border-bottom:1px solid var(--border); color:var(--text); vertical-align:top;}
table.pricing-table td:last-child, table.pricing-table th:last-child{
  color:var(--teal-l); font-family:'IBM Plex Mono',monospace; font-size:14px; white-space:nowrap; text-align:right;
}
table.pricing-table td:nth-child(2){color:var(--muted); font-size:14px;}
table.pricing-table tbody tr:last-child td{border-bottom:none;}
table.pricing-table tbody tr:hover td{background:rgba(255,255,255,0.02);}
.pricing-group-title{font-size:20px; margin:40px 0 16px;}
@media(max-width:700px){
  table.pricing-table{font-size:13px;}
  table.pricing-table th, table.pricing-table td{padding:12px 8px;}
}

/* ---------- PARALLAX CTA BG ---------- */
.parallax-cta{
  position:relative; border-radius:20px; overflow:hidden; text-align:center; padding:80px 32px;
  background-size:cover; background-position:center; background-attachment:fixed;
}
.parallax-cta::before{content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(11,14,17,.88), rgba(11,14,17,.7));}
.parallax-cta > *{position:relative; z-index:1;}
@media (max-width:768px){.parallax-cta{background-attachment:scroll;}}
.work-card .body{padding:22px;}
.work-card .cat{font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--amber); text-transform:uppercase; letter-spacing:.1em;}
.work-card h3{margin:8px 0 6px; font-size:18px;}
.work-card p{color:var(--muted); font-size:14px;}

/* ---------- TEAM ---------- */
.team-card{text-align:center;}
.team-avatar{width:88px; height:88px; border-radius:50%; margin:0 auto 18px;
  background:linear-gradient(135deg,var(--teal),var(--amber)); display:flex; align-items:center; justify-content:center;
  font-family:'Sora',sans-serif; font-weight:800; font-size:26px; color:#08110F;}
.team-role{color:var(--amber); font-size:13px; font-family:'IBM Plex Mono',monospace; margin-top:2px;}

/* ---------- CONTACT FORM ---------- */
.form-field{margin-bottom:20px;}
.form-field label{display:block; font-size:13px; color:var(--muted); margin-bottom:8px; font-family:'IBM Plex Mono',monospace;}
.form-field input, .form-field textarea, .form-field select{
  width:100%; background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; color:var(--text); font-family:'Inter',sans-serif; font-size:15px; transition:border-color .2s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus{outline:none; border-color:var(--teal-l);}
.form-field textarea{resize:vertical; min-height:120px;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--border); padding:64px 0 32px; background:var(--bg2);}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; margin-bottom:48px;}
@media(max-width:768px){.foot-grid{grid-template-columns:1fr 1fr;}}
.foot-grid h4{font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-bottom:16px; font-family:'IBM Plex Mono',monospace; font-weight:500;}
.foot-grid a{display:block; color:var(--text); font-size:14.5px; margin-bottom:10px; opacity:.85; transition:opacity .2s, color .2s;}
.foot-grid a:hover{opacity:1; color:var(--teal-l);}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:32px; border-top:1px solid var(--border); font-size:13px; color:var(--muted); flex-wrap:wrap; gap:12px;}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--amber); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ================================
   MERQ ASSISTANT — chat widget
================================ */
#mhub-wa-btn{
  position:fixed; bottom:24px; left:24px; z-index:1200;
  width:56px; height:56px; border-radius:50%;
  background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  transition:transform .25s, box-shadow .25s;
}
#mhub-wa-btn:hover{transform:scale(1.08); box-shadow:0 10px 36px rgba(37,211,102,.4);}
#mhub-wa-btn svg{width:28px; height:28px; color:#fff;}
@media (max-width:480px){
  #mhub-wa-btn{bottom:16px; left:16px; width:52px; height:52px;}
}

#mhub-chat-btn{
  position:fixed; bottom:24px; right:24px; z-index:1200;
  width:60px; height:60px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--teal),var(--amber));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  transition:transform .25s, box-shadow .25s;
}
#mhub-chat-btn:hover{transform:scale(1.08); box-shadow:0 10px 36px rgba(30,140,130,.4);}
#mhub-chat-btn svg{width:26px; height:26px; color:#08110F; position:absolute; transition:opacity .2s, transform .2s;}
#mhub-chat-btn .mhub-icon-close{opacity:0; transform:scale(.5);}
#mhub-chat-btn.open .mhub-icon-chat{opacity:0; transform:scale(.5);}
#mhub-chat-btn.open .mhub-icon-close{opacity:1; transform:scale(1);}
.mhub-chat-dot{
  position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:#34D399; border:2px solid var(--bg); animation:pulse 1.6s infinite;
}
#mhub-chat-btn.open .mhub-chat-dot{display:none;}

#mhub-chat-window{
  position:fixed; bottom:96px; right:24px; z-index:1200;
  width:min(380px, calc(100vw - 32px)); height:min(560px, calc(100vh - 140px));
  background:var(--card); border:1px solid var(--border); border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(16px) scale(.97); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#mhub-chat-window.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}

.mhub-chat-header{
  background:linear-gradient(135deg,var(--teal),var(--amber));
  padding:16px 18px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.mhub-chat-header-left{display:flex; align-items:center; gap:12px;}
.mhub-chat-avatar{
  width:38px; height:38px; border-radius:50%; background:rgba(8,17,15,.15);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-family:'Sora',sans-serif; color:#08110F;
}
.mhub-chat-header h3{font-size:14px; color:#08110F; font-family:'Sora',sans-serif;}
.mhub-online{display:flex; align-items:center; gap:6px; font-size:11px; color:rgba(8,17,15,.75); margin-top:2px;}
.mhub-online span{width:6px; height:6px; border-radius:50%; background:#08110F;}
#mhub-chat-close{background:none; border:none; cursor:pointer; color:#08110F; opacity:.7;}
#mhub-chat-close:hover{opacity:1;}
#mhub-chat-close svg{width:18px; height:18px;}

#mhub-chat-messages{
  flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  background:var(--bg2);
}
.mhub-msg{max-width:85%; padding:10px 14px; border-radius:14px; font-size:13.5px; line-height:1.5;}
.mhub-msg p{margin-bottom:6px;}
.mhub-msg p:last-child{margin-bottom:0;}
.mhub-msg ul{padding-left:18px; margin-bottom:6px;}
.mhub-msg a{color:var(--teal-l); text-decoration:underline;}
.mhub-msg-assistant{background:var(--card2); border:1px solid var(--border); align-self:flex-start; border-bottom-left-radius:4px;}
.mhub-msg-user{background:linear-gradient(135deg,var(--teal),var(--teal-l)); color:#08110F; align-self:flex-end; border-bottom-right-radius:4px; font-weight:500;}

.mhub-typing{display:flex; gap:5px; padding:14px; align-items:center;}
.mhub-typing span{width:6px; height:6px; border-radius:50%; background:var(--muted); animation:mhub-bounce 1.2s infinite;}
.mhub-typing span:nth-child(2){animation-delay:.15s;}
.mhub-typing span:nth-child(3){animation-delay:.3s;}
@keyframes mhub-bounce{0%,60%,100%{transform:translateY(0); opacity:.5;}30%{transform:translateY(-4px); opacity:1;}}

#mhub-quick-wrap{padding:0 16px 10px; background:var(--bg2); flex-shrink:0;}
.mhub-quick-label{font-size:11px; color:var(--muted); font-family:'IBM Plex Mono',monospace; margin-bottom:8px;}
.mhub-quick-btn{
  display:block; width:100%; text-align:left; background:var(--card2); border:1px solid var(--border);
  color:var(--text); font-size:12.5px; padding:9px 12px; border-radius:8px; margin-bottom:6px; cursor:pointer;
  transition:border-color .2s, color .2s;
}
.mhub-quick-btn:hover{border-color:var(--teal-l); color:var(--teal-l);}

#mhub-chat-form{display:flex; gap:8px; padding:12px; border-top:1px solid var(--border); background:var(--card); flex-shrink:0;}
#mhub-chat-input{
  flex:1; resize:none; background:var(--bg2); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; color:var(--text); font-family:'Inter',sans-serif; font-size:13.5px; max-height:80px;
}
#mhub-chat-input:focus{outline:none; border-color:var(--teal-l);}
#mhub-chat-form button{
  background:linear-gradient(135deg,var(--teal),var(--amber)); border:none; border-radius:10px;
  width:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
#mhub-chat-form button svg{width:18px; height:18px; color:#08110F;}

@media (max-width:480px){
  #mhub-chat-window{bottom:88px; right:16px;}
  #mhub-chat-btn{bottom:16px; right:16px;}
}


/* ---------- TESTIMONIALS MARQUEE ---------- */
.marquee-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; gap:24px; width:max-content;
  animation:marquee-scroll 32s linear infinite;
}
.marquee-viewport:hover .marquee-track{
  animation-play-state:paused;
}
.testimonial-card{
  width:340px; flex-shrink:0;
  transition:transform .25s ease, border-color .25s ease;
}
.testimonial-card:hover{
  transform:translateY(-6px);
  border-color:var(--teal-l);
}
@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (prefers-reduced-motion: reduce){
  .marquee-track{animation:none;}
}

/* ---------- PROJECT MARQUEE — inverted-V chevron ---------- */
.project-marquee-viewport{
  overflow:hidden; padding:40px 0; display:flex; flex-direction:column; gap:32px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.project-marquee-track{
  display:flex; gap:24px; width:max-content;
}
.project-track-left{
  animation:proj-scroll-left 36s linear infinite;
  transform:rotate(-2.5deg) translateX(-2%);
}
.project-track-right{
  animation:proj-scroll-right 36s linear infinite;
  transform:rotate(2.5deg) translateX(-2%);
}
.project-marquee-viewport:hover .project-marquee-track{
  animation-play-state:paused;
}
.project-card{
  width:320px; flex-shrink:0; display:block;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
@keyframes proj-scroll-left{
  from{transform:rotate(-2.5deg) translateX(0);}
  to{transform:rotate(-2.5deg) translateX(-50%);}
}
@keyframes proj-scroll-right{
  from{transform:rotate(2.5deg) translateX(-50%);}
  to{transform:rotate(2.5deg) translateX(0);}
}
@media (max-width:768px){
  .project-track-left, .project-track-right{transform:rotate(0deg) translateX(-2%);}
}
@media (prefers-reduced-motion: reduce){
  .project-track-left, .project-track-right{animation:none;}
}


/* ---------- WORK CARD ANIMATIONS (staggered entrance + hover shine) ---------- */
.grid3 .work-card:nth-child(1){transition-delay:0s;}
.grid3 .work-card:nth-child(2){transition-delay:.08s;}
.grid3 .work-card:nth-child(3){transition-delay:.16s;}
.grid3 .work-card:nth-child(4){transition-delay:.24s;}
.grid3 .work-card:nth-child(5){transition-delay:.32s;}
.grid3 .work-card:nth-child(6){transition-delay:.4s;}

.work-card{
  position:relative;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.work-card:hover{
  transform:translateY(-8px) scale(1.015);
}

/* shine sweep across the image on hover */
.work-card .thumb::before{
  content:'';
  position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.15), transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
  z-index:2; pointer-events:none;
}
.work-card:hover .thumb::before{
  left:150%;
}

/* icon/category tag gentle pulse on hover */
.work-card:hover .cat{
  color:var(--amber-l);
}
.work-card .cat{
  transition:color .3s ease;
}

@media (prefers-reduced-motion: reduce){
  .work-card, .work-card .thumb::before{transition:none !important;}
}

/* ---------- WORK CARD — creative float + 3D tilt ---------- */
.grid3 .work-card{
  animation:card-float 6s ease-in-out infinite;
  transform-style:preserve-3d;
  will-change:transform;
}
.grid3 .work-card:nth-child(1){animation-delay:0s;}
.grid3 .work-card:nth-child(2){animation-delay:.9s;}
.grid3 .work-card:nth-child(3){animation-delay:1.8s;}
.grid3 .work-card:nth-child(4){animation-delay:2.7s;}
.grid3 .work-card:nth-child(5){animation-delay:3.6s;}
.grid3 .work-card:nth-child(6){animation-delay:4.5s;}

@keyframes card-float{
  0%, 100%{transform:translateY(0px);}
  50%{transform:translateY(-8px);}
}

/* pause the idle float while actively tilting on hover, so they don't fight */
.work-card.tilting{animation-play-state:paused;}

.work-card .thumb::before{
  content:'';
  position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.15), transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
  z-index:2; pointer-events:none;
}
.work-card:hover .thumb::before{
  left:150%;
}

@media (prefers-reduced-motion: reduce){
  .work-card{animation:none !important;}
}
@media (max-width:768px){
  .work-card{animation:none;} /* skip idle float on mobile, keeps scrolling smooth */
}