/* ========================================================= Pay Qube — payments, in perfect blocks ========================================================= */ :root{ /* brand */ --brand:#0f5eff; --brand-deep:#0b3fcc; --violet:#7c3aed; --mint:#00e0a4; --mint-soft:#8ff7dc; --amber:#ffb703; --coral:#ff4d6d; /* neutrals */ --ink:#0b1020; --muted:rgba(11,16,32,.65); --faint:rgba(11,16,32,.32); --line:#e6e9f2; --tint:#f2f6ff; --tint-2:#e4ecff; --white:#fff; --grad:linear-gradient(135deg,var(--brand) 0%,var(--violet) 100%); --pad:clamp(20px,5vw,80px); /* Motion curves lifted verbatim from the reference build: --ease "ease-fade", every scroll reveal rides this --ease-base Tailwind's default `.transition`, used for hovers --ease-expo the 10s word-roller in the hero */ --ease:cubic-bezier(0,0,.2,1); --ease-base:cubic-bezier(.4,0,.2,1); --ease-expo:cubic-bezier(.19,1,.22,1); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* overflow-x lives on , not : putting it on body turns body into a scroll container and silently breaks every position:sticky descendant. */ /* Reference build ships `scroll-behavior: auto` and kills overscroll bounce on both html and body, so anchor jumps are instant and the page never rubber-bands past its ends. Smooth scrolling is opted into per-call in JS instead. */ html{scroll-behavior:auto;-webkit-text-size-adjust:100%;overflow-x:hidden;overscroll-behavior:none} html.is-locked{overflow:hidden} body{ font-family:'Anek Latin',system-ui,-apple-system,'Segoe UI',sans-serif; color:var(--ink); background:var(--white); line-height:1.35; overflow-x:clip; overscroll-behavior:none; font-synthesis-weight:none; } img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} li{list-style:none} ::selection{background:var(--brand);color:#fff} ::-webkit-scrollbar{width:10px} ::-webkit-scrollbar-track{background:#eef1f8} ::-webkit-scrollbar-thumb{background:#b9c6e8;border-radius:20px} ::-webkit-scrollbar-thumb:hover{background:var(--brand)} /* ---------- helpers ---------- */ .container{width:min(1240px,100% - var(--pad)*2);margin-inline:auto} .section-pad{padding:clamp(80px,12vw,170px) 0} .center{text-align:center} .brandc{color:var(--brand)} .white{color:#fff} .dim{opacity:.55} .h-xl{font-size:clamp(42px,7.4vw,72px);font-weight:700;line-height:1.02;letter-spacing:-.025em} .h-lg{font-size:clamp(34px,5.4vw,64px);font-weight:700;line-height:1.05;letter-spacing:-.025em} .lead{font-size:clamp(18px,2.2vw,28px);color:var(--muted);font-weight:400;margin-top:14px} .body{font-size:clamp(16px,1.35vw,20px);color:var(--muted);font-weight:400;margin-top:20px;max-width:46ch;line-height:1.55} .body.white{color:rgba(255,255,255,.82)} .eyebrow{font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:14px} /* ---------- reveal ---------- Reference build does this with Tailwind: `opacity-0 translate-y-8` flipping to `opacity-100 translate-y-0` over `duration-1000 ease-fade`. translate-y-8 is 2rem, so 32px — not a round 30 or 34. Stagger step is 0.14s, the same beat the hero word-roller uses between its two lines. */ .reveal{ opacity:0;transform:translateY(32px); transition:opacity 1s var(--ease),transform 1s var(--ease); } /* Once GSAP is driving, it writes opacity and transform inline every frame of the scrub. Leaving the transition on would make the element chase its own animated value a second behind, which reads as lag rather than smoothing. The transform has to go too: GSAP reads whatever is already there as the tween's baseline, so translateY(32px) would survive as a permanent 32px offset once yPercent lands on 0. */ html.gsap .reveal{transition:none;transform:none} .reveal[data-delay="1"]{transition-delay:.14s} .reveal[data-delay="2"]{transition-delay:.28s} .reveal[data-delay="3"]{transition-delay:.42s} .reveal[data-delay="4"]{transition-delay:.56s} .reveal.in{opacity:1;transform:translateY(0)} /* ---------- hero word roller ---------- Two stacked words that slide up into a masked slot, sit still for most of the cycle, then slide out the top. The long hold is what makes it read as a headline swap rather than a marquee. */ .roller{display:inline-block;overflow:hidden;vertical-align:bottom} .roller > span{display:block;overflow:hidden} .roller > span > span{ display:block;transform-origin:0 0; animation:roll 10s var(--ease-expo) 0s infinite normal forwards; } .roller > span:nth-child(2) > span{animation-delay:.14s} @keyframes roll{ 0% {transform:translateY(100%)} 8% {transform:translateY(0)} 90% {transform:translateY(0)} 98% {transform:translateY(-100%)} 100%{transform:translateY(-100%)} } /* ========================================================= 3D CUBE COMPONENT (--s = edge length) ========================================================= */ .cube{ position:relative;display:block;width:var(--s);height:var(--s); transform-style:preserve-3d; transform:rotateX(-22deg) rotateY(-34deg); animation:spin 16s linear infinite; } .cube i{ position:absolute;inset:0;border-radius:6px; background:var(--face,var(--brand)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); } .cube i.f{transform:translateZ(calc(var(--s) / 2))} .cube i.b{transform:rotateY(180deg) translateZ(calc(var(--s) / 2));filter:brightness(.7)} .cube i.r{transform:rotateY(90deg) translateZ(calc(var(--s) / 2));filter:brightness(.8)} .cube i.l{transform:rotateY(-90deg) translateZ(calc(var(--s) / 2));filter:brightness(.72)} .cube i.u{transform:rotateX(90deg) translateZ(calc(var(--s) / 2));filter:brightness(1.25)} .cube i.d{transform:rotateX(-90deg) translateZ(calc(var(--s) / 2));filter:brightness(.55)} @keyframes spin{ from{transform:rotateX(-22deg) rotateY(-34deg)} to {transform:rotateX(-22deg) rotateY(326deg)} } .cube--mint i{--face:var(--mint)} .cube--coral i{--face:var(--coral)} .cube--amber i{--face:var(--amber)} .cube--violet i{--face:var(--violet)} .cube--brand i{--face:var(--brand)} .cube--wire i{background:transparent;box-shadow:inset 0 0 0 3px rgba(255,255,255,.42);filter:none !important} /* ========================================================= PRELOADER ========================================================= */ .loader{ position:fixed;inset:0;z-index:99999; background:radial-gradient(120% 90% at 50% 0%,#1b3bff 0%,#0b1020 78%); display:grid;place-content:center;justify-items:center;gap:24px; transition:transform 1s var(--ease),opacity .5s ease .5s; } .loader.done{transform:translateY(-101%);opacity:0;pointer-events:none} .loader__cube{perspective:600px;margin-bottom:6px} .loader__inner{font-size:clamp(30px,5.4vw,52px);font-weight:700;color:#fff;letter-spacing:-.035em} .loader__inner span{ background:linear-gradient(120deg,var(--mint-soft),var(--mint)); -webkit-background-clip:text;background-clip:text;color:transparent; } .loader__bar{width:min(260px,58vw);height:3px;background:rgba(255,255,255,.2);border-radius:9px;overflow:hidden} .loader__bar i{display:block;height:100%;width:0;background:var(--mint);animation:load 1.25s var(--ease) forwards} @keyframes load{to{width:100%}} /* ========================================================= NAV ========================================================= */ .nav{ position:fixed;top:0;left:0;right:0;z-index:900;padding:18px var(--pad); transition:background .4s ease,padding .4s ease,box-shadow .4s ease,transform .45s var(--ease); } .nav.scrolled{ background:rgba(255,255,255,.85);backdrop-filter:blur(12px); padding:10px var(--pad);box-shadow:0 1px 0 var(--line); } .nav.hide{transform:translateY(-120%)} .nav__wrap{display:flex;align-items:center;gap:28px;max-width:1440px;margin-inline:auto} .brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:300;letter-spacing:-.025em;color:#fff;transition:color .35s ease} .brand__mark{width:27px;flex:none} .brand__text b{font-weight:700} .nav.scrolled .brand{color:var(--ink)} .nav__links{display:flex;align-items:center;gap:6px;margin-left:auto} .nav__link{ position:relative;display:inline-flex;align-items:center;gap:7px; padding:9px 16px;border-radius:100px;font-size:16px;font-weight:500; color:rgba(255,255,255,.85);transition:color .3s ease,background .3s ease; } .nav__link svg{width:11px;transition:transform .3s var(--ease)} .nav__link:hover,.nav__link.is-active{color:#fff;background:rgba(255,255,255,.15)} .nav.scrolled .nav__link{color:var(--muted)} .nav.scrolled .nav__link:hover,.nav.scrolled .nav__link.is-active{color:var(--ink);background:var(--tint)} .nav__drop{position:relative} .nav__drop:hover .nav__link svg{transform:rotate(180deg)} .nav__menu{ position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 8px; width:232px;background:#fff;border-radius:18px;padding:8px; box-shadow:0 24px 60px rgba(11,16,32,.18);border:1px solid var(--line); opacity:0;visibility:hidden;transition:.32s var(--ease); } .nav__drop:hover .nav__menu{opacity:1;visibility:visible;translate:-50% 0} .nav__menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;font-size:15px;font-weight:500;color:var(--ink);transition:background .2s ease} .nav__menu a:hover{background:var(--tint)} .dot{width:8px;height:8px;border-radius:2px;flex:none;rotate:45deg} .dot--blue{background:var(--brand)} .dot--violet{background:var(--violet)} .dot--mint{background:var(--mint)} .dot--amber{background:var(--amber)} .dot--coral{background:var(--coral)} .nav__right{display:flex;align-items:center;gap:16px;margin-left:auto} .socials{display:flex;align-items:center;gap:6px} .socials a{width:32px;height:32px;display:grid;place-content:center;border-radius:10px;transition:background .25s ease,transform .25s var(--ease),color .25s ease} .socials svg{width:16px;height:16px;fill:currentColor} .socials--nav a{color:rgba(255,255,255,.8)} .socials--nav a:hover{background:rgba(255,255,255,.16);color:#fff;transform:translateY(-2px)} .nav.scrolled .socials--nav a{color:var(--muted)} .nav.scrolled .socials--nav a:hover{background:var(--tint);color:var(--brand)} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:600;border-radius:14px;transition:.2s var(--ease-base);white-space:nowrap} .btn--pill{padding:10px 22px;font-size:15px;line-height:1.05;text-align:center} .btn--dark{background:var(--ink);color:#fff} .btn--dark:hover{background:var(--brand);transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,94,255,.35)} .btn--white{background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(11,16,32,.16)} .btn--white:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(11,16,32,.24)} .btn--big{padding:18px 38px;font-size:19px;border-radius:18px} .btn--big svg{width:19px;height:19px;transition:transform .35s var(--ease)} .btn--big:hover svg{transform:translateY(3px)} .nav__burger{display:none;width:40px;height:40px;border-radius:12px;place-content:center;gap:5px;flex-direction:column} .nav__burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:.3s var(--ease)} .nav.scrolled .nav__burger span{background:var(--ink)} .nav__burger.open span:nth-child(1){transform:translateY(3.5px) rotate(45deg)} .nav__burger.open span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)} .drawer{ position:fixed;inset:0;z-index:880;background:#fff; display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad); clip-path:circle(0% at 92% 5%);transition:clip-path .7s var(--ease); } .drawer.open{clip-path:circle(150% at 92% 5%)} .drawer a{font-size:clamp(28px,7vw,44px);font-weight:700;letter-spacing:-.025em;padding:6px 0} .drawer a:active{color:var(--brand)} /* ========================================================= HERO ========================================================= */ .hero{ position:relative;min-height:100svh; background:radial-gradient(120% 100% at 50% -10%,#2a6bff 0%,var(--brand) 42%,#0a37b4 100%); display:flex;flex-direction:column;align-items:center;justify-content:center; padding:130px var(--pad) 70px;overflow:hidden;isolation:isolate;perspective:1000px; } .hero__grid{ position:absolute;inset:0;z-index:0;opacity:.28; background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 20%,transparent 78%); -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 45%,#000 20%,transparent 78%); } .hero::after{ content:"";position:absolute;inset:auto -10% -35% -10%;height:60%;z-index:0; background:radial-gradient(ellipse at 50% 100%,rgba(0,224,164,.22),transparent 62%); pointer-events:none; } .hero__inner{text-align:center;position:relative;z-index:3} .hero__kicker{font-size:clamp(20px,3vw,38px);font-weight:300;color:rgba(255,255,255,.85);letter-spacing:-.01em} .hero__title{ font-size:clamp(58px,13.5vw,150px);font-weight:700;color:#fff; line-height:.94;letter-spacing:-.05em;margin:2px 0 6px; text-shadow:0 24px 60px rgba(4,20,80,.4); } .hero__sub{font-size:clamp(18px,2.6vw,34px);font-weight:300;color:rgba(255,255,255,.85)} .hero__sub em{ font-style:normal;font-weight:700; background:linear-gradient(120deg,var(--mint-soft),var(--mint)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero .btn--big{margin-top:38px} .hero__foot{ position:relative;z-index:3;margin-top:auto;padding-top:56px;max-width:640px;text-align:center; font-size:clamp(15px,1.5vw,19px);color:rgba(255,255,255,.72);font-weight:300; } .hero__foot b{color:#fff;font-weight:600} .hero__scroll{position:absolute;bottom:22px;left:50%;translate:-50% 0;width:22px;height:36px;border:2px solid rgba(255,255,255,.4);border-radius:14px;z-index:3} .hero__scroll span{position:absolute;left:50%;top:7px;translate:-50% 0;width:3px;height:7px;border-radius:3px;background:#fff;animation:scrollDot 1.8s infinite} @keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,14px)}} /* floating cubes */ .hero__shapes{position:absolute;inset:0;z-index:1;pointer-events:none;transform-style:preserve-3d} .shape{position:absolute;display:block;perspective:600px;will-change:transform;animation:bob 7.5s ease-in-out infinite} .shape:nth-of-type(2){animation-duration:9s;animation-direction:reverse} .shape:nth-of-type(3){animation-duration:8s} .shape:nth-of-type(4){animation-duration:6.4s;animation-direction:reverse} .shape:nth-of-type(5){animation-duration:8.6s} .shape:nth-of-type(6){animation-duration:9.5s;animation-direction:reverse} @keyframes bob{0%,100%{translate:0 0}50%{translate:0 -22px}} .shape--stack{display:flex;align-items:flex-end;gap:6px} .shape--stack i{display:block;width:18px;border-radius:5px;background:rgba(255,255,255,.6)} .shape--stack i:nth-child(1){height:20px} .shape--stack i:nth-child(2){height:34px} .shape--stack i:nth-child(3){height:52px} .shape--qr{width:62px;color:rgba(255,255,255,.5)} /* ========================================================= MARQUEE ========================================================= */ .marquee{background:var(--ink);color:#fff;padding:16px 0;overflow:hidden} .marquee__track{display:flex;align-items:center;gap:34px;width:max-content;animation:slide 26s linear infinite} .marquee span{font-size:clamp(18px,2.4vw,30px);font-weight:600;letter-spacing:-.015em;white-space:nowrap} .marquee i{color:var(--mint);font-style:normal;font-size:15px} @keyframes slide{to{transform:translateX(-50%)}} /* ========================================================= CASHBACK ========================================================= */ .cashback{position:relative;overflow:hidden} .deco{position:absolute;pointer-events:none} .deco--stairs{display:flex;align-items:flex-end;gap:8px;left:5%;top:26%;opacity:.95} .deco--stairs i{display:block;width:24px;border-radius:6px;background:var(--tint-2)} .deco--stairs i:nth-child(1){height:26px} .deco--stairs i:nth-child(2){height:48px} .deco--stairs i:nth-child(3){height:74px} .deco--stairs i:nth-child(4){height:104px;background:var(--grad)} .deco--cube2{right:8%;top:28%;perspective:600px} .stats{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(24px,6vw,84px);margin-top:clamp(48px,7vw,86px)} .stat{display:flex;flex-direction:column;align-items:center} .stat b{font-size:clamp(40px,6vw,68px);font-weight:700;letter-spacing:-.035em;line-height:1} .stat span{font-size:15px;color:var(--muted);margin-top:8px;font-weight:500} /* ========================================================= SCAN & PAY ========================================================= */ .scanpay{position:relative;min-height:210vh;background:linear-gradient(180deg,#fff 0%,var(--tint) 30%,var(--tint) 70%,#fff 100%)} .scanpay__sticky{position:sticky;top:0;min-height:100svh;display:flex;align-items:center;padding:110px 0} .scanpay__grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(30px,6vw,80px)} .ticks{margin-top:28px;display:grid;gap:14px} .ticks li{position:relative;padding-left:34px;font-size:17px;font-weight:500} .ticks li::before{ content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%; background:var(--brand); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.1 14.3-4-4 1.5-1.5 2.5 2.5 5.2-5.2 1.5 1.5-6.7 6.7Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm-1.1 14.3-4-4 1.5-1.5 2.5 2.5 5.2-5.2 1.5 1.5-6.7 6.7Z'/%3E%3C/svg%3E") center/contain no-repeat; } .scanpay__visual{position:relative;display:grid;place-items:center;min-height:520px} .pos{ position:absolute;right:2%;bottom:6%;width:150px;padding:14px;border-radius:22px; background:linear-gradient(160deg,#232a3d,#0d1220); box-shadow:0 40px 70px rgba(11,16,32,.3);transform:rotate(9deg);z-index:1; } .pos__screen{height:70px;border-radius:10px;background:#070a14;padding:12px;display:grid;gap:8px;align-content:center} .pos__screen span{display:block;height:7px;border-radius:4px;background:var(--mint);width:70%} .pos__screen span:last-child{width:42%;background:rgba(255,255,255,.28)} .pos__keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px} .pos__keys i{display:block;height:20px;border-radius:6px;background:rgba(255,255,255,.12)} .phone{ position:relative;z-index:2;width:min(320px,80vw);aspect-ratio:9/18.6; border-radius:44px;padding:11px;background:linear-gradient(150deg,#252d42,#0a0e1a); box-shadow:0 50px 90px rgba(11,16,32,.34),0 0 0 1px rgba(255,255,255,.07) inset; /* Resting pose only. GSAP scrubs y/rotate/scale inline across the sticky scene, so no CSS transition here — it would fight the scrub. */ transform:rotate(-4deg); } .phone__notch{position:absolute;top:16px;left:50%;translate:-50% 0;width:88px;height:22px;border-radius:20px;background:#080c16;z-index:5} .phone__screen{ height:100%;border-radius:34px;background:linear-gradient(175deg,#fff,#eef3ff); overflow:hidden;padding:38px 18px 18px;display:flex;flex-direction:column;gap:14px; } .ui-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .ui-qr{width:30px;height:30px;color:var(--brand)} .ui-qr svg{width:100%} .ui-title{font-size:15px;font-weight:600} .ui-avatar{width:28px;height:28px;border-radius:9px;background:var(--grad)} .ui-scanner{position:relative;flex:1;border-radius:22px;overflow:hidden;background:radial-gradient(circle at 50% 45%,#182449,#070b18);display:grid;place-items:center} .ui-qrbig{width:52%;fill:rgba(255,255,255,.9);color:rgba(255,255,255,.9)} .corner{position:absolute;width:26px;height:26px;border:3px solid var(--mint);border-radius:6px} .corner.tl{top:16px;left:16px;border-right:0;border-bottom:0} .corner.tr{top:16px;right:16px;border-left:0;border-bottom:0} .corner.bl{bottom:16px;left:16px;border-right:0;border-top:0} .corner.br{bottom:16px;right:16px;border-left:0;border-top:0} .laser{ position:absolute;left:12%;right:12%;height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--mint),transparent); box-shadow:0 0 18px 3px rgba(0,224,164,.5);animation:scan 2.4s ease-in-out infinite; } @keyframes scan{0%,100%{top:16%}50%{top:82%}} .ui-amount{display:flex;flex-direction:column;gap:2px;text-align:center} .ui-amount small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600} .ui-amount strong{font-size:30px;font-weight:700;letter-spacing:-.03em} .ui-amount em{font-style:normal;font-size:12px;color:var(--muted)} .ui-pay{text-align:center;padding:13px;border-radius:14px;background:var(--grad);color:#fff;font-weight:600;font-size:15px;box-shadow:0 12px 26px rgba(15,94,255,.4)} .cash-pop{ position:absolute;top:16%;right:-18%;padding:11px 17px;border-radius:14px; background:var(--mint);color:#03291d;font-weight:700;font-size:14px;white-space:nowrap; box-shadow:0 18px 34px rgba(0,0,0,.16); opacity:0;transform:translateY(14px) scale(.9);transition:.5s var(--ease); } .cash-pop.show{opacity:1;transform:none;animation:pop 2.6s ease-in-out infinite} @keyframes pop{0%,100%{translate:0 0}50%{translate:0 -9px}} /* ========================================================= THE STACK ========================================================= */ .stack{background:linear-gradient(160deg,var(--brand) 0%,#3b23d6 55%,var(--violet) 100%);padding:clamp(80px,12vw,150px) 0;position:relative;overflow:hidden} .stack::before{content:"";position:absolute;top:-30%;left:-10%;width:60%;height:80%;background:radial-gradient(circle,rgba(0,224,164,.2),transparent 62%)} .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(46px,6vw,76px);position:relative} .card{ background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(14px);border-radius:24px;padding:34px 30px 38px;color:#fff; transition:transform .3s var(--ease),background .3s var(--ease-base); } .card:hover{transform:translateY(-10px);background:rgba(255,255,255,.17)} .card__icon{width:58px;height:58px;border-radius:16px;display:grid;place-content:center;margin-bottom:22px} .card__icon svg{width:28px;height:28px;fill:#0b1020} .i-mint{background:var(--mint)} .i-coral{background:var(--coral)} .i-coral svg{fill:#fff} .i-amber{background:var(--amber)} .card h3{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-bottom:10px} .card p{font-size:16px;color:rgba(255,255,255,.76);line-height:1.5;font-weight:300} /* ========================================================= PRODUCTS ========================================================= */ .beyond{padding-bottom:clamp(40px,5vw,60px)} .prod{padding:clamp(70px,9vw,120px) 0;position:relative;overflow:hidden} .prod__grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(34px,6vw,80px)} .prod__grid--rev .prod__copy{order:2} .prod__visual{display:grid;place-items:center;min-height:340px;perspective:1000px} .link-chip{ display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:12px 22px;border-radius:14px; background:var(--tint-2);color:var(--brand);font-weight:600;font-size:15px;transition:.35s var(--ease); } .link-chip svg{width:15px;transition:transform .35s var(--ease)} .link-chip:hover{background:var(--brand);color:#fff} .link-chip:hover svg{transform:translateX(4px)} /* qubeCard */ .prod--card{background:linear-gradient(180deg,#fff,#eef3ff)} .ccard{ position:relative;width:min(420px,88%);aspect-ratio:1.586;border-radius:20px;padding:26px; background:linear-gradient(135deg,#0b3fcc 0%,var(--brand) 40%,var(--violet) 100%); color:#fff;box-shadow:0 44px 80px rgba(15,60,200,.42); display:flex;flex-direction:column;justify-content:space-between;overflow:hidden; transform:rotateY(var(--ry,-14deg)) rotateX(var(--rx,7deg)); transition:transform .35s var(--ease);transform-style:preserve-3d; } .ccard__mesh{ position:absolute;inset:0;opacity:.35; background-image:linear-gradient(rgba(255,255,255,.18) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.18) 1px,transparent 1px); background-size:28px 28px; mask-image:linear-gradient(115deg,#000,transparent 70%); -webkit-mask-image:linear-gradient(115deg,#000,transparent 70%); } .ccard__shine{ position:absolute;inset:0; background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.32) 46%,transparent 62%); transform:translateX(-60%);animation:shine 5s ease-in-out infinite; } @keyframes shine{0%,70%{transform:translateX(-60%)}100%{transform:translateX(60%)}} .ccard__top{display:flex;align-items:flex-start;justify-content:space-between;position:relative} .ccard__brand{font-size:21px;font-weight:300;letter-spacing:-.025em} .ccard__brand b{font-weight:700} .ccard__wave{width:24px;color:rgba(255,255,255,.8)} .ccard__chip{position:relative;width:44px;height:33px;border-radius:7px;background:linear-gradient(140deg,#ffe27a,#d69f18);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)} .ccard__num{display:flex;gap:14px;font-size:19px;letter-spacing:.06em;font-weight:500;position:relative} .ccard__foot{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;opacity:.85;text-transform:uppercase;position:relative} /* qubeSave */ .prod--save{background:#fff} .deco--coins{left:4%;bottom:12%;display:flex;gap:10px;align-items:flex-end;opacity:.9} .deco--coins i{display:block;width:38px;height:38px;border-radius:10px;background:linear-gradient(140deg,#ffe27a,var(--amber));box-shadow:0 10px 20px rgba(0,0,0,.1)} .deco--coins i:nth-child(2){transform:translateY(-16px)} .deco--coins i:nth-child(3){transform:translateY(-34px)} .meter{margin-top:30px;display:grid;gap:16px;max-width:430px} .meter__bar{position:relative;height:42px;border-radius:14px;background:#eef1f8;overflow:hidden;display:flex;align-items:center} .meter__bar i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:14px;background:#c3d3ff;transition:width 1.3s var(--ease)} .meter__bar i.alt{background:#7fa2ff} .meter__bar i.best{background:var(--grad)} .meter.in i{width:var(--w)} .meter__bar span{position:relative;z-index:2;padding-left:20px;font-size:14px;font-weight:600;color:var(--ink);mix-blend-mode:difference;filter:invert(1) grayscale(1) contrast(9)} .vault{position:relative;display:grid;place-items:center} .vault__box{ width:180px;height:190px;border-radius:20px;border:5px solid var(--brand); position:relative;overflow:hidden;display:flex;flex-direction:column-reverse;align-items:center; gap:7px;padding:12px;background:rgba(15,94,255,.05); } .vault__box span{width:74%;height:26px;border-radius:8px;background:linear-gradient(140deg,#ffe27a,var(--amber));flex:none} .vault__box span:nth-child(2){width:60%} .vault__box span:nth-child(3){width:80%} .vault__box span:nth-child(4){width:52%} .vault b{ position:absolute;top:-24px;right:-30px;width:78px;height:78px;border-radius:22px; background:var(--mint);color:#03291d;display:grid;place-content:center; font-size:26px;font-weight:700;box-shadow:0 18px 34px rgba(0,0,0,.14); animation:pop 3s ease-in-out infinite; } /* qubeCash */ .prod--cash{background:linear-gradient(140deg,var(--ink) 0%,#152a6b 55%,var(--brand-deep) 100%)} .slip{width:min(400px,90%);background:#fff;border-radius:20px;padding:30px 28px;box-shadow:0 40px 80px rgba(0,0,0,.32);position:relative;overflow:hidden} .slip__row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:15px;color:var(--muted)} .slip__row b{color:var(--ink);font-size:17px;font-weight:600} .slip__line{height:1px;background:var(--line);margin:8px 0} .slip__row--big b{font-size:20px;color:var(--brand)} .slip__stamp{position:absolute;right:-38px;top:22px;rotate:38deg;background:var(--mint);color:#03291d;font-size:12px;font-weight:700;letter-spacing:.12em;padding:6px 44px} /* ========================================================= FAQ ========================================================= */ .faq{background:#fff} .acc{margin-top:clamp(34px,5vw,58px);border-top:1px solid var(--line)} .acc__item{border-bottom:1px solid var(--line)} .acc__q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:22px; padding:26px 4px;text-align:left;font-size:clamp(17px,2vw,23px);font-weight:600; letter-spacing:-.015em;transition:color .3s ease; } .acc__q:hover{color:var(--brand)} .acc__q i{position:relative;flex:none;width:34px;height:34px;border-radius:11px;background:var(--tint);transition:.4s var(--ease)} .acc__q i::before,.acc__q i::after{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;background:var(--brand);border-radius:2px;transition:.4s var(--ease)} .acc__q i::before{width:13px;height:2px} .acc__q i::after{width:2px;height:13px} .acc__item.open .acc__q{color:var(--brand)} .acc__item.open .acc__q i{background:var(--brand);rotate:135deg} .acc__item.open .acc__q i::before,.acc__item.open .acc__q i::after{background:#fff} .acc__item.open .acc__q i::after{height:0} .acc__a{overflow:hidden;height:0;transition:height .45s var(--ease)} .acc__a > *{padding-bottom:26px;max-width:78ch;font-size:16.5px;line-height:1.65;color:var(--muted);font-weight:400} .acc__a ol{padding-left:20px} .acc__a ol li{list-style:decimal;margin-bottom:6px} /* ========================================================= DOWNLOAD CTA ========================================================= */ .dl{background:var(--ink);padding:clamp(70px,10vw,130px) 0;position:relative;overflow:hidden} .dl::before{content:"";position:absolute;right:-8%;top:-40%;width:52%;height:180%;border-radius:50%;background:radial-gradient(circle,rgba(15,94,255,.6),transparent 62%)} .dl::after{content:"";position:absolute;left:-6%;bottom:-60%;width:38%;height:140%;border-radius:50%;background:radial-gradient(circle,rgba(0,224,164,.22),transparent 64%)} .dl__inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;position:relative;z-index:2} .dl__stores{display:flex;gap:14px;flex-wrap:wrap} .store{display:flex;align-items:center;gap:12px;padding:13px 24px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;transition:.35s var(--ease)} .store:hover{background:#fff;color:var(--ink);transform:translateY(-3px)} .store svg{width:24px;height:24px;fill:currentColor} .store span{display:flex;flex-direction:column;line-height:1.15} .store small{font-size:11px;opacity:.7} .store b{font-size:16px;font-weight:600} /* ========================================================= FOOTER ========================================================= */ .footer{background:#fff;padding:clamp(60px,8vw,100px) 0 30px;border-top:1px solid var(--line)} .footer__grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:clamp(24px,3vw,40px)} .footer__col{display:flex;flex-direction:column;gap:11px} .footer__col h3{font-size:20px;font-weight:600;margin-bottom:6px} .footer__col a{font-size:15px;color:var(--muted);transition:color .25s ease,translate .25s var(--ease)} .footer__col a:hover{color:var(--brand);translate:3px 0} .brand--foot{color:var(--ink)} .footer__addr{font-size:14px;color:var(--muted);line-height:1.6;margin-top:4px} .footer .socials{margin-top:6px} .footer .socials a{color:var(--muted);background:var(--tint)} .footer .socials a:hover{color:#fff;background:var(--brand);transform:translateY(-2px)} .footer__wordmark{ margin-top:clamp(40px,6vw,80px);font-size:clamp(58px,15.5vw,230px);font-weight:700; letter-spacing:-.055em;line-height:.85;text-align:center; background:linear-gradient(180deg,#b9caff,rgba(185,202,255,0)); -webkit-background-clip:text;background-clip:text;color:transparent;user-select:none; } .footer__bar{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:24px;margin-top:10px;border-top:1px solid var(--line);font-size:13.5px;color:var(--faint)} /* ========================================================= FLOATING QR ========================================================= */ .floatqr{position:fixed;right:24px;bottom:24px;z-index:800;opacity:0;translate:0 20px;transition:.5s var(--ease)} .floatqr.show{opacity:1;translate:0 0} .floatqr__card{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:16px;background:var(--ink);color:#fff;box-shadow:0 20px 44px rgba(11,16,32,.3);transition:.35s var(--ease);cursor:pointer} .floatqr__card:hover{background:var(--brand);transform:translateY(-3px)} .floatqr__card svg{width:26px;fill:currentColor} .floatqr__card span{font-size:12px;line-height:1.25;font-weight:300} .floatqr__card b{font-weight:700;font-size:13px} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1080px){ .nav__links{display:none} .nav__burger{display:flex;align-items:center} .socials--nav{display:none} .footer__grid{grid-template-columns:1fr 1fr 1fr} .footer__col--brand{grid-column:1/-1;margin-bottom:14px} } @media (max-width:900px){ .scanpay{min-height:auto} .scanpay__sticky{position:static;padding:90px 0} .scanpay__grid,.prod__grid{grid-template-columns:1fr} .prod__grid--rev .prod__copy{order:0} .body{max-width:none} .cards{grid-template-columns:1fr} .pos{right:0;bottom:0;width:110px;transform:rotate(12deg)} .deco--stairs,.deco--cube2,.deco--coins{display:none} .shape--qr,.shape--stack{display:none} .dl__inner{flex-direction:column;align-items:flex-start} } @media (max-width:620px){ .footer__grid{grid-template-columns:1fr 1fr} .stats{gap:26px 34px} .stat b{font-size:38px} .floatqr{right:14px;bottom:14px;scale:.9;transform-origin:bottom right} .cash-pop{right:-4%;top:10%} .hero__foot{padding-top:38px} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} }