/* roulang page: index */
:root{
  --bg-page:#F6F4FA;
  --bg-card:#FFFFFF;
  --bg-deep:#1D1633;
  --text-main:#1D1836;
  --text-sub:#615B78;
  --text-mute:#A6A0BC;
  --primary:#6C4CE0;
  --grad-1:#5C43D8;
  --grad-2:#8C4DE2;
  --grad-3:#E05A9A;
  --cyan:#1BC8B6;
  --gold:#F5A94E;
  --red:#E65C7B;
  --border-color:#ECE8F7;
  --radius-lg:20px;
  --radius-md:16px;
  --shadow-card:0 8px 28px rgba(28,22,58,0.08);
  --shadow-deep:0 20px 50px rgba(28,22,58,0.25);
  --font-stack:"HarmonyOS Sans SC","MiSans","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --transition-fast:0.18s ease;
  --nav-width:260px;
  --font-h1:clamp(2.2rem,4vw,3.4rem);
  --font-h2:clamp(1.5rem,2.5vw,2.1rem);
  --font-h3:1.2rem;
  --font-body:1rem;
}
html{scroll-behavior:smooth;}
body{margin:0;padding:0;background-color:var(--bg-page);color:var(--text-main);font-family:var(--font-stack);font-size:var(--font-body);line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
*,*::before,*::after{box-sizing:border-box;}
img{max-width:100%;height:auto;display:block;}
a{color:var(--primary);text-decoration:none;transition:color var(--transition-fast);}
a:hover{color:#7e5dee;}
h1,h2,h3,h4,h5,h6{line-height:1.3;margin-top:0;letter-spacing:-0.01em;}
p{margin-top:0;margin-bottom:1.25rem;color:var(--text-sub);}
ul,ol{margin:0;padding:0;list-style:none;}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:var(--text-main);}
:focus-visible{outline:2px solid var(--primary)!important;outline-offset:2px;border-radius:4px;}
::selection{background:rgba(108,76,224,0.18);}
/* Layout base */
#app{display:flex;min-height:100vh;}
.sidebar{width:var(--nav-width);background-color:var(--bg-deep);color:#fff;position:fixed;inset:0 auto 0 0;z-index:50;display:flex;flex-direction:column;padding:32px 20px 20px;overflow-y:auto;}
.main-area{flex:1;margin-left:var(--nav-width);display:flex;flex-direction:column;min-width:0;}
.content{flex:1;width:100%;}
.container{max-width:1200px;margin:0 auto;padding:0 48px;width:100%;}
/* sidebar brand */
.brand-block{display:flex;align-items:center;gap:14px;margin-bottom:44px;padding:0 10px;}
.logo-dots{width:44px;height:44px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;padding:6px;background:rgba(255,255,255,0.04);border-radius:12px;border:1px solid rgba(255,255,255,0.08);flex-shrink:0;}
.logo-dots i{display:block;border-radius:50%;background:linear-gradient(135deg,#6C4CE0,#8C4DE2,#E05A9A);}
.logo-text{font-size:1.2rem;font-weight:800;color:#fff;letter-spacing:0.02em;line-height:1.2;white-space:nowrap;}
.logo-sub{font-size:10px;letter-spacing:0.06em;color:rgba(255,255,255,0.4);margin-top:2px;font-weight:400;}
/* sidebar nav */
.nav-list{margin-top:8px;flex:1;}
.nav-item{display:flex;align-items:center;gap:12px;padding:0 14px;height:52px;color:rgba(255,255,255,0.7);font-size:0.95rem;font-weight:500;border-radius:10px;margin-bottom:4px;position:relative;transition:all var(--transition-fast);cursor:pointer;}
.nav-item i{font-size:1.1rem;width:22px;text-align:center;color:rgba(255,255,255,0.5);transition:color var(--transition-fast);}
.nav-item:hover{background:rgba(255,255,255,0.05);color:#fff;}
.nav-item:hover i{color:#fff;}
.nav-item.active{color:#fff;background:rgba(108,76,224,0.1);}
.nav-item.active::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:linear-gradient(to bottom,var(--grad-1),var(--grad-3));border-radius:0 4px 4px 0;}
.nav-item.active i{color:var(--primary);}
/* sidebar action */
.sidebar-action-card{background:linear-gradient(135deg,rgba(108,76,224,0.15),rgba(224,90,154,0.06));border:1px solid rgba(108,76,224,0.2);border-radius:18px;padding:20px 18px 16px;margin-top:20px;}
.sidebar-action-card .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 rgba(27,200,182,0.4);animation:pulse 2s infinite;margin-right:8px;}
.sidebar-action-card .status-text{font-size:0.85rem;font-weight:600;color:#fff;}
.sidebar-action-card .card-title{margin-top:8px;font-size:0.9rem;line-height:1.5;color:rgba(255,255,255,0.5);}
.sidebar-help-btn{display:block;width:100%;margin-top:12px;border:1px solid rgba(108,76,224,0.3);background:transparent;color:#fff;text-align:center;padding:9px 12px;border-radius:999px;font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.2s;}
.sidebar-help-btn:hover{background:linear-gradient(135deg,rgba(108,76,224,0.1),rgba(224,90,154,0.1));border-color:rgba(108,76,224,0.6);transform:translateY(-2px);}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(27,200,182,0.4);}70%{box-shadow:0 0 0 8px rgba(27,200,182,0);}100%{box-shadow:0 0 0 0 rgba(27,200,182,0);}}
/* Mobile header */
.mobile-header{display:none;background:var(--bg-deep);padding:14px 20px;position:sticky;top:0;z-index:100;align-items:center;gap:16px;}
.mobile-header .brand-name{color:#fff;font-weight:800;font-size:1.2rem;}
.mobile-burger{background:transparent;border:0;color:#fff;font-size:1.4rem;cursor:pointer;padding:6px;border-radius:8px;}
.mobile-nav-panel{display:none;position:fixed;inset:0;background:var(--bg-deep);z-index:120;flex-direction:column;padding:20px 28px;}
.mobile-nav-panel.open{display:flex;}
.mobile-nav-panel .nav-item{color:rgba(255,255,255,0.8);font-size:1.1rem;padding:15px 8px;height:auto;border-radius:12px;}
.mobile-nav-panel .nav-item i{margin-right:10px;}
.mobile-nav-panel .nav-item.active{background:rgba(108,76,224,0.14);}
.mobile-nav-panel .nav-item.active::before{display:none;}
.close-mobile-nav{background:transparent;border:0;color:#fff;align-self:flex-end;font-size:1.8rem;padding:6px 12px;cursor:pointer;}
/* Hero */
.hero{position:relative;padding:72px 0 60px;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(108,76,224,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(108,76,224,0.02) 1px,transparent 1px);background-size:80px 80px;pointer-events:none;}
.hero-grid{display:grid;grid-template-columns:56% 44%;gap:48px;align-items:center;}
.eyebrow-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(108,76,224,0.08);border:1px solid rgba(108,76,224,0.14);border-radius:999px;padding:6px 16px;font-size:0.8rem;font-weight:700;color:var(--primary);margin-bottom:22px;}
.eyebrow-tag .status-dot{width:7px;height:7px;background:var(--cyan);border-radius:50%;animation:pulse 2s infinite;}
.hero h1{font-size:var(--font-h1);font-weight:800;line-height:1.2;color:var(--text-main);margin-bottom:20px;letter-spacing:-0.02em;}
.hero h1 .gradient-text{background:linear-gradient(135deg,var(--grad-1),var(--grad-3));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-sub{font-size:1.05rem;color:var(--text-main);background:rgba(108,76,224,0.05);border-left:3px solid var(--primary);padding:10px 16px;border-radius:0 12px 12px 0;margin-bottom:34px;font-weight:500;line-height:1.8;}
.hero-sub p{margin:0;color:var(--text-main);}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-bottom:48px;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;height:48px;padding:0 26px;font-weight:600;font-size:0.95rem;border:0;cursor:pointer;transition:all var(--transition-fast);text-decoration:none;}
.btn-primary{background:linear-gradient(135deg,var(--grad-1) 0%,var(--grad-2) 45%,var(--grad-3) 100%);color:#fff;box-shadow:0 8px 20px rgba(108,76,224,0.28);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(108,76,224,0.36);color:#fff;}
.btn-primary:focus{box-shadow:0 0 0 4px rgba(108,76,224,0.2);}
.btn-secondary{background:transparent;border:1.5px solid var(--primary);color:var(--primary);box-shadow:none;}
.btn-secondary:hover{background:rgba(108,76,224,0.06);color:var(--primary);}
.btn-secondary:active{background:rgba(108,76,224,0.1);transform:translateY(1px);}
.btn-ghost{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.7);}
.btn-ghost:hover{background:rgba(255,255,255,0.16);color:#fff;}
.hero-time-note{display:flex;align-items:center;gap:8px;color:var(--text-mute);font-size:0.8rem;font-weight:500;}
.hero-time-note i{color:var(--cyan);}
.hero-visual{position:relative;padding:0 6px;}
.hero-image-wrap{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-deep);background:linear-gradient(135deg,#2a1e4d,#1D1633);min-height:350px;display:flex;align-items:center;justify-content:center;position:relative;}
.hero-image-wrap img{width:100%;height:100%;object-fit:cover}
.hero-badge{position:absolute;background:rgba(255,255,255,0.92);backdrop-filter:blur(8px);border-radius:14px;padding:10px 16px;box-shadow:0 8px 24px rgba(0,0,0,0.12);display:flex;align-items:center;gap:10px;font-size:0.85rem;font-weight:700;color:var(--text-main);}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 rgba(27,200,182,0.4);animation:pulse 2s infinite;}
.hero-badge.secured{right:-8px;top:-6px;color:var(--text-main);}
.hero-badge.secured i{color:var(--primary);}
/* Section global */
.section{padding:60px 0;}
.section-bg-deep{padding:76px 0;}
.section-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:30px;flex-wrap:wrap;}
.product-chip{display:inline-block;background:rgba(108,76,224,0.07);color:var(--primary);border-radius:6px;padding:4px 12px;font-size:0.75rem;font-weight:700;letter-spacing:0.06em;border:1px solid rgba(108,76,224,0.12);text-transform:uppercase;}
.product-chip i{margin-right:6px;font-size:12px;}
.product-card{margin-bottom:54px;}
/* Category Pill nav */
.pill-tabs{display:inline-flex;gap:6px;flex-wrap:wrap;}
.pill-tab{background:#fff;border:1.5px solid transparent;border-radius:999px;padding:7px 18px;font-size:0.8rem;color:var(--text-sub);cursor:pointer;transition:all 0.16s;font-weight:600;}
.pill-tab:hover{color:var(--primary);border-color:rgba(108,76,224,0.24);background:#fff;}
.pill-tab.active{border-color:rgba(108,76,224,0.2);background:rgba(108,76,224,0.08);color:var(--primary);}
/* FAQ list */
.faq-wrap{max-width:780px;margin:0 auto 38px;}
.faq-item{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:10px;overflow:hidden;transition:box-shadow var(--transition-fast),border-color var(--transition-fast);}
.faq-item:hover{border-color:rgba(108,76,224,0.28);box-shadow:var(--shadow-card);}
.faq-question{width:100%;background:transparent;border:0;text-align:left;font-size:1rem;font-weight:600;color:var(--text-main);padding:18px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:14px;transition:color 0.16s;}
.faq-question:hover{color:var(--primary);}
.faq-question .chevron{color:var(--text-mute);transition:transform 0.18s;font-size:0.85rem;}
.faq-answer{padding:0 24px 22px;font-size:0.94rem;color:var(--text-sub);line-height:1.85;}
/* Footer */
.site-footer{background:#e9e4f4;padding-top:50px;margin-top:60px;}
.footer-layout{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;padding-bottom:38px;}
.footer-about p{font-size:0.9rem;color:var(--text-sub);margin-top:16px;line-height:1.8;}
.footer-brand{font-size:1.4rem;font-weight:800;color:var(--text-main);display:flex;align-items:center;gap:8px;}
.footer-title{font-size:0.92rem;font-weight:700;color:var(--text-main);margin-bottom:20px;letter-spacing:0.04em;}
.footer-column ul li{margin-bottom:10px;}
.footer-column ul li a{color:var(--text-sub);font-size:0.88rem;transition:color 0.2s;}
.footer-column ul li a:hover{color:var(--primary);}
.footer-column ul li i{width:16px;margin-right:6px;color:var(--text-mute);}
.footer-bottom{border-top:1px solid rgba(0,0,0,0.05);padding:24px 0 30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--text-mute);font-size:0.82rem;}
/* Data Badges */
.data-badge{display:flex;align-items:center;gap:6px;font-size:1rem;color:#fff;font-weight:400;margin-bottom:4px;}
.data-badge span{font-weight:600;}
/* Stats */
.stats-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:26px;}
.stat-card{flex:1;min-width:170px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.12);border-radius:16px;padding:26px 20px;color:#fff;}
.stat-card .stat-dark-value{font-size:2.8rem;font-weight:400;line-height:1.2;margin-bottom:6px;letter-spacing:-0.01em;font-variant-numeric:tabular-nums;}
.stat-card .stat-label{font-size:0.9rem;color:rgba(255,255,255,0.55);}
/* Info cards */
.info-card-grid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr 1fr 1fr;gap:12px;}
/* Problem box */
.problem-wrap{display:grid;grid-template-columns:0.8fr 1.2fr;gap:24px;align-items:start;}
.premium-note{background:var(--bg-deep);border-radius:var(--radius-lg);padding:34px 32px;color:#fff;overflow:hidden;position:relative;box-shadow:var(--shadow-deep);}
.premium-note::before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(224,90,154,0.35) 0%,transparent 70%);}
.premium-note h3{color:#fff;font-size:1.35rem;margin-bottom:14px;font-weight:800;color:white;}
.premium-note p{color:rgba(255,255,255,0.7);line-height:1.8;font-size:0.92rem;margin-bottom:24px;}
.premium-note .note-list{margin:0;}
.premium-note .note-list li{display:flex;align-items:flex-start;gap:12px;padding:8px 0;color:rgba(255,255,255,0.8);font-size:0.92rem;}
.premium-note .note-list li i{color:var(--cyan);margin-top:2px;}
.problem-list-column{display:flex;flex-direction:column;gap:4px;}
.problem-list-column .problem-item2{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:12px 18px;cursor:pointer;}
.problem-list-column .problem-item2 .problem-title{font-size:0.97rem;font-weight:700;color:var(--text-main);display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.problem-list-column .problem-item2 .problem-description{font-size:0.88rem;color:var(--text-sub);line-height:1.6;}
/* Card mixed */
.mixed-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.mixed-card-grid .card-item:nth-child(1){grid-column:span 2;display:grid;grid-template-columns:1.2fr 1fr;gap:8px;}
.solution-card{background:#fff;border:2px solid transparent;border-radius:var(--radius-lg);padding:34px 32px;transition:all var(--transition-fast);}
.solution-card:hover{border-color:var(--primary);border-radius:var(--radius-lg);}
/* Footer CTA */
.footer-cta-section{background:var(--bg-deep);border-radius:var(--radius-lg);color:#fff;padding:44px 40px;}
/* Blog section */
.blogs-layout{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:28px;}
.category-ribbon{position:absolute;top:14px;left:14px;background:linear-gradient(135deg,var(--grad-1),var(--grad-2));color:#fff;border-radius:999px;padding:4px 14px;font-size:0.8rem;font-weight:600;}
/* CTA banner */
.cta-banner{background:linear-gradient(135deg,var(--bg-deep),#2d2060);border-radius:var(--radius-lg);padding:56px 52px;color:#fff;position:relative;overflow:hidden;}
.cta-banner .result-title{font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:800;line-height:1.4;color:#fff;margin-bottom:16px;}
/* Forms */
.form-input{width:100%;background:#fff;border:1px solid #D8D2EB;border-radius:10px;height:46px;padding:0 16px;font-size:0.9rem;line-height:46px;transition:all 0.2s;}
.form-input:focus{border-color:var(--primary);outline:0;box-shadow:0 0 0 2px rgba(108,76,224,0.1)}
.select-input{appearance:none;background:#fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23615B78' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;}
/* CTA row */
.cta-anchor{background:transparent;border-top:1px solid var(--border-color);margin-top:30px;padding-top:28px;text-align:center;font-size:0.95rem;color:var(--text-sub);}
.cta-anchor a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--primary);padding:0 4px;}
/* mobile bottom nav */
.mobile-bottom-cta{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(29,22,51,0.96);padding:14px 20px;z-index:200;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,0.08);}
.mobile-bottom-cta .text{color:#fff;font-weight:700;font-size:0.95rem;}
.mobile-bottom-cta .btn-primary{height:38px;padding:0 20px;font-size:0.8rem;}
/* Modal override */
.reveal-overlay{position:fixed;bottom:0}
#assistModal{background:#fff;border:0;border-radius:var(--radius-lg);padding:24px 28px;}
#assistModal .form-title{font-size:1.3rem;font-weight:800;color:var(--text-main);margin-bottom:4px;}
#assistModal .form-sub{font-size:0.85rem;color:var(--text-mute);margin-bottom:20px;}
#assistModal label{font-size:0.9rem;font-weight:700;display:block;margin-bottom:8px;}
/* Reposive with Foundation utilities */
.row.section-sep{max-width:1200px;margin:0 auto;}
.radius-16{border-radius:var(--radius-md);}
.grid-custom-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
/* Mobile Navbar */
@media screen and (max-width: 1024px){
.invert-sidebar{display:none;}
.mobile-header{display:flex;}
.mobile-bottom-cta{display:flex;}
.main-area{margin-left:0;}
.mobile-nav-panel{background:var(--bg-deep);}
.mobile-nav-panel .nav-brand{font-size:1.4rem;font-weight:800;color:#fff;margin-bottom:8px;}
}
@media screen and (max-width: 1024px){
.nav-list{display:block;}
.content{min-height:100vh;}
.hero-grid{grid-template-columns:1fr;}
.hero{padding:42px 0;}
.problem-wrap{grid-template-columns:1fr;}
.mixed-card-grid{display:block;}
.mixed-card-grid>.solution-card{margin-bottom:18px;}
.blogs-layout .content-layout{grid-template-columns:1fr;}
.section{padding:44px 0;}
.footer-layout {grid-template-columns:1fr 1fr;gap:28px;}
.container{padding:0 26px;}
}
@media screen and (max-width: 767px){
.container{padding:0 18px;}
.footer-layout {grid-template-columns:1fr;}
.grid-custom-2{grid-template-columns:1fr;}
.hero-sub {padding:12px; }
}
/* utility */
.text-gradient{background:linear-gradient(90deg,var(--grad-1),var(--grad-3));-webkit-background-clip:text;background-clip:text;color:transparent;}
.badge-pill{display:inline-block;background:rgba(108,76,224,0.08);border-radius:999px;padding:3px 12px;font-size:0.75rem;color:var(--primary);font-weight:600;}
.section-title{font-size:var(--font-h2);font-weight:800;margin:10px 0 18px;}
.section-lead{color:var(--text-sub);max-width:640px;margin-top:12px;line-height:1.8;}
.list-arrow{margin-right:2px;color:var(--cyan);}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;}
.point-card {display:flex;gap:16px;padding:22px;background:#fff;border:2px solid transparent;border-radius:var(--radius-lg);transition:all 0.2s}
.point-card:hover{border-color:rgba(108,76,224,0.2);transform:translateY(-2px);}
.point-icon{font-size:2rem;flex-shrink:0;}
.cyan-circle{background:var(--cyan);border-radius:50%;width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:0.8rem;}
.faq-item-content{margin-bottom:0;}
.faq-question .chevron{transition:transform 0.2s;}
.faq-item .faq-question[aria-expanded="true"] .chevron{transform:rotate(180deg);}
.mobile-nav-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:119;}
.mobile-backdrop{display:none}
/* accordion */
.accordion-item{background:#fff;border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:10px;}
.accordion-title{width:100%;background:transparent;border:0;text-align:left;padding:18px 24px;display:flex;align-items:center;gap:12px;font-weight:600;color:var(--text-main);cursor:pointer;}
.accordion-content{padding:0 24px 20px;background:#fff;}
/* hero overlay */
.hero-backdrop{position:absolute;width:420px;height:420px;background:radial-gradient(circle,rgba(108,76,224,0.1),transparent 60%);border-radius:50%;}
.section-intro{text-align:center;}

/* roulang page: article */
:root{
  --bg:#F6F4FA;
  --card:#FFFFFF;
  --dark:#1D1633;
  --dark-soft:#2A2148;
  --ink:#1D1836;
  --muted:#615B78;
  --hint:#A6A0BC;
  --line:#ECE8F7;
  --purple:#6C4CE0;
  --purple-deep:#5C43D8;
  --purple-light:#8C4DE2;
  --pink:#E05A9A;
  --teal:#1BC8B6;
  --warning:#F5A94E;
  --danger:#E65C7B;
  --gradient:linear-gradient(135deg,#5C43D8 0%,#8C4DE2 45%,#E05A9A 100%);
  --radius-lg:20px;
  --radius-md:16px;
  --shadow-card:0 8px 28px rgba(28,22,58,.08);
  --shadow-deep:0 20px 50px rgba(28,22,58,.25);
  --font-family:"HarmonyOS Sans SC","MiSans","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-family);
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none;transition:color .2s ease}
ul,ol{list-style:none}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--purple);outline-offset:3px;border-radius:6px}
.container{max-width:1200px;margin:0 auto;padding-left:32px;padding-right:32px}
.site-shell{display:flex;min-height:100vh}

/* ===== Sidebar ===== */
.sidebar{
  width:260px;
  position:fixed;
  inset:0 auto 0 0;
  background:var(--dark);
  background-image:radial-gradient(circle at 30% 18%,rgba(108,76,224,.28),transparent 36%);
  display:flex;
  flex-direction:column;
  z-index:30;
  padding:28px 20px 24px;
  overflow-y:auto;
}
.side-brand{display:flex;align-items:center;gap:12px;padding:6px 8px 26px;border-bottom:1px solid rgba(255,255,255,.10);margin-bottom:20px}
.brand-dots{
  width:42px;height:42px;flex:0 0 42px;display:grid;grid-template-columns:repeat(3,1fr);
  place-items:center;background:var(--gradient);border-radius:14px;padding:7px;
  box-shadow:0 0 0 2px rgba(255,255,255,.08),0 8px 20px rgba(108,76,224,.42);
  transition:transform .22s step-end;
}
.brand-dots span{width:6px;height:6px;border-radius:50%;background:#fff;transition:opacity .2s ease,transform .2s ease}
.brand-dots:hover span:nth-child(1){opacity:.85;transform:translateX(3px)}
.brand-dots:hover span:nth-child(3){opacity:.85;transform:translateX(-2px)}
.brand-dots:hover span:nth-child(4){opacity:.55}
.brand-dots:hover span:nth-child(6){opacity:.55}
.brand-dots:hover span:nth-child(8){opacity:.55}
.brand-name{font-size:18px;font-weight:800;color:#fff;line-height:1.25;letter-spacing:.5px}
.brand-sub{display:block;font-size:10px;font-weight:600;letter-spacing:2px;color:rgba(255,255,255,.45);margin-top:3px}

/* nav */
.nav-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.32);padding:6px 14px 10px;font-weight:700}
.nav-list ul{display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;align-items:center;gap:14px;height:50px;padding:0 16px;
  color:rgba(255,255,255,.68);font-size:15px;font-weight:600;border-radius:12px;
  position:relative;transition:background .2s ease,color .2s ease;
}
.nav-item i{width:20px;text-align:center;font-size:15px;color:rgba(255,255,255,.42);transition:color .2s ease}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-item:hover i{color:var(--teal)}
.nav-item.active{color:#fff}
.nav-item.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:22px;border-radius:0 6px 6px 0;background:var(--gradient)}
.nav-item.active i{color:var(--teal)}

/* sidebar extra */
.side-extra{margin-top:auto;padding-top:22px}
.status-card{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
  border-radius:16px;padding:16px;margin-bottom:14px;
}
.status-head{display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.78);}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(27,200,182,.18);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(27,200,182,.16)}50%{box-shadow:0 0 0 8px rgba(27,200,182,.05)}}
.status-title{font-size:14px;color:#fff;font-weight:700;margin-top:10px}
.status-desc{font-size:12px;color:rgba(255,255,255,.46);line-height:1.6;margin-top:4px}
.btn-mini-support{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border-radius:999px;
  border:1px solid rgba(255,255,255,.35);background:transparent;color:rgba(255,255,255,.9);
  font-size:14px;font-weight:700;transition:all .2s ease;
}
.btn-mini-support:hover{border-color:transparent;background:var(--gradient);color:#fff;box-shadow:0 6px 18px rgba(108,76,224,.35)}

/* ===== Mobile bar ===== */
.title-bar{
  display:none;background:var(--dark);min-height:58px;align-items:center;
  justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:60;
}
.title-bar-title{color:#fff;font-weight:800;font-size:17px;display:flex;align-items:center;gap:8px}
.title-bar .menu-icon{width:34px;height:34px;position:relative;transform:none;background:transparent}
.mobile-nav{
  display:none;position:fixed;inset:58px 0 0;background:var(--dark);z-index:55;padding:18px 22px 30px;
}
.mobile-nav.open{display:block}
.mobile-nav .nav-item{height:54px;font-size:17px}
.mobile-support-btn{margin-top:18px;width:100%;height:52px;border-radius:999px;background:var(--gradient);color:#fff;font-weight:800;border:none;font-size:16px}

/* ===== Main area ===== */
.main-area{margin-left:260px;flex:1;min-width:0}
.page-wrap{max-width:1200px;margin:0 auto;padding:40px 32px 64px}

.breadcrumb-wrap{
  background:#EDEAF6;border:1px solid var(--line);border-radius:14px;
  padding:13px 22px;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);
  flex-wrap:wrap;margin-bottom:34px;
}
.breadcrumb-wrap i{color:var(--purple)}
.breadcrumb-wrap .separator{color:#BDB5D6}
.breadcrumb-wrap a{font-weight:600;color:var(--purple)}
.breadcrumb-wrap .current{color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.article-read-col{max-width:900px;margin:0 auto}
.article-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:46px 52px 38px;
}
.article-topline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.chip{
  display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;
  font-size:12px;font-weight:800;letter-spacing:.3px;color:var(--purple);
  background:rgba(108,76,224,.10);
}
.chip i{margin-right:6px}
.article-date{color:var(--muted);font-size:13px}
.article-backtop{margin-left:auto;font-size:13px;font-weight:700;color:var(--muted);display:inline-flex;align-items:center;gap:6px}
.article-backtop:hover{color:var(--purple)}
.article-title{
  font-size:38px;line-height:1.3;font-weight:800;letter-spacing:.5px;color:var(--ink);
  margin-bottom:26px;word-break:break-word;
}
.article-feature-img{
  border-radius:16px;overflow:hidden;margin-bottom:28px;aspect-ratio:16/8;background:var(--dark);
  position:relative;box-shadow:0 4px 16px rgba(28,22,58,.08);
}
.article-feature-img img{width:100%;height:100%;object-fit:cover}
.article-feature-img .img-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 20% 30%,#3A2E68,#1D1633);color:rgba(255,255,255,.18);
  font-size:28px;letter-spacing:10px;
}

.article-content{color:#2A2442;font-size:16.5px;line-height:1.9;word-break:break-word}
.article-content p{margin:0 0 1.6em}
.article-content h2{
  font-size:24px;font-weight:800;color:var(--ink);margin:44px 0 18px;line-height:1.4;
  padding-left:15px;border-left:4px solid transparent;border-image:var(--gradient) 1;
}
.article-content h3{font-size:19px;font-weight:800;color:var(--ink);margin:32px 0 12px}
.article-content ul,.article-content ol{margin:0 0 1.6em;padding-left:1.5em}
.article-content ul li{position:relative;padding-left:8px;margin-bottom:.5em}
.article-content ul li::before{content:"◆";position:absolute;left:-1.2em;top:.1em;color:var(--purple);font-size:.5em}
.article-content ol{list-style:decimal}
.article-content ol li{padding-left:6px;margin-bottom:.5em}
.article-content a{color:var(--purple);font-weight:600;border-bottom:1px solid rgba(108,76,224,.3)}
.article-content blockquote{
  margin:24px 0;padding:16px 22px;border-radius:12px;background:#F3F0FB;
  border-left:3px solid var(--purple);color:var(--ink);font-size:15px;
}
.article-content code{
  background:#F2EEFA;color:var(--purple-deep);padding:2px 8px;border-radius:6px;font-size:.9em;
}

.inline-cta{
  margin-top:42px;margin-bottom:8px;background:linear-gradient(135deg,rgba(108,76,224,.07),rgba(224,90,154,.07));
  border:1px solid rgba(108,76,224,.25);border-radius:16px;padding:20px 24px;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
}
.inline-cta-icon{width:44px;height:44px;flex:0 0 44px;border-radius:14px;background:var(--gradient);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center}
.inline-cta-txt{flex:1;min-width:220px}
.inline-cta-txt strong{display:block;font-size:17px;color:var(--ink);margin-bottom:2px}
.inline-cta-txt span{font-size:14px;color:var(--muted)}

.article-tags{margin-top:34px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-top:28px;border-top:1px dashed #DED8EC}
.tag-pill{background:#F1EEF9;color:var(--muted);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px}
.tag-pill:hover{color:var(--purple);background:rgba(108,76,224,.12)}

.article-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.page-btn{
  display:flex;align-items:center;gap:12px;background:#F7F5FC;border:1px solid var(--line);
  border-radius:14px;padding:14px 18px;font-size:14px;color:var(--ink);font-weight:700;
  transition:all .2s ease;
}
.page-btn:hover{border-color:rgba(108,76,224,.4);color:var(--purple);transform:translateY(-2px);box-shadow:var(--shadow-card)}
.page-btn .arrow{font-size:14px;color:var(--purple)}
.page-btn.next{justify-content:flex-end}

.back-list-btn{
  margin-top:28px;display:inline-flex;align-items:center;gap:8px;color:var(--purple);
  font-weight:800;font-size:14px;padding:12px 24px;border-radius:999px;border:1.5px solid rgba(108,76,224,.5);
  transition:all .2s ease;
}
.back-list-btn:hover{background:var(--gradient);color:#fff;border-color:transparent;box-shadow:0 8px 22px rgba(108,76,224,.3)}

/* Related */
.related-section{margin-top:40px}
.section-kicker{font-size:13px;font-weight:800;letter-spacing:2.4px;color:var(--purple);text-transform:uppercase;margin-bottom:10px}
.related-title{font-size:26px;font-weight:800;color:var(--ink);margin-bottom:24px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.related-card{
  background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.related-card:hover{transform:translateY(-4px);border-color:rgba(108,76,224,.35);box-shadow:var(--shadow-card)}
.related-thumb{aspect-ratio:16/9;overflow:hidden;background:#EFEBF7;position:relative}
.related-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.related-card:hover .related-thumb img{transform:scale(1.04)}
.related-thumb .img-note{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:13px;color:#AFA6CA;font-weight:500}
.related-body{padding:18px 18px 22px}
.related-body small{color:var(--purple);font-weight:700;font-size:11px;letter-spacing:1px}
.related-body h3{font-size:17px;font-weight:700;color:var(--ink);margin:6px 0;line-height:1.45}
.related-body p{font-size:13px;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* FAQ */
.faq-area{margin-top:64px;background:linear-gradient(180deg,#EFECF9,#E8E4F5);border-radius:20px;padding:40px;scroll-margin-top:18px}
.faq-head{text-align:center;margin-bottom:26px}
.faq-head .section-kicker{margin-bottom:6px}
.faq-head h2{font-size:26px;color:var(--ink);font-weight:800}
.faq-wrap{max-width:780px;margin:0 auto}
.accordion-item{background:#fff;border-radius:16px;box-shadow:var(--shadow-card);border:1px solid var(--line);margin-bottom:14px;overflow:hidden}
.accordion-item .accordion-title{
  display:flex;align-items:center;gap:14px;padding:18px 22px;color:var(--ink);
  font-size:16px;font-weight:800;line-height:1.5;background:#fff;
  border-bottom:1px solid transparent;transition:color .2s ease;
}
.accordion-item .accordion-title::before{display:none}
.accordion-item .accordion-title .faq-ic{color:var(--purple);font-size:15px}
.accordion-item.is-active .accordion-title{border-bottom-color:var(--line)}
.accordion-item .accordion-content{
  background:#fff;border:none;border-radius:0 0 16px 16px;padding:2px 22px 20px;
  color:var(--muted);font-size:15px;line-height:1.85;
}
.accordion-item .accordion-content p{margin-bottom:.7em}

/* Final CTA */
.final-cta{
  margin-top:46px;background:var(--dark);border-radius:20px;padding:44px 40px;overflow:hidden;
  background-image:radial-gradient(circle at 85% 20%,rgba(224,90,154,.26),transparent 42%),radial-gradient(circle at 12% 88%,rgba(108,76,224,.30),transparent 40%);
  display:flex;align-items:center;gap:40px;flex-wrap:wrap;box-shadow:var(--shadow-deep);
  position:relative;
}
.final-cta::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}
.cta-copy{flex:1;min-width:280px}
.cta-copy h2{color:#fff;font-size:28px;font-weight:800;margin-bottom:10px}
.cta-copy p{color:rgba(255,255,255,.60);font-size:15px;max-width:600px}
.cta-btn{
  display:inline-flex;align-items:center;gap:10px;background:var(--gradient);color:#fff;
  border:none;font-size:16px;font-weight:800;padding:16px 34px;border-radius:999px;
  box-shadow:0 12px 30px rgba(108,76,224,.46);transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.cta-btn:hover{transform:translateY(-3px);filter:brightness(1.08);box-shadow:0 16px 38px rgba(108,76,224,.58)}
.cta-btn:active{transform:translateY(0)}

/* Not found */
.notfound-card{
  max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:64px 40px;text-align:center;box-shadow:var(--shadow-card);
}
.notfound-icon{width:80px;height:80px;margin:0 auto 24px;border-radius:26px;background:var(--gradient);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center}
.notfound-card h1{font-size:34px;font-weight:800;color:var(--ink);margin-bottom:12px}
.notfound-card p{color:var(--muted);font-size:15px;margin-bottom:28px}
.notfound-btn{
  display:inline-flex;align-items:center;gap:8px;padding:14px 30px;border-radius:999px;
  background:var(--gradient);color:#fff;font-weight:800;box-shadow:0 8px 24px rgba(108,76,224,.3);
  transition:transform .2s ease,box-shadow .2s ease;
}
.notfound-btn:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(108,76,224,.4)}

/* Footer */
.site-footer{background:#EDEAF6;border-top:1px solid #DCD5EA;margin-top:40px}
.footer-layout{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px;padding:46px 0 30px}
.footer-brand{display:flex;align-items:center;font-size:18px;font-weight:800;color:var(--dark)}
.footer-about p{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.85;max-width:340px}
.footer-title{font-size:15px;font-weight:800;color:var(--dark);margin-bottom:18px}
.footer-column ul li{margin-bottom:10px;font-size:14px;color:var(--muted)}
.footer-column ul li i{width:18px;color:var(--purple);margin-right:4px}
.footer-column ul li a{color:var(--muted);transition:color .2s ease}
.footer-column ul li a:hover{color:var(--purple)}
.footer-bottom{display:flex;border-top:1px solid #D8D0E8;padding:18px 0;font-size:13px;color:var(--muted);gap:12px;flex-wrap:wrap}

/* Reveal Modal */
.reveal{
  background:#fff;border:none;border-radius:20px;padding:36px 32px;
  box-shadow:0 30px 80px rgba(20,10,40,.4);
}
.reveal h3{font-size:24px;font-weight:800;color:var(--ink)}
.modal-sub{color:var(--muted);font-size:14px;margin-top:6px}
.reveal .form-group{margin-top:20px}
.reveal label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px;display:block}
.reveal input,.reveal select{
  height:48px;border-radius:12px;border:1px solid #D8D2EB;background:#FBFAFE;
  padding:0 16px;width:100%;transition:border-color .2s ease,box-shadow .2s ease;margin-bottom:0;
}
.reveal input:focus,.reveal select:focus{border-color:var(--purple);box-shadow:0 0 0 3px rgba(108,76,224,.12);outline:none;background:#fff}
.reveal select{margin-top:4px}
.modal-note{font-size:12px;color:var(--hint);text-align:center;margin-top:14px}
.reveal .close-button{right:20px;top:16px;color:var(--muted)}
.reveal-overlay{background:rgba(28,22,58,.6)}
.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;background:var(--gradient);
  width:100%;height:50px;border:none;border-radius:999px;color:#fff;font-weight:800;font-size:15px;
  margin-top:22px;box-shadow:0 10px 24px rgba(108,76,224,.3);transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 14px 32px rgba(108,76,224,.4)}
.btn-primary:active{transform:translateY(0)}

/* Responsive */
@media (max-width:1023.98px){
  .sidebar{display:none}
  .title-bar{display:flex}
  .main-area{margin-left:0}
  .page-wrap{padding:24px 18px 48px}
  .footer-layout{grid-template-columns:1fr 1fr}
}
@media (max-width:767.98px){
  .article-card{padding:30px 22px 28px}
  .article-title{font-size:29px}
  .border-wrap{overflow:hidden}
  .article-pager{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .faq-area{padding:26px 16px}
  .footer-layout{grid-template-columns:1fr 1fr;padding:36px 0 22px}
  .footer-about p{max-width:100%}
  .site-footer .container{padding-left:18px;padding-right:18px}
  .footer-bottom{font-size:12px;flex-direction:column}
  .container{padding-left:18px;padding-right:18px}
  .final-cta{padding:30px 22px}
  .cta-btn{width:100%;justify-content:center}
  .article-feature-img{aspect-ratio:16/10}
}
@media (max-width:520px){
  .article-read-col{max-width:100%}
  .footer-layout{grid-template-columns:1fr;gap:18px;padding-bottom:10px}
  .breadcrumb-wrap{font-size:12px;padding:10px 14px}
  .article-title{font-size:25px;line-height:1.35}
  .inline-cta{flex-direction:column;align-items:flex-start;padding:18px}
  .related-grid{grid-template-columns:1fr}
  .faq-area{border-radius:16px}
  .article-backtop{margin-left:0}
}

/* roulang page: category1 */
:root {
    --bg: #F6F4FA;
    --panel: #FFFFFF;
    --ink: #1D1836;
    --ink-soft: #615B78;
    --ink-mute: #A6A0BC;
    --deep: #1D1633;
    --violet: #6C4CE0;
    --violet-deep: #5C43D8;
    --violet-soft: #8C4DE2;
    --pink: #E05A9A;
    --cyan: #1BC8B6;
    --warning: #F5A94E;
    --danger: #E65C7B;
    --line: #ECE8F7;
    --line-violet: rgba(108, 76, 224, 0.35);
    --grad: linear-gradient(135deg, #5C43D8 0%, #8C4DE2 45%, #E05A9A 100%);
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-pill: 999px;
    --shadow-card: 0 8px 28px rgba(28, 22, 58, 0.08);
    --shadow-btn: 0 8px 20px rgba(108, 76, 224, 0.28);
    --ease: 160ms cubic-bezier(0.2, 0.68, 0.32, 1);
  }

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    font-family: "HarmonyOS Sans SC", "MiSans", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.75;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  img {
    max-width: 100%;
    display: block;
  }

  button,
  input,
  select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
  }

  button {
    border: 0;
    background: none;
    cursor: pointer;
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
    width: 100%;
  }

  h1,
  h2,
  h3,
  h4,
  p,
  figure {
    margin: 0;
  }

  :focus-visible {
    outline: 2px solid var(--violet);
    outline-offset: 3px;
    border-radius: 6px;
  }

  .site-aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background:
      radial-gradient(circle at 50% -20%, rgba(140, 77, 226, 0.35), transparent 220px),
      var(--deep);
    color: #FFFFFF;
    padding: 28px 18px 26px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  .site-aside.is-open {
    transform: translateX(0);
    box-shadow: 18px 0 40px rgba(29, 22, 51, 0.28);
  }

  .brand-lockup {
    display: flex;
    align-items: center;
    padding: 6px 10px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .brand-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    padding: 4px;
    margin-right: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 12px;
    transition: transform var(--ease);
    box-shadow: 0 0 0 2px rgba(108, 76, 224, 0.28);
  }

  .brand-mark.small-mark {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    padding: 2px;
    gap: 2px;
    border-radius: 9px;
  }

  .brand-mark span {
    display: block;
    border-radius: 50%;
    background: var(--grad);
  }

  .brand-mark:hover {
    transform: translateY(-1px) scale(1.02);
  }

  .brand-lockup .brand-name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1.3;
  }

  .brand-lockup .brand-sub {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #A6A0BC;
    margin-top: 2px;
    font-weight: 600;
  }

  .nav-wrap {
    margin-top: 22px;
  }

  .nav-list ul {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .nav-list .nav-item {
    display: flex;
    align-items: center;
    min-height: 50px;
    position: relative;
    padding: 0 16px 0 14px;
    color: #BEB6D8;
    font-weight: 600;
    font-size: 15px;
    border-radius: 12px;
    transition: color var(--ease), background var(--ease);
  }

  .nav-list .nav-item i {
    width: 24px;
    margin-right: 12px;
    text-align: center;
    color: #9d94b8;
    transition: transform var(--ease);
  }

  .nav-list .nav-item:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.055);
  }

  .nav-list .nav-item.active {
    color: #FFFFFF;
    background: linear-gradient(90deg, rgba(108, 76, 224, 0.3), transparent 85%);
  }

  .nav-list .nav-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 6px 6px 0;
    background: var(--grad);
  }

  .nav-list .nav-item.active i {
    color: #c8b7ff;
  }

  .side-bottom {
    margin-top: auto;
    padding-top: 28px;
  }

  .side-status-card {
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .side-status-card .status-title {
    display: flex;
    align-items: center;
    font-weight: 800;
    color: #FFFFFF;
    font-size: 14px;
  }

  .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    margin-right: 8px;
    box-shadow: 0 0 0 4px rgba(27, 200, 182, 0.18);
  }

  .pulse-dot {
    animation: statusPulse 2.1s infinite;
  }

  @keyframes statusPulse {
    0% {
      box-shadow: 0 0 0 0 rgba(27, 200, 182, 0.42);
    }
    70% {
      box-shadow: 0 0 0 8px rgba(27, 200, 182, 0);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(27, 200, 182, 0);
    }
  }

  .side-status-card p {
    color: #BEB6D8;
    font-size: 13px;
    margin: 6px 0 14px;
    line-height: 1.6;
  }

  .side-status-btn {
    width: 100%;
    background: var(--grad);
    border-radius: var(--radius-pill);
    color: #FFFFFF;
    height: 42px;
    font-size: 14px;
    font-weight: 700;
    transition: filter var(--ease), transform var(--ease), box-shadow var(--ease);
    box-shadow: 0 6px 16px rgba(108, 76, 224, 0.28);
  }

  .side-status-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 20px rgba(108, 76, 224, 0.4);
    transform: translateY(-2px);
  }

  .side-status-btn:active {
    transform: translateY(0);
  }

  .mobile-topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--deep);
    min-height: 58px;
    box-shadow: 0 6px 18px rgba(29, 22, 51, 0.12);
  }

  .topbar-brand {
    display: flex;
    align-items: center;
    color: #FFFFFF;
    font-weight: 800;
    font-size: 16px;
  }

  .menu-toggle {
    color: #FFFFFF;
    font-size: 22px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(29, 22, 51, 0.55);
    z-index: 45;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .nav-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }

  .content-main {
    width: 100%;
    min-height: 100vh;
  }

  main {
    padding: 0 0 20px;
  }

  .page-hero {
    position: relative;
    overflow: hidden;
    background:
      linear-gradient(125deg, rgba(246, 244, 250, 0.96) 0%, rgba(238, 233, 252, 0.92) 46%, rgba(225, 214, 248, 0.72) 100%),
      url('/assets/images/backpic/back-2.png') center/cover no-repeat;
    border-bottom: 1px solid var(--line);
  }

  .category-hero-inner {
    padding: 48px 0 56px;
  }

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 36px;
    gap: 8px;
  }

  .breadcrumb a {
    color: var(--violet);
    font-weight: 600;
  }

  .breadcrumb i {
    font-size: 12px;
    color: var(--ink-mute);
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px;
    font-weight: 800;
    color: var(--violet);
    background: rgba(108, 76, 224, 0.1);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 16px;
  }

  .page-hero h1 {
    font-size: clamp(34px, 4.6vw, 56px);
    line-height: 1.2;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 18px;
    letter-spacing: -0.02em;
    max-width: 840px;
  }

  .page-hero h1 .text-grad {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero-lead {
    font-size: 17px;
    line-height: 1.9;
    color: var(--ink-soft);
    max-width: 700px;
    margin-bottom: 30px;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
  }

  .btn-primary,
  .btn-ghost,
  .btn-light,
  .modal-submit,
  .hero-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 28px;
    border-radius: var(--radius-pill);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    transition: transform var(--ease), box-shadow var(--ease), background var(--ease), color var(--ease);
  }

  .btn-primary {
    background: var(--grad);
    color: #fff;
    box-shadow: var(--shadow-btn);
  }

  .btn-primary:hover {
    filter: brightness(1.08);
    box-shadow: 0 10px 24px rgba(108, 76, 224, 0.38);
    transform: translateY(-3px);
  }

  .btn-primary:active {
    transform: translateY(-1px);
  }

  .btn-ghost {
    background: transparent;
    border: 1.5px solid rgba(108, 76, 224, 0.5);
    color: var(--violet);
  }

  .btn-ghost:hover {
    background: rgba(108, 76, 224, 0.08);
    transform: translateY(-2px);
  }

  .hero-visual {
    margin-top: 28px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    background: linear-gradient(140deg, #dcd0fa, #b8e8e0);
    position: relative;
  }

  .hero-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 200px;
    max-height: 420px;
  }

  .hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
    pointer-events: none;
  }

  .section-wrap {
    padding: 72px 0;
  }

  .section-wrap + .section-wrap {
    border-top: 1px solid var(--line);
  }

  .section-head {
    max-width: 720px;
    margin-bottom: 40px;
  }

  .section-head.center {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  .section-label {
    display: inline-flex;
    align-items: center;
    background: rgba(108, 76, 224, 0.09);
    color: var(--violet);
    font-size: 13px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
  }

  .section-title {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    color: var(--ink);
    line-height: 1.3;
    letter-spacing: -0.01em;
  }

  .section-sub {
    color: var(--ink-soft);
    font-size: 16px;
    margin-top: 14px;
    line-height: 1.85;
  }

  .quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .quick-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px 22px 24px;
    box-shadow: var(--shadow-card);
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
    min-height: 210px;
    display: flex;
    flex-direction: column;
  }

  .quick-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-violet);
    box-shadow: 0 14px 32px rgba(28, 22, 58, 0.12);
  }

  .quick-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--violet);
    background: linear-gradient(135deg, rgba(108, 76, 224, 0.12), rgba(224, 90, 154, 0.1));
    margin-bottom: 18px;
  }

  .quick-card h3 {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 10px;
    color: var(--ink);
  }

  .quick-card p {
    font-size: 14px;
    line-height: 1.75;
    color: var(--ink-soft);
    flex: 1;
  }

  .quick-more {
    display: flex;
    align-items: center;
    color: var(--violet);
    font-size: 14px;
    font-weight: 800;
    margin-top: 18px;
    gap: 5px;
  }

  .quick-more i {
    font-size: 12px;
    transition: transform var(--ease);
  }

  .quick-card:hover .quick-more i {
    transform: translateX(4px);
  }

  .step-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    counter-reset: step;
  }

  .step-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    position: relative;
    box-shadow: var(--shadow-card);
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
  }

  .step-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-violet);
    box-shadow: 0 16px 36px rgba(28, 22, 58, 0.11);
  }

  .step-no {
    font-size: 14px;
    font-weight: 900;
    color: var(--violet);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(108, 76, 224, 0.08);
    border: 1px solid rgba(108, 76, 224, 0.2);
    margin-bottom: 22px;
    letter-spacing: -0.02em;
  }

  .step-card h3 {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 12px;
    color: var(--ink);
  }

  .step-card p {
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.8;
  }

  .step-card .mini-note {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed #DCD6EC;
    color: var(--violet);
    font-size: 13px;
    font-weight: 700;
  }

  .trouble-panel {
    background: var(--deep);
    color: #fff;
    border-radius: 28px;
    padding: clamp(28px, 5vw, 58px);
    position: relative;
    overflow: hidden;
  }

  .trouble-panel::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -5%;
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(140, 77, 226, 0.32), transparent 68%);
    pointer-events: none;
  }

  .trouble-panel .panel-header {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin-bottom: 34px;
  }

  .trouble-panel .section-title {
    color: #FFFFFF;
    margin-bottom: 10px;
  }

  .trouble-panel .section-sub {
    color: #BEB6D8;
  }

  .trouble-list {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 30px;
    margin-bottom: 34px;
  }

  .trouble-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 13px;
    padding: 14px 16px;
    font-size: 15px;
    color: #e6e0f5;
    line-height: 1.7;
  }

  .trouble-list li i {
    color: var(--cyan);
    font-size: 14px;
    margin-top: 5px;
  }

  .trouble-list b {
    display: block;
    color: #fff;
    font-weight: 800;
  }

  .panel-cta {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
  }

  .btn-light {
    background: #FFFFFF;
    color: var(--violet);
  }

  .btn-light:hover {
    background: #f2efff;
    transform: translateY(-2px);
  }

  .text-light-link {
    color: #BEB6D8;
    font-size: 14px;
    font-weight: 700;
  }

  .text-light-link:hover {
    color: #fff;
  }

  .method-list {
    border-top: 1px solid var(--line);
  }

  .method-row {
    display: grid;
    grid-template-columns: 180px 1fr 132px;
    gap: 24px;
    align-items: start;
    padding: 22px 4px;
    border-bottom: 1px solid var(--line);
    transition: background var(--ease), padding var(--ease);
  }

  .method-row:hover {
    background: rgba(108, 76, 224, 0.03);
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 10px;
  }

  .method-name {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--ink);
    font-weight: 800;
    font-size: 17px;
  }

  .method-name .method-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--violet);
    background: rgba(108, 76, 224, 0.09);
    flex: 0 0 38px;
  }

  .method-description {
    font-size: 15px;
    color: var(--ink-soft);
    line-height: 1.8;
  }

  .method-tip {
    text-align: right;
  }

  .method-tip span {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    background: rgba(27, 200, 182, 0.1);
    color: #0a9a8c;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }

  .faq-wrap {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }

  .faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel);
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(28, 22, 58, 0.03);
    transition: border-color var(--ease), box-shadow var(--ease);
  }

  .faq-item:hover {
    border-color: var(--line-violet);
  }

  .faq-item summary {
    padding: 21px 24px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.6;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 18px;
  }

  .faq-item summary::-webkit-details-marker {
    display: none;
  }

  .faq-item summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: var(--violet);
    transition: transform var(--ease);
    flex: 0 0 auto;
  }

  .faq-item[open] summary::after {
    transform: rotate(180deg);
  }

  .faq-body {
    padding: 0 24px 24px;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.85;
    border-top: 1px dashed #ECE8F7;
    padding-top: 14px;
  }

  .faq-help-row {
    text-align: center;
    margin-top: 28px;
  }

  .faq-help-row a {
    color: var(--violet);
    font-weight: 800;
    font-size: 15px;
  }

  .final-cta {
    background: linear-gradient(125deg, rgba(246, 244, 250, 0.95), rgba(228, 215, 248, 0.9)), url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
  }

  .final-cta-card {
    background: var(--deep);
    border-radius: 24px;
    padding: 42px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 28px;
    align-items: center;
    overflow: hidden;
    position: relative;
    box-shadow: 0 20px 50px rgba(28, 22, 58, 0.25);
  }

  .final-cta-card::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(224, 90, 154, 0.22), transparent 72%);
  }

  .final-cta-card h2 {
    color: #FFFFFF;
    font-size: clamp(23px, 3vw, 30px);
    font-weight: 800;
    line-height: 1.35;
    margin-bottom: 8px;
  }

  .final-cta-card p {
    color: #C4BBDD;
    font-size: 15px;
  }

  .final-cta-card .btn-primary {
    margin-left: 18px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
  }

  .site-footer {
    background: #EDEAF6;
    padding: 52px 0 24px;
    border-top: 1px solid #DDD6EC;
  }

  .footer-layout {
    display: flex;
    gap: 40px;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .footer-about {
    flex: 1 1 280px;
  }

  .footer-brand {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 20px;
  }

  .footer-about p {
    font-size: 14px;
    max-width: 380px;
    color: var(--ink-soft);
    line-height: 1.8;
  }

  .footer-column {
    min-width: 160px;
  }

  .footer-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    margin-bottom: 16px;
  }

  .footer-column ul li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-soft);
    font-size: 14px;
    padding: 5px 0;
    line-height: 1.6;
  }

  .footer-column ul a {
    transition: color var(--ease);
  }

  .footer-column ul a:hover {
    color: var(--violet);
  }

  .footer-column i {
    color: var(--violet);
    font-size: 12px;
  }

  .footer-bottom {
    margin-top: 42px;
    padding-top: 22px;
    border-top: 1px solid #DAD3E8;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: var(--ink-mute);
    font-size: 13px;
  }

  .modal-layer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .modal-layer.is-open {
    display: flex;
  }

  .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(29, 22, 51, 0.6);
    backdrop-filter: blur(2px);
  }

  .modal-card {
    position: relative;
    background: #FFFFFF;
    border-radius: var(--radius-lg);
    padding: 38px 34px 32px;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 28px 70px rgba(29, 22, 51, 0.36);
    transform: translateY(12px);
    animation: modalIn 180ms ease forwards;
  }

  .modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--ink-soft);
    font-size: 20px;
    background: #F2EEFB;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ease);
  }

  .modal-close:hover {
    background: #E8E0F6;
  }

  .modal-card h3 {
    font-size: 26px;
    font-weight: 900;
    color: var(--ink);
    margin-bottom: 8px;
  }

  .modal-card .modal-para {
    color: var(--ink-soft);
    font-size: 14px;
    margin-bottom: 28px;
  }

  .modal-form .field-group {
    margin-bottom: 20px;
  }

  .modal-form label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 8px;
  }

  .modal-form input,
  .modal-form select {
    width: 100%;
    height: 48px;
    border: 1px solid #D8D2EB;
    background: #FFFFFF;
    border-radius: 12px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--ink);
    transition: border-color var(--ease), box-shadow var(--ease);
  }

  .modal-form input:focus,
  .modal-form select:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(108, 76, 224, 0.13);
  }

  .modal-submit {
    width: 100%;
    background: var(--grad);
    color: #fff;
    box-shadow: var(--shadow-btn);
    margin-top: 8px;
  }

  .modal-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
  }

  .form-error {
    color: var(--danger);
    font-size: 13px;
    margin-top: 6px;
    min-height: 18px;
    line-height: 1.4;
  }

  .privacy-note {
    font-size: 12px;
    color: var(--ink-mute);
    text-align: center;
    margin-top: 16px;
  }

  .form-success {
    text-align: center;
    padding: 40px 20px;
  }

  .form-success .success-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    margin: 0 auto 20px;
    background: rgba(27, 200, 182, 0.12);
    color: #0baa99;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
  }

  .form-success h4 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
  }

  .form-success p {
    color: var(--ink-soft);
    font-size: 14px;
  }

  .back-fade-btn {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 40;
    background: #FFFFFF;
    border-radius: 80px;
    box-shadow: 0 10px 28px rgba(29, 22, 51, 0.18);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 14px;
    height: 46px;
    color: var(--violet);
    font-weight: 800;
    font-size: 14px;
    border: 1px solid var(--line);
    transition: transform var(--ease), box-shadow var(--ease);
  }

  .back-fade-btn i {
    background: var(--grad);
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }

  .back-fade-btn:hover {
    transform: translateY(-2px);
  }

  @media (min-width: 1024px) {
    .site-aside {
      transform: none;
      box-shadow: none;
    }

    .content-main {
      margin-left: 260px;
    }

    .mobile-topbar,
    .nav-backdrop {
      display: none !important;
    }
  }

  @media (max-width: 1023.98px) {
    main {
      padding-top: 0;
    }

    .category-hero-inner {
      padding-top: 40px;
    }

    .section-wrap {
      padding: 56px 0;
    }

    .quick-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .step-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .step-card:last-child {
      grid-column: 1 / -1;
    }

    .trouble-list {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 767.98px) {
    .container {
      padding-left: 20px;
      padding-right: 20px;
    }

    .page-hero {
      background: linear-gradient(180deg, #F1ECFB, #DDD2F2);
    }

    .category-hero-inner {
      padding: 32px 0 40px;
    }

    .breadcrumb {
      margin-bottom: 22px;
    }

    .page-hero h1 {
      font-size: 34px;
    }

    .hero-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-ghost {
      width: 100%;
    }

    .quick-grid {
      grid-template-columns: 1fr;
    }

    .step-grid {
      grid-template-columns: 1fr;
    }

    .step-card:last-child {
      grid-column: auto;
    }

    .method-row {
      grid-template-columns: 1fr;
      gap: 10px;
      padding: 18px 0;
    }

    .method-tip {
      text-align: left;
    }

    .method-row:hover {
      padding-left: 4px;
      padding-right: 4px;
    }

    .trouble-panel {
      padding: 28px 22px;
      border-radius: 20px;
    }

    .panel-cta {
      align-items: stretch;
      flex-direction: column;
    }

    .panel-cta .btn-light {
      width: 100%;
    }

    .final-cta-card {
      grid-template-columns: 1fr;
      padding: 30px 22px;
    }

    .final-cta-card .btn-primary {
      width: 100%;
      margin-left: 0;
    }

    .modal-card {
      padding: 28px 20px 24px;
    }

    .footer-layout {
      flex-direction: column;
      gap: 28px;
    }

    .footer-column {
      min-width: 100%;
    }

    .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  @keyframes modalIn {
    from {
      opacity: 0;
      transform: translateY(12px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/* roulang page: category2 */
:root{
      --bg:#F6F4FA;
      --card:#FFFFFF;
      --deep:#1D1633;
      --deep-2:#271E4F;
      --ink:#1D1836;
      --sub:#615B78;
      --muted:#A6A0BC;
      --primary:#6C4CE0;
      --primary-dark:#5C43D8;
      --primary-light:#8C4DE2;
      --accent:#E05A9A;
      --cyan:#1BC8B6;
      --gold:#F5A94E;
      --error:#E65C7B;
      --border:#ECE8F7;
      --border-strong:#D8D2EB;
      --grad:linear-gradient(135deg,#5C43D8 0%,#8C4DE2 45%,#E05A9A 100%);
      --radius-lg:20px;
      --radius-md:16px;
      --shadow-card:0 8px 28px rgba(28,22,58,0.08);
      --shadow-hero:0 20px 50px rgba(28,22,58,0.25);
      --sidebar-w:260px;
      --font-stack:"HarmonyOS Sans SC","MiSans","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
    }

    *,*::before,*::after{
      box-sizing:border-box;
    }

    html{
      scroll-behavior:smooth;
    }

    body{
      margin:0;
      font-family:var(--font-stack);
      background:var(--bg);
      color:var(--ink);
      font-size:16px;
      line-height:1.75;
      -webkit-font-smoothing:antialiased;
    }

    img{
      max-width:100%;
      display:block;
    }

    a{
      color:inherit;
      text-decoration:none;
      transition:color .2s ease;
    }

    button,input,select,textarea{
      font-family:inherit;
      font-size:inherit;
      color:inherit;
    }

    :focus-visible{
      outline:2px solid var(--primary);
      outline-offset:3px;
    }

    .container{
      max-width:1200px;
      margin:0 auto;
      padding:0 32px;
      position:relative;
      z-index:2;
    }

    .site-shell{
      display:flex;
      align-items:flex-start;
      min-height:100vh;
    }

    /* ===== Sidebar ===== */
    .sidebar{
      width:var(--sidebar-w);
      position:fixed;
      inset:0 auto 0 0;
      background:var(--deep);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      padding:30px 0 24px;
      z-index:100;
      overflow:hidden;
    }

    .sidebar::before{
      content:"";
      position:absolute;
      width:250px;
      height:250px;
      top:-80px;
      left:-70px;
      background:radial-gradient(circle,rgba(140,77,226,.28),transparent 70%);
      pointer-events:none;
    }

    .sidebar-inner{
      position:relative;
      z-index:2;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      padding:0 22px;
      margin-bottom:34px;
    }

    .brand-logo{
      width:40px;
      height:40px;
      display:grid;
      grid-template-columns:repeat(3,1fr);
      grid-template-rows:repeat(3,1fr);
      gap:3px;
      padding:6px;
      background:var(--grad);
      border-radius:12px;
      box-shadow:0 0 0 2px rgba(108,76,224,.35),0 8px 18px rgba(14,8,35,.38);
      flex-shrink:0;
    }

    .brand-logo i{
      background:rgba(255,255,255,.95);
      border-radius:50%;
    }

    .brand-logo i:nth-child(1){opacity:.95}
    .brand-logo i:nth-child(2){opacity:.45}
    .brand-logo i:nth-child(3){opacity:.9}
    .brand-logo i:nth-child(4){opacity:.7}
    .brand-logo i:nth-child(5){opacity:1}
    .brand-logo i:nth-child(6){opacity:.55}
    .brand-logo i:nth-child(7){opacity:.35}
    .brand-logo i:nth-child(8){opacity:.8}
    .brand-logo i:nth-child(9){opacity:1}

    .brand-caption{
      display:flex;
      flex-direction:column;
      line-height:1.2;
    }

    .brand-caption strong{
      color:#fff;
      font-size:17px;
      font-weight:700;
      letter-spacing:.5px;
    }

    .brand-caption small{
      color:#7D73A6;
      font-size:10px;
      letter-spacing:1.6px;
      text-transform:uppercase;
      margin-top:4px;
    }

    .nav-list ul{
      list-style:none;
      margin:0;
      padding:0;
    }

    .nav-list .nav-item{
      display:flex;
      align-items:center;
      gap:13px;
      height:52px;
      padding:0 22px;
      color:#B7AEE0;
      font-size:15px;
      font-weight:500;
      border-left:3px solid transparent;
      transition:color .2s,background .2s,box-shadow .2s;
      background:transparent;
    }

    .nav-list .nav-item:hover{
      color:#fff;
      background:linear-gradient(90deg,rgba(140,77,226,.15),transparent 78%);
    }

    .nav-list .nav-item.active{
      color:#fff;
      font-weight:600;
      border-left-color:var(--primary-light);
      background:linear-gradient(90deg,rgba(140,77,226,.2),transparent 80%);
      box-shadow:0 10px 26px rgba(0,0,0,.12);
    }

    .nav-list .nav-item i{
      width:22px;
      text-align:center;
      font-size:15px;
      color:inherit;
    }

    .sidebar-status{
      position:relative;
      z-index:2;
      padding:0 16px;
    }

    .status-card{
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.12);
      border-radius:16px;
      padding:16px 14px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }

    .status-card > i{
      color:var(--cyan);
      font-size:20px;
    }

    .status-card strong{
      color:#fff;
      font-size:14px;
      font-weight:600;
      display:inline-flex;
      align-items:center;
      gap:7px;
    }

    .status-card strong::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--cyan);
      box-shadow:0 0 0 3px rgba(27,200,182,.18);
      animation:softPulse 2s infinite;
    }

    .status-card span{
      display:block;
      color:#9D93C0;
      font-size:12px;
      line-height:1.5;
    }

    .service-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:38px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.32);
      background:transparent;
      color:#fff;
      font-size:13px;
      font-weight:600;
      padding:0 14px;
      cursor:pointer;
      transition:all .2s ease;
    }

    .service-btn:hover{
      background:rgba(140,77,226,.24);
      border-color:rgba(255,255,255,.55);
    }

    @keyframes softPulse{
      0%,100%{opacity:.75;transform:scale(.94)}
      50%{opacity:1;transform:scale(1.08)}
    }

    /* ===== Main Wrap ===== */
    .main-wrap{
      flex:1;
      margin-left:var(--sidebar-w);
      min-width:0;
      background:var(--bg);
    }

    /* Mobile top bar */
    .mobile-topbar{
      display:none;
      position:sticky;
      top:0;
      z-index:600;
      background:var(--deep);
      color:#fff;
      height:58px;
      align-items:center;
    }

    .topbar-inner{
      width:100%;
      max-width:1200px;
      margin:0 auto;
      padding:0 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
    }

    .mobile-brand{
      display:flex;
      align-items:center;
      gap:9px;
      font-weight:700;
      font-size:16px;
    }

    .mobile-brand .brand-logo-mini{
      width:26px;
      height:26px;
      border-radius:8px;
      background:var(--grad);
      display:inline-block;
      box-shadow:0 0 0 2px rgba(108,76,224,.35);
    }

    .menu-toggle,.drawer-close{
      border:none;
      background:transparent;
      color:#fff;
      font-size:19px;
      width:42px;
      height:42px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:10px;
      cursor:pointer;
      transition:background .2s;
    }

    .menu-toggle:hover,.drawer-close:hover{
      background:rgba(255,255,255,.08);
    }

    .mobile-drawer{
      position:fixed;
      inset:0;
      background:var(--deep);
      z-index:900;
      padding:20px 22px;
      display:none;
      flex-direction:column;
      overflow-y:auto;
    }

    .mobile-drawer.visible{
      display:flex;
    }

    .drawer-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:18px;
    }

    .drawer-brand{
      color:#fff;
      font-weight:700;
      font-size:18px;
    }

    .mobile-drawer .nav-list .nav-item{
      font-size:18px;
      height:56px;
    }

    .drawer-status{
      margin-top:auto;
      padding-top:24px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      border:none;
      cursor:pointer;
      font-weight:600;
      border-radius:999px;
      height:48px;
      padding:0 26px;
      font-size:15px;
      line-height:1;
      text-align:center;
      transition:all .2s ease;
    }

    .btn-primary{
      background:var(--grad);
      color:#fff;
      box-shadow:0 8px 20px rgba(108,76,224,.3);
    }

    .btn-primary:hover{
      color:#fff;
      filter:brightness(1.1);
      transform:translateY(-2px);
      box-shadow:0 12px 28px rgba(108,76,224,.38);
    }

    .btn-primary:active{
      transform:translateY(0);
    }

    .btn-outline{
      border:1.5px solid rgba(255,255,255,.65);
      background:transparent;
      color:#fff;
    }

    .btn-outline:hover{
      background:rgba(255,255,255,.12);
      border-color:#fff;
    }

    .btn-light{
      background:#fff;
      color:var(--deep);
      box-shadow:0 8px 24px rgba(0,0,0,.16);
    }

    .btn-light:hover{
      filter:brightness(.96);
      transform:translateY(-2px);
    }

    .btn-block{
      width:100%;
    }

    /* ===== Category2 Hero ===== */
    .cat-hero{
      position:relative;
      overflow:hidden;
      background:linear-gradient(120deg,#1D1633 0%,#2A1B55 52%,#3A226E 100%);
      color:#fff;
      padding:76px 0 70px;
    }

    .cat-hero::before{
      content:"";
      position:absolute;
      right:-130px;
      top:-170px;
      width:480px;
      height:480px;
      background:radial-gradient(circle,rgba(140,77,226,.45),transparent 62%);
      pointer-events:none;
    }

    .cat-hero::after{
      content:"";
      position:absolute;
      left:10%;
      bottom:-160px;
      width:320px;
      height:320px;
      background:radial-gradient(circle,rgba(224,90,154,.22),transparent 66%);
      pointer-events:none;
    }

    .hero-bg-img{
      position:absolute;
      inset:0;
      background-image:url('/assets/images/backpic/back-1.png');
      background-size:cover;
      background-position:center;
      opacity:.22;
    }

    .hero-grid{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:52px;
      align-items:center;
    }

    .breadcrumb{
      display:flex;
      align-items:center;
      gap:8px;
      color:#AFA4D9;
      font-size:13px;
      margin-bottom:20px;
    }

    .breadcrumb a{
      color:#B7AEE0;
    }

    .breadcrumb a:hover{
      color:#fff;
    }

    .breadcrumb i{
      font-size:11px;
      color:#6F639E;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:rgba(27,200,182,.13);
      border:1px solid rgba(27,200,182,.3);
      color:#7CE5DC;
      padding:5px 13px;
      border-radius:999px;
      font-size:12px;
      font-weight:600;
      letter-spacing:.3px;
      margin-bottom:18px;
    }

    .cat-hero h1{
      margin:0 0 20px;
      font-size:50px;
      line-height:1.2;
      font-weight:800;
      letter-spacing:.2px;
    }

    .cat-hero .grad-text{
      background:linear-gradient(120deg,#B79BFF,#E6A8D6,#5FD6CB);
      -webkit-background-clip:text;
      background-clip:text;
      -webkit-text-fill-color:transparent;
      display:inline-block;
    }

    .hero-desc{
      color:#CEC6EA;
      font-size:17px;
      line-height:1.9;
      margin:0 0 28px;
      max-width:540px;
    }

    .hero-actions{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:14px;
      margin-bottom:18px;
    }

    .safe-note{
      display:flex;
      align-items:center;
      gap:8px;
      color:#9D93C0;
      font-size:13px;
      margin-top:6px;
    }

    .safe-note i{
      color:var(--cyan);
    }

    .hero-visual{
      position:relative;
    }

    .visual-frame{
      position:relative;
      border-radius:20px;
      overflow:hidden;
      box-shadow:var(--shadow-hero);
      border:1px solid rgba(255,255,255,.16);
      background:#0F0A24;
      transform:rotate(1deg);
    }

    .visual-frame img{
      width:100%;
      height:330px;
      object-fit:cover;
      opacity:.92;
    }

    .float-badge{
      position:absolute;
      background:rgba(29,22,51,.92);
      border:1px solid rgba(255,255,255,.2);
      border-radius:999px;
      padding:8px 15px;
      font-size:13px;
      font-weight:600;
      color:#fff;
      display:inline-flex;
      align-items:center;
      gap:8px;
      box-shadow:0 12px 28px rgba(0,0,0,.3);
      backdrop-filter:blur(8px);
    }

    .float-badge .pulse-dot{
      width:8px;
      height:8px;
      background:var(--cyan);
      border-radius:50%;
      animation:softPulse 2s infinite;
    }

    .float-badge i{
      color:var(--cyan);
    }

    .badge-online{
      left:18px;
      top:22px;
    }

    .badge-shield{
      right:8px;
      bottom:22px;
    }

    /* ===== Section Common ===== */
    .shield-section,
    .protect-section,
    .checklist-section,
    .faq-section{
      padding:78px 0;
    }

    .shield-section{
      background:#F6F4FA;
    }

    .section-head{
      max-width:680px;
      margin:0 auto 44px;
      text-align:center;
    }

    .section-head .eyebrow{
      background:rgba(108,76,224,.08);
      border:1px solid rgba(108,76,224,.2);
      color:var(--primary);
    }

    .section-head h2{
      font-size:32px;
      line-height:1.25;
      margin:14px 0 14px;
      font-weight:800;
      color:var(--ink);
    }

    .section-head p{
      color:var(--sub);
      font-size:16px;
      margin:0;
      line-height:1.8;
    }

    .shield-grid{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:60px;
      align-items:center;
    }

    .shield-illustration{
      position:relative;
      background:var(--deep);
      border-radius:20px;
      min-height:320px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:14px;
      overflow:hidden;
      box-shadow:var(--shadow-hero);
      background-image:url('/assets/images/coverpic/cover-4.webp');
      background-size:cover;
      background-position:center;
    }

    .shield-illustration::before{
      content:"";
      position:absolute;
      inset:0;
      background:rgba(29,22,51,.56);
    }

    .shield-illustration::after{
      content:"";
      position:absolute;
      width:280px;
      height:280px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:50%;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
    }

    .shield-illustration i,
    .shield-illustration span{
      position:relative;
      z-index:2;
    }

    .shield-illustration i{
      width:100px;
      height:100px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(255,255,255,.1);
      border:1px solid rgba(255,255,255,.26);
      border-radius:32px;
      font-size:38px;
      color:#fff;
      backdrop-filter:blur(6px);
    }

    .shield-illustration span{
      color:#fff;
      font-size:15px;
      font-weight:600;
      letter-spacing:1px;
    }

    .shield-copy h2{
      font-size:32px;
      line-height:1.3;
      margin:0 0 18px;
      color:var(--ink);
    }

    .shield-copy .eyebrow{
      margin-bottom:10px;
    }

    .shield-copy .lead{
      color:var(--sub);
      font-size:16px;
      margin-bottom:18px;
    }

    .feature-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px 18px;
    }

    .feature-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:var(--ink);
      font-size:15px;
      font-weight:500;
      padding:12px 14px;
      background:#fff;
      border:1px solid var(--border);
      border-radius:12px;
      box-shadow:0 6px 18px rgba(28,22,58,.05);
      transition:border-color .2s,transform .2s;
    }

    .feature-list li:hover{
      border-color:rgba(108,76,224,.35);
      transform:translateY(-2px);
    }

    .feature-list li i{
      color:var(--primary);
      margin-top:3px;
      font-size:14px;
    }

    /* ===== Protection cards ===== */
    .protect-section{
      background:linear-gradient(180deg,#fff,#F6F4FA);
    }

    .sec-layout{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
      align-items:start;
      margin-top:26px;
    }

    .sec-card{
      background:#fff;
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:28px;
      box-shadow:var(--shadow-card);
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
      position:relative;
      overflow:hidden;
    }

    .sec-card::before{
      content:"";
      position:absolute;
      width:80px;
      height:80px;
      right:-24px;
      top:-24px;
      background:radial-gradient(circle,rgba(108,76,224,.12),transparent 70%);
    }

    .sec-card:nth-child(4){
      grid-column:2 / 3;
      grid-row:2;
    }

    .sec-card:nth-child(5){
      grid-column:3 / 4;
      grid-row:2;
    }

    .sec-card:hover{
      transform:translateY(-4px);
      border-color:rgba(108,76,224,.35);
      box-shadow:0 14px 36px rgba(28,22,58,.12);
    }

    .sec-icon{
      width:50px;
      height:50px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(108,76,224,.09);
      border-radius:14px;
      color:var(--primary);
      font-size:20px;
      margin-bottom:18px;
      transition:background .2s;
    }

    .sec-card:hover .sec-icon{
      background:var(--grad);
      color:#fff;
    }

    .sec-card h3{
      margin:0 0 10px;
      font-size:18px;
      font-weight:700;
      line-height:1.4;
      color:var(--ink);
    }

    .sec-card p{
      margin:0;
      color:var(--sub);
      font-size:14px;
      line-height:1.75;
    }

    .card-tag{
      display:inline-block;
      background:rgba(108,76,224,.09);
      color:var(--primary);
      font-size:12px;
      font-weight:600;
      padding:3px 10px;
      border-radius:999px;
      margin-bottom:12px;
    }

    /* ===== Checklist ===== */
    .checklist-section{
      background:var(--deep);
      background-image:
        radial-gradient(circle at 12% 12%,rgba(140,77,226,.2),transparent 46%),
        radial-gradient(circle at 88% 82%,rgba(224,90,154,.13),transparent 52%);
      color:#fff;
    }

    .checklist-section .section-head h2{
      color:#fff;
    }

    .checklist-section .section-head p{
      color:#ABA1CD;
    }

    .checklist-card{
      max-width:860px;
      margin:0 auto 24px;
      background:rgba(255,255,255,.038);
      border:1px solid rgba(255,255,255,.11);
      border-radius:22px;
      padding:26px 24px 10px;
      backdrop-filter:blur(4px);
    }

    .check-item{
      display:flex;
      align-items:center;
      gap:16px;
      padding:15px 16px;
      border-radius:14px;
      cursor:pointer;
      border:1px solid transparent;
      transition:background .2s,border-color .2s;
    }

    .check-item:hover{
      background:rgba(255,255,255,.045);
      border-color:rgba(255,255,255,.08);
    }

    .check-item + .check-item{
      margin-top:2px;
    }

    .check-icon{
      width:26px;
      height:26px;
      border-radius:50%;
      border:2px solid rgba(255,255,255,.4);
      display:flex;
      align-items:center;
      justify-content:center;
      color:transparent;
      font-size:12px;
      flex-shrink:0;
      transition:all .18s;
    }

    .check-item.is-checked .check-icon{
      background:var(--cyan);
      border-color:var(--cyan);
      color:var(--deep);
    }

    .check-item.is-checked strong{
      color:#fff;
    }

    .check-item strong{
      display:block;
      color:#F1EDFA;
      font-size:16px;
      font-weight:600;
    }

    .check-item p{
      margin:4px 0 0;
      color:#AFA5D0;
      font-size:13px;
      line-height:1.65;
    }

    .check-progress-track{
      max-width:860px;
      margin:0 auto;
      background:rgba(255,255,255,.12);
      height:8px;
      border-radius:999px;
      overflow:hidden;
    }

    .check-progress-bar{
      display:block;
      height:100%;
      width:60%;
      background:var(--grad);
      border-radius:999px;
      transition:width .25s ease;
    }

    .check-progress-meta{
      max-width:860px;
      margin:12px auto 0;
      display:flex;
      justify-content:space-between;
      color:#AFA5D0;
      font-size:13px;
    }

    /* ===== FAQ ===== */
    .faq-section .container.narrow{
      max-width:840px;
    }

    .faq-accordion{
      list-style:none;
      margin:30px 0 0;
      padding:0;
    }

    .faq-accordion .accordion-item{
      background:#fff;
      border:1px solid var(--border);
      border-radius:0;
      transition:box-shadow .2s,border-color .2s;
    }

    .faq-accordion .accordion-item + .accordion-item{
      border-top:1px solid var(--border);
    }

    .faq-accordion .accordion-item.is-active{
      box-shadow:0 10px 28px rgba(28,22,58,.07);
      border-color:rgba(108,76,224,.32);
    }

    .faq-accordion .accordion-item:first-child{
      border-radius:20px 20px 0 0;
    }

    .faq-accordion .accordion-item:last-child{
      border-radius:0 0 20px 20px;
    }

    .faq-accordion .accordion-title{
      background:#fff;
      color:var(--ink);
      padding:22px 48px 22px 26px;
      border:none;
      font-size:17px;
      font-weight:700;
      font-family:var(--font-stack);
      line-height:1.5;
      display:flex;
      align-items:center;
      gap:12px;
      transition:background .2s,color .2s;
    }

    .faq-accordion .accordion-title:hover{
      background:#FBF9FF;
      color:var(--primary);
    }

    .faq-accordion .accordion-title i{
      color:var(--primary);
      font-size:15px;
    }

    .faq-accordion .accordion-content{
      background:#fff;
      padding:0 48px 24px 54px;
      color:var(--sub);
      font-size:15px;
      line-height:1.85;
    }

    .faq-accordion .accordion-content p{
      margin:0;
    }

    .faq-bottom-cta{
      margin-top:28px;
      text-align:center;
      color:var(--sub);
      font-size:15px;
    }

    .faq-bottom-cta a{
      color:var(--primary);
      font-weight:600;
      margin-left:6px;
    }

    .faq-bottom-cta a:hover{
      text-decoration:underline;
    }

    /* ===== Report CTA ===== */
    .report-cta{
      padding:24px 0 84px;
      background:linear-gradient(180deg,#F6F4FA 0%,#EDEAF6 100%);
    }

    .cta-inner{
      position:relative;
      background:linear-gradient(120deg,#1D1633 0%,#402B78 55%,#B2509E 120%);
      border-radius:24px;
      padding:52px 56px;
      overflow:hidden;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:32px;
      box-shadow:var(--shadow-hero);
    }

    .cta-inner::before{
      content:"";
      position:absolute;
      left:-90px;
      top:-110px;
      width:260px;
      height:260px;
      background:radial-gradient(circle,rgba(27,200,182,.28),transparent 62%);
    }

    .cta-inner::after{
      content:"";
      position:absolute;
      right:30%;
      bottom:-80px;
      width:200px;
      height:200px;
      background:radial-gradient(circle,rgba(224,90,154,.2),transparent 62%);
    }

    .cta-copy,.cta-action{
      position:relative;
      z-index:3;
    }

    .cta-copy h2{
      color:#fff;
      font-size:30px;
      line-height:1.3;
      margin:0 0 12px;
    }

    .cta-copy p{
      color:#C6BDE4;
      font-size:15px;
      margin:0;
      max-width:560px;
    }

    .cta-action{
      flex-shrink:0;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
    }

    .report-hint{
      color:#AFA5D0;
      font-size:12px;
    }

    /* ===== Footer ===== */
    .site-footer{
      background:#EDEAF6;
      border-top:1px solid #E0DAF0;
      padding:52px 0 24px;
    }

    .footer-layout{
      display:grid;
      grid-template-columns:2fr 1fr 1fr;
      gap:40px;
      margin-bottom:36px;
    }

    .footer-brand{
      display:flex;
      align-items:center;
      gap:6px;
      font-size:18px;
      font-weight:700;
      color:var(--ink);
      margin-bottom:14px;
    }

    .footer-about p{
      color:var(--sub);
      font-size:14px;
      margin:0;
      line-height:1.85;
      max-width:360px;
    }

    .footer-title{
      font-size:16px;
      font-weight:700;
      color:var(--ink);
      margin-bottom:14px;
    }

    .footer-column ul{
      list-style:none;
      margin:0;
      padding:0;
    }

    .footer-column li{
      display:flex;
      align-items:flex-start;
      gap:8px;
      color:var(--sub);
      font-size:14px;
      padding:5px 0;
      line-height:1.6;
    }

    .footer-column a{
      color:var(--sub);
      transition:color .2s;
    }

    .footer-column a:hover{
      color:var(--primary);
    }

    .footer-column i{
      color:var(--primary);
      font-size:12px;
      margin-top:5px;
    }

    .footer-bottom{
      display:flex;
      align-items:center;
      padding-top:22px;
      border-top:1px solid #D9D0EF;
      color:#8B82A8;
      font-size:13px;
      gap:10px;
      flex-wrap:wrap;
    }

    /* ===== Reveal Modal ===== */
    .modal-help{
      max-width:520px;
      border-radius:20px;
      border:1px solid #E5DFF5;
      background:#fff;
      padding:34px;
      box-shadow:0 24px 70px rgba(28,22,58,.4);
      overflow:visible;
    }

    .modal-help h3{
      margin:0 0 6px;
      font-size:22px;
      font-weight:800;
      color:var(--ink);
    }

    .modal-help .modal-subtitle{
      color:var(--sub);
      font-size:14px;
      margin-bottom:22px;
    }

    .modal-help .close-button{
      position:absolute;
      right:14px;
      top:14px;
      background:#F1EDFA;
      border:none;
      width:36px;
      height:36px;
      border-radius:50%;
      line-height:1;
      cursor:pointer;
      font-size:24px;
      color:var(--sub);
      display:flex;
      align-items:center;
      justify-content:center;
      transition:background .2s;
    }

    .modal-help .close-button:hover{
      background:#E5DDF6;
    }

    .modal-form label{
      display:block;
      font-size:14px;
      color:var(--ink);
      font-weight:600;
      margin-bottom:16px;
    }

    .modal-form label span{
      color:var(--error);
      margin-left:3px;
    }

    .modal-form input,
    .modal-form select{
      display:block;
      width:100%;
      height:48px;
      border:1px solid var(--border-strong);
      background:#FBFAFE;
      border-radius:12px;
      padding:0 15px;
      font-size:15px;
      font-weight:400;
      color:var(--ink);
      margin-top:6px;
      transition:border-color .2s,box-shadow .2s,background .2s;
      appearance:auto;
    }

    .modal-form input:focus,
    .modal-form select:focus{
      outline:none;
      border-color:var(--primary);
      background:#fff;
      box-shadow:0 0 0 3px rgba(108,76,224,.14);
    }

    .modal-form input::placeholder{
      color:var(--muted);
    }

    .modal-form .btn{
      margin-top:6px;
    }

    .form-feedback{
      display:block;
      color:var(--cyan);
      font-size:13px;
      min-height:18px;
      margin-bottom:8px;
    }

    .privacy-tip{
      color:var(--muted);
      font-size:12px;
      margin:12px 0 0;
      text-align:center;
    }

    /* ===== Responsive ===== */
    @media (max-width:1023.98px){
      .sidebar{
        display:none;
      }

      .main-wrap{
        margin-left:0;
      }

      .mobile-topbar{
        display:flex;
      }

      .site-shell{
        display:block;
      }
    }

    @media (max-width:900px){
      .hero-grid{
        grid-template-columns:1fr;
        gap:40px;
      }

      .cat-hero{
        padding:56px 0 60px;
      }

      .cat-hero h1{
        font-size:42px;
      }

      .visual-frame{
        max-width:580px;
        margin:0 auto;
        width:100%;
      }

      .visual-frame img{
        height:280px;
      }

      .shield-grid{
        grid-template-columns:1fr;
        gap:36px;
      }

      .shield-illustration{
        max-width:520px;
        margin:0 auto;
        width:100%;
      }

      .cta-inner{
        flex-direction:column;
        align-items:flex-start;
        padding:40px;
      }
    }

    @media (max-width:767.98px){
      .container{
        padding:0 20px;
      }

      .cat-hero h1{
        font-size:34px;
      }

      .section-head{
        margin-bottom:30px;
      }

      .section-head h2{
        font-size:26px;
      }

      .shield-copy h2{
        font-size:26px;
      }

      .sec-layout{
        display:flex;
        flex-direction:column;
        gap:18px;
      }

      .sec-card:nth-child(4),
      .sec-card:nth-child(5){
        margin:0;
      }

      .feature-list{
        grid-template-columns:1fr;
      }

      .checklist-card{
        padding:18px 14px 4px;
      }

      .check-item{
        padding:14px 8px;
      }

      .check-item strong{
        font-size:15px;
      }

      .check-item p{
        font-size:12px;
      }

      .faq-accordion .accordion-title{
        font-size:16px;
        padding:18px 40px 18px 20px;
      }

      .faq-accordion .accordion-content{
        padding:0 20px 20px 40px;
        font-size:14px;
      }

      .report-cta{
        padding-bottom:50px;
      }

      .cta-inner{
        padding:34px 24px;
      }

      .cta-copy h2{
        font-size:24px;
      }

      .footer-layout{
        grid-template-columns:1fr;
        gap:26px;
        margin-bottom:28px;
      }

      .footer-bottom{
        flex-direction:column;
      }

      .footer-bottom span:last-child{
        margin-left:0 !important;
      }
    }

    @media (max-width:520px){
      body{
        font-size:15px;
      }

      .cat-hero h1{
        font-size:30px;
      }

      .hero-desc{
        font-size:15px;
      }

      .hero-actions .btn{
        width:100%;
      }

      .visual-frame img{
        height:220px;
      }

      .badge-online{
        left:10px;
        top:12px;
        font-size:11px;
        padding:6px 10px;
      }

      .badge-shield{
        right:6px;
        bottom:12px;
        font-size:11px;
        padding:6px 10px;
      }

      .float-badge i,
      .float-badge .pulse-dot{
        width:6px;
        height:6px;
        font-size:12px;
      }

      .shield-illustration{
        min-height:240px;
      }

      .shield-illustration i{
        width:78px;
        height:78px;
        font-size:30px;
        border-radius:24px;
      }

      .sec-card{
        padding:24px 20px;
      }

      .cta-inner{
        padding:28px 20px;
      }

      .cta-copy h2{
        font-size:21px;
      }

      .modal-help{
        padding:26px 20px;
      }

      .faq-accordion .accordion-content{
        padding-left:20px;
      }
    }