/* =========================================================
   Maybank Global Access Account-i — Product Landing Page
   Premium light-led design with charcoal "wow" sections
========================================================= */

/* ---------- Design tokens ---------- */
:root{
  --ivory:#FBFAF6;
  --white:#FFFFFF;
  --soft:#F5F3EC;          /* warm soft section bg */
  --app-grey:#ECECEF;      /* matches Maybank2u SG screens */
  --yellow:#FFCC00;
  --yellow-deep:#F5B400;
  --gold:#E8A200;
  --ink:#161616;
  --ink-2:#3C3C40;
  --muted:#76767C;
  --line:rgba(20,20,20,.08);
  --line-2:rgba(20,20,20,.12);
  --dark:#161619;
  --dark-2:#1E1E23;
  --dark-card:#26262C;
  --dark-line:rgba(255,255,255,.12);
  --dark-muted:#A4A4AD;

  --shadow-sm:0 1px 2px rgba(16,16,20,.04), 0 4px 12px rgba(16,16,20,.05);
  --shadow-md:0 4px 12px rgba(16,16,20,.06), 0 18px 40px rgba(16,16,20,.08);
  --shadow-lg:0 10px 24px rgba(16,16,20,.08), 0 36px 80px rgba(16,16,20,.14);
  --shadow-card:0 30px 60px -18px rgba(0,0,0,.55);

  --radius:22px;
  --radius-lg:30px;
  --container:1200px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --motion-ease:cubic-bezier(.16,.84,.44,1);
  --motion-fast:220ms;
  --motion-base:560ms;
  --motion-slow:720ms;
  --motion-distance:0px;

  /* ---- Space for the Maybank2u global header -------------------------
     These pages no longer render their own header. The Maybank2u header is
     position:fixed, so it does NOT push our content down — we reserve the
     space ourselves with these two values.

     It behaves differently at the top of the page vs once scrolled, because
     `.header-scroll.scroll .hidden-onscroll{display:none}` collapses the
     logo row. Measured on maybank2u.com.sg:

                       at page top   after scrolling
        desktop  ≥576px    70px           70px
        mobile   <576px   163px           55px

     --header-h-top  = height at the top of the page → hero top padding
     --header-h      = persistent height once scrolled → anchor offsets and
                       sticky positioning

     If the global header is resized, change only these four numbers
     (two here, two in the <576px block near the end of this file). */
  --header-h:70px;
  --header-h-top:70px;

  /* ---- Space for the Maybank2u fixed bottom bar (.sticky-footer) ----
     The template also pins a bar to the BOTTOM of the viewport carrying
     Open an Account / Get a Loan / Branch Queue etc. It is position:fixed
     too, so it covers our content rather than pushing it up. Measured:

        desktop  >=576px   121px
        mobile   <576px     94px

     Between this and the header, ~191px of a 720px-tall window is host
     chrome — which is why the hero has to be sized against the space that
     is actually left, not against 100vh. */
  --host-bar-h:121px;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
body{
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--ivory);
  color:var(--ink);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
ul{list-style:none}
strong{font-weight:600}
[hidden]{display:none!important}
.nb{white-space:nowrap}
:focus-visible{outline:2.5px solid var(--gold);outline-offset:3px;border-radius:6px}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.section{position:relative;padding-block:clamp(72px,9vw,128px)}
.section--soft{background:var(--soft)}
main>section{isolation:isolate}
/* Section seams — a soft block melts into the ivory page colour at the edge
   that meets a plain (ivory) section, so adjacent light sections flow together
   instead of meeting at a hard line. .seam-b fades the bottom, .seam-t the top. */
.section--soft.seam-b{background:linear-gradient(180deg,var(--soft) 0%,var(--soft) 60%,var(--ivory) 100%)}
.section--soft.seam-t{background:linear-gradient(180deg,var(--ivory) 0%,var(--soft) 40%,var(--soft) 100%)}
.section--soft.seam-t.seam-b{background:linear-gradient(180deg,var(--ivory) 0%,var(--soft) 26%,var(--soft) 74%,var(--ivory) 100%)}

/* A quiet seam system carries a trace of the previous section into the next.

   Every selector here is scoped with `.section` on purpose. The FAQ page also
   loads this stylesheet and it has a panel with id="currencies" too — but that
   one is a .faq-panel, which is NOT positioned, so an unscoped
   `#currencies::before` anchored itself to the nearest positioned ancestor
   (.faq-body) and painted this dark gradient as an 82px grey band across the
   top of the entire FAQ body. Keep the `.section` prefix on all of these. */
.section#overview::before,.section#currencies::before,.section#card::before,
.section#setup::before,.section#apply::before{
  content:"";position:absolute;inset:0 0 auto;height:clamp(44px,6vw,82px);z-index:1;pointer-events:none
}
.section#overview::before{background:linear-gradient(180deg,rgba(255,204,0,.07),transparent)}
.section#currencies::before{background:linear-gradient(180deg,rgba(12,12,24,.12),transparent)}
.section#card::before{background:linear-gradient(180deg,rgba(251,250,246,.08),transparent)}
.section#setup::before{background:linear-gradient(180deg,rgba(28,28,28,.11),transparent)}
.section#apply::before{background:linear-gradient(180deg,rgba(245,243,236,.08),transparent)}

/* ---------- Section heads ---------- */
.section__head{max-width:680px;margin-bottom:clamp(36px,5vw,60px)}
.section__title{font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:700;line-height:1.08;letter-spacing:-.015em}
.section__title--light{color:#fff}
.section__lead{margin-top:16px;font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--muted);font-weight:400;max-width:60ch}
.section__lead--light{color:var(--dark-muted)}

.micro-note{font-size:.74rem;line-height:1.5;color:var(--muted);margin-top:14px}
.section--dark .micro-note{color:rgba(255,255,255,.55)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-weight:600;font-size:.98rem;letter-spacing:.01em;
  padding:.85em 1.6em;border:none;border-radius:999px;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  white-space:nowrap;
  /* the host template's .btn sets text-transform:uppercase and
     line-height:3.65rem; declare both so its values can't leak in */
  text-transform:none;line-height:1.25;
}
.btn--primary{
  background:linear-gradient(135deg,#FFD84D,var(--yellow) 45%,var(--yellow-deep));
  color:#1a1400;
  box-shadow:0 6px 16px rgba(245,180,0,.35),0 2px 4px rgba(245,180,0,.25);
}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(245,180,0,.45),0 3px 8px rgba(245,180,0,.3)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.6px var(--line-2)}
.btn--ghost:hover{background:rgba(20,20,20,.045);transform:translateY(-2px);box-shadow:inset 0 0 0 1.6px var(--ink)}
.btn--lg{padding:1em 1.9em;font-size:1.04rem}
.btn--sm{padding:.6em 1.15em;font-size:.9rem}

/* =========================================================
   HEADER
========================================================= */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s var(--ease);
}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:var(--header-h)}
.site-header.is-scrolled{
  background:rgba(251,250,246,.78);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 var(--line),0 6px 24px rgba(16,16,20,.06);
}
.brand{display:flex;align-items:center}
.brand__logo{height:30px;width:auto}
.nav{display:flex;gap:6px}
.nav__link{
  position:relative;padding:8px 14px;font-size:.95rem;font-weight:500;color:var(--ink-2);
  border-radius:8px;transition:color .2s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  background:var(--yellow-deep);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav__link:hover{color:var(--ink)}
.nav__link:hover::after{transform:scaleX(1)}
.site-header__cta{display:flex;align-items:center;gap:12px}

.hamburger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;background:transparent;border:none;border-radius:10px}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mobile-menu{
  background:rgba(251,250,246,.97);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);box-shadow:var(--shadow-md);
  padding:14px clamp(20px,5vw,40px) 24px;
}
.mobile-menu nav{display:flex;flex-direction:column;gap:4px}
.mobile-menu__link{padding:14px 6px;font-weight:500;font-size:1.05rem;border-bottom:1px solid var(--line);color:var(--ink-2)}
.mobile-menu__link:hover{color:var(--ink)}
.mobile-menu__apply{margin-top:16px}


/* --- Host-page hardening: inherited font-weight ---------------------------
   libs.css carries a Meyer-style reset:

     html,body,div,span,p,a,i,em,... { font-size:100%; font-weight:normal }
     h1,h2,h3,h4,h5,h6              { font-size:100%; font-weight:400 }

   Those are BARE ELEMENT selectors, so they beat plain inheritance. Every
   inline element of ours that was meant to inherit its parent's weight is
   flattened to 400 — most visibly the hero headline, which renders at 800
   standalone and at regular weight once embedded.

   These elements never declared a weight because they never needed one.
   `inherit` restores the original behaviour whatever the parent weight is,
   and a class selector outranks their bare `span`/`i`. Scoped to our own
   markup so the host's header and footer are untouched. */
.hero__title span,
.nb,
.nb i,
.cchip span,
.myr-simple__title span,
.cur-pill span,
.setup__no,
.setup__wallet-links a span,
.doc-card span,
.sticky-cta__txt strong i{font-weight:inherit}

/* --- Host-page hardening -------------------------------------------------
   These pages are embedded in the Maybank2u template, whose Bootstrap defines
   .container:before/:after{content:" ";display:table} as a clearfix. Our
   layout wrappers also carry .container, and inside a grid/flex formatting
   context those pseudo-elements become REAL grid/flex items — which pushed
   the hero copy into column 2 and dropped the visual onto row 2.
   Cancel them on our wrappers only; the host's own containers are untouched. */
.hero__inner::before,.hero__inner::after,
.overview__inner::before,.overview__inner::after,
.myr-simple__inner::before,.myr-simple__inner::after,
.convert__inner::before,.convert__inner::after,
.card-sec__inner::before,.card-sec__inner::after,
.final__inner::before,.final__inner::after,
.docs::before,.docs::after,
.currow::before,.currow::after{content:none;display:none}

/* Their style.css also loads up .container with:

     .container{overflow:hidden; position:relative; z-index:1}

   The overflow is the damaging one. Every wrapper of ours that carries
   .container silently becomes a clipping + compositing box, and on the FAQ
   page that box contains a position:sticky sidebar — which paints a grey
   band across the top of the section on first render that only clears on the
   next repaint. Restore the default. Scoped through `main` and `.footer`,
   which are both our own elements, so the host's chrome is untouched. */
main .container,
.footer .container{overflow:visible}

/* =========================================================
   HERO
========================================================= */
.hero{position:relative;padding-top:calc(var(--header-h-top) + clamp(28px,5vw,56px));padding-bottom:clamp(40px,6vw,72px);overflow:hidden}
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__glow{position:absolute;border-radius:50%;filter:blur(70px);opacity:.7}
.hero__glow--1{width:60vw;height:60vw;max-width:760px;max-height:760px;top:-22%;right:-12%;
  background:radial-gradient(circle,rgba(255,204,0,.55),rgba(255,204,0,0) 68%)}
.hero__glow--2{width:42vw;height:42vw;max-width:520px;max-height:520px;bottom:-20%;left:-10%;
  background:radial-gradient(circle,rgba(255,216,77,.32),rgba(255,216,77,0) 70%)}
.hero__grid{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(20,20,20,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(20,20,20,.035) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 38%,#000 30%,transparent 75%);
}
.hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);
  gap:clamp(18px,2.5vw,38px);
  align-items:center;
  min-height:min(78vh,680px);
}

.hero__title{
  font-size:clamp(1.9rem,3.3vw,3.15rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--ink);
  max-width:820px;
}

.hero__title-line{
  display:block;
}

.hero__title-line--gold{
  display:block;
  color:var(--gold);
  white-space:nowrap;
  margin-top:9px;
}

.hero__sub{
  margin-top:18px;
  font-size:clamp(1.15rem,1.9vw,1.5rem);
  font-weight:500;
  color:var(--ink-2);
}

.hero__lead{
  margin-top:14px;
  font-size:clamp(1rem,1.3vw,1.12rem);
  color:var(--muted);
  max-width:42ch;
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}

@media (max-width:980px){
  .hero__inner{
    grid-template-columns:1fr;
    gap:36px;
    min-height:auto;
  }

  .hero__visual{
    justify-self:center;
    margin-left:0;
  }

  .hero__stage{
    min-height:500px;
  }
}

@media (max-width:768px){
  .hero__title{
    font-size:clamp(2rem,8.5vw,3rem);
    line-height:1.02;
  }

  .hero__title-line--gold{
    white-space:normal;
    margin-top:6px;
  }

  .hero__stage{
    min-height:440px;
  }

  .hero__card{
    left:2%;
    bottom:8%;
    width:clamp(140px,42vw,175px);
  }

  .hero__stage{
    --visual-shift:0px;
  }
}

/* Hero visual stage */
.hero__visual{
  position:relative;
  width:fit-content;
  justify-self:center;
  margin-inline:auto;
 left:clamp(75px,7vw,120px);
  perspective:1200px;          /* gives the cursor-follow tilt real depth */
}

.hero__stage{
  position:relative;
  display:flex;
  width:fit-content;
  margin-inline:auto;
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

/* iPhone mockup — reusable */
.phone{
  --pw:300px;
  position:relative;width:var(--pw);aspect-ratio:9/19.5;flex:none;
  background:linear-gradient(155deg,#3a3a40,#0c0c0f 38%,#17171b 70%,#2a2a30);
  border-radius:calc(var(--pw) * .155);
  padding:calc(var(--pw) * .03);
  box-shadow:0 2px 4px rgba(0,0,0,.5),0 40px 80px -28px rgba(0,0,0,.5),inset 0 0 0 1.4px rgba(255,255,255,.1);
}
.phone__screen{
  position:relative;width:100%;height:100%;overflow:hidden;background:#000;
  border-radius:calc(var(--pw) * .125);
}
.phone__screen>img{width:100%;height:100%;object-fit:cover;object-position:top center}
.phone__island{
  position:absolute;top:calc(var(--pw) * .028);left:50%;transform:translateX(-50%);z-index:4;
  width:calc(var(--pw) * .32);height:calc(var(--pw) * .052);background:#000;
  border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.phone__btn{position:absolute;background:linear-gradient(180deg,#37373d,#1b1b1f);border-radius:2px;z-index:0}
.phone__btn--mute{left:calc(var(--pw) * -.006);top:18%;width:calc(var(--pw) * .012);height:calc(var(--pw) * .03)}
.phone__btn--vol{left:calc(var(--pw) * -.006);top:24%;width:calc(var(--pw) * .012);height:calc(var(--pw) * .09)}
.phone__btn--pwr{right:calc(var(--pw) * -.006);top:23%;width:calc(var(--pw) * .012);height:calc(var(--pw) * .11)}

/* Hero phone — pre-rendered angled mockup image (angle is baked into the PNG) */
.hero__phone-img{
  display:block;
  width:clamp(285px,37vw,470px);
  height:auto;
  filter:drop-shadow(0 34px 54px rgba(0,0,0,.26));
  transition:translate .4s cubic-bezier(.22,.61,.36,1);
}

/* Debit card floating in front of the phone */
.hero__card-img{
  position:absolute;
  z-index:2;
  width:46%;
  left:-14%;
  bottom:5%;
  transform:rotate(-10deg);
  filter:drop-shadow(0 26px 36px rgba(0,0,0,.42));
  transition:translate .4s cubic-bezier(.22,.61,.36,1);
}

.hero__card img{
  display:block;
  width:100%;
  border-radius:14px;
}
/* gloss overlay removed — card has its own transparent rounded corners now */
.hero__card-gloss{display:none}

/* floatChip keyframes retained — used by the hero proof pills */
@keyframes floatChip{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* Hero marquee */
.hero__marquee{position:relative;z-index:1;margin-top:clamp(20px,4vw,40px);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)}
.hero__marquee-track{display:flex;width:max-content;animation:marquee 32s linear infinite;will-change:transform}
.hero__marquee-seg{display:flex;gap:20px;padding-right:20px;flex:none}
.hero__marquee-track span{font-size:.92rem;font-weight:600;letter-spacing:.18em;color:rgba(20,20,20,.28)}
/* 5 identical segments; scroll exactly one segment then loop — always ≥4 segments on screen, so no gap on any width */
@keyframes marquee{to{transform:translateX(-20%)}}

/* =========================================================
   OVERVIEW — Revolut-style switching panels (dark)
========================================================= */
.section--ink{background:radial-gradient(120% 90% at 50% -8%,#1e1e42,#0c0c18 62%);color:#fff;overflow:hidden}
.dark-glow--2{top:auto;bottom:-24%;left:auto;right:-10%;
  background:radial-gradient(circle,rgba(120,110,255,.22),transparent 66%)}
.btn--light{background:#fff;color:#15152e;box-shadow:0 8px 20px rgba(0,0,0,.28)}
.btn--light:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.34)}
.btn--ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.45)}
.btn--ghost-light:hover{background:rgba(255,255,255,.1);transform:translateY(-2px);box-shadow:inset 0 0 0 1.6px #fff}
.ovr__cta{display:flex;gap:14px;justify-content:center;margin-top:30px;flex-wrap:wrap}

.ovr__carousel{position:relative;margin-top:clamp(34px,4.5vw,56px)}
.ovr__track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:6px 2px 18px;scrollbar-width:none}
.ovr__track::-webkit-scrollbar{display:none}
.ovr__panel{flex:0 0 auto;width:clamp(266px,29vw,322px);aspect-ratio:3/4.1;scroll-snap-align:center;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#27274f,#15152e);border:1px solid rgba(255,255,255,.08);border-radius:26px;padding:28px 26px;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.7)}
.ovr__panel-title{font-size:1.34rem;font-weight:600;color:#fff;line-height:1.16;letter-spacing:-.01em}
.ovr__panel-text{margin-top:8px;font-size:.85rem;color:#a9a9c6;max-width:24ch}

.ovr__arrow{position:absolute;top:46%;transform:translateY(-50%);z-index:6;width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(8px);transition:background .2s var(--ease),transform .2s var(--ease)}
.ovr__arrow:hover{background:rgba(255,255,255,.24)}
.ovr__arrow:active{transform:translateY(-50%) scale(.94)}
.ovr__arrow--prev{left:-8px}
.ovr__arrow--next{right:-8px}

.ovr__dots{display:flex;justify-content:center;gap:9px;margin-top:26px}
.ovr__dots button{width:9px;height:9px;padding:0;border:none;border-radius:50%;background:rgba(255,255,255,.26);cursor:pointer;
  transition:width .3s var(--ease),background .3s var(--ease)}
.ovr__dots button.is-active{width:26px;border-radius:6px;background:linear-gradient(90deg,var(--yellow),var(--yellow-deep))}

/* Panel artwork (shared) */
.ovr__art{position:absolute;left:0;right:0;bottom:0;height:58%;pointer-events:none}
.coin{position:absolute;border-radius:50%;background:#fff;border:3px solid rgba(255,255,255,.92);overflow:hidden;
  box-shadow:0 12px 24px rgba(0,0,0,.45)}
.coin .flag{width:100%;height:100%;box-shadow:none}
.ovr__chip{position:absolute;background:rgba(10,10,22,.72);border:1px solid rgba(255,255,255,.13);border-radius:14px;
  backdrop-filter:blur(10px);box-shadow:0 16px 30px rgba(0,0,0,.4)}

/* 1 · Card */
.ovr__art--card .ovr__card-glow{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:62%;aspect-ratio:1;border-radius:50%;filter:blur(32px);z-index:0;
  background:radial-gradient(circle,rgba(255,204,0,.28),transparent 66%)}
.ovr__card{position:absolute;left:50%;bottom:16%;width:44%;transform:translateX(-50%) rotate(-8deg);
  z-index:2;filter:drop-shadow(0 28px 46px rgba(0,0,0,.62))}
.ovr__chip--spend{left:8%;right:8%;bottom:6%;padding:13px 15px;z-index:3}
.ovr__chip-top{display:flex;justify-content:space-between;align-items:baseline}
.ovr__chip-top b{font-size:1.06rem;font-weight:700;color:#fff}
.ovr__chip-top small{font-size:.72rem;color:#a9a9c6}
.ovr__chip-bar{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.16);margin:9px 0 7px;overflow:hidden}
.ovr__chip-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#FFD84D,#F5B400)}
.ovr__chip-sub{font-size:.68rem;color:#9a9ab8}

/* 2 · Coins */
.ovr__art--coins .ovr__ring{position:absolute;left:50%;top:48%;width:208px;height:208px;transform:translate(-50%,-50%);
  border-radius:50%;border:1.5px dashed rgba(255,255,255,.16)}
.coin--lg{width:86px;height:86px;left:50%;top:48%;transform:translate(-50%,-50%);z-index:3;border-width:4px}
.ovr__art--coins .coin:not(.coin--lg){width:46px;height:46px;left:50%;top:48%}
.coin--a{transform:translate(-50%,calc(-50% - 92px))}
.coin--b{transform:translate(calc(-50% + 80px),calc(-50% - 46px))}
.coin--c{transform:translate(calc(-50% + 80px),calc(-50% + 46px))}
.coin--d{transform:translate(-50%,calc(-50% + 92px))}
.coin--e{transform:translate(calc(-50% - 80px),calc(-50% + 46px))}
.coin--f{transform:translate(calc(-50% - 80px),calc(-50% - 46px))}

/* 3 · Convert */
.conv-tok{position:absolute;width:74px;height:74px;border-radius:50%;border:3px solid rgba(255,255,255,.92);overflow:hidden;
  box-shadow:0 14px 26px rgba(0,0,0,.45)}
.conv-tok .flag{width:100%;height:100%;box-shadow:none}
.conv-tok--from{left:16%;top:20%}
.conv-tok--to{right:16%;top:46%}
.conv-swap{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;z-index:3;
  background:linear-gradient(135deg,#FFD84D,#F5B400);color:#1a1400;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px rgba(245,180,0,.45)}
.conv-swap svg{width:22px;height:22px}

/* 4 · Money Lock — premium padlock on a coin stack */
.ovr__lock-glow{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);
  width:66%;aspect-ratio:1;border-radius:50%;filter:blur(34px);z-index:0;
  background:radial-gradient(circle,rgba(255,204,0,.34),transparent 66%)}
.ovr__lock{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:62%;max-width:244px;z-index:3;
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.55))}

/* 5 · PayNow + eStatement — stacked statement cards + glossy badge */
.ovr__art--paynow .estmt{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-5deg);
  width:62%;background:linear-gradient(165deg,#ffffff,#eceef4);border-radius:16px;padding:15px 16px 17px;
  box-shadow:0 24px 42px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.9);z-index:2}
.ovr__art--paynow .estmt--back{width:58%;aspect-ratio:1.46;padding:0;
  transform:translate(-52%,-62%) rotate(-13deg);
  background:linear-gradient(165deg,#dfe2ec,#c4c8db);box-shadow:0 16px 30px rgba(0,0,0,.4);z-index:1}
.estmt__head{display:flex;align-items:center;gap:9px;margin-bottom:12px;padding-bottom:11px;border-bottom:1px solid rgba(30,32,50,.1)}
.estmt__logo{flex:none;width:22px;height:22px;border-radius:7px;
  background:linear-gradient(135deg,#FFD84D,#F5B400);box-shadow:0 3px 7px rgba(245,180,0,.4)}
.estmt__bar{display:block;flex:1;height:8px;border-radius:5px;background:linear-gradient(90deg,#cfd3de,#e3e6ee)}
.estmt__row{display:block;height:7px;border-radius:4px;background:#d3d7e1;margin-bottom:8px}
.estmt__row.short{width:58%}
.estmt__chart{display:flex;align-items:flex-end;gap:6px;height:42px;margin-top:14px}
.estmt__chart i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#cfd3de,#bcc0cc)}
.estmt__chart i:nth-child(1){height:42%}
.estmt__chart i:nth-child(2){height:64%}
.estmt__chart i:nth-child(3){height:52%}
.estmt__chart i:nth-child(4){height:100%;background:linear-gradient(180deg,#FFD84D,#F5B400)}
.estmt__chart i:nth-child(5){height:76%}
.ovr__art--paynow .paynow-badge{position:absolute;right:12%;top:9%;z-index:4;width:66px;height:66px;border-radius:50%;
  background:linear-gradient(140deg,#FFE480,#F3AE00);color:#1a1400;display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 30px rgba(245,180,0,.5),inset 0 2px 3px rgba(255,255,255,.6),inset 0 -4px 7px rgba(170,115,0,.35)}
.paynow-badge::before{content:"";position:absolute;left:18%;top:14%;width:34%;height:26%;border-radius:50%;background:#fff;opacity:.5}
.paynow-badge svg{position:relative;width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* 6 · Apply in-app */
.ovr__art--apply .applic{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);width:120px;height:152px;
  border-radius:24px;background:linear-gradient(165deg,#2c2c58,#181833);border:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  box-shadow:0 22px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12)}

/* =========================================================
   SUPPORTED CURRENCIES STRIP
========================================================= */
.section__head--center{margin-inline:auto;text-align:center;max-width:720px}
.section__head--center .kicker{justify-content:center}
.section__head--center .section__lead{margin-inline:auto}
.section#currencies .section__head{max-width:1040px;margin-bottom:22px}
.section#currencies .section__lead{margin-top:14px}

.currency-lead__myr{color:var(--gold);font-weight:600;white-space:nowrap}
.currow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:11px;max-width:920px;margin:0 auto}
.cchip{display:inline-flex;align-items:center;gap:8px;padding:8px 15px 8px 9px;background:var(--white);
  border:1px solid var(--line);border-radius:999px;font-size:.94rem;font-weight:600;color:var(--ink);
  box-shadow:var(--shadow-sm);transition:transform var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease),
  border-color var(--motion-fast) var(--ease)}
.cchip--featured{gap:9px;padding:11px 20px 11px 11px;font-size:1.03rem;font-weight:700;
  box-shadow:0 5px 18px rgba(16,16,20,.09)}
.cchip--featured .flag{width:27px;height:27px}
.cchip:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(232,162,0,.28)}
.cchip:hover .flag{scale:1.06}
.cchip .flag{width:22px;height:22px;transition:scale var(--motion-fast) var(--ease)}
.cchip__star{color:var(--gold);font-weight:700;margin-left:-3px}
.curnote{text-align:center;font-size:.78rem;color:var(--muted);margin-top:18px}
.curnote + .curnote{margin-top:8px}
.section#currencies{padding-bottom:clamp(40px,4.5vw,64px)}
#convert{padding-top:clamp(44px,5vw,72px)}
/* (mobile horizontal scroller for .currow lives in the responsive section below) */

/* =========================================================
   CONVERT
========================================================= */
.convert__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center}
.ticklist{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.ticklist li{display:flex;align-items:flex-start;gap:12px;font-size:1rem;color:var(--ink-2)}
.ticklist svg{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  background:#FFF6D6;border-radius:50%;padding:4px}
.convert__demo{position:relative;display:flex;justify-content:center}
.convert__demo::before{
  content:"";position:absolute;left:50%;top:50%;width:min(88%,430px);aspect-ratio:1;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,204,0,.2),rgba(245,180,0,.06) 42%,transparent 70%);
  opacity:0;transform:translate(-50%,-46%) scale(.72);
  transition:opacity 1.15s var(--motion-ease),transform 1.15s var(--motion-ease)
}
.convert__demo .phone--app{
  z-index:1;opacity:0;transform:scale(.995);
  transition:opacity .78s var(--motion-ease),transform .78s var(--motion-ease)
}
.convert__demo.is-visible::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.convert__demo.is-visible .phone--app{opacity:1;transform:none}

/* App UI inside phone */
.phone--app{--pw:clamp(230px,28vw,300px)}
.phone__screen--app{background:var(--app-grey);font-size:calc(var(--pw) * .0425)}
.appui{position:absolute;inset:0;display:flex;flex-direction:column;gap:.7em;
  padding:2.4em 1.25em 1.25em;overflow:hidden}
.appui__topbar{display:flex;align-items:center;justify-content:space-between;color:var(--ink);margin-bottom:.2em}
.appui__topbar .appui__title{font-weight:700;font-size:1.18em}
.appui__back,.appui__close{font-size:1.3em;color:var(--ink-2);line-height:1}
.appui__lbl{font-size:.95em;color:var(--ink-2);margin-bottom:.45em}
.appui__row{display:flex;align-items:center;justify-content:space-between;gap:.6em}
.cur-pill{
  display:inline-flex;align-items:center;gap:.5em;padding:.5em .85em;background:var(--white);
  border-radius:999px;font-weight:700;font-size:1.05em;color:var(--ink);
  box-shadow:0 3px 7px rgba(16,16,20,.12),inset 0 0 0 1px rgba(255,255,255,.6);
  border:none;
}
.cur-pill .flag{width:1.55em;height:1.55em}
.cur-pill--btn{cursor:pointer}
.cur-pill__chev{font-size:.7em;margin-left:.1em;color:var(--muted)}
.appui__amt{font-size:1.5em;font-weight:600;color:var(--muted);letter-spacing:-.01em}
.appui__amt--strong{color:var(--ink);font-weight:700}
.appui__avail{font-size:.78em;color:var(--muted);text-align:right;margin-top:.4em;border-top:1px solid rgba(20,20,20,.12);padding-top:.4em}
.appui__field{position:relative}
.appui__field:nth-of-type(2) .appui__row{border-bottom:2px solid rgba(20,20,20,.15);padding-bottom:.4em}
.appui__swap{align-self:center;display:flex;align-items:center;justify-content:center;
  width:2.4em;height:2.4em;background:var(--white);border-radius:50%;
  box-shadow:0 3px 8px rgba(16,16,20,.15);font-size:1.1em;color:var(--ink);margin:.1em 0}
.cur-menu{position:absolute;left:0;top:calc(100% + .3em);z-index:8;background:var(--white);
  border-radius:1em;box-shadow:0 12px 30px rgba(16,16,20,.22);padding:.4em;min-width:8em;
  display:flex;flex-direction:column;gap:.1em}
.cur-menu li{display:flex;align-items:center;gap:.55em;padding:.5em .7em;border-radius:.6em;
  font-weight:600;font-size:1em;cursor:pointer;transition:background .15s}
.cur-menu li .flag{width:1.4em;height:1.4em}
.cur-menu li:hover,.cur-menu li.is-active{background:#FFF6D6}
.appui__card{background:var(--white);border-radius:1.1em;padding:1em 1.1em;box-shadow:0 4px 14px rgba(16,16,20,.08)}
.appui__rate{display:flex;align-items:center;justify-content:space-between;gap:.5em}
.appui__rate span{font-size:.95em;color:var(--ink-2)}
.appui__rate strong{font-size:1em;font-weight:700;transition:opacity .3s}
.appui__fine{font-size:.78em;color:var(--muted);margin:.4em 0 .7em}
.appui__line{display:flex;align-items:center;justify-content:space-between;font-size:.95em;padding-top:.5em;border-top:1px solid rgba(20,20,20,.07)}
.appui__line strong{font-weight:700}
.appui__total{display:flex;align-items:center;justify-content:space-between;gap:.5em;
  background:#222227;color:#fff;border-radius:999px;padding:.85em 1.2em}
.appui__total span{font-size:.92em;color:#cfcfd6}
.appui__total strong{font-size:1.2em;font-weight:700;transition:opacity .3s}
.appui__next{margin-top:auto;width:100%;border:none;background:linear-gradient(135deg,#FFD84D,var(--yellow) 50%,var(--yellow-deep));
  color:#1a1400;font-weight:700;font-size:1.05em;padding:.85em;border-radius:999px;
  box-shadow:0 6px 14px rgba(245,180,0,.3)}
.appui .is-flip{opacity:0}

/* =========================================================
   DARK SECTIONS (shared)
========================================================= */
.section--dark{background:radial-gradient(120% 120% at 75% 0%,#23232a,var(--dark) 55%);color:#fff;overflow:hidden}
.section__dark-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.dark-glow{position:absolute;width:55vw;height:55vw;max-width:680px;max-height:680px;
  top:-18%;left:-8%;border-radius:50%;filter:blur(80px);
  background:radial-gradient(circle,rgba(255,204,0,.28),rgba(255,204,0,0) 68%)}
.dark-glow--center{top:auto;left:50%;bottom:-30%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(255,204,0,.3),rgba(255,204,0,0) 66%)}
.section--dark .container{position:relative;z-index:1}

/* =========================================================
   DEBIT CARD — full-bleed hero banner, copy over dark negative space
========================================================= */
/* The photo's own backdrop is a flat #1C1C1C, so the section extends it with the
   same colour — the visual sits right, black negative space grows to the left. */
.card-sec{position:relative;padding:0;background:#1C1C1C;color:#fff;overflow:hidden;isolation:isolate}
.card-sec__media{position:absolute;inset:0;z-index:0;pointer-events:none}
/* The card+fan sits at 67% / 56% inside the source frame, so the image is offset by
   exactly that much — the subject then lands where `left`/`top` point, dead centre
   of the space beside the copy. */
.card-sec__media img{position:absolute;left:71.5%;top:50%;transform:translate(-67%,-56%);
  width:auto;max-width:none;height:104%;display:block}
.card-sec__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#1C1C1C 0%,#1C1C1C 30%,rgba(28,28,28,.85) 42%,rgba(28,28,28,.35) 50%,rgba(28,28,28,0) 57%)}
.card-sec__inner{position:relative;z-index:2;min-height:clamp(700px,64vw,790px);
  display:flex;align-items:center;padding-block:clamp(52px,7vw,88px)}
.card-sec__copy{max-width:min(49%,560px)}
.card-sec__title{font-size:clamp(1.9rem,3.3vw,2.85rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;
  max-width:16ch}
.card-sec__lead{margin-top:16px;font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.62;
  color:rgba(255,255,255,.72);max-width:49ch}
.card-sec__product{color:var(--gold);font-weight:600}

/* official wallet and network marks — one restrained, premium surface */
.card-brands{position:relative;width:calc(100% + 24px);margin-top:28px;padding:30px 32px;
  border:1px solid rgba(255,255,255,.32);border-radius:20px;background:rgba(255,255,255,.98);
  box-shadow:0 22px 60px rgba(0,0,0,.3);overflow:hidden;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.card-brands__grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:24px}
.card-brands__group{min-width:0}
.card-brands__group:first-child{padding-right:24px;border-right:1px solid #e3ded3}
.card-brands__label{display:block;margin-bottom:16px;color:#756f65;font-family:inherit;font-size:.64rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}
.card-brands__logos{display:flex;align-items:center;justify-content:flex-start;gap:18px}
.card-brands__group:first-child .card-brands__logos{gap:2px}
.brand-tile{display:inline-flex;align-items:center;justify-content:center;height:62px;padding:0;border:0;
  border-radius:0;background:transparent;box-shadow:none;overflow:visible;
  transition:transform .22s var(--ease),opacity .22s var(--ease)}
.brand-tile:is(a):hover{transform:translateY(-2px);opacity:.76}
.brand-tile:is(a):focus-visible{outline:3px solid rgba(255,204,0,.55);outline-offset:5px;border-radius:5px}
.brand-tile--apple{width:120px;flex:0 0 120px;justify-content:flex-start}
.brand-tile--samsung{width:56px;flex:0 0 56px;margin-left:-2px}
.brand-tile--nets,.brand-tile--atm5{width:88px;flex:0 0 88px}
.brand-tile--cirrus{width:58px;flex:0 0 58px}
.brand-tile img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}

/* actions */
.card-sec__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:36px}
.card-sec__actions .btn svg{fill:none;stroke:currentColor;transition:transform .25s var(--ease)}
.card-sec__actions .btn:hover svg{transform:translate(2px,-2px)}

@media (max-width:900px){
  /* stack: visual centred across the top, copy reads beneath it */
  .card-sec__media img{left:50%;top:0;transform:translate(-67%,-11%);width:158%;height:auto}
  .card-sec__scrim{background:linear-gradient(to bottom,rgba(28,28,28,0) 0%,rgba(28,28,28,.15) 42%,rgba(28,28,28,.9) 64%,#1C1C1C 78%)}
  .card-sec__inner{min-height:0;display:block;padding-block:clamp(290px,74vw,360px) clamp(40px,9vw,56px)}
  .card-sec__copy{max-width:none}
  .card-sec__title{max-width:22ch}
  .card-brands{width:100%}
}
@media (min-width:901px) and (max-width:1100px){
  .card-brands{width:100%;padding:22px}
  .card-brands__group:first-child{padding-right:18px}
  .card-brands__logos{gap:12px}
  .brand-tile{height:50px}
  .brand-tile--apple{width:102px;flex-basis:102px}
  .brand-tile--samsung{width:48px;flex-basis:48px}
  .brand-tile--nets,.brand-tile--atm5{width:72px;flex-basis:72px}
  .brand-tile--cirrus{width:46px;flex-basis:46px}
}
@media (max-width:640px){
  .card-sec__actions{gap:16px}
  .card-sec__actions .btn{width:100%}
  .card-brands__grid{grid-template-columns:1fr;gap:10px}
  .card-brands__group:first-child{padding:0 0 18px;border-right:0;border-bottom:1px solid #e3ded3}
  .card-brands__logos{flex-wrap:wrap}
}
.dashboard{width:100%;max-width:440px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.bcards{padding:8px 18px}
.bcard{display:flex;align-items:center;gap:14px;padding:16px 6px;border-bottom:1px solid var(--line)}
.bcard:last-child{border-bottom:none}
.bcard__flag .flag{width:38px;height:38px}
.bcard__meta{flex:1}
.bcard__meta span{display:block;font-weight:600;font-size:1rem}
.bcard__meta small{color:var(--muted);font-size:.8rem}
.bcard__amt{font-weight:700;font-size:1.08rem;letter-spacing:-.01em}
.dashboard__actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 18px 8px}
.dashboard__actions button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px;
  background:var(--soft);border:1px solid var(--line);border-radius:14px;font-size:.74rem;font-weight:600;color:var(--ink-2);
  transition:background .2s,transform .2s}
.dashboard__actions button:hover{background:#FFF6D6;transform:translateY(-2px)}
.dashboard__actions svg{width:21px;height:21px;fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dashboard .micro-note{padding:4px 18px 20px}

/* =========================================================
   GAA MYR WELCOME REWARD — product-led promotion
========================================================= */
.myr-simple{overflow:hidden;background:var(--ivory)}
.myr-simple__inner{display:grid;grid-template-columns:minmax(360px,.78fr) minmax(0,1.05fr);
  align-items:center;gap:clamp(56px,8vw,112px)}
.myr-simple__copy{max-width:550px}
.myr-simple__eyebrow .flag{width:25px;height:25px;box-shadow:0 0 0 4px rgba(232,162,0,.1)}
.myr-simple__title{font-size:clamp(2.1rem,3.7vw,3.45rem);font-weight:700;line-height:1.04;
  letter-spacing:-.04em;color:var(--ink)}
.myr-simple__title span{color:var(--ink);white-space:nowrap}
.myr-simple__title .myr-simple__reward{color:var(--gold)}
.myr-simple__lead{max-width:50ch;margin-top:22px;color:var(--muted);
  font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.72}
.myr-simple__lead strong{display:block;margin-bottom:5px;color:var(--ink);font-weight:600}
.myr-simple__lead i{font-style:italic}
.myr-simple__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.myr-simple__eligibility{max-width:58ch;margin-top:18px;color:#979797;font-size:.67rem;line-height:1.55}
.myr-simple__media{position:relative;justify-self:start;width:min(100%,500px);aspect-ratio:3/4;overflow:hidden;
  border-radius:28px;background:#e8dcc7;box-shadow:0 32px 72px -38px rgba(30,25,15,.34)}
.myr-simple__media img{position:absolute;inset:0 auto 0 0;width:144%;max-width:none;height:100%;
  object-fit:cover;object-position:left center;filter:saturate(.95) contrast(1.015)}
@media (max-width:920px){
  .myr-simple__inner{grid-template-columns:1fr;gap:40px}
  .myr-simple__copy{max-width:650px}
  .myr-simple__media{justify-self:center;width:100%;max-width:520px}
}
@media (max-width:560px){
  .myr-simple__title{font-size:clamp(1.9rem,8.4vw,2.65rem)}
  .myr-simple__media{aspect-ratio:4/5;border-radius:23px}
  .myr-simple__media img{width:146%}
}

/* =========================================================
   SETUP — application journey (click / tap to switch steps)
========================================================= */
.setup__head{max-width:44rem;margin:0 auto clamp(38px,4.4vw,60px);text-align:center}
.setup__head .kicker{justify-content:center}
.setup__head .section__lead{margin-inline:auto}

/* Elevated walkthrough panel — phone hero (left) · stepper (right) */
.setup{position:relative;display:grid;grid-template-columns:minmax(260px,.8fr) 1fr;
  gap:clamp(30px,4vw,70px);align-items:center;
  padding:clamp(30px,4vw,60px) clamp(26px,4vw,68px);
  background:linear-gradient(150deg,#FFFFFF 0%,#FFFDF6 52%,#FFF8E6 100%);
  border:1px solid rgba(245,180,0,.16);border-radius:clamp(26px,2.6vw,38px);
  box-shadow:0 44px 90px -50px rgba(16,16,20,.42),0 2px 5px rgba(16,16,20,.04)}

/* Phone hero */
.setup__stage{position:relative;display:flex;flex-direction:column;align-items:center}
.setup__phone-wrap{position:relative;display:flex;justify-content:center;isolation:isolate}
.setup__device{position:relative;z-index:1;width:clamp(212px,23vw,300px);aspect-ratio:606 / 1239;
  filter:drop-shadow(0 40px 62px rgba(16,16,20,.26)) drop-shadow(0 8px 16px rgba(16,16,20,.12))}
/* Pure crossfade — the iPhone frame is baked into every shot, so any transform
   would visibly double the frame mid-transition. Fading alone keeps it rock solid. */
.setup__shot{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;
  opacity:0;transition:opacity .4s var(--ease);will-change:opacity}
.setup__shot.is-active{opacity:1}
.setup__glow{position:absolute;inset:-16% -22% -10%;z-index:0;border-radius:50%;filter:blur(66px);opacity:.62;
  background:radial-gradient(50% 46% at 50% 52%,rgba(255,204,0,.5),rgba(255,204,0,0) 70%);
  transition:opacity .6s var(--ease)}
.setup.is-complete .setup__glow{opacity:1}
.setup__ready{position:absolute;left:50%;bottom:-15px;z-index:3;white-space:nowrap;pointer-events:none;
  display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:999px;
  font-size:.82rem;font-weight:600;color:#1a1400;
  background:linear-gradient(135deg,#FFD84D,var(--yellow-deep));box-shadow:0 16px 30px rgba(245,180,0,.45);
  opacity:0;transform:translate(-50%,12px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.setup__ready svg{width:15px;height:15px}
.setup.is-complete .setup__ready{opacity:1;transform:translate(-50%,0)}

/* Stepper */
.setup__side{min-width:0}
.setup__journey{position:relative;list-style:none;display:flex;flex-direction:column;gap:2px}
.setup__rail{position:absolute;left:35px;top:38px;bottom:38px;width:2px;border-radius:2px;
  background:rgba(20,20,20,.09);overflow:hidden}
.setup__rail-fill{display:block;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--yellow),var(--yellow-deep));transition:height .55s var(--ease)}
.setup__stepwrap{display:flex}
.setup__step{position:relative;display:flex;align-items:flex-start;gap:17px;width:100%;text-align:left;
  cursor:pointer;background:transparent;border:1px solid transparent;border-radius:16px;padding:13px 16px;
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease)}
.setup__step:hover:not(.is-active){background:rgba(20,20,20,.03)}
.setup__step.is-active{background:var(--white);border-color:rgba(245,180,0,.28);
  box-shadow:0 16px 32px -18px rgba(16,16,20,.3)}
.setup__marker{position:relative;z-index:1;flex:none;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;
  background:var(--white);color:var(--muted);box-shadow:0 0 0 2px var(--line-2) inset,0 0 0 5px #FFFDF6;
  transition:background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.setup__no,.setup__tick{transition:opacity .25s var(--ease)}
.setup__tick{position:absolute;width:21px;height:21px;opacity:0;color:#1a1400}
.setup__step.is-active .setup__marker{transform:scale(1.06);color:#1a1400;
  background:linear-gradient(135deg,#FFE066,var(--yellow) 55%,var(--yellow-deep));
  box-shadow:0 0 0 2px transparent inset,0 0 0 5px #FFFDF6,0 10px 22px rgba(245,180,0,.45)}
.setup__step.is-done .setup__marker{color:#1a1400;
  background:linear-gradient(135deg,#FFD84D,var(--yellow-deep));
  box-shadow:0 0 0 2px transparent inset,0 0 0 5px #FFFDF6}
.setup__step.is-done .setup__no{opacity:0}
.setup__step.is-done .setup__tick{opacity:1}
.setup__txt{padding-top:2px;min-width:0}
.setup__txt strong{display:block;font-size:1.06rem;font-weight:600;color:rgba(22,22,22,.55);
  transition:color .3s var(--ease)}
.setup__step.is-active .setup__txt strong,.setup__step.is-done .setup__txt strong{color:var(--ink)}
.setup__txt small{display:block;margin-top:4px;font-size:.9rem;line-height:1.55;color:var(--muted);
  transition:color .3s var(--ease)}
.setup__txt small b{font-weight:600}
.setup__step.is-active .setup__txt small{color:var(--ink-2)}
.setup__stepwrap--wallet{flex-direction:column}
.setup__wallet-links{display:flex;flex-wrap:wrap;gap:8px;max-height:0;margin:0 16px 0 77px;
  opacity:0;overflow:hidden;pointer-events:none;
  transition:max-height .3s var(--ease),opacity .25s var(--ease),margin .3s var(--ease)}
.setup__step.is-active + .setup__wallet-links{max-height:80px;margin-top:8px;margin-bottom:7px;
  opacity:1;pointer-events:auto}
.setup__wallet-links a,.setup__caption-links a{display:inline-flex;align-items:center;gap:5px;
  color:#7d5900;font-size:.76rem;font-weight:600;line-height:1.3;
  border-bottom:1px solid rgba(125,89,0,.35);transition:color .2s var(--ease),border-color .2s var(--ease)}
.setup__wallet-links a:hover,.setup__caption-links a:hover{color:var(--gold);border-color:var(--gold)}

.setup__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;
  margin-top:clamp(24px,2.4vw,32px);padding-top:clamp(22px,2.2vw,28px);
  border-top:1px solid rgba(20,20,20,.07)}
.setup__cta svg{transition:transform .25s var(--ease)}
.setup__cta:hover svg{transform:translateX(3px)}
.setup__fine{flex:1 1 12rem;font-size:.8rem;line-height:1.5;color:var(--muted)}
.setup__disclaimer{max-width:56ch;margin:clamp(22px,2.2vw,30px) auto 0;text-align:center}

/* Mobile-only controls (hidden on desktop) */
.setup__mnav,.setup__mcaption{display:none}

@media (max-width:1023px){
  .setup{grid-template-columns:1fr;gap:clamp(26px,4vw,38px);padding:clamp(28px,5vw,42px) clamp(20px,4vw,32px)}
  .setup__journey,.setup__rail{display:none}
  .setup__actions{margin-top:0;padding-top:0;border-top:none;justify-content:center;text-align:center;
    flex-direction:column;gap:14px}
  .setup__fine{flex:none;max-width:44ch}
  .setup__stage{width:100%}
  .setup__device{width:min(58vw,250px)}
  .setup__mnav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
  .setup__mbtn{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid var(--line-2);
    background:var(--white);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow-sm);transition:background .25s var(--ease),transform .2s var(--ease)}
  .setup__mbtn:hover{background:#FFFBEC}
  .setup__mbtn:active{transform:scale(.94)}
  .setup__mbtn[disabled]{opacity:.35;pointer-events:none}
  .setup__mbtn svg{width:20px;height:20px}
  .setup__dots{display:flex;align-items:center;gap:16px}
  .setup__dots button{position:relative;width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;
    background:rgba(20,20,20,.22);transition:width .35s var(--ease),background .35s var(--ease)}
  /* the dot stays 9px visually, but carries a finger-sized hit area; the 16px gap
     keeps neighbouring hit areas from overlapping */
  .setup__dots button::after{content:"";position:absolute;inset:-16px -8px}
  .setup__dots button.is-active{width:26px;border-radius:6px;
    background:linear-gradient(90deg,var(--yellow),var(--yellow-deep))}
  .setup__mcaption{display:block;text-align:center;max-width:40ch;margin:18px auto 0}
  .setup__count{display:block;font-size:.74rem;font-weight:600;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold);margin-bottom:8px}
  .setup__mcaption h3{font-size:1.2rem;font-weight:600}
  .setup__mcaption p{margin-top:7px;font-size:.95rem;color:var(--muted);line-height:1.6}
  .setup__mcaption .is-flip{opacity:0;transition:opacity .18s var(--ease)}
  .setup__caption-links{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 16px;margin-top:12px}
  .setup__caption-links a{font-size:.84rem}
}

/* =========================================================
   FAQ
========================================================= */
.faq{display:flex;flex-direction:column;gap:12px}
.faq__item{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:box-shadow .25s,border-color .25s}
.faq__item[open]{border-color:rgba(245,180,0,.4);box-shadow:var(--shadow-md)}
.faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 22px;font-weight:600;font-size:1.04rem;cursor:pointer;list-style:none;color:var(--ink)}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item[open] .faq__icon::after{transform:rotate(90deg);opacity:0}
.faq__body{padding:0 22px 22px;color:var(--muted);font-size:.98rem;line-height:1.65}
.faq__body p{max-width:68ch}

/* =========================================================
   DOCUMENTS
========================================================= */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* "Important Notice" sits apart from the six document links: it is a notice
   rather than a T&C/Fees pair, and it reads as a banner directly above the
   SDIC disclaimer. Spanning every column keeps the grid above it a clean 3x2
   instead of leaving an orphan on a third row. 1/-1 holds at every breakpoint. */
.doc-card--wide{grid-column:1/-1}
.doc-card{display:flex;align-items:center;gap:14px;padding:22px 22px;background:var(--white);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);font-weight:600;font-size:1.02rem;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease)}
.doc-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(245,180,0,.4)}
.doc-card:target{border-color:rgba(245,180,0,.62);box-shadow:0 0 0 4px rgba(255,204,0,.12),var(--shadow-md);scroll-margin-top:calc(var(--header-h) + 24px)}
.doc-card__ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 44px;
  border-radius:12px;background:linear-gradient(140deg,#FFF1BF,#FFE066)}
.doc-card__ico svg{width:22px;height:22px;fill:none;stroke:#3a2c00;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.doc-card > span:not(.doc-card__ico){flex:1}
.doc-card__arrow{width:18px;height:18px;flex:none;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .28s var(--ease),stroke .28s var(--ease)}
.doc-card:hover .doc-card__arrow{transform:translate(3px,-3px);stroke:var(--gold)}
.docs__disclaimer{margin-top:28px;font-size:.82rem;color:var(--muted);text-align:center;max-width:70ch;margin-inline:auto}

/* =========================================================
   FINAL CTA
========================================================= */
.final__inner{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,64px);align-items:center}
.final__title{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:700;letter-spacing:-.02em;color:#fff;line-height:1.08}
.final__sub{margin:16px 0 18px;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--dark-muted);max-width:44ch}
.final__note{margin-top:20px;font-size:.8rem;color:var(--dark-muted);max-width:44ch}
.final__visual{position:relative;display:flex;justify-content:center;align-items:center;min-height:300px}
.final__qr{position:relative;z-index:2;text-align:center}
.final__qr-frame{width:clamp(190px,21vw,248px);padding:12px;border-radius:22px;background:#fff;
  border:1px solid rgba(255,255,255,.82);box-shadow:0 30px 70px -24px rgba(0,0,0,.72),0 0 0 7px rgba(255,204,0,.08)}
.final__qr img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:13px}
.final__qr figcaption{margin-top:14px;color:#fff;font-size:.86rem;font-weight:600;letter-spacing:.02em}
.final__glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(120%,520px);aspect-ratio:1;border-radius:50%;z-index:0;filter:blur(30px);
  background:radial-gradient(circle,rgba(255,204,0,.24),transparent 66%)}

/* =========================================================
   FOOTER
========================================================= */
/* The Maybank2u template renders a permanent fixed bottom bar (.sticky-footer —
   Open an Account / Get a Loan / Branch Queue ...). It is 121px tall at >=576px
   and 94px below, and it sits ON TOP of whatever is at the bottom of the page,
   so the footer has to reserve that height or the SDIC legal text is covered. */
.footer{background:#0E0E11;color:var(--dark-muted);padding:clamp(52px,6vw,80px) 0 calc(var(--host-bar-h) + 24px)}
.footer__top{display:grid;grid-template-columns:1.3fr 2fr;gap:clamp(32px,6vw,72px);
  padding-bottom:clamp(28px,4vw,40px);border-bottom:1px solid var(--dark-line)}
.footer__logo{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.footer__tag{margin-top:16px;color:var(--yellow);font-weight:600;font-size:.9rem;letter-spacing:.01em}
.footer__desc{margin-top:8px;font-size:.88rem;line-height:1.65;color:var(--dark-muted);max-width:44ch}
.footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer__col h4{color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.footer__col a{display:block;font-size:.9rem;color:var(--dark-muted);padding:7px 0;transition:color .2s var(--ease)}
.footer__col a:hover{color:var(--yellow)}
.footer__legal{margin-top:clamp(24px,3vw,32px);font-size:.76rem;line-height:1.7;color:#7c7c85;max-width:none}
@media (max-width:820px){.footer__top{grid-template-columns:1fr;gap:32px}}
@media (max-width:560px){.footer__cols{grid-template-columns:repeat(2,1fr);gap:18px 20px}}

/* =========================================================
   STICKY MOBILE CTA
========================================================= */
/* Disabled while embedded in Maybank2u: their fixed .sticky-footer already owns
   the bottom of the viewport and already carries an Open an Account button.
   Stacking ours on top consumed ~190px of an 844px phone screen. Apply Now is
   still in the hero and in the final CTA section. To re-enable for a standalone
   deployment, restore `display:flex` in the max-width:920px block below. */
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:none;
  align-items:center;justify-content:space-between;gap:14px;padding:12px 14px 12px 18px;
  background:rgba(22,22,25,.92);backdrop-filter:blur(14px);border-radius:18px;
  box-shadow:0 14px 36px rgba(0,0,0,.32);transform:translateY(140%);transition:transform .4s var(--ease)}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta__txt{display:flex;flex-direction:column;line-height:1.25}
.sticky-cta__txt strong{color:#fff;font-size:.95rem;font-weight:600}
.sticky-cta__txt small{color:var(--dark-muted);font-size:.74rem}
.sticky-cta .btn{padding:.7em 1.3em}

/* =========================================================
   REVEAL ANIMATIONS
========================================================= */
/* Quiet reveal language: a soft dissolve with no directional sliding. */
.reveal{
  opacity:0;transform:scale(.997);filter:blur(1.5px);
  transition:opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease),
    filter var(--motion-slow) var(--motion-ease);
  will-change:opacity,transform,filter
}
.reveal[data-reveal="left"],
.reveal[data-reveal="right"],
.reveal[data-reveal="scale"]{transform:scale(.997)}
.reveal.is-visible{opacity:1;transform:none;filter:none;will-change:auto}

/* Overview behaves as one composition; only the inactive panels recede slightly. */
.ovr__panel{transition:opacity .5s var(--ease),box-shadow .5s var(--ease)}
.ovr__track:not(:hover) .ovr__panel:not(.is-current){opacity:.78}

.hero__marquee:hover .hero__marquee-track{animation-play-state:paused}

/* Overview fades as a single composition, with no internal stagger. */
html.motion-ready .ovr>.container{opacity:0;filter:blur(1.5px);
  transition:opacity .78s var(--motion-ease),filter .78s var(--motion-ease)}
html.motion-ready .ovr.is-entered>.container{opacity:1;filter:none}
.ovr .dark-glow{opacity:.45;transition:opacity .8s var(--motion-ease)}
.ovr.is-entered .dark-glow{opacity:1}

/* MYR: the portrait remains the focus; only the shared dissolve is used. */
.myr-simple__media{transition:box-shadow .55s var(--motion-ease)}
.myr-simple__media:hover{box-shadow:0 42px 88px -40px rgba(30,25,15,.42)}

/* Product surfaces stay composed; their parent section supplies the fade. */
.card-sec__media img{opacity:1;scale:1}
.card-sec__copy .brand-tile{opacity:1;translate:0 0}
.final__glow{opacity:.68;transition:opacity .8s var(--motion-ease)}
.final.is-entered .final__glow{opacity:1}

/* flags base */
.flag{display:inline-block;border-radius:50%;overflow:hidden;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.1);background:#fff}

/* =========================================================
   HERO ROUTE LINES
========================================================= */
.hero__routes{position:absolute;inset:0;width:100%;height:100%;opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 60% 42%,#000 28%,transparent 80%);
  mask-image:radial-gradient(ellipse 78% 72% at 60% 42%,#000 28%,transparent 80%)}
.hero__routes-lines{animation:routeDash 20s linear infinite}
@keyframes routeDash{to{stroke-dashoffset:-300}}

/* =========================================================
   CONVERT STEP INDICATOR
========================================================= */
.cstep{display:flex;align-items:center;gap:9px;margin:24px 0 6px;flex-wrap:wrap}
.cstep__item{font-size:.8rem;font-weight:600;color:var(--muted);padding:7px 14px;border-radius:999px;background:var(--white);
  border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.cstep__item.is-active{color:#1a1400;background:linear-gradient(135deg,#FFF1BF,#FFD84D);border-color:transparent;
  box-shadow:0 6px 14px rgba(245,180,0,.28)}
.cstep__sep{width:16px;height:2px;border-radius:2px;background:var(--line-2);flex:none}

/* dashboard + balance micro-interactions */
.bcard{cursor:pointer;border-radius:12px;transition:background .28s var(--ease),box-shadow .28s var(--ease)}
.bcard:hover{background:linear-gradient(90deg,#FFFBEC,rgba(255,255,255,0))}
.bcard:focus-visible{outline:2.5px solid var(--gold);outline-offset:-3px}
.bcard.is-active{background:linear-gradient(90deg,#FFF6D6,rgba(255,255,255,0));
  box-shadow:inset 3px 0 0 var(--yellow-deep)}
.dashboard__actions.is-armed button{border-color:rgba(245,180,0,.45);background:#FFFBEC}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width:1080px){
  .features{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:920px){
  .nav{display:none}
  .hamburger{display:flex}
  .hero__inner{grid-template-columns:1fr;min-height:0;gap:8px}
  .hero__copy{text-align:center;display:flex;flex-direction:column;align-items:center;order:1}
  .hero__lead{max-width:48ch}
  .hero__visual{order:2;margin-top:8px}
  .hero__stage{
  min-height:clamp(410px,46vw,590px);
}
  .convert__inner,.manage__inner,.final__inner{grid-template-columns:1fr;gap:36px}
  .final__copy{order:2}
  .final__visual{order:1}
  .final__copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .docs{grid-template-columns:repeat(2,1fr)}
  /* .sticky-cta{display:flex}  <- re-enable this for a standalone deployment */
}
@media (max-width:575.98px){
  /* Maybank2u header stacks below Bootstrap's sm breakpoint: 163px at the
     top of the page, collapsing to 55px once scrolled. */
  :root{--header-h:55px;--header-h-top:163px;--host-bar-h:94px}
  .section{padding-block:clamp(54px,11vw,72px)}
  .features,.docs{grid-template-columns:1fr}
  .hero__title{font-size:clamp(1.5rem,6.7vw,2.2rem)}
  .hero__actions{width:100%}
  .hero__actions .btn{flex:1}
  .dashboard__actions{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:380px){
  .dashboard__actions button{font-size:.68rem}
}

@media (max-width:920px){
  .cstep{justify-content:center}
}
/* narrow screens: the 4 step pills wrap, which strands a connector dash at the
   end of a row — drop the connectors and let the pills wrap as a clean cluster */
@media (max-width:620px){
  .cstep{gap:8px 10px}
  .cstep__sep{display:none}
}
/* supported currencies strip — mobile horizontal scroller */
@media (max-width:720px){
  .currow{display:flex;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;margin-inline:calc(-1 * clamp(20px,5vw,40px));padding:6px clamp(20px,5vw,40px) 14px;
    /* keep the snapport inside the gutter so the first chip isn't flush to the screen edge */
    scroll-padding-inline:clamp(20px,5vw,40px)}
  .currow::-webkit-scrollbar{display:none}
  .cchip{flex:none;scroll-snap-align:start}
}

/* overview carousel responsive */
@media (max-width:920px){
  .ovr__arrow{display:none}
  .ovr__panel{width:80vw;max-width:340px}
  /* the arrows are hidden at this width, so these dots become the only tap control:
     keep them 9px visually but give them a finger-sized hit area */
  .ovr__dots{gap:16px}
  .ovr__dots button{position:relative}
  .ovr__dots button::after{content:"";position:absolute;inset:-16px -8px}
}

/* =========================================================
   REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1;transform:none;filter:none}
  html.motion-ready .ovr>.container{opacity:1;filter:none}
  .card-sec__media img{opacity:1;scale:1}
  .card-sec__copy .brand-tile{opacity:1;translate:0 0}
  .ovr .dark-glow{opacity:1;scale:1}
  .hero__marquee-track,.proof-pill{animation:none}
  .phone--hero,.hero__card{transform:none}
  .setup__shot{transition:opacity .2s linear}
  .to-top{transition:opacity .2s linear}
  .btn--primary::after{display:none}
}

/* =========================================================
   ENHANCEMENTS — scroll progress, active nav, back-to-top,
   button sheen (advanced micro-interactions)
========================================================= */

/* Scroll progress bar (top of viewport) */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--yellow),var(--yellow-deep),var(--gold));
  box-shadow:0 0 10px rgba(245,180,0,.55);will-change:width}

/* Active nav link (scroll-spy) */
.nav__link.is-active{color:var(--ink)}
.nav__link.is-active::after{transform:scaleX(1)}

/* Back-to-top FAB */
.to-top{position:fixed;right:22px;bottom:22px;z-index:95;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:none;
  background:linear-gradient(135deg,#FFD84D,var(--yellow) 45%,var(--yellow-deep));color:#1a1400;
  box-shadow:0 8px 22px rgba(245,180,0,.4),0 2px 6px rgba(245,180,0,.25);
  opacity:0;transform:translateY(14px) scale(.9);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease),box-shadow .25s var(--ease)}
.to-top.is-visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.to-top:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 30px rgba(245,180,0,.5)}
.to-top:active{transform:translateY(0) scale(.96)}
.to-top svg{width:22px;height:22px}
@media (max-width:640px){
  .to-top{right:16px;bottom:86px;width:42px;height:42px}
}

/* Primary button premium sheen sweep */
.btn--primary{position:relative;overflow:hidden}
.btn--primary::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease);pointer-events:none}
.btn--primary:hover::after{left:135%}

/* =========================================================
   HERO — tagline + floating proof pills (premium upgrade)
========================================================= */
.hero__tagline{margin-top:14px;font-size:.98rem;color:var(--muted);letter-spacing:.005em}
.hero__tagline strong{font-weight:600;color:var(--ink-2)}
@media (max-width:600px){
  /* Phones: the 3D tilt shifts the phone off-centre and pushes the right chip off-screen,
     so sit it flat & centred here and let the chips frame it within the viewport. */
  .phone--hero{transform:none}
}

/* =========================================================
   CONVERT — guided step demo
========================================================= */
.cstep__item{border:1px solid var(--line-2);font-family:inherit;cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease)}
.cstep__item:hover{color:var(--ink);border-color:rgba(245,180,0,.55);transform:translateY(-1px)}
.cstep__desc{margin-top:12px;font-size:.92rem;color:var(--muted);min-height:1.4em}
.convert__copy .is-flip{opacity:0;transition:opacity .16s var(--ease)}

/* step-driven emphasis inside the app mockup */
.appui .cur-pill--btn,.appui__amt--strong,.appui__card,.appui__next{transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.appui__rate{transition:background .35s var(--ease)}
.appui[data-step="1"] .cur-pill--btn{box-shadow:0 0 0 3px rgba(255,204,0,.5)}
.appui[data-step="2"] .appui__amt--strong{text-shadow:0 0 18px rgba(245,180,0,.55)}
.appui[data-step="3"] .appui__card{box-shadow:0 0 0 2px rgba(245,180,0,.55),0 8px 22px rgba(16,16,20,.1)}
.appui[data-step="3"] .appui__rate{background:linear-gradient(90deg,rgba(255,204,0,.18),transparent);border-radius:.6em}
.appui[data-step="4"] .appui__next{box-shadow:0 0 0 4px rgba(255,204,0,.32),0 10px 24px rgba(245,180,0,.42);transform:translateY(-1px)}

/* phone glow pulse when the active step changes */
@keyframes phonePulse{
  0%{filter:drop-shadow(0 0 0 rgba(255,204,0,0))}
  40%{filter:drop-shadow(0 0 26px rgba(255,204,0,.55))}
  100%{filter:drop-shadow(0 0 0 rgba(255,204,0,0))}
}
.phone--app.is-pulse{animation:phonePulse .85s var(--ease)}