*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei',Arial,sans-serif;background:#0f0f1a;color:#fff;line-height:1.6}
.container{max-width:1400px;margin:0 auto;padding:0 40px}
nav{position:fixed;top:0;left:0;right:0;z-index:1000;padding:20px 0;transition:all 0.3s}
nav.scrolled{background:rgba(15,15,26,0.95);backdrop-filter:blur(20px);box-shadow:0 5px 30px rgba(0,0,0,0.3)}
nav .container{display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.logo img{height:40px}
.logo span{font-size:1.4em;font-weight:bold;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;gap:40px}
.nav-links a{color:rgba(255,255,255,0.8);text-decoration:none;font-size:15px;transition:color 0.3s}
.nav-links a:hover{color:#667eea}
.hero{min-height:100vh;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:80px}
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 50%,rgba(102,126,234,0.15) 0%,transparent 50%),radial-gradient(circle at 70% 80%,rgba(118,75,162,0.15) 0%,transparent 50%);animation:float 20s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(-2%,2%)}}
.hero-content{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:1}
.hero-text h1{font-size:3.5em;line-height:1.2;margin-bottom:24px}
.hero-text h1 span{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-text p{font-size:1.25em;color:rgba(255,255,255,0.7);margin-bottom:40px;max-width:500px}
.hero-btns{display:flex;gap:20px}
.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px 40px;border-radius:50px;text-decoration:none;font-weight:600;transition:all 0.3s;box-shadow:0 10px 40px rgba(102,126,234,0.4)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 50px rgba(102,126,234,0.5)}
.btn-secondary{border:2px solid rgba(255,255,255,0.3);color:#fff;padding:16px 40px;border-radius:50px;text-decoration:none;font-weight:600;transition:all 0.3s}
.btn-secondary:hover{border-color:#667eea;background:rgba(102,126,234,0.1)}
.hero-visual{position:relative}
.generator-card{background:rgba(255,255,255,0.05);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);border-radius:24px;padding:40px;box-shadow:0 25px 80px rgba(0,0,0,0.4)}
.generator-card h2{text-align:center;margin-bottom:30px;font-size:1.5em}
.input-row{display:flex;gap:15px;margin-bottom:20px}
.input-group{flex:1}
.input-group label{display:block;color:rgba(255,255,255,0.6);font-size:13px;margin-bottom:8px}
.input-group input{width:100%;padding:14px 18px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:12px;color:#fff;font-size:16px;transition:all 0.3s}
.input-group input:focus{outline:none;border-color:#667eea;background:rgba(102,126,234,0.1)}
.options-row{display:flex;gap:25px;margin-bottom:25px}
.checkbox-item{display:flex;align-items:center;gap:10px;cursor:pointer}
.checkbox-item input{width:18px;height:18px;accent-color:#667eea}
.checkbox-item label{color:rgba(255,255,255,0.8);cursor:pointer}
.btn-generate{width:100%;padding:18px;background:linear-gradient(135deg,#667eea,#764ba2);border:none;border-radius:14px;color:#fff;font-size:18px;font-weight:600;cursor:pointer;transition:all 0.3s}
.btn-generate:hover{transform:scale(1.02);box-shadow:0 10px 40px rgba(102,126,234,0.4)}
.result-area{margin-top:25px;padding:30px;background:rgba(0,0,0,0.3);border-radius:16px;text-align:center}
.result-numbers{font-size:2.5em;font-weight:bold;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;word-break:break-all;min-height:50px}
.btn-copy{margin-top:15px;padding:12px 30px;background:transparent;border:1px solid rgba(255,255,255,0.3);border-radius:25px;color:#fff;cursor:pointer;transition:all 0.3s}
.btn-copy:hover{border-color:#667eea;background:rgba(102,126,234,0.2)}

.features{padding:120px 0;background:linear-gradient(180deg,#0f0f1a 0%,#1a1a2e 100%)}
.section-header{text-align:center;margin-bottom:80px}
.section-header h2{font-size:2.8em;margin-bottom:20px}
.section-header h2 span{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.section-header p{color:rgba(255,255,255,0.6);font-size:1.2em;max-width:600px;margin:0 auto}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.feature-card{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:20px;padding:40px;transition:all 0.4s;position:relative;overflow:hidden}
.feature-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);transform:scaleX(0);transition:transform 0.4s}
.feature-card:hover{transform:translateY(-10px);border-color:rgba(102,126,234,0.3);background:rgba(255,255,255,0.05)}
.feature-card:hover::before{transform:scaleX(1)}
.feature-icon{width:70px;height:70px;background:linear-gradient(135deg,rgba(102,126,234,0.2),rgba(118,75,162,0.2));border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:25px}
.feature-icon img{width:40px;height:40px}
.feature-card h3{font-size:1.4em;margin-bottom:15px}
.feature-card p{color:rgba(255,255,255,0.6);line-height:1.8}
.how-it-works{padding:120px 0;background:#1a1a2e}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:60px}
.step{text-align:center;position:relative}
.step::after{content:'';position:absolute;top:40px;right:-20px;width:40px;height:2px;background:linear-gradient(90deg,#667eea,transparent)}
.step:last-child::after{display:none}
.step-num{width:80px;height:80px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2em;font-weight:bold;margin:0 auto 25px}
.step h3{font-size:1.2em;margin-bottom:12px}
.step p{color:rgba(255,255,255,0.6);font-size:0.95em}
.faq{padding:120px 0;background:linear-gradient(180deg,#1a1a2e 0%,#0f0f1a 100%)}
.faq-list{max-width:800px;margin:0 auto}
.faq-item{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;margin-bottom:20px;overflow:hidden}
.faq-item h3{padding:25px 30px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background 0.3s}
.faq-item h3:hover{background:rgba(255,255,255,0.05)}
.faq-item h3::after{content:'+';font-size:1.5em;color:#667eea}
.faq-item p{padding:0 30px 25px;color:rgba(255,255,255,0.7);line-height:1.8;display:none}
.faq-item.active p{display:block}
.faq-item.active h3::after{content:'-'}
.history-section{margin-top:30px;padding:20px;background:rgba(0,0,0,0.2);border-radius:12px}
.history-section h4{color:rgba(255,255,255,0.6);font-size:14px;margin-bottom:15px}
.history-list{max-height:150px;overflow-y:auto}
.history-item{padding:10px;border-bottom:1px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.5);font-size:13px}
footer{background:#0a0a12;padding:60px 0 30px}
.footer-content{display:flex;justify-content:space-between;align-items:center;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,0.1)}
.footer-logo{display:flex;align-items:center;gap:12px}
.footer-logo img{height:36px}
.footer-logo span{font-size:1.2em;font-weight:bold}
.footer-links{display:flex;gap:30px}
.footer-links a{color:rgba(255,255,255,0.6);text-decoration:none;transition:color 0.3s}
.footer-links a:hover{color:#667eea}
.footer-bottom{padding-top:30px;text-align:center;color:rgba(255,255,255,0.4);font-size:14px}
.footer-bottom a{color:rgba(255,255,255,0.6);text-decoration:none}
.footer-bottom a:hover{color:#667eea}
@media(max-width:1024px){.hero-content{grid-template-columns:1fr;text-align:center}.hero-text p{margin:0 auto 40px}.hero-btns{justify-content:center}.features-grid{grid-template-columns:repeat(2,1fr)}.steps{grid-template-columns:repeat(2,1fr)}.step::after{display:none}}
@media(max-width:768px){.container{padding:0 15px}.hero{padding-top:70px;min-height:auto;padding-bottom:40px}.hero-text h1{font-size:1.8em;margin-bottom:16px}.hero-text p{font-size:1em;margin-bottom:25px}.hero-btns{flex-direction:column;gap:12px}.btn-primary,.btn-secondary{padding:14px 30px;font-size:15px;text-align:center}.generator-card{padding:25px 20px;border-radius:18px}.generator-card h2{font-size:1.2em;margin-bottom:20px}.input-row{flex-direction:column;gap:12px}.input-group input{padding:12px 14px;font-size:16px}.options-row{justify-content:center}.btn-generate{padding:15px;font-size:16px}.result-area{padding:20px}.result-numbers{font-size:1.6em;min-height:40px}.btn-copy{padding:10px 25px;font-size:14px}.history-section{padding:15px}.features{padding:60px 0}.section-header{margin-bottom:40px}.section-header h2{font-size:1.8em}.section-header p{font-size:1em}.features-grid{grid-template-columns:1fr;gap:20px}.feature-card{padding:25px}.feature-icon{width:55px;height:55px;margin-bottom:18px}.feature-icon img{width:30px;height:30px}.feature-card h3{font-size:1.2em}.how-it-works{padding:60px 0}.steps{grid-template-columns:1fr;gap:30px;margin-top:40px}.step-num{width:60px;height:60px;font-size:1.5em;margin-bottom:18px}.faq{padding:60px 0}.faq-item h3{padding:18px 20px;font-size:0.95em}.faq-item p{padding:0 20px 18px;font-size:0.9em}.nav-links{display:none}.footer-content{flex-direction:column;gap:25px;text-align:center}.footer-links{flex-wrap:wrap;justify-content:center;gap:15px}.footer-bottom{font-size:13px}.showcase-image{margin-top:40px}.showcase-image img{border-radius:12px}}

.showcase-image{margin-top:80px;text-align:center}
.showcase-image img{max-width:100%;height:auto;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.1)}

@media(max-width:480px){.hero-text h1{font-size:1.5em}.generator-card{padding:20px 15px}.result-numbers{font-size:1.4em}.section-header h2{font-size:1.5em}.logo span{font-size:1.1em}.logo img{height:32px}}

.seo-content{padding:80px 0;background:#1a1a2e}
.seo-content h2{font-size:2em;margin-bottom:30px;color:#fff}
.seo-content h3{font-size:1.4em;margin:25px 0 15px;color:#fff}
.seo-content p{color:rgba(255,255,255,0.7);line-height:1.9;margin-bottom:15px}
.seo-content ul{color:rgba(255,255,255,0.7);line-height:2;padding-left:25px;margin-bottom:20px}
.seo-content a{color:#667eea;text-decoration:none}
.seo-content a:hover{text-decoration:underline}

.tools-nav{padding:80px 0;background:#0f0f1a}
.tools-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:40px}
.tool-item{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:25px 20px;text-align:center;text-decoration:none;color:#fff;transition:all 0.3s}
.tool-item:hover{background:rgba(102,126,234,0.1);border-color:rgba(102,126,234,0.3);transform:translateY(-5px)}
.tool-item.active{background:rgba(102,126,234,0.15);border-color:#667eea}
.tool-item span{display:block;font-size:2em;margin-bottom:10px}
.tool-item h4{font-size:14px;font-weight:normal;color:rgba(255,255,255,0.9)}
@media(max-width:1024px){.tools-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:768px){.tools-grid{grid-template-columns:repeat(3,1fr);gap:12px}.tool-item{padding:18px 12px}.tool-item span{font-size:1.5em}.tool-item h4{font-size:12px}}
@media(max-width:480px){.tools-grid{grid-template-columns:repeat(2,1fr)}}

select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23fff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:40px!important;cursor:pointer}
select option{background:#1a1a2e;color:#fff;padding:10px}

.select-input{width:100%;padding:14px 18px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.15);border-radius:12px;color:#fff;font-size:16px;transition:all 0.3s}
.select-input:focus{outline:none;border-color:#667eea;background:rgba(102,126,234,0.1)}