/* roulang page: index */
:root{
  --primary:#ff4757;
  --primary-dark:#e63946;
  --primary-light:#ffe8e8;
  --bg:#faf9fc;
  --dark:#1a1a2e;
  --text:#2d2d3a;
  --muted:#6b7280;
  --border:#e5e7eb;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 6px 24px rgba(0,0,0,.08);
  --shadow-lg:0 20px 50px rgba(0,0,0,.12);
  --radius:18px;
  --radius-sm:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans),'Inter','PingFang SC','Microsoft YaHei',system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.8;letter-spacing:.2px}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4{line-height:1.3;font-weight:800;letter-spacing:-.3px}
::selection{background:var(--primary);color:#fff}
.bg-image-hero{background-image:url('/assets/images/backpic/back-1.jpg');background-size:cover;background-position:center;background-color:#1a1a2e;background-blend-mode:soft-light}

/* Header & Nav */
.header-main{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:box-shadow .25s;
}
.header-main.is-scrolled{box-shadow:0 4px 24px rgba(0,0,0,.07)}
.nav-wrap{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:72px}
.logo-brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900;color:var(--dark)}
.logo-brand .logo-mark{width:36px;height:36px;background:linear-gradient(135deg,#ff4757,#ff6b6b);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;box-shadow:0 4px 12px rgba(255,71,87,.25)}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{padding:8px 18px;border-radius:100px;font-weight:600;font-size:15px;color:#4b5563;transition:all .22s}
.nav-links a:hover{background:var(--primary-light);color:var(--primary-dark)}
.nav-links a.active{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(255,71,87,.25)}
.nav-cta{padding:8px 20px!important;background:var(--dark);color:#fff!important;border-radius:100px!important}
.nav-cta:hover{background:#333!important;color:#fff!important;transform:translateY(-1px)}
.menu-toggle{display:none;background:none;border:none;font-size:24px;color:var(--dark);cursor:pointer;padding:6px}

@media(max-width:768px){
  .menu-toggle{display:block}
  .nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:16px 20px;border-bottom:1px solid #eee;gap:4px;box-shadow:0 16px 30px rgba(0,0,0,.08)}
  .nav-links.open{display:flex}
  .nav-links a{width:100%;padding:12px 18px;border-radius:12px}
}

/* Hero Section — 深色横幅 Bento */
.hero-section{position:relative;overflow:hidden;background:var(--dark);color:#fff;padding:96px 0 76px}
.hero-section::before{content:'';position:absolute;top:-240px;right:-120px;width:560px;height:560px;border-radius:999px;background:radial-gradient(circle,rgba(255,71,87,.15),transparent 70%)}
.hero-section::after{content:'';position:absolute;bottom:-160px;left:-80px;width:400px;height:400px;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent)} 
.badge-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,71,87,.15);border:1px solid rgba(255,71,87,.3);color:#ffb3b8;font-size:13px;font-weight:600;padding:6px 18px;border-radius:100px;letter-spacing:.6px}

/* Bento grid */
.bento-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:20px 22px;transition:all .25s;backdrop-filter:blur(4px)}
.bento-card:hover{border-color:rgba(255,71,87,.35);transform:translateY(-3px);background:rgba(255,255,255,.07)}
.feature-list li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;color:#cbd5e1;font-size:14px}
.feature-list i{color:#ff6b6b;margin-top:5px}

/* Section shared */
.section-padding{padding:86px 0}
.section-tag{color:var(--primary-dark);font-weight:800;font-size:13px;letter-spacing:3px}
.card-base{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.04);transition:.25s}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;border-radius:100px;padding:10px 26px;border:none;cursor:pointer;transition:all .22s;justify-content:center}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(255,71,87,.3)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,71,87,.4)}
.btn-outline{border:2px solid var(--primary);color:var(--primary);background:transparent}
.btn-outline:hover{background:var(--primary-light)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:#313152;transform:translateY(-1px)}

/* Mega Nav Dropdown */
.dropdown-menu{display:none;position:absolute;top:72px;left:0;right:0;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);padding:0;box-shadow:0 18px 45px rgba(0,0,0,.1);border-top:1px solid #eee}

/* Product Grid */
.product-card{padding:22px}
.product-card .cover{margin-bottom:16px}

/* Score table */
.pill{display:inline-block;background:var(--primary-light);color:var(--primary-dark);padding:3px 12px;border-radius:30px;font-size:13px;font-weight:700}

/* Steps horizontal */
.step-box{position:relative;text-align:center;padding:12px 6px}
.step-num{width:46px;height:46px;border-radius:26px;background:var(--primary);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;color:#fff;font-weight:800;font-size:18px;box-shadow:0 6px 20px rgba(255,71,87,.3)}

/* Testimonials */
.testimonial{background:#fff;border-radius:var(--radius);padding:20px 20px;box-shadow:var(--shadow-sm)}
.stars i{color:#ffb800;font-size:14px}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover}

/* FAQ */
.faq-item{background:#fff;border:1px solid #eee;border-radius:14px;padding:0;transition:all .2s;overflow:hidden}
.faq-item+.faq-item{margin-top:10px}
.faq-question{padding:18px 22px;font-weight:700;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.faq-answer{padding:0 22px;color:#4b5563;max-height:0;overflow:hidden;transition:max-height .25s ease}
input.toggle-faq{display:none}
input.toggle-faq:checked ~ .faq-question i{transform:rotate(45deg)}
input.toggle-faq:checked ~ .faq-answer{padding-bottom:18px;max-height:300px;transition:.25s}

/* Footer */
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:24px}

@media(max-width:768px){
  .section-padding{padding:60px 0}
  .hero-section{padding:60px 0}
}

/* roulang page: category1 */
:root{
 --primary:#ff4757;
 --primary-dark:#e63946;
 --primary-light:#ffe8e8;
 --bg:#faf9fc;
 --dark:#1a1a2e;
 --text:#2d2d3a;
 --muted:#6b7280;
 --border:#e5e7eb;
 --shadow-sm:0 1px 3px rgba(0,0,0,.06);
 --shadow-md:0 6px 24px rgba(0,0,0,.08);
 --shadow-lg:0 20px 50px rgba(0,0,0,.12);
 --radius:18px;
 --radius-sm:10px;
 --font-sans:'Inter','PingFang SC','Microsoft YaHei',system-ui,-apple-system,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--font-sans);color:var(--text);background:var(--bg);line-height:1.8;letter-spacing:.2px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button{cursor:pointer}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
.section-padding{padding:86px 0}
.section-tag{color:var(--primary-dark);font-weight:800;font-size:13px;letter-spacing:3px;text-transform:uppercase}
.badge-pill{display:inline-flex;align-items:center;gap:10px;background:rgba(255,71,87,.15);border:1px solid rgba(255,71,87,.3);color:#ffb3b8;font-size:13px;font-weight:600;padding:6px 18px;border-radius:100px;letter-spacing:.6px}
.badge-pill-light{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;font-size:15px;border-radius:100px;padding:11px 27px;border:none;cursor:pointer;transition:all .22s}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 18px rgba(255,71,87,.3)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 10px 26px rgba(255,71,87,.4)}
.btn-ghost-light{border:2px solid rgba(255,255,255,.75);color:#fff;background:transparent;transition:all .22s}
.btn-ghost-light:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-2px)}
.btn-dark{background:var(--dark);color:#fff}
.btn-dark:hover{background:#313152;transform:translateY(-1px)}
.btn-outline{border:2px solid var(--primary);color:var(--primary);background:transparent}
.btn-outline:hover{background:var(--primary-light)}
.card-base{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.04);transition:.3s}
.pill{display:inline-block;background:var(--primary-light);color:var(--primary-dark);padding:3px 14px;border-radius:30px;font-size:13px;font-weight:700}
.header-main{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(0,0,0,.06);transition:box-shadow .25s}
.header-main.is-scrolled{box-shadow:0 4px 24px rgba(0,0,0,.07)}
.nav-wrap{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:72px}
.logo-brand{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:900;color:var(--dark)}
.logo-brand .logo-mark{width:36px;height:36px;background:linear-gradient(135deg,#ff4757,#ff6b6b);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;box-shadow:0 4px 12px rgba(255,71,87,.25)}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links a{padding:8px 18px;border-radius:100px;font-weight:600;font-size:15px;color:#4b5563;transition:all .22s;display:flex;align-items:center;gap:6px}
.nav-links a:hover{background:var(--primary-light);color:var(--primary-dark)}
.nav-links a.active{background:var(--primary);color:#fff;box-shadow:0 4px 14px rgba(255,71,87,.25)}
.nav-links .nav-cta{padding:8px 20px!important;background:var(--dark);color:#fff!important;border-radius:100px!important}
.nav-links .nav-cta:hover{background:#333!important;color:#fff!important;transform:translateY(-1px)}
.menu-toggle{display:none;background:none;border:none;font-size:24px;color:var(--dark);cursor:pointer;padding:6px}
.carousel-dot{width:9px;height:9px;border-radius:999px;background:rgba(255,255,255,.35);border:0;transition:all .25s;margin:0 5px;padding:0}
.carousel-dot.active{background:var(--primary);width:26px}
.carousel-item{display:none;animation:fadeUp .45s ease both}
.carousel-item.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.card-hover{transition:transform .25s,box-shadow .25s;border:1px solid #eee;border-radius:18px}
.card-hover:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:transparent}
.step-icon{width:48px;height:48px;border-radius:16px;background:var(--primary-light);color:var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.faq-item{background:#fff;border:1px solid #eee;border-radius:14px;padding:0;transition:box-shadow .2s, border-color .2s;overflow:hidden}
.faq-item:hover{border-color:#ffc8cd;box-shadow:var(--shadow-sm)}
.faq-item+.faq-item{margin-top:12px}
.faq-item input.toggle-faq{position:absolute;opacity:0;pointer-events:none}
.faq-question{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:700;font-size:16px;cursor:pointer;color:var(--dark);transition:background .2s}
.faq-question i{color:var(--primary);transition:transform .25s}
.faq-answer{max-height:0;overflow:hidden;color:#4b5563;transition:max-height .3s ease}
input.toggle-faq:checked ~ .faq-question{background:#fff7f7}
input.toggle-faq:checked ~ .faq-question i{transform:rotate(45deg)}
input.toggle-faq:checked ~ .faq-answer{max-height:360px;padding:0 22px 20px;transition:max-height .3s ease}
.faq-question:hover{background:#fff8f8}
.input-cta{width:100%;border:1px solid #ccc;border-radius:100px;padding:12px 20px;font-size:15px;background:#fff;transition:border-color .2s, box-shadow .2s}
.input-cta:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,71,87,.15)}
@media(max-width:768px){
 .container{padding:0 18px}
 .section-padding{padding:60px 0}
 .nav-links{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:16px 20px;border-bottom:1px solid #eee;gap:4px;box-shadow:0 16px 30px rgba(0,0,0,.08)}
 .nav-links.open{display:flex}
 .nav-links a{width:100%;padding:12px 18px;border-radius:12px}
 .nav-links a.nav-cta{width:fit-content}
 .menu-toggle{display:block}
}