/* ================= desktop mega menu (Figma 2214:30745) ================= */
.dmenu{display:none}
@media (min-width:1200px){
  .dmenu{display:block;position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:2000;pointer-events:none;visibility:hidden;opacity:0;transition:opacity .3s var(--ease),visibility 0s .3s}
  .dmenu.open{pointer-events:auto;visibility:visible;opacity:1;transition:opacity .3s var(--ease)}
  .dm-frame{position:absolute;left:0;top:0;width:1440px;height:var(--dmh,893px);transform-origin:0 0;background:#131313;display:flex;flex-direction:column;
    box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
  .dm-head{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;flex:none}
  .dm-head .logo{display:block;width:44px;height:44px}
  .dm-nav{display:contents}
  .dm-nav a{font:500 16px/1.5 var(--mono);color:#dcdcdc;padding:16px 0;white-space:nowrap;transition:color .2s}
  .dm-nav a:hover,.dm-nav a.on{color:var(--yellow)}
  .dm-contact{display:flex;gap:12px;align-items:center;padding:16px 16px 16px 20px;border-radius:8px;background:#fff;color:#131313;font:500 16px/1.5 var(--mono);white-space:nowrap}
  .dm-body{display:none;flex:1;min-height:0;padding:0 40px 40px;gap:8px}
  .dm-body.on{display:flex}
  .dm-body.on>*{animation:dmIn .45s var(--ease) both}
  .dm-body.on>:nth-child(2){animation-delay:.05s}.dm-body.on>:nth-child(3){animation-delay:.1s}
  @keyframes dmIn{from{opacity:0;transform:translateY(10px)}}
  .dm-left{flex:none;width:314px;display:flex;flex-direction:column;gap:8px}
  .dm-cats{flex:1;display:flex;flex-direction:column;padding:0 20px;border-radius:8px;background:#191919}
  .dm-cat{all:unset;box-sizing:border-box;padding:16px 0;font:500 16px/1.5 var(--mono);color:#dcdcdc;cursor:pointer;transition:color .2s}
  .dm-cat:hover{color:#fff}.dm-cat.on{color:var(--yellow)}
  .dm-ctas{display:flex;gap:8px}
  .dm-cta{width:153px;height:153px;padding:12px;border-radius:8px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font:500 16px/1.5 var(--mono);transition:transform .35s var(--ease),background .25s}
  .dm-cta span{align-self:stretch}
  .dm-cta svg{transition:transform .35s var(--ease)}
  .dm-cta:hover{transform:translateY(-3px)}.dm-cta:hover svg{transform:translate(2px,-2px)}
  .dm-cta.solid{background:var(--yellow);color:#131313;box-shadow:6.4px 8px 22.4px rgba(5,5,5,.29),22.4px 35.2px 41.6px rgba(5,5,5,.26)}
  .dm-cta.ghost{background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px var(--yellow);color:var(--yellow)}
  .dm-grids{flex:1;min-width:0;position:relative}
  .dm-grid{position:absolute;inset:0;display:none;gap:8px}
  .dm-grid.on{display:grid}
  .dm-grid.g22{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
  .dm-grid.g3{grid-template-columns:repeat(3,1fr);grid-template-rows:1fr}
  .dm-grid.on .dm-card{animation:dmIn .4s var(--ease) both}
  .dm-grid.on .dm-card:nth-child(2){animation-delay:.04s}.dm-grid.on .dm-card:nth-child(3){animation-delay:.08s}.dm-grid.on .dm-card:nth-child(4){animation-delay:.12s}
  .dm-card{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;padding:32px;border-radius:8px;background:#191919;color:#fff;
    transition:background .35s var(--ease),color .35s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease)}
  .dm-card svg{color:var(--yellow);transition:color .35s var(--ease),transform .45s var(--ease)}
  .dm-card>span{align-self:stretch;font:500 20px/1.2 var(--rubik);letter-spacing:.3px;text-transform:uppercase}
  .dm-card:hover{background:#fff;color:#131313;transform:translateY(-2px);
    box-shadow:0 -20px 8.5px rgba(35,19,174,.25),1px 8px 17px rgba(35,19,174,.39),5px 30px 31px rgba(35,19,174,.34),12px 68px 41px rgba(35,19,174,.2),21px 120px 49px rgba(35,19,174,.06)}
  .dm-card:hover svg{color:#2f1ec1;transform:scale(1.06)}
  .dm-body.co{padding:0 40px 40px;gap:20px}
  .dm-card.co{flex:1}
  .dm-card.co svg{color:#535353;fill:currentColor}
  .dm-card.co>span{display:flex;flex-direction:column;gap:8px;text-transform:none;letter-spacing:0}
  .dm-card.co b{font:500 40px/1.2 var(--rubik);letter-spacing:.6px;text-transform:uppercase}
  .dm-card.co em{font:400 20px/1.5 var(--rubik);font-style:normal;max-width:360px}
  .dm-card.co:hover svg{color:#2f1ec1}
  .menu a[data-dd]:hover,.menu a.dd-on{color:var(--yellow)}
}
@media (prefers-reduced-motion:reduce){.dm-body.on>*,.dm-grid.on .dm-card{animation:none}}

/* CTA tag: smart-animate like the prototype (0.3s ease-out), shards sit inside the pill until it breaks */
.ct-tag .ct-piece,.ct-tag .ct-shard{transition:transform .3s cubic-bezier(0,0,.2,1),opacity .35s var(--ease)!important}
.ct-tag.whole .ct-piece{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .35s var(--ease)!important}
.ct-piece{cursor:pointer}
.ct-tag.whole .ct-shard{transform:translate(var(--x0),var(--y0)) rotate(0deg) scale(.3)!important;opacity:0!important}
.ct-tag .ct-shard{transition:transform .3s cubic-bezier(0,0,.2,1),opacity .12s linear!important}
.ct-tag.hidden .ct-piece,.ct-tag.hidden .ct-shard{opacity:0!important}

/* solid pill behind the two halves while joined, so the jagged seam never shows */
.ct-back{position:absolute;left:745.9px;top:146px;width:261.4px;height:33.8px;border-radius:688px;background:#2f1ec1;opacity:0;transition:opacity .08s linear;pointer-events:none}
.ct-tag.whole:not(.hidden) .ct-back{opacity:1;transition:opacity .15s linear .15s}
.ct-tag.cracking .ct-back{opacity:0;transition:opacity .08s linear}