*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--indigo:#1A237E;--indigo-light:#303F9F;--gold:#FFD700;--gold-dark:#C9A800;--white:#FFF;--gray-50:#F5F7FA;--gray-100:#E8ECF1;--gray-400:#8896A6;--gray-700:#3D4F5F;--shadow:0 4px 20px rgba(26,35,126,.1);--radius:12px}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans SC',system-ui,sans-serif;background:var(--gray-50);color:var(--gray-700);line-height:1.7}
a{color:inherit;text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:0 24px}

.topbar{background:var(--indigo);color:rgba(255,255,255,.85);font-size:.82rem;padding:8px 0;text-align:center}
.topbar strong{color:var(--gold)}

.navbar{background:var(--white);box-shadow:var(--shadow);position:sticky;top:0;z-index:100}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:var(--indigo)}
.logo img{width:38px;height:38px}
.logo span{color:var(--gold-dark)}
.nav-menu{display:flex;list-style:none;gap:6px}
.nav-menu a{padding:8px 16px;font-weight:600;font-size:.92rem;color:var(--gray-400);border-radius:6px;transition:.2s}
.nav-menu a:hover,.nav-menu a.active{color:var(--indigo);background:rgba(26,35,126,.06)}
.nav-cta{background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:var(--indigo)!important;padding:10px 22px!important;font-weight:700;border-radius:8px}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(255,215,0,.4)}
.menu-toggle{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--indigo)}

.hero-split{display:grid;grid-template-columns:1fr 1fr;min-height:520px;background:linear-gradient(135deg,var(--indigo) 0%,var(--indigo-light) 100%);color:var(--white);overflow:hidden}
.hero-left{display:flex;flex-direction:column;justify-content:center;padding:60px 0 60px 24px;max-width:560px;margin-left:auto}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,215,0,.15);border:1px solid rgba(255,215,0,.3);padding:5px 14px;border-radius:20px;font-size:.8rem;color:var(--gold);margin-bottom:20px;width:fit-content}
.hero-left h1{font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;line-height:1.25;margin-bottom:16px}
.hero-left h1 em{font-style:normal;color:var(--gold)}
.hero-left p{font-size:1.02rem;opacity:.88;margin-bottom:28px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;padding:12px 28px;border-radius:8px;font-weight:700;font-size:.92rem;border:none;cursor:pointer;transition:.2s}
.btn-gold{background:var(--gold);color:var(--indigo)}
.btn-gold:hover{background:var(--gold-dark);transform:translateY(-2px)}
.btn-ghost{background:transparent;border:2px solid rgba(255,255,255,.4);color:var(--white)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.hero-right{display:flex;align-items:center;justify-content:center;padding:40px;position:relative}
.hero-card{background:var(--white);color:var(--gray-700);border-radius:16px;padding:32px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.hero-card h3{font-size:1rem;color:var(--indigo);margin-bottom:20px;font-weight:800}
.stat-line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--gray-100);font-size:.92rem}
.stat-line:last-child{border:none}
.stat-line .val{font-weight:800;color:var(--indigo)}

.section{padding:72px 0}
.section-alt{background:var(--white)}
.sec-title{text-align:center;margin-bottom:48px}
.sec-title h2{font-size:1.75rem;font-weight:800;color:var(--indigo);margin-bottom:8px}
.sec-title p{color:var(--gray-400);font-size:.95rem}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:step}
.step-card{background:var(--white);border-radius:var(--radius);padding:28px 22px;text-align:center;box-shadow:var(--shadow);position:relative;counter-increment:step}
.step-card::before{content:counter(step);position:absolute;top:-14px;left:50%;transform:translateX(-50%);width:28px;height:28px;background:var(--gold);color:var(--indigo);border-radius:50%;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center}
.step-icon{font-size:2.2rem;margin:12px 0}
.step-card h3{font-size:1rem;font-weight:700;color:var(--indigo);margin-bottom:8px}
.step-card p{font-size:.85rem;color:var(--gray-400)}

.features-3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.feat-box{border-left:4px solid var(--gold);padding:24px 28px;background:var(--white);border-radius:0 var(--radius) var(--radius) 0;box-shadow:var(--shadow)}
.feat-box h3{font-size:1.05rem;font-weight:800;color:var(--indigo);margin-bottom:10px}
.feat-box p{font-size:.9rem;color:var(--gray-400)}

.commission-table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.commission-table th,.commission-table td{padding:16px 20px;text-align:center;font-size:.92rem}
.commission-table th{background:var(--indigo);color:var(--white);font-weight:600}
.commission-table tr:nth-child(even) td{background:var(--gray-50)}
.commission-table .highlight{color:var(--indigo);font-weight:800;font-size:1.1rem}
.tier-badge{display:inline-block;padding:4px 12px;border-radius:4px;font-size:.78rem;font-weight:700}
.tier-bronze{background:#CD7F32;color:#fff}.tier-silver{background:#C0C0C0;color:#333}.tier-gold{background:var(--gold);color:var(--indigo)}.tier-diamond{background:#B9F2FF;color:var(--indigo)}

.faq-list{max-width:760px;margin:0 auto}
.faq-item{background:var(--white);border-radius:var(--radius);margin-bottom:12px;box-shadow:var(--shadow);overflow:hidden}
.faq-q{padding:18px 24px;font-weight:700;color:var(--indigo);cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.faq-a{padding:0 24px 18px;font-size:.9rem;color:var(--gray-400);display:none}
.faq-item.open .faq-a{display:block}

.page-banner{background:linear-gradient(135deg,var(--indigo),var(--indigo-light));color:var(--white);padding:48px 0;text-align:center}
.page-banner h1{font-size:2rem;font-weight:900;margin-bottom:8px}
.page-banner p{opacity:.85}

.form-section{max-width:640px;margin:0 auto;background:var(--white);padding:40px;border-radius:var(--radius);box-shadow:var(--shadow)}
.form-group{margin-bottom:20px}
.form-group label{display:block;font-weight:600;font-size:.88rem;margin-bottom:6px;color:var(--indigo)}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px 16px;border:1px solid var(--gray-100);border-radius:8px;font-size:.92rem;font-family:inherit}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(26,35,126,.1)}

.support-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.support-card{background:var(--white);border-radius:var(--radius);padding:32px;text-align:center;box-shadow:var(--shadow)}
.support-card .icon{font-size:2.5rem;margin-bottom:14px}
.support-card h3{font-weight:800;color:var(--indigo);margin-bottom:8px}
.support-card p{font-size:.88rem;color:var(--gray-400)}

.footer{background:var(--indigo);color:rgba(255,255,255,.7);padding:48px 0 24px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;margin-bottom:32px}
.footer h4{color:var(--gold);margin-bottom:14px;font-size:.95rem}
.footer ul{list-style:none}
.footer li{margin-bottom:8px;font-size:.85rem}
.footer a:hover{color:var(--white)}
.friend-links{text-align:center;margin-bottom:16px;font-size:.85rem;color:rgba(255,255,255,.75)}
.friend-links a{color:var(--gold);margin:0 4px}
.friend-links a:hover{color:var(--white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;text-align:center;font-size:.8rem}

@media(max-width:900px){.hero-split{grid-template-columns:1fr}.hero-left{padding:48px 24px;margin:0}.steps,.features-3,.support-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}}
@media(max-width:640px){.nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--white);flex-direction:column;padding:12px;box-shadow:var(--shadow)}.nav-menu.open{display:flex}.menu-toggle{display:block}}