*{margin:0;padding:0;box-sizing:border-box;font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
:root{--bg:#f8f9fa;--card-bg:#ffffff;--text:#1a1a2e;--text2:#555;--border:#e0e0e0;--accent:#6c63ff;--accent2:#ff6584;--glass:rgba(255,255,255,0.7);--shadow:0 8px 32px rgba(0,0,0,0.08);--radius:24px;--nav-bg:rgba(255,255,255,0.85);--footer-bg:#1a1a2e;--footer-text:#ccc}
.dark{--bg:#0f0f1a;--card-bg:#1a1a2e;--text:#e0e0e0;--text2:#aaa;--border:#2a2a3e;--glass:rgba(20,20,35,0.75);--shadow:0 8px 32px rgba(0,0,0,0.5);--nav-bg:rgba(15,15,26,0.9);--footer-bg:#0a0a14}
body{background:var(--bg);color:var(--text);transition:all .3s;scroll-behavior:smooth;line-height:1.7;overflow-x:hidden}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.hero{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#fff;padding:100px 20px 80px;text-align:center;position:relative;overflow:hidden;border-radius:0 0 40px 40px;margin-bottom:40px}
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 40%,rgba(108,99,255,0.3) 0%,transparent 60%),radial-gradient(circle at 70% 60%,rgba(255,101,132,0.2) 0%,transparent 50%);animation:heroGlow 8s ease-in-out infinite alternate}
@keyframes heroGlow{0%{transform:translate(0,0)}100%{transform:translate(20px,20px)}}
.hero h1{font-size:clamp(2rem,6vw,4rem);margin-bottom:20px;position:relative;z-index:1;text-shadow:0 4px 30px rgba(0,0,0,0.3)}
.hero p{font-size:clamp(1rem,2.5vw,1.4rem);max-width:700px;margin:0 auto 30px;opacity:0.9;position:relative;z-index:1}
.hero .btn{display:inline-block;background:var(--accent);color:#fff;padding:14px 40px;border-radius:50px;text-decoration:none;font-weight:600;transition:all .3s;position:relative;z-index:1;box-shadow:0 8px 25px rgba(108,99,255,0.4)}
.hero .btn:hover{transform:translateY(-3px);box-shadow:0 12px 35px rgba(108,99,255,0.6)}
nav{background:var(--nav-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:sticky;top:0;z-index:1000;border-bottom:1px solid var(--border);padding:0 20px}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;height:64px}
.logo{font-size:1.6rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-decoration:none}
.nav-links{display:flex;gap:28px;list-style:none;align-items:center}
.nav-links a{text-decoration:none;color:var(--text);font-weight:500;transition:color .2s;position:relative;font-size:0.95rem}
.nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);transition:width .3s}
.nav-links a:hover::after{width:100%}
.nav-links a:hover{color:var(--accent)}
.menu-toggle{display:none;background:none;border:none;font-size:1.8rem;color:var(--text);cursor:pointer}
.dark-toggle{background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--text);margin-left:12px}
.search-box{display:flex;align-items:center;background:var(--card-bg);border-radius:30px;padding:4px 16px;border:1px solid var(--border);margin-left:16px}
.search-box input{border:none;background:transparent;outline:none;padding:8px 4px;width:120px;color:var(--text);font-size:0.9rem}
.search-box button{background:none;border:none;cursor:pointer;font-size:1.1rem;color:var(--text2)}
.card{background:var(--card-bg);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1)}
.card:hover{transform:translateY(-6px);box-shadow:0 16px 48px rgba(0,0,0,0.12)}
.glass{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius);border:1px solid rgba(255,255,255,0.2)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:40px 0}
.flex-center{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:16px 0;font-size:0.9rem;color:var(--text2)}
.breadcrumb li+li::before{content:'›';padding:0 8px;color:var(--text2)}
.breadcrumb a{color:var(--accent);text-decoration:none}
h2{font-size:clamp(1.6rem,4vw,2.4rem);margin:40px 0 20px;position:relative;display:inline-block}
h2::after{content:'';display:block;width:60px;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:4px;margin-top:8px}
h3{font-size:1.4rem;margin:20px 0 10px}
section{margin:60px 0}
img{max-width:100%;height:auto;border-radius:16px;display:block}
.lazy{opacity:0;transition:opacity .5s}
.lazy.loaded{opacity:1}
footer{background:var(--footer-bg);color:var(--footer-text);padding:60px 20px 20px;margin-top:60px;border-radius:40px 40px 0 0}
footer a{color:var(--accent2);text-decoration:none}
footer .grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.copyright{text-align:center;padding-top:30px;border-top:1px solid #333;margin-top:30px;font-size:0.9rem}
#backTop{position:fixed;bottom:30px;right:30px;width:50px;height:50px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:1.6rem;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,0.2);display:none;z-index:999;transition:all .3s}
#backTop:hover{transform:scale(1.1)}
.faq-item{border-bottom:1px solid var(--border);padding:16px 0;cursor:pointer}
.faq-question{font-weight:600;display:flex;justify-content:space-between;align-items:center}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease;padding-top:8px;color:var(--text2);line-height:1.8}
.faq-item.active .faq-answer{max-height:400px}
.faq-item.active .faq-question::after{transform:rotate(180deg)}
.faq-question::after{content:'▼';font-size:0.8rem;transition:transform .3s}
.carousel{overflow:hidden;position:relative;border-radius:var(--radius)}
.carousel-track{display:flex;transition:transform .5s ease}
.carousel-item{min-width:100%;padding:20px}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.4);color:#fff;border:none;padding:12px 16px;font-size:1.4rem;cursor:pointer;border-radius:50%;z-index:10;backdrop-filter:blur(4px)}
.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}
.fade-up{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}
@media(max-width:768px){
    .nav-links{display:none;flex-direction:column;background:var(--card-bg);position:absolute;top:64px;left:0;width:100%;padding:20px;box-shadow:var(--shadow);border-radius:0 0 20px 20px}
    .nav-links.open{display:flex}
    .menu-toggle{display:block}
    .search-box{display:none}
    .hero{padding:60px 20px 50px}
    footer .grid{grid-template-columns:1fr}
}
@media(prefers-color-scheme:dark){
    :root{--bg:#0f0f1a;--card-bg:#1a1a2e;--text:#e0e0e0;--text2:#aaa;--border:#2a2a3e;--glass:rgba(20,20,35,0.75);--shadow:0 8px 32px rgba(0,0,0,0.5);--nav-bg:rgba(15,15,26,0.9);--footer-bg:#0a0a14}
}