/* ── RESET & BASE ── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;background:var(--page-bg);color:var(--text);line-height:1.65;overflow-x:hidden} a{text-decoration:none;color:inherit}img{display:block;max-width:100%}button{font-family:inherit;cursor:pointer} /* ── TOKENS ── */ :root{ /* AWS-style light system */ --navy:#0d1117; --navy1:#131921; --navy2:#1a2332; --navy3:#1e293b; /* page bg = AWS-style off-white */ --page-bg:#f0f2f5; --page-alt:#ffffff; --blue:#232f3e;/* AWS dark */ --blue-accent:#0073bb;/* AWS orange-blue */ --blue-h:#005a91; --blue-glow:rgba(0,115,187,.2); --blue-lt:rgba(0,115,187,.06); --tg:#229ED9;--tg-h:#1a8fc4;--tg-glow:rgba(34,158,217,.35); --wa:#25D366;--wa-h:#1fb858;--wa-glow:rgba(37,211,102,.35); /* text on white bg */ --text:#0d1117;--text2:#4a5568;--text3:#718096; /* card */ --border:rgba(0,0,0,.08);--border2:rgba(0,0,0,.05); --card-bg:#ffffff;--card-hover:#f7f9fc; --r6:6px;--r10:10px;--r12:12px;--r16:16px; --max:1280px; --nav-h:60px; } /* ── LAYOUT ── */ .w{max-width:var(--max);margin:0 auto;padding:0 48px} .section{padding:88px 0} .section-alt{background:rgba(255,255,255,.02)} /* ── CANVAS PARTICLE BG ── */ #particle-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.3} .above-canvas{position:relative;z-index:1} /* ── NAV ── */ nav{ position:fixed;top:0;left:0;right:0;z-index:500; height:var(--nav-h); background:#ffffff; border-bottom:1px solid rgba(0,0,0,.1); box-shadow:0 1px 4px rgba(0,0,0,.06); transition:box-shadow .3s; } nav.scrolled{box-shadow:0 2px 12px rgba(0,0,0,.10)} .nav-inner{display:flex;align-items:center;height:var(--nav-h);gap:0} .nav-logo{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-right:32px;text-decoration:none;transition:opacity .2s} .nav-logo:hover{opacity:.85} .nav-logo img{height:28px;width:auto;filter:invert(1)brightness(10)} .nav-logo-sep{width:1px;height:16px;background:rgba(0,0,0,.15)} .nav-logo-name{color:rgba(13,17,23,.9);font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap} .nav-links{display:flex;align-items:center;list-style:none;gap:2px;flex:1} .nav-links li a{ display:inline-block;padding:6px 14px;color:rgba(22,28,36,.65); font-size:13.5px;border-radius:var(--r6);white-space:nowrap; transition:color .2s,background .2s;position:relative; } .nav-links li a::after{ content:'';position:absolute;bottom:0;left:14px;right:14px;height:2px; background:#0073bb;border-radius:2px;transform:scaleX(0); transition:transform .25s cubic-bezier(.4,0,.2,1); } .nav-links li a:hover{color:#0d1117;background:rgba(0,0,0,.05)} .nav-links li a.active{color:#0d1117;font-weight:700} .nav-links li a.active::after{transform:scaleX(1)} .nav-mob-toggle{display:none;background:none;border:none;color:rgba(13,17,23,.65);padding:4px} .nav-mob-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} .nav-mob-menu{display:none;background:#ffffff;border-top:1px solid rgba(0,0,0,.08);padding:8px 0 16px;box-shadow:0 8px 24px rgba(0,0,0,.1)} .nav-mob-menu.open{display:block} .nav-mob-menu a{display:block;padding:12px 24px;color:rgba(13,17,23,.7);font-size:14px;transition:color .15s,background .15s} .nav-mob-menu a:hover,.nav-mob-menu a.active{color:#0d1117;background:rgba(0,0,0,.04)} .nav-mob-cta{display:flex;gap:8px;padding:12px 24px 4px} .nav-mob-cta a{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:var(--r6);font-size:13px;font-weight:600;color:#fff;transition:filter .15s} .nav-mob-cta a:hover{filter:brightness(1.1)} /* ── PAGE SWITCH ── */ .page{display:none;animation:pageFadeIn .35s ease}.page.active{display:block} @keyframes pageFadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} /* ── HERO ── */ .hero{ min-height:calc(100vh - var(--nav-h));padding:calc(var(--nav-h) + 80px) 0 100px; background:#b0b0b0 url('images/hero.webp') right center / cover no-repeat; position:relative;overflow:hidden; } .hero::before{display:none} .hero::after{display:none} .hero-inner{display:grid;grid-template-columns:1fr 480px;gap:72px;align-items:center;position:relative;z-index:2} .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border-radius:100px;background:rgba(37,99,235,.1);border:1px solid rgba(37,99,235,.25);color:rgba(255,255,255,.75);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin-bottom:20px} .hero-pulse{width:7px;height:7px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 0 var(--wa-glow);animation:pulse-dot 2s infinite} @keyframes pulse-dot{0%{box-shadow:0 0 0 0 var(--wa-glow)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}} .hero h1{font-size:52px;font-weight:800;line-height:1.1;letter-spacing:-.04em;margin-bottom:20px;color:#fff} .hero h1 .hl{background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} .hero-desc{color:rgba(255,255,255,.52);font-size:16px;line-height:1.8;margin-bottom:32px;max-width:560px} .hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px} .hero-checks{display:flex;flex-direction:column;gap:10px} .hcheck{display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.6);font-size:14px} .hcheck-ico{width:20px;height:20px;border-radius:50%;background:rgba(37,211,102,.12);border:1px solid rgba(37,211,102,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0} .hcheck-ico svg{width:10px;height:10px;stroke:var(--wa);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} /* hero right panel */ .hero-panel{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:var(--r16);padding:28px;backdrop-filter:blur(16px);box-shadow:0 8px 32px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.12)} .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px} .hstat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r12);padding:18px;text-align:center;transition:border-color .25s,background .25s,transform .25s} .hstat:hover{border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.08);transform:translateY(-2px)} .hstat-n{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.03em;line-height:1} .hstat-l{font-size:11.5px;color:rgba(255,255,255,.4);margin-top:5px} .hero-pts{display:flex;flex-direction:column;gap:9px} .hpt{display:flex;align-items:center;gap:9px;font-size:13px;color:rgba(255,255,255,.55)} .hpt-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3);flex-shrink:0} /* brand logos in hero */ .hero-brands{display:flex;align-items:center;gap:28px;flex-wrap:wrap;padding:20px 0 20px} .brand-chip{display:flex;align-items:center;gap:8px;} .brand-chip span{font-size:12px;color:rgba(255,255,255,.7);font-weight:500;white-space:nowrap} /* ── TRUST BAR ── */ .trust-bar{background:#f8fafc;border-top:1px solid rgba(0,0,0,.06);border-bottom:1px solid rgba(0,0,0,.06);padding:14px 0;position:relative;z-index:2} .trust-row{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap} .trust-item{display:flex;align-items:center;gap:7px;font-size:13px;color:#4a5568;font-weight:500} .trust-ck{width:15px;height:15px;border-radius:50%;background:rgba(37,211,102,.15);border:1px solid rgba(37,211,102,.35);display:flex;align-items:center;justify-content:center;flex-shrink:0} .trust-ck svg{width:8px;height:8px;stroke:var(--wa);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} /* ── SECTION HEAD ── */ .sh{margin:0 0 52px}.sh.c{text-align:center;margin-left:auto;margin-right:auto;max-width:680px} .sh-tag{display:inline-flex;align-items:center;padding:3px 12px;border-radius:100px;background:rgba(0,115,187,.08);color:#0073bb;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;border:1px solid rgba(0,115,187,.18)} .sh h2{font-size:32px;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-bottom:12px;color:var(--text)} .sh-desc{color:var(--text2);font-size:15px;line-height:1.75} /* ── BUTTONS ── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:12px 24px;border-radius:var(--r6);font-weight:600;font-size:14px; border:none;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden; transition:transform .2s,box-shadow .2s,filter .2s; } .btn::after{content:'';position:absolute;inset:0;background:rgba(255,255,255,.12);opacity:0;transition:opacity .2s} .btn:hover::after{opacity:1} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn svg{flex-shrink:0} .btn-tg{background:var(--tg);color:#fff;box-shadow:0 4px 20px rgba(34,158,217,.3)} .btn-tg:hover{box-shadow:0 8px 28px rgba(34,158,217,.45)} .btn-wa{background:var(--wa);color:#fff;box-shadow:0 4px 20px rgba(37,211,102,.3)} .btn-wa:hover{box-shadow:0 8px 28px rgba(37,211,102,.45)} .btn-ghost{background:transparent;color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.2)} .btn-ghost:hover{border-color:rgba(255,255,255,.5);color:#fff} .btn-outline{background:transparent;color:var(--blue);border:1px solid rgba(37,99,235,.4)} .btn-outline:hover{background:rgba(37,99,235,.12);border-color:var(--blue)} /* ripple */ .btn .ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.3);transform:scale(0);animation:ripple-anim .55s linear;pointer-events:none} @keyframes ripple-anim{to{transform:scale(4);opacity:0}} /* ── CARDS ── */ .card{ background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r12); padding:24px;transition:border-color .25s,background .25s,transform .25s,box-shadow .25s; } .card:hover{ border-color:rgba(0,115,187,.35);background:#f7fbff; transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.1),0 0 0 2px rgba(0,115,187,.12); } .card-ico{font-size:1.5rem;margin-bottom:14px} .card h3{font-size:15px;font-weight:700;color:var(--text);margin-bottom:7px;letter-spacing:-.01em} .card p{font-size:13.5px;color:var(--text2);line-height:1.75} /* ADV CARD (icon left) */ .acard{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start;background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r12);padding:22px;transition:border-color .25s,background .25s,transform .25s,box-shadow .25s} .acard:hover{border-color:rgba(0,115,187,.3);background:#f7fbff;transform:translateY(-3px);box-shadow:0 6px 24px rgba(0,0,0,.08)} .acard-ico{width:48px;height:48px;border-radius:var(--r10);background:rgba(0,115,187,.08);border:1px solid rgba(0,115,187,.15);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0} .acard h3{font-size:14.5px;font-weight:700;color:var(--text);margin-bottom:7px} .acard p{font-size:13.5px;color:var(--text2);line-height:1.75} /* GRID */ .g2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .g6{display:grid;grid-template-columns:repeat(6,1fr);gap:12px} /* TABS */ .tab-bar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid rgba(0,0,0,.07)} .tab-btn{padding:8px 16px;border-radius:100px;border:1px solid rgba(0,0,0,.1);background:#fff;font-size:13px;font-weight:600;cursor:pointer;color:var(--text2);transition:all .2s} .tab-btn.active,.tab-btn:hover{background:#0073bb;border-color:#0073bb;color:#fff} .tab-pane{display:none}.tab-pane.active{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .prod{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--r10);padding:14px 16px;transition:border-color .2s,background .2s,transform .2s} .prod:hover{border-color:#0073bb;background:#f0f8ff;transform:translateY(-2px)} .prod-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:11px;font-weight:700;background:rgba(0,115,187,.1);color:#0073bb;border:1px solid rgba(0,115,187,.2);margin-bottom:6px} .prod-badge.hot{background:rgba(37,211,102,.1);color:#1a9e4a;border-color:rgba(37,211,102,.25)} .prod h4{font-size:13.5px;font-weight:700;color:var(--text);margin-bottom:3px} .prod small{font-size:12px;color:var(--text3);line-height:1.5} /* PROCESS */ .proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative} .proc-grid::before{content:'';position:absolute;top:30px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,115,187,.3),rgba(0,115,187,.3),transparent)} .proc-item{text-align:center;padding:0 16px;position:relative;z-index:1} .proc-num{width:60px;height:60px;border-radius:50%;background:#fff;border:1.5px solid rgba(0,115,187,.25);box-shadow:0 2px 8px rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:all .3s;position:relative} .proc-num span{font-size:18px;font-weight:800;color:#0073bb} .proc-item:hover .proc-num{border-color:#0073bb;background:#e8f4fb;box-shadow:0 4px 16px rgba(0,115,187,.2)} .proc-item h3{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px} .proc-item p{font-size:13px;color:var(--text2);line-height:1.65} /* STATS */ .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px} .stat-c{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--r12);padding:22px;text-align:center;transition:border-color .25s,background .25s,transform .25s;box-shadow:0 1px 4px rgba(0,0,0,.04)} .stat-c:hover{border-color:rgba(0,115,187,.3);background:#f0f8ff;transform:translateY(-3px)} .stat-c b{display:block;font-size:28px;font-weight:800;color:var(--text);letter-spacing:-.03em;margin-bottom:4px} .stat-c span{font-size:12.5px;color:var(--text2)} /* FAQ */ .faq-wrap{max-width:780px;margin:0 auto} .faq-item{border-bottom:1px solid rgba(0,0,0,.07)} .faq-q{width:100%;background:none;border:none;padding:18px 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;font-size:15px;font-weight:600;color:var(--text);text-align:left;gap:16px;transition:color .2s} .faq-q:hover{color:#0073bb} .faq-arrow{width:24px;height:24px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s,border-color .2s,background .2s} .faq-arrow svg{stroke:var(--text2);transition:stroke .2s} .faq-item.open .faq-arrow{transform:rotate(180deg);border-color:rgba(37,99,235,.4);background:rgba(37,99,235,.1)} .faq-item.open .faq-arrow svg{stroke:rgba(147,197,253,.9)} .faq-body{overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(.4,0,.2,1)} .faq-item.open .faq-body{max-height:400px} .faq-inner{padding-bottom:18px} .faq-inner p{font-size:14px;color:var(--text2);line-height:1.85} /* CTA BOX */ .cta-box{ background:linear-gradient(135deg,#1a2332 0%,#0d1117 100%); border:1px solid rgba(255,255,255,.08);border-radius:var(--r16);padding:52px 60px; display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center; position:relative;overflow:hidden; } .cta-box::before{content:'';position:absolute;top:-50%;right:-10%;width:60%;height:200%;background:radial-gradient(ellipse at center,rgba(37,99,235,.1) 0%,transparent 65%);pointer-events:none} .cta-box h2{font-size:28px;font-weight:800;letter-spacing:-.025em;color:#fff;margin-bottom:8px} .cta-box p{color:var(--text2);font-size:15px} .cta-acts{display:flex;gap:10px;flex-shrink:0;position:relative;z-index:1} /* SCENARIO CARDS */ .sc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .sc-card{border-radius:var(--r12);overflow:hidden;position:relative;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end;cursor:pointer;transition:transform .3s,box-shadow .3s} .sc-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.5)} .sc-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transition:transform .5s cubic-bezier(.4,0,.2,1)} .sc-card:hover .sc-bg{transform:scale(1.06)} .sc-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,12,24,.92) 0%,rgba(6,12,24,.55) 35%,rgba(6,12,24,.0) 55%);z-index:1;transition:background .35s} .sc-card:hover .sc-overlay{background:linear-gradient(0deg,rgba(6,12,24,.95) 0%,rgba(6,12,24,.6) 40%,rgba(6,12,24,.05) 58%)} .sc-body{position:relative;z-index:2;padding:20px} .sc-body h3{color:#fff;font-size:16px;font-weight:700;margin-bottom:6px;text-shadow:0 1px 6px rgba(0,0,0,.8);transition:color .3s,text-shadow .3s} .sc-body p{color:rgba(255,255,255,.8);font-size:13px;line-height:1.65;text-shadow:0 1px 4px rgba(0,0,0,.7);transition:color .3s} .sc-card:hover .sc-body h3{color:#fff;text-shadow:0 0 12px rgba(0,168,232,.7),0 1px 6px rgba(0,0,0,.9)} .sc-card:hover .sc-body p{color:rgba(255,255,255,.95)} .sc-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px} .sc-tag{padding:3px 10px;border-radius:4px;background:rgba(255,255,255,.15);backdrop-filter:blur(4px);color:#fff;font-size:11.5px;font-weight:500;border:1px solid rgba(255,255,255,.25);transition:background .2s,border-color .2s} .sc-card:hover .sc-tag{background:rgba(0,115,187,.35);border-color:rgba(0,168,232,.6);color:#fff} /* PAYMENT */ .pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .pay-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--r12);padding:20px 14px;text-align:center;transition:border-color .25s,background .25s,transform .25s;box-shadow:0 1px 4px rgba(0,0,0,.04)} .pay-card:hover{border-color:rgba(0,115,187,.3);background:#f0f8ff;transform:translateY(-3px);box-shadow:0 4px 16px rgba(0,115,187,.08)} .pay-ico{display:flex;align-items:center;justify-content:center;height:40px;margin-bottom:10px} .pay-card-label{font-size:13px;font-weight:700;color:var(--text)} .pay-card-sub{font-size:11.5px;color:var(--text2);margin-top:3px} /* flag currency cards */ .pay-flag{font-size:28px;line-height:1} /* TIERS */ .tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .tier{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--r16);padding:28px;display:flex;flex-direction:column;transition:border-color .25s,transform .25s,box-shadow .25s;box-shadow:0 1px 4px rgba(0,0,0,.04)} .tier:hover{transform:translateY(-4px);box-shadow:0 8px 28px rgba(0,0,0,.1)} .tier.featured{border-color:#0073bb;background:linear-gradient(160deg,rgba(0,115,187,.06),rgba(0,115,187,.02));box-shadow:0 0 0 2px rgba(0,115,187,.15)} .tier.featured:hover{box-shadow:0 8px 28px rgba(0,115,187,.15),0 0 0 2px rgba(0,115,187,.25)} .tier-lbl{font-size:11.5px;font-weight:700;color:#0073bb;margin-bottom:6px;text-transform:uppercase;letter-spacing:.05em} .tier h3{font-size:22px;font-weight:800;color:var(--text);margin-bottom:5px;letter-spacing:-.02em} .tier-desc{font-size:13px;color:var(--text2);margin-bottom:20px} .tier-feats{list-style:none;flex:1;display:flex;flex-direction:column;gap:9px;margin-bottom:24px} .tier-feats li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text2)} .tier-feats li::before{content:'';width:16px;height:16px;border-radius:50%;background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.25);flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9 10,3' stroke='%2325D366' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:10px} .tier .btn{width:100%;justify-content:center} /* ABOUT */ .about-grid{display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:start} .about-vis{border-radius:var(--r16);overflow:hidden;position:relative} .about-vis img{width:100%;height:auto;display:block;border-radius:var(--r16);box-shadow:0 4px 24px rgba(0,0,0,.12)} .as6-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:24px} .as6{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--r10);padding:15px;text-align:center;transition:border-color .2s,transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.04)} .as6:hover{border-color:rgba(37,99,235,.3);transform:translateY(-2px)} .as6 b{display:block;font-size:22px;font-weight:800;color:var(--text);letter-spacing:-.02em} .as6 span{font-size:11.5px;color:var(--text2);margin-top:3px;display:block} .cert-list{display:flex;flex-direction:column;gap:9px;margin-top:20px} .cert-item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text2)} .cert-ico{width:18px;height:18px;border-radius:50%;background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.22);flex-shrink:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9 10,3' stroke='%2325D366' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:10px} /* MIGRATION */ .migr-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .migr-vis{background:#1a2332;border-radius:var(--r14);aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.08);font-size:3rem;color:rgba(255,255,255,.25)} .migr-val{display:grid;grid-template-columns:1fr 1fr;gap:14px} .mv{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--r12);padding:20px;display:flex;gap:14px;align-items:start;transition:border-color .2s,transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.04)} .mv:hover{border-color:rgba(37,99,235,.3);transform:translateY(-2px)} .mv.full{grid-column:1/-1} .mv-ico{font-size:1.25rem;flex-shrink:0;margin-top:2px} .mv h4{font-size:14px;font-weight:700;color:var(--text);margin-bottom:5px} .mv p{font-size:13px;color:var(--text2);line-height:1.75} .case-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .case-c{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--r12);padding:22px;transition:border-color .2s,transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.04)} .case-c:hover{border-color:rgba(37,99,235,.3);transform:translateY(-2px)} .case-c h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:7px} .case-c p{font-size:13px;color:var(--text2);line-height:1.75} /* FLOAT */ .float-btns{position:fixed;right:20px;bottom:20px;z-index:600;display:flex;flex-direction:column;gap:10px} .float-btn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;color:#fff;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 16px rgba(0,0,0,.25)} .float-btn:hover{transform:translateY(-3px) scale(1.08);box-shadow:0 8px 24px rgba(0,0,0,.35)} .float-btn svg{width:20px;height:20px;flex-shrink:0} .float-tg{background:var(--tg)}.float-wa{background:var(--wa)} /* FOOTER */ footer{background:#0d1117;border-top:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.45);padding:56px 0 28px;position:relative;z-index:2} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px} .fl-brand{display:flex;align-items:center;gap:9px;margin-bottom:14px} .fl-brand img{height:22px;filter:invert(1)brightness(10)} .fl-brand-n{color:rgba(255,255,255,.75);font-size:14px;font-weight:600} .fl-desc{font-size:13px;line-height:1.8;color:rgba(255,255,255,.35)} .fl-cr{font-size:11.5px;color:rgba(255,255,255,.2);margin-top:10px;line-height:1.7} .fc h4{color:rgba(255,255,255,.6);font-size:12.5px;font-weight:700;margin-bottom:13px;text-transform:uppercase;letter-spacing:.04em} .fc ul{list-style:none;display:flex;flex-direction:column;gap:7px} .fc li a{font-size:13px;color:rgba(255,255,255,.35);transition:color .2s} .fc li a:hover{color:rgba(255,255,255,.8)} .fl-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:20px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.25)} .fl-legal{display:flex;gap:16px} .fl-legal a{color:rgba(255,255,255,.25);transition:color .2s}.fl-legal a:hover{color:rgba(255,255,255,.6)} /* REVEAL ANIMATIONS */ .reveal{opacity:0;transform:translateY(20px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)} .reveal.visible{opacity:1;transform:translateY(0)} .reveal-child{opacity:0;transform:translateY(20px);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)} .reveal-child.visible{opacity:1;transform:translateY(0)} .reveal-child:nth-child(1){transition-delay:.05s} .reveal-child:nth-child(2){transition-delay:.12s} .reveal-child:nth-child(3){transition-delay:.19s} .reveal-child:nth-child(4){transition-delay:.26s} /* si-ic removed, using inline SVG */ /* PROMO */ .promo-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:20px} .promo-main{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:var(--r14);padding:32px;box-shadow:0 1px 4px rgba(0,0,0,.04)} .promo-tag{display:inline-block;padding:3px 12px;border-radius:100px;background:rgba(0,115,187,.08);color:#0073bb;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:1px solid rgba(0,115,187,.18);margin-bottom:16px} .promo-main h3{font-size:22px;font-weight:800;color:var(--text);margin-bottom:10px;letter-spacing:-.02em} .promo-main p{color:var(--text2);font-size:14px;line-height:1.8;margin-bottom:20px} .promo-bullets{display:grid;grid-template-columns:1fr 1fr;gap:10px} .pb{background:#f8fafc;border:1px solid rgba(0,0,0,.07);border-radius:var(--r10);padding:14px} .pb h4{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px} .pb p{font-size:12.5px;color:var(--text2);line-height:1.6} .promo-side{background:linear-gradient(160deg,#0d1117,#1a2332);border:1px solid rgba(255,255,255,.08);border-radius:var(--r14);padding:26px;display:flex;flex-direction:column} .promo-side h3{font-size:19px;font-weight:800;color:#fff;margin-bottom:8px} .promo-side p{color:var(--text2);font-size:13.5px;line-height:1.75;margin-bottom:14px} .promo-side ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px;flex:1} .promo-side li{font-size:13.5px;color:rgba(255,255,255,.65);display:flex;align-items:center;gap:7px} .promo-side li::before{content:"";width:5px;height:5px;border-radius:50%;background:rgba(147,197,253,.5);flex-shrink:0} .promo-acts{display:flex;flex-direction:column;gap:8px} .promo-acts a{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border-radius:var(--r6);font-size:13.5px;font-weight:700;color:#fff;transition:filter .2s} .promo-acts a:hover{filter:brightness(1.12)} .promo-acts a svg{width:14px;height:14px} /* RESPONSIVE */ @media(max-width:1100px){ .w{padding:0 28px} .hero-inner{grid-template-columns:1fr;gap:40px} .hero-inner>div:last-child{display:none} .g4,.tab-pane.active{grid-template-columns:repeat(2,1fr)} .tier-grid,.sc-grid{grid-template-columns:1fr 1fr} .about-grid{grid-template-columns:1fr}.about-grid>div:first-child{display:none} .cta-box{grid-template-columns:1fr;padding:40px 32px}.cta-acts{justify-content:flex-start} .footer-grid{grid-template-columns:1fr 1fr} .promo-grid{grid-template-columns:1fr} .migr-intro{grid-template-columns:1fr}.migr-intro>div:last-child{display:none} .pay-grid{grid-template-columns:repeat(4,1fr)} } @media(max-width:768px){ .w{padding:0 20px}.section{padding:60px 0} .nav-links{display:none}.nav-mob-toggle{display:block} .hero{padding:calc(var(--nav-h)+50px) 0 70px}.hero h1{font-size:36px} .g2,.g3,.g4,.sc-grid,.tier-grid,.stat-row,.case-grid,.migr-val,.as6-grid{grid-template-columns:1fr} .proc-grid{grid-template-columns:1fr 1fr}.proc-grid::before{display:none} .promo-bullets{grid-template-columns:1fr} .mv.full{grid-column:auto} .cta-box{padding:28px 22px}.cta-box h2{font-size:22px} .footer-grid{grid-template-columns:1fr}.fl-bottom{flex-direction:column;gap:8px;text-align:center} .pay-grid{grid-template-columns:repeat(2,1fr)} .trust-row{gap:18px} } /* nav-right 已移除，导航纯净版 */ .nav-inner { justify-content: flex-start; } .nav-links { flex: 1; } /* ── AWS-style card hover glow border ── */ .card{position:relative;overflow:hidden;} .card::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,#0073bb,#00a8e8,#0073bb); transform:scaleX(0);transform-origin:left; transition:transform .3s cubic-bezier(.4,0,.2,1); border-radius:2px 2px 0 0; } .card:hover::before{transform:scaleX(1);} .acard{position:relative;overflow:hidden;} .acard::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,#0073bb,#00a8e8); transform:scaleX(0);transform-origin:left; transition:transform .3s cubic-bezier(.4,0,.2,1); } .acard:hover::before{transform:scaleX(1);} /* sc-card AWS style: subtle glow on hover */ .sc-card{box-shadow:0 2px 8px rgba(0,0,0,.12);} .sc-card:hover{box-shadow:0 0 0 2px rgba(0,115,187,.4),0 16px 48px rgba(0,0,0,.25);} /* pay-card hover */ .pay-card{position:relative;overflow:hidden;} .pay-card::before{ content:'';position:absolute;bottom:0;left:0;right:0;height:3px; transform:scaleX(0);transition:transform .3s; } .pay-card:hover::before{transform:scaleX(1);} .pay-card:nth-child(4)::before,.pay-card:nth-child(5)::before{background:#07C160;} .pay-card:nth-child(6)::before{background:#003087;} .pay-card:nth-child(7)::before{background:#26A17B;} /* stat hover */ .stat-c:hover{box-shadow:0 4px 16px rgba(0,0,0,.08);} /* section background striping (AWS-style alternating) */ .section{background:var(--page-bg);} .section-alt{background:var(--page-alt);} /* ═══ AWS-style 渐变光晕 hover 效果 ═══════════════════════════════ 原理：伪元素做一个渐变边框 + box-shadow glow，hover 时显现 参照 AWS 官网 healthcare/finance 卡片的 cyan→blue 渐变描边 ════════════════════════════════════════════════════════════════ */ /* 移除之前的简单 ::before top bar */ .card::before,.acard::before{ display:none !important; } /* 统一卡片容器 */ .card,.acard,.pay-card,.stat-c,.tier,.case-c,.mv,.as6,.prod{ border: 1px solid rgba(0,0,0,.08) !important; box-shadow: 0 1px 3px rgba(0,0,0,.05); transition: border-color .25s, box-shadow .3s cubic-bezier(.4,0,.2,1), transform .25s !important; position: relative; } /* hover: 渐变光晕描边 */ .card:hover,.acard:hover,.pay-card:hover,.stat-c:hover,.tier:hover,.case-c:hover,.mv:hover,.as6:hover,.prod:hover{ border-color: transparent !important; /* 渐变描边用 box-shadow 叠加模拟 */ box-shadow: 0 0 0 1.5px #00b8d9, /* cyan inner */ 0 0 0 2.5px #0073bb, /* blue outer */ 0 0 16px 2px rgba(0,115,187,.18), /* soft glow */ 0 6px 24px rgba(0,0,0,.09) !important; transform: translateY(-3px) !important; } /* sc-card(场景卡片) 也加发光 */ .sc-card:hover{ box-shadow: 0 0 0 2px #00b8d9, 0 0 0 3.5px rgba(0,115,187,.5), 0 0 24px 4px rgba(0,115,187,.2), 0 12px 40px rgba(0,0,0,.25) !important; } /* featured tier 卡片 */ .tier.featured{ border-color: transparent !important; box-shadow: 0 0 0 1.5px #00b8d9, 0 0 0 2.5px #0073bb, 0 0 20px 3px rgba(0,115,187,.15) !important; } .tier.featured:hover{ box-shadow: 0 0 0 1.5px #00b8d9, 0 0 0 3px #0073bb, 0 0 28px 6px rgba(0,115,187,.22), 0 8px 32px rgba(0,0,0,.12) !important; } /* pay-card hover 颜色随品牌 */ .pay-brand-alipay:hover{ box-shadow: 0 0 0 1.5px #1677FF, 0 0 0 2.5px rgba(22,119,255,.6), 0 0 16px 2px rgba(22,119,255,.15), 0 6px 20px rgba(0,0,0,.08) !important; } .pay-brand-wechat:hover{ box-shadow: 0 0 0 1.5px #07C160, 0 0 0 2.5px rgba(7,193,96,.6), 0 0 16px 2px rgba(7,193,96,.15), 0 6px 20px rgba(0,0,0,.08) !important; } .pay-brand-paypal:hover{ box-shadow: 0 0 0 1.5px #0070E0, 0 0 0 2.5px rgba(0,112,224,.6), 0 0 16px 2px rgba(0,112,224,.15), 0 6px 20px rgba(0,0,0,.08) !important; } .pay-brand-tether:hover{ box-shadow: 0 0 0 1.5px #009393, 0 0 0 2.5px rgba(0,147,147,.6), 0 0 16px 2px rgba(0,147,147,.15), 0 6px 20px rgba(0,0,0,.08) !important; } .pay-brand-bank:hover{ box-shadow: 0 0 0 1.5px #0073bb, 0 0 0 2.5px rgba(0,115,187,.5), 0 0 16px 2px rgba(0,115,187,.15), 0 6px 20px rgba(0,0,0,.08) !important; } .pay-brand-usd:hover{ box-shadow: 0 0 0 1.5px #F5A623, 0 0 0 2.5px rgba(245,166,35,.5), 0 0 16px 2px rgba(245,166,35,.15), 0 6px 20px rgba(0,0,0,.08) !important; } /* 内联 SVG 图标 在白底/深色背景的统一尺寸 */ .brand-svg-wrap{ display:flex;align-items:center;justify-content:center;width:100%;height:100%; } .brand-svg-wrap svg,.brand-svg-wrap img{ max-width:100%;max-height:100%;display:block; } .pay-svg-wrap{ display:flex;align-items:center;justify-content:center;height:40px;width:100%; } .pay-svg-wrap svg{ max-height:36px;max-width:100%; } /* keep hero and explicitly dark sections dark */ .section-dark,.section-dk2{background:var(--navy) !important;color:#e2e8f0 !important;} .section-dark .sh h2,.section-dk2 .sh h2{color:#fff !important;} .section-dark .sh-desc,.section-dk2 .sh-desc{color:rgba(255,255,255,.55) !important;} .section-dark .sh-tag,.section-dk2 .sh-tag{background:rgba(0,115,187,.2);color:rgba(147,197,253,.9);border-color:rgba(0,115,187,.3);} .section-dark .card,.section-dk2 .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);} .section-dark .card h3,.section-dk2 .card h3{color:#fff;} .section-dark .card::before,.section-dk2 .card::before{background:linear-gradient(90deg,rgba(0,115,187,.8),rgba(0,168,232,.8));} /* ── INLINE SVG BRAND ICONS ── */ .brand-svg{display:inline-flex;align-items:center;justify-content:center;height:28px} .brand-svg svg{height:100%;width:auto;max-width:120px} .brand-aws svg{height:22px} .brand-ali svg{height:24px} .inline-svg{display:inline-flex;align-items:center;justify-content:center} .inline-svg-ali svg,.inline-svg-aws svg{height:20px;width:auto;vertical-align:middle;margin-right:4px} /* pay icons */ .pay-svg{display:flex;align-items:center;justify-content:center;height:36px} .pay-svg svg{height:100%;width:auto;max-width:80px} .pay-svg-alipay svg{height:32px} .pay-svg-wechat svg{height:28px} .pay-svg-paypal svg{height:26px} .pay-svg-tether svg{height:28px} /* AWS-style HOVER GLOW BORDER on cards */ /* removes old ::before bar, replaces with full gradient border glow */ .card::before,.acard::before{display:none!important} .card,.acard,.pay-card,.stat-c,.tier,.case-c,.mv,.as6{ position:relative; border-radius:var(--r12); border:1.5px solid transparent; background-clip:padding-box; transition:transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s cubic-bezier(.4,0,.2,1), border-color .22s; } .card:hover,.acard:hover,.pay-card:hover,.stat-c:hover,.tier:hover{ border-color:transparent; box-shadow: 0 0 0 1.5px rgba(0,115,187,.6), 0 0 0 4px rgba(0,168,232,.15), 0 8px 28px rgba(0,115,187,.12), 0 2px 8px rgba(0,0,0,.06); transform:translateY(-3px); } /* AWS exact gradient border glow — using outline+box-shadow combo */ .card:hover{ outline:1.5px solid transparent; box-shadow: 0 0 0 1.5px #0073bb, 0 0 12px 2px rgba(0,168,232,.25), 0 8px 32px rgba(0,115,187,.1); } .acard:hover{ box-shadow: 0 0 0 1.5px #0073bb, 0 0 12px 2px rgba(0,168,232,.2), 0 6px 24px rgba(0,0,0,.07); } .pay-card:hover{ box-shadow: 0 0 0 2px #0073bb, 0 0 16px 3px rgba(0,168,232,.3), 0 4px 16px rgba(0,115,187,.08); transform:translateY(-3px); } /* sc-card: AWS industry card style */ .sc-card{ border:1.5px solid rgba(0,0,0,.07); transition:box-shadow .25s,transform .3s,border-color .25s; } .sc-card:hover{ border-color:transparent; box-shadow: 0 0 0 2px #0073bb, 0 0 20px 4px rgba(0,168,232,.35), 0 16px 48px rgba(0,0,0,.18); transform:translateY(-5px); } /* Remove old dark ::before on cards */ .sc-card::before{display:none!important} /* AWS-style card link arrow */ .card-arrow{ display:inline-flex;align-items:center;gap:4px; font-size:13px;font-weight:600;color:#0073bb; margin-top:12px;transition:gap .2s; } .card:hover .card-arrow,.acard:hover .card-arrow{gap:8px} /* ── 浮动气泡 v4 ── */ .float-btns{position:fixed;right:24px;bottom:28px;z-index:600;display:flex;flex-direction:column;gap:16px} .float-btn-wrap{position:relative;display:flex;align-items:center;justify-content:flex-end} /* 光晕层 */ .float-ring{ position:absolute;right:0;top:50%; width:56px;height:56px; transform:translateY(-50%); border-radius:50%;pointer-events:none;z-index:1; } .float-ring::before,.float-ring::after{ content:'';position:absolute; inset:-8px;border-radius:50%;opacity:0; animation:fring-out 2.8s ease-out infinite; } .float-ring::after{animation-delay:1.4s} .float-tg-ring::before,.float-tg-ring::after{ background:radial-gradient(circle,rgba(34,158,217,.6) 30%,transparent 75%); } .float-wa-ring::before,.float-wa-ring::after{ background:radial-gradient(circle,rgba(37,211,102,.6) 30%,transparent 75%); } @keyframes fring-out{ 0%{transform:scale(.85);opacity:.8} 60%{opacity:.3} 100%{transform:scale(1.9);opacity:0} } /* 圆形按钮 — 带呼吸缩放 */ .float-btn{ position:relative;z-index:2; display:flex;align-items:center;justify-content:center; width:56px;height:56px;border-radius:50%;color:#fff; flex-shrink:0;text-decoration:none; transition:box-shadow .2s; } .float-btn:hover{transform:scale(1.15) !important;animation:none !important;box-shadow:none !important} .float-btn svg{width:24px;height:24px;position:relative;z-index:3} .float-tg{ background:var(--tg); box-shadow:0 4px 18px rgba(34,158,217,.5); animation:breathe-tg 2.8s ease-in-out infinite; } .float-wa{ background:var(--wa); box-shadow:0 4px 18px rgba(37,211,102,.5); animation:breathe-wa 2.8s ease-in-out infinite; animation-delay:1.4s; } @keyframes breathe-tg{ 0%,100%{transform:scale(1);box-shadow:0 4px 18px rgba(34,158,217,.5)} 50%{transform:scale(1.1);box-shadow:0 6px 28px rgba(34,158,217,.85)} } @keyframes breathe-wa{ 0%,100%{transform:scale(1);box-shadow:0 4px 18px rgba(37,211,102,.5)} 50%{transform:scale(1.1);box-shadow:0 6px 28px rgba(37,211,102,.85)} } /* 右上角小红点 — 固定不动，跟随气泡呼吸 */ .float-dot{ position:absolute;top:1px;right:1px; width:12px;height:12px;border-radius:50%; background:#ff3b30;border:2.5px solid #fff; z-index:4;pointer-events:none; } /* 悬停标签 */ .float-btn-label{ position:absolute;right:68px;top:50%; transform:translateY(-50%) translateX(4px); background:rgba(13,17,23,.85);color:#fff; font-size:12px;font-weight:600;letter-spacing:.04em; padding:6px 13px;border-radius:20px; white-space:nowrap;opacity:0;pointer-events:none; transition:opacity .18s,transform .18s; box-shadow:0 2px 12px rgba(0,0,0,.3); backdrop-filter:blur(8px); } .float-btn-label::after{ content:'';position:absolute;right:-6px;top:50%;transform:translateY(-50%); border:6px solid transparent; border-left-color:rgba(13,17,23,.85);border-right:none; } .float-btn-wrap:hover .float-btn-label{opacity:1;transform:translateY(-50%) translateX(0)} /* 入场 */ .float-btn-wrap{animation:float-in .4s ease both} .float-btn-wrap:nth-child(1){animation-delay:.05s} .float-btn-wrap:nth-child(2){animation-delay:.2s} @keyframes float-in{from{opacity:0}to{opacity:1}} /* ── 云厂商品牌卡片 hover 颜色 ── */ .pay-brand-aws:hover{box-shadow:0 0 0 1.5px #FF9900,0 0 0 2.5px rgba(255,153,0,.5),0 0 16px 2px rgba(255,153,0,.12),0 6px 20px rgba(0,0,0,.08)!important} .pay-brand-ali:hover{box-shadow:0 0 0 1.5px #ED6B1E,0 0 0 2.5px rgba(237,107,30,.5),0 0 16px 2px rgba(237,107,30,.12),0 6px 20px rgba(0,0,0,.08)!important} .pay-brand-tencent:hover{box-shadow:0 0 0 1.5px #0052D9,0 0 0 2.5px rgba(0,82,217,.5),0 0 16px 2px rgba(0,82,217,.12),0 6px 20px rgba(0,0,0,.08)!important} .pay-brand-huawei:hover{box-shadow:0 0 0 1.5px #CF0A2C,0 0 0 2.5px rgba(207,10,44,.5),0 0 16px 2px rgba(207,10,44,.12),0 6px 20px rgba(0,0,0,.08)!important} .pay-brand-ctyun:hover{box-shadow:0 0 0 1.5px #0066CC,0 0 0 2.5px rgba(0,102,204,.5),0 0 16px 2px rgba(0,102,204,.12),0 6px 20px rgba(0,0,0,.08)!important} .pay-brand-gcp:hover{box-shadow:0 0 0 1.5px #4285F4,0 0 0 2.5px rgba(66,133,244,.5),0 0 16px 2px rgba(66,133,244,.12),0 6px 20px rgba(0,0,0,.08)!important}