@import url('https://api.fontshare.com/v2/css?f[]=clash-display@200,300,400,500,600,700&display=swap');

/* V27 — Global typography: Clash Display across the entire ROUPAY website */
:root{--font-primary:'Clash Display',Arial,sans-serif;}
html,body,body *,button,input,select,textarea,summary,a,p,span,strong,b,small,label,
h1,h2,h3,h4,h5,h6,nav,header,footer,section,article,div{
  font-family:var(--font-primary)!important;
}
button,input,select,textarea{font:inherit!important;}
h1,h2,.hero-title,.section-title{font-weight:600;}
.btn,.nav a,.kicker,h3,h4,strong,b{font-weight:600;}
p,.lead,.muted,small{font-weight:400;}


:root{
  --bg:#030403;
  --bg2:#070907;
  --panel:#0a0d0a;
  --panel2:#101410;
  --lime:#baff2f;
  --lime2:#77ff37;
  --white:#f5f7f2;
  --muted:#8e978b;
  --line:rgba(186,255,47,.16);
  --line2:rgba(255,255,255,.08);
  --max:1260px;
  --r:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;color:var(--white);font-family:'Prompt',Arial,sans-serif;background:var(--bg);overflow-x:hidden;text-transform:uppercase}
a{color:inherit;text-decoration:none}
button,input,summary{font:inherit}
img{display:block;max-width:100%}
::selection{background:var(--lime);color:#081008}

/* BACKGROUND SYSTEM */
body::before{content:"";position:fixed;inset:0;z-index:-3;background:
radial-gradient(circle at 14% 8%,rgba(112,255,36,.09),transparent 22%),
radial-gradient(circle at 88% 28%,rgba(112,255,36,.05),transparent 20%),
linear-gradient(#030403,#030403)}
body::after{content:"";position:fixed;inset:0;z-index:-2;opacity:.28;pointer-events:none;background-image:
linear-gradient(rgba(186,255,47,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(186,255,47,.05) 1px,transparent 1px);background-size:54px 54px;mask-image:linear-gradient(to bottom,black,transparent 72%);animation:gridDrift 28s linear infinite}
@keyframes gridDrift{to{background-position:54px 54px}}
.noise{position:fixed;inset:0;z-index:80;opacity:.025;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}
.cursor{position:fixed;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(160,255,42,.08),transparent 68%);transform:translate(-50%,-50%);pointer-events:none;z-index:1;mix-blend-mode:screen}
.progress{position:fixed;left:0;top:0;height:2px;background:var(--lime);box-shadow:0 0 18px rgba(186,255,47,.75);z-index:100;width:0}

.container{width:min(var(--max),calc(100% - 56px));margin:auto}
.section{position:relative;padding:112px 0;border-top:1px solid rgba(255,255,255,.035)}
.section.compact{padding:78px 0}
.kicker{display:flex;gap:10px;align-items:center;color:var(--lime);font-size:11px;font-weight:700;letter-spacing:.18em;margin-bottom:16px}
.kicker::before{content:"";width:23px;height:2px;background:var(--lime);box-shadow:0 0 12px rgba(186,255,47,.55)}
h1,h2,h3,p{margin-top:0}
h1,h2{letter-spacing:-.035em;line-height:1.02}
h1{font-size:clamp(44px,5.2vw,72px);margin-bottom:20px;font-weight:700}
h2{font-size:clamp(34px,4vw,54px);margin-bottom:18px;font-weight:650}
h3{font-size:18px;letter-spacing:-.015em}
p{font-size:13px;line-height:1.75;color:var(--muted);letter-spacing:.03em}
.accent{color:var(--lime)}
.lead{max-width:700px;font-size:14px}

/* HEADER */
.header{position:fixed;top:0;left:0;right:0;height:78px;z-index:90;display:flex;align-items:center;transition:.3s;background:linear-gradient(to bottom,rgba(3,4,3,.92),rgba(3,4,3,.15))}
.header.scrolled{height:68px;background:rgba(3,4,3,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line2)}
.nav{width:min(var(--max),calc(100% - 56px));margin:auto;display:grid;grid-template-columns:auto 1fr auto;gap:35px;align-items:center}
.logo img{width:176px;height:auto}
.links{display:flex;justify-content:center;gap:29px}
.links a{font-size:12px;color:#aab0a7;letter-spacing:.045em;position:relative;transition:.25s}
.links a:hover,.links a.active{color:#fff}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-9px;height:2px;background:var(--lime);transition:.28s}
.links a:hover::after,.links a.active::after{right:0}
.actions{display:flex;align-items:center;gap:10px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:999px;border:1px solid var(--line2);font-size:11px;font-weight:700;letter-spacing:.04em;overflow:hidden;transition:.25s;white-space:nowrap}
.btn.lime{background:var(--lime);color:#071006;border-color:var(--lime)}
.btn.dark{background:rgba(255,255,255,.025)}
.btn:hover{transform:translateY(-2px)}
.btn::before{content:"";position:absolute;top:-20%;bottom:-20%;width:38px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);left:-60px;transform:skewX(-18deg);transition:.55s}
.btn:hover::before{left:120%}
.menu{display:none;width:44px;height:44px;border:1px solid var(--line2);background:#080a08;border-radius:50%;position:relative}
.menu span{position:absolute;width:16px;height:1px;background:white;left:13px;transition:.25s}.menu span:first-child{top:17px}.menu span:last-child{top:24px}
.mobile-links{display:none}

/* HERO */
.hero{min-height:760px;padding:145px 0 70px;display:flex;align-items:center;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-10%;top:12%;width:48vw;height:48vw;max-width:700px;max-height:700px;border-radius:50%;border:1px solid rgba(186,255,47,.08);box-shadow:0 0 120px rgba(144,255,48,.035);animation:orbitPulse 5s ease-in-out infinite}
@keyframes orbitPulse{50%{transform:scale(1.035);opacity:.65}}
.hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.hero-copy{position:relative;z-index:4;max-width:590px}
.hero-copy p{max-width:570px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.hero-mini{display:flex;gap:26px;margin-top:30px;color:#858c82;font-size:10px;letter-spacing:.07em}.hero-mini span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:8px;box-shadow:0 0 10px var(--lime)}
.hero-visual{height:600px;position:relative;z-index:3;perspective:1000px}
.neon-block{position:absolute;width:360px;height:460px;right:10%;top:8%;border-radius:34px;background:linear-gradient(145deg,#cfff3f,#7cff39);box-shadow:0 0 70px rgba(167,255,54,.11);transform:rotate(2deg);overflow:hidden}
.neon-block::before{content:"01";position:absolute;left:24px;top:12px;font-size:142px;font-weight:800;color:#071006;line-height:1;opacity:.95}
.neon-block::after{content:"ROUPAY APP / MULTICHAIN / DEFI";position:absolute;left:27px;bottom:26px;width:220px;color:#071006;font-size:11px;line-height:1.5;font-weight:700;letter-spacing:.08em}
.hero-phone{position:absolute;right:18%;top:2%;height:590px;width:auto;filter:drop-shadow(0 40px 55px rgba(0,0,0,.55));animation:floatPhone 6s ease-in-out infinite;transform-origin:center}
@keyframes floatPhone{50%{transform:translateY(-12px) rotate(-1deg)}}
.hero-token{position:absolute;right:2%;top:50%;width:150px;filter:drop-shadow(0 20px 25px rgba(0,0,0,.4));animation:spinCoin 10s linear infinite}
@keyframes spinCoin{50%{transform:rotateY(180deg) rotateZ(6deg)}100%{transform:rotateY(360deg)}}
.hero-badge{position:absolute;left:4%;bottom:8%;padding:13px 16px;background:rgba(6,8,6,.83);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:14px;display:flex;gap:10px;align-items:center;box-shadow:0 18px 35px rgba(0,0,0,.4)}
.hero-badge b{font-size:22px;color:var(--lime)}.hero-badge span{font-size:9px;color:#91988e;line-height:1.4}

/* STATS / STRIP */
.stats{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:#050605}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:28px 20px;position:relative}.stat+.stat{border-left:1px solid var(--line2)}
.stat strong{display:block;font-size:28px;color:var(--lime);letter-spacing:-.04em}.stat span{font-size:9px;letter-spacing:.09em;color:#7d857a}
.ticker{height:44px;overflow:hidden;border-bottom:1px solid var(--line2);display:flex;align-items:center;background:#040504}
.ticker-track{display:flex;gap:48px;white-space:nowrap;animation:ticker 26s linear infinite;font-size:9px;letter-spacing:.14em;color:#777f74}.ticker-track b{color:var(--lime)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* LAYOUTS */
.split{display:grid;grid-template-columns:1fr 1fr;gap:76px;align-items:center}
.split.reverse .visual{order:2}.split.reverse .copy{order:1}
.copy .mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
.mini-card{padding:18px;border:1px solid var(--line2);background:rgba(255,255,255,.018);border-radius:16px;min-height:112px;transition:.3s;position:relative;overflow:hidden}.mini-card:hover{border-color:var(--line);transform:translateY(-4px)}
.mini-card::after{content:"";position:absolute;left:-30%;bottom:-2px;width:30%;height:2px;background:var(--lime);box-shadow:0 0 12px var(--lime);transition:.45s}.mini-card:hover::after{left:100%}
.mini-card small{font-size:9px;color:var(--lime);letter-spacing:.12em}.mini-card h3{margin:24px 0 0;font-size:15px}.mini-card p{font-size:10px;margin:8px 0 0}
.visual{min-height:520px;position:relative;display:grid;place-items:center}
.visual img{max-height:510px;width:auto;object-fit:contain;position:relative;z-index:3;filter:drop-shadow(0 30px 50px rgba(0,0,0,.5))}
.visual .glow{position:absolute;width:70%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(162,255,50,.13),transparent 68%);filter:blur(20px)}
.soft-image{mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,black 52%,rgba(0,0,0,.9) 67%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,black 52%,rgba(0,0,0,.9) 67%,transparent 100%)}
.soft-wide{mask-image:linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%),linear-gradient(to bottom,transparent 0%,black 10%,black 90%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 12%,black 88%,transparent 100%);}

/* FEATURE POSTER */
.poster-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px;margin-top:42px}
.poster-card{position:relative;border:1px solid var(--line2);border-radius:20px;background:#080a08;overflow:hidden;min-height:300px;padding:28px;transition:.35s}.poster-card:hover{transform:translateY(-5px);border-color:var(--line)}
.poster-card.lime{background:var(--lime);color:#071006}.poster-card.lime p,.poster-card.lime .poster-label{color:#1b2a16}
.poster-label{font-size:9px;letter-spacing:.15em;color:var(--lime);font-weight:700}
.poster-card h3{font-size:28px;max-width:350px;margin:90px 0 10px;line-height:1.05}.poster-card p{max-width:420px;font-size:10px}
.poster-card .big-num{position:absolute;right:20px;top:-20px;font-size:140px;line-height:1;font-weight:800;opacity:.09}
.poster-card img{position:absolute;right:-4%;bottom:-12%;max-height:88%;max-width:55%;object-fit:contain;filter:drop-shadow(0 20px 32px rgba(0,0,0,.45))}
.poster-small{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.poster-small .poster-card{min-height:142px}.poster-small .poster-card h3{font-size:16px;margin:45px 0 0}

/* NETWORKS */
.network-wrap{overflow:hidden;margin-top:36px;padding:14px 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.network-row{display:flex;gap:10px;width:max-content;animation:network 34s linear infinite}.network-row:nth-child(2){animation-direction:reverse;animation-duration:40s;margin-top:10px}
@keyframes network{to{transform:translateX(-50%)}}
.network-pill{padding:10px 14px;border:1px solid var(--line2);border-radius:999px;background:#070907;font-size:10px;color:#aab1a6}.network-pill::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--lime);margin-right:8px}

/* NUMBER FEATURE */
.number-feature{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.number-hero{position:relative;min-height:410px;display:flex;align-items:center;justify-content:center}
.number-hero .outline{font-size:clamp(76px,10vw,145px);font-weight:800;line-height:.85;color:transparent;-webkit-text-stroke:1px rgba(186,255,47,.42);text-align:center;letter-spacing:-.06em}
.number-hero .solid{position:absolute;color:var(--lime);font-size:22px;font-weight:700;letter-spacing:.12em;background:#050605;padding:12px 18px;border:1px solid var(--line);border-radius:999px}
.number-hero::before{content:"";position:absolute;width:300px;height:300px;border-radius:50%;border:1px solid rgba(186,255,47,.13);animation:ring 8s linear infinite}@keyframes ring{to{transform:rotate(360deg)}}
.route-list{display:grid;gap:10px;margin-top:24px}.route-item{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid var(--line2);border-radius:14px;background:#070907}.route-item .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(186,255,47,.08);color:var(--lime);font-size:10px}.route-item b{font-size:11px}.route-item span{font-size:9px;color:#7e867b}

/* CARD SHOWCASE */
.card-showcase{padding-top:30px}
.showcase-frame{position:relative;min-height:620px;border-radius:28px;overflow:hidden;background:#050605;border:1px solid var(--line2)}
.showcase-frame .backdrop{position:absolute;inset:0;background:radial-gradient(circle at 65% 52%,rgba(177,255,48,.12),transparent 34%),linear-gradient(120deg,#050605 28%,#0b100b);}
.showcase-frame .scene{position:absolute;right:0;bottom:-4%;height:104%;width:auto;max-width:68%;object-fit:contain;mask-image:linear-gradient(to right,transparent 0%,black 15%,black 100%)}
.showcase-copy{position:absolute;left:6%;top:12%;max-width:470px;z-index:3}.showcase-copy h2{font-size:clamp(34px,4vw,52px)}
.limit-grid{position:absolute;left:6%;bottom:9%;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:52%}.limit{padding:16px;border:1px solid var(--line);background:rgba(3,4,3,.72);backdrop-filter:blur(14px);border-radius:14px}.limit strong{font-size:19px;color:var(--lime)}.limit span{display:block;font-size:8px;color:#8a9187;margin-top:4px}

/* BENEFITS */
.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}.benefit{min-height:240px;border:1px solid var(--line2);border-radius:18px;background:#070907;padding:24px;position:relative;overflow:hidden}.benefit .index{font-size:9px;color:var(--lime);letter-spacing:.12em}.benefit h3{margin-top:90px}.benefit p{font-size:10px}.benefit::before{content:"";position:absolute;right:-35px;top:-35px;width:120px;height:120px;border:1px solid rgba(186,255,47,.1);border-radius:50%;transition:.35s}.benefit:hover::before{transform:scale(1.3);border-color:rgba(186,255,47,.24)}

/* FEES */
.fees-panel{display:grid;grid-template-columns:.72fr 1.28fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#060806}.fees-head{background:var(--lime);color:#071006;padding:38px}.fees-head h2{font-size:42px;margin-bottom:12px}.fees-head p{color:#26331f}.fees-list{padding:20px 26px}.fee{display:grid;grid-template-columns:1fr auto;gap:20px;padding:17px 0;border-bottom:1px solid var(--line2);font-size:11px}.fee:last-child{border:0}.fee b{color:var(--lime);font-size:14px}

/* FAQ */
.faq-wrap{max-width:900px;margin:40px auto 0}.faq{border-bottom:1px solid var(--line2)}.faq summary{list-style:none;cursor:pointer;padding:19px 0;display:flex;justify-content:space-between;gap:20px;font-size:12px;font-weight:600}.faq summary::-webkit-details-marker{display:none}.faq summary span{color:var(--lime);transition:.25s}.faq[open] summary span{transform:rotate(45deg)}.faq p{padding:0 0 19px;max-width:740px;font-size:10px}

/* CTA / FOOTER */
.cta{padding:95px 0}.cta-box{min-height:390px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(115deg,#081108,#050605);position:relative;overflow:hidden;padding:58px;display:flex;align-items:center}.cta-box h2{font-size:clamp(34px,4vw,50px);max-width:600px}.cta-box p{max-width:560px}.cta-robot{position:absolute;right:-3%;bottom:-22%;height:128%;mask-image:linear-gradient(to left,black 78%,transparent 100%)}
.footer{padding:55px 0 28px;border-top:1px solid var(--line2);background:#020302}.footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,.7fr);gap:45px}.footer-logo{width:160px;margin-bottom:18px}.footer p{font-size:9px;max-width:360px}.footer h4{font-size:10px;color:#fff;letter-spacing:.08em}.footer a{display:block;font-size:9px;color:#858d82;margin:8px 0}.footer a:hover{color:var(--lime)}.footer-bottom{border-top:1px solid var(--line2);margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;color:#61685f;font-size:8px;letter-spacing:.08em}

/* INNER PAGES */
.inner-hero{padding:150px 0 76px;min-height:650px;display:flex;align-items:center;overflow:hidden}.inner-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.inner-copy{max-width:560px}.inner-copy h1{font-size:clamp(42px,4.8vw,64px)}.inner-visual{height:470px;position:relative;display:grid;place-items:center}.inner-visual::before{content:"";position:absolute;width:340px;height:340px;background:var(--lime);border-radius:28px;transform:rotate(5deg);opacity:.93}.inner-visual img{max-height:500px;width:auto;position:relative;z-index:2;filter:drop-shadow(0 35px 45px rgba(0,0,0,.55))}.inner-visual.photo::before{background:transparent;border:1px solid var(--line);width:92%;height:92%}.inner-visual.photo img{max-height:510px;mask-image:radial-gradient(ellipse 76% 76% at center,black 54%,transparent 100%)}
.page-index{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px}.page-index a{padding:9px 12px;border:1px solid var(--line2);border-radius:999px;font-size:9px;color:#889184}.page-index a:hover{border-color:var(--line);color:var(--lime)}
.rail{position:relative;padding-left:30px}.rail::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:1px;background:var(--line2)}.rail-item{position:relative;margin-bottom:36px}.rail-item::before{content:"";position:absolute;left:-27px;top:4px;width:9px;height:9px;border-radius:50%;background:#141814;border:1px solid var(--line)}.rail-item:hover::before{background:var(--lime);box-shadow:0 0 14px var(--lime)}.rail-item h3{font-size:15px}.rail-item p{font-size:10px;max-width:600px}
.console{border:1px solid var(--line);background:#060806;border-radius:20px;overflow:hidden}.console-top{height:42px;border-bottom:1px solid var(--line2);display:flex;align-items:center;padding:0 16px;gap:6px}.console-top i{width:7px;height:7px;border-radius:50%;background:#313831}.console-top i:first-child{background:var(--lime)}.console-row{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line2);transition:.25s}.console-row:last-child{border:0}.console-row:hover{background:rgba(186,255,47,.04)}.console-row .num{font-size:9px;color:var(--lime)}.console-row b{font-size:12px}.console-row span{font-size:9px;color:#737b70}

/* REVEAL / MOTION */
.reveal{opacity:0;transform:translateY(24px);clip-path:inset(0 0 18% 0);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.8,.2,1),clip-path .8s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none;clip-path:inset(0)}
[data-tilt]{transform-style:preserve-3d;transition:transform .18s ease-out}
.scan{position:absolute;inset:0;pointer-events:none;overflow:hidden}.scan::before{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--lime),transparent);box-shadow:0 0 18px var(--lime);opacity:.22;top:-5%;animation:scan 7s linear infinite}@keyframes scan{to{top:105%}}






/* =========================================================
   V4.1 — BRAND GRADIENT UPDATE
   INSPIRED BY THE REFERENCE: LIME → FOREST GREEN → DEEP TEAL
   ========================================================= */
:root{
  --lime:#d5f246;
  --lime2:#9bd848;
  --brand-green:#5b9e3e;
  --brand-teal:#1b5640;
  --brand-deep:#0a3f38;
  --brand-gradient:linear-gradient(145deg,#d5f246 0%,#b9e84a 24%,#70b74a 52%,#32815a 76%,#0b584c 100%);
  --brand-gradient-soft:linear-gradient(135deg,#cfee46 0%,#7dbe48 48%,#246e51 78%,#0a4b43 100%);
  --brand-gradient-horizontal:linear-gradient(90deg,#d5f246 0%,#8ac84b 45%,#2f7e59 73%,#0b594c 100%);
  --line:rgba(155,216,72,.18);
}

/* Main brand accents now use the new gradient language */
.progress{background:var(--brand-gradient-horizontal);box-shadow:0 0 18px rgba(112,183,74,.48)}
.links a::after{background:var(--brand-gradient-horizontal)}
.btn.lime{background:var(--brand-gradient-horizontal);border-color:rgba(205,242,70,.55);color:#071006;box-shadow:0 8px 30px rgba(38,110,81,.12)}
.btn.lime:hover{box-shadow:0 12px 36px rgba(91,158,62,.22)}
.kicker{color:#cce947}
.kicker::before{background:var(--brand-gradient-horizontal);box-shadow:0 0 12px rgba(112,183,74,.34)}
.accent{
  color:#d5f246;
  background:var(--brand-gradient-horizontal);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.neon-block{background:var(--brand-gradient);box-shadow:0 0 70px rgba(91,158,62,.12)}
.poster-card.lime{background:var(--brand-gradient);color:#071006}
.fees-head{background:var(--brand-gradient);color:#071006}
.inner-visual::before{background:var(--brand-gradient)}

/* Smaller green details keep the same family, with softer transitions */
.hero-mini span::before,.network-pill::before,.console-top i:first-child{background:#a9df47;box-shadow:0 0 10px rgba(91,158,62,.42)}
.hero-badge b,.stat strong,.ticker-track b,.mini-card small,.poster-label,.number-hero .solid,.route-item .n,.limit strong,.benefit .index,.fee b,.faq summary span,.console-row .num{
  color:#bfe64a;
}
.mini-card::after{background:var(--brand-gradient-horizontal);box-shadow:0 0 12px rgba(91,158,62,.4)}
.rail-item:hover::before{background:#8fc84a;box-shadow:0 0 14px rgba(91,158,62,.48)}
.scan::before{background:linear-gradient(90deg,transparent,#cce947,#4f9560,transparent);box-shadow:0 0 18px rgba(91,158,62,.42)}

/* Ambient backgrounds move away from neon-lime and toward premium green/teal */
body::before{background:
  radial-gradient(circle at 14% 8%,rgba(72,139,76,.10),transparent 22%),
  radial-gradient(circle at 88% 28%,rgba(27,86,64,.08),transparent 22%),
  linear-gradient(#030403,#030403)}
body::after{background-image:
  linear-gradient(rgba(91,158,62,.045) 1px,transparent 1px),
  linear-gradient(90deg,rgba(27,86,64,.045) 1px,transparent 1px)}
.cursor{background:radial-gradient(circle,rgba(91,158,62,.075),rgba(27,86,64,.025) 42%,transparent 70%)}
.visual .glow{background:radial-gradient(circle,rgba(91,158,62,.15),rgba(27,86,64,.055) 45%,transparent 70%)}
.showcase-frame .backdrop{background:radial-gradient(circle at 65% 52%,rgba(91,158,62,.14),transparent 34%),linear-gradient(120deg,#050605 28%,#09110d)}
.cta-box{background:linear-gradient(115deg,#08120b,#050605 52%,#07100d)}

/* HOME active state and tighter nav balance after adding the new item */
.links{gap:25px}
.links a.active{color:#fff}



/* =========================================================
   V4.2 — RICHER CONTENT + SMOOTHER MOTION
   ========================================================= */
/* Keep the tech feel, but avoid full-screen paint-heavy effects. */
html{scroll-behavior:auto}
body::after{animation:none;opacity:.20}
.noise{display:none}
.cursor{width:230px;height:230px;mix-blend-mode:normal;opacity:.72;will-change:transform;left:0;top:0;transform:translate3d(-500px,-500px,0)}
.progress{will-change:transform;width:100%;transform:scaleX(0);transform-origin:left center}
.header.scrolled{background:rgba(3,4,3,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
.visual .glow{filter:none}
.reveal{opacity:0;transform:translate3d(0,18px,0);clip-path:none;transition:opacity .58s ease,transform .64s cubic-bezier(.22,.8,.22,1);will-change:opacity,transform}
.reveal.in{opacity:1;transform:translate3d(0,0,0)}
.scan::before{top:0;transform:translate3d(0,-100%,0);animation:scanSmooth 7s linear infinite;will-change:transform}
@keyframes scanSmooth{to{transform:translate3d(0,1100%,0)}}
.hero-phone,.hero-token,.ticker-track,.network-row{will-change:transform;transform:translateZ(0)}
[data-tilt]{will-change:transform;transform:translateZ(0)}
.section,.cta,.footer{content-visibility:auto;contain-intrinsic-size:1px 760px}

/* Additional content language for inner pages. */
.metric-band{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:linear-gradient(90deg,#040504,#07100b 50%,#040504)}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.metric-chip{padding:24px 22px;min-height:98px;display:flex;flex-direction:column;justify-content:center}
.metric-chip+.metric-chip{border-left:1px solid var(--line2)}
.metric-chip strong{font-size:22px;letter-spacing:-.03em;background:var(--brand-gradient-horizontal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.metric-chip span{margin-top:5px;color:#7e887b;font-size:9px;letter-spacing:.11em}
.section-head{max-width:780px;margin-bottom:34px}
.section-head p{max-width:720px}
.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.detail-card{position:relative;min-height:205px;padding:24px;border:1px solid var(--line2);border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.018),rgba(22,50,34,.035));overflow:hidden;transition:transform .25s ease,border-color .25s ease,background .25s ease}
.detail-card::after{content:"";position:absolute;inset:auto -18% -50% 30%;height:120px;background:radial-gradient(circle,rgba(91,158,62,.15),transparent 70%);opacity:0;transition:.3s}
.detail-card:hover{transform:translateY(-3px);border-color:rgba(155,216,72,.26);background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(22,72,45,.06))}
.detail-card:hover::after{opacity:1}
.detail-index{font-size:9px;color:#a6d94a;letter-spacing:.12em}
.detail-card h3{margin:50px 0 8px;font-size:15px}
.detail-card p{font-size:10px;margin-bottom:0}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px}
.step-card{min-height:220px;padding:24px;border:1px solid var(--line2);border-radius:18px;background:#060806;position:relative;overflow:hidden}
.step-card>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--brand-gradient);color:#061006;font-size:10px;font-weight:800}
.step-card h3{margin:58px 0 8px;font-size:16px}
.step-card p{font-size:10px}
.chain-cloud{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.chain-cloud span{padding:10px 13px;border:1px solid var(--line2);border-radius:999px;background:#070907;color:#a4ada1;font-size:9px;letter-spacing:.07em;transition:.2s}
.chain-cloud span:hover{border-color:rgba(155,216,72,.32);color:#d6edc7;transform:translateY(-2px)}
.data-table{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#060806}
.data-row{display:grid;grid-template-columns:1fr auto;gap:30px;padding:18px 22px;border-bottom:1px solid var(--line2);align-items:center}
.data-row:last-child{border-bottom:0}
.data-row span{font-size:10px;color:#879083}
.data-row b{font-size:12px;color:#bfe64a}

/* Faster image decoding and less costly effects on small screens. */
img{content-visibility:auto}



/* =========================================================
   V4.3 — RESPONSIVE SYSTEM / DESKTOP + TABLET + MOBILE
   ========================================================= */
:root{
  --mobile-pad:18px;
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px}
img{height:auto}
button,a{-webkit-tap-highlight-color:transparent}
.menu{cursor:pointer}
.menu[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg)}
.menu[aria-expanded="true"] span:last-child{top:20px;transform:rotate(-45deg)}
body.menu-open{overflow:hidden}
.mobile-links{max-height:calc(100dvh - 84px);overflow:auto;overscroll-behavior:contain}

/* Flexible content widths */
.hero-copy,.inner-copy,.copy,.section-head,.showcase-copy{min-width:0}
.poster-grid,.poster-small,.mini-grid,.detail-grid,.steps-grid,.split,.inner-grid,.number-feature,.fees-panel,.footer-grid{min-width:0}
.poster-card,.mini-card,.detail-card,.step-card,.benefit,.fee,.route-item,.metric-chip{min-width:0}

/* Large desktop polish */


/* Small desktop / tablet landscape */


/* Tablet portrait and below */


/* Phone */


/* Very small phones */


/* Touch devices: remove hover-only movement and costly pointer effects */


/* Safe-area support for notched phones */

.mobile-lifestyle-visual{display:none}

/* =========================================================
   V4.4 RESPONSIVE REWORK — CLEAN, MOBILE-FIRST ADAPTATION
   ========================================================= */
.progress{transform-origin:left center;width:100%;transform:scaleX(0)}
body.menu-open{overflow:hidden}

/* Desktop tightening */
@media (max-width:1180px){
  .container,.nav{width:min(var(--max),calc(100% - 40px))}
  .links{gap:17px}.links a{font-size:10px}.logo img{width:156px}
  .hero-grid{gap:44px}.hero-visual{height:560px}.hero-phone{height:545px}.neon-block{width:335px;height:430px}
  .split{gap:54px}.inner-grid{gap:48px}
}

/* Tablet / compact desktop */
@media (max-width:920px){
  body::after{animation:none;opacity:.18}
  .cursor{display:none!important}
  .header{height:70px;background:rgba(3,4,3,.9);border-bottom:1px solid rgba(255,255,255,.045)}
  .header.scrolled{height:70px;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav{grid-template-columns:auto 1fr auto;gap:14px}
  .links,.actions{display:none}.menu{display:block;grid-column:3}
  .mobile-links{display:grid;position:fixed;top:78px;left:20px;right:20px;padding:10px;background:#070907;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.6);opacity:0;transform:translateY(-10px) scale(.985);pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:95}
  .mobile-links.open{opacity:1;transform:none;pointer-events:auto}
  .mobile-links a{padding:13px 12px;border-bottom:1px solid var(--line2);font-size:10px;letter-spacing:.08em}
  .mobile-links a:last-child{border-bottom:0;color:var(--lime)}

  .section{padding:82px 0}.section.compact{padding:64px 0}
  h1{font-size:clamp(42px,7.6vw,58px)}h2{font-size:clamp(32px,5.8vw,44px)}
  .hero{min-height:auto;padding:118px 0 66px}
  .hero-grid,.inner-grid,.split,.number-feature{grid-template-columns:1fr}
  .hero-grid{gap:26px}.hero-copy{max-width:720px}
  .hero-visual{height:520px;width:min(620px,100%);margin:0 auto}
  .neon-block{width:310px;height:395px;right:20%;top:10%}
  .hero-phone{height:500px;right:26%;top:0}
  .hero-token{width:105px;right:11%;top:51%}
  .hero-badge{left:10%;bottom:5%}
  .stats-grid,.metric-grid{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(3),.metric-chip:nth-child(3){border-left:0}.stat:nth-child(n+3),.metric-chip:nth-child(n+3){border-top:1px solid var(--line2)}

  .poster-grid{grid-template-columns:1fr}.poster-small{grid-template-columns:repeat(2,1fr)}
  .split{gap:30px}.split.reverse .copy{order:1}.split.reverse .visual{order:2}
  .visual{min-height:400px}.visual img{max-height:390px;max-width:86%}
  .copy .mini-grid{grid-template-columns:repeat(2,1fr)}
  .benefit-grid,.detail-grid{grid-template-columns:repeat(2,1fr)}
  .number-feature>div:last-child{order:1}.number-hero{order:2;min-height:280px}

  .showcase-frame{min-height:0;padding:44px;display:grid;grid-template-columns:1fr 1fr;grid-template-areas:'copy scene' 'limits scene';gap:26px;align-items:center}
  .showcase-frame .backdrop{z-index:0}.showcase-copy{position:relative;left:auto;top:auto;max-width:none;grid-area:copy;z-index:2}.showcase-copy h2{font-size:38px}
  .showcase-frame .scene{position:relative;grid-area:scene;right:auto;bottom:auto;height:auto;width:100%;max-width:100%;max-height:520px;object-fit:contain;align-self:center;mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 56%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 78% 78% at 50% 50%,#000 56%,transparent 100%);z-index:1}
  .limit-grid{position:relative;left:auto;bottom:auto;width:auto;grid-area:limits;grid-template-columns:repeat(3,1fr);z-index:2}.limit{backdrop-filter:none;-webkit-backdrop-filter:none}

  .fees-panel{grid-template-columns:1fr}.cta-box{padding:42px}.cta-robot{opacity:.42}
  .inner-hero{min-height:auto;padding:116px 0 62px}.inner-copy{max-width:720px}.inner-visual{height:430px;margin-top:4px}
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}
}

/* Phones */
@media (max-width:640px){
  :root{--r:18px}
  .container,.nav{width:calc(100% - 36px)}
  .header{height:66px}.logo img{width:132px}.menu{width:42px;height:42px;background:#080a08}
  .menu span{left:13px}.mobile-links{top:74px;left:12px;right:12px;border-radius:16px}

  h1{font-size:clamp(34px,10.5vw,42px);line-height:1.02;letter-spacing:-.045em}
  h2{font-size:clamp(28px,8.4vw,35px);line-height:1.06}
  h3{font-size:15px}p,.lead{font-size:11px;line-height:1.72;letter-spacing:.018em}
  .kicker{font-size:8px;letter-spacing:.13em;margin-bottom:13px}.kicker::before{width:20px}
  .section{padding:58px 0}.section.compact{padding:48px 0}
  .btn{min-height:44px;padding:11px 15px;font-size:9px}

  /* Home hero: copy and visual are cleanly separated; no cropping/overlap */
  .hero{padding:94px 0 34px;overflow:visible}
  .hero::after{display:none}.hero-grid{gap:30px}
  .hero-copy{max-width:none}.hero-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:22px}.hero-actions .btn{width:100%}
  .hero-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:20px;font-size:7px;line-height:1.4}
  .hero-visual{height:auto;aspect-ratio:1/1.02;max-height:410px;width:100%;margin:0;overflow:hidden;border-radius:24px;border:1px solid rgba(255,255,255,.055);background:radial-gradient(circle at 50% 42%,rgba(95,155,66,.12),transparent 47%),#050705;perspective:none}
  .neon-block{width:68%;height:72%;right:16%;top:15%;border-radius:24px;transform:rotate(2deg);box-shadow:none}
  .neon-block::before{font-size:74px;left:16px;top:9px}.neon-block::after{font-size:6px;left:18px;bottom:17px;width:140px}
  .hero-phone{height:90%;right:auto;left:50%;top:5%;transform:translateX(-50%);animation:none;filter:drop-shadow(0 24px 30px rgba(0,0,0,.5))}
  .hero-token{width:68px;right:4%;top:48%;animation:none}.hero-badge{left:5%;bottom:5%;padding:9px 10px;border-radius:11px;backdrop-filter:none}.hero-badge b{font-size:17px}.hero-badge span{font-size:6px}
  .scan::before{animation:none;opacity:.12;top:58%}

  .ticker{height:38px}.ticker-track{font-size:7px;gap:25px;animation-duration:38s}
  .stats-grid,.metric-grid{grid-template-columns:repeat(2,1fr)}
  .stat,.metric-chip{padding:18px 11px;min-height:80px}.stat strong,.metric-chip strong{font-size:19px}.stat span,.metric-chip span{font-size:6px;line-height:1.35}

  /* Product cards */
  .poster-grid{margin-top:26px;gap:10px}.poster-small{grid-template-columns:1fr;gap:10px}
  .poster-card,.poster-small .poster-card{min-height:205px;padding:19px;border-radius:18px}
  .poster-card h3,.poster-small .poster-card h3{font-size:17px;line-height:1.12;max-width:62%;margin-top:48px}.poster-card p{font-size:8px;max-width:58%;line-height:1.55}
  .poster-card .big-num{font-size:88px;top:-9px;right:8px}.poster-card img{max-width:48%;max-height:76%;right:-8%;bottom:-4%;opacity:.72}

  /* Content split sections become contained visual cards */
  .split,.split.reverse{gap:22px}.split .visual,.split.reverse .visual{order:1}.split .copy,.split.reverse .copy{order:2}
  .visual{min-height:300px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.045);background:radial-gradient(circle at 50% 50%,rgba(62,120,73,.1),transparent 54%),#050705}
  .visual .glow{width:80%;height:80%;filter:blur(12px)}.visual img{max-height:286px;max-width:90%}
  .copy .mini-grid{grid-template-columns:1fr;gap:8px;margin-top:20px}.mini-card{min-height:auto;padding:15px;border-radius:14px}.mini-card h3{margin:16px 0 0;font-size:13px}.mini-card p{font-size:8px;margin-top:6px}

  .network-wrap{margin-top:22px}.network-row{animation-duration:48s}.network-pill{padding:8px 10px;font-size:7px}

  /* Swap number section: text first, graphic second */
  .number-feature{gap:8px}.number-feature>div:last-child{order:1}.number-hero{order:2;min-height:205px;margin-top:16px;border:1px solid rgba(255,255,255,.045);border-radius:22px;background:#050705;overflow:hidden}
  .number-hero::before{width:170px;height:170px}.number-hero .outline{font-size:clamp(48px,16vw,72px)}.number-hero .solid{font-size:10px;padding:8px 10px}
  .route-list{gap:7px}.route-item{grid-template-columns:30px minmax(0,1fr);gap:9px;padding:11px 12px;border-radius:12px}.route-item .n{width:26px;height:26px;font-size:8px}.route-item b{font-size:9px}.route-item>span:last-child{grid-column:2;font-size:7px}

  /* Card showcase no longer uses absolute overlapping layers on mobile */
  .card-showcase{padding-top:20px}.showcase-frame{padding:24px 18px 18px;display:grid;grid-template-columns:1fr;grid-template-areas:'copy' 'scene' 'limits';gap:18px;border-radius:20px}
  .showcase-copy{grid-area:copy}.showcase-copy h2{font-size:30px}.showcase-copy p{font-size:10px}.showcase-copy .btn{width:100%;margin-top:4px}
  .showcase-frame .scene{grid-area:scene;width:100%;height:245px;max-height:none;object-fit:contain;margin:0 auto;opacity:.86;mask-image:radial-gradient(ellipse 74% 76% at 50% 50%,#000 54%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 74% 76% at 50% 50%,#000 54%,transparent 100%)}
  .limit-grid{grid-area:limits;grid-template-columns:1fr;gap:6px}.limit{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:11px}.limit strong{font-size:15px}.limit span{font-size:6px;margin:0;text-align:right}

  .benefit-grid,.detail-grid{grid-template-columns:1fr;gap:8px}.benefit,.detail-card{min-height:145px;padding:17px;border-radius:15px}.benefit h3{margin-top:48px}.benefit p,.detail-card p{font-size:8px}.detail-card h3{font-size:13px;margin-top:28px}
  .steps-grid{grid-template-columns:1fr}

  .fees-panel{border-radius:18px}.fees-head{padding:22px}.fees-head h2{font-size:28px}.fees-list{padding:6px 14px}.fee{padding:13px 0;font-size:8px;gap:12px}.fee b{font-size:10px;text-align:right}
  .faq-wrap{margin-top:22px}.faq summary{padding:15px 0;font-size:9px;line-height:1.5}.faq p{font-size:8px;padding-bottom:15px}

  /* Inner pages */
  .inner-hero{padding:94px 0 44px}.inner-grid{gap:24px}.inner-copy h1{font-size:clamp(32px,9.6vw,40px)}.page-index{gap:5px;margin-top:18px}.page-index a{font-size:7px;padding:7px 9px}
  .inner-visual{height:auto;aspect-ratio:1.12/1;max-height:340px;border-radius:22px;overflow:hidden;background:#050705;border:1px solid rgba(255,255,255,.045);margin:0}
  .inner-visual::before{width:64%;height:72%;border-radius:22px}.inner-visual img{max-height:94%;max-width:90%;filter:drop-shadow(0 22px 28px rgba(0,0,0,.45))}.inner-visual.photo::before{width:90%;height:86%}.inner-visual.photo img{max-height:100%;max-width:100%;mask-image:radial-gradient(ellipse 78% 78% at center,#000 56%,transparent 100%)}
  .rail{padding-left:24px}.rail-item{margin-bottom:28px}.rail-item::before{left:-22px}.rail-item h3{font-size:13px}.rail-item p{font-size:8px}
  .console{border-radius:16px}.console-row{grid-template-columns:25px minmax(0,1fr);padding:13px 13px;gap:8px}.console-row .num{font-size:7px}.console-row b{font-size:9px}.console-row>span:last-child{grid-column:2;font-size:7px}
  .data-row{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:13px 14px}.data-row span{font-size:7px}.data-row b{font-size:8px;text-align:right}.chain-cloud{gap:6px}.chain-cloud span{font-size:7px;padding:7px 9px}

  /* CTA: artwork becomes part of flow, not a cropped overlay */
  .cta{padding:56px 0}.cta-box{min-height:0;padding:23px 20px 0;display:grid;grid-template-columns:1fr;gap:6px;border-radius:20px;align-items:start}.cta-box>div{max-width:none!important}.cta-box h2{font-size:29px;max-width:none}.cta-box p{font-size:9px;max-width:90%}.cta-robot{position:relative;right:auto;bottom:auto;width:100%;height:230px;object-fit:contain;margin:0 auto;opacity:.55;mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 100%)}

  .footer{padding:40px 0 22px}.footer-grid{grid-template-columns:1fr 1fr;gap:24px 18px}.footer-grid>div:first-child{grid-column:1/-1}.footer-logo{width:138px}.footer p{font-size:7px}.footer h4{font-size:8px}.footer a{font-size:7px;margin:7px 0}.footer-bottom{font-size:6px;line-height:1.55;gap:12px}


  /* =========================================================
     HOME / MOBILE REFINEMENTS — requested layout adjustments
     These rules only apply at <= 640px; desktop remains intact.
     ========================================================= */

  /* 1) Keep the two hero CTAs side by side on phones. */
  .hero-copy .hero-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    align-items:stretch;
  }
  .hero-copy .hero-actions .btn{
    width:100%;
    min-width:0;
    padding-left:8px;
    padding-right:8px;
    white-space:nowrap;
    font-size:clamp(7px,2.05vw,9px);
  }

  /* 2) Center the four headline statistics. */
  .stats-grid .stat{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
  }
  .stats-grid .stat strong,
  .stats-grid .stat span{
    width:100%;
    text-align:center;
  }

  /* 3) 02 beside 03, then 04 beside 05. */
  .poster-small{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .poster-small .poster-card{
    min-height:184px;
    padding:15px 13px;
  }
  .poster-small .poster-card h3{
    max-width:100%;
    margin-top:56px;
    font-size:clamp(12px,3.55vw,15px);
    line-height:1.12;
  }
  .poster-small .poster-card .big-num{
    font-size:68px;
    right:5px;
    top:-5px;
  }
  .poster-small .poster-label{
    font-size:7px;
    position:relative;
    z-index:2;
  }

  /* 4) Use the crypto-card artwork as the card showcase background. */
  .card-showcase .showcase-frame{
    position:relative;
    isolation:isolate;
    min-height:610px;
    padding:26px 18px 18px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:'copy' 'spacer' 'limits';
    grid-template-rows:auto minmax(240px,1fr) auto;
    gap:12px;
    background:
      linear-gradient(180deg,rgba(4,6,4,.94) 0%,rgba(4,6,4,.72) 32%,rgba(4,6,4,.16) 56%,rgba(4,6,4,.86) 82%,#050605 100%),
      url('../assets/card-finance-scene.webp') center 55% / cover no-repeat;
  }
  .card-showcase .showcase-frame .backdrop,
  .card-showcase .showcase-frame .scene{
    display:none;
  }
  .card-showcase .showcase-copy,
  .card-showcase .limit-grid{
    position:relative;
    z-index:2;
  }
  .card-showcase .showcase-copy{grid-area:copy}
  .card-showcase .limit-grid{grid-area:limits}
  .card-showcase .showcase-copy p{
    max-width:92%;
    text-shadow:0 2px 18px rgba(0,0,0,.8);
  }
  .card-showcase .limit{
    background:rgba(4,7,4,.76);
    backdrop-filter:blur(8px);
  }

  /* 5a) Give the REAL LIFE artwork a stronger, intentional crop. */
  .lifestyle-section .split.reverse{
    gap:18px;
  }
  .lifestyle-section .lifestyle-visual{
    min-height:360px;
    aspect-ratio:1/1.02;
    border-radius:24px;
    background:#030503;
  }
  .lifestyle-section .lifestyle-visual .glow{
    display:none;
  }
  .lifestyle-section .lifestyle-image{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:cover;
    object-position:center 62%;
    transform:scale(1.08);
    opacity:1;
    filter:none;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 94%,transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 94%,transparent 100%);
  }

  /* 5b) Make the download artwork larger and integrate it with the panel. */
  .cta-box{
    padding-bottom:0;
    overflow:hidden;
  }
  .cta-robot{
    width:calc(100% + 40px);
    max-width:none;
    height:280px;
    margin:4px -20px 0;
    object-fit:cover;
    object-position:center 64%;
    opacity:.86;
    filter:saturate(1.05) contrast(1.04);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 100%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 100%);
  }

  /* HOME MOBILE V3 — requested follow-up layout */

  /* 1) Wallet feature cards: 01 beside 02, 03 beside 04. */
  .lifestyle-section + *{} /* specificity spacer: no desktop impact */
  .section .copy .mini-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .section .copy .mini-grid .mini-card{
    min-height:138px;
    padding:14px 12px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .section .copy .mini-grid .mini-card h3{
    margin-top:28px;
    font-size:clamp(11px,3.1vw,13px);
    line-height:1.15;
  }
  .section .copy .mini-grid .mini-card p{
    font-size:7px;
    line-height:1.45;
  }

  /* 2) REAL LIFE image sits below the heading/description on mobile. */
  .lifestyle-section .desktop-lifestyle-visual{display:none}
  .lifestyle-section .mobile-lifestyle-visual{
    display:block;
    margin:20px 0 18px;
    width:100%;
    min-height:0;
    height:auto;
    aspect-ratio:1.22/1;
    border-radius:22px;
    overflow:hidden;
    border:1px solid rgba(170,255,40,.12);
  }
  .lifestyle-section .mobile-lifestyle-visual .lifestyle-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 60%;
    transform:scale(1.03);
    mask-image:none;
    -webkit-mask-image:none;
  }
  .lifestyle-section .benefit-grid{margin-top:0}

  /* 3) Footer links: PRODUCT / COMPANY / LEGAL in one 3-column row. */
  .footer-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px 10px;
    align-items:start;
  }
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer h4{font-size:7px}
  .footer a{font-size:6px;line-height:1.35;margin:7px 0}

  /* Mobile motion is deliberately lighter to keep scrolling smooth */
  .reveal{clip-path:none;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
  [data-tilt]{transform:none!important}.cursor{display:none!important}
}

@media (max-width:420px){
  .container,.nav{width:calc(100% - 28px)}
  .logo img{width:124px}h1{font-size:33px}h2{font-size:27px}
  .hero-mini{grid-template-columns:1fr}.hero-visual{aspect-ratio:1/1.06}.neon-block{width:72%;right:14%}.hero-phone{height:88%}.hero-token{width:62px}
  .stats-grid,.metric-grid{grid-template-columns:1fr 1fr}.stat,.metric-chip{padding:16px 9px}
  .poster-card h3,.poster-small .poster-card h3{max-width:68%}
  .showcase-frame .scene{height:220px}
  .hero-copy .hero-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .hero-copy .hero-actions .btn{font-size:7px;padding-left:5px;padding-right:5px}
  .poster-small{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .poster-small .poster-card{min-height:174px;padding:13px 11px}
  .poster-small .poster-card h3{font-size:12px;margin-top:54px}
  .poster-small .poster-card .big-num{font-size:62px}
  .lifestyle-section .lifestyle-visual{min-height:330px}
  .cta-robot{height:255px}
  .footer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 8px}
  .footer-grid>div:first-child{grid-column:1/-1}
}

@media (hover:none),(pointer:coarse){
  .btn:hover,.mini-card:hover,.detail-card:hover,.poster-card:hover,.benefit:hover,.chain-cloud span:hover{transform:none}
  [data-tilt]{transform:none!important}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
  .reveal{opacity:1!important;transform:none!important;clip-path:none!important}
}

@supports (padding:max(0px)){
  .header{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}
  .mobile-links{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right))}
  .footer{padding-bottom:max(22px,env(safe-area-inset-bottom))}
}


/* =========================================================
   HOME / DESKTOP REFINEMENTS — requested adjustments
   Desktop only: mobile/tablet rules remain unchanged.
   ========================================================= */
@media (min-width: 769px){
  /* 1) Keep the ROUPAY hero token still (no coin rotation). */
  .hero-token{
    animation:none !important;
  }

  /* 2) Top information strip: continuous, seamless loop. */
  .ticker-track{
    animation-name:tickerDesktopLoop !important;
    animation-duration:26s !important;
    animation-timing-function:linear !important;
    animation-iteration-count:infinite !important;
    animation-play-state:running !important;
  }
  @keyframes tickerDesktopLoop{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(-50% - 24px),0,0)}
  }

  /* 3) Supported-network rows: two continuous loops in opposite directions. */
  .network-row{
    animation-name:networkDesktopLoop !important;
    animation-duration:34s !important;
    animation-timing-function:linear !important;
    animation-iteration-count:infinite !important;
    animation-play-state:running !important;
  }
  .network-row:nth-child(2){
    animation-name:networkDesktopLoopReverse !important;
    animation-duration:40s !important;
    animation-direction:normal !important;
  }
  @keyframes networkDesktopLoop{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(-50% - 5px),0,0)}
  }
  @keyframes networkDesktopLoopReverse{
    from{transform:translate3d(calc(-50% - 5px),0,0)}
    to{transform:translate3d(0,0,0)}
  }

  /* 4) Enlarge the REAL LIFE lifestyle artwork on desktop. */
  .lifestyle-image{
    max-height:620px !important;
    width:auto;
    transform:scale(1.10);
    transform-origin:center center;
  }
  .split.reverse .visual:has(.lifestyle-image){
    min-height:610px;
  }
}


/* =========================================================
   COMPANY REGISTRATION — shared footer legal information
   ========================================================= */
.company-registration{
  margin-top:38px;
  padding:24px 0 2px;
  border-top:1px solid var(--line2);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:24px;
  text-align:left;
  color:#778497;
}
.company-registration .registration-group{max-width:620px}
.company-registration h4{
  margin:0 0 8px;
  color:#b9c4d0;
  font-size:10px;
  line-height:1.45;
  letter-spacing:.02em;
}
.company-registration p{
  margin:0 0 5px;
  max-width:none;
  color:#72809a;
  font-size:10px;
  line-height:1.5;
  letter-spacing:.02em;
}
.company-registration p:last-child{margin-bottom:0}
.footer .company-registration + .footer-bottom{margin-top:24px}

@media (max-width:640px){
  .company-registration{
    margin-top:28px;
    padding-top:20px;
    gap:20px;
  }
  .company-registration .registration-group{max-width:100%}
  .company-registration h4{
    font-size:7.5px;
    line-height:1.5;
    margin-bottom:6px;
  }
  .company-registration p{
    font-size:7px;
    line-height:1.55;
    margin-bottom:4px;
  }
  .footer .company-registration + .footer-bottom{margin-top:20px}
}

@media (max-width:420px){
  .company-registration{gap:18px}
  .company-registration h4{font-size:7px}
  .company-registration p{font-size:6.5px}
}

/* HOME DESKTOP — larger artwork in the Download ROUPAY section.
   Desktop only: mobile layout remains unchanged. */
@media (min-width: 901px){
  #download .cta-box{
    min-height:420px;
  }
  #download .cta-robot{
    right:-5%;
    bottom:-30%;
    height:155%;
    max-width:none;
    opacity:1;
    object-fit:contain;
    object-position:center bottom;
  }
}

/* HOME DESKTOP V6 — force the Download artwork to display clearly.
   Desktop only. Mobile rules remain unchanged. */
@media (min-width: 901px){
  #download .cta-box{
    min-height:440px;
    padding-right:54%;
  }
  #download .cta-box > div{
    position:relative;
    z-index:2;
  }
  #download .cta-robot.soft-image{
    display:block !important;
    position:absolute !important;
    z-index:1;
    right:0 !important;
    bottom:0 !important;
    width:52% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:50% 62% !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    mask-image:none !important;
    -webkit-mask-image:none !important;
    filter:none !important;
  }
}

/* =========================================================
   WALLET / DESKTOP V7 — visual balance + motion
   Desktop only. HOME and mobile layouts are untouched.
   ========================================================= */
@media (min-width: 901px){
  /* Gentle ambient movement for the WALLET page only. */
  .wallet-page .inner-visual{
    overflow:visible;
  }
  .wallet-page .inner-visual::before{
    animation:walletPanelPulse 5.8s ease-in-out infinite;
    transform-origin:center;
  }
  .wallet-page .inner-visual img{
    max-height:none;
    height:550px;
    width:auto;
    animation:walletPhoneFloat 5.6s ease-in-out infinite;
    filter:drop-shadow(0 38px 52px rgba(0,0,0,.62));
  }

  /* ONE WALLET section: make the app phone more prominent without crowding copy. */
  .wallet-page .split:not(.reverse) .visual{
    min-height:590px;
    overflow:visible;
  }
  .wallet-page .split:not(.reverse) .visual img[src$="wallet-screen-phone.webp"]{
    max-height:none;
    height:585px;
    width:auto;
    object-fit:contain;
    animation:walletScreenFloat 6.4s ease-in-out infinite;
    transform-origin:center;
    filter:drop-shadow(0 36px 54px rgba(0,0,0,.58));
  }
  .wallet-page .split:not(.reverse) .visual .glow{
    width:78%;
    height:78%;
    animation:walletGlowPulse 5s ease-in-out infinite;
  }

  /* Cards get a restrained living-interface hover motion. */
  .wallet-page .mini-card,
  .wallet-page .detail-card{
    transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease;
  }
  .wallet-page .mini-card:hover,
  .wallet-page .detail-card:hover{
    transform:translateY(-5px);
    border-color:rgba(166,221,71,.30);
    box-shadow:0 18px 42px rgba(0,0,0,.20);
  }

  /* FUND + USE: turn the artwork into a balanced right-side visual block. */
  .wallet-page .split.reverse{
    grid-template-columns:1fr .92fr;
    gap:78px;
  }
  .wallet-page .split.reverse .visual{
    min-height:530px;
    width:100%;
    overflow:hidden;
    border-radius:24px;
    border:1px solid rgba(255,255,255,.045);
    background:radial-gradient(circle at 50% 55%,rgba(57,126,100,.09),transparent 58%),#040604;
  }
  .wallet-page .split.reverse .visual img[src$="global-payment-scene.webp"]{
    display:block;
    width:100%;
    height:530px;
    max-height:none;
    object-fit:cover;
    object-position:50% 68%;
    opacity:1;
    transform:scale(1.04);
    mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 92%,transparent 100%);
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 92%,transparent 100%);
    animation:walletSceneDrift 8s ease-in-out infinite;
  }
  .wallet-page .split.reverse .visual .glow{
    width:82%;
    height:82%;
    animation:walletGlowPulse 5.5s ease-in-out infinite;
  }

  /* Final CTA: same visual treatment as the successful HOME download panel. */
  .wallet-page .cta .cta-box{
    min-height:440px;
    padding-right:54%;
  }
  .wallet-page .cta .cta-box > div{
    position:relative;
    z-index:2;
  }
  .wallet-page .cta .cta-robot.soft-image{
    display:block !important;
    position:absolute !important;
    z-index:1;
    right:0 !important;
    bottom:0 !important;
    width:52% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:50% 62% !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    mask-image:none !important;
    -webkit-mask-image:none !important;
    filter:none !important;
  }

  @keyframes walletPhoneFloat{
    0%,100%{transform:translate3d(0,0,0) rotate(-.35deg)}
    50%{transform:translate3d(0,-12px,0) rotate(.35deg)}
  }
  @keyframes walletScreenFloat{
    0%,100%{transform:translate3d(0,0,0)}
    50%{transform:translate3d(0,-10px,0)}
  }
  @keyframes walletPanelPulse{
    0%,100%{transform:rotate(5deg) scale(1);opacity:.90}
    50%{transform:rotate(3.5deg) scale(1.025);opacity:1}
  }
  @keyframes walletGlowPulse{
    0%,100%{transform:scale(.94);opacity:.65}
    50%{transform:scale(1.07);opacity:1}
  }
  @keyframes walletSceneDrift{
    0%,100%{transform:scale(1.04) translate3d(0,0,0)}
    50%{transform:scale(1.075) translate3d(0,-5px,0)}
  }
}

/* WALLET / DESKTOP V8 — phone sizing + real network marks */
@media (min-width: 901px){
  .wallet-page .inner-visual img[src$="network-phone.webp"]{
    height:475px;
    max-height:none;
    width:auto;
  }
  .wallet-page .section.compact .chain-cloud{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:14px;
    align-items:stretch;
  }
  .wallet-page .section.compact .chain-cloud span{
    min-width:0;
    min-height:72px;
    padding:10px 14px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:11px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(5,7,5,.76);
    transition:transform .28s ease,border-color .28s ease,background .28s ease;
  }
  .wallet-page .section.compact .chain-cloud span:hover{
    transform:translateY(-3px);
    border-color:rgba(182,255,42,.38);
    background:rgba(11,16,9,.92);
  }
  .wallet-page .section.compact .chain-cloud img{
    width:42px;
    height:42px;
    flex:0 0 42px;
    object-fit:cover;
    border-radius:50%;
    display:block;
  }
  .wallet-page .section.compact .chain-cloud b{
    font-size:11px;
    line-height:1.2;
    font-weight:700;
    color:#b8beb8;
    letter-spacing:.02em;
  }
}

/* WALLET / DESKTOP V9 — keep hero phone safely inside viewport */
@media (min-width: 901px){
  .wallet-page .inner-visual img[src$="network-phone.webp"]{
    height:410px;
    max-height:410px;
    max-width:88%;
    object-fit:contain;
  }
}

/* =========================================================
   V10 — OFFICIAL ROUPAY BRAND THEME
   Typeface: Clash Display
   Palette supplied by ROUPAY
   ========================================================= */
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@200,300,400,500,600,700&display=swap');

:root{
  --bg:#030403;
  --bg2:#060806;
  --panel:#080c09;
  --panel2:#0b110d;

  /* ROUPAY official palette */
  --roupay-lime:#B3F141;
  --roupay-highlight:#B1F115;
  --roupay-mid:#85CB46;
  --roupay-emerald:#26A144;
  --roupay-digital:#0FB45D;
  --roupay-mint:#35F79B;
  --roupay-white:#FFFFFF;

  /* map legacy tokens to official palette */
  --lime:#B3F141;
  --lime2:#B1F115;
  --brand-green:#26A144;
  --brand-teal:#0FB45D;
  --brand-deep:#08753f;
  --white:#FFFFFF;
  --muted:rgba(255,255,255,.62);
  --line:rgba(53,247,155,.22);
  --line2:rgba(255,255,255,.09);

  --brand-gradient:linear-gradient(135deg,#B3F141 0%,#85CB46 50%,#26A144 100%);
  --brand-gradient-soft:linear-gradient(135deg,#B3F141 0%,#85CB46 52%,#0FB45D 100%);
  --brand-gradient-horizontal:linear-gradient(90deg,#B3F141 0%,#85CB46 50%,#26A144 100%);
}

html,body,button,input,summary{
  font-family:'Clash Display',Arial,sans-serif;
}
body{color:#FFFFFF}

/* Brand text hierarchy */
h1,h2,h3,.btn,.links a,.kicker,.stat strong,.poster-label,.detail-index,
.network-card b,.network-card span,.footer h4,.cta-box strong{
  font-family:'Clash Display',Arial,sans-serif;
}
h1,h2{font-weight:600;letter-spacing:-.035em}
h3,.btn,.kicker{font-weight:600}
p,.lead{color:rgba(255,255,255,.62)}

/* Official ROUPAY gradient surfaces */
.progress,
.links a::after,
.kicker::before,
.btn.lime,
.neon-block,
.poster-card.lime,
.fees-head,
.inner-visual::before{
  background:var(--brand-gradient-horizontal);
}
.btn.lime{
  border-color:rgba(179,241,65,.72);
  color:#041108;
  box-shadow:0 10px 34px rgba(15,180,93,.18);
}
.btn.lime:hover{box-shadow:0 13px 38px rgba(53,247,155,.22)}

/* Gradient headline accents */
.accent{
  color:var(--roupay-highlight);
  background:var(--brand-gradient-horizontal);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* Lime highlights */
.kicker,
.hero-badge b,
.stat strong,
.ticker-track b,
.mini-card small,
.poster-label,
.number-hero .solid,
.route-item .n,
.limit strong,
.benefit .index,
.fee b,
.faq summary span,
.console-row .num,
.detail-index{
  color:var(--roupay-highlight);
}

/* Mint lines and glows */
.progress{box-shadow:0 0 18px rgba(53,247,155,.58)}
.kicker::before{box-shadow:0 0 14px rgba(53,247,155,.42)}
.hero-mini span::before,
.network-pill::before,
.console-top i:first-child{
  background:var(--roupay-lime);
  box-shadow:0 0 12px rgba(53,247,155,.48);
}
.mini-card::after{
  background:linear-gradient(90deg,var(--roupay-highlight),var(--roupay-mint));
  box-shadow:0 0 13px rgba(53,247,155,.42);
}
.scan::before{
  background:linear-gradient(90deg,transparent,var(--roupay-lime),var(--roupay-mint),transparent);
  box-shadow:0 0 20px rgba(53,247,155,.48);
}
.rail-item:hover::before{
  background:var(--roupay-digital);
  box-shadow:0 0 16px rgba(53,247,155,.48);
}

/* Global ambient treatment */
body::before{
  background:
    radial-gradient(circle at 14% 8%,rgba(179,241,65,.085),transparent 23%),
    radial-gradient(circle at 88% 28%,rgba(15,180,93,.075),transparent 23%),
    radial-gradient(circle at 70% 78%,rgba(53,247,155,.035),transparent 20%),
    linear-gradient(#030403,#030403);
}
body::after{
  background-image:
    linear-gradient(rgba(53,247,155,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(53,247,155,.035) 1px,transparent 1px);
}
.cursor{
  background:radial-gradient(circle,rgba(53,247,155,.09),rgba(15,180,93,.03) 43%,transparent 70%);
}
.visual .glow{
  background:radial-gradient(circle,rgba(179,241,65,.15),rgba(15,180,93,.06) 45%,transparent 70%);
}
.hero::after{
  border-color:rgba(53,247,155,.10);
  box-shadow:0 0 120px rgba(15,180,93,.06);
}
.neon-block{box-shadow:0 0 74px rgba(53,247,155,.12)}

/* Panels / borders */
.mini-card:hover,
.page-index a:hover,
.network-card:hover,
.chain-cloud span:hover{
  border-color:rgba(53,247,155,.30);
}
.page-index a:hover{color:var(--roupay-lime)}
.console-row:hover{background:rgba(15,180,93,.05)}

/* Header and secondary text */
.links a{color:rgba(255,255,255,.66)}
.links a:hover,.links a.active{color:#FFFFFF}
.hero-mini,.stat span,.hero-badge span,.console-row span{color:rgba(255,255,255,.52)}

/* CTA / showcase surfaces stay premium black-green */
.showcase-frame .backdrop{
  background:radial-gradient(circle at 65% 52%,rgba(15,180,93,.12),transparent 35%),linear-gradient(120deg,#040604 28%,#07110b);
}
.cta-box{
  background:linear-gradient(115deg,#07120a,#040604 52%,#06100b);
  border-color:rgba(53,247,155,.18);
}

/* Wallet network logo cards inherit official palette */
.wallet-page .network-logo-card,
.wallet-page .network-card{
  border-color:rgba(53,247,155,.14);
}
.wallet-page .network-logo-card:hover,
.wallet-page .network-card:hover{
  border-color:rgba(53,247,155,.34);
  box-shadow:0 10px 34px rgba(15,180,93,.08);
}

/* Selection */
::selection{background:var(--roupay-lime);color:#041108}

/* WALLET V11 — mobile layout refinement + richer motion */
@media (max-width:900px){
  .wallet-page #features .detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .wallet-page #features .detail-card{min-height:150px!important;padding:15px 12px!important}
  .wallet-page #features .detail-card h3{font-size:12px!important;line-height:1.15;margin-top:24px!important}
  .wallet-page #features .detail-card p{font-size:7px!important;line-height:1.45!important}

  .wallet-page .section.compact .chain-cloud{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px 8px!important;align-items:start!important;margin-top:24px!important}
  .wallet-page .section.compact .chain-cloud span{min-width:0!important;padding:0!important;border:0!important;background:transparent!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:6px!important;text-align:center!important}
  .wallet-page .section.compact .chain-cloud img{width:46px!important;height:46px!important;max-width:46px!important;border-radius:50%!important;object-fit:cover!important;display:block!important;box-shadow:0 0 0 1px rgba(53,247,155,.14),0 0 18px rgba(15,180,93,.08)!important}
  .wallet-page .section.compact .chain-cloud b{font-size:6px!important;line-height:1.2!important;white-space:normal!important;color:#aeb6ad!important}

  .wallet-page .split.reverse{display:flex!important;flex-direction:column!important;gap:0!important}
  .wallet-page .split.reverse .copy{display:contents!important}
  .wallet-page .split.reverse .section-head{order:1!important}
  .wallet-page .split.reverse .visual{order:2!important;width:100%!important;height:auto!important;aspect-ratio:1.55/1!important;margin:18px 0 18px!important;border-radius:20px!important;overflow:hidden!important;border:1px solid rgba(53,247,155,.10)!important;background:#030604!important}
  .wallet-page .split.reverse .visual img[src$="global-payment-scene.webp"]{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center 66%!important;transform:scale(1.02)!important;mask-image:none!important;-webkit-mask-image:none!important}
  .wallet-page .split.reverse .mini-grid{order:3!important;margin-top:0!important}

  .wallet-page .detail-card.in{animation:walletCardRise .65s cubic-bezier(.2,.75,.25,1) both}
  .wallet-page .detail-card:nth-child(2n).in{animation-delay:.08s}
  .wallet-page .chain-cloud.in span{animation:walletIconPop .55s cubic-bezier(.2,.8,.2,1) both}
  .wallet-page .chain-cloud.in span:nth-child(4n+2){animation-delay:.06s}.wallet-page .chain-cloud.in span:nth-child(4n+3){animation-delay:.12s}.wallet-page .chain-cloud.in span:nth-child(4n+4){animation-delay:.18s}
  .wallet-page .split.reverse .visual.in img{animation:walletMobileScene 6s ease-in-out infinite!important}
}

/* More motion on desktop + mobile while preserving layout */
.wallet-page .kicker.in::before{animation:walletLineGlow 2.2s ease-in-out infinite}
.wallet-page .accent{background-size:180% 100%;animation:walletAccentFlow 5s ease-in-out infinite}
.wallet-page .detail-card,.wallet-page .mini-card{transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.wallet-page .detail-card:hover,.wallet-page .mini-card:hover{transform:translateY(-5px);border-color:rgba(53,247,155,.26);box-shadow:0 15px 40px rgba(15,180,93,.08)}
.wallet-page .chain-cloud span{transition:transform .3s ease,filter .3s ease}
.wallet-page .chain-cloud span:hover{transform:translateY(-4px);filter:drop-shadow(0 0 10px rgba(53,247,155,.25))}
.wallet-page .inner-visual.in{animation:walletVisualEnter .9s cubic-bezier(.2,.75,.25,1) both}
.wallet-page .cta-box.in{animation:walletCtaBreath 6s ease-in-out infinite}
@keyframes walletCardRise{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes walletIconPop{from{opacity:0;transform:translateY(12px) scale(.72)}to{opacity:1;transform:none}}
@keyframes walletMobileScene{0%,100%{transform:scale(1.02) translateY(0)}50%{transform:scale(1.055) translateY(-5px)}}
@keyframes walletLineGlow{0%,100%{filter:drop-shadow(0 0 2px rgba(53,247,155,.2));transform:scaleX(.82)}50%{filter:drop-shadow(0 0 9px rgba(53,247,155,.8));transform:scaleX(1.08)}}
@keyframes walletAccentFlow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes walletVisualEnter{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes walletCtaBreath{0%,100%{box-shadow:inset 0 0 0 rgba(53,247,155,0)}50%{box-shadow:inset 0 0 70px rgba(15,180,93,.035)}}
@media (prefers-reduced-motion:reduce){.wallet-page *{animation-duration:.001ms!important;animation-iteration-count:1!important}}


/* =========================================================
   SWAP / DESKTOP V12 — balanced visuals + richer motion
   Desktop only. Mobile remains unchanged for the next pass.
   ========================================================= */
@media (min-width:901px){
  /* Hero artwork: larger, but kept safely inside its visual area. */
  .swap-page .inner-hero{overflow:hidden}
  .swap-page .inner-grid{grid-template-columns:1fr .94fr;gap:76px}
  .swap-page .inner-visual{
    height:470px;
    overflow:visible;
  }
  .swap-page .inner-visual::before{
    width:350px;
    height:350px;
    border-radius:30px;
    animation:swapPanelPulse 5.8s ease-in-out infinite;
    transform-origin:center;
  }
  .swap-page .inner-visual img{
    width:auto;
    height:430px;
    max-height:430px;
    max-width:88%;
    object-fit:contain;
    filter:drop-shadow(0 34px 48px rgba(0,0,0,.58));
    animation:swapPhoneFloat 5.6s ease-in-out infinite;
    transform-origin:center;
  }

  /* Stablecoin artwork: balanced with the copy and cards. */
  .swap-page .split{
    grid-template-columns:1fr .92fr;
    gap:72px;
  }
  .swap-page .split .visual{
    min-height:500px;
    overflow:hidden;
    border-radius:26px;
    border:1px solid rgba(53,247,155,.08);
    background:radial-gradient(circle at 50% 48%,rgba(15,180,93,.08),transparent 58%),#040604;
  }
  .swap-page .split .visual img[src$="card-tokens.webp"]{
    display:block;
    width:88%;
    height:440px;
    max-width:88%;
    max-height:440px;
    object-fit:contain;
    object-position:center;
    opacity:1;
    transform:scale(.96);
    mask-image:none;
    -webkit-mask-image:none;
    animation:swapStableDrift 7s ease-in-out infinite;
  }
  .swap-page .split .visual .glow{
    width:78%;
    height:78%;
    animation:swapGlowPulse 5.3s ease-in-out infinite;
  }

  /* Cards feel interactive without changing the layout. */
  .swap-page .mini-card,
  .swap-page .detail-card,
  .swap-page .step-card,
  .swap-page .metric-chip{
    transition:transform .34s ease,border-color .34s ease,box-shadow .34s ease,background .34s ease;
  }
  .swap-page .mini-card:hover,
  .swap-page .detail-card:hover,
  .swap-page .step-card:hover,
  .swap-page .metric-chip:hover{
    transform:translateY(-5px);
    border-color:rgba(53,247,155,.28);
    box-shadow:0 16px 42px rgba(15,180,93,.075);
  }
  .swap-page .kicker.in::before{animation:swapLineGlow 2.2s ease-in-out infinite}
  .swap-page .accent{background-size:180% 100%;animation:swapAccentFlow 5s ease-in-out infinite}
  .swap-page .chain-cloud span{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
  .swap-page .chain-cloud span:hover{transform:translateY(-4px);box-shadow:0 8px 22px rgba(15,180,93,.07)}

  /* Final CTA: same split-artwork treatment used successfully on HOME. */
  .swap-page .cta .cta-box{
    min-height:440px;
    padding-right:54%;
    animation:swapCtaBreath 6.5s ease-in-out infinite;
  }
  .swap-page .cta .cta-box > div{
    position:relative;
    z-index:2;
  }
  .swap-page .cta .cta-robot.soft-image{
    display:block !important;
    position:absolute !important;
    z-index:1;
    right:0 !important;
    bottom:0 !important;
    width:52% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:50% 62% !important;
    opacity:1 !important;
    clip-path:none !important;
    mask-image:none !important;
    -webkit-mask-image:none !important;
    filter:none !important;
    animation:swapCtaImageDrift 8s ease-in-out infinite !important;
  }
}

@keyframes swapPhoneFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-.2deg)}
  50%{transform:translate3d(0,-10px,0) rotate(.45deg)}
}
@keyframes swapPanelPulse{
  0%,100%{transform:rotate(5deg) scale(.985);filter:saturate(.98);box-shadow:0 0 0 rgba(53,247,155,0)}
  50%{transform:rotate(5deg) scale(1.02);filter:saturate(1.08);box-shadow:0 0 55px rgba(53,247,155,.08)}
}
@keyframes swapStableDrift{
  0%,100%{transform:scale(.96) translate3d(0,0,0)}
  50%{transform:scale(1.01) translate3d(0,-7px,0)}
}
@keyframes swapGlowPulse{
  0%,100%{opacity:.65;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.06)}
}
@keyframes swapLineGlow{
  0%,100%{filter:drop-shadow(0 0 2px rgba(53,247,155,.2));transform:scaleX(.82)}
  50%{filter:drop-shadow(0 0 9px rgba(53,247,155,.8));transform:scaleX(1.08)}
}
@keyframes swapAccentFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes swapCtaBreath{
  0%,100%{box-shadow:inset 0 0 0 rgba(53,247,155,0)}
  50%{box-shadow:inset 0 0 76px rgba(15,180,93,.035)}
}
@keyframes swapCtaImageDrift{
  0%,100%{transform:scale(1.00) translate3d(0,0,0)}
  50%{transform:scale(1.035) translate3d(-6px,-4px,0)}
}
@media (prefers-reduced-motion:reduce){
  .swap-page *{animation-duration:.001ms!important;animation-iteration-count:1!important}
}

/* =========================================================
   SWAP / DESKTOP V13 — larger hero phone + larger stablecoin artwork
   Desktop only. Mobile is intentionally untouched.
   ========================================================= */
@media (min-width:901px){
  .swap-page .inner-visual{
    height:500px;
  }
  .swap-page .inner-visual img{
    height:485px;
    max-height:485px;
    max-width:94%;
  }
  .swap-page .inner-visual::before{
    width:365px;
    height:365px;
  }

  .swap-page .split .visual{
    min-height:520px;
  }
  .swap-page .split .visual img[src$="card-tokens.webp"]{
    width:98%;
    height:500px;
    max-width:98%;
    max-height:500px;
    transform:scale(1.04);
  }
}

/* SWAP V14 — animated counters + real network logos */
@media (min-width:901px){
  .swap-page .metric-chip strong[data-counter]{
    display:inline-block;
    min-width:1ch;
    font-variant-numeric:tabular-nums;
    text-shadow:0 0 18px rgba(177,241,21,.08);
  }
  .swap-page .metric-chip.in strong[data-counter]{animation:swapCounterGlow 1.15s ease-out both}
  .swap-page .swap-network-logos{
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:16px 14px;
    margin-top:30px;
  }
  .swap-page .swap-network-logos span{
    min-width:0;
    min-height:96px;
    padding:13px 8px 11px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:linear-gradient(180deg,rgba(15,180,93,.035),rgba(255,255,255,.012));
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-align:center;
  }
  .swap-page .swap-network-logos img{
    width:50px;
    height:50px;
    object-fit:cover;
    border-radius:50%;
    display:block;
    box-shadow:0 0 0 1px rgba(53,247,155,.12),0 0 20px rgba(15,180,93,.08);
    transition:transform .32s ease,box-shadow .32s ease;
  }
  .swap-page .swap-network-logos b{
    font-size:8px;
    line-height:1.15;
    letter-spacing:.055em;
    color:rgba(255,255,255,.68);
    font-weight:500;
  }
  .swap-page .swap-network-logos span:hover{
    transform:translateY(-5px);
    border-color:rgba(53,247,155,.28);
    box-shadow:0 12px 30px rgba(0,0,0,.20),0 0 24px rgba(15,180,93,.055);
  }
  .swap-page .swap-network-logos span:hover img{transform:scale(1.08);box-shadow:0 0 0 1px rgba(53,247,155,.26),0 0 22px rgba(53,247,155,.16)}
  .swap-page .swap-network-logos.in span{animation:swapLogoRise .55s cubic-bezier(.2,.8,.2,1) both}
  .swap-page .swap-network-logos.in span:nth-child(7n+2){animation-delay:.04s}.swap-page .swap-network-logos.in span:nth-child(7n+3){animation-delay:.08s}.swap-page .swap-network-logos.in span:nth-child(7n+4){animation-delay:.12s}.swap-page .swap-network-logos.in span:nth-child(7n+5){animation-delay:.16s}.swap-page .swap-network-logos.in span:nth-child(7n+6){animation-delay:.20s}.swap-page .swap-network-logos.in span:nth-child(7n+7){animation-delay:.24s}
}
@media (max-width:900px){
  .swap-page .swap-network-logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
  .swap-page .swap-network-logos span{padding:8px 4px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
  .swap-page .swap-network-logos img{width:42px;height:42px;object-fit:cover;border-radius:50%;display:block}
  .swap-page .swap-network-logos b{font-size:6px;line-height:1.15;color:#aeb6ad;font-weight:500}
}
@keyframes swapCounterGlow{0%{filter:brightness(.7);transform:translateY(6px);opacity:.25}65%{filter:brightness(1.18);transform:translateY(0);opacity:1}100%{filter:brightness(1);opacity:1}}
@keyframes swapLogoRise{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}

/* =========================================================
   SWAP / MOBILE V15 — compact steps, larger stablecoin art,
   routing cards in paired columns. Desktop remains unchanged.
   ========================================================= */
@media (max-width:640px){
  /* 01–03: keep the flow compact and remove excessive empty height */
  .swap-page .steps-grid{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:24px;
  }
  .swap-page .step-card{
    min-height:0;
    padding:18px 18px 17px;
    border-radius:17px;
  }
  .swap-page .step-card>span{
    width:31px;
    height:31px;
    font-size:9px;
  }
  .swap-page .step-card h3{
    margin:24px 0 7px;
    font-size:14px;
    line-height:1.15;
  }
  .swap-page .step-card p{
    margin:0;
    font-size:8px;
    line-height:1.55;
  }

  /* Stablecoin artwork: visually fill the card instead of sitting tiny in the centre */
  .swap-page .split .visual{
    min-height:330px;
    height:330px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
  }
  .swap-page .split .visual img[src$="card-tokens.webp"]{
    width:122%;
    max-width:none;
    height:auto;
    max-height:none;
    object-fit:contain;
    transform:translateY(3px) scale(1.08);
    transform-origin:center;
  }
  .swap-page .split .visual .glow{
    width:94%;
    height:94%;
  }

  /* Routing + Liquidity: pair cards 01/02, 03/04, 05/06 */
  .swap-page #features .detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-top:24px;
  }
  .swap-page #features .detail-card{
    min-height:170px;
    padding:14px 13px;
    border-radius:15px;
  }
  .swap-page #features .detail-card .detail-index{
    font-size:7px;
  }
  .swap-page #features .detail-card h3{
    margin-top:27px;
    font-size:11px;
    line-height:1.14;
    overflow-wrap:anywhere;
  }
  .swap-page #features .detail-card p{
    margin-top:8px;
    font-size:6.5px;
    line-height:1.5;
    overflow-wrap:anywhere;
  }
}

@media (max-width:420px){
  .swap-page #features .detail-grid{gap:7px}
  .swap-page #features .detail-card{min-height:164px;padding:13px 11px}
  .swap-page #features .detail-card h3{font-size:10px}
  .swap-page #features .detail-card p{font-size:6px}
  .swap-page .split .visual{min-height:315px;height:315px}
  .swap-page .split .visual img[src$="card-tokens.webp"]{width:128%;transform:translateY(2px) scale(1.08)}
}

/* =========================================================
   SWAP / MOBILE V16 — keep Stablecoin artwork fully inside frame
   ========================================================= */
@media (max-width:640px){
  .swap-page .split .visual{
    min-height:330px;
    height:330px;
    padding:10px;
    box-sizing:border-box;
    overflow:hidden;
  }
  .swap-page .split .visual img[src$="card-tokens.webp"]{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:scale(.98) !important;
    transform-origin:center center !important;
  }
}
@media (max-width:420px){
  .swap-page .split .visual{
    min-height:315px;
    height:315px;
    padding:9px;
  }
  .swap-page .split .visual img[src$="card-tokens.webp"]{
    width:100% !important;
    height:100% !important;
    transform:scale(.98) !important;
  }
}


/* =========================================================
   CARDS DESKTOP V17 — animated metrics, lower benefits art,
   and HOME-style closing CTA. Desktop only.
   ========================================================= */
@media (min-width:901px){
  /* 1) Metric band: stronger entrance + live number counters. */
  .cards-page .metric-band{
    position:relative;
    overflow:hidden;
  }
  .cards-page .metric-band::after{
    content:"";
    position:absolute;
    inset:0 auto 0 -32%;
    width:28%;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(53,247,155,.055),transparent);
    transform:skewX(-18deg);
    animation:cardsMetricSweep 7s linear infinite;
  }
  .cards-page .metric-chip{
    transition:transform .35s ease,border-color .35s ease,background .35s ease,box-shadow .35s ease;
  }
  .cards-page .metric-chip.in{
    animation:cardsMetricRise .72s cubic-bezier(.2,.8,.2,1) both;
  }
  .cards-page .metric-chip:nth-child(2).in{animation-delay:.09s}
  .cards-page .metric-chip:nth-child(3).in{animation-delay:.18s}
  .cards-page .metric-chip:nth-child(4).in{animation-delay:.27s}
  .cards-page .metric-chip:hover{
    transform:translateY(-5px);
    background:linear-gradient(180deg,rgba(15,180,93,.055),rgba(3,5,3,.1));
    box-shadow:0 18px 42px rgba(15,180,93,.07);
  }
  .cards-page .metric-chip strong[data-counter]{
    min-width:1px;
    display:inline-block;
  }
  .cards-page .cards-format-motion{
    background-size:220% 100%;
    animation:cardsFormatFlow 4.4s ease-in-out infinite;
  }

  /* 2) Premium Benefits artwork: visually lower and calmer. */
  .cards-page .cards-benefits-visual{
    transform:translateY(46px);
  }
  .cards-page .cards-benefits-visual.in{
    animation:cardsBenefitsFloat 7s ease-in-out infinite;
  }
  .cards-page .cards-benefits-visual .soft-image{
    object-position:center 62%;
  }

  /* 3) Closing CTA = same split artwork treatment as HOME. */
  .cards-page .cta .cta-box{
    min-height:440px;
    padding-right:54%;
    animation:cardsCtaBreath 6.5s ease-in-out infinite;
  }
  .cards-page .cta .cta-box > div{
    position:relative;
    z-index:2;
  }
  .cards-page .cta .cta-robot.soft-image{
    display:block !important;
    position:absolute !important;
    z-index:1;
    right:0 !important;
    bottom:0 !important;
    width:52% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:50% 62% !important;
    opacity:1 !important;
    transform:none;
    clip-path:none !important;
    mask-image:none !important;
    -webkit-mask-image:none !important;
    filter:none !important;
    animation:cardsCtaImageDrift 8s ease-in-out infinite !important;
  }
}
@keyframes cardsMetricRise{
  from{opacity:0;transform:translate3d(0,18px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes cardsMetricSweep{
  0%{left:-34%}
  100%{left:128%}
}
@keyframes cardsFormatFlow{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes cardsBenefitsFloat{
  0%,100%{transform:translate3d(0,46px,0)}
  50%{transform:translate3d(0,36px,0)}
}
@keyframes cardsCtaBreath{
  0%,100%{box-shadow:0 0 0 rgba(53,247,155,0)}
  50%{box-shadow:0 0 42px rgba(15,180,93,.055)}
}
@keyframes cardsCtaImageDrift{
  0%,100%{transform:scale(1.01) translate3d(0,0,0)}
  50%{transform:scale(1.035) translate3d(-5px,-2px,0)}
}
@media (prefers-reduced-motion:reduce){
  .cards-page .metric-band::after,
  .cards-page .metric-chip.in,
  .cards-page .cards-format-motion,
  .cards-page .cards-benefits-visual.in,
  .cards-page .cta .cta-box,
  .cards-page .cta .cta-robot.soft-image{animation:none !important}
}

/* CARDS / DESKTOP V18 — animated hero artwork */
@media (min-width:981px){
  .cards-page .inner-hero .inner-visual{
    animation:cardsHeroStage 7s ease-in-out infinite;
    transform-origin:center;
  }
  .cards-page .inner-hero .inner-visual::before{
    animation:cardsHeroPanel 8s ease-in-out infinite;
    box-shadow:0 0 55px rgba(53,247,155,.08);
  }
  .cards-page .inner-hero .inner-visual img{
    animation:cardsHeroArtwork 6s ease-in-out infinite;
    will-change:transform,filter;
  }
  .cards-page .inner-hero .inner-visual::after{
    content:"";position:absolute;z-index:3;inset:8% 10%;pointer-events:none;
    background:linear-gradient(115deg,transparent 30%,rgba(177,241,21,.13) 47%,rgba(53,247,155,.08) 52%,transparent 68%);
    transform:translateX(-130%) skewX(-12deg);mix-blend-mode:screen;
    animation:cardsHeroShine 5.8s ease-in-out infinite;
  }
}
@keyframes cardsHeroStage{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-7px,0)}}
@keyframes cardsHeroPanel{0%,100%{transform:rotate(5deg) scale(1)}50%{transform:rotate(3.7deg) scale(1.018)}}
@keyframes cardsHeroArtwork{
  0%,100%{transform:translate3d(0,0,0) rotate(-.3deg) scale(1);filter:drop-shadow(0 35px 45px rgba(0,0,0,.55))}
  50%{transform:translate3d(0,-13px,0) rotate(.7deg) scale(1.025);filter:drop-shadow(0 44px 52px rgba(0,0,0,.62)) drop-shadow(0 0 14px rgba(53,247,155,.08))}
}
@keyframes cardsHeroShine{0%,18%{transform:translateX(-135%) skewX(-12deg);opacity:0}35%{opacity:1}58%,100%{transform:translateX(135%) skewX(-12deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.cards-page .inner-hero .inner-visual,.cards-page .inner-hero .inner-visual::before,.cards-page .inner-hero .inner-visual img,.cards-page .inner-hero .inner-visual::after{animation:none!important}}

/* =========================================================
   CARDS MOBILE V19 — finance artwork as section background + 2-col formats
   Mobile only. Desktop remains unchanged.
   ========================================================= */
@media (max-width:900px){
  /* 1) Move the premium physical-card artwork behind the content area. */
  .cards-page .inner-hero + .metric-band + .section{
    position:relative;
    overflow:hidden;
    isolation:isolate;
    padding-top:54px;
  }
  .cards-page .inner-hero + .metric-band + .section::before{
    content:"";
    position:absolute;
    z-index:-2;
    left:50%;
    top:215px;
    width:min(92vw,520px);
    height:430px;
    transform:translateX(-50%);
    background:url('../assets/card-finance-scene.webp') center 42% / cover no-repeat;
    opacity:.34;
    filter:saturate(.88) brightness(.62);
    border-radius:28px;
    box-shadow:0 0 70px rgba(15,180,93,.08);
  }
  .cards-page .inner-hero + .metric-band + .section::after{
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,#030403 0%,rgba(3,4,3,.72) 21%,rgba(3,4,3,.46) 45%,rgba(3,4,3,.88) 73%,#030403 100%);
  }
  .cards-page .inner-hero + .metric-band + .section > .split{
    display:block;
  }
  .cards-page .inner-hero + .metric-band + .section .copy{
    position:relative;
    z-index:2;
  }
  .cards-page .inner-hero + .metric-band + .section .visual{
    display:none !important;
  }
  .cards-page .inner-hero + .metric-band + .section .mini-grid{
    margin-top:34px;
  }

  /* 2) Physical + virtual features: paired cards on mobile. */
  .cards-page #features .detail-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
  }
  .cards-page #features .detail-card{
    min-width:0;
    min-height:158px;
    padding:20px 16px !important;
    border-radius:18px;
  }
  .cards-page #features .detail-card h3{
    font-size:15px;
    line-height:1.12;
    overflow-wrap:anywhere;
  }
  .cards-page #features .detail-card p{
    font-size:10px;
    line-height:1.45;
  }
}
@media (max-width:420px){
  .cards-page .inner-hero + .metric-band + .section::before{
    top:205px;
    width:calc(100% - 30px);
    height:405px;
  }
  .cards-page #features .detail-card{
    min-height:150px;
    padding:18px 13px !important;
  }
  .cards-page #features .detail-card h3{font-size:14px}
}


/* =========================================================
   REMAINING PAGES V20 — SPEND / REWARDS / ABOUT / SUPPORT
   Unified ROUPAY motion + desktop/mobile layout pass
   ========================================================= */

/* Shared motion language */
.spend-page .inner-visual,
.rewards-page .inner-visual,
.about-page .inner-visual{
  overflow:hidden;
  isolation:isolate;
}
.spend-page .inner-visual img,
.rewards-page .inner-visual img,
.about-page .inner-visual img{
  will-change:transform,filter;
}
.spend-page .metric-chip,
.rewards-page .metric-chip,
.about-page .metric-chip,
.support-page .metric-chip{
  position:relative;overflow:hidden;
}
.spend-page .metric-chip::after,
.rewards-page .metric-chip::after,
.about-page .metric-chip::after,
.support-page .metric-chip::after{
  content:"";position:absolute;inset:0 auto 0 -35%;width:22%;pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(53,247,155,.12),transparent);
  transform:skewX(-18deg);animation:remainingSweep 7s ease-in-out infinite;
}
.spend-page .detail-card,
.rewards-page .step-card,
.rewards-page .mini-card,
.about-page .detail-card,
.about-page .mini-card,
.support-page .detail-card{
  transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,background .35s ease;
}
@media (hover:hover){
  .spend-page .detail-card:hover,
  .rewards-page .step-card:hover,
  .rewards-page .mini-card:hover,
  .about-page .detail-card:hover,
  .about-page .mini-card:hover,
  .support-page .detail-card:hover{
    transform:translateY(-6px);
    border-color:rgba(177,241,21,.28);
    box-shadow:0 18px 45px rgba(0,0,0,.3),0 0 26px rgba(53,247,155,.04);
  }
}

/* DESKTOP */
@media (min-width:901px){
  /* Hero visuals: larger, balanced, animated without clipping. */
  .spend-page .inner-grid,
  .rewards-page .inner-grid,
  .about-page .inner-grid{align-items:center;}
  .spend-page .inner-visual,
  .rewards-page .inner-visual,
  .about-page .inner-visual{
    min-height:520px;
    display:flex;align-items:center;justify-content:center;
    animation:remainingStageFloat 7.5s ease-in-out infinite;
  }
  .spend-page .inner-visual img,
  .rewards-page .inner-visual img,
  .about-page .inner-visual img{
    width:94%;height:94%;max-width:none;object-fit:contain;object-position:center;
    animation:remainingArtworkFloat 6.4s ease-in-out infinite;
  }
  .spend-page .inner-visual::after,
  .rewards-page .inner-visual::after,
  .about-page .inner-visual::after{
    content:"";position:absolute;z-index:3;inset:8%;pointer-events:none;
    background:linear-gradient(115deg,transparent 28%,rgba(177,241,21,.11) 46%,rgba(53,247,155,.07) 52%,transparent 69%);
    transform:translateX(-135%) skewX(-12deg);mix-blend-mode:screen;
    animation:remainingHeroShine 6.6s ease-in-out infinite;
  }

  /* Split sections feel visually equal. */
  .spend-page .split,
  .rewards-page .split,
  .about-page .split{align-items:center;gap:64px;}
  .spend-page .split .visual,
  .rewards-page .split .visual,
  .about-page .split .visual{
    min-height:500px;display:flex;align-items:center;justify-content:center;
  }
  .spend-page .split .visual img,
  .rewards-page .split .visual img,
  .about-page .split .visual img{
    width:94%;height:94%;object-fit:contain;animation:remainingVisualDrift 8s ease-in-out infinite;
  }

  /* CTA treatment matches HOME: art occupies right half. */
  .spend-page .cta-box,
  .rewards-page .cta-box,
  .about-page .cta-box,
  .support-page .cta-box{
    min-height:440px;padding-right:54%;overflow:hidden;
    animation:remainingCtaBreath 7s ease-in-out infinite;
  }
  .spend-page .cta-box>div,
  .rewards-page .cta-box>div,
  .about-page .cta-box>div,
  .support-page .cta-box>div{position:relative;z-index:2;}
  .spend-page .cta-robot,
  .rewards-page .cta-robot,
  .about-page .cta-robot,
  .support-page .cta-robot{
    display:block!important;position:absolute!important;right:0!important;bottom:0!important;
    width:52%!important;height:100%!important;max-width:none!important;object-fit:cover!important;
    object-position:center 60%!important;opacity:1!important;filter:none!important;
    mask-image:none!important;-webkit-mask-image:none!important;clip-path:none!important;
    animation:remainingCtaArt 8s ease-in-out infinite!important;
  }

  /* Support gets a living console instead of a static block. */
  .support-page .console{animation:supportConsoleFloat 7s ease-in-out infinite;box-shadow:0 0 55px rgba(53,247,155,.035);}
  .support-page .console-row{transition:background .3s ease,transform .3s ease,border-color .3s ease;}
  .support-page .console-row:hover{background:rgba(177,241,21,.035);transform:translateX(6px);}
  .support-page .faq[open]{border-color:rgba(177,241,21,.25);box-shadow:0 0 30px rgba(53,247,155,.035);}
}

/* MOBILE */
@media (max-width:900px){
  .spend-page .inner-grid,
  .rewards-page .inner-grid,
  .about-page .inner-grid,
  .support-page .inner-grid{gap:28px!important;}

  /* Keep hero art large but fully visible. */
  .spend-page .inner-visual,
  .rewards-page .inner-visual,
  .about-page .inner-visual{
    width:100%;min-height:330px;margin-top:6px;border-radius:24px;
    display:flex;align-items:center;justify-content:center;
  }
  .spend-page .inner-visual img,
  .rewards-page .inner-visual img,
  .about-page .inner-visual img{
    width:100%!important;height:100%!important;max-height:360px;object-fit:contain!important;object-position:center!important;
    animation:remainingMobileFloat 6.5s ease-in-out infinite;
  }

  /* Metric bands: 2 x 2, centered, compact. */
  .spend-page .metric-grid,
  .rewards-page .metric-grid,
  .about-page .metric-grid,
  .support-page .metric-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .spend-page .metric-chip,
  .rewards-page .metric-chip,
  .about-page .metric-chip,
  .support-page .metric-chip{
    min-height:112px!important;padding:18px 12px!important;text-align:center;align-items:center;justify-content:center;
  }

  /* Cards paired to reduce endless vertical scrolling. */
  .spend-page .detail-grid,
  .about-page .detail-grid,
  .support-page .detail-grid,
  .rewards-page .mini-grid,
  .about-page .mini-grid,
  .spend-page .mini-grid{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;
  }
  .spend-page .detail-card,
  .about-page .detail-card,
  .support-page .detail-card,
  .rewards-page .mini-card,
  .about-page .mini-card,
  .spend-page .mini-card{
    min-width:0;min-height:155px;padding:18px 14px!important;border-radius:18px;
  }
  .spend-page .detail-card h3,
  .about-page .detail-card h3,
  .support-page .detail-card h3,
  .rewards-page .mini-card h3,
  .about-page .mini-card h3,
  .spend-page .mini-card h3{font-size:14px;line-height:1.12;overflow-wrap:anywhere;}
  .spend-page .detail-card p,
  .about-page .detail-card p,
  .support-page .detail-card p,
  .rewards-page .mini-card p,
  .about-page .mini-card p,
  .spend-page .mini-card p{font-size:10px;line-height:1.45;}

  /* Rewards 3-step section: tighter, with 01/02 side by side and 03 full width. */
  .rewards-page .steps-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .rewards-page .step-card{min-height:155px;padding:18px 14px!important;}
  .rewards-page .step-card:nth-child(3){grid-column:1/-1;min-height:130px;}

  /* Split visuals follow copy instead of feeling detached. */
  .spend-page .split,
  .rewards-page .split,
  .about-page .split,
  .spend-page .split.reverse,
  .rewards-page .split.reverse,
  .about-page .split.reverse{
    display:flex!important;flex-direction:column!important;gap:24px!important;
  }
  .spend-page .split .copy,
  .rewards-page .split .copy,
  .about-page .split .copy{order:1;}
  .spend-page .split .visual,
  .rewards-page .split .visual,
  .about-page .split .visual{order:2;width:100%;min-height:330px;margin-top:0;}
  .spend-page .split .visual img,
  .rewards-page .split .visual img,
  .about-page .split .visual img{width:100%!important;height:100%!important;max-height:360px;object-fit:contain!important;}

  /* CTA: text first, artwork below — same visual language as HOME mobile. */
  .spend-page .cta-box,
  .rewards-page .cta-box,
  .about-page .cta-box,
  .support-page .cta-box{padding:30px 24px 0!important;overflow:hidden;display:flex;flex-direction:column;min-height:620px;}
  .spend-page .cta-robot,
  .rewards-page .cta-robot,
  .about-page .cta-robot,
  .support-page .cta-robot{
    display:block!important;position:absolute!important;left:0!important;right:0!important;bottom:0!important;
    width:100%!important;height:300px!important;max-width:none!important;object-fit:cover!important;object-position:center 58%!important;
    opacity:.92!important;mask-image:none!important;-webkit-mask-image:none!important;clip-path:none!important;
  }

  /* Support console and FAQ stay readable. */
  .support-page .console{width:100%;margin-top:4px;}
  .support-page .console-row{grid-template-columns:38px 1fr auto!important;gap:8px;padding:16px 12px!important;}
  .support-page .console-row b{font-size:12px;}
  .support-page .faq summary{font-size:13px;gap:10px;}
}

@media (max-width:430px){
  .spend-page .detail-card,
  .about-page .detail-card,
  .support-page .detail-card,
  .rewards-page .mini-card,
  .about-page .mini-card,
  .spend-page .mini-card{padding:16px 12px!important;min-height:148px;}
  .spend-page .inner-visual,
  .rewards-page .inner-visual,
  .about-page .inner-visual{min-height:300px;}
}

@keyframes remainingStageFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes remainingArtworkFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-10px,0) scale(1.018)}}
@keyframes remainingVisualDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5px,-7px,0) scale(1.018)}}
@keyframes remainingMobileFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes remainingHeroShine{0%,18%{transform:translateX(-135%) skewX(-12deg);opacity:0}36%{opacity:1}60%,100%{transform:translateX(135%) skewX(-12deg);opacity:0}}
@keyframes remainingSweep{0%,14%{left:-35%;opacity:0}28%{opacity:1}45%,100%{left:135%;opacity:0}}
@keyframes remainingCtaBreath{0%,100%{box-shadow:0 0 0 rgba(53,247,155,0)}50%{box-shadow:0 0 46px rgba(15,180,93,.055)}}
@keyframes remainingCtaArt{0%,100%{transform:scale(1.01) translate3d(0,0,0)}50%{transform:scale(1.04) translate3d(-5px,-2px,0)}}
@keyframes supportConsoleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

@media (prefers-reduced-motion:reduce){
  .spend-page *, .rewards-page *, .about-page *, .support-page *{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;}
}

/* =========================================================
   V21 TARGETED FIX — SPEND MOBILE + REWARDS DESKTOP/MOBILE
   Only the five requested adjustments in this pass.
   ========================================================= */

/* 4) REWARDS DESKTOP — make the Concierge artwork feel intentional,
      balanced and full instead of sitting small in a large black stage. */
@media (min-width:901px){
  .rewards-page .visual:has(img[src$="lifestyle-scene.webp"]){
    min-height:520px;
    height:520px;
    overflow:hidden;
    border-radius:28px;
    border:1px solid rgba(53,247,155,.10);
    background:
      radial-gradient(circle at 64% 54%,rgba(15,180,93,.10),transparent 46%),
      #030503;
    box-shadow:0 28px 70px rgba(0,0,0,.28);
  }
  .rewards-page .visual:has(img[src$="lifestyle-scene.webp"]) .glow{
    display:none;
  }
  .rewards-page .visual img[src$="lifestyle-scene.webp"]{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center 61%!important;
    filter:saturate(1.05) contrast(1.04) drop-shadow(0 24px 42px rgba(0,0,0,.30));
    transform:scale(1.025);
    animation:rewardsConciergeFloat 7.5s ease-in-out infinite!important;
  }
}

/* SPEND MOBILE */
@media (max-width:900px){
  /* 1 + 2) MONEY IN: use the payment artwork as the section's lower
     background and keep the cards readable on top of it. */
  .spend-page .split:has(img[src$="global-payment-scene.webp"]){
    position:relative;
    isolation:isolate;
    overflow:hidden;
    gap:12px!important;
    padding:18px 0 24px!important;
    border-radius:24px;
    border:1px solid rgba(53,247,155,.075);
    background:#030503;
  }
  .spend-page .split:has(img[src$="global-payment-scene.webp"])::before{
    content:"";
    position:absolute;
    z-index:0;
    left:0;right:0;bottom:0;
    height:60%;
    background:
      linear-gradient(180deg,#030503 0%,rgba(3,5,3,.72) 16%,rgba(3,5,3,.20) 46%,rgba(3,5,3,.36) 78%,#030503 100%),
      url('../assets/global-payment-scene.webp') center 68% / cover no-repeat;
    opacity:.96;
    transform:scale(1.02);
    transform-origin:center bottom;
    pointer-events:none;
    animation:spendPaymentBg 8s ease-in-out infinite;
  }
  .spend-page .split:has(img[src$="global-payment-scene.webp"]) .copy{
    position:relative;
    z-index:2;
    padding:0 14px 16px;
  }
  .spend-page .split:has(img[src$="global-payment-scene.webp"]) .visual{
    display:none!important;
  }
  .spend-page .split:has(img[src$="global-payment-scene.webp"]) .mini-grid{
    margin-top:16px!important;
  }
  .spend-page .split:has(img[src$="global-payment-scene.webp"]) .mini-card{
    background:rgba(3,6,4,.78)!important;
    border-color:rgba(177,241,21,.14)!important;
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    box-shadow:0 14px 30px rgba(0,0,0,.18);
  }

  /* 3) SPEND closing CTA — HOME-like compact mobile composition. */
  .spend-page .cta{padding:44px 0!important;}
  .spend-page .cta .cta-box{
    min-height:500px!important;
    padding:24px 20px 0!important;
    display:block!important;
    border-radius:22px!important;
  }
  .spend-page .cta .cta-box > div{
    position:relative!important;
    z-index:2!important;
    max-width:none!important;
  }
  .spend-page .cta .cta-box h2{
    font-size:28px!important;
    line-height:.98!important;
    max-width:320px!important;
  }
  .spend-page .cta .cta-box p{
    max-width:300px!important;
    margin-bottom:16px!important;
  }
  .spend-page .cta .cta-robot{
    display:block!important;
    position:absolute!important;
    left:0!important;right:0!important;bottom:0!important;
    width:100%!important;
    height:255px!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center 60%!important;
    opacity:.94!important;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 100%)!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 100%)!important;
  }

  /* 5) REWARDS closing CTA — same compact HOME-like composition,
     removing the oversized empty gap seen on mobile. */
  .rewards-page .cta{padding:44px 0!important;}
  .rewards-page .cta .cta-box{
    min-height:500px!important;
    padding:24px 20px 0!important;
    display:block!important;
    border-radius:22px!important;
  }
  .rewards-page .cta .cta-box > div{
    position:relative!important;
    z-index:2!important;
    max-width:none!important;
  }
  .rewards-page .cta .cta-box h2{
    font-size:28px!important;
    line-height:.98!important;
    max-width:320px!important;
  }
  .rewards-page .cta .cta-box p{
    max-width:300px!important;
    margin-bottom:16px!important;
  }
  .rewards-page .cta .cta-robot{
    display:block!important;
    position:absolute!important;
    left:0!important;right:0!important;bottom:0!important;
    width:100%!important;
    height:255px!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center 60%!important;
    opacity:.94!important;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 100%)!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 13%,#000 100%)!important;
  }
}

@media (max-width:430px){
  .spend-page .cta .cta-box,
  .rewards-page .cta .cta-box{min-height:475px!important;}
  .spend-page .cta .cta-robot,
  .rewards-page .cta .cta-robot{height:235px!important;}
}

@keyframes rewardsConciergeFloat{
  0%,100%{transform:scale(1.025) translate3d(0,0,0)}
  50%{transform:scale(1.045) translate3d(-5px,-5px,0)}
}
@keyframes spendPaymentBg{
  0%,100%{transform:scale(1.02) translate3d(0,0,0)}
  50%{transform:scale(1.055) translate3d(0,-5px,0)}
}

/* =========================================================
   V22 — REWARDS MOBILE: concierge artwork becomes the card-area background
   Artwork intentionally stays full-strength (no opacity/fade overlay).
   ========================================================= */
@media (max-width:900px){
  .rewards-page .split:has(img[src$="lifestyle-scene.webp"]){
    position:relative;
    isolation:isolate;
    overflow:hidden;
    gap:0!important;
    padding-bottom:22px!important;
    border-radius:24px;
    background:#030403;
  }

  /* Full-color / non-faded artwork begins behind the 2x2 concierge cards. */
  .rewards-page .split:has(img[src$="lifestyle-scene.webp"])::before{
    content:"";
    position:absolute;
    z-index:0;
    left:0;
    right:0;
    bottom:0;
    height:64%;
    background:url('../assets/lifestyle-scene.webp') center 58% / cover no-repeat;
    opacity:1!important;
    filter:none!important;
    pointer-events:none;
  }

  .rewards-page .split:has(img[src$="lifestyle-scene.webp"]) .copy{
    position:relative;
    z-index:2;
    width:100%;
  }

  .rewards-page .split:has(img[src$="lifestyle-scene.webp"]) .mini-grid{
    position:relative;
    z-index:3;
    margin-top:18px!important;
    padding:14px!important;
    gap:10px!important;
  }

  .rewards-page .split:has(img[src$="lifestyle-scene.webp"]) .mini-card{
    min-height:148px!important;
    background:rgba(3,4,3,.84)!important;
    border-color:rgba(177,241,21,.18)!important;
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
    box-shadow:0 12px 30px rgba(0,0,0,.28);
  }

  /* Remove the old standalone image block below the cards. */
  .rewards-page .split:has(img[src$="lifestyle-scene.webp"]) > .visual{
    display:none!important;
  }
}


/* =========================================================
   V23 — ABOUT + SUPPORT finishing pass
   Keeps all completed HOME/WALLET/SWAP/CARDS/SPEND/REWARDS work intact.
   ========================================================= */

/* ---------- ABOUT / desktop ---------- */
@media (min-width:901px){
  .about-page .inner-hero .inner-grid{
    align-items:center!important;
    min-height:690px;
  }
  .about-page .inner-hero .inner-visual.photo{
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
  }
  .about-page .inner-hero .inner-visual.photo img{
    width:min(610px,100%)!important;
    max-height:570px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 26px 60px rgba(15,180,93,.18));
    animation:aboutHeroFloat 7s ease-in-out infinite;
  }
  .about-page .split .visual{
    min-height:490px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:24px;
  }
  .about-page .split .visual .soft-image{
    width:100%!important;
    height:100%!important;
    min-height:490px;
    object-fit:cover!important;
    object-position:center!important;
    animation:aboutSceneDrift 9s ease-in-out infinite;
  }
  .about-page .detail-card,
  .about-page .mini-card{
    transition:transform .32s ease,border-color .32s ease,box-shadow .32s ease;
  }
  .about-page .detail-card:hover,
  .about-page .mini-card:hover{
    transform:translateY(-6px);
    border-color:rgba(53,247,155,.30)!important;
    box-shadow:0 18px 45px rgba(15,180,93,.08);
  }

  /* Closing CTA matches the visual balance used on HOME. */
  .about-page .cta .cta-box,
  .support-page .cta .cta-box{
    min-height:430px!important;
    overflow:hidden!important;
    position:relative!important;
  }
  .about-page .cta .cta-robot,
  .support-page .cta .cta-robot{
    display:block!important;
    position:absolute!important;
    right:0!important;
    bottom:0!important;
    width:52%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center 55%!important;
    opacity:1!important;
    mask-image:linear-gradient(to right,transparent 0%,#000 20%,#000 100%)!important;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 20%,#000 100%)!important;
    animation:aboutSceneDrift 10s ease-in-out infinite;
  }

  /* ---------- SUPPORT / desktop ---------- */
  .support-page .inner-hero .inner-grid{
    align-items:center!important;
    min-height:630px;
  }
  .support-page .console{
    transform:perspective(1000px) rotateY(-3deg) rotateX(1deg);
    transform-origin:center;
    box-shadow:0 30px 80px rgba(0,0,0,.34),0 0 60px rgba(53,247,155,.055);
    animation:supportConsoleFloat 7.5s ease-in-out infinite;
  }
  .support-page .console-row{
    transition:transform .25s ease,background .25s ease,border-color .25s ease;
  }
  .support-page .console-row:hover{
    transform:translateX(8px);
    background:rgba(177,241,21,.035);
    border-color:rgba(53,247,155,.22);
  }
  .support-page .detail-card{
    transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
  }
  .support-page .detail-card:hover{
    transform:translateY(-5px);
    border-color:rgba(53,247,155,.28)!important;
    box-shadow:0 16px 40px rgba(15,180,93,.07);
  }
  .support-page .faq{
    transition:border-color .25s ease,background .25s ease,transform .25s ease;
  }
  .support-page .faq:hover{
    transform:translateX(4px);
    border-color:rgba(53,247,155,.22)!important;
  }
}

/* ---------- ABOUT + SUPPORT / mobile ---------- */
@media (max-width:900px){
  .about-page .inner-hero,
  .support-page .inner-hero{
    padding-bottom:42px!important;
  }
  .about-page .inner-grid,
  .support-page .inner-grid{
    gap:22px!important;
  }

  /* ABOUT hero artwork: below copy, large but fully contained. */
  .about-page .inner-visual.photo{
    min-height:330px!important;
    height:330px!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  .about-page .inner-visual.photo img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 38%!important;
    animation:aboutMobileFloat 6.5s ease-in-out infinite;
  }

  /* Pair information cards to keep pages compact, same mobile rhythm as prior pages. */
  .about-page .detail-grid,
  .support-page .detail-grid,
  .about-page .mini-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .about-page .detail-card,
  .support-page .detail-card,
  .about-page .mini-card{
    min-height:150px!important;
    padding:16px 14px!important;
  }
  .about-page .detail-card h3,
  .support-page .detail-card h3,
  .about-page .mini-card h3{
    font-size:14px!important;
    line-height:1.05!important;
  }
  .about-page .detail-card p,
  .support-page .detail-card p,
  .about-page .mini-card p{
    font-size:9px!important;
    line-height:1.38!important;
  }

  /* ABOUT split sections: text first, artwork immediately below — no oversized gap. */
  .about-page .split,
  .about-page .split.reverse{
    gap:18px!important;
  }
  .about-page .split .visual{
    order:2!important;
    min-height:300px!important;
    height:300px!important;
    border-radius:22px!important;
    overflow:hidden!important;
  }
  .about-page .split .visual .soft-image{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
  }

  /* SUPPORT console gets a compact, readable mobile treatment. */
  .support-page .console{
    margin-top:4px!important;
    border-radius:20px!important;
    overflow:hidden!important;
    box-shadow:0 18px 48px rgba(0,0,0,.30),0 0 38px rgba(53,247,155,.04);
  }
  .support-page .console-row{
    min-height:58px!important;
    padding:12px 11px!important;
    gap:8px!important;
  }
  .support-page .console-row b{font-size:10px!important;}
  .support-page .console-row > span:last-child{font-size:8px!important;}

  /* FAQs remain single-column for readability but use tighter spacing. */
  .support-page .faq-wrap{gap:8px!important;}
  .support-page .faq summary{padding:15px 14px!important;font-size:11px!important;}
  .support-page .faq p{padding:0 14px 15px!important;font-size:9px!important;line-height:1.5!important;}

  /* HOME-like closing CTA: compact, image immediately under copy. */
  .about-page .cta,
  .support-page .cta{padding:42px 0!important;}
  .about-page .cta .cta-box,
  .support-page .cta .cta-box{
    min-height:490px!important;
    padding:24px 20px 0!important;
    display:block!important;
    position:relative!important;
    overflow:hidden!important;
    border-radius:22px!important;
  }
  .about-page .cta .cta-box > div,
  .support-page .cta .cta-box > div{
    position:relative!important;
    z-index:2!important;
    max-width:none!important;
  }
  .about-page .cta .cta-box h2,
  .support-page .cta .cta-box h2{
    font-size:28px!important;
    line-height:.98!important;
    max-width:320px!important;
  }
  .about-page .cta .cta-box p,
  .support-page .cta .cta-box p{
    max-width:300px!important;
    margin-bottom:16px!important;
  }
  .about-page .cta .cta-robot,
  .support-page .cta .cta-robot{
    display:block!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:245px!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:center 60%!important;
    opacity:1!important;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 100%)!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 100%)!important;
  }
}

@media (max-width:430px){
  .about-page .detail-card,
  .support-page .detail-card,
  .about-page .mini-card{min-height:142px!important;padding:14px 12px!important;}
  .about-page .inner-visual.photo{height:305px!important;min-height:305px!important;}
  .about-page .split .visual{height:285px!important;min-height:285px!important;}
  .about-page .cta .cta-box,
  .support-page .cta .cta-box{min-height:465px!important;}
  .about-page .cta .cta-robot,
  .support-page .cta .cta-robot{height:225px!important;}
}

@keyframes aboutHeroFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-.4deg)}
  50%{transform:translate3d(0,-12px,0) rotate(.5deg)}
}
@keyframes aboutSceneDrift{
  0%,100%{transform:scale(1.015) translate3d(0,0,0)}
  50%{transform:scale(1.045) translate3d(-5px,-5px,0)}
}
@keyframes supportConsoleFloat{
  0%,100%{transform:perspective(1000px) rotateY(-3deg) rotateX(1deg) translate3d(0,0,0)}
  50%{transform:perspective(1000px) rotateY(-1deg) rotateX(.4deg) translate3d(0,-8px,0)}
}
@keyframes aboutMobileFloat{
  0%,100%{transform:scale(1.01) translate3d(0,0,0)}
  50%{transform:scale(1.035) translate3d(0,-4px,0)}
}

/* =========================================================
   V24 — ABOUT targeted image/layout fixes only
   ========================================================= */

/* DESKTOP: remove the visible dark panel around ABOUT hero and blend artwork into page. */
@media (min-width:901px){
  .about-page .inner-hero .inner-visual.photo{
    background:transparent!important;
    border-color:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .about-page .inner-hero .inner-visual.photo::before,
  .about-page .inner-hero .inner-visual.photo::after{
    display:none!important;
  }
  .about-page .inner-hero .inner-visual.photo img{
    width:min(590px,96%)!important;
    height:auto!important;
    max-height:560px!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 9%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 8%,#000 96%);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent 0%,#000 9%,#000 92%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 8%,#000 96%);
    mask-composite:intersect;
  }

  /* Product Story security artwork: show the full object instead of cropping it. */
  .about-page .split.reverse:has(img[src$="security-scene.webp"]) .visual{
    min-height:500px!important;
    height:500px!important;
    background:#020302!important;
    overflow:hidden!important;
    padding:18px!important;
  }
  .about-page .split.reverse:has(img[src$="security-scene.webp"]) .visual .soft-image{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }
}

/* MOBILE: Global image becomes the vivid background behind the four GLOBAL BY DESIGN cards. */
@media (max-width:900px){
  .about-page .split:has(img[src$="global-lifestyle-scene.webp"]) .copy{
    width:100%!important;
  }
  .about-page .split:has(img[src$="global-lifestyle-scene.webp"]) .mini-grid{
    position:relative!important;
    overflow:hidden!important;
    border-radius:22px!important;
    padding:14px!important;
    min-height:360px!important;
    background-image:url("../assets/global-lifestyle-scene.webp")!important;
    background-size:cover!important;
    background-position:center 58%!important;
    background-repeat:no-repeat!important;
    border:1px solid rgba(53,247,155,.16)!important;
  }
  .about-page .split:has(img[src$="global-lifestyle-scene.webp"]) .mini-grid::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.20));
    pointer-events:none;
  }
  .about-page .split:has(img[src$="global-lifestyle-scene.webp"]) .mini-card{
    position:relative!important;
    z-index:1!important;
    background:rgba(3,5,3,.78)!important;
    backdrop-filter:blur(3px)!important;
    -webkit-backdrop-filter:blur(3px)!important;
  }
  .about-page .split:has(img[src$="global-lifestyle-scene.webp"]) > .visual{
    display:none!important;
  }

  /* Product Story security image: keep the complete image inside the mobile frame. */
  .about-page .split.reverse:has(img[src$="security-scene.webp"]) .visual{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:320px!important;
    min-height:320px!important;
    padding:10px!important;
    overflow:hidden!important;
    background:#020302!important;
  }
  .about-page .split.reverse:has(img[src$="security-scene.webp"]) .visual .soft-image{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }
}

@media (max-width:430px){
  .about-page .split:has(img[src$="global-lifestyle-scene.webp"]) .mini-grid{
    min-height:338px!important;
    padding:10px!important;
  }
  .about-page .split.reverse:has(img[src$="security-scene.webp"]) .visual{
    height:292px!important;
    min-height:292px!important;
  }
}

/* V25 — ABOUT mobile closing CTA image fit: keep the full robot scene inside the card */
@media (max-width:768px){
  .about-page .cta .cta-box{
    min-height:500px!important;
    padding-bottom:236px!important;
  }
  .about-page .cta .cta-robot{
    left:12px!important;
    right:12px!important;
    bottom:12px!important;
    width:calc(100% - 24px)!important;
    height:220px!important;
    max-width:calc(100% - 24px)!important;
    object-fit:contain!important;
    object-position:center bottom!important;
    border-radius:0 0 16px 16px!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
    transform:none!important;
  }
}
@media (max-width:430px){
  .about-page .cta .cta-box{
    min-height:490px!important;
    padding-bottom:226px!important;
  }
  .about-page .cta .cta-robot{
    height:210px!important;
  }
}


/* V26 — ABOUT mobile CTA: same image treatment as HOME */
@media (max-width:768px){
  .about-page .cta .cta-box{
    min-height:0!important;
    padding:23px 20px 0!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:6px!important;
    align-items:start!important;
    overflow:hidden!important;
  }
  .about-page .cta .cta-robot{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    width:calc(100% + 40px)!important;
    max-width:none!important;
    height:280px!important;
    margin:4px -20px 0!important;
    object-fit:cover!important;
    object-position:center 64%!important;
    border-radius:0!important;
    opacity:.86!important;
    filter:saturate(1.05) contrast(1.04)!important;
    transform:none!important;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 100%)!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 100%)!important;
  }
}
@media (max-width:430px){
  .about-page .cta .cta-box{
    min-height:0!important;
    padding-bottom:0!important;
  }
  .about-page .cta .cta-robot{
    height:280px!important;
  }
}

/* =========================================================
   SWAP V28 — replace hero artwork with uploaded looping video
   ========================================================= */
.swap-page .swap-video-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  isolation:isolate;
}
.swap-page .swap-video-visual::before{
  z-index:-1;
}
.swap-page .swap-hero-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:28px;
  background:#020403;
  box-shadow:0 30px 70px rgba(0,0,0,.45),0 0 42px rgba(15,180,93,.08);
}
@media (min-width:901px){
  .swap-page .swap-video-visual{
    width:min(650px,100%);
    height:500px;
    overflow:hidden;
    border-radius:32px;
    border:1px solid rgba(53,247,155,.12);
    background:radial-gradient(circle at 50% 50%,rgba(15,180,93,.08),transparent 62%),#020403;
  }
  .swap-page .swap-video-visual::before{
    opacity:.38;
  }
  .swap-page .swap-hero-video{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    animation:none!important;
    filter:none;
  }
}
@media (max-width:900px){
  .swap-page .swap-video-visual{
    width:100%;
    height:auto;
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:22px;
  }
  .swap-page .swap-hero-video{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:22px;
  }
}

/* =========================================================
   SWAP V29 — show the full phone inside the hero video
   ========================================================= */
.swap-page .swap-video-visual{
  background:radial-gradient(circle at 50% 50%,rgba(15,180,93,.06),transparent 68%),#020403!important;
}
.swap-page .swap-hero-video{
  object-fit:contain!important;
  object-position:center center!important;
  background:#020403!important;
}
@media (min-width:901px){
  .swap-page .swap-video-visual{
    height:520px!important;
    padding:18px!important;
  }
  .swap-page .swap-hero-video{
    width:100%!important;
    height:100%!important;
    border-radius:24px!important;
  }
}
@media (max-width:900px){
  .swap-page .swap-video-visual{
    aspect-ratio:16/10!important;
    padding:10px!important;
    overflow:hidden!important;
  }
  .swap-page .swap-hero-video{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
}

/* =========================================================
   SWAP V30 — frameless hero video + larger phone
   ========================================================= */
.swap-page .swap-video-visual{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  padding:0!important;
  overflow:hidden!important;
}
.swap-page .swap-video-visual::before,
.swap-page .swap-video-visual::after{
  display:none!important;
}
.swap-page .swap-hero-video{
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:scale(1.24)!important;
  transform-origin:center center!important;
}
@media (min-width:901px){
  .swap-page .swap-video-visual{
    width:min(700px,100%)!important;
    height:560px!important;
  }
  .swap-page .swap-hero-video{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
}
@media (max-width:900px){
  .swap-page .swap-video-visual{
    width:100%!important;
    aspect-ratio:4/3!important;
  }
  .swap-page .swap-hero-video{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    transform:scale(1.18)!important;
  }
}

/* =========================================================
   SWAP V31 — show the entire phone, no crop
   ========================================================= */
.swap-page .swap-video-visual{
  overflow:visible!important;
}
.swap-page .swap-hero-video{
  transform:none!important;
  object-fit:contain!important;
  object-position:center center!important;
}
@media (min-width:901px){
  .swap-page .swap-video-visual{
    width:min(760px,100%)!important;
    height:680px!important;
  }
  .swap-page .swap-hero-video{
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
  }
}
@media (max-width:900px){
  .swap-page .swap-video-visual{
    width:100%!important;
    height:auto!important;
    aspect-ratio:9/16!important;
  }
  .swap-page .swap-hero-video{
    width:100%!important;
    height:100%!important;
    transform:none!important;
  }
}

/* =========================================================
   SWAP V32 — mobile hero phone larger
   ========================================================= */
@media (max-width:900px){
  .swap-page .swap-video-visual{
    width:100%!important;
    height:560px!important;
    aspect-ratio:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
  }
  .swap-page .swap-hero-video{
    width:128%!important;
    height:128%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
  }
}
@media (max-width:520px){
  .swap-page .swap-video-visual{height:520px!important;}
  .swap-page .swap-hero-video{width:138%!important;height:138%!important;}
}

/* =========================================================
   SWAP V33 — mobile: larger phone while keeping full device visible
   ========================================================= */
@media (max-width:900px){
  .swap-page .swap-video-visual{
    width:100%!important;
    height:680px!important;
    aspect-ratio:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    margin-inline:auto!important;
  }
  .swap-page .swap-hero-video{
    width:100%!important;
    height:100%!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
  }
}
@media (max-width:520px){
  .swap-page .swap-video-visual{
    height:640px!important;
  }
  .swap-page .swap-hero-video{
    width:100%!important;
    height:100%!important;
  }
}
@media (max-width:390px){
  .swap-page .swap-video-visual{
    height:600px!important;
  }
}

/* V34 — HOME desktop centered hero, remove phone visual */
@media (min-width: 769px){
  .home-page .hero{
    min-height:760px;
    padding:145px 0 90px;
    display:flex;
    align-items:center;
  }
  .home-page .hero::after{display:none!important;}
  .home-page .hero-grid{
    grid-template-columns:1fr!important;
    gap:0!important;
    justify-items:center;
    align-items:center;
  }
  .home-page .hero-copy{
    max-width:920px!important;
    width:100%;
    margin:0 auto;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .home-page .hero-copy p{
    max-width:720px!important;
    margin-left:auto;
    margin-right:auto;
  }
  .home-page .hero-copy .kicker{
    justify-content:center;
  }
  .home-page .hero-actions{
    justify-content:center!important;
  }
  .home-page .hero-mini{
    justify-content:center!important;
    align-items:center;
  }
  .home-page .hero-visual{
    display:none!important;
  }
}

/* V35 — HOME mobile centered hero, remove phone visual too */
@media (max-width:768px){
  .home-page .hero{
    min-height:calc(100svh - 72px);
    padding:118px 0 70px;
    display:flex;
    align-items:center;
  }
  .home-page .hero::after{display:none!important;}
  .home-page .hero-grid{
    grid-template-columns:1fr!important;
    gap:0!important;
    justify-items:center!important;
    align-items:center!important;
  }
  .home-page .hero-copy{
    width:100%!important;
    max-width:560px!important;
    margin:0 auto!important;
    text-align:center!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
  }
  .home-page .hero-copy .kicker{justify-content:center!important;}
  .home-page .hero-copy h1{text-align:center!important;}
  .home-page .hero-copy p{
    max-width:500px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    text-align:center!important;
  }
  .home-page .hero-copy .hero-actions{
    width:100%!important;
    max-width:430px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    justify-content:center!important;
  }
  .home-page .hero-mini{
    width:100%!important;
    justify-content:center!important;
    text-align:center!important;
  }
  .home-page .hero-visual{display:none!important;}
}

/* V36 — HOME mobile: move centered hero upward closer to header */
@media (max-width:768px){
  .home-page .hero{
    min-height:calc(100svh - 72px)!important;
    padding:52px 0 64px!important;
    align-items:flex-start!important;
  }
  .home-page .hero-grid{
    padding-top:26px!important;
  }
}
@media (max-width:430px){
  .home-page .hero{
    padding-top:42px!important;
  }
  .home-page .hero-grid{
    padding-top:18px!important;
  }
}


/* V37 — HOME: embedded showcase video + replacement REAL LIFE artwork */
.home-page .home-video-showcase{
  padding:8px 0 26px;
  background:#000;
}
.home-page .home-video-showcase .container{
  width:min(1320px, calc(100% - 48px));
}
.home-page .home-video-wrap{
  width:100%;
  aspect-ratio:16/9;
  max-height:540px;
  overflow:hidden;
  background:#000;
  border-radius:24px;
  box-shadow:0 0 0 1px rgba(53,247,155,.12), 0 0 48px rgba(15,180,93,.08);
}
.home-page .home-showcase-video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  background:#000;
}

/* New REAL LIFE image — keep the full composition visible on desktop. */
.home-page .lifestyle-section .lifestyle-image{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}
.home-page .lifestyle-section .desktop-lifestyle-visual{
  min-height:520px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  background:#000!important;
}
.home-page .lifestyle-section .desktop-lifestyle-visual .glow{
  opacity:.32!important;
}

@media (max-width:768px){
  .home-page .home-video-showcase{
    padding:0 0 20px;
  }
  .home-page .home-video-showcase .container{
    width:calc(100% - 24px);
  }
  .home-page .home-video-wrap{
    aspect-ratio:16/9;
    max-height:none;
    border-radius:16px;
  }
  .home-page .home-showcase-video{
    object-fit:contain;
  }

  /* Mobile REAL LIFE artwork */
  .home-page .lifestyle-section .desktop-lifestyle-visual{
    display:none!important;
  }
  .home-page .lifestyle-section .mobile-lifestyle-visual{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:270px!important;
    overflow:hidden!important;
    background:#000!important;
    padding:0!important;
  }
  .home-page .lifestyle-section .mobile-lifestyle-visual .lifestyle-image{
    width:100%!important;
    height:100%!important;
    max-height:330px!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0!important;
  }
}

@media (max-width:430px){
  .home-page .home-video-showcase .container{
    width:calc(100% - 18px);
  }
  .home-page .home-video-wrap{
    border-radius:12px;
  }
  .home-page .lifestyle-section .mobile-lifestyle-visual{
    min-height:245px!important;
  }
}

/* V38 — HOME mobile video moved upward */
@media (max-width:768px){
  .home-page .home-video-showcase{
    margin-top:-72px!important;
    padding-top:0!important;
  }
}
@media (max-width:430px){
  .home-page .home-video-showcase{
    margin-top:-64px!important;
  }
}
/* V39 — HOME: replace ONE WALLET visual with responsive video */
.wallet-assets-video-wrap{
  overflow:hidden;
  background:#000;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wallet-assets-video{
  display:block;
  width:100%;
  height:auto;
  max-height:680px;
  object-fit:contain;
  background:#000;
}
@media (max-width: 768px){
  .wallet-assets-video-wrap{
    width:100%;
    margin:0 auto 24px;
    aspect-ratio:auto;
  }
  .wallet-assets-video{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
  }
}

/* V40 — HOME ONE WALLET video: slightly larger on desktop + mobile */
.home-page .wallet-assets-video-wrap{
  width:112%;
  max-width:none;
  margin-left:-6%;
}
.home-page .wallet-assets-video{
  width:100%;
  max-height:760px;
}
@media (max-width:768px){
  .home-page .wallet-assets-video-wrap{
    width:114%;
    margin-left:-7%;
    margin-right:-7%;
    margin-bottom:20px;
  }
  .home-page .wallet-assets-video{
    width:100%;
    max-height:none;
  }
}

/* V42 — HOME mobile: remove excessive gap before ONE WALLET video */
@media (max-width:768px){
  .home-page #platform + .section{
    padding-top:0 !important;
  }
  .home-page #platform{
    padding-bottom:18px !important;
  }
  .home-page #platform + .section .wallet-assets-video-wrap{
    margin-top:0 !important;
  }
}
@media (max-width:430px){
  .home-page #platform{
    padding-bottom:8px !important;
  }
}

/* V43 — HOME mobile: remove oversized empty space above/below hero copy */
@media (max-width:768px){
  .home-page .hero{
    min-height:0!important;
    height:auto!important;
    padding:26px 0 18px!important;
    align-items:flex-start!important;
  }
  .home-page .hero-grid{
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .home-page .home-video-showcase{
    margin-top:0!important;
    padding-top:0!important;
  }
}
@media (max-width:430px){
  .home-page .hero{
    padding:22px 0 14px!important;
  }
  .home-page .hero-grid{
    padding-top:0!important;
  }
  .home-page .home-video-showcase{
    margin-top:0!important;
  }
}

/* V44 — HOME mobile: restore a little hero breathing room + inset ONE WALLET video */
@media (max-width:768px){
  .home-page .hero{
    padding-top:54px!important;
  }
  .home-page .wallet-assets-video-wrap{
    width:94%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
@media (max-width:430px){
  .home-page .hero{
    padding-top:48px!important;
  }
  .home-page .wallet-assets-video-wrap{
    width:92%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* V45 — HOME mobile: a little more breathing room + side inset */
@media (max-width:768px){
  .home-page .hero{
    padding-top:64px!important;
  }
  .home-page .wallet-assets-video-wrap{
    width:90%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}
@media (max-width:430px){
  .home-page .hero{
    padding-top:58px!important;
  }
  .home-page .wallet-assets-video-wrap{
    width:88%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}


/* V46 — HOME mobile: increase header-to-hero breathing room slightly more */
@media (max-width:768px){
  .home-page .hero{padding-top:78px!important;}
}
@media (max-width:430px){
  .home-page .hero{padding-top:72px!important;}
}


/* V47 — WALLET: hero video + original hero image reused in second visual */
.wallet-page .wallet-hero-video{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:680px;
  object-fit:contain;
  object-position:center;
  background:#000;
  border:0;
  outline:0;
}
.wallet-page .hero-visual,
.wallet-page .hero-media,
.wallet-page .hero-image,
.wallet-page .visual{
  overflow:visible;
}

/* Keep the reused original hero artwork fully visible */
.wallet-page img[src*="wallet-original-hero"]{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}

@media (max-width:768px){
  .wallet-page .wallet-hero-video{
    width:100%;
    height:auto;
    max-height:520px;
    object-fit:contain;
    margin:0 auto;
  }
  .wallet-page img[src*="wallet-original-hero"]{
    width:100%!important;
    height:auto!important;
    max-height:420px!important;
    object-fit:contain!important;
    margin:0 auto!important;
  }
}


/* V48 — WALLET hero: remove legacy green rectangle behind the video */
.wallet-page .inner-hero .inner-visual::before{
  display:none!important;
  content:none!important;
  background:none!important;
  opacity:0!important;
}
.wallet-page .inner-hero .inner-visual{
  background:transparent!important;
  border:0!important;
}
\n\n/* V49 — WALLET FUND + USE video */\n.wallet-page .wallet-fund-use-video{\n  display:block;\n  width:100%;\n  height:100%;\n  max-width:100%;\n  max-height:620px;\n  object-fit:contain;\n  object-position:center;\n  background:#000;\n  border:0;\n  outline:0;\n}\n.wallet-page .split.reverse .visual:has(.wallet-fund-use-video){\n  display:flex;\n  align-items:center;\n  justify-content:center;\n  overflow:hidden;\n  background:#000;\n}\n@media (max-width:768px){\n  .wallet-page .wallet-fund-use-video{\n    width:100%;\n    height:auto;\n    max-height:440px;\n    object-fit:contain;\n    margin:0 auto;\n  }\n  .wallet-page .split.reverse .visual:has(.wallet-fund-use-video){\n    min-height:0;\n    padding:0;\n  }\n}\n

/* V52 — FUND + USE video sizing: smaller, fully visible */
.wallet-page .split.reverse .visual:has(.wallet-fund-use-video){
  min-height:560px!important;
  height:560px!important;
  padding:28px!important;
  box-sizing:border-box!important;
  background:#000!important;
}
.wallet-page .wallet-fund-use-video{
  width:100%!important;
  height:100%!important;
  max-width:680px!important;
  max-height:500px!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:auto!important;
}
@media (max-width:768px){
  .wallet-page .split.reverse .visual:has(.wallet-fund-use-video){
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:16px 12px!important;
  }
  .wallet-page .wallet-fund-use-video{
    width:100%!important;
    height:auto!important;
    max-width:100%!important;
    max-height:390px!important;
    object-fit:contain!important;
  }
}

/* CARDS HERO VIDEO V53 */
.cards-page .inner-hero .cards-hero-video-wrap{overflow:hidden;border-radius:28px;background:#030403;animation:none!important;}
.cards-page .inner-hero .cards-hero-video-wrap::before,.cards-page .inner-hero .cards-hero-video-wrap::after{display:none!important;}
.cards-page .inner-hero .cards-hero-video{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#030403;position:relative;z-index:2;animation:none!important;filter:none!important;}
@media (min-width:981px){.cards-page .inner-hero .cards-hero-video-wrap{height:520px;max-width:680px;width:100%;justify-self:center;}}
@media (max-width:980px){.cards-page .inner-hero .cards-hero-video-wrap{width:100%;height:auto;aspect-ratio:1/1;margin-top:12px;border-radius:20px}.cards-page .inner-hero .cards-hero-video{object-fit:contain;}}

/* V54 — SWAP stablecoin section: replace artwork with ROUPAY phone + card */
.swap-page .split .visual .swap-stablecoin-card{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
  filter:none!important;
  animation:none!important;
  position:relative;
  z-index:2;
}
@media (min-width:901px){
  .swap-page .split .visual:has(.swap-stablecoin-card){
    min-height:520px;
    padding:18px;
    box-sizing:border-box;
    overflow:hidden;
  }
}
@media (max-width:900px){
  .swap-page .split .visual:has(.swap-stablecoin-card){
    min-height:0!important;
    height:auto!important;
    padding:10px!important;
    aspect-ratio:1/1.12;
    overflow:hidden;
  }
  .swap-page .split .visual .swap-stablecoin-card{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
}

/* V55 LEGAL */
.legal-page{background:#020503;color:#fff}.legal-page .legal-hero{padding:150px 0 64px;border-bottom:1px solid rgba(255,255,255,.08);background:radial-gradient(circle at 80% 20%,rgba(15,180,93,.12),transparent 34%),#020503}.legal-page .legal-hero .container,.legal-layout{width:min(1180px,calc(100% - 48px))}.legal-page .legal-hero .kicker{margin-bottom:20px;color:#B3F141;font-size:14px;font-weight:700;letter-spacing:.16em}.legal-page .legal-hero h1{margin:0;font-size:clamp(50px,7vw,96px);line-height:.9;letter-spacing:-.045em}.legal-page .legal-hero p{max-width:760px;margin:26px 0 0;color:rgba(255,255,255,.58);font-size:17px;line-height:1.7}.legal-content-section{padding:70px 0 110px}.legal-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:72px;align-items:start}.legal-toc{position:sticky;top:120px;display:flex;flex-direction:column;gap:8px}.legal-toc a{display:block;padding:13px 15px;border:1px solid rgba(255,255,255,.09);border-radius:12px;color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.08em;transition:.25s}.legal-toc a:hover{color:#B3F141;border-color:rgba(179,241,65,.45);background:rgba(179,241,65,.04);transform:translateX(3px)}.legal-content{max-width:820px}.legal-content h2{margin:46px 0 16px;color:#fff;font-size:24px;line-height:1.2}.legal-content h2:first-child{margin-top:0}.legal-content p{margin:0 0 18px;color:rgba(255,255,255,.62);font-size:15px;line-height:1.82}.legal-content::before{content:"";display:block;width:64px;height:2px;margin-bottom:34px;background:linear-gradient(90deg,#B3F141,#35F79B);box-shadow:0 0 18px rgba(53,247,155,.34)}
@media(max-width:768px){.legal-page .legal-hero{padding:118px 0 42px}.legal-page .legal-hero .container,.legal-layout{width:calc(100% - 32px)}.legal-page .legal-hero h1{font-size:44px;line-height:.95}.legal-page .legal-hero p{font-size:14px}.legal-content-section{padding:36px 0 72px}.legal-layout{grid-template-columns:1fr;gap:30px}.legal-toc{position:static;display:grid;grid-template-columns:1fr 1fr;gap:8px}.legal-toc a{text-align:center;padding:11px 8px;font-size:10px}.legal-content h2{margin-top:36px;font-size:20px}.legal-content p{font-size:13px;line-height:1.75}}


/* V56 LEGAL TYPOGRAPHY / READABILITY REFINEMENT */
.legal-page .legal-hero{
  padding-bottom:72px;
}
.legal-page .legal-hero .kicker{
  margin-bottom:18px;
  font-size:13px;
  line-height:1;
  letter-spacing:.18em;
}
.legal-page .legal-hero h1{
  max-width:980px;
  font-size:clamp(52px,6vw,84px);
  line-height:.94;
  letter-spacing:-.04em;
}
.legal-page .legal-hero p{
  max-width:720px;
  margin-top:24px;
  font-size:16px;
  line-height:1.7;
  letter-spacing:.005em;
}

.legal-layout{
  grid-template-columns:205px minmax(0,780px);
  gap:78px;
  justify-content:start;
}
.legal-content{
  max-width:780px;
}
.legal-content::before{
  margin-bottom:42px;
}

.legal-content h2{
  position:relative;
  margin:54px 0 18px;
  padding:0 0 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:22px;
  font-weight:700;
  line-height:1.32;
  letter-spacing:-.018em;
}
.legal-content h2:first-child{
  margin-top:0;
}
.legal-content p{
  max-width:740px;
  margin:0 0 20px;
  color:rgba(255,255,255,.66);
  font-size:14px;
  font-weight:400;
  line-height:1.85;
  letter-spacing:.008em;
}
.legal-content p + p{
  margin-top:4px;
}

.legal-toc{
  gap:10px;
}
.legal-toc a{
  padding:14px 16px;
  font-size:11px;
  line-height:1.25;
  letter-spacing:.09em;
}

@media (max-width:768px){
  .legal-page .legal-hero{
    padding-top:116px;
    padding-bottom:44px;
  }
  .legal-page .legal-hero .kicker{
    font-size:10px;
    margin-bottom:14px;
  }
  .legal-page .legal-hero h1{
    max-width:100%;
    font-size:40px;
    line-height:.98;
    letter-spacing:-.035em;
  }
  .legal-page .legal-hero p{
    max-width:100%;
    margin-top:18px;
    font-size:13px;
    line-height:1.7;
  }
  .legal-layout{
    grid-template-columns:1fr;
    gap:34px;
  }
  .legal-content::before{
    margin-bottom:30px;
  }
  .legal-content h2{
    margin:42px 0 15px;
    padding-bottom:12px;
    font-size:18px;
    line-height:1.35;
  }
  .legal-content p{
    max-width:none;
    margin-bottom:17px;
    font-size:13px;
    line-height:1.8;
  }
  .legal-toc{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .legal-toc a{
    padding:12px 7px;
    font-size:9px;
    line-height:1.3;
  }
}

.legal-content .legal-clause{
  padding-left:0;
}
.legal-content .clause-marker{
  display:inline-block;
  min-width:28px;
  color:#B3F141;
  font-weight:700;
}


/* V57 LEGAL SMALLER TYPOGRAPHY */
.legal-page .legal-hero .kicker{
  font-size:11px;
}
.legal-page .legal-hero h1{
  font-size:clamp(44px,5vw,68px);
  line-height:.96;
}
.legal-page .legal-hero p{
  font-size:14px;
  line-height:1.65;
}

.legal-content h2{
  font-size:18px;
  line-height:1.35;
}
.legal-content p{
  font-size:12.5px;
  line-height:1.75;
}
.legal-toc a{
  font-size:10px;
}

@media (max-width:768px){
  .legal-page .legal-hero .kicker{
    font-size:9px;
  }
  .legal-page .legal-hero h1{
    font-size:34px;
    line-height:1;
  }
  .legal-page .legal-hero p{
    font-size:11.5px;
    line-height:1.65;
  }
  .legal-content h2{
    font-size:16px;
    line-height:1.35;
  }
  .legal-content p{
    font-size:11.5px;
    line-height:1.7;
  }
  .legal-toc a{
    font-size:8.5px;
  }
}

/* V59 — CARDS: show updated section artwork on mobile */
@media (max-width:900px){
  /* Disable the old V19 background artwork now that these sections use real images. */
  .cards-page .inner-hero + .metric-band + .section::before{
    display:none !important;
    content:none !important;
  }
  .cards-page .inner-hero + .metric-band + .section::after{
    display:none !important;
    content:none !important;
  }

  /* Premium physical card — show the new standing-card image below the copy. */
  .cards-page .inner-hero + .metric-band + .section > .split{
    display:flex !important;
    flex-direction:column !important;
    gap:28px !important;
  }
  .cards-page .inner-hero + .metric-band + .section .visual{
    display:flex !important;
    order:2 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:0 auto !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background:#030403 !important;
    border-radius:18px !important;
  }
  .cards-page .inner-hero + .metric-band + .section .visual .glow{
    display:none !important;
  }
  .cards-page .inner-hero + .metric-band + .section .visual img[src$="card-standing.png"]{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 auto !important;
    transform:none !important;
    filter:none !important;
  }

  /* Premium benefits — keep the second replacement image fully visible too. */
  .cards-page .cards-benefits-visual{
    display:flex !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    padding:0 !important;
    margin:10px auto 0 !important;
    transform:none !important;
    overflow:hidden !important;
    border-radius:18px !important;
    background:#030403 !important;
  }
  .cards-page .cards-benefits-visual .glow{display:none !important;}
  .cards-page .cards-benefits-visual img[src$="cards-hands.png"]{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    transform:none !important;
    filter:none !important;
  }
}

/* V60 — SPEND / MONEY IN: replace static image with responsive video */
.spend-page .split .visual:has(.spend-fund-video){
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:500px!important;
  overflow:hidden!important;
  background:#000!important;
  border:0!important;
}
.spend-page .spend-fund-video{
  display:block!important;
  width:94%!important;
  height:94%!important;
  max-width:100%!important;
  max-height:560px!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#000!important;
  border:0!important;
  outline:0!important;
}
@media (max-width:768px){
  .spend-page .split:has(.spend-fund-video){
    display:flex!important;
    flex-direction:column!important;
    gap:20px!important;
  }
  .spend-page .split:has(.spend-fund-video) .copy{order:1!important;}
  .spend-page .split:has(.spend-fund-video) .visual{
    order:2!important;
    display:flex!important;
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border-radius:20px!important;
    overflow:hidden!important;
    background:#000!important;
  }
  .spend-page .spend-fund-video{
    width:100%!important;
    height:auto!important;
    max-height:420px!important;
    object-fit:contain!important;
    margin:0 auto!important;
  }
}

/* Rewards hero video replacement */
.rewards-page .rewards-video-wrap{overflow:hidden;background:#030403;}
.rewards-page .rewards-hero-video{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#030403;}
@media (max-width: 760px){
  .rewards-page .rewards-video-wrap{width:100%;height:auto;min-height:0;}
  .rewards-page .rewards-hero-video{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;}
}


/* V55 — WALLET HERO: keep the full video visible inside the hero frame */
.wallet-page .inner-hero .inner-visual{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  width:100%!important;
  max-width:680px!important;
  height:520px!important;
  min-height:520px!important;
  margin:0 auto!important;
  justify-self:center!important;
  border-radius:28px!important;
  background:#030403!important;
}
.wallet-page .inner-hero .wallet-hero-video{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  margin:0 auto!important;
  background:#030403!important;
}
@media (max-width:980px){
  .wallet-page .inner-hero .inner-visual{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
    max-height:none!important;
    margin-top:12px!important;
    border-radius:20px!important;
  }
  .wallet-page .inner-hero .wallet-hero-video{
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
  }
}

/* =========================================================
   V61.1 — CLEAN TYPOGRAPHY HIERARCHY
   Headings / UI labels: CLASH DISPLAY + UPPERCASE
   Explanatory copy: POPPINS + lowercase
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

:root{
  --font-heading:'Clash Display',Arial,sans-serif;
  --font-body:'Poppins',Arial,sans-serif;
}

/* Default copy is clean and readable */
html,body{
  font-family:var(--font-body)!important;
  text-transform:none!important;
}

/* Headings and compact UI labels */
h1,h2,h3,h4,h5,h6,
.kicker,
.links a,
.mobile-links a,
.btn,
.logo,
.poster-label,
.big-num,
.stat strong,
.stat span,
.ticker-track,
.hero-mini,
.hero-badge,
.mini-card small,
.number-hero .outline,
.number-hero .solid,
.route-item .n,
.route-item b,
.limit strong,
.limit span,
.benefit .index,
.fee b,
.faq summary,
.page-index a,
.console-row .num,
.console-row b,
.footer h4,
.footer-bottom,
.legal-toc a{
  font-family:var(--font-heading)!important;
  text-transform:uppercase!important;
}

/* Explanatory / descriptive text */
p,
.lead,
.muted,
small,
.hero-copy p,
.inner-copy p,
.copy p,
.mini-card p,
.route-item span,
.benefit p,
.fees-head p,
.faq p,
.footer p,
.footer a,
.rail-item p,
.console-row span,
.legal-content p,
.legal-content li,
.legal-hero p,
.showcase-copy p,
.cta-box p{
  font-family:var(--font-body)!important;
  text-transform:lowercase!important;
  letter-spacing:0!important;
  font-weight:400!important;
}

/* Keep navigation/footer links as UI labels, not body copy */
.links a,
.mobile-links a,
.footer h4,
.btn,
.page-index a,
.legal-toc a{
  letter-spacing:.045em;
}

/* Headings stay visually strong without making the page feel crowded */
h1,h2{font-weight:600!important;}
h3,h4,h5,h6,.kicker,.btn,.links a{font-weight:600!important;}

/* Body copy gets more breathing room */
p,.lead,.legal-content p,.legal-content li{
  line-height:1.7!important;
}

/* =========================================================
   V61.2 — TYPOGRAPHY SIZE BOOST
   Preserve: Clash Display uppercase headings/UI + Poppins body copy
   Increase readability without returning to the crowded layout
   ========================================================= */

/* Desktop / tablet: stronger hierarchy */
h1{font-size:clamp(50px,5.8vw,82px)!important;}
h2{font-size:clamp(39px,4.5vw,62px)!important;}
h3{font-size:20px!important;}
.kicker{font-size:12px!important;}
p{font-size:14.5px!important;}
.lead{font-size:16px!important;line-height:1.72!important;}
.links a{font-size:13px!important;}
.btn{font-size:12px!important;}
.hero-mini{font-size:11px!important;}
.stat span,.poster-label,.mini-card small,.benefit .index,.console-row .num{font-size:10px!important;}
.mini-card h3,.rail-item h3{font-size:17px!important;}
.mini-card p,.poster-card p,.benefit p,.rail-item p,.faq p{font-size:11.5px!important;}
.route-item b,.console-row b{font-size:12.5px!important;}
.route-item span,.console-row span{font-size:10.5px!important;}
.page-index a{font-size:10px!important;}
.footer p,.footer a{font-size:10.5px!important;}
.footer h4{font-size:11.5px!important;}
.footer-bottom{font-size:9.5px!important;}
.inner-copy h1{font-size:clamp(48px,5.3vw,74px)!important;}

/* Preserve descriptive text treatment */
p,.lead,.mini-card p,.poster-card p,.benefit p,.rail-item p,.faq p,
.footer p,.footer a,.route-item span,.console-row span,.legal-content p,.legal-content li{
  font-family:var(--font-body)!important;
  text-transform:lowercase!important;
}

/* Legal pages: modest increase only */
.legal-page .legal-hero h1{font-size:clamp(54px,7.2vw,100px)!important;}
.legal-page .legal-hero p{font-size:18px!important;}
.legal-content h2{font-size:26px!important;}
.legal-content p,.legal-content li{font-size:16px!important;}
.legal-toc a{font-size:13px!important;}

/* Mobile: raise the sizes that were previously too small */
@media (max-width:760px){
  h1{font-size:clamp(37px,10.2vw,46px)!important;}
  h2{font-size:clamp(31px,9vw,39px)!important;}
  h3{font-size:17px!important;}
  p,.lead{font-size:13px!important;line-height:1.68!important;}
  .kicker{font-size:9.5px!important;}
  .btn{font-size:10.5px!important;}
  .hero-mini{font-size:8.5px!important;}
  .ticker-track{font-size:8px!important;}
  .stat span,.metric-chip span{font-size:7.5px!important;}
  .poster-card h3,.poster-small .poster-card h3{font-size:19px!important;}
  .poster-card p{font-size:10px!important;line-height:1.55!important;}
  .mini-card h3,.rail-item h3{font-size:15px!important;}
  .mini-card p,.benefit p,.detail-card p,.rail-item p,.faq p{font-size:10.5px!important;}
  .network-pill,.page-index a{font-size:8.5px!important;}
  .route-item b,.console-row b{font-size:10.5px!important;}
  .route-item>span:last-child,.console-row>span:last-child{font-size:9px!important;}
  .fee{font-size:10px!important;}
  .fee b{font-size:11.5px!important;}
  .faq summary{font-size:11px!important;}
  .inner-copy h1{font-size:clamp(37px,10.4vw,46px)!important;}
  .cta-box p{font-size:11.5px!important;}
  .footer p,.footer a{font-size:9px!important;}
  .footer h4{font-size:10px!important;}
  .footer-bottom{font-size:8px!important;}

  .legal-page .legal-hero h1{font-size:48px!important;}
  .legal-page .legal-hero p{font-size:15px!important;}
  .legal-content h2{font-size:22px!important;}
  .legal-content p,.legal-content li{font-size:14px!important;}
  .legal-toc a{font-size:11px!important;}
}

/* USER REQUEST: Larger explanation text while keeping clean hierarchy */
p,
.lead,
.muted,
small,
.section-head p,
.inner-copy p,
.showcase-copy p,
.cta-box p,
.hero-copy p,
.poster-card p,
.detail-card p,
.step-card p,
.benefit p,
.faq p,
.footer p {
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

.hero-copy .lead,
.section-head .lead {
  font-size: 17px;
}

.links a,
.btn,
.kicker,
.poster-label,
.detail-index {
  letter-spacing: .08em;
}

@media (max-width: 768px){
 p,
 .lead,
 .muted,
 small,
 .section-head p,
 .inner-copy p,
 .showcase-copy p,
 .cta-box p,
 .hero-copy p,
 .poster-card p,
 .detail-card p,
 .step-card p,
 .benefit p,
 .faq p,
 .footer p {
   font-size: 15px;
 }
}

/* =========================================================
   V61.4 — FOOTER + COMPANY REGISTRATION
   User request: make these texts larger and uppercase
   ========================================================= */
.footer p{
  font-size:15px!important;
  line-height:1.85!important;
  letter-spacing:.02em!important;
  max-width:480px!important;
  text-transform:uppercase!important;
}
.footer a{
  font-size:14px!important;
  line-height:1.8!important;
  letter-spacing:.05em!important;
  text-transform:uppercase!important;
}
.footer h4{
  font-size:15px!important;
  letter-spacing:.09em!important;
  margin-bottom:14px!important;
  font-family:var(--font-heading)!important;
  text-transform:uppercase!important;
}
.footer-bottom{
  font-size:12px!important;
  line-height:1.75!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
.company-registration{
  padding-top:30px!important;
  gap:28px!important;
}
.company-registration .registration-group{
  max-width:780px!important;
}
.company-registration h4{
  font-size:24px!important;
  line-height:1.35!important;
  letter-spacing:.04em!important;
  font-family:var(--font-heading)!important;
  color:#FFFFFF!important;
  text-transform:uppercase!important;
  margin-bottom:16px!important;
}
.company-registration p{
  font-size:18px!important;
  line-height:1.9!important;
  letter-spacing:.02em!important;
  color:rgba(255,255,255,.72)!important;
  font-family:var(--font-body)!important;
  text-transform:uppercase!important;
  margin-bottom:8px!important;
}

@media (max-width:768px){
  .footer p{
    font-size:12.5px!important;
    line-height:1.8!important;
  }
  .footer a{
    font-size:12px!important;
    line-height:1.7!important;
  }
  .footer h4{
    font-size:12.5px!important;
    margin-bottom:10px!important;
  }
  .footer-bottom{
    font-size:10px!important;
    line-height:1.7!important;
  }
  .company-registration{
    padding-top:24px!important;
    gap:20px!important;
  }
  .company-registration h4{
    font-size:16px!important;
    line-height:1.4!important;
    margin-bottom:10px!important;
  }
  .company-registration p{
    font-size:13.5px!important;
    line-height:1.8!important;
    margin-bottom:6px!important;
  }
}

@media (max-width:420px){
  .footer p{font-size:11.5px!important;}
  .footer a{font-size:11px!important;}
  .footer h4{font-size:11.5px!important;}
  .company-registration h4{font-size:14px!important;}
  .company-registration p{font-size:12px!important;}
}

/* =========================================================
   TERMS PAGE REFINEMENT
   Fix oversized legal clause text and create cleaner hierarchy
   ========================================================= */
.terms-page .legal-layout{
  grid-template-columns:220px minmax(0,860px)!important;
  gap:56px!important;
  justify-content:start!important;
}
.terms-page .legal-content{
  max-width:860px!important;
}
.terms-page .legal-toc a.active{
  color:#FFFFFF!important;
  border-color:rgba(179,241,65,.45)!important;
  background:rgba(179,241,65,.06)!important;
  box-shadow:inset 0 0 0 1px rgba(179,241,65,.12);
}
.terms-page .legal-content::before{
  margin-bottom:28px!important;
}
.terms-page .legal-hero p,
.terms-page .legal-content p,
.terms-page .legal-content li{
  font-family:var(--font-body)!important;
  font-size:15.5px!important;
  line-height:1.9!important;
  letter-spacing:.01em!important;
  text-transform:none!important;
  color:rgba(255,255,255,.72)!important;
}
.terms-page .legal-content > p{
  max-width:760px!important;
}
.terms-page .legal-content .legal-clause{
  margin:42px 0 14px!important;
  padding:0 0 12px!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  font-family:var(--font-heading)!important;
  font-size:18px!important;
  font-weight:600!important;
  line-height:1.35!important;
  letter-spacing:.03em!important;
  text-transform:uppercase!important;
  color:#FFFFFF!important;
}
.terms-page .legal-content .clause-marker{
  display:inline-block!important;
  min-width:auto!important;
  margin-right:8px!important;
  color:#B3F141!important;
  font-family:var(--font-heading)!important;
}
.terms-page .legal-content h2{
  margin:14px 0!important;
  padding:0!important;
  border-bottom:none!important;
  max-width:760px!important;
  font-family:var(--font-body)!important;
  font-size:17px!important;
  font-weight:600!important;
  line-height:1.82!important;
  letter-spacing:.005em!important;
  text-transform:none!important;
  color:#FFFFFF!important;
}

@media (max-width:768px){
  .terms-page .legal-layout{
    grid-template-columns:1fr!important;
    gap:26px!important;
  }
  .terms-page .legal-toc{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .terms-page .legal-toc a{
    font-size:10px!important;
    padding:12px 10px!important;
  }
  .terms-page .legal-hero p,
  .terms-page .legal-content p,
  .terms-page .legal-content li{
    font-size:13.5px!important;
    line-height:1.82!important;
  }
  .terms-page .legal-content .legal-clause{
    margin:30px 0 12px!important;
    font-size:14px!important;
    line-height:1.35!important;
  }
  .terms-page .legal-content h2{
    margin:12px 0!important;
    font-size:14.5px!important;
    line-height:1.78!important;
  }
}

/* =========================================================
   TERMS PAGE ONLY — FINAL CLEAN LAYOUT
   Simplify Terms page typography and avoid oversized clause blocks
   ========================================================= */
.terms-page .legal-layout{
  grid-template-columns: 220px minmax(0, 820px) !important;
  gap: 52px !important;
  justify-content: start !important;
}
.terms-page .terms-content{
  max-width: 820px !important;
}
.terms-page .legal-toc a.active{
  color:#FFFFFF !important;
  border-color:rgba(179,241,65,.45) !important;
  background:rgba(179,241,65,.06) !important;
}
.terms-page .legal-content::before{
  width:72px !important;
  margin-bottom:30px !important;
}
.terms-page .legal-hero p{
  text-transform:none !important;
  font-family:var(--font-body) !important;
  font-size:16px !important;
  line-height:1.75 !important;
  color:rgba(255,255,255,.68) !important;
}
.terms-page .legal-content > p,
.terms-page .legal-content li{
  text-transform:none !important;
  font-family:var(--font-body) !important;
  font-size:15px !important;
  line-height:1.82 !important;
  letter-spacing:.005em !important;
  color:rgba(255,255,255,.74) !important;
  margin:0 0 14px !important;
  max-width:760px !important;
}
.terms-page .legal-content .legal-clause{
  margin:34px 0 14px !important;
  padding:0 0 10px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  text-transform:uppercase !important;
  font-family:var(--font-heading) !important;
  font-size:19px !important;
  font-weight:600 !important;
  line-height:1.3 !important;
  letter-spacing:.02em !important;
  color:#FFFFFF !important;
}
.terms-page .legal-content .clause-marker{
  color:#B3F141 !important;
  margin-right:8px !important;
  font-family:var(--font-heading) !important;
}
.terms-page .terms-content .legal-subclause{
  margin:0 0 18px !important;
  padding:0 !important;
  border:none !important;
  text-transform:none !important;
  font-family:var(--font-body) !important;
  font-size:16px !important;
  font-weight:500 !important;
  line-height:1.9 !important;
  letter-spacing:0 !important;
  color:#FFFFFF !important;
  max-width:760px !important;
}
.terms-page .terms-content .legal-subclause + .legal-subclause{
  margin-top:-2px !important;
}

@media (max-width: 768px){
  .terms-page .legal-layout{
    grid-template-columns:1fr !important;
    gap:26px !important;
  }
  .terms-page .legal-toc{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .terms-page .legal-toc a{
    font-size:10px !important;
    padding:12px 10px !important;
  }
  .terms-page .legal-hero p{
    font-size:14px !important;
    line-height:1.72 !important;
  }
  .terms-page .legal-content > p,
  .terms-page .terms-content .legal-subclause,
  .terms-page .legal-content li{
    font-size:13.5px !important;
    line-height:1.82 !important;
    max-width:none !important;
  }
  .terms-page .legal-content .legal-clause{
    margin:28px 0 12px !important;
    font-size:15px !important;
  }
}

/* =========================================================
   TERMS PAGE — CLEAN REDESIGN (page-specific)
   ========================================================= */
.terms-page .legal-layout{
  grid-template-columns:220px minmax(0, 920px) !important;
  gap:48px !important;
  justify-content:start !important;
}
.terms-page .terms-redesigned{
  max-width:920px !important;
}
.terms-page .legal-content::before{
  width:72px !important;
  margin-bottom:26px !important;
}
.terms-page .legal-toc a.active{
  color:#ffffff !important;
  border-color:rgba(179,241,65,.45) !important;
  background:rgba(179,241,65,.06) !important;
}
.terms-page .terms-intro{
  margin-bottom:34px !important;
}
.terms-page .terms-opening{
  font-family:var(--font-body) !important;
  font-size:15.5px !important;
  line-height:1.85 !important;
  color:rgba(255,255,255,.78) !important;
  text-transform:none !important;
  margin:0 0 18px !important;
  max-width:800px !important;
}
.terms-page .terms-definitions{
  display:grid !important;
  gap:12px !important;
}
.terms-page .terms-definition{
  padding:14px 16px !important;
  border:1px solid rgba(255,255,255,.07) !important;
  background:rgba(255,255,255,.02) !important;
  border-radius:14px !important;
}
.terms-page .terms-definition-label{
  font-family:var(--font-heading) !important;
  font-size:13px !important;
  letter-spacing:.04em !important;
  text-transform:uppercase !important;
  color:#ffffff !important;
  margin-bottom:6px !important;
}
.terms-page .terms-definition-text{
  font-family:var(--font-body) !important;
  font-size:14.5px !important;
  line-height:1.78 !important;
  color:rgba(255,255,255,.7) !important;
  text-transform:none !important;
}
.terms-page .terms-section{
  margin-top:30px !important;
}
.terms-page .terms-section-head{
  display:flex !important;
  align-items:flex-end !important;
  gap:12px !important;
  padding-bottom:12px !important;
  margin-bottom:8px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.terms-page .terms-section-no{
  font-family:var(--font-heading) !important;
  font-size:18px !important;
  line-height:1 !important;
  color:#B3F141 !important;
  letter-spacing:.03em !important;
}
.terms-page .terms-section-title{
  margin:0 !important;
  font-family:var(--font-heading) !important;
  font-size:24px !important;
  line-height:1.08 !important;
  letter-spacing:-.01em !important;
  text-transform:uppercase !important;
  color:#ffffff !important;
  border:none !important;
  padding:0 !important;
}
.terms-page .terms-items{
  display:grid !important;
  gap:0 !important;
}
.terms-page .terms-item{
  display:grid !important;
  grid-template-columns:64px minmax(0,1fr) !important;
  gap:14px !important;
  padding:16px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.06) !important;
}
.terms-page .terms-item-no{
  font-family:var(--font-heading) !important;
  font-size:15px !important;
  line-height:1.2 !important;
  color:#B3F141 !important;
  letter-spacing:.03em !important;
  padding-top:2px !important;
}
.terms-page .terms-item-text,
.terms-page .terms-paragraph{
  font-family:var(--font-body) !important;
  font-size:15px !important;
  line-height:1.82 !important;
  color:rgba(255,255,255,.75) !important;
  text-transform:none !important;
  margin:0 !important;
}
.terms-page .terms-letter{
  display:grid !important;
  grid-template-columns:38px minmax(0,1fr) !important;
  gap:10px !important;
  padding:10px 0 10px 24px !important;
}
.terms-page .terms-letter-no{
  font-family:var(--font-heading) !important;
  font-size:14px !important;
  color:#ffffff !important;
  line-height:1.4 !important;
}
.terms-page .terms-letter-text{
  font-family:var(--font-body) !important;
  font-size:14.5px !important;
  line-height:1.78 !important;
  color:rgba(255,255,255,.72) !important;
  text-transform:none !important;
}

@media (max-width: 768px){
  .terms-page .legal-layout{
    grid-template-columns:1fr !important;
    gap:26px !important;
  }
  .terms-page .legal-toc{
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }
  .terms-page .legal-toc a{
    font-size:10px !important;
    padding:12px 10px !important;
  }
  .terms-page .terms-opening{
    font-size:14px !important;
    line-height:1.8 !important;
  }
  .terms-page .terms-definition{
    padding:12px 14px !important;
    border-radius:12px !important;
  }
  .terms-page .terms-definition-label{
    font-size:11.5px !important;
  }
  .terms-page .terms-definition-text{
    font-size:13px !important;
    line-height:1.72 !important;
  }
  .terms-page .terms-section-head{
    gap:10px !important;
    padding-bottom:10px !important;
  }
  .terms-page .terms-section-no{
    font-size:15px !important;
  }
  .terms-page .terms-section-title{
    font-size:18px !important;
    line-height:1.14 !important;
  }
  .terms-page .terms-item{
    grid-template-columns:52px minmax(0,1fr) !important;
    gap:10px !important;
    padding:14px 0 !important;
  }
  .terms-page .terms-item-no{
    font-size:13px !important;
  }
  .terms-page .terms-item-text,
  .terms-page .terms-paragraph{
    font-size:13.5px !important;
    line-height:1.76 !important;
  }
  .terms-page .terms-letter{
    grid-template-columns:30px minmax(0,1fr) !important;
    gap:8px !important;
    padding:8px 0 8px 16px !important;
  }
  .terms-page .terms-letter-no{
    font-size:12.5px !important;
  }
  .terms-page .terms-letter-text{
    font-size:13px !important;
    line-height:1.72 !important;
  }
}

/* =========================================================
   TERMS PAGE ONLY — FIX FLOATING SECTION NUMBER + UPPERCASE HEADINGS
   ========================================================= */
.terms-page .terms-section-head{
  display:block !important;
  padding-bottom:12px !important;
  margin-bottom:10px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.terms-page .terms-section-head > .terms-section-no{
  display:none !important;
}
.terms-page .terms-section-title{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 !important;
  font-family:var(--font-heading) !important;
  font-size:24px !important;
  line-height:1.12 !important;
  letter-spacing:-.01em !important;
  text-transform:uppercase !important;
  color:#FFFFFF !important;
}
.terms-page .terms-section-title .inline-no{
  flex:0 0 auto !important;
  display:inline-block !important;
  font-family:var(--font-heading) !important;
  font-size:18px !important;
  line-height:1 !important;
  letter-spacing:.03em !important;
  color:#B3F141 !important;
  transform:translateY(-1px) !important;
}
.terms-page .terms-definition-label,
.terms-page .legal-toc a,
.terms-page .legal-hero h1,
.terms-page .kicker{
  text-transform:uppercase !important;
}

@media (max-width:768px){
  .terms-page .terms-section-head{
    padding-bottom:10px !important;
    margin-bottom:8px !important;
  }
  .terms-page .terms-section-title{
    gap:10px !important;
    font-size:18px !important;
    line-height:1.16 !important;
  }
  .terms-page .terms-section-title .inline-no{
    font-size:15px !important;
  }
}

/* =========================================================
   FOOTER COMPANY REGISTRATION — SIZE REBALANCE
   Keep uppercase, reduce oversized scale for cleaner hierarchy
   ========================================================= */
.company-registration h4{
  font-size:20px !important;
  line-height:1.32 !important;
  letter-spacing:.025em !important;
  margin-bottom:14px !important;
}
.company-registration p{
  font-size:15.5px !important;
  line-height:1.78 !important;
  letter-spacing:.012em !important;
  margin-bottom:7px !important;
}
.footer-bottom{
  font-size:10.5px !important;
  line-height:1.65 !important;
  letter-spacing:.06em !important;
}

@media (max-width:768px){
  .company-registration h4{
    font-size:15px !important;
    line-height:1.34 !important;
    margin-bottom:10px !important;
  }
  .company-registration p{
    font-size:12.5px !important;
    line-height:1.72 !important;
    margin-bottom:5px !important;
  }
  .footer-bottom{
    font-size:9px !important;
    line-height:1.6 !important;
  }
}

@media (max-width:420px){
  .company-registration h4{font-size:13.5px !important;}
  .company-registration p{font-size:11.5px !important;}
  .footer-bottom{font-size:8.5px !important;}
}

/* =========================================================
   FOOTER / COMPANY REGISTRATION — SMALLER LUXURY REFINEMENT
   User request: slightly smaller, more premium feel
   ========================================================= */
.footer-grid{
  gap:40px !important;
}
.footer-logo{
  width:150px !important;
  margin-bottom:16px !important;
}
.footer p{
  font-size:13.5px !important;
  line-height:1.78 !important;
  letter-spacing:.018em !important;
  max-width:430px !important;
  text-transform:uppercase !important;
}
.footer h4{
  font-size:14px !important;
  line-height:1.25 !important;
  letter-spacing:.11em !important;
  margin-bottom:12px !important;
  text-transform:uppercase !important;
}
.footer a{
  font-size:13px !important;
  line-height:1.7 !important;
  letter-spacing:.035em !important;
  margin:7px 0 !important;
  text-transform:uppercase !important;
}
.company-registration{
  padding-top:28px !important;
  gap:24px !important;
}
.company-registration h4{
  font-size:18px !important;
  line-height:1.3 !important;
  letter-spacing:.02em !important;
  margin-bottom:12px !important;
  text-transform:uppercase !important;
}
.company-registration p{
  font-size:14px !important;
  line-height:1.72 !important;
  letter-spacing:.01em !important;
  margin-bottom:6px !important;
  text-transform:uppercase !important;
}
.footer-bottom{
  font-size:10px !important;
  line-height:1.6 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

@media (max-width:768px){
  .footer-grid{gap:24px 16px !important;}
  .footer-logo{width:136px !important; margin-bottom:14px !important;}
  .footer p{font-size:11.5px !important; line-height:1.72 !important; max-width:100% !important;}
  .footer h4{font-size:11.5px !important; margin-bottom:9px !important;}
  .footer a{font-size:11px !important; line-height:1.65 !important; margin:6px 0 !important;}
  .company-registration{padding-top:22px !important; gap:18px !important;}
  .company-registration h4{font-size:14px !important; line-height:1.3 !important; margin-bottom:9px !important;}
  .company-registration p{font-size:11.5px !important; line-height:1.68 !important; margin-bottom:5px !important;}
  .footer-bottom{font-size:8.5px !important; line-height:1.55 !important;}
}

@media (max-width:420px){
  .footer p{font-size:10.8px !important;}
  .footer h4{font-size:10.8px !important;}
  .footer a{font-size:10.5px !important;}
  .company-registration h4{font-size:12.8px !important;}
  .company-registration p{font-size:10.8px !important;}
  .footer-bottom{font-size:8px !important;}
}

/* =========================================================
   FOOTER / COMPANY REGISTRATION — EXTRA LUXURY SCALE
   Slightly smaller with premium spacing
   ========================================================= */
.footer-grid{
  gap:46px !important;
}
.footer-logo{
  width:138px !important;
  margin-bottom:14px !important;
}
.footer p{
  font-size:12.5px !important;
  line-height:1.85 !important;
  letter-spacing:.035em !important;
  max-width:410px !important;
}
.footer h4{
  font-size:12.5px !important;
  letter-spacing:.14em !important;
  margin-bottom:13px !important;
}
.footer a{
  font-size:12px !important;
  line-height:1.75 !important;
  letter-spacing:.055em !important;
  margin:6px 0 !important;
}
.company-registration{
  padding-top:26px !important;
  gap:22px !important;
}
.company-registration h4{
  font-size:16px !important;
  line-height:1.35 !important;
  letter-spacing:.035em !important;
  margin-bottom:11px !important;
}
.company-registration p{
  font-size:12.8px !important;
  line-height:1.8 !important;
  letter-spacing:.025em !important;
  margin-bottom:5px !important;
}
.footer-bottom{
  font-size:9px !important;
  letter-spacing:.1em !important;
}

@media(max-width:768px){
 .footer-logo{width:126px !important;}
 .footer p{font-size:10.8px !important;}
 .footer h4{font-size:10.5px !important;}
 .footer a{font-size:10.5px !important;}
 .company-registration h4{font-size:12.5px !important;}
 .company-registration p{font-size:10.5px !important;}
 .footer-bottom{font-size:8px !important;}
}

/* FOOTER EXTRA LUXURY SMALL SCALE */
.footer-logo{
  width:138px !important;
  margin-bottom:14px !important;
}
.footer p{
  font-size:12.5px !important;
  line-height:1.75 !important;
  letter-spacing:.025em !important;
}
.footer h4{
  font-size:13px !important;
  letter-spacing:.12em !important;
  margin-bottom:10px !important;
}
.footer a{
  font-size:12px !important;
  line-height:1.65 !important;
  letter-spacing:.04em !important;
}
.company-registration{
  padding-top:24px !important;
}
.company-registration h4{
  font-size:16px !important;
  letter-spacing:.03em !important;
  margin-bottom:10px !important;
}
.company-registration p{
  font-size:12.8px !important;
  line-height:1.7 !important;
  letter-spacing:.02em !important;
  margin-bottom:5px !important;
}
.footer-bottom{
  font-size:9.5px !important;
  letter-spacing:.09em !important;
}