/* ============================================================
   Rework × Revolut — VIBE layer: motion, marquee, mobile nav,
   magnetic buttons, spotlight, scroll progress. Loaded after
   rework-revolut.css so it can build on the base tokens.
   ============================================================ */

/* ---------- top scroll progress ---------- */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:var(--gradient);box-shadow:0 0 12px rgba(var(--glow-1),.6);transition:width .08s linear;}

/* ---------- animated drifting mesh ---------- */
@media (prefers-reduced-motion: no-preference){
  .mesh::before{animation:drift1 24s var(--ease) infinite;}
  .mesh::after{animation:drift2 30s var(--ease) infinite;}
  .mesh .b3{animation:drift3 27s var(--ease) infinite;}
}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-7%,6%) scale(1.16);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(8%,-5%) scale(1.12);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-6%,-7%) scale(1.18);}}

/* ---------- hero pointer spotlight ---------- */
.spotlight{position:absolute;width:620px;height:620px;border-radius:50%;pointer-events:none;z-index:1;
  filter:blur(30px);opacity:0;transition:opacity .5s;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(var(--glow-1),.13), rgba(var(--glow-2),.06) 45%, transparent 62%);
  mix-blend-mode:screen;}
.hero-stage:hover .spotlight{opacity:1;}
@media (hover:none){.spotlight{display:none;}}

/* ---------- animated gradient keyword in headline ---------- */
.hl{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:220% 100%;animation:hueslide 7s linear infinite;padding:0 .02em;
  filter:drop-shadow(0 2px 22px rgba(var(--glow-1),.22));}
@media (prefers-reduced-motion: reduce){.hl{animation:none;}}
@keyframes hueslide{to{background-position:220% 0;}}

/* ---------- live badge dot pulse ---------- */
.act-copy .kick .dot{animation:pulse 2.2s var(--ease) infinite;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--glow-1),.5);}55%{box-shadow:0 0 0 6px rgba(var(--glow-1),0);}}

/* ---------- magnetic primary buttons + sheen ---------- */
.btn-primary{position:relative;overflow:hidden;isolation:isolate;}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,transparent 28%,rgba(255,255,255,.55) 50%,transparent 72%);
  transform:translateX(-130%);transition:transform .7s var(--ease);}
.btn-primary:hover::after{transform:translateX(130%);}
.btn.mag{will-change:transform;transition:transform .18s var(--ease), background .2s, box-shadow .25s;}

/* ---------- KINETIC MARQUEE ---------- */
.marquee{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:30px 0;background:var(--bg-2);}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:140px;z-index:2;pointer-events:none;}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent);}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg-2),transparent);}
.mq-row{display:flex;width:max-content;align-items:center;animation:scrollx 38s linear infinite;}
.marquee:hover .mq-row{animation-play-state:paused;}
.mq-item{display:inline-flex;align-items:center;gap:26px;padding:0 26px;font-family:var(--font-display);
  font-weight:800;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.035em;white-space:nowrap;color:var(--ink);}
.mq-item.ghost{color:transparent;-webkit-text-stroke:1.2px var(--line-2);}
.mq-item .star{color:var(--accent);font-size:.7em;transform:translateY(-2px);}
@media (prefers-reduced-motion: reduce){.mq-row{animation:none;}}
@keyframes scrollx{to{transform:translateX(-50%);}}

/* ---------- card hover sheen on feature cards ---------- */
.fcard::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(60% 50% at 50% 0%, rgba(var(--glow-1),.12), transparent 70%);}
.fcard:hover::after{opacity:1;}

/* ---------- MOBILE NAV ---------- */
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(255,255,255,.04);cursor:pointer;position:relative;flex:none;}
.burger span{position:absolute;left:13px;right:13px;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease);}
.burger span:nth-child(1){top:17px;}
.burger span:nth-child(2){top:23px;}
.burger span:nth-child(3){top:29px;}
body.menu-open .burger span:nth-child(1){top:23px;transform:rotate(45deg);}
body.menu-open .burger span:nth-child(2){opacity:0;}
body.menu-open .burger span:nth-child(3){top:23px;transform:rotate(-45deg);}
.mobile-menu{position:fixed;inset:0;z-index:95;background:rgba(7,7,10,.97);backdrop-filter:blur(22px);
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:92px 28px 40px;
  opacity:0;visibility:hidden;transform:translateY(-16px);transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;}
.mobile-menu .mesh{z-index:-1;}
body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none;}
.mobile-menu a.ml{font-family:var(--font-display);font-weight:800;font-size:clamp(30px,9vw,46px);letter-spacing:-.04em;
  color:#fff;padding:14px 0;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
.mobile-menu a.ml .arr{color:var(--accent);font-size:.7em;}
.mobile-menu .mm-foot{margin-top:34px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.mobile-menu .lang{border-color:var(--line-2);}

/* ============================================================
   MOBILE ADAPTATION — refined breakpoints
   ============================================================ */
@media(max-width:940px){
  .burger{display:inline-flex;}
}
@media(max-width:760px){
  body{font-size:16px;}
  .wrap{padding:0 20px;}
  section.block{padding:84px 0;}
  .sec-head{margin-bottom:40px;}
  .nav{height:64px;}
  .nav-right .btn-sm{display:none;}

  /* hero */
  .hero-stage{padding:108px 0 56px;}
  .act-copy h1{font-size:calc(clamp(38px,12vw,60px) * var(--hl-scale));line-height:.96;}
  .act-copy .sub{font-size:17px;margin:20px 0 26px;max-width:none;}
  .act-cta{gap:10px;}
  .act-cta .btn{flex:1 1 auto;justify-content:center;}
  .act-trust{gap:20px;margin-top:28px;}
  .act-trust .t b{font-size:22px;}
  .hero-visual{margin-top:40px;min-height:0;}
  .phone{width:248px;}
  .chip{font-size:12px;padding:9px 12px;}
  .chip.c1{left:-2%;top:8%;}
  .chip.c2{right:-2%;bottom:14%;}
  .aud-track{flex-wrap:nowrap;}
  .aud-track button{padding:10px 18px;font-size:13px;}

  /* trust band */
  .trust{padding:36px 0;}
  .trust-grid{gap:26px 16px;}

  /* steps stack handled in base; tighten */
  .step{padding:26px;}
  .step h3{font-size:21px;}

  /* features */
  .carousel-head{margin-bottom:28px;}
  .car-nav{display:none;}
  .track{gap:14px;}
  .fcard{flex-basis:78vw;min-height:0;border-radius:24px;}
  .fcard .ftop{min-height:200px;}
  .fcard .pin-screen{width:128px;}

  /* spotlight / business / download */
  .spot{padding:30px 22px;border-radius:24px;}
  .dl-grid{padding:30px 22px;gap:30px;}
  .dl .phone,.spot .phone{width:230px;}
  .qr-row{gap:13px;}
  .qr{width:96px;height:96px;}

  /* marquee a touch tighter */
  .marquee{padding:22px 0;}
  .mq-item{gap:18px;padding:0 18px;}

  /* footer */
  footer.site{padding:60px 0 36px;}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:14px;}
}
@media(max-width:420px){
  .act-cta{flex-direction:column;align-items:stretch;}
  .store-row{flex-direction:column;align-items:stretch;}
  .store{justify-content:center;}
}