/* roulang page: index */
:root {
 --color-brand-800: #1e3a5f;
 --color-brand-700: #264d72;
 --color-brand-600: #2e608c;
 --color-accent-500: #c8963e;
 --color-accent-400: #d4a853;
 --color-warm-100: #fdf9f3;
 --color-surface: #ffffff;
 --color-bg: #f9fafb;
 --color-text: #1a1a1a;
 --color-text-soft: #6b7280;
 --color-text-muted: #9ca3af;
 --color-border: #e5e7eb;
 --color-border-light: #f3f4f6;
 --radius-md:0.625rem;
 --radius-lg:0.875rem;
 --radius-xl:1.125rem;
 --shadow-sm:01px3px rgba(0,0,0,0.04);
 --shadow-md:04px20px rgba(0,0,0,0.06);
 --shadow-lg:08px36px rgba(0,0,0,0.09);
 --transition-fast:180ms ease;
 --transition-smooth:280ms cubic-bezier(0.4,0,0.2,1);
 }

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

 html {
 scroll-behavior: smooth;
 -webkit-tap-highlight-color: transparent;
 }

 body {
 margin:0;
 padding:0;
 font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
 line-height:1.7;
 color: var(--color-text);
 background-color: var(--color-bg);
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 padding-bottom:0;
 }

 @media (max-width:767px) {
 body {
 padding-bottom:72px;
 }
 }

 a {
 text-decoration: none;
 color: inherit;
 transition: color var(--transition-fast);
 }

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

 button,
 input {
 font-family: inherit;
 }

 button:focus-visible,
 a:focus-visible {
 outline:2px solid var(--color-brand-600);
 outline-offset:3px;
 border-radius:4px;
 }

 .container-custom {
 max-width:1200px;
 margin-left: auto;
 margin-right: auto;
 padding-left:1.25rem;
 padding-right:1.25rem;
 }
 @media (min-width:640px) {
 .container-custom {
 padding-left:2rem;
 padding-right:2rem;
 }
 }
 @media (min-width:1024px) {
 .container-custom {
 padding-left:2.5rem;
 padding-right:2.5rem;
 }
 }

 .header-nav {
 position: sticky;
 top:0;
 z-index:100;
 background: rgba(255,255,255,0.92);
 backdrop-filter: blur(16px);
 -webkit-backdrop-filter: blur(16px);
 border-bottom:1px solid var(--color-border-light);
 transition: box-shadow var(--transition-smooth);
 }
 .header-nav.scrolled {
 box-shadow: var(--shadow-md);
 }

 .nav-link {
 position: relative;
 font-weight:500;
 font-size:0.95rem;
 color: var(--color-text-soft);
 padding:0.5rem0;
 transition: color var(--transition-fast);
 white-space: nowrap;
 }
 .nav-link:hover {
 color: var(--color-brand-800);
 }
 .nav-link.active {
 color: var(--color-brand-800);
 font-weight:600;
 }
 .nav-link.active::after {
 content: '';
 position: absolute;
 bottom: -2px;
 left:0;
 right:0;
 height:2.5px;
 background: var(--color-brand-800);
 border-radius:2px;
 }

 .btn-primary {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap:0.5rem;
 padding:0.75rem1.75rem;
 font-weight:600;
 font-size:0.95rem;
 color: #ffffff;
 background: var(--color-brand-800);
 border: none;
 border-radius: var(--radius-lg);
 cursor: pointer;
 transition: all var(--transition-smooth);
 box-shadow:02px8px rgba(30,58,95,0.18);
 white-space: nowrap;
 }
 .btn-primary:hover {
 background: #264d72;
 box-shadow:04px18px rgba(30,58,95,0.28);
 transform: translateY(-1px);
 }
 .btn-primary:active {
 transform: translateY(0);
 box-shadow:01px4px rgba(30,58,95,0.15);
 }

 .btn-outline {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap:0.5rem;
 padding:0.7rem1.6rem;
 font-weight:600;
 font-size:0.95rem;
 color: var(--color-brand-800);
 background: transparent;
 border:2px solid var(--color-brand-800);
 border-radius: var(--radius-lg);
 cursor: pointer;
 transition: all var(--transition-smooth);
 white-space: nowrap;
 }
 .btn-outline:hover {
 background: var(--color-brand-800);
 color: #ffffff;
 box-shadow:04px16px rgba(30,58,95,0.2);
 }
 .btn-outline:active {
 transform: scale(0.97);
 }

 .card-product {
 background: #ffffff;
 border-radius: var(--radius-xl);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 transition: all var(--transition-smooth);
 border:1px solid var(--color-border-light);
 display: flex;
 flex-direction: column;
 }
 .card-product:hover {
 box-shadow: var(--shadow-lg);
 transform: translateY(-4px);
 border-color: transparent;
 }
 .card-product .card-image-area {
 aspect-ratio:4/3;
 background: linear-gradient(135deg, #f0f5f90%, #e8eef540%, #f5f3ef100%);
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 overflow: hidden;
 }
 .card-product .card-image-area .umbrella-icon {
 font-size:4.5rem;
 transition: transform var(--transition-smooth);
 filter: drop-shadow(04px8px rgba(0,0,0,0.08));
 }
 .card-product:hover .card-image-area .umbrella-icon {
 transform: translateY(-6px) scale(1.05);
 }
 .card-product .card-body {
 padding:1.25rem1.25rem1.5rem;
 flex:1;
 display: flex;
 flex-direction: column;
 }
 .card-product .card-tag {
 display: inline-block;
 font-size:0.75rem;
 font-weight:600;
 padding:0.25rem0.7rem;
 border-radius:999px;
 background: #fef3e4;
 color: #b07d34;
 margin-bottom:0.6rem;
 align-self: flex-start;
 }
 .card-product .card-title {
 font-size:1.1rem;
 font-weight:700;
 color: #1a1a1a;
 margin-bottom:0.4rem;
 }
 .card-product .card-desc {
 font-size:0.875rem;
 color: #6b7280;
 line-height:1.6;
 flex:1;
 }

 .stat-block {
 text-align: center;
 padding:1.5rem1rem;
 }
 .stat-block .stat-number {
 font-size:2.5rem;
 font-weight:800;
 color: var(--color-brand-800);
 letter-spacing: -0.02em;
 line-height:1.1;
 }
 .stat-block .stat-label {
 font-size:0.9rem;
 color: #6b7280;
 margin-top:0.4rem;
 font-weight:500;
 }

 .faq-item {
 border:1px solid var(--color-border-light);
 border-radius: var(--radius-lg);
 overflow: hidden;
 background: #ffffff;
 transition: box-shadow var(--transition-fast);
 margin-bottom:0.75rem;
 }
 .faq-item:hover {
 box-shadow: var(--shadow-sm);
 }
 .faq-item summary {
 padding:1.1rem1.25rem;
 font-weight:600;
 font-size:0.95rem;
 cursor: pointer;
 list-style: none;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap:0.75rem;
 color: #1a1a1a;
 user-select: none;
 }
 .faq-item summary::-webkit-details-marker {
 display: none;
 }
 .faq-item summary .faq-arrow {
 flex-shrink:0;
 width:20px;
 height:20px;
 transition: transform var(--transition-smooth);
 color: #9ca3af;
 }
 .faq-item[open] summary .faq-arrow {
 transform: rotate(180deg);
 color: var(--color-brand-800);
 }
 .faq-item .faq-answer {
 padding:01.25rem1.1rem;
 font-size:0.9rem;
 color: #6b7280;
 line-height:1.7;
 }

 .mobile-bottom-nav {
 position: fixed;
 bottom:0;
 left:0;
 right:0;
 z-index:200;
 background: rgba(255,255,255,0.96);
 backdrop-filter: blur(20px);
 -webkit-backdrop-filter: blur(20px);
 border-top:1px solid #e5e7eb;
 display: flex;
 justify-content: space-around;
 align-items: center;
 padding:0.35rem0.25rem;
 padding-bottom: max(0.35rem, env(safe-area-inset-bottom));
 box-shadow:0 -2px16px rgba(0,0,0,0.05);
 }
 .mobile-bottom-nav .tab-item {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap:0.2rem;
 padding:0.35rem0.5rem;
 font-size:0.68rem;
 font-weight:500;
 color: #9ca3af;
 transition: color var(--transition-fast);
 cursor: pointer;
 text-decoration: none;
 min-width:48px;
 border-radius:8px;
 -webkit-tap-highlight-color: transparent;
 }
 .mobile-bottom-nav .tab-item .tab-icon {
 width:22px;
 height:22px;
 transition: all var(--transition-fast);
 }
 .mobile-bottom-nav .tab-item.active {
 color: var(--color-brand-800);
 font-weight:700;
 }
 .mobile-bottom-nav .tab-item:active {
 background: rgba(30,58,95,0.06);
 }

 .section-divider {
 width:60px;
 height:3px;
 background: var(--color-accent-400);
 border-radius:2px;
 margin:0 auto1rem;
 }
 .section-divider.left {
 margin-left:0;
 margin-right: auto;
 }

 @media (max-width:767px) {
 .hide-on-mobile {
 display: none !important;
 }
 .stat-block .stat-number {
 font-size:2rem;
 }
 .card-product .card-image-area .umbrella-icon {
 font-size:3.5rem;
 }
 .btn-primary,
 .btn-outline {
 padding:0.65rem1.35rem;
 font-size:0.875rem;
 }
 }

 @media (min-width:768px) {
 .show-on-mobile-only {
 display: none !important;
 }
 }

 @media (max-width:520px) {
 .container-custom {
 padding-left:1rem;
 padding-right:1rem;
 }
 .stat-block .stat-number {
 font-size:1.7rem;
 }
 .mobile-bottom-nav .tab-item {
 font-size:0.62rem;
 padding:0.25rem0.3rem;
 }
 .mobile-bottom-nav .tab-item .tab-icon {
 width:19px;
 height:19px;
 }
 }

 .hero-gradient {
 background: linear-gradient(160deg, #1a31500%, #1e3a5f30%, #264d7265%, #1e3a5f100%);
 }
 .section-alt {
 background: #fdf9f3;
 }
 .process-step {
 position: relative;
 padding-left:2.5rem;
 margin-bottom:1.5rem;
 }
 .process-step::before {
 content: '';
 position: absolute;
 left:0.7rem;
 top:2rem;
 bottom: -0.5rem;
 width:1.5px;
 background: #d4c8b0;
 border-radius:1px;
 }
 .process-step:last-child::before {
 display: none;
 }
 .process-step .step-dot {
 position: absolute;
 left:0;
 top:0.15rem;
 width:1.5rem;
 height:1.5rem;
 border-radius:50%;
 background: var(--color-accent-400);
 display: flex;
 align-items: center;
 justify-content: center;
 color: #fff;
 font-weight:700;
 font-size:0.75rem;
 box-shadow:02px6px rgba(200,150,60,0.3);
 }