/*
Theme Name: MAG GatePays Three Line Compact
Theme URI: https://maggatepays.com/
Author: MAG Payment Gateways
Description: A responsive single-page WordPress theme for MAG Payment Gateways.
Version: 1.9.0
Text Domain: mag-payment-gateways
*/

:root{
  --bg:#05070c;--bg2:#090d16;--panel:#0c111c;--panel2:#111827;--text:#f7f9ff;--muted:#9ca7ba;
  --blue:#1687ff;--cyan:#24e0c6;--violet:#8a63ff;--line:rgba(255,255,255,.10);--soft:rgba(255,255,255,.055);
  --success:#57d887;--danger:#ff7d8d;--max:1240px;--radius:28px;--ease:cubic-bezier(.2,.8,.2,1)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;overflow-x:hidden}body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{color:inherit}img,svg,canvas{display:block;max-width:100%}.wrap{width:min(calc(100% - 36px),var(--max));margin:auto}.page{display:none}.page.active{display:block}.section{padding:116px 0}.section-sm{padding:76px 0}.dark-grid{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:72px 72px}.eyebrow{display:inline-flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;font-weight:800;color:#c7d2e4}.eyebrow:before{content:"";width:28px;height:1px;background:linear-gradient(90deg,var(--blue),var(--cyan))}h1,h2,h3,h4{font-family:"Manrope",sans-serif;margin:0;letter-spacing:-.05em;line-height:1.02}h1{font-size:clamp(3.35rem,8vw,8.2rem);font-weight:500}h2{font-size:clamp(2.45rem,5.8vw,5.65rem);font-weight:500}h3{font-size:clamp(1.3rem,2vw,1.7rem)}p{line-height:1.7}.lead{font-size:clamp(1.05rem,1.7vw,1.28rem);color:#c1cad9;max-width:720px}.gradient-text{background:linear-gradient(90deg,var(--blue),#4db8ff 48%,var(--cyan));-webkit-background-clip:text;background-clip:text;color:transparent}.violet-text{background:linear-gradient(90deg,#a27aff,#6947ff);-webkit-background-clip:text;background-clip:text;color:transparent}.muted{color:var(--muted)}
.header{position:fixed;inset:0 0 auto;z-index:100;padding:16px 0;transition:.35s}.header.scrolled{background:rgba(5,7,12,.78);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.nav{display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;min-width:max-content}.brand-mark{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--cyan));box-shadow:0 0 32px rgba(22,135,255,.25)}.brand-mark svg{width:28px;height:28px}.brand-name{font:800 1.08rem Manrope;letter-spacing:.08em}.brand-name span{background:linear-gradient(90deg,var(--blue),var(--cyan));-webkit-background-clip:text;color:transparent}.navlinks{display:flex;align-items:center;gap:28px}.navlinks a{font-size:.86rem;font-weight:700;color:#c1c9d8;transition:.25s}.navlinks a:hover,.navlinks a.active{color:#fff}.nav-actions{display:flex;align-items:center;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;padding:14px 21px;border:1px solid transparent;font-weight:800;cursor:pointer;transition:.3s var(--ease);white-space:nowrap}.btn-primary{background:linear-gradient(90deg,var(--blue),var(--cyan));color:#031016}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 45px rgba(22,135,255,.24)}.btn-outline{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.02)}.btn-outline:hover{background:#fff;color:#070a10}.menu-btn{display:none;width:46px;height:46px;border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:50%;font-size:1.25rem}
.hero{min-height:100vh;padding:148px 0 72px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 26%,rgba(22,135,255,.15),transparent 30%),radial-gradient(circle at 25% 80%,rgba(36,224,198,.08),transparent 28%);pointer-events:none}.hero-grid{display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:16px;position:relative;z-index:2}.hero-copy{position:relative;z-index:4}.hero h1{max-width:760px}.hero-copy .lead{margin:26px 0 0;max-width:610px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}.hero-points{display:flex;gap:24px;flex-wrap:wrap;margin-top:30px;color:#b9c4d6;font-size:.88rem}.hero-points span:before{content:"✓";color:var(--cyan);margin-right:8px}.earth-stage{position:relative;height:720px;margin-right:-110px}.earth-stage canvas{width:100%;height:100%;filter:drop-shadow(0 35px 70px rgba(0,0,0,.55))}.earth-glow{position:absolute;inset:10% 5% 5% 5%;background:radial-gradient(circle,rgba(22,135,255,.13),transparent 60%);filter:blur(30px);pointer-events:none}.transaction-badge{position:absolute;z-index:5;display:flex;align-items:center;gap:11px;padding:12px 15px;border:1px solid rgba(255,255,255,.16);background:rgba(8,13,22,.76);backdrop-filter:blur(15px);border-radius:999px;box-shadow:0 18px 50px rgba(0,0,0,.4);animation:float 5s ease-in-out infinite}.transaction-badge b{font-size:.9rem}.transaction-badge small{display:block;color:#8d99ac;font-size:.7rem}.tb1{left:16%;top:26%}.tb2{right:11%;top:48%;animation-delay:-2s}.tb3{left:24%;bottom:16%;animation-delay:-3.4s}.pulse-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--cyan)}@keyframes float{50%{transform:translateY(-12px)}}
.metric-strip{border-block:1px solid var(--line);background:rgba(255,255,255,.025)}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr)}.metric{padding:25px 26px;border-right:1px solid var(--line)}.metric:last-child{border-right:0}.metric strong{display:block;font:700 2rem Manrope;letter-spacing:-.05em}.metric span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.split{display:grid;grid-template-columns:1fr .78fr;gap:48px;align-items:end;margin-bottom:54px}.split p{margin:0}.feature-stack{display:grid;gap:22px}.feature-panel{min-height:650px;border:1px solid var(--line);border-radius:34px;overflow:hidden;display:grid;grid-template-columns:.88fr 1.12fr;background:linear-gradient(145deg,#080b12,#0e1420);position:relative}.feature-panel:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.025));pointer-events:none}.feature-copy{padding:64px 50px;display:flex;flex-direction:column;justify-content:center}.feature-no{font:800 clamp(5rem,10vw,8rem) Manrope;color:rgba(255,255,255,.08);line-height:.8;margin-bottom:40px}.feature-copy h3{font-size:clamp(2rem,4.2vw,4.35rem);margin-bottom:22px}.feature-copy p{font-size:1.08rem;color:#b8c2d1;max-width:510px}.feature-visual{display:flex;align-items:center;justify-content:center;padding:36px 30px 30px;position:relative}.feature-visual:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(72,88,118,.22),transparent 62%)}
.device-scene{width:100%;max-width:640px;position:relative;perspective:1100px}.tablet{border:2px solid rgba(255,255,255,.38);border-radius:30px;padding:15px;background:#080b10;box-shadow:0 38px 80px rgba(0,0,0,.52);transform:rotateY(-4deg)}.screen{border-radius:19px;overflow:hidden;background:#f8faff;color:#10141c;min-height:390px}.screen.dark{background:#090d16;color:#f7f9ff}.dash-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid rgba(0,0,0,.08)}.screen.dark .dash-head{border-color:var(--line)}.dash-title{font:800 1rem Manrope}.dash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:18px}.dash-kpi{border:1px solid rgba(12,22,40,.09);border-radius:14px;padding:13px;background:#fff}.screen.dark .dash-kpi{background:rgba(255,255,255,.045);border-color:var(--line)}.dash-kpi b{font:800 1.26rem Manrope;display:block}.dash-kpi small{font-size:.66rem;color:#748096}.status-good{color:#159a55}.chart-box{height:125px;margin:0 18px;border-radius:16px;background:linear-gradient(180deg,rgba(22,135,255,.12),transparent);position:relative;overflow:hidden}.chart-box svg{width:100%;height:100%}.table{padding:14px 18px 18px;display:grid;gap:7px}.table-row{display:grid;grid-template-columns:1.2fr .8fr .7fr;gap:10px;padding:9px 10px;border-radius:10px;background:rgba(0,0,0,.035);font-size:.72rem}.screen.dark .table-row{background:rgba(255,255,255,.045)}.status{justify-self:end;padding:3px 8px;border-radius:99px;background:rgba(55,199,107,.12);color:#42c878}.phone{position:absolute;width:28%;left:-7%;bottom:-6%;border:2px solid rgba(255,255,255,.5);border-radius:32px;padding:9px;background:#070a10;box-shadow:0 28px 55px rgba(0,0,0,.55)}.phone-screen{min-height:330px;border-radius:22px;background:#0c111b;padding:18px 14px}.phone-top{height:5px;width:48px;border-radius:9px;background:#242b38;margin:0 auto 18px}.shield{width:72px;height:72px;margin:14px auto;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#8b67ff,rgba(138,99,255,.1));font-size:2rem}.phone-card{padding:10px;border-radius:11px;background:rgba(255,255,255,.06);margin-top:8px;font-size:.69rem}.phone-card b{display:block}.phone-card span{color:#8b98aa}
.icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px}.icon-box{border:1px solid var(--line);border-radius:15px;padding:18px;text-align:center;background:rgba(255,255,255,.035)}.icon-box i{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;margin:0 auto 11px;background:rgba(138,99,255,.12);color:#a986ff;font-style:normal;font-size:1.25rem}.icon-box b{display:block;font-size:.78rem}.icon-box small{display:block;color:#8e99ab;margin-top:4px;font-size:.62rem}
.industries-section{overflow:hidden}.industry-marquee{display:flex;width:max-content;gap:20px;animation:scroll 34s linear infinite}.industry-marquee:hover{animation-play-state:paused}@keyframes scroll{to{transform:translateX(-50%)}}.industry-card{width:270px;min-height:330px;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,#0d121d,#070a10);padding:28px;display:flex;flex-direction:column;justify-content:space-between}.industry-icon{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#080b12;font-size:2rem;box-shadow:0 15px 36px rgba(0,0,0,.35)}.industry-card h3{font-size:1.4rem}.industry-card p{color:var(--muted);font-size:.9rem}.industry-card a{font-weight:800;color:#c7d5ec}.industry-card a span{color:var(--cyan)}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.step{padding:28px;border-top:1px solid var(--line)}.step strong{display:block;font:800 2rem Manrope;color:var(--blue);margin-bottom:40px}.step h3{font-size:1.25rem;margin-bottom:12px}.step p{font-size:.9rem;color:var(--muted)}
.testimonials{position:relative}.testimonial-viewport{overflow:hidden;border-radius:32px}.testimonial-track{display:flex;transition:transform .65s var(--ease);will-change:transform}.testimonial-slide{min-width:100%;padding:2px}.quote-card{border:1px solid var(--line);border-radius:30px;padding:46px;background:linear-gradient(145deg,#0d121e,#070a10);position:relative;overflow:hidden;min-height:430px;display:flex;flex-direction:column;justify-content:flex-end}.quote-card:before{content:"“";position:absolute;top:18px;right:30px;font:700 10rem Georgia;color:rgba(255,255,255,.05)}.stars{letter-spacing:.16em;color:#fff}.quote{font-size:clamp(1.35rem,2.7vw,2.5rem);line-height:1.35;max-width:920px}.person{display:flex;align-items:center;gap:12px;margin-top:30px}.avatar{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--blue),var(--violet));font-weight:800;box-shadow:0 10px 30px rgba(22,135,255,.18)}.person small{display:block;color:var(--muted)}.testimonial-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px}.testimonial-arrows{display:flex;gap:10px}.testimonial-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer;transition:.25s}.testimonial-arrow:hover{background:#fff;color:#070a10}.testimonial-dots{display:flex;gap:9px;align-items:center}.testimonial-dot{width:9px;height:9px;border:0;border-radius:50%;background:rgba(255,255,255,.25);padding:0;cursor:pointer;transition:.25s}.testimonial-dot.active{width:28px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.price-card{border:1px solid var(--line);border-radius:30px;padding:34px;background:#0c111a;position:relative}.price-card.featured{background:linear-gradient(145deg,rgba(22,135,255,.22),rgba(36,224,198,.08));border-color:rgba(52,171,255,.5);transform:translateY(-12px)}.tag{display:inline-block;padding:7px 10px;border-radius:999px;background:rgba(36,224,198,.12);color:var(--cyan);font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.price{font:700 clamp(2.9rem,5vw,5rem) Manrope;letter-spacing:-.07em;margin:24px 0 2px}.price small{font-size:1rem;color:var(--muted);letter-spacing:0}.price-list{display:grid;gap:12px;padding:24px 0 28px}.price-list span{color:#c0cad8}.price-list span:before{content:"✓";color:var(--cyan);margin-right:10px}
.faq{max-width:930px;margin:auto}.faq-item{border-top:1px solid var(--line)}.faq-btn{width:100%;display:flex;justify-content:space-between;gap:20px;padding:24px 0;background:transparent;border:0;text-align:left;font-weight:800;font-size:1.05rem;cursor:pointer}.faq-answer{max-height:0;overflow:hidden;color:var(--muted);transition:max-height .4s ease}.faq-item.open .faq-answer{max-height:240px}.faq-answer p{margin:0 0 24px}.faq-btn span:last-child{transition:.3s}.faq-item.open .faq-btn span:last-child{transform:rotate(45deg)}
.cta{border:1px solid var(--line);border-radius:38px;padding:74px 60px;background:radial-gradient(circle at 85% 20%,rgba(36,224,198,.14),transparent 30%),radial-gradient(circle at 15% 90%,rgba(22,135,255,.18),transparent 35%),#0b1019;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}.cta h2{font-size:clamp(2.5rem,5vw,5rem)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field{display:grid;gap:8px}.field.full{grid-column:1/-1}.field label{font-size:.78rem;color:#aeb8c8;font-weight:700}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;border-radius:15px;padding:15px 16px;outline:none}.field option{color:#111}.field textarea{min-height:130px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(22,135,255,.12)}.form-note{font-size:.76rem;color:var(--muted)}
.footer{padding:75px 0 30px;border-top:1px solid var(--line)}.footer-grid{display:grid;grid-template-columns:1.15fr repeat(3,.7fr);gap:44px}.footer h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.16em;margin-bottom:19px}.footer-links{display:grid;gap:12px;color:#9ea9ba}.footer-bottom{border-top:1px solid var(--line);margin-top:55px;padding-top:24px;display:flex;justify-content:space-between;gap:20px;color:#7f8a9b;font-size:.8rem}
.listings-grid,.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-card,.listing-card{border:1px solid var(--line);border-radius:26px;background:#0b1019;padding:28px}.service-card i,.listing-card i{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(22,135,255,.18),rgba(36,224,198,.12));font-style:normal;font-size:1.35rem}.service-card h3,.listing-card h3{margin-top:36px}.service-card p,.listing-card p{color:var(--muted);font-size:.92rem}.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}.filter-btn{border:1px solid var(--line);border-radius:999px;background:transparent;padding:10px 15px;color:#aeb8c8;cursor:pointer}.filter-btn.active{background:#fff;color:#05070c}.hidden-card{display:none}.page-hero{padding:170px 0 90px;border-bottom:1px solid var(--line)}.page-hero h1{font-size:clamp(3.3rem,7vw,7rem);max-width:950px}.page-hero p{margin-top:25px}.reveal{opacity:1;transform:none}.js .reveal{opacity:0;transform:translateY(36px);transition:opacity .85s var(--ease),transform .85s var(--ease)}.js .reveal.in{opacity:1;transform:none}
@media(max-width:980px){.navlinks{display:none}.menu-btn{display:block}.nav-actions .btn{display:none}.mobile-menu{position:fixed;inset:0;background:rgba(5,7,12,.98);z-index:90;padding:110px 26px 35px;display:none}.mobile-menu.open{display:block}.mobile-menu a{display:block;font:600 clamp(2rem,8vw,4rem) Manrope;padding:12px 0;border-bottom:1px solid var(--line)}.hero-grid{grid-template-columns:1fr}.earth-stage{height:620px;margin:-80px -110px 0 -80px}.hero-copy{padding-top:20px}.metric-grid{grid-template-columns:repeat(2,1fr)}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.split{grid-template-columns:1fr}.feature-panel{grid-template-columns:1fr}.feature-copy{padding:48px 34px 20px}.feature-visual{padding:24px 18px 48px}.process-grid{grid-template-columns:repeat(2,1fr)}.testimonials{grid-template-columns:1fr}.pricing-grid,.listings-grid,.services-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1.2fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/4}.cta{grid-template-columns:1fr}.cta .btn{justify-self:start}}
@media(max-width:640px){.wrap{width:min(calc(100% - 28px),var(--max))}.section{padding:82px 0}.section-sm{padding:58px 0}.header{padding:12px 0}.brand-name{font-size:.92rem}.brand-mark{width:38px;height:38px}.hero{padding:120px 0 46px}.hero h1{font-size:clamp(3rem,14vw,5.2rem)}.hero-copy .lead{font-size:1rem}.earth-stage{height:500px;margin:-45px -95px -35px -80px}.transaction-badge{padding:9px 11px}.transaction-badge b{font-size:.74rem}.transaction-badge small{font-size:.58rem}.tb1{left:12%;top:25%}.tb2{right:7%;top:50%}.tb3{display:none}.metric{padding:20px 14px}.metric strong{font-size:1.55rem}.feature-panel{min-height:auto;border-radius:24px}.feature-copy{padding:38px 24px 18px}.feature-no{font-size:5rem;margin-bottom:24px}.feature-copy h3{font-size:2.35rem}.feature-copy p{font-size:.96rem}.feature-visual{padding:18px 8px 38px}.tablet{padding:8px;border-radius:20px;transform:none}.screen{min-height:300px}.dash-grid{grid-template-columns:repeat(2,1fr);padding:10px}.dash-kpi{padding:9px}.dash-kpi:nth-child(n+3){display:none}.chart-box{height:90px;margin:0 10px}.table{padding:8px 10px 12px}.table-row{font-size:.58rem}.phone{width:32%;left:-1%;bottom:-5%;padding:6px;border-radius:22px}.phone-screen{min-height:225px;padding:10px 8px;border-radius:16px}.phone-card{font-size:.54rem}.shield{width:50px;height:50px;font-size:1.25rem}.icon-grid{grid-template-columns:repeat(2,1fr);padding:10px}.icon-box{padding:11px}.industry-card{width:230px;min-height:290px}.process-grid,.pricing-grid,.listings-grid,.services-grid{grid-template-columns:1fr}.price-card.featured{transform:none}.quote-card{padding:30px}.quote-card.large{min-height:420px}.cta{padding:48px 26px;border-radius:28px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid>div:last-child{grid-column:auto}.footer-bottom{flex-direction:column}.page-hero{padding:135px 0 70px}}
/* Home feature sequence: one panel is visible at a time, so completed states never linger. */
.js .page[data-page="home"] .feature-stack.swap-enabled{position:relative;display:block;height:330vh}.js .feature-stack.swap-enabled .feature-stage{position:sticky;top:calc(50vh - 325px);height:650px}.js .feature-stack.swap-enabled .feature-panel{position:absolute;inset:0;margin:0;display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none}.js .feature-stack.swap-enabled .feature-panel.swap-active{display:grid!important;opacity:1!important;visibility:visible!important;pointer-events:auto;animation:panelSwapIn .62s var(--ease) both}.swap-progress{position:absolute;z-index:5;left:50px;bottom:34px;display:flex;align-items:center;gap:9px}.swap-progress button{width:32px;height:4px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.28);cursor:pointer;transition:.3s var(--ease)}.swap-progress button.active{width:64px;background:var(--cyan)}@keyframes panelSwapIn{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}.price-list a{color:#c0cad8}.price-list a:hover{color:var(--cyan)}
@media(max-width:980px){.js .page[data-page="home"] .feature-stack.swap-enabled{height:auto;display:grid;gap:22px}.js .feature-stack.swap-enabled .feature-stage{position:static;height:auto;display:contents}.js .feature-stack.swap-enabled .feature-panel{position:relative;display:grid!important;opacity:1!important;visibility:visible!important;pointer-events:auto}.swap-progress{display:none}}

/* Themed industry icon showcase under "Who we serve" */
.serve-showcase{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:16px;
  margin:10px 0 38px;
}
.serve-item{
  min-height:210px;
  padding:24px 16px 20px;
  border:1px solid var(--line);
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 15%,rgba(22,135,255,.14),transparent 42%),
    linear-gradient(145deg,#0d121d,#070a10);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
  overflow:hidden;
  transition:.35s var(--ease);
}
.serve-item:before{
  content:"";
  position:absolute;
  inset:auto 12% -45% 12%;
  height:120px;
  background:radial-gradient(circle,rgba(36,224,198,.14),transparent 68%);
  filter:blur(18px);
}
.serve-item:hover{
  transform:translateY(-7px);
  border-color:rgba(36,224,198,.45);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.serve-icon{
  width:92px;
  height:92px;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin-bottom:20px;
  background:linear-gradient(145deg,#f8fbff,#d9e7f7);
  color:#070a10;
  box-shadow:0 16px 38px rgba(0,0,0,.35),0 0 0 6px rgba(255,255,255,.035);
  position:relative;
  z-index:1;
}
.serve-icon svg{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.serve-item h3{
  font-size:.96rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  position:relative;
  z-index:1;
}
.serve-item p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:.78rem;
  line-height:1.5;
  position:relative;
  z-index:1;
}
@media(max-width:1100px){.serve-showcase{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.serve-showcase{grid-template-columns:repeat(2,1fr);gap:12px}.serve-item{min-height:180px;padding:20px 12px}.serve-icon{width:76px;height:76px}.serve-icon svg{width:40px;height:40px}.serve-item h3{font-size:.8rem}}


/* Theme consistency for Why Mag Payment Gateways visuals */
.page[data-page="home"] .feature-stack .screen,
.page[data-page="home"] .feature-stack .screen.dark{
  background:linear-gradient(145deg,#0b111c,#070a11);
  color:#f7f9ff;
  border:1px solid rgba(255,255,255,.07);
}
.page[data-page="home"] .feature-stack .dash-head{border-color:rgba(255,255,255,.08)}
.page[data-page="home"] .feature-stack .dash-kpi,
.page[data-page="home"] .feature-stack .icon-box{
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));
  border-color:rgba(255,255,255,.08);
  color:#f7f9ff;
}
.page[data-page="home"] .feature-stack .table-row{background:rgba(255,255,255,.045);color:#dce5f1}
.page[data-page="home"] .feature-stack .dash-kpi small,
.page[data-page="home"] .feature-stack .icon-box small{color:#8f9caf}
.page[data-page="home"] .feature-stack .feature-visual{
  background:radial-gradient(circle at 50% 45%,rgba(22,135,255,.11),transparent 56%);
}

/* How it works carousel */
.how-carousel{position:relative;border:1px solid var(--line);border-radius:34px;overflow:hidden;background:linear-gradient(145deg,#0d1420,#070a11);box-shadow:0 28px 70px rgba(0,0,0,.28)}
.how-track{position:relative;min-height:430px}
.how-slide{position:absolute;inset:0;display:grid;grid-template-columns:.36fr 1fr .4fr;align-items:center;gap:30px;padding:62px 70px;opacity:0;visibility:hidden;transform:translateX(45px);transition:opacity .48s var(--ease),transform .48s var(--ease),visibility .48s}
.how-slide.active{opacity:1;visibility:visible;transform:translateX(0)}
.how-number{font:800 clamp(5rem,11vw,10rem) Manrope;color:rgba(255,255,255,.07);line-height:.8}
.how-slide-copy{max-width:660px}.how-slide-copy h3{font-size:clamp(2rem,4vw,4rem);margin:18px 0}.how-slide-copy p{color:#aab6c7;font-size:1.05rem;max-width:620px}
.how-icon{width:140px;height:140px;border-radius:34px;display:grid;place-items:center;justify-self:end;font:700 4rem Manrope;color:#fff;background:linear-gradient(145deg,rgba(22,135,255,.85),rgba(111,83,255,.65));box-shadow:0 22px 55px rgba(22,135,255,.25),inset 0 1px rgba(255,255,255,.28)}
.how-controls{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-top:1px solid var(--line);background:rgba(255,255,255,.025)}
.how-arrow{width:48px;height:48px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.04);color:#fff;font-size:1.2rem;cursor:pointer;transition:.25s var(--ease)}.how-arrow:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
.how-dots{display:flex;gap:9px}.how-dots button{width:30px;height:4px;border:0;border-radius:99px;background:rgba(255,255,255,.22);cursor:pointer;transition:.3s var(--ease)}.how-dots button.active{width:62px;background:var(--cyan)}
@media(max-width:760px){.how-track{min-height:500px}.how-slide{grid-template-columns:1fr;padding:42px 28px;gap:20px}.how-number{font-size:5rem}.how-icon{width:86px;height:86px;border-radius:24px;font-size:2.5rem;justify-self:start}.how-slide-copy h3{font-size:2.2rem}.how-controls{padding:16px 18px}}


/* Merchant payment proof carousel */
.proof-section{overflow:hidden}.proof-carousel{position:relative;margin-top:38px}.proof-viewport{overflow:hidden;border-radius:32px}.proof-track{display:flex;transition:transform .65s var(--ease);will-change:transform}.proof-slide{min-width:100%;padding:2px}.proof-frame{position:relative;border:1px solid rgba(255,255,255,.12);border-radius:30px;padding:18px;background:radial-gradient(circle at top right,rgba(22,135,255,.18),transparent 34%),linear-gradient(145deg,#0c1421,#06090f);box-shadow:0 30px 90px rgba(0,0,0,.42);overflow:hidden}.proof-frame:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 28%,transparent 72%,rgba(82,210,255,.05))}.proof-frame img{display:block;width:100%;height:auto;max-height:720px;object-fit:contain;border-radius:20px;background:#0a0f18;filter:contrast(1.03) saturate(.95)}.proof-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:22px}.proof-arrows{display:flex;gap:10px}.proof-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;transition:.25s}.proof-arrow:hover{background:#fff;color:#070a10}.proof-dots{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.proof-dot{width:9px;height:9px;border:0;border-radius:50%;background:rgba(255,255,255,.25);padding:0;cursor:pointer;transition:.25s}.proof-dot.active{width:28px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--cyan))}@media(max-width:700px){.proof-frame{padding:8px;border-radius:22px}.proof-frame img{border-radius:16px;max-height:540px}.proof-controls{align-items:flex-end}.proof-dots{max-width:230px}}


/* Why MAG GatePays carousel */
.why-carousel{position:relative;margin-top:42px;touch-action:pan-y;user-select:none;cursor:grab}
.why-carousel.is-dragging{cursor:grabbing}
.why-viewport{overflow:hidden;border-radius:34px}
.why-track{display:flex;transition:transform .72s cubic-bezier(.22,1,.36,1);will-change:transform}
.why-track .feature-panel{min-width:100%;margin:0;opacity:.42;transform:scale(.965) translateY(14px);transition:opacity .55s ease,transform .72s cubic-bezier(.22,1,.36,1);pointer-events:none}
.why-track .feature-panel.is-active{opacity:1;transform:none;pointer-events:auto}
.why-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:24px}
.why-arrows{display:flex;gap:10px}
.why-arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;font-size:22px;transition:.25s}
.why-arrow:hover{background:#fff;color:#070a10;transform:translateY(-2px)}
.why-dots{display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:center}
.why-dot{width:9px;height:9px;border:0;border-radius:50%;background:rgba(255,255,255,.25);padding:0;cursor:pointer;transition:.25s}
.why-dot.active{width:30px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--cyan))}
.why-track .feature-panel.is-active .feature-copy>*{animation:whyTextIn .72s both}
.why-track .feature-panel.is-active .feature-copy h3{animation-delay:.08s}
.why-track .feature-panel.is-active .feature-copy p{animation-delay:.16s}
.why-track .feature-panel.is-active .feature-visual{animation:whyVisualIn .8s .08s both cubic-bezier(.22,1,.36,1)}
@keyframes whyTextIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes whyVisualIn{from{opacity:.45;transform:translateX(34px) scale(.97)}to{opacity:1;transform:none}}
@media(max-width:700px){.why-viewport{border-radius:24px}.why-controls{align-items:flex-end}.why-dots{max-width:220px}.why-arrow{width:44px;height:44px}}
@media(prefers-reduced-motion:reduce){.why-track,.why-track .feature-panel{transition:none!important}.why-track .feature-panel.is-active .feature-copy>*,.why-track .feature-panel.is-active .feature-visual{animation:none!important}}

.hero-trust-line{
display:flex;
width:100%;
justify-content:center;
text-align:center;
position:relative;
top:-20px;
margin-bottom:10px;
}

.floating-contact{
position:fixed;
right:20px;
bottom:20px;
display:flex;
flex-direction:column;
gap:12px;
z-index:9999;
}
.floating-contact a{
display:flex;
align-items:center;
justify-content:center;
width:58px;
height:58px;
border-radius:50%;
color:#fff;
font:700 14px Arial,sans-serif;
text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,.3);
}
.floating-contact .wa{background:#25D366;}
.floating-contact .tg{background:#229ED9;}

.floating-contact a i{
font-size:31px;
line-height:1;
}
.floating-contact a{
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.floating-contact a:hover{
transform:translateY(-3px) scale(1.06);
box-shadow:0 14px 30px rgba(0,0,0,.35);
filter:brightness(1.04);
}

.floating-contact a svg{
width:30px;
height:30px;
display:block;
color:#fff;
fill:currentColor;
}

/* Enhanced carousel motion, swipe and scroll interactions */
.how-carousel,.proof-carousel,.testimonials{touch-action:pan-y;user-select:none}
.proof-viewport,.testimonial-viewport{cursor:grab;scroll-behavior:smooth}
.proof-viewport.dragging,.testimonial-viewport.dragging{cursor:grabbing}
.proof-track,.testimonial-track{transition:transform .72s cubic-bezier(.22,1,.36,1)}
.proof-slide,.testimonial-slide{opacity:.42;transform:scale(.965);transition:opacity .55s ease,transform .72s cubic-bezier(.22,1,.36,1)}
.proof-slide.is-active,.testimonial-slide.is-active{opacity:1;transform:scale(1)}
.proof-slide.is-active .proof-frame{animation:carouselLift .72s cubic-bezier(.22,1,.36,1)}
.testimonial-slide.is-active .quote-card{animation:carouselLift .72s cubic-bezier(.22,1,.36,1)}
.testimonial-slide.is-active .stars{animation:fadeRise .5s .08s both}
.testimonial-slide.is-active .quote{animation:fadeRise .58s .15s both}
.testimonial-slide.is-active .person{animation:fadeRise .58s .24s both}
.how-slide .how-number,.how-slide .how-slide-copy,.how-slide .how-icon{opacity:0;transform:translateY(22px);transition:opacity .5s ease,transform .65s cubic-bezier(.22,1,.36,1)}
.how-slide.active .how-number{opacity:1;transform:none;transition-delay:.04s}
.how-slide.active .how-slide-copy{opacity:1;transform:none;transition-delay:.12s}
.how-slide.active .how-icon{opacity:1;transform:none;transition-delay:.22s}
.how-carousel.is-dragging{cursor:grabbing}
.how-carousel{cursor:grab}
@keyframes fadeRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes carouselLift{from{opacity:.65;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.proof-track,.testimonial-track,.proof-slide,.testimonial-slide,.how-slide,.how-slide *{transition:none!important;animation:none!important}}

/* Simplified Industries We Support: icon + one-word heading, no cards */
.serve-showcase{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:34px 22px;
  margin:18px 0 42px;
}
.serve-item{
  min-height:0;
  padding:8px;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  overflow:visible;
}
.serve-item:before{display:none}
.serve-item:hover{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:none;
}
.serve-icon{
  width:112px;
  height:112px;
  margin-bottom:18px;
  border-radius:50%;
}
.serve-icon svg{width:54px;height:54px}
.serve-item h3{
  font-size:1rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.serve-item p{display:none!important}
@media(max-width:1100px){.serve-showcase{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){
  .serve-showcase{grid-template-columns:repeat(2,1fr);gap:30px 14px}
  .serve-item{padding:4px}
  .serve-icon{width:88px;height:88px;margin-bottom:14px}
  .serve-icon svg{width:43px;height:43px}
  .serve-item h3{font-size:.82rem}
}

/* Mobile feature-card repair: keep the dashboard visual inside the viewport. */
  @media (max-width: 700px) {
    .why-carousel { margin-top: 24px; }
    .why-viewport { overflow: hidden; border-radius: 22px; }
    .why-track .feature-panel { min-height: 0; grid-template-columns: 1fr; border-radius: 22px; }
    .why-track .feature-copy { padding: 32px 24px 14px; }
    .why-track .feature-no { margin-bottom: 16px; font-size: 4.4rem; }
    .why-track .feature-copy h3 { font-size: clamp(1.75rem, 8vw, 2.25rem); margin-bottom: 14px; }
    .why-track .feature-copy p { margin-bottom: 0; font-size: .95rem; }
    .why-track .feature-visual { min-width: 0; overflow: hidden; padding: 12px 12px 28px; }
    .why-track .device-scene { width: 100%; max-width: 100%; min-width: 0; perspective: none; }
    .why-track .tablet { width: 100%; transform: none; padding: 7px; border-radius: 20px; }
    .why-track .screen { min-height: 245px; }
    .why-track .phone { width: 30%; left: 5%; bottom: -2%; padding: 6px; border-radius: 21px; }
    .why-track .phone-screen { min-height: 190px; padding: 10px 8px; border-radius: 15px; }
    .why-track .phone-card { margin-top: 6px; font-size: .5rem; }
    .why-track .shield { width: 44px; height: 44px; margin: 9px auto; font-size: 1.1rem; }
    .why-controls { margin-top: 14px; padding: 0 2px; }
    .why-arrow { width: 40px; height: 40px; font-size: 18px; }

    /* Lead-form layout: one comfortable, touch-friendly column on mobile. */
    #merchant-enquiry .feature-panel,
    .page[data-page="contact"] .feature-panel { border-radius: 22px; }
    #merchant-enquiry .feature-visual,
    .page[data-page="contact"] .feature-visual { width: 100% !important; min-width: 0; padding: 24px 16px !important; }
    #homeLeadForm,
    #leadForm { width: 100% !important; max-width: none !important; grid-template-columns: 1fr !important; gap: 13px; }
    #homeLeadForm .field,
    #leadForm .field,
    #homeLeadForm .field.full,
    #leadForm .field.full { grid-column: 1 / -1 !important; min-width: 0; }
    #homeLeadForm .field input,
    #homeLeadForm .field select,
    #homeLeadForm .field textarea,
    #leadForm .field input,
    #leadForm .field select,
    #leadForm .field textarea { min-height: 52px; padding: 14px 15px; font-size: 16px; }
    #homeLeadForm .field textarea,
    #leadForm .field textarea { min-height: 132px; }
    #homeLeadForm .btn,
    #leadForm .btn { width: 100%; min-height: 54px; padding-inline: 16px; }
  }

/* Keep the decorative glow behind every lead form so fields receive taps and keyboard focus. */
  #merchant-enquiry .feature-visual::before,
  .page[data-page="contact"] .feature-visual::before { pointer-events: none; }
  #merchant-enquiry form,
  .page[data-page="contact"] form { position: relative; z-index: 2; pointer-events: auto; }

/* Keep mobile navigation hidden until the menu button is used. */
  .mobile-menu { display: none; }

/* WordPress preview fallback: keep the page visible until all enhancements finish. */
.reveal,
.js .reveal { opacity: 1; transform: none; }
.js.mag-motion-ready .reveal { opacity: 0; transform: translateY(36px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.js.mag-motion-ready .reveal.in { opacity: 1; transform: none; }
.page { display: block; }
.js .page { display: none; }
.js .page.active { display: block; }

/* Show one route at a time even before JavaScript is available. */
.page { display: none; }
.page.active { display: block; }

/* Supplied MAG Payment Gateways logo. */
.brand-logo-link { gap: 0; }
.site-logo { display: block; width: 152px; height: 74px; object-fit: contain; object-position: center; border-radius: 0; background: transparent; }
.header { padding: 7px 0; }
.footer .site-logo { width: 150px; height: 80px; }
@media (max-width: 640px) {
  .header { padding: 6px 0; }
  .site-logo { width: 132px; height: 68px; }
  .footer .site-logo { width: 138px; height: 74px; }
}

/* Prominent brand presentation: crop transparent margins, preserve the full mark, and add subtle contrast. */
.brand-logo-link { width: 210px; height: 124px; gap: 0; flex: 0 0 auto; }
.site-logo { width: 210px; height: 124px; object-fit: cover; object-position: center; background: transparent; border-radius: 12px; filter: drop-shadow(0 0 13px rgba(204,174,104,.30)); }
.header { padding: 4px 0; }
.hero { padding-top: 190px; }
.footer .site-logo { width: 190px; height: 112px; }
@media (max-width: 980px) {
  .brand-logo-link { width: 178px; height: 102px; }
  .site-logo { width: 178px; height: 102px; }
  .hero { padding-top: 166px; }
}
@media (max-width: 640px) {
  .brand-logo-link { width: 156px; height: 88px; }
  .site-logo { width: 156px; height: 88px; }
  .header { padding: 4px 0; }
  .hero { padding-top: 150px; }
  .footer .site-logo { width: 156px; height: 90px; }
}
/* Subtle blue glow that follows a mouse cursor on desktop devices. */
.mouse-glow {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(37, 99, 235, .20), transparent 70%);
  filter: blur(70px);
  transform: translate(-50%, -50%);
  z-index: 1;
  opacity: 0;
  transition: left .08s linear, top .08s linear, opacity .25s ease;
  mix-blend-mode: screen;
}
.mouse-glow.is-visible { opacity: 1; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .mouse-glow { display: none; }
}
/* High-visibility cursor glow: above the page surface, below the navigation. */
.mouse-glow {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(45, 125, 255, .42) 0%, rgba(29, 94, 216, .22) 38%, transparent 72%);
  filter: blur(46px);
  z-index: 60;
  mix-blend-mode: normal;
}

/* Branded logo treatment: transparent artwork on a dark premium badge. */
.brand-logo-link {
  position: relative;
  isolation: isolate;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(10, 30, 38, .96), rgba(4, 10, 17, .82));
  border: 1px solid rgba(205, 176, 108, .38);
  box-shadow: 0 0 0 1px rgba(37, 224, 198, .06), 0 12px 30px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.site-logo {
  opacity: 1 !important;
  visibility: visible !important;
  filter: brightness(1.16) contrast(1.14) drop-shadow(0 0 12px rgba(210, 180, 105, .34));
}
/* High-contrast one-color logo: keeps MAG, payment gateways, and Est. 2018 equally visible. */
.site-logo {
  filter: brightness(0) saturate(100%) invert(73%) sepia(24%) saturate(834%) hue-rotate(3deg) brightness(93%) contrast(92%) drop-shadow(0 0 12px rgba(222, 190, 112, .55));
}

/* Reliable desktop cursor glow, above page artwork but below the fixed header. */
.mouse-glow {
  width: 440px;
  height: 440px;
  z-index: 90;
  background: radial-gradient(circle, rgba(51, 132, 255, .52) 0%, rgba(34, 104, 230, .28) 38%, transparent 72%);
  filter: blur(42px);
  will-change: left, top, opacity;
}

/* Emerald brand edition: preserve the logo's green/gold identity and improve clarity. */
.brand-logo-link {
  width: 196px;
  height: 126px;
  padding: 7px 12px 6px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 14%, rgba(36, 224, 198, .12), transparent 42%),
    linear-gradient(145deg, rgba(8, 29, 36, .94), rgba(5, 11, 19, .88));
  border-color: rgba(204, 174, 104, .32);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, .30),
    0 0 30px rgba(36, 224, 198, .07),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
.site-logo {
  width: 172px;
  height: 113px;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  filter: drop-shadow(0 0 10px rgba(36, 224, 198, .12)) drop-shadow(0 0 9px rgba(204, 174, 104, .12));
}
.footer .site-logo {
  width: 178px;
  height: 122px;
}

@media (max-width: 980px) {
  .brand-logo-link {
    width: 174px;
    height: 112px;
    padding: 6px 10px;
  }
  .site-logo {
    width: 154px;
    height: 100px;
  }
}

@media (max-width: 640px) {
  .brand-logo-link {
    width: 154px;
    height: 100px;
    padding: 5px 9px;
  }
  .site-logo {
    width: 136px;
    height: 90px;
  }
  .footer .site-logo {
    width: 152px;
    height: 104px;
  }
}

/* Allow cursor glow on hybrid desktop devices; keep it off on small/mobile screens. */
@media (min-width: 769px) {
  .mouse-glow { display: block !important; }
}
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .mouse-glow { display: none !important; }
}

/* Final header mark: borderless and visually balanced with the navigation. */
.header .brand-logo-link {
  width: 178px;
  height: 116px;
  padding: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.header .site-logo {
  width: 172px;
  height: 110px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(36, 224, 198, .14))
    drop-shadow(0 0 10px rgba(204, 174, 104, .16));
}

/* Single authoritative cursor glow implementation. */
.mouse-glow,
.mouse-glow.is-visible {
  display: block !important;
  position: fixed;
  left: 50vw;
  top: 50vh;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(36, 224, 198, .22) 0%, rgba(37, 99, 235, .30) 34%, rgba(37, 99, 235, .10) 56%, transparent 72%);
  filter: blur(48px);
  transform: translate(-50%, -50%);
  z-index: 95;
  opacity: .82;
  visibility: visible;
  mix-blend-mode: screen;
  transition: left .08s linear, top .08s linear, opacity .2s ease;
  will-change: left, top;
}

@media (max-width: 768px) {
  .header .brand-logo-link {
    width: 148px;
    height: 96px;
    padding: 2px;
  }
  .header .site-logo {
    width: 144px;
    height: 92px;
  }
  .mouse-glow,
  .mouse-glow.is-visible {
    display: none !important;
  }
}

/* Cache-safe embedded logo: no external image optimizer can flatten its transparency. */
.header .brand-logo-link,
.footer .brand-logo-link {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
.header .site-logo,
.footer .site-logo {
  display: block;
  object-fit: contain;
  background: none !important;
  border: 0 !important;
}
.header .brand-logo-link {
  width: 160px;
  height: 112px;
}
.header .site-logo {
  width: 128px;
  height: 112px;
}

/* Authoritative phone layout shared by iOS Safari and Android Chrome. */
@media (max-width: 768px) {
  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body,
  main,
  .page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .wrap {
    width: calc(100% - 24px);
    max-width: 100%;
  }
  .header {
    padding: 6px 0;
  }
  .header .nav {
    min-width: 0;
    gap: 12px;
  }
  .header .brand-logo-link {
    width: 132px;
    height: 92px;
    flex: 0 0 132px;
  }
  .header .site-logo {
    width: 106px;
    height: 92px;
    margin: 0 auto;
  }
  .menu-btn {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }
  .hero {
    min-height: auto;
    padding: 118px 0 52px;
  }
  .hero-grid,
  .split,
  .feature-panel,
  .cta {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-grid,
  .hero-copy,
  .earth-stage,
  .split > *,
  .feature-panel > *,
  .feature-copy,
  .feature-visual {
    min-width: 0;
    max-width: 100%;
  }
  .hero h1 {
    font-size: clamp(3rem, 13.5vw, 4.6rem);
    overflow-wrap: normal;
  }
  .earth-stage {
    width: calc(100% + 24px);
    height: 410px;
    margin: -34px -12px -30px;
    overflow: hidden;
  }
  .feature-panel {
    width: 100%;
    min-height: 0;
    border-radius: 22px;
  }
  .feature-copy {
    width: 100%;
    padding: 32px 20px 16px;
  }
  .feature-copy h3 {
    max-width: 100%;
    font-size: clamp(1.75rem, 8vw, 2.25rem);
    overflow-wrap: anywhere;
  }
  .feature-copy p {
    max-width: 100%;
    font-size: .95rem;
  }
  .feature-visual {
    width: 100%;
    padding: 14px 10px 30px;
    overflow: hidden;
    contain: layout paint;
  }
  .why-carousel,
  .why-viewport,
  .why-track {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .why-track .feature-panel {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
  .why-track .device-scene,
  .device-scene,
  .tablet,
  .screen {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .why-track .tablet,
  .tablet {
    transform: none;
  }
  .why-track .phone,
  .phone {
    left: 4%;
    width: 31%;
    max-width: 116px;
  }
  .floating-contact {
    right: 10px;
    bottom: 12px;
    gap: 8px;
  }
  .floating-contact a {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
}

@media (max-width: 390px) {
  .header .brand-logo-link {
    width: 120px;
    height: 84px;
    flex-basis: 120px;
  }
  .header .site-logo {
    width: 98px;
    height: 84px;
  }
  .hero {
    padding-top: 108px;
  }
  .feature-copy {
    padding-inline: 18px;
  }
}

/* Final requested three-line hero composition. */
.hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 18px;
}
.hero-title {
  max-width: none !important;
  font-size: clamp(3.8rem, 5vw, 5.8rem);
  letter-spacing: -.065em;
  line-height: .98;
}
.hero-title-line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(2.35rem, 10vw, 3.5rem) !important;
    letter-spacing: -.055em;
    line-height: 1;
  }
}

@media (max-width: 390px) {
  .hero-title {
    font-size: clamp(2.15rem, 9.7vw, 2.55rem) !important;
  }
}

/* Permanent logo card: identical in normal, visited, focus, hover, and active states. */
.header .brand-logo-link,
.header .brand-logo-link:link,
.header .brand-logo-link:visited,
.header .brand-logo-link:hover,
.header .brand-logo-link:focus,
.header .brand-logo-link:focus-visible,
.header .brand-logo-link:active {
  width: 198px;
  height: 126px;
  padding: 7px 13px;
  flex: 0 0 198px;
  overflow: hidden;
  border: 1px solid rgba(204, 174, 104, .38) !important;
  border-radius: 16px;
  outline: none;
  background-color: #081820 !important;
  background-image:
    radial-gradient(circle at 50% 14%, rgba(36, 224, 198, .10), transparent 43%),
    linear-gradient(145deg, #0b252b, #101821) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  -webkit-tap-highlight-color: transparent;
}
.header .site-logo {
  width: 172px;
  height: 112px;
  margin: 0 auto;
  background: transparent !important;
}

@media (max-width: 980px) {
  .header .brand-logo-link,
  .header .brand-logo-link:link,
  .header .brand-logo-link:visited,
  .header .brand-logo-link:hover,
  .header .brand-logo-link:focus,
  .header .brand-logo-link:focus-visible,
  .header .brand-logo-link:active {
    width: 172px;
    height: 112px;
    padding: 6px 11px;
    flex-basis: 172px;
  }
  .header .site-logo {
    width: 150px;
    height: 100px;
  }
}

@media (max-width: 768px) {
  .header .brand-logo-link,
  .header .brand-logo-link:link,
  .header .brand-logo-link:visited,
  .header .brand-logo-link:hover,
  .header .brand-logo-link:focus,
  .header .brand-logo-link:focus-visible,
  .header .brand-logo-link:active {
    width: 134px;
    height: 92px;
    padding: 5px 9px;
    flex-basis: 134px;
    border-radius: 13px;
  }
  .header .site-logo {
    width: 116px;
    height: 82px;
  }
}

@media (max-width: 390px) {
  .header .brand-logo-link,
  .header .brand-logo-link:link,
  .header .brand-logo-link:visited,
  .header .brand-logo-link:hover,
  .header .brand-logo-link:focus,
  .header .brand-logo-link:focus-visible,
  .header .brand-logo-link:active {
    width: 122px;
    height: 84px;
    padding: 4px 8px;
    flex-basis: 122px;
  }
  .header .site-logo {
    width: 106px;
    height: 76px;
  }
}

/* Final inline logo: transparent from the first paint, with no external image request. */
.mag-logo-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.header .brand-logo-link,
.footer .brand-logo-link {
  padding: 0;
  overflow: visible;
  background: none !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: none !important;
}
.header .brand-logo-link {
  width: 166px;
  height: 116px;
  flex: 0 0 166px;
}
.header .site-logo {
  width: 132px;
  height: 116px;
  margin: 0 auto;
  overflow: visible;
  background: none !important;
  filter:
    drop-shadow(0 0 8px rgba(36, 224, 198, .10))
    drop-shadow(0 0 7px rgba(204, 174, 104, .11));
}

/* Requested headline: line one includes High-Risk; line two is Payments. */
.hero-grid {
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr);
}
.hero-title {
  max-width: none !important;
  font-size: clamp(3.5rem, 3.9vw, 4.5rem);
  letter-spacing: -.06em;
  line-height: 1;
}
.hero-title-line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .header .brand-logo-link {
    width: 146px;
    height: 102px;
    flex-basis: 146px;
  }
  .header .site-logo {
    width: 118px;
    height: 102px;
  }
}

@media (max-width: 768px) {
  .header .brand-logo-link {
    width: 124px;
    height: 88px;
    flex-basis: 124px;
  }
  .header .site-logo {
    width: 100px;
    height: 88px;
  }
  .hero-title {
    font-size: clamp(1.35rem, 6vw, 2.2rem) !important;
    letter-spacing: -.045em;
    line-height: 1.05;
  }
}

@media (max-width: 390px) {
  .header .brand-logo-link {
    width: 116px;
    height: 82px;
    flex-basis: 116px;
  }
  .header .site-logo {
    width: 94px;
    height: 82px;
  }
  .hero-title {
    font-size: clamp(1.25rem, 5.85vw, 1.55rem) !important;
  }
}

/* Requested premium logo card treatment. */
.header .brand-logo-link {
  width: 198px;
  height: 126px;
  padding: 7px 13px;
  flex: 0 0 198px;
  overflow: hidden;
  border: 1px solid rgba(203, 174, 104, .38) !important;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 16%, rgba(36, 224, 198, .10), transparent 43%),
    linear-gradient(145deg, rgba(11, 34, 41, .98), rgba(20, 29, 38, .96)) !important;
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}
.header .site-logo {
  width: 172px;
  height: 112px;
  margin: 0 auto;
  object-fit: contain;
  filter:
    drop-shadow(0 0 9px rgba(36, 224, 198, .10))
    drop-shadow(0 0 8px rgba(204, 174, 104, .13));
}

/* Exact two-line hero headline. */
.hero-grid {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 10px;
}
.hero-title {
  max-width: none !important;
  font-size: clamp(3.9rem, 4.5vw, 5.3rem);
  letter-spacing: -.065em;
  line-height: .98;
}
.hero-title-line {
  display: block;
  white-space: nowrap;
}

@media (max-width: 980px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .header .brand-logo-link {
    width: 172px;
    height: 112px;
    padding: 6px 11px;
    flex-basis: 172px;
  }
  .header .site-logo {
    width: 150px;
    height: 100px;
  }
}

@media (max-width: 768px) {
  .header .brand-logo-link {
    width: 134px;
    height: 92px;
    padding: 5px 9px;
    flex-basis: 134px;
    border-radius: 13px;
  }
  .header .site-logo {
    width: 116px;
    height: 82px;
  }
  .hero-title {
    font-size: clamp(1.95rem, 8.35vw, 2.75rem) !important;
    letter-spacing: -.055em;
    line-height: 1.02;
  }
}

@media (max-width: 390px) {
  .header .brand-logo-link {
    width: 122px;
    height: 84px;
    padding: 4px 8px;
    flex-basis: 122px;
  }
  .header .site-logo {
    width: 106px;
    height: 76px;
  }
  .hero-title {
    font-size: clamp(1.82rem, 8.1vw, 2.1rem) !important;
  }
}

/* Original supplied logo, with its genuine green/gold colors and transparent background. */
.header .brand-logo-link {
  width: 166px;
  height: 116px;
  padding: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.header .site-logo {
  width: 132px;
  height: 116px;
  object-fit: contain;
  background: transparent !important;
  filter: brightness(1.12) contrast(1.08) drop-shadow(0 0 10px rgba(36, 224, 198, .10));
}
.footer .brand-logo-link {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.footer .site-logo {
  object-fit: contain;
  background: transparent !important;
  filter: brightness(1.12) contrast(1.08);
}

@media (max-width: 768px) {
  .header .brand-logo-link {
    width: 144px;
    height: 100px;
  }
  .header .site-logo {
    width: 116px;
    height: 100px;
  }
}

/* Compact shell: header and footer vertical footprint reduced by approximately half. */
.header {
  padding: 4px 0 !important;
}
.header .brand-logo-link,
.header .brand-logo-link:link,
.header .brand-logo-link:visited,
.header .brand-logo-link:hover,
.header .brand-logo-link:focus,
.header .brand-logo-link:focus-visible,
.header .brand-logo-link:active {
  width: 84px !important;
  height: 58px !important;
  flex: 0 0 84px !important;
  padding: 0 !important;
}
.header .site-logo {
  width: 76px !important;
  height: 58px !important;
}
.nav {
  gap: 14px;
}
.navlinks {
  gap: 20px;
}
.nav-actions .btn {
  padding: 10px 16px;
}
.menu-btn {
  width: 40px;
  height: 40px;
}
.footer {
  padding: 38px 0 15px !important;
}
.footer-grid {
  gap: 22px !important;
}
.footer h4 {
  margin-bottom: 10px !important;
}
.footer-links {
  gap: 6px !important;
}
.footer-bottom {
  margin-top: 28px !important;
  padding-top: 12px !important;
}
.footer .brand-logo-link {
  width: 84px;
  height: 58px;
}
.footer .site-logo {
  width: 76px;
  height: 58px;
}
@media (max-width: 768px) {
  .header {
    padding: 4px 0 !important;
  }
  .header .brand-logo-link,
  .header .brand-logo-link:link,
  .header .brand-logo-link:visited,
  .header .brand-logo-link:hover,
  .header .brand-logo-link:focus,
  .header .brand-logo-link:focus-visible,
  .header .brand-logo-link:active {
    width: 80px !important;
    height: 54px !important;
    flex-basis: 80px !important;
  }
  .header .site-logo {
    width: 72px !important;
    height: 54px !important;
  }
  .footer {
    padding: 32px 0 14px !important;
  }
  .footer-grid {
    gap: 18px !important;
  }
  .footer-bottom {
    margin-top: 22px !important;
    padding-top: 10px !important;
  }
  .footer .brand-logo-link {
    width: 80px;
    height: 54px;
  }
  .footer .site-logo {
    width: 72px;
    height: 54px;
  }
}