.mk-root{
  --mk-bg:#1c1c1c; --mk-cta:#ff6533; --mk-cta-d:#e2491a; --mk-cta-l:#ff8a5c;
  --mk-white:#fff; --mk-muted:#aaaaaa; --mk-font:#2f2f2f;
  --mk-line:rgba(255,255,255,.10); --mk-glass:rgba(255,255,255,.045);
  position:relative; min-height:100vh; min-height:100dvh; width:100%; overflow:hidden;
  background:var(--mk-bg); color:var(--mk-white);
  font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; isolation:isolate;
}
.mk-root *,.mk-root *::before,.mk-root *::after{box-sizing:border-box;margin:0;padding:0}
.mk-root a{text-decoration:none;color:inherit}
.mk-root button{font:inherit;color:inherit;background:none;border:0}

/* ---------- background: warm glow + light streaks (site hero style) ---------- */
.mk-bg{position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(55% 40% at 50% 22%, rgba(255,101,51,.30), transparent 70%),
    radial-gradient(70% 55% at 50% 55%, rgba(110,46,24,.55), transparent 75%),
    radial-gradient(40% 30% at 100% 100%, rgba(255,101,51,.12), transparent 70%),
    var(--mk-bg);}
.mk-noise{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mk-streaks{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.mk-streaks i{position:absolute;top:-30%;width:2px;height:var(--h,90px);border-radius:2px;
  background:linear-gradient(to bottom,transparent,rgba(255,101,51,.9),transparent);
  opacity:.55;animation:mkFall var(--d,7s) linear infinite;animation-delay:var(--dl,0s)}
@keyframes mkFall{to{transform:translateY(160vh)}}

/* ---------- layout ---------- */
.mk-stage{display:flex;justify-content:center;padding:28px 16px 36px;perspective:1600px}
.mk-card{position:relative;width:100%;max-width:470px;transform-style:preserve-3d;will-change:transform}
.mk-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.mk-wordmark{height:26px;width:auto;display:block}
.mk-wordmark-txt{font-weight:800;font-size:20px;letter-spacing:-.02em}
.mk-share{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:var(--mk-glass);border:1px solid var(--mk-line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);transition:transform .35s cubic-bezier(.2,.8,.2,1),background .3s}
.mk-share:hover{background:var(--mk-cta);transform:rotate(-12deg) scale(1.06)}

/* ---------- 3D logo ---------- */
.mk-hero{display:flex;flex-direction:column;align-items:center;text-align:center}
.mk-logo-stage{position:relative;width:min(250px,64vw);aspect-ratio:500/555;margin:10px auto 4px}
.mk-logo{position:absolute;inset:0;cursor:grab;touch-action:pan-y;filter:drop-shadow(0 30px 50px rgba(0,0,0,.45))}
.mk-logo:active{cursor:grabbing}
.mk-logo canvas,.mk-logo img{position:absolute;inset:0;width:100%;height:100%;display:block}
.mk-halo{position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,101,51,.35),rgba(255,101,51,.08) 45%,transparent 68%);
  animation:mkBreath 5s ease-in-out infinite}
@keyframes mkBreath{50%{scale:1.12;opacity:.75}}
.mk-floorshadow{position:absolute;left:50%;bottom:-4%;width:62%;height:14px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(4px);pointer-events:none}
.mk-hint{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-top:6px}

.mk-name{margin-top:16px;font-family:Poppins,"DM Sans",sans-serif;font-size:clamp(34px,10vw,44px);font-weight:700;letter-spacing:-.035em;line-height:1;text-transform:lowercase}
.mk-name em{font-style:normal;position:relative;white-space:nowrap;margin-left:.12em;background:linear-gradient(100deg,#ff6533 0%,#ff9a72 35%,#ffd3c2 50%,#ff9a72 65%,#ff6533 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:mkGlowTxt 5s ease-in-out infinite;filter:drop-shadow(0 4px 18px rgba(255,101,51,.35))}
@keyframes mkGlowTxt{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.mk-name em svg{position:absolute;left:-2%;bottom:-8px;width:104%;height:12px;overflow:visible}
.mk-name em path{stroke:rgba(255,255,255,.85);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;animation:mkDraw 1.2s .9s cubic-bezier(.6,0,.2,1) forwards}
@keyframes mkDraw{to{stroke-dashoffset:0}}
.mk-bio{margin:14px auto 0;max-width:350px;font-size:15px;line-height:1.6;color:var(--mk-muted)}
.mk-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:16px}
.mk-pills span{font-size:12px;font-weight:500;padding:6px 12px;border-radius:999px;color:#ddd;
  background:var(--mk-glass);border:1px solid var(--mk-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- CTA pills (site style) ---------- */
.mk-ctas{display:grid;gap:12px;margin-top:26px}
.mk-cta{position:relative;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 24px;border-radius:999px;
  font-weight:600;font-size:16px;overflow:hidden;isolation:isolate;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.mk-cta .lbl{flex:1;text-align:left;display:flex;flex-direction:column;line-height:1.2}
.mk-cta .sub{font-size:12px;font-weight:500;opacity:.75;margin-top:2px}
.mk-cta .arr{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:14px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mk-cta:hover{transform:translateY(-3px) scale(1.015)}
.mk-cta:hover .arr{transform:rotate(-45deg) scale(1.08)}
.mk-cta:active{transform:scale(.97)}
.mk-cta.orange{background:var(--mk-cta);color:#fff;box-shadow:0 18px 40px -16px rgba(255,101,51,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.mk-cta.orange .arr{background:#fff;color:var(--mk-cta)}
.mk-cta.white{background:#fff;color:var(--mk-font);box-shadow:0 18px 40px -18px rgba(255,255,255,.45)}
.mk-cta.white .arr{background:var(--mk-cta);color:#fff}
.mk-cta .tag{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.06em;padding:2px 7px;border-radius:999px;background:var(--mk-cta);color:#fff;vertical-align:2px}
/* liquid fill that follows the cursor */
.mk-cta::before{content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);width:0;height:0;border-radius:50%;
  translate:-50% -50%;transition:width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1)}
.mk-cta.orange::before{background:radial-gradient(circle,#ff8a5c,var(--mk-cta-d))}
.mk-cta.white::before{background:radial-gradient(circle,#fff,#ffe3d8)}
.mk-cta:hover::before{width:520px;height:520px}

/* ---------- section label ---------- */
.mk-label{display:flex;align-items:center;gap:12px;margin:30px 4px 14px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.mk-label::before,.mk-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--mk-line),transparent)}

/* ---------- liquid-glass social cards ---------- */
.mk-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mk-glassbtn{position:relative;display:flex;align-items:center;gap:11px;padding:12px;border-radius:20px;overflow:hidden;isolation:isolate;
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid var(--mk-line);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.35),0 10px 30px -18px rgba(0,0,0,.8);
  transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
.mk-glassbtn::before{content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);width:160px;height:160px;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle,var(--bc,#ff6533) 0%,transparent 65%);opacity:0;filter:blur(10px);transition:opacity .4s}
.mk-glassbtn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position .9s cubic-bezier(.2,.8,.2,1)}
.mk-glassbtn:hover{border-color:rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 40px -18px var(--bc,#ff6533)}
.mk-glassbtn:hover::before{opacity:.55}
.mk-glassbtn:hover::after{background-position:-40% 0}
.mk-glassbtn .ico{flex:0 0 40px;height:40px;border-radius:13px;display:grid;place-items:center;font-size:17px;color:#fff;
  background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:background .35s,color .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.mk-glassbtn:hover .ico{background:var(--bc,#ff6533);color:var(--fg,#fff);transform:translateZ(18px) scale(1.08) rotate(-6deg)}
.mk-glassbtn .t{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.mk-glassbtn .t b{font-size:14.5px;font-weight:600}
.mk-glassbtn .t small{font-size:11.5px;color:var(--mk-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.mk-glassbtn.wide{grid-column:1/-1}

.mk-foot{margin-top:28px;text-align:center;font-size:12px;color:rgba(255,255,255,.35)}
.mk-foot b{color:rgba(255,255,255,.65);font-weight:600}

/* entrance */
.mk-in{opacity:0;translate:0 22px;filter:blur(6px);animation:mkIn .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0)*65ms + 120ms)}
@keyframes mkIn{to{opacity:1;translate:0 0;filter:blur(0)}}

.mk-toast{position:fixed;left:50%;bottom:26px;translate:-50% 20px;opacity:0;pointer-events:none;z-index:99;padding:11px 18px;border-radius:999px;
  background:#fff;color:var(--mk-font);font-size:13px;font-weight:600;box-shadow:0 18px 40px -10px rgba(0,0,0,.6);transition:all .35s cubic-bezier(.2,.8,.2,1)}
.mk-toast.show{opacity:1;translate:-50% 0}

@media (max-width:380px){.mk-list{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.mk-root *{animation:none!important;transition:none!important}.mk-in{opacity:1;translate:none;filter:none}}

/* ---------- special: 3D office tour card ---------- */
@property --mk-ta{syntax:"<angle>";inherits:false;initial-value:0deg}
.mk-cta.tour{padding:12px 10px 12px 12px;gap:14px;color:#fff;border-radius:26px;
  background:linear-gradient(135deg,rgba(255,101,51,.16),rgba(255,255,255,.03) 55%),rgba(20,20,20,.6);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  box-shadow:0 20px 50px -20px rgba(255,101,51,.75),inset 0 1px 0 rgba(255,255,255,.18)}
.mk-cta.tour::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--mk-ta),rgba(255,101,51,.15) 0 55%,#ff6533 70%,#ffd0bd 76%,#ff6533 82%,rgba(255,101,51,.15) 95%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:mkTourSpin 4s linear infinite}
@keyframes mkTourSpin{to{--mk-ta:360deg}}
.mk-cta.tour::before{background:radial-gradient(circle,rgba(255,101,51,.55),rgba(255,101,51,0) 70%)}
.mk-cta.tour .arr{background:var(--mk-cta);color:#fff;box-shadow:0 6px 18px -4px rgba(255,101,51,.9)}
.mk-cta.tour .sub{opacity:.7}
.mk-cta.tour .tag{background:#fff;color:var(--mk-cta)}
.mk-live{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.12em;color:#ffb497;margin-bottom:3px}
.mk-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff6533;box-shadow:0 0 0 0 rgba(255,101,51,.7);animation:mkLive 1.8s infinite}
@keyframes mkLive{70%{box-shadow:0 0 0 7px rgba(255,101,51,0)}100%{box-shadow:0 0 0 0 rgba(255,101,51,0)}}
.mk-cube-wrap{flex:0 0 56px;height:56px;border-radius:18px;display:grid;place-items:center;perspective:300px;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.14),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.mk-cube{position:relative;width:26px;height:26px;transform-style:preserve-3d;animation:mkCube 7s linear infinite}
.mk-cta.tour:hover .mk-cube{animation-duration:2.2s}
.mk-cube i{position:absolute;inset:0;border:1.5px solid rgba(255,208,189,.95);border-radius:4px;
  background:linear-gradient(135deg,rgba(255,101,51,.55),rgba(255,101,51,.12));box-shadow:inset 0 0 8px rgba(255,255,255,.25)}
.mk-cube i:nth-child(1){transform:translateZ(13px)}.mk-cube i:nth-child(2){transform:rotateY(180deg) translateZ(13px)}
.mk-cube i:nth-child(3){transform:rotateY(90deg) translateZ(13px)}.mk-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(13px)}
.mk-cube i:nth-child(5){transform:rotateX(90deg) translateZ(13px)}.mk-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(13px)}
@keyframes mkCube{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}

/* slogan */
.mk-slogan{display:inline-flex;align-items:center;gap:10px;margin-top:16px;font-size:12.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.mk-slogan svg{width:34px;height:16px;overflow:visible}
.mk-slogan path{fill:none;stroke-width:2.2;stroke-linecap:round}
.mk-slogan .base{stroke:rgba(255,255,255,.22)}
.mk-slogan .run{stroke:#ff6533;stroke-dasharray:22 78;animation:mkInf 2.6s linear infinite;filter:drop-shadow(0 0 4px rgba(255,101,51,.9))}
@keyframes mkInf{to{stroke-dashoffset:-100}}
.mk-slogan::before,.mk-slogan::after{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35))}
.mk-slogan::after{transform:scaleX(-1)}

/* orange-tinted social icons */
.mk-glassbtn .ico{color:#ffd2c0;background:linear-gradient(145deg,rgba(255,101,51,.14),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,101,51,.14)}
.mk-glassbtn:hover .ico{box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}

/* ===== v1.1: featured tiles (2 per row) ===== */
.mk-ctas{grid-template-columns:1fr 1fr;gap:10px}
.mk-ctas .mk-cta{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px;border-radius:24px;min-height:150px;transform-style:preserve-3d}
.mk-ctas .mk-cta:last-child:nth-child(odd){grid-column:1/-1;min-height:0;flex-direction:row;align-items:center}
.mk-ctas .mk-cta .lbl{flex:none;width:100%;padding-right:2px}
.mk-ctas .mk-cta .ttl{font-family:Poppins,"DM Sans",sans-serif;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.mk-ctas .mk-cta .sub{font-size:11.5px;line-height:1.35;margin-top:4px}
.mk-ctas .mk-cta .arr{position:absolute;top:12px;right:12px;width:34px;height:34px;flex:none;font-size:12px}
.mk-ctas .mk-cta:last-child:nth-child(odd) .arr{position:static;margin-left:auto}
.mk-ctas .mk-cta .tag{font-size:9px;padding:2px 6px;margin-left:4px}
.mk-ctas .mk-cta.tour{padding:14px;border-radius:24px}
.mk-ctas .mk-cube-wrap{flex:none;width:48px;height:48px;border-radius:15px}
.mk-ctas .mk-live{font-size:9px;margin-bottom:4px}
.fico{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-size:19px;flex:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.mk-cta:hover .fico{transform:translateZ(16px) rotate(-6deg) scale(1.06)}
.mk-cta.orange .fico{background:rgba(255,255,255,.2);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.mk-cta.white .fico{background:rgba(255,101,51,.12);color:var(--mk-cta);box-shadow:inset 0 0 0 1px rgba(255,101,51,.18)}
.mk-cta.glass{color:#fff;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 40px -22px rgba(0,0,0,.9)}
.mk-cta.glass::before{background:radial-gradient(circle,rgba(255,101,51,.38),rgba(255,101,51,0) 70%)}
.mk-cta.glass .fico{background:linear-gradient(135deg,#ff8a5c,#ff6533);color:#fff;box-shadow:0 10px 22px -8px rgba(255,101,51,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.mk-cta.glass .arr{background:rgba(255,255,255,.1);color:#fff}
.mk-cta.glass:hover .arr{background:var(--mk-cta)}
.mk-cta.glass .sub{opacity:.65}
.mk-cta.glass .tag{background:var(--mk-cta);color:#fff}
@media (max-width:340px){.mk-ctas{grid-template-columns:1fr}.mk-ctas .mk-cta{min-height:0}}

/* ===== v1.1: WhatsApp CTA box ===== */
.mk-wa{position:relative;overflow:hidden;isolation:isolate;margin-top:28px;padding:30px 20px 24px;border-radius:28px;text-align:center;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,0,.9)}
.mk-wa::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--mk-ta),rgba(255,101,51,.08) 0 60%,#ff6533 75%,#ffd0bd 80%,#ff6533 85%,rgba(255,101,51,.08) 97%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:mkTourSpin 6s linear infinite}
.mk-wa-glow{position:absolute;z-index:-1;left:50%;top:-60%;width:120%;aspect-ratio:1;translate:-50% 0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,101,51,.35),rgba(255,101,51,0));animation:mkBreath 6s ease-in-out infinite}
.mk-wa-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#ffb497;
  padding:6px 12px;border-radius:999px;background:rgba(255,101,51,.1);border:1px solid rgba(255,101,51,.22)}
.mk-wa-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:#25D366;box-shadow:0 0 0 0 rgba(37,211,102,.7);animation:mkWaPulse 1.8s infinite}
@keyframes mkWaPulse{70%{box-shadow:0 0 0 7px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.mk-wa-title{margin-top:14px;font-family:Poppins,"DM Sans",sans-serif;font-size:clamp(22px,6.4vw,27px);font-weight:700;letter-spacing:-.025em;line-height:1.2;color:#fff}
.mk-wa-text{margin:10px auto 0;max-width:320px;font-size:14px;line-height:1.55;color:var(--mk-muted)}
.mk-wa-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:12px;margin-top:20px;padding:8px 22px 8px 8px;border-radius:999px;
  background:linear-gradient(135deg,#ff7a45,#ff6533 45%,#e2491a);color:#fff;font-weight:600;font-size:16px;
  box-shadow:0 18px 40px -14px rgba(255,101,51,.95),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.mk-wa-btn::before{content:"";position:absolute;z-index:-1;left:var(--mx,50%);top:var(--my,50%);width:0;height:0;border-radius:50%;translate:-50% -50%;
  background:radial-gradient(circle,#ff9a72,#e2491a);transition:width .6s cubic-bezier(.2,.8,.2,1),height .6s cubic-bezier(.2,.8,.2,1)}
.mk-wa-btn:hover::before{width:420px;height:420px}
.mk-wa-btn:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 24px 50px -14px rgba(255,101,51,1),inset 0 1px 0 rgba(255,255,255,.35)}
.mk-wa-btn:active{transform:scale(.97)}
.mk-wa-btn .wico{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#25D366;font-size:22px;box-shadow:0 4px 12px -4px rgba(0,0,0,.35)}
.mk-wa-btn .warr{font-size:13px;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.mk-wa-btn:hover .warr{transform:translateX(4px)}

/* ===== v1.1.1: mobile anti-flicker ===== */
@keyframes mkIn{to{opacity:1;translate:0 0;filter:none}}
.mk-noise{mix-blend-mode:normal;opacity:.035}
.mk-streaks i{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.mk-glassbtn,.mk-cta,.mk-wa{backface-visibility:hidden;-webkit-backface-visibility:hidden}
@media (hover:none),(max-width:600px){
  .mk-card{will-change:auto}
  .mk-glassbtn,.mk-cta.glass,.mk-cta.tour,.mk-wa,.mk-pills span,.mk-share{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .mk-glassbtn{background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),rgba(30,22,19,.6)}
  .mk-cta.glass{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(30,22,19,.65)}
  .mk-cta.tour{background:linear-gradient(135deg,rgba(255,101,51,.16),rgba(255,255,255,.03) 55%),rgba(24,19,17,.85)}
  .mk-wa{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),rgba(28,21,18,.65)}
  .mk-share{background:rgba(255,255,255,.08)}
}

/* v1.1.3: Instagram original gradient on hover */
.mk-glassbtn[href*="instagram.com"]:hover .ico{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);color:#fff}
.mk-glassbtn[href*="instagram.com"]:hover{border-color:rgba(214,36,159,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 18px 40px -18px #d6249f}
.mk-glassbtn[href*="instagram.com"]::before{background:radial-gradient(circle,#fd5949 0%,#d6249f 35%,transparent 65%)}

/* v1.1.4: moving orange border on Project Showcase (white tile) */
.mk-cta.white::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2.5px;pointer-events:none;z-index:1;
  background:conic-gradient(from var(--mk-ta),rgba(255,101,51,.18) 0 40%,#ff6533 60%,#ffd0bd 70%,#ff6533 80%,rgba(255,101,51,.18) 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:mkTourSpin 4s linear infinite;animation-delay:-2s}

/* v1.1.6: Office tour tile = same simple glass as the others */
.mk-cta.tour::after{display:none}
.mk-cta.tour{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 18px 40px -22px rgba(0,0,0,.9)}
.mk-cta.tour::before{background:radial-gradient(circle,rgba(255,101,51,.38),rgba(255,101,51,0) 70%)}
.mk-cta.tour .arr{background:rgba(255,255,255,.1);color:#fff;box-shadow:none}
.mk-cta.tour:hover .arr{background:var(--mk-cta)}
.mk-ctas .mk-cta.tour .mk-cube-wrap{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#ff8a5c,#ff6533);box-shadow:0 10px 22px -8px rgba(255,101,51,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.mk-cta.tour .mk-cube{width:20px;height:20px}
.mk-cta.tour .mk-cube i{border-color:rgba(255,255,255,.95);background:rgba(255,255,255,.18);box-shadow:none}
.mk-cta.tour .mk-cube i:nth-child(1){transform:translateZ(10px)}.mk-cta.tour .mk-cube i:nth-child(2){transform:rotateY(180deg) translateZ(10px)}
.mk-cta.tour .mk-cube i:nth-child(3){transform:rotateY(90deg) translateZ(10px)}.mk-cta.tour .mk-cube i:nth-child(4){transform:rotateY(-90deg) translateZ(10px)}
.mk-cta.tour .mk-cube i:nth-child(5){transform:rotateX(90deg) translateZ(10px)}.mk-cta.tour .mk-cube i:nth-child(6){transform:rotateX(-90deg) translateZ(10px)}
@media (hover:none),(max-width:600px){
  .mk-cta.tour{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(30,22,19,.65)}
}

/* v1.1.7: original brand colors on hover / tap for every social */
.mk-glassbtn:is(:hover,:active,:focus-visible) .ico{background:var(--bc);color:var(--fg,#fff);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.mk-glassbtn:is(:active,:focus-visible){border-color:var(--bc);box-shadow:0 16px 34px -18px var(--bc)}
.mk-glassbtn:is(:active,:focus-visible)::before{opacity:.55}
.mk-glassbtn[href*="linkedin.com"]{--bc:#0A66C2;--fg:#fff}
.mk-glassbtn[href*="facebook.com"]{--bc:#1877F2;--fg:#fff}
.mk-glassbtn[href*="youtube.com"]{--bc:#FF0000;--fg:#fff}
.mk-glassbtn[href*="pinterest.com"]{--bc:#E60023;--fg:#fff}
.mk-glassbtn[href*="instagram.com"]:is(:hover,:active,:focus-visible) .ico{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%);color:#fff}
.mk-glassbtn[href*="instagram.com"]:is(:active,:focus-visible){border-color:rgba(214,36,159,.55)}
/* TikTok: black + cyan/pink glitch */
.mk-glassbtn[href*="tiktok.com"]{--bc:#25F4EE}
.mk-glassbtn[href*="tiktok.com"]:is(:hover,:active,:focus-visible) .ico{background:#000;color:#fff;text-shadow:-1.5px -1.5px 0 #25F4EE,1.5px 1.5px 0 #FE2C55;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.mk-glassbtn[href*="tiktok.com"]::before{background:radial-gradient(circle,#25F4EE 0%,#FE2C55 40%,transparent 66%)}
.mk-glassbtn[href*="tiktok.com"]:is(:hover,:active,:focus-visible){border-color:rgba(254,44,85,.5);box-shadow:0 16px 34px -18px #FE2C55}
/* X + Threads: black */
.mk-glassbtn:is([href*="x.com"],[href*="threads."]){--bc:#000;--fg:#fff}
.mk-glassbtn:is([href*="x.com"],[href*="threads."]):is(:hover,:active,:focus-visible) .ico{background:#000;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.mk-glassbtn:is([href*="x.com"],[href*="threads."])::before{background:radial-gradient(circle,rgba(255,255,255,.45),transparent 65%)}
.mk-glassbtn:is([href*="x.com"],[href*="threads."]):is(:hover,:active,:focus-visible){border-color:rgba(255,255,255,.4);box-shadow:0 16px 34px -18px rgba(255,255,255,.5)}

/* ===== v1.2: smooth hover (GPU transforms only) ===== */
.mk-glassbtn,.mk-cta.glass,.mk-cta.tour,.mk-wa,.mk-pills span,.mk-share{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.mk-glassbtn{background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),rgba(30,22,19,.6)}
.mk-cta.glass,.mk-cta.tour{background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03)),rgba(30,22,19,.65)}
.mk-wa{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),rgba(28,21,18,.65)}
.mk-share{background:rgba(255,255,255,.08)}

.mk-tilt{transform:perspective(700px) translate3d(0,var(--lift,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))!important;
  transition:border-color .4s ease,box-shadow .5s ease!important;will-change:transform;backface-visibility:hidden}
.mk-cta:hover,.mk-glassbtn:hover{transform:none}

/* liquid fill: scale instead of width/height */
.mk-cta::before{width:560px!important;height:560px!important;translate:none!important;
  transform:translate(-50%,-50%) scale(0);transition:transform .75s cubic-bezier(.22,.8,.2,1)!important;will-change:transform}
.mk-cta:hover::before{transform:translate(-50%,-50%) scale(1)}
.mk-wa-btn::before{width:440px!important;height:440px!important;translate:none!important;
  transform:translate(-50%,-50%) scale(0);transition:transform .75s cubic-bezier(.22,.8,.2,1)!important;will-change:transform}
.mk-wa-btn:hover::before{transform:translate(-50%,-50%) scale(1)}
.mk-wa-btn:hover{transform:translateY(-3px)}

/* glow follows cursor without blur filter */
.mk-glassbtn::before{filter:none!important;width:180px;height:180px;transition:opacity .45s ease!important}

/* shine: transform sweep instead of background-position */
.mk-glassbtn::after{background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%)!important;background-size:100% 100%!important;
  transform:translateX(-110%);transition:transform 1s cubic-bezier(.22,.8,.2,1)!important;will-change:transform}
.mk-glassbtn:hover::after{transform:translateX(110%)}

/* icons: simple scale, no 3D/rotate */
.mk-glassbtn .ico,.fico{transition:transform .45s cubic-bezier(.22,.8,.2,1),background .35s ease,color .35s ease,box-shadow .35s ease!important}
.mk-glassbtn:hover .ico{transform:scale(1.07)!important}
.mk-cta:hover .fico{transform:scale(1.06)!important}
.mk-cta .arr,.mk-wa-btn .warr{transition:transform .45s cubic-bezier(.22,.8,.2,1),background .35s ease!important}

/* v1.2.1: ROOT FIX for hover flicker — each card gets its own flat 3D context (no shared preserve-3d hit-testing) */
.mk-stage{perspective:none!important}
.mk-card,.mk-ctas,.mk-list,.mk-ctas .mk-cta,.mk-glassbtn{transform-style:flat!important}
.mk-cta,.mk-glassbtn,.mk-tilt{backface-visibility:visible!important;-webkit-backface-visibility:visible!important}

/* v1.2.2: full green WhatsApp icon */
.mk-wa-btn .wico{background:#25D366!important;color:#fff!important;font-size:23px;box-shadow:0 6px 16px -4px rgba(37,211,102,.75)!important;border:0!important}

/* ===== v1.3: simple, stable hover (no tilt, no cursor-follow) ===== */
.mk-tilt{transform:none!important;will-change:auto!important}
.mk-cta,.mk-glassbtn{transition:transform .35s cubic-bezier(.22,.8,.2,1),border-color .35s ease,box-shadow .35s ease!important;will-change:auto!important}
.mk-wa-btn{transition:transform .35s cubic-bezier(.22,.8,.2,1),box-shadow .35s ease!important}
.mk-cta::before,.mk-wa-btn::before,.mk-glassbtn::before{left:50%!important;top:50%!important;width:150%!important;height:240%!important;
  translate:none!important;transform:translate(-50%,-50%)!important;opacity:0;transition:opacity .4s ease!important;will-change:auto!important;filter:none!important}
.mk-glassbtn::after,.mk-cta .arr,.mk-glassbtn .ico,.fico{will-change:auto!important}
.mk-cta:hover,.mk-glassbtn:hover,.mk-wa-btn:hover{transform:none!important}
.mk-cta:hover::before,.mk-wa-btn:hover::before,.mk-glassbtn:hover::before{opacity:0}
.mk-glassbtn:hover::after{transform:translateX(-110%)}
.mk-glassbtn:hover .ico,.mk-cta:hover .fico{transform:none!important}
.mk-cta:hover .arr{transform:none}
@media (hover:hover) and (pointer:fine){
  .mk-cta:hover,.mk-glassbtn:hover{transform:translateY(-3px)!important}
  .mk-wa-btn:hover{transform:translateY(-2px)!important}
  .mk-cta:hover::before,.mk-wa-btn:hover::before{opacity:1}
  .mk-glassbtn:hover::before{opacity:.35}
  .mk-glassbtn:hover::after{transform:translateX(110%)}
  .mk-glassbtn:hover .ico{transform:scale(1.06)!important}
  .mk-cta:hover .fico{transform:scale(1.05)!important}
  .mk-cta:hover .arr{transform:rotate(-45deg)}
}
@media (hover:none){
  .mk-cta,.mk-glassbtn,.mk-wa-btn{transition:transform .15s ease!important}
  .mk-cta:active,.mk-glassbtn:active,.mk-wa-btn:active{transform:scale(.98)!important}
}

/* v1.3: WhatsApp box — no masks/animated layers (fixes clipped rendering on some GPUs) */
.mk-wa::after,.mk-wa-glow{display:none!important}
.mk-wa{overflow:visible!important;isolation:auto!important;border:1px solid rgba(255,101,51,.32)!important;
  background:radial-gradient(120% 85% at 50% 0%,rgba(255,101,51,.26),rgba(255,101,51,0) 62%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.015)),rgba(28,21,18,.72)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -30px rgba(0,0,0,.9)!important}

/* v1.3.1: 3D flip of the icon on hover (first 4 tiles) */
.mk-ctas .mk-cta{perspective:420px}
@keyframes mkIcoSpin{0%{rotate:y 0deg}60%{rotate:y 380deg}100%{rotate:y 360deg}}
@media (hover:hover) and (pointer:fine){
  .mk-cta:hover .fico,.mk-cta:hover .mk-cube-wrap{animation:mkIcoSpin .95s cubic-bezier(.3,.7,.2,1) both}
}
@media (hover:none){
  .mk-cta:active .fico,.mk-cta:active .mk-cube-wrap{animation:mkIcoSpin .7s cubic-bezier(.3,.7,.2,1) both}
}

/* ===== v1.4: DESKTOP layout (mobile untouched) ===== */
@media (min-width:1024px){
  .mk-root{overflow:clip}
  .mk-stage{padding:36px 48px 44px;align-items:flex-start}
  .mk-card{max-width:1160px;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);column-gap:48px;
    grid-template-areas:"top top" "hero ctas" "hero label" "hero list" "hero wa" "foot foot";align-items:start}
  .mk-top{grid-area:top;margin-bottom:26px}
  .mk-wordmark{height:30px}

  /* left: sticky brand panel */
  .mk-hero{grid-area:hero;position:sticky;top:40px;align-self:start;overflow:hidden;
    padding:40px 36px 44px;border-radius:36px;
    background:radial-gradient(85% 55% at 50% 32%,rgba(255,101,51,.24),rgba(255,101,51,0) 70%),
               linear-gradient(165deg,rgba(255,255,255,.065),rgba(255,255,255,.012)),rgba(26,20,18,.55);
    border:1px solid rgba(255,255,255,.09);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 50px 90px -45px rgba(0,0,0,.95)}
  .mk-hero::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:44px 44px;-webkit-mask-image:radial-gradient(70% 60% at 50% 35%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 35%,#000,transparent)}
  .mk-logo-stage{width:min(340px,92%);margin:6px auto 0}
  .mk-name{font-size:clamp(60px,6vw,84px);margin-top:18px;letter-spacing:-.045em}
  .mk-bio{font-size:17px;max-width:400px;margin-top:14px}

  /* right column */
  .mk-ctas{grid-area:ctas;margin-top:0;gap:14px}
  .mk-ctas .mk-cta{min-height:184px;padding:20px;border-radius:28px;gap:18px}
  .mk-ctas .mk-cta .ttl{font-size:18px}
  .mk-ctas .mk-cta .sub{font-size:13px;margin-top:5px}
  .mk-ctas .mk-cta .arr{top:18px;right:18px;width:38px;height:38px;font-size:13px}
  .mk-ctas .fico,.mk-ctas .mk-cta.tour .mk-cube-wrap{width:54px;height:54px;border-radius:17px;font-size:22px}
  .mk-label{grid-area:label;margin:30px 4px 14px}
  .mk-list{grid-area:list;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .mk-glassbtn{padding:14px;border-radius:20px}
  .mk-glassbtn .ico{flex-basis:44px;height:44px}

  /* WhatsApp: horizontal banner */
  .mk-wa{grid-area:wa;margin-top:26px;padding:26px 28px;text-align:left;
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:24px;align-items:center}
  .mk-wa-eyebrow{grid-column:1;grid-row:1;justify-self:start}
  .mk-wa-title{grid-column:1;grid-row:2;margin-top:10px;font-size:26px}
  .mk-wa-text{grid-column:1;margin:8px 0 0;max-width:none}
  .mk-wa-btn{grid-column:2;grid-row:1 / span 3;margin-top:0;white-space:nowrap}

  .mk-foot{grid-area:foot;margin-top:34px}
}
@media (min-width:1024px) and (max-height:760px){
  .mk-logo-stage{width:min(270px,80%)}
  .mk-name{font-size:62px}
}