/* =====================================================================
   9. FOOTER · CTA, links, giant pop-out wordmark
   ===================================================================== */
.foot{position:relative;overflow:hidden;padding:84px 24px 0;border-top:1px solid var(--line);
  background:radial-gradient(60% 50% at 50% 100%,rgba(124,58,237,.22),transparent 70%),#040107}
.foot .wrap{max-width:1200px;margin:0 auto}
.foot-cta{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;padding-bottom:56px;border-bottom:1px solid var(--line)}
.foot-cta h2{margin:14px 0 0;font-family:var(--f-d);font-weight:600;font-size:clamp(26px,3.2vw,46px);letter-spacing:-.04em;line-height:1.08;max-width:18ch}
.foot-cta h2 em{font-style:normal;background:linear-gradient(90deg,var(--glow),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.1em;margin-right:-.1em}
.foot-cta .btn{padding:14px 24px;font-size:15px}
.foot-cols{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:40px;padding:52px 0 40px}
.foot-brand p{margin:16px 0 0;max-width:30ch;color:var(--muted);font-size:15px;line-height:1.6}
.foot-col h3{margin:0 0 16px;font-family:var(--f-m);font-weight:500;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.foot-col a{position:relative;color:var(--muted);font-size:15px;transition:color .2s ease}
.foot-col a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:linear-gradient(90deg,var(--glow),var(--pink));transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.foot-col a:hover{color:var(--ink)}
.foot-col a:hover::after{transform:scaleX(1)}
.foot-mail{display:none}   /* phone-only email button in the brand card */

/* giant wordmark */
.mark-big{display:flex;justify-content:center;align-items:flex-end;margin:6px -24px 0;padding:4vw 0 0;user-select:none;
  font-family:var(--f-d);font-weight:600;font-size:clamp(90px,25vw,400px);letter-spacing:-.06em;line-height:.86}
.ml{display:inline-block;position:relative;cursor:default;--s:0;
  transform:translateY(calc(var(--s) * -15%)) scale(calc(1 + var(--s) * .1)) rotate(calc(var(--s) * var(--r,-4deg)));
  transition:transform .55s cubic-bezier(.34,1.56,.64,1),filter .4s ease,opacity .4s ease;
  filter:drop-shadow(0 0 calc(var(--s) * .12em) rgba(232,121,249,.75))}
.ml.ink{color:var(--ink)}
.ml.g{-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;margin-right:-.06em}
.ml.g1{background-image:linear-gradient(90deg,#CDA6FF,#D79CFC)}
.ml.g2{background-image:linear-gradient(90deg,#D79CFC,#DF8BFA)}
.ml.g3{background-image:linear-gradient(90deg,#DF8BFA,#E879F9)}
.ml.dot{width:.2em;height:.2em;margin:0 0 .2em .12em;   /* lifted to the middle of the letters, like the nav logo */
  border-radius:50%;background:var(--pink);
  box-shadow:0 0 .12em var(--pink),0 0 .4em rgba(232,121,249,.55)}
.ml.dot i{position:absolute;inset:0;border-radius:50%;background:inherit;animation:pulse 1.6s infinite}
/* entrance: letters pop up when the footer scrolls in */
.mark-big .ml{opacity:0;translate:0 40%}
.mark-big.in .ml{opacity:1;translate:0 0;transition:transform .55s cubic-bezier(.34,1.56,.64,1),filter .4s ease,opacity .5s ease var(--d),translate .9s cubic-bezier(.34,1.56,.64,1) var(--d)}

.foot-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:20px 0 26px;border-top:1px solid var(--line);
  font-family:var(--f-m);font-size:12px;letter-spacing:.08em;color:var(--dim)}
.foot-bar nav{display:flex;gap:22px}
.foot-bar a{transition:color .2s ease}
.foot-bar a:hover{color:var(--ink)}
.to-top{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:8px 14px;
  font-family:var(--f-m);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .2s ease,border-color .2s ease}
.to-top:hover{color:var(--ink);border-color:var(--glow)}
.to-top svg{width:13px;height:13px}

@media (max-width:900px){
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:600px){
  .foot{padding:64px 16px 0}
  .foot-cta{padding-bottom:40px}
  .mark-big{margin:0 -16px;font-size:31vw;padding-top:10vw}

  /* phone footer: brand card, then each group as a row of tappable chips */
  .foot-cols{display:flex;flex-direction:column;gap:0;padding:32px 0 8px}
  .foot-brand{position:relative;margin-bottom:22px;padding:22px 20px;border-radius:20px;border:1px solid rgba(205,166,255,.18);
    background:radial-gradient(90% 80% at 100% 0%,rgba(124,58,237,.28),transparent 70%),linear-gradient(180deg,rgba(22,10,38,.9),rgba(10,4,18,.9))}
  .foot-brand .logo{font-size:26px}
  .foot-brand p{margin-top:10px;font-size:14.5px;color:rgba(240,233,251,.8)}
  .foot-mail{display:inline-flex;align-items:center;height:36px;margin-top:16px;padding:0 16px;border-radius:999px;
    font-family:var(--f-m);font-size:12.5px;letter-spacing:.04em;color:#fff;background:linear-gradient(90deg,var(--violet),var(--pink));
    box-shadow:0 8px 22px -8px rgba(232,121,249,.7)}
  .foot-col{padding:18px 0;border-top:1px solid var(--line)}
  .foot-col h3{margin-bottom:12px;color:var(--glow)}
  .foot-col ul{display:flex;flex-wrap:wrap;gap:8px}
  .foot-col a{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:999px;font-size:14px;
    border:1px solid rgba(205,166,255,.18);background:rgba(18,8,31,.6)}
  .foot-col a::after{display:none}
  .foot-col a:active,.foot-col a:hover{color:var(--ink);border-color:rgba(232,121,249,.55);background:rgba(124,58,237,.2)}
  .foot-col a[href^="mailto:"]{display:none}   /* shown as the button in the brand card */
  .foot-bar{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:22px 0 30px}
  .foot-bar nav{gap:28px}
  .to-top{width:100%;justify-content:center;padding:12px 14px}
}
@media (prefers-reduced-motion:reduce){
  .ml,.mark-big.in .ml{transition:none}
  .mark-big .ml{opacity:1;translate:none}
  .ml.dot i{animation:none}
}