:root{--blue:#0A3D62;--blue2:#082f4c;--turq:#00B8D9;--gold:#C8A45D;--ink:#102a3c;--muted:#647686;--line:#dfe8ed;--soft:#f5f8fa;--white:#fff;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Inter,system-ui,sans-serif;background:#fff;line-height:1.6}.container{width:min(1160px,calc(100% - 48px));margin:auto}.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(10,61,98,.08)}.nav-wrap{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--blue)}.brand strong{font:800 25px Manrope,sans-serif;letter-spacing:-1.5px;display:block;line-height:1}.brand small{display:block;font-size:7px;letter-spacing:2.2px;font-weight:700;margin-top:4px;color:#6d7d89}.brand-mark{height:30px;width:30px;border-radius:9px;background:var(--blue);display:grid;place-items:center;position:relative;overflow:hidden}.brand-mark:before,.brand-mark:after,.brand-mark span{content:"";position:absolute;border:2px solid var(--turq);border-radius:50%}.brand-mark:before{width:22px;height:22px;left:-9px}.brand-mark:after{width:22px;height:22px;right:-9px}.brand-mark span{width:8px;height:8px;background:var(--turq);border:0}.nav{display:flex;align-items:center;gap:29px}.nav a{font-size:13px;font-weight:600;text-decoration:none;color:#496170}.nav a:hover{color:var(--blue)}.nav .nav-cta{background:var(--blue);color:#fff;padding:11px 17px;border-radius:11px}.menu-toggle{display:none;background:none;border:0}.hero{background:linear-gradient(180deg,#f6fafc 0,#fff 100%);overflow:hidden}.hero-grid{min-height:650px;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;padding-top:54px;padding-bottom:42px}.eyebrow,.section-label{font-size:10px;font-weight:800;letter-spacing:2px;color:var(--turq)}.eyebrow{display:flex;gap:9px;align-items:center;margin-bottom:19px}.eyebrow span{width:28px;height:1px;background:var(--turq)}h1,h2,h3{font-family:Manrope,Inter,sans-serif}h1{font-size:clamp(43px,5vw,68px);line-height:1.02;letter-spacing:-3.3px;margin:0 0 25px;color:var(--blue);font-weight:800}h1 em{font-style:normal;color:var(--turq)}.hero-text{font-size:17px;line-height:1.75;color:#536876;max-width:600px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:31px 0 22px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:14px 20px;border-radius:12px;text-decoration:none;font-size:13px;font-weight:800;transition:.25s ease}.btn-primary{background:var(--blue);color:#fff;box-shadow:0 9px 25px rgba(10,61,98,.16)}.btn-primary:hover{transform:translateY(-2px);background:#082f4c}.btn-ghost{color:var(--blue);border:1px solid #cad8df;background:#fff}.btn-ghost:hover{border-color:var(--turq)}.hero-note{font-size:11px;color:#82919a;display:flex;align-items:center;gap:8px}.dot{width:6px;height:6px;border-radius:50%;background:var(--turq);box-shadow:0 0 0 5px rgba(0,184,217,.1)}
.payment-system{height:510px;position:relative;max-width:540px;margin-left:auto}.orbit{position:absolute;border:1px solid #d9e7ed;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%)}.orbit-a{width:370px;height:370px}.orbit-b{width:510px;height:510px;border-style:dashed;opacity:.65}.node{position:absolute;z-index:3;text-align:center;color:#6a7c87;font-size:10px;font-weight:700}.node label{display:block;margin-top:7px}.node-center{left:50%;top:50%;transform:translate(-50%,-50%);width:136px;height:136px;border-radius:50%;background:#fff;border:1px solid #dce8ed;box-shadow:0 18px 45px rgba(10,61,98,.13);display:flex;flex-direction:column;align-items:center;justify-content:center}.clip-icon{width:39px;height:31px;background:var(--blue);border-radius:10px;position:relative;margin-bottom:7px;overflow:hidden}.clip-icon:before,.clip-icon:after,.clip-icon span{content:"";position:absolute;border:2px solid var(--turq);border-radius:50%}.clip-icon:before{width:30px;height:30px;left:-12px;top:0}.clip-icon:after{width:30px;height:30px;right:-12px;top:0}.clip-icon span{width:7px;height:7px;border:0;background:var(--turq);left:16px;top:12px}.node-center b{font-size:12px;letter-spacing:1.3px;color:var(--blue)}.node-center small{font-size:6px;letter-spacing:1px;color:#95a3ab;margin-top:2px}.node-pos{top:42px;left:47px}.pos-device{width:72px;height:93px;border-radius:10px;background:#fff;border:1px solid #ccdbe2;box-shadow:0 10px 25px rgba(10,61,98,.1);padding:7px}.screen{height:56px;border-radius:6px;background:#edf5f7;padding:7px;text-align:left}.screen span{font-size:7px;display:block;color:#89a0ac}.screen b{display:block;font-size:9px;color:var(--blue);margin-top:4px}.screen small{font-size:5px;color:#1aa2a9}.device-bar{height:4px;width:30px;background:#ccd8de;border-radius:5px;margin:8px auto}.node-nfc{top:75px;right:52px}.phone{width:55px;height:91px;border:2px solid var(--blue);border-radius:11px;background:#fff;padding:5px;box-shadow:0 10px 25px rgba(10,61,98,.1)}.phone-screen{height:100%;border-radius:7px;background:#f2f8f9;display:flex;flex-direction:column;align-items:center;justify-content:center}.phone-screen b{font-size:7px;color:var(--blue);margin-top:7px}.nfc{font-size:13px;color:var(--turq);font-weight:800;letter-spacing:-5px}.node-api{bottom:58px;right:28px}.api-card,.shop-card,.bank-card{background:#fff;border:1px solid #d2e0e6;box-shadow:0 10px 25px rgba(10,61,98,.09);border-radius:12px}.api-card{width:86px;height:66px;padding:10px;text-align:left}.api-card span{font:800 12px Manrope;color:var(--blue)}.api-card i{height:4px;width:54px;background:#dbe8ec;border-radius:3px;display:block;margin-top:5px}.api-card i:first-of-type{background:var(--turq);width:42px}.node-bank{bottom:30px;left:51px}.bank-card{width:82px;height:59px;padding:14px;display:flex;gap:8px;align-items:center;justify-content:center;color:var(--blue)}.bank-card span{color:var(--turq)}.bank-card b,.shop-card b{font-size:9px}.node-shop{top:235px;left:-2px}.shop-card{width:73px;height:62px;padding:12px;display:flex;flex-direction:column;justify-content:center;color:var(--blue)}.shop-card span{font-size:16px;color:var(--turq)}.connector{height:1px;background:linear-gradient(90deg,transparent,#a9dbe2,transparent);position:absolute;transform-origin:left center;z-index:1}.c1{width:220px;left:120px;top:190px;transform:rotate(21deg)}.c2{width:220px;left:330px;top:192px;transform:rotate(154deg)}.c3{width:210px;left:300px;top:320px;transform:rotate(-28deg)}.c4{width:225px;left:160px;top:328px;transform:rotate(200deg)}.c5{width:180px;left:250px;top:250px;transform:rotate(180deg)}.hero-bottom{border-top:1px solid #e5edf0}.trust-strip{height:72px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:#71828d;font-size:10px;font-weight:700;letter-spacing:.5px}.section{padding:112px 0}.intro-grid{display:grid;grid-template-columns:220px 1fr;gap:60px}.intro h2,.section-heading h2,.why h2,.approach h2{font-size:clamp(35px,4vw,53px);line-height:1.08;letter-spacing:-2.2px;color:var(--blue);margin:0 0 24px}.intro h2 span,.section-heading h2 span,.why h2 span,.approach h2 span{color:var(--turq)}.intro p{max-width:790px;color:#617480;font-size:16px;line-height:1.85;margin:0}.services{background:var(--soft);border-top:1px solid #edf2f4;border-bottom:1px solid #edf2f4}.section-heading{margin-bottom:48px}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.service-card{background:#fff;border:1px solid #e0e9ed;border-radius:20px;padding:30px;min-height:430px;display:flex;flex-direction:column;transition:.3s ease;box-shadow:0 4px 20px rgba(10,61,98,.025)}.service-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(10,61,98,.08);border-color:#c8e5ea}.card-top{display:flex;justify-content:space-between;align-items:flex-start}.service-number{font:800 11px Manrope;color:#91a3ae;letter-spacing:1px}.service-icon{width:66px;height:66px;border-radius:17px;background:#eff9fa;position:relative;display:grid;place-items:center;color:var(--blue)}.icon-pay span{width:35px;height:23px;border:2px solid var(--blue);border-radius:5px}.icon-pay i{position:absolute;width:14px;height:2px;background:var(--turq);bottom:16px}.icon-cost span{font:800 23px Manrope;color:var(--blue)}.icon-cost i{position:absolute;height:2px;width:15px;background:var(--turq);bottom:16px}.icon-cost i:nth-of-type(1){transform:translateX(-10px)}.icon-cost i:nth-of-type(2){transform:translateX(10px);opacity:.5}.icon-network span,.icon-network i{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--turq)}.icon-network span{left:16px;top:27px}.icon-network i:nth-of-type(1){right:14px;top:17px}.icon-network i:nth-of-type(2){right:14px;bottom:15px}.icon-network i:nth-of-type(3){left:32px;top:11px}.icon-shield span{width:32px;height:37px;display:grid;place-items:center;border:2px solid var(--blue);border-radius:14px 14px 18px 18px;color:var(--turq);font-weight:800}.service-card h3{font-size:23px;line-height:1.2;letter-spacing:-.8px;color:var(--blue);margin:22px 0 9px}.service-card p{font-size:13px;color:#687b86;margin:0 0 10px;line-height:1.7}.service-card .lead{font-weight:700;color:#28485b;font-size:13px}.chips{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0 20px}.chips span{font-size:9px;font-weight:700;color:#53717f;background:#f2f6f7;border-radius:100px;padding:6px 9px}.card-foot{margin-top:auto;border-top:1px solid #e7eef1;padding-top:16px;color:#80909a;font-size:10px;font-weight:700}.card-foot b{float:right;color:var(--turq);font-size:15px}.why{background:var(--blue);color:#fff}.why-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}.why .section-label{color:#5bd7e8}.why h2{color:#fff}.why h2 span{color:#5bd7e8}.why-copy p{color:#c0d1db;font-size:14px;line-height:1.85;max-width:480px}.principles{border-top:1px solid rgba(255,255,255,.18)}.principle{display:grid;grid-template-columns:54px 1fr;gap:22px;padding:24px 0;border-bottom:1px solid rgba(255,255,255,.14)}.principle>span{font:700 10px Manrope;color:#5bd7e8}.principle h3{font-size:18px;margin:0 0 5px;color:#fff}.principle p{margin:0;color:#afc3ce;font-size:12px}.approach{background:#fff}.center{text-align:center}.center .section-label{display:block}.steps{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr;align-items:center;margin-top:55px}.step{padding:25px 12px;text-align:center}.step-number{width:54px;height:54px;border-radius:50%;margin:0 auto 18px;background:#edf8fa;border:1px solid #cdecef;display:grid;place-items:center;color:var(--blue);font:800 12px Manrope}.step h3{margin:0 0 6px;color:var(--blue);font-size:18px}.step p{margin:0;color:#71818c;font-size:11px;line-height:1.65}.step-arrow{color:#a5b7c0;font-size:20px;text-align:center}.cta{padding-top:20px;padding-bottom:112px}.cta-box{position:relative;overflow:hidden;background:var(--blue);border-radius:28px;padding:64px 70px;color:#fff}.cta-box:after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(91,215,232,.18);border-radius:50%;right:-130px;top:-190px}.cta-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(0,184,217,.11);filter:blur(25px);right:40px;bottom:-170px}.cta-box .section-label{color:#5bd7e8}.cta-box h2{font-size:clamp(34px,4vw,52px);line-height:1.05;letter-spacing:-2px;max-width:760px;margin:15px 0 18px;position:relative;z-index:2}.cta-box p{color:#bfd0da;max-width:650px;font-size:14px;position:relative;z-index:2}.cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;position:relative;z-index:2}.btn-light{background:#fff;color:var(--blue)}.btn-outline-light{border:1px solid rgba(255,255,255,.35);color:#fff}.setup-note{display:block;margin-top:22px;color:#89a6b4;font-size:9px;position:relative;z-index:2}.footer{background:#f6f8f9;border-top:1px solid #e5ecef;padding:45px 0 20px}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:25px}.footer-brand .brand-mark{width:27px;height:27px}.footer-grid p{margin:0;color:#72838d;font-size:11px}.footer-links{display:flex;justify-content:flex-end;gap:20px}.footer-links a{font-size:10px;font-weight:700;color:#536b78;text-decoration:none}.footer-bottom{border-top:1px solid #dde6ea;margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;color:#91a0a8;font-size:9px}.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}.delay-1{transition-delay:.12s}.delay-2{transition-delay:.22s}.delay-3{transition-delay:.32s}
@media(max-width:900px){.nav{gap:14px}.nav a:not(.nav-cta){display:none}.hero-grid{grid-template-columns:1fr;min-height:auto;padding-top:75px}.hero-copy{max-width:720px}.payment-system{height:470px;margin:0 auto;width:100%;max-width:550px}.why-grid{grid-template-columns:1fr;gap:55px}.steps{grid-template-columns:1fr 1fr;gap:10px}.step-arrow{display:none}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid p{grid-column:1/-1;grid-row:2}.footer-links{justify-content:flex-start}.footer-bottom{gap:10px;flex-direction:column}}
@media(max-width:640px){.container{width:min(100% - 30px,1160px)}.nav-wrap{height:68px}.menu-toggle{display:flex;flex-direction:column;gap:4px}.menu-toggle i{display:block;width:22px;height:2px;background:var(--blue)}.nav{position:absolute;top:68px;left:0;right:0;background:#fff;padding:15px;display:none;flex-direction:column;align-items:stretch;box-shadow:0 12px 20px rgba(0,0,0,.07)}.nav.open{display:flex}.nav a{display:block!important;padding:10px}.hero-grid{padding-top:50px}.hero h1{letter-spacing:-2.4px}.hero-text{font-size:15px}.hero-actions .btn{width:100%}.payment-system{height:390px;transform:scale(.78);transform-origin:center top;margin-bottom:-60px}.orbit-a{width:310px;height:310px}.orbit-b{width:400px;height:400px}.trust-strip{height:auto;padding:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.section{padding:80px 0}.intro-grid{grid-template-columns:1fr;gap:18px}.intro h2,.section-heading h2,.why h2,.approach h2{letter-spacing:-1.5px}.service-grid{grid-template-columns:1fr}.service-card{min-height:0}.why-grid{gap:35px}.principle{grid-template-columns:40px 1fr;gap:13px}.steps{grid-template-columns:1fr 1fr}.cta{padding-top:0;padding-bottom:80px}.cta-box{padding:43px 27px;border-radius:22px}.cta-box h2{letter-spacing:-1.4px}.footer-grid{grid-template-columns:1fr}.footer-grid p{grid-column:auto;grid-row:auto}.footer-links{flex-wrap:wrap}.footer-bottom{font-size:8px}}

/* Partners */
.partners{background:#f7fbfd;border-top:1px solid #e7f0f5;border-bottom:1px solid #e7f0f5}
.partner-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:42px;align-items:stretch}
.partner-card{height:118px;background:#fff;border:1px solid #e1ebf1;border-radius:18px;display:flex;align-items:center;justify-content:center;padding:18px;box-shadow:0 8px 28px rgba(10,61,98,.05);transition:transform .25s ease,box-shadow .25s ease}
.partner-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(10,61,98,.10)}
.partner-card img{max-width:100%;max-height:78px;width:auto;height:auto;object-fit:contain}
.partner-card:nth-child(2) img{max-height:72px}
.partner-card:nth-child(4) img{max-height:82px}
.partners-note{text-align:center;max-width:760px;margin:26px auto 0;color:#647789;font-size:.95rem}
@media(max-width:900px){.partner-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.partner-grid{grid-template-columns:repeat(2,1fr);gap:12px}.partner-card{height:96px;padding:12px}.partner-card img{max-height:62px}}

/* === Clipay Tech visual layer === */
:root{
  --navy:#062B43;--blue:#0A3D62;--cyan:#00B8D9;--mint:#35D7C1;
  --ink:#092B42;--muted:#647789;--line:#DCEAF0;--gold:#D9A52D;
}
body{background:#f7fbfd;color:var(--ink)}
header,.nav,.navbar{backdrop-filter:blur(12px)}
.hero{position:relative;overflow:hidden;background:
 radial-gradient(circle at 78% 24%,rgba(0,184,217,.24),transparent 28%),
 radial-gradient(circle at 94% 78%,rgba(53,215,193,.18),transparent 24%),
 linear-gradient(135deg,#062B43 0%,#0A3D62 52%,#07556F 100%) !important}
.hero:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.20;
 background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
 background-size:44px 44px;mask-image:linear-gradient(90deg,black,transparent 75%)}
.hero .container,.hero-content,.hero-visual{position:relative;z-index:1}
.tech-pills{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.tech-pill{border:1px solid rgba(115,235,231,.30);background:rgba(255,255,255,.06);color:#e9fbfc;border-radius:999px;padding:9px 14px;font-size:13px}
.tech-pill:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cyan);margin-right:8px}
.service-card,.partner-card{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.service-card:hover,.partner-card:hover{transform:translateY(-5px);box-shadow:0 18px 45px rgba(6,43,67,.12);border-color:#B9DDE8}
.section-grid-tech{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center}
.network-card{background:#062B43;border-radius:26px;min-height:360px;position:relative;overflow:hidden;box-shadow:0 20px 60px rgba(6,43,67,.18)}
.network-card:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(53,215,193,.42) 1px,transparent 1px);background-size:24px 24px;opacity:.25}
.node{position:absolute;border:1px solid rgba(103,231,224,.45);background:rgba(255,255,255,.07);backdrop-filter:blur(8px);border-radius:16px;padding:13px 16px;color:white;font-size:13px}
.node b{display:block;font-size:14px;margin-bottom:3px}
.node-a{left:28px;top:35px}.node-b{right:28px;top:42px}.node-c{left:45px;bottom:35px}.node-d{right:45px;bottom:35px}
.node-main{left:50%;top:50%;transform:translate(-50%,-50%);width:155px;text-align:center;border-color:#35D7C1;box-shadow:0 0 40px rgba(0,184,217,.18)}
.node-main strong{font-size:25px;display:block;color:#35D7C1}
.connector{position:absolute;height:1px;background:linear-gradient(90deg,transparent,#35D7C1,transparent);transform-origin:left center;opacity:.7}
.c1{width:280px;left:190px;top:105px;transform:rotate(13deg)}
.c2{width:270px;left:210px;top:245px;transform:rotate(-13deg)}
.c3{width:230px;left:420px;top:110px;transform:rotate(154deg)}
.c4{width:240px;left:425px;top:255px;transform:rotate(206deg)}
.partners{background:linear-gradient(180deg,#f7fbfd,#eef8fb)}
.partner-grid{grid-template-columns:repeat(5,1fr)}
.partner-card{background:rgba(255,255,255,.95);height:125px}
.partner-card img{filter:saturate(.9)}
@media(max-width:900px){.section-grid-tech{grid-template-columns:1fr}.partner-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){.partner-grid{grid-template-columns:repeat(2,1fr)}.network-card{min-height:300px}.node{font-size:11px}.node-main{width:125px}.c1,.c2,.c3,.c4{display:none}}


/* === Final polish / responsive hardening === */
html,body{width:100%;max-width:100%;overflow-x:hidden}
img{display:block;max-width:100%}
.nav{min-width:0}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hero-copy{min-width:0;position:relative;z-index:4}
.payment-system{width:100%;min-width:0;overflow:visible;isolation:isolate}
.payment-system .orbit{pointer-events:none}
.network-card{margin:0 auto;width:min(100%,1160px)}
.tech-pills{position:relative;z-index:2}
.partners .section-heading p{max-width:720px;margin:0 auto;color:#647789;font-size:14px;line-height:1.75}
.partner-card img{max-height:76px}
.partner-card:nth-child(2) img{max-height:58px}
.partner-card:nth-child(3) img{max-height:70px}
.partner-card:nth-child(4) img{max-height:78px}
.partner-card:nth-child(5) img{max-height:72px}
.setup-note{font-size:10px;letter-spacing:.2px}

@media (max-width:1100px){
  .container{width:min(100% - 40px,1160px)}
  .nav{gap:18px}
  .nav a{font-size:12px}
  .hero-grid{gap:8px}
  .payment-system{transform:scale(.92);transform-origin:center center}
}

@media (max-width:900px){
  .nav{gap:10px}
  .nav a:not(.nav-cta){display:none}
  .hero-grid{grid-template-columns:1fr;gap:0;padding-top:64px}
  .hero-copy{max-width:760px}
  .payment-system{height:470px;max-width:560px;margin:8px auto 0;transform:none}
  .network-card{min-height:360px}
}

@media (max-width:640px){
  .container{width:calc(100% - 30px)}
  .hero-grid{padding-top:48px}
  h1{font-size:clamp(39px,12vw,54px);letter-spacing:-2.4px}
  .hero-text{font-size:15px;line-height:1.7}
  .hero-actions{margin-top:24px}
  .payment-system{height:330px;max-width:430px;transform:scale(.72);transform-origin:center top;margin:18px auto -45px}
  .orbit-a{width:310px;height:310px}
  .orbit-b{width:400px;height:400px}
  .node-pos{top:25px;left:28px}
  .node-nfc{top:50px;right:26px}
  .node-api{bottom:30px;right:18px}
  .node-bank{bottom:20px;left:30px}
  .node-shop{top:205px;left:-6px}
  .c1{width:190px;left:112px;top:165px}
  .c2{width:190px;left:285px;top:170px}
  .c3{width:185px;left:265px;top:285px}
  .c4{width:185px;left:135px;top:290px}
  .c5{width:150px;left:220px;top:225px}
  .trust-strip{grid-template-columns:1fr 1fr;font-size:9px}
  .network-card{min-height:285px;border-radius:20px}
  .network-card .node{font-size:10px;padding:10px 11px}
  .network-card .node b{font-size:12px}
  .network-card .node-a{left:14px;top:18px}
  .network-card .node-b{right:14px;top:22px}
  .network-card .node-c{left:16px;bottom:18px}
  .network-card .node-d{right:16px;bottom:18px}
  .network-card .node-main{width:135px;padding:12px 10px}
  .network-card .node-main strong{font-size:21px}
  .partner-grid{grid-template-columns:1fr 1fr;gap:12px}
  .partner-card{height:96px;padding:12px;border-radius:15px}
  .partner-card img{max-height:58px}
  .partner-card:nth-child(2) img{max-height:48px}
  .partner-card:nth-child(3) img{max-height:55px}
  .partner-card:nth-child(4) img{max-height:60px}
  .partner-card:nth-child(5) img{max-height:56px}
  .cta-box{padding:40px 24px}
  .cta-actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}


/* Final desktop hero containment: keep the ecosystem inside its column */
.payment-system .node{border:0;background:transparent;backdrop-filter:none;border-radius:0;padding:0;color:#6a7c87;font-size:10px;font-weight:700;box-shadow:none}
.payment-system .node-center{border:1px solid #dce8ed;background:#fff;border-radius:50%;padding:0;box-shadow:0 18px 45px rgba(10,61,98,.13);color:var(--blue)}
.payment-system .node-pos,.payment-system .node-nfc,.payment-system .node-api,.payment-system .node-bank,.payment-system .node-shop{background:transparent}
.payment-system .connector{background:linear-gradient(90deg,transparent,#35D7C1,transparent);opacity:.55}
.footer-contact{display:flex;gap:9px;align-items:center;margin-top:8px!important;font-size:11px!important}
.footer-contact a{color:#536b78;text-decoration:none;font-weight:700}
.footer-contact a:hover{color:var(--blue)}

@media(max-width:640px){
  .footer-contact{flex-wrap:wrap}
  .payment-system .node{font-size:9px}
  .payment-system .node-center{width:118px;height:118px}
}

/* === Official Clipay brand mark + anchor alignment === */
.official-mark{display:grid!important;place-items:center;overflow:hidden;background:transparent!important;border-radius:0!important;}
.official-mark img{width:100%;height:100%;object-fit:contain;display:block;max-width:none;}
.brand .official-mark{width:36px;height:36px;}
.footer-brand .official-mark{width:32px;height:32px;}
/* Prevent sticky header from covering section headings after anchor navigation */
section[id]{scroll-margin-top:96px;}
@media(max-width:640px){
  section[id]{scroll-margin-top:78px;}
  .brand .official-mark{width:42px;height:42px;}
  .footer-brand .official-mark{width:38px;height:38px;}
}

/* ==========================================================
   RESPONSIVE SYSTEM — Clipay
   El sitio está diseñado para adaptarse automáticamente a:
   • Computadoras de escritorio (PC / laptop)
   • Tabletas (horizontal y vertical)
   • Teléfonos celulares
   No se utilizan anchos fijos que obliguen al usuario a
   desplazarse horizontalmente.
   ========================================================== */

html { width: 100%; max-width: 100%; overflow-x: hidden; }
body { width: 100%; max-width: 100%; min-width: 320px; overflow-x: hidden; }
img, svg, video { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Contenedor fluido para todos los tamaños */
.container {
  width: min(1160px, calc(100% - 48px));
  max-width: 100%;
  margin-inline: auto;
}

/* Escritorio amplio: 1200 px o más */
@media (min-width: 1201px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 34px;
  }
  .payment-system {
    width: min(100%, 520px);
    margin-left: auto;
    margin-right: 0;
    transform: none;
  }
}

/* Laptop / escritorio estándar */
@media (min-width: 901px) and (max-width: 1200px) {
  .container { width: min(1080px, calc(100% - 40px)); }
  .hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: 16px;
  }
  .payment-system {
    width: min(100%, 500px);
    height: 480px;
    margin-left: auto;
    transform: scale(.90);
    transform-origin: center center;
  }
  .nav { gap: 17px; }
}

/* Tabletas y dispositivos medianos */
@media (min-width: 641px) and (max-width: 900px) {
  .container { width: min(100% - 40px, 760px); }
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    min-height: auto;
    padding-top: 64px;
  }
  .hero-copy { max-width: 760px; }
  .payment-system {
    width: min(100%, 560px);
    height: 470px;
    margin: 8px auto 0;
    transform: scale(.88);
    transform-origin: center top;
  }
  .trust-strip {
    flex-wrap: wrap;
    justify-content: space-around;
    height: auto;
    padding: 22px 0;
  }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .why-grid { grid-template-columns: 1fr; gap: 50px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 12px; }
  .step-arrow { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Celulares: diseño vertical */
@media (max-width: 640px) {
  .container { width: calc(100% - 30px); }
  .site-header { width: 100%; }
  .nav-wrap { width: 100%; padding-inline: 15px; }
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 48px;
    padding-bottom: 28px;
  }
  .hero-copy { width: 100%; min-width: 0; }
  h1 {
    font-size: clamp(39px, 11vw, 52px);
    line-height: 1.02;
    letter-spacing: -2.3px;
    overflow-wrap: normal;
  }
  .hero-text { max-width: 100%; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; }
  .payment-system {
    width: 100%;
    max-width: 520px;
    height: 390px;
    margin: 8px auto -55px;
    transform: scale(.78);
    transform-origin: center top;
  }
  .trust-strip {
    height: auto;
    padding: 18px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .section { padding: 76px 0; }
  .intro-grid { grid-template-columns: 1fr; gap: 18px; }
  .service-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
  .why-grid { grid-template-columns: 1fr; gap: 35px; }
  .principle { grid-template-columns: 40px 1fr; gap: 13px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 35px; }
  .step { padding: 20px 8px; }
  .cta { padding-top: 0; padding-bottom: 76px; }
  .cta-box { padding: 42px 26px; border-radius: 22px; }
  .cta-actions .btn { width: 100%; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; flex-wrap: wrap; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

/* Teléfonos pequeños */
@media (max-width: 380px) {
  .container { width: calc(100% - 24px); }
  .brand strong { font-size: 22px; }
  .brand small { font-size: 6px; letter-spacing: 1.8px; }
  .brand .official-mark { width: 38px; height: 38px; }
  h1 { font-size: 38px; letter-spacing: -1.9px; }
  .payment-system { transform: scale(.70); margin-bottom: -72px; }
  .trust-strip { font-size: 9px; }
}

/* ==========================================================
   FINAL RELEASE — desktop alignment + responsive containment
   ========================================================== */
.hero-grid{align-items:center;min-width:0}
.hero-copy{min-width:0}
.payment-system{box-sizing:border-box;position:relative;min-width:0;max-width:100%;margin-left:auto;margin-right:0;right:0;overflow:visible}

@media (min-width:1201px){
  .hero-grid{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:28px}
  .payment-system{width:500px;height:500px;transform:none}
}

@media (min-width:901px) and (max-width:1200px){
  .hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(390px,.94fr);gap:18px}
  .payment-system{width:460px;height:460px;transform:scale(.92);transform-origin:center right}
  .orbit-a{width:340px;height:340px}
  .orbit-b{width:450px;height:450px}
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:0}
  .payment-system{width:100%;max-width:560px;margin-left:auto;margin-right:auto;right:auto}
}

/* Official Clipay mark: preserve the supplied brand asset without CSS reconstruction. */
.brand .official-mark img,.footer-brand .official-mark img{object-fit:contain}

/* Production: no setup/instruction notice is displayed. */
.setup-note{display:none!important}



/* ==========================================================
   DEFINITIVE RELEASE — typography, contrast, official logo,
   symmetric payment ecosystem and URL-safe navigation
   ========================================================== */
:root{
  --hero-text:#F7FCFF;
  --hero-muted:#D8E8EF;
  --hero-label:#72E7F3;
}

/* Strong contrast on the dark hero */
.hero h1{color:var(--hero-text)}
.hero h1 em{color:#29D5E8}
.hero .hero-text{color:var(--hero-muted);max-width:640px}
.hero .hero-note{color:#D6E6ED}
.hero .eyebrow{color:var(--hero-label)}
.hero .trust-strip{color:#D7E8EE}

/* Use the supplied official Clipay logo lockup consistently. */
.brand{gap:10px;align-items:center}
.brand-logo-wrap{display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.brand-logo{display:block;width:auto;height:auto;object-fit:contain}
.brand .brand-logo{width:132px;height:auto}
.brand-descriptor{display:none}
.footer-brand{gap:12px}
.footer-brand .brand-logo{width:154px}

/* The center of the circular ecosystem uses the same official logo. */
.payment-system{height:520px;max-width:560px}
.payment-system .node{color:#E7F5F8;font-size:11px;font-weight:800;text-shadow:0 1px 8px rgba(3,35,55,.28)}
.payment-system .node label{margin-top:8px;color:#D9EBF0;font-size:10px;letter-spacing:.1px}
.payment-system .node-center{
  width:150px;height:150px;
  border:1px solid #DCE8ED;background:#fff;border-radius:50%;
  padding:18px;box-shadow:0 18px 50px rgba(2,30,48,.28);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-shadow:none;color:var(--blue);
}
.payment-system .center-logo{width:108px;max-width:100%;height:auto;object-fit:contain}
.payment-system .node-center small{margin-top:7px;color:#7B8D98;font-size:6.5px;letter-spacing:1.2px;font-weight:800}
.payment-system .node-pos,
.payment-system .node-nfc,
.payment-system .node-api,
.payment-system .node-bank,
.payment-system .node-shop,
.payment-system .node-security{
  left:50%;top:50%;right:auto;bottom:auto;
  transform:translate(-50%,-50%);
}
/* Six evenly spaced positions around the orbit. */
.payment-system .node-pos{left:50%;top:8%}
.payment-system .node-nfc{left:84%;top:25%}
.payment-system .node-api{left:84%;top:75%}
.payment-system .node-bank{left:50%;top:92%}
.payment-system .node-shop{left:16%;top:75%}
.payment-system .node-security{left:16%;top:25%}
.payment-system .node-security .security-card{width:76px;height:64px}
.security-card{background:#fff;border:1px solid #D2E0E6;box-shadow:0 10px 25px rgba(10,61,98,.10);border-radius:12px;padding:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--blue);gap:3px}
.security-card span{width:26px;height:26px;border:2px solid var(--cyan);border-radius:8px;display:grid;place-items:center;color:var(--blue);font-size:14px;font-weight:900}
.security-card b{font-size:9px;line-height:1}
/* Remove the old irregular connector geometry from the circular graphic. */
.payment-system .connector{display:none}
.payment-system .orbit-a{width:370px;height:370px}
.payment-system .orbit-b{width:510px;height:510px}

/* Improve legibility of the small cards while preserving the original visual language. */
.payment-system .pos-device,.payment-system .phone,.payment-system .api-card,.payment-system .bank-card,.payment-system .shop-card{filter:drop-shadow(0 10px 20px rgba(2,30,48,.18))}

/* Internal navigation scrolls without changing the public URL to #servicios/#partners/etc. */
section[id]{scroll-margin-top:96px}

@media (max-width:1200px) and (min-width:901px){
  .brand .brand-logo{width:122px}
  .payment-system{height:500px;max-width:520px}
  .payment-system .orbit-a{width:340px;height:340px}
  .payment-system .orbit-b{width:460px;height:460px}
  .payment-system .node-center{width:138px;height:138px}
  .payment-system .center-logo{width:98px}
}

@media (max-width:900px){
  .hero h1{color:#F8FDFF}
  .hero .hero-text{color:#DCEBF1}
  .hero .hero-note{color:#D7E7ED}
  .payment-system{height:470px;max-width:560px}
  .payment-system .node{font-size:10px}
  .payment-system .node label{font-size:9px;color:#DCECF1}
  .payment-system .node-center{width:138px;height:138px}
  .payment-system .center-logo{width:98px}
}

@media (max-width:640px){
  .brand .brand-logo{width:146px}
  .footer-brand .brand-logo{width:158px}
  .payment-system{height:390px;max-width:520px;transform:scale(.78);transform-origin:center top;margin:18px auto -55px}
  .payment-system .orbit-a{width:310px;height:310px}
  .payment-system .orbit-b{width:400px;height:400px}
  .payment-system .node-center{width:118px;height:118px;padding:13px}
  .payment-system .center-logo{width:86px}
  .payment-system .node label{font-size:9px}
  .payment-system .node-security .security-card{width:68px;height:58px}
  .security-card span{width:22px;height:22px;font-size:12px}
  .security-card b{font-size:8px}
}

@media (max-width:380px){
  .brand .brand-logo{width:132px}
  .footer-brand .brand-logo{width:148px}
  .payment-system{transform:scale(.70);margin-bottom:-72px}
}