/* roulang page: index */
:root{
  --brand:#0f766e;
  --brand-dark:#0b5a54;
  --brand-soft:#e5f4f1;
  --accent:#f97316;
  --accent-soft:#fff2e7;
  --ink:#0d1f1c;
  --text:#3a4f4a;
  --muted:#748b85;
  --bg:#f5f8f7;
  --surface:#ffffff;
  --line:#e2ebe8;
  --radius-lg:22px;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 2px 8px rgba(13,31,28,.06);
  --shadow:0 12px 32px rgba(13,31,28,.09);
  --shadow-lg:0 26px 60px rgba(13,31,28,.16);
  --container:1180px;
  --space:clamp(56px,7vw,96px);
  --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.75;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;color:var(--ink);line-height:1.3;font-weight:700;letter-spacing:-.01em;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:var(--brand);text-decoration:none;transition:color .2s ease,opacity .2s ease;}
a:hover{color:var(--brand-dark);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid rgba(249,115,22,.55);
  outline-offset:2px;
  border-radius:6px;
}
img{max-width:100%;display:block;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
::selection{background:var(--brand);color:#fff;}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:var(--space) 0;}
.section--tight{padding:calc(var(--space) * .68) 0;}
.section--surface{background:var(--surface);}
.section--soft{background:linear-gradient(180deg,#eef6f4 0%,#f5f8f7 100%);}

.section-head{max-width:760px;margin-bottom:44px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;margin-bottom:16px;
  font-size:13px;font-weight:600;letter-spacing:.08em;
  color:var(--brand-dark);background:var(--brand-soft);
  border:1px solid #cfe9e5;border-radius:999px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
.section-head h2{font-size:clamp(25px,3.2vw,36px);margin-bottom:14px;}
.section-head .lead{font-size:16.5px;color:var(--muted);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;border:1px solid transparent;
  font-size:15px;font-weight:600;cursor:pointer;
  transition:transform .18s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(15,118,110,.28);}
.btn-primary:hover{background:var(--brand-dark);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px rgba(15,118,110,.34);}
.btn-primary:active{transform:translateY(0);}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(249,115,22,.28);}
.btn-accent:hover{background:#e0640c;color:#fff;transform:translateY(-2px);}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55);}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--brand-dark);border-color:#c4ded9;}
.btn-outline:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark);}
.btn-sm{padding:9px 18px;font-size:14px;}
.btn-block{width:100%;}

.badge{
  display:inline-block;padding:4px 11px;border-radius:999px;
  font-size:12.5px;font-weight:600;line-height:1.6;
  background:var(--brand-soft);color:var(--brand-dark);border:1px solid #cfe9e5;
}
.badge-accent{background:var(--accent-soft);color:#b45309;border-color:#fbd9bd;}
.badge-ink{background:#eef2f1;color:#4b5f5a;border-color:#e0e8e6;}

/* Header */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:28px;min-height:74px;}
.logo{display:flex;align-items:baseline;gap:10px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.logo:hover{color:var(--brand-dark);}
.logo span{font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:.02em;}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto;}
.main-nav a{
  padding:9px 15px;border-radius:var(--radius-sm);
  font-size:15px;font-weight:500;color:#45605a;
  transition:background .2s ease,color .2s ease;
}
.main-nav a:hover{background:#eef5f3;color:var(--brand-dark);}
.main-nav a.active{background:var(--brand);color:#fff;}
.nav-cta{flex-shrink:0;}

/* Hero */
.hero{
  position:relative;
  padding:clamp(70px,9vw,120px) 0 0;
  color:#eef6f4;
  background:
    linear-gradient(112deg,rgba(8,29,26,.94) 0%,rgba(8,29,26,.76) 46%,rgba(8,29,26,.36) 100%),
    url('/assets/images/8b8eb05109cf1c76.jpg') center/cover no-repeat;
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute;inset:auto -10% -30% auto;width:520px;height:520px;
  background:radial-gradient(circle,rgba(20,184,166,.32),transparent 68%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1;max-width:760px;}
.hero .eyebrow{background:rgba(255,255,255,.14);color:#d5f0ec;border-color:rgba(255,255,255,.28);}
.hero h1{
  font-size:clamp(30px,4.6vw,50px);
  color:#fff;margin-bottom:20px;letter-spacing:-.02em;
}
.hero h1 em{font-style:normal;color:#5eead4;}
.hero-sub{font-size:17px;line-height:1.85;color:#c9dedb;max-width:640px;margin-bottom:30px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:44px;}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:56px;}
.hero-points span{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;font-size:14px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#e2f2ef;
}
.hero-points span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);}
.hero-strip{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.16);
  border-top:1px solid rgba(255,255,255,.2);
}
.hero-strip div{padding:26px 22px;background:rgba(8,29,26,.55);}
.hero-strip strong{display:block;font-size:clamp(22px,2.6vw,30px);color:#fff;font-weight:800;letter-spacing:-.02em;}
.hero-strip small{display:block;margin-top:4px;font-size:13.5px;color:#a9c6c2;}

/* Grids */
.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-6{grid-template-columns:repeat(3,1fr);}

/* Cards */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe4e0;}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e8efee;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .card-media img{transform:scale(1.05);}
.card-media .badge{position:absolute;left:14px;top:14px;background:rgba(255,255,255,.94);border-color:transparent;}
.card-body{padding:22px 22px 26px;}
.card-title{font-size:18px;margin-bottom:10px;}
.card-text{font-size:14.5px;color:var(--muted);line-height:1.8;}
.card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;font-size:13px;color:var(--muted);}
.card-meta span{padding:4px 10px;border-radius:8px;background:#f2f7f6;border:1px solid #e5eeec;}

/* Features */
.feature{
  position:relative;padding:30px 26px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease;
}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.feature-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;margin-bottom:18px;border-radius:13px;
  background:var(--brand-soft);color:var(--brand-dark);
  font-size:15px;font-weight:800;border:1px solid #cfe9e5;
}
.feature h3{font-size:17.5px;margin-bottom:10px;}
.feature p{font-size:14.5px;color:var(--muted);line-height:1.8;}

/* Timeline */
.timeline{display:grid;gap:16px;}
.timeline li{
  display:grid;grid-template-columns:96px 1fr;gap:22px;align-items:start;
  padding:22px 24px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:border-color .22s ease,transform .22s ease;
}
.timeline li:hover{border-color:#cfe4e0;transform:translateX(4px);}
.timeline .time{font-size:15px;font-weight:800;color:var(--brand);letter-spacing:.02em;}
.timeline h3{font-size:16.5px;margin-bottom:6px;}
.timeline p{font-size:14.5px;color:var(--muted);}

/* Coaches */
.coach{display:flex;gap:18px;align-items:flex-start;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:box-shadow .22s ease,transform .22s ease;}
.coach:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.coach img{width:76px;height:76px;border-radius:18px;object-fit:cover;flex-shrink:0;}
.coach h3{font-size:17px;margin-bottom:4px;}
.coach .role{font-size:13px;color:var(--accent);font-weight:600;margin-bottom:8px;}
.coach p{font-size:14px;color:var(--muted);line-height:1.75;}

/* Data board */
.board{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;}
.metric-list{display:grid;gap:22px;}
.metric{display:grid;gap:9px;}
.metric-top{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:600;color:var(--ink);}
.metric-top span{font-size:13.5px;font-weight:600;color:var(--muted);}
.bar{height:9px;border-radius:999px;background:#e6efed;overflow:hidden;}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),#2dd4bf);}
.bar i.alt{background:linear-gradient(90deg,var(--accent),#fbbf24);}
.board-figure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.board-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;}

/* Gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:16px;}
.gallery figure{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.gallery figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.gallery figure:hover img{transform:scale(1.06);}
.gallery figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 14px;
  font-size:14px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(8,29,26,.82));
}
.gallery .span-2{grid-column:span 2;}
.gallery .tall{grid-row:span 2;}

/* Scene tags */
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.scene{
  padding:24px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-sm);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.scene:hover{transform:translateY(-4px);border-color:#cfe4e0;box-shadow:var(--shadow);}
.scene h3{font-size:16.5px;margin:12px 0 8px;}
.scene p{font-size:14px;color:var(--muted);}

/* Quotes */
.quote{
  display:flex;flex-direction:column;gap:16px;
  padding:28px 26px;border-radius:var(--radius);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.quote p{font-size:15px;line-height:1.85;color:var(--text);}
.quote footer{display:flex;align-items:center;gap:12px;margin-top:auto;}
.quote img{width:44px;height:44px;border-radius:50%;object-fit:cover;}
.quote b{display:block;font-size:14.5px;color:var(--ink);}
.quote small{display:block;font-size:12.5px;color:var(--muted);}

/* Channel matrix */
.channel{
  display:flex;flex-direction:column;
  border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease;
}
.channel:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.channel img{width:100%;aspect-ratio:16/9;object-fit:cover;}
.channel-body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1;}
.channel-body h3{font-size:19px;}
.channel-body p{font-size:14.5px;color:var(--muted);}
.channel-link{margin-top:auto;font-size:14.5px;font-weight:600;color:var(--brand);}
.channel-link:hover{color:var(--accent);}

/* Gear list */
.gear-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.gear-list li{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 20px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--line);
}
.gear-list li b{display:block;font-size:15px;color:var(--ink);margin-bottom:2px;}
.gear-list li p{font-size:13.6px;color:var(--muted);}
.gear-list .tag{
  flex-shrink:0;width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:var(--brand-dark);
  background:var(--brand-soft);border:1px solid #cfe9e5;
}

/* News */
.news-item{
  display:grid;grid-template-columns:170px 1fr;gap:22px;align-items:center;
  padding:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  transition:transform .22s ease,box-shadow .22s ease;
}
.news-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.news-item img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:var(--radius-sm);}
.news-item h3{font-size:17px;margin-bottom:8px;}
.news-item p{font-size:14px;color:var(--muted);}
.news-meta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12.8px;color:var(--muted);}

/* FAQ */
.faq{display:grid;gap:14px;max-width:920px;margin:0 auto;}
.faq details{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);
  padding:6px 22px;transition:border-color .22s ease;
}
.faq details[open]{border-color:#cfe4e0;box-shadow:var(--shadow);}
.faq summary{
  cursor:pointer;list-style:none;padding:18px 0;
  font-size:16.5px;font-weight:600;color:var(--ink);
  display:flex;justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"+";font-size:22px;font-weight:400;color:var(--brand);
  transition:transform .22s ease;line-height:1;
}
.faq details[open] summary::after{content:"–";}
.faq .answer{padding:0 0 20px;font-size:15px;color:var(--muted);line-height:1.85;}

/* CTA / form */
.cta-panel{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  padding:clamp(32px,5vw,58px);
  background:
    linear-gradient(105deg,rgba(8,29,26,.94),rgba(11,90,84,.86)),
    url('/assets/images/01245204ec57c239.webp') center/cover no-repeat;
  color:#dcefe c;
  box-shadow:var(--shadow-lg);
}
.cta-panel{color:#dcefe c;}
.cta-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;position:relative;z-index:1;}
.cta-panel h2{color:#fff;font-size:clamp(24px,3vw,32px);margin-bottom:14px;}
.cta-panel p{color:#c6ded9;font-size:15.5px;line-height:1.85;}
.cta-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.cta-facts span{
  padding:7px 14px;border-radius:999px;font-size:13.5px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.24);color:#e4f4f1;
}
.form-card{
  background:#fff;border-radius:var(--radius);padding:28px;
  box-shadow:0 20px 50px rgba(4,20,18,.3);
}
.form-card h3{font-size:18px;margin-bottom:6px;}
.form-card .form-note{font-size:13.5px;color:var(--muted);margin-bottom:20px;}
.field{display:grid;gap:7px;margin-bottom:16px;}
.field label{font-size:13.5px;font-weight:600;color:var(--ink);}
.field input,.field select,.field textarea{
  width:100%;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid #dbe6e4;background:#fbfdfd;font-size:14.5px;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.field input:hover,.field select:hover{border-color:#bfd8d4;}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brand);background:#fff;
  box-shadow:0 0 0 4px rgba(15,118,110,.13);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}

/* Footer */
.site-footer{background:#0c2320;color:#a9c6c2;padding:64px 0 0;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:40px;padding-bottom:48px;}
.footer-brand .logo{color:#fff;font-size:21px;}
.footer-brand .logo:hover{color:#5eead4;}
.footer-brand p{margin-top:16px;font-size:14px;line-height:1.85;color:#8fadaa;max-width:330px;}
.footer-col h4{font-size:15px;color:#fff;margin-bottom:16px;}
.footer-col ul{display:grid;gap:10px;}
.footer-col a{font-size:14px;color:#9fbdb9;}
.footer-col a:hover{color:#5eead4;}
.footer-contact li{font-size:14px;color:#9fbdb9;display:flex;gap:8px;}
.footer-contact li b{color:#d7eae7;font-weight:600;}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:22px 0 30px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:13.5px;color:#7f9c99;
}
.footer-bottom a{color:#9fbdb9;}
.footer-bottom a:hover{color:#5eead4;}

/* Responsive */
@media (max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-6{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .board{grid-template-columns:1fr;gap:32px;}
  .cta-grid{grid-template-columns:1fr;gap:32px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .hero-strip{grid-template-columns:repeat(2,1fr);}
  .gallery{grid-template-columns:repeat(2,1fr);}
  .scene-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:768px){
  .header-inner{flex-wrap:wrap;gap:12px;padding:12px 0 8px;}
  .main-nav{order:3;width:100%;margin-left:0;overflow-x:auto;padding-bottom:6px;}
  .main-nav a{white-space:nowrap;}
  .nav-cta{margin-left:auto;}
  .grid-2,.grid-3,.grid-4,.grid-6{grid-template-columns:1fr;}
  .scene-grid{grid-template-columns:1fr;}
  .gear-list{grid-template-columns:1fr;}
  .timeline li{grid-template-columns:1fr;gap:8px;}
  .news-item{grid-template-columns:1fr;gap:16px;}
  .hero-actions .btn{width:100%;}
  .hero-strip{grid-template-columns:1fr;}
  .hero-strip div{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.12);}
  .gallery{grid-template-columns:1fr;grid-auto-rows:200px;}
  .gallery .span-2{grid-column:span 1;}
  .gallery .tall{grid-row:span 1;}
  .form-row{grid-template-columns:1fr;}
  .coach{flex-direction:column;}
}
@media (max-width:520px){
  .container{padding:0 18px;}
  .logo{font-size:19px;}
  .logo span{display:none;}
  .footer-grid{grid-template-columns:1fr;}
  .form-card{padding:22px;}
  .section-head{margin-bottom:32px;}
}

/* roulang page: category2 */
:root{
 --brand:#0f766e;
 --brand-dark:#0b5a54;
 --brand-soft:#e5f4f1;
 --accent:#f97316;
 --accent-soft:#fff2e7;
 --ink:#0d1f1c;
 --text:#3a4f4a;
 --muted:#748b85;
 --bg:#f5f8f7;
 --surface:#ffffff;
 --line:#e2ebe8;
 --radius-lg:22px;
 --radius:16px;
 --radius-sm:10px;
 --shadow-sm:0 2px 8px rgba(13,31,28,.06);
 --shadow:0 12px 32px rgba(13,31,28,.09);
 --shadow-lg:0 26px 60px rgba(13,31,28,.16);
 --container:1180px;
 --space:clamp(56px,7vw,96px);
 --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
 margin:0;
 font-family:var(--font);
 font-size:16px;
 line-height:1.75;
 color:var(--text);
 background:var(--bg);
 -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink);margin:0 0 12px;font-weight:800;line-height:1.32;letter-spacing:-.01em;}
p{margin:0 0 14px;}
ul{margin:0;padding:0;list-style:none;}
a{color:var(--brand);text-decoration:none;transition:color .2s ease,opacity .2s ease;}
a:hover{color:var(--brand-dark);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
 outline:3px solid rgba(249,115,22,.55);
 outline-offset:2px;
 border-radius:6px;
}
img{max-width:100%;display:block;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:var(--space) 0;}
.section--tight{padding:calc(var(--space) * .68) 0;}
.section--surface{background:var(--surface);}
.section--soft{background:linear-gradient(180deg,#eef6f4 0%,#f5f8f7 100%);}
.section-head{max-width:760px;margin-bottom:44px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(25px,3.2vw,36px);margin-bottom:14px;}
.section-head .lead{font-size:16.5px;color:var(--muted);margin:0;}
.eyebrow{
 display:inline-flex;align-items:center;gap:8px;
 padding:6px 14px;margin-bottom:16px;
 font-size:13px;font-weight:600;letter-spacing:.08em;
 color:var(--brand-dark);background:var(--brand-soft);
 border:1px solid #cfe9e5;border-radius:999px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 padding:13px 26px;border-radius:999px;border:1px solid transparent;
 font-size:15px;font-weight:600;cursor:pointer;
 transition:transform .18s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
 white-space:nowrap;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(15,118,110,.28);}
.btn-primary:hover{background:var(--brand-dark);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px rgba(15,118,110,.34);}
.btn-primary:active{transform:translateY(0);}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(249,115,22,.28);}
.btn-accent:hover{background:#e0640c;color:#fff;transform:translateY(-2px);}
.btn-accent:active{transform:translateY(0);}
.btn-outline{background:transparent;color:var(--brand-dark);border-color:#c4ded9;}
.btn-outline:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark);}
.btn-sm{padding:9px 18px;font-size:14px;}
.btn-block{width:100%;}
.badge{
 display:inline-block;padding:4px 11px;border-radius:999px;
 font-size:12.5px;font-weight:600;line-height:1.6;
 background:var(--brand-soft);color:var(--brand-dark);border:1px solid #cfe9e5;
}
.badge-accent{background:var(--accent-soft);color:#b45309;border-color:#fbd9bd;}
.badge-ink{background:#eef2f1;color:#4b5f5a;border-color:#e0e8e6;}
/* ---------- Header ---------- */
.site-header{
 position:sticky;top:0;z-index:60;
 background:rgba(255,255,255,.94);
 backdrop-filter:blur(12px);
 border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:28px;min-height:74px;}
.logo{display:flex;align-items:baseline;gap:10px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.logo:hover{color:var(--brand-dark);}
.logo span{font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:.02em;}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto;}
.main-nav a{
 padding:9px 15px;border-radius:var(--radius-sm);
 font-size:15px;font-weight:500;color:#45605a;
 transition:background .2s ease,color .2s ease;
}
.main-nav a:hover{background:#eef5f3;color:var(--brand-dark);}
.main-nav a.active{background:var(--brand);color:#fff;}
.nav-cta{flex-shrink:0;}
/* ---------- Page banner ---------- */
.page-banner{
 position:relative;
 padding:clamp(56px,7vw,92px) 0;
 color:#eaf5f3;
 background:
 linear-gradient(110deg,rgba(8,29,26,.95) 0%,rgba(8,29,26,.78) 48%,rgba(8,29,26,.42) 100%),
 url('/assets/images/01245204ec57c239.webp') center/cover no-repeat;
 overflow:hidden;
}
.page-banner::after{
 content:"";position:absolute;inset:auto -12% -34% auto;width:480px;height:480px;
 background:radial-gradient(circle,rgba(20,184,166,.32),transparent 68%);
 pointer-events:none;
}
.page-banner .container{position:relative;z-index:1;}
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:#a9c6c2;margin-bottom:20px;}
.breadcrumb a{color:#cfe9e5;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{opacity:.6;}
.page-banner h1{color:#fff;font-size:clamp(28px,4.1vw,46px);max-width:840px;margin-bottom:18px;}
.page-banner .banner-lead{max-width:700px;font-size:16.5px;color:#c5dbd8;line-height:1.9;margin-bottom:4px;}
.banner-tags{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 30px;}
.banner-tags span{
 display:inline-flex;align-items:center;gap:8px;
 padding:8px 16px;border-radius:999px;font-size:14px;
 background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#e2f2ef;
}
.banner-tags span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);}
.banner-actions{display:flex;flex-wrap:wrap;gap:14px;}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55);}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px);}
/* ---------- Step ladder ---------- */
.step-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.step-card{
 position:relative;
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius-lg);
 padding:30px 24px 26px;
 box-shadow:var(--shadow-sm);
 transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.step-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#cfe9e5;}
.step-card .step-no{
 display:inline-flex;align-items:center;justify-content:center;
 width:42px;height:42px;border-radius:12px;
 background:var(--brand-soft);color:var(--brand-dark);
 font-weight:800;font-size:17px;margin-bottom:16px;
}
.step-card h3{font-size:19px;margin-bottom:8px;}
.step-card p{font-size:14.8px;color:var(--muted);margin-bottom:14px;}
.step-card .step-meta{font-size:13.5px;color:var(--brand-dark);font-weight:600;}
.step-card.is-feature{border-color:#fbd9bd;background:linear-gradient(180deg,#fff8f2 0%,#ffffff 60%);}
.step-card.is-feature .step-no{background:var(--accent-soft);color:#b45309;}
/* ---------- Dimension grid ---------- */
.dim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.dim-card{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:26px 24px;
 box-shadow:var(--shadow-sm);
 transition:transform .22s ease,box-shadow .22s ease;
}
.dim-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.dim-card .dim-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.dim-card h3{font-size:18px;margin:0;}
.dim-card p{font-size:14.8px;color:var(--muted);margin-bottom:14px;}
.dim-card dl{margin:0;font-size:14px;}
.dim-card dt{color:var(--muted);font-weight:500;}
.dim-card dd{margin:0 0 8px;color:var(--ink);font-weight:600;}
.dim-card dd:last-child{margin-bottom:0;}
/* ---------- Timeline ---------- */
.timeline{position:relative;margin-top:8px;padding-left:26px;}
.timeline::before{content:"";position:absolute;left:7px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--brand) 0%,#cfe9e5 100%);}
.tl-item{position:relative;padding:0 0 26px 20px;}
.tl-item::before{
 content:"";position:absolute;left:-26px;top:7px;width:16px;height:16px;border-radius:50%;
 background:#fff;border:3px solid var(--brand);box-shadow:0 0 0 4px rgba(15,118,110,.09);
}
.tl-item:last-child{padding-bottom:0;}
.tl-item h4{font-size:17px;margin-bottom:6px;}
.tl-item p{font-size:14.8px;color:var(--muted);margin:0;}
.tl-item .badge{margin-left:10px;vertical-align:middle;}
/* ---------- Metrics ---------- */
.metric-band{
 background:linear-gradient(120deg,#0b5a54 0%,#0f766e 58%,#128f83 100%);
 border-radius:var(--radius-lg);
 padding:clamp(30px,4vw,48px);
 color:#eaf5f3;
 box-shadow:var(--shadow);
}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:26px;}
.metric-grid .metric{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius);padding:20px;}
.metric-grid strong{display:block;font-size:clamp(24px,2.8vw,32px);color:#fff;font-weight:800;letter-spacing:-.02em;}
.metric-grid small{display:block;font-size:13.5px;color:#bfdcd8;margin-top:4px;}
.metric-band ul{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px;}
.metric-band ul li{position:relative;padding-left:20px;font-size:15px;color:#dcefec;}
.metric-band ul li::before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;border-radius:50%;background:#5eead4;}
/* ---------- Scene cards ---------- */
.scene-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.scene-card{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius-lg);
 overflow:hidden;
 box-shadow:var(--shadow-sm);
 transition:transform .22s ease,box-shadow .22s ease;
 display:flex;flex-direction:column;
}
.scene-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.scene-card figure{margin:0;position:relative;overflow:hidden;}
.scene-card figure img{width:100%;height:196px;object-fit:cover;transition:transform .5s ease;}
.scene-card:hover figure img{transform:scale(1.05);}
.scene-card figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,31,28,0) 40%,rgba(13,31,28,.42) 100%);}
.scene-card .scene-body{padding:22px 22px 24px;display:flex;flex-direction:column;flex:1;}
.scene-card h3{font-size:18px;margin-bottom:8px;}
.scene-card p{font-size:14.8px;color:var(--muted);margin-bottom:14px;}
.scene-card .scene-list{margin-top:auto;font-size:14px;color:#4b5f5a;}
.scene-card .scene-list li{padding:6px 0 6px 20px;position:relative;border-top:1px dashed var(--line);}
.scene-card .scene-list li:first-child{border-top:0;}
.scene-card .scene-list li::before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;border-radius:50%;background:var(--accent);}
/* ---------- Coach cards ---------- */
.coach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.coach-card{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius-lg);
 padding:26px 24px;
 box-shadow:var(--shadow-sm);
 transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
 height:100%;
}
.coach-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#cfe9e5;}
.coach-card .coach-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.coach-card .coach-top img{width:62px;height:62px;border-radius:50%;object-fit:cover;border:2px solid var(--brand-soft);}
.coach-card h3{font-size:18px;margin:0 0 2px;}
.coach-card .coach-title{font-size:13.5px;color:var(--muted);}
.coach-card p{font-size:14.8px;color:var(--muted);margin-bottom:16px;}
.coach-card .coach-tags{display:flex;flex-wrap:wrap;gap:8px;}
/* ---------- Gear list ---------- */
.gear-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;}
.gear-panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-sm);}
.gear-list li{display:flex;gap:14px;padding:16px 0;border-bottom:1px dashed var(--line);}
.gear-list li:last-child{border-bottom:0;padding-bottom:0;}
.gear-list li:first-child{padding-top:0;}
.gear-list .gear-key{
 flex-shrink:0;width:40px;height:40px;border-radius:12px;
 display:flex;align-items:center;justify-content:center;
 background:var(--brand-soft);color:var(--brand-dark);font-weight:700;font-size:14px;
}
.gear-list h4{font-size:16px;margin-bottom:4px;}
.gear-list p{font-size:14.6px;color:var(--muted);margin:0;}
.gear-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);position:relative;}
.gear-visual img{width:100%;height:100%;min-height:320px;object-fit:cover;}
/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:14px;max-width:900px;margin:0 auto;}
.faq-item{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius);
 box-shadow:var(--shadow-sm);
 overflow:hidden;
 transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item[open]{border-color:#cfe9e5;box-shadow:var(--shadow);}
.faq-item summary{
 list-style:none;cursor:pointer;
 padding:20px 24px;
 font-size:16.5px;font-weight:700;color:var(--ink);
 display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
 content:"+";flex-shrink:0;
 width:28px;height:28px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 background:var(--brand-soft);color:var(--brand-dark);font-weight:700;
 transition:transform .22s ease;
}
.faq-item[open] summary::after{content:"–";transform:rotate(180deg);}
.faq-item .faq-body{padding:0 24px 22px;font-size:15px;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;}
/* ---------- CTA / form ---------- */
.cta-band{
 background:
 linear-gradient(112deg,rgba(8,29,26,.95) 0%,rgba(8,29,26,.8) 52%,rgba(8,29,26,.5) 100%),
 url('/assets/images/d2567139799b2020.webp') center/cover no-repeat;
 color:#eaf5f3;
}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
.cta-copy h2{color:#fff;font-size:clamp(25px,3.1vw,34px);}
.cta-copy p{color:#c5dbd8;font-size:16px;}
.cta-copy .cta-points{display:grid;gap:12px;margin-top:22px;}
.cta-copy .cta-points li{position:relative;padding-left:24px;font-size:15px;color:#dcefec;}
.cta-copy .cta-points li::before{
 content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;
 background:var(--accent);box-shadow:0 0 0 4px rgba(249,115,22,.2);
}
.form-card{
 background:#fff;border-radius:var(--radius-lg);padding:30px;
 box-shadow:var(--shadow-lg);
}
.form-card h3{font-size:20px;margin-bottom:6px;}
.form-card .form-tip{font-size:14px;color:var(--muted);margin-bottom:20px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:14px;font-weight:600;color:var(--ink);}
.field input,.field select{
 width:100%;
 padding:11px 14px;
 border:1px solid var(--line);
 border-radius:var(--radius-sm);
 background:#fbfdfc;
 font-size:15px;
 color:var(--ink);
 transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.field input::placeholder{color:#9db0ab;}
.field input:hover,.field select:hover{border-color:#c4ded9;}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 4px rgba(15,118,110,.12);}
.form-card .btn{margin-top:20px;}
.form-note{font-size:13px;color:var(--muted);margin:12px 0 0;}
/* ---------- Footer ---------- */
.site-footer{background:#0d1f1c;color:#b7cdc9;padding:clamp(48px,6vw,72px) 0 26px;margin-top:0;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;}
.footer-brand .logo{color:#fff;font-size:21px;margin-bottom:14px;}
.footer-brand .logo:hover{color:#5eead4;}
.footer-brand p{font-size:14.6px;color:#9bb4b0;max-width:320px;margin:0;}
.footer-col h4{color:#fff;font-size:16px;margin-bottom:16px;}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{color:#a9c6c2;font-size:14.6px;}
.footer-col ul li a:hover{color:#5eead4;}
.footer-contact li{font-size:14.4px;color:#a9c6c2;margin-bottom:10px;}
.footer-contact b{color:#dcefec;font-weight:600;}
.footer-bottom{
 margin-top:40px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
 display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
 font-size:13.6px;color:#8ba6a2;
}
.footer-bottom a{color:#a9c6c2;}
.footer-bottom a:hover{color:#5eead4;}
/* ---------- Responsive ---------- */
@media (max-width:1024px){
 .header-inner{gap:16px;}
 .main-nav a{padding:8px 12px;font-size:14.5px;}
 .step-grid{grid-template-columns:repeat(2,1fr);}
 .dim-grid{grid-template-columns:repeat(2,1fr);}
 .scene-grid{grid-template-columns:repeat(2,1fr);}
 .coach-grid{grid-template-columns:repeat(2,1fr);}
 .metric-grid{grid-template-columns:repeat(2,1fr);}
 .gear-wrap{grid-template-columns:1fr;gap:26px;}
 .gear-visual img{min-height:260px;}
 .cta-grid{grid-template-columns:1fr;gap:30px;}
 .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
}
@media (max-width:768px){
 .header-inner{flex-wrap:wrap;gap:10px;padding:12px 0;min-height:0;}
 .logo{font-size:20px;}
 .logo span{display:none;}
 .main-nav{order:3;width:100%;margin-left:0;overflow-x:auto;padding-bottom:4px;}
 .main-nav a{white-space:nowrap;}
 .nav-cta{margin-left:auto;}
 .section{padding:52px 0;}
 .section-head{margin-bottom:30px;}
 .step-grid,.dim-grid,.scene-grid,.coach-grid{grid-template-columns:1fr;}
 .metric-band ul{grid-template-columns:1fr;}
 .form-grid{grid-template-columns:1fr;}
 .timeline{padding-left:20px;}
 .tl-item::before{left:-26px;}
}
@media (max-width:520px){
 .container{padding:0 18px;}
 .page-banner{padding:44px 0;}
 .page-banner h1{font-size:26px;}
 .banner-actions .btn,.hero-actions .btn{width:100%;}
 .metric-grid{grid-template-columns:1fr;}
 .form-card{padding:22px;}
 .faq-item summary{padding:16px 18px;font-size:15.5px;}
 .faq-item .faq-body{padding-left:18px;padding-right:18px;}
 .footer-grid{grid-template-columns:1fr;}
 .footer-bottom{flex-direction:column;gap:6px;}
}

/* roulang page: category1 */
:root{
 --brand:#0f766e;
 --brand-dark:#0b5a54;
 --brand-soft:#e5f4f1;
 --accent:#f97316;
 --accent-soft:#fff2e7;
 --ink:#0d1f1c;
 --text:#3a4f4a;
 --muted:#748b85;
 --bg:#f5f8f7;
 --surface:#ffffff;
 --line:#e2ebe8;
 --radius-lg:22px;
 --radius:16px;
 --radius-sm:10px;
 --shadow-sm:0 2px 8px rgba(13,31,28,.06);
 --shadow:0 12px 32px rgba(13,31,28,.09);
 --shadow-lg:0 26px 60px rgba(13,31,28,.16);
 --container:1180px;
 --space:clamp(56px,7vw,96px);
 --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
/* roulang page: category1 - tuankecaolian */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
*,*::before,*::after{box-sizing:border-box;}
body{
 margin:0;
 font-family:var(--font);
 font-size:16px;
 line-height:1.75;
 color:var(--text);
 background:var(--bg);
 -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{margin:0 0 .6em;color:var(--ink);font-weight:800;line-height:1.32;letter-spacing:-.01em;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0;padding:0;list-style:none;}
img{max-width:100%;display:block;height:auto;}
figure{margin:0;}
a{color:var(--brand);text-decoration:none;transition:color .2s ease,opacity .2s ease;}
a:hover{color:var(--brand-dark);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
 outline:3px solid rgba(249,115,22,.55);
 outline-offset:2px;
 border-radius:6px;
}
button,input,select,textarea{font:inherit;color:inherit;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:var(--space) 0;}
.section--tight{padding:calc(var(--space) * .68) 0;}
.section--surface{background:var(--surface);}
.section--soft{background:linear-gradient(180deg,#eef6f4 0%,#f5f8f7 100%);}
.section-head{max-width:780px;margin-bottom:44px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{font-size:clamp(25px,3.2vw,36px);margin-bottom:14px;}
.section-head .lead{font-size:16.5px;color:var(--muted);}
.eyebrow{
 display:inline-flex;align-items:center;gap:8px;
 padding:6px 14px;margin-bottom:16px;
 font-size:13px;font-weight:600;letter-spacing:.08em;
 color:var(--brand-dark);background:var(--brand-soft);
 border:1px solid #cfe9e5;border-radius:999px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
/* Buttons */
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 padding:13px 26px;border-radius:999px;border:1px solid transparent;
 font-size:15px;font-weight:600;cursor:pointer;text-align:center;
 transition:transform .18s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(15,118,110,.28);}
.btn-primary:hover{background:var(--brand-dark);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px rgba(15,118,110,.34);}
.btn-primary:active{transform:translateY(0);}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(249,115,22,.28);}
.btn-accent:hover{background:#e0640c;color:#fff;transform:translateY(-2px);}
.btn-accent:active{transform:translateY(0);}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55);}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--brand-dark);border-color:#c4ded9;}
.btn-outline:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark);}
.btn-sm{padding:9px 18px;font-size:14px;}
.btn-block{width:100%;}
/* Badges */
.badge{
 display:inline-block;padding:4px 11px;border-radius:999px;
 font-size:12.5px;font-weight:600;line-height:1.6;
 background:var(--brand-soft);color:var(--brand-dark);border:1px solid #cfe9e5;
}
.badge-accent{background:var(--accent-soft);color:#b45309;border-color:#fbd9bd;}
.badge-ink{background:#eef2f1;color:#4b5f5a;border-color:#e0e8e6;}
.badge-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
/* Header */
.site-header{
 position:sticky;top:0;z-index:60;
 background:rgba(255,255,255,.94);
 backdrop-filter:blur(12px);
 border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:28px;min-height:74px;}
.logo{display:flex;align-items:baseline;gap:10px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.logo:hover{color:var(--brand-dark);}
.logo span{font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:.02em;}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto;}
.main-nav a{
 padding:9px 15px;border-radius:var(--radius-sm);
 font-size:15px;font-weight:500;color:#45605a;
 transition:background .2s ease,color .2s ease;
}
.main-nav a:hover{background:#eef5f3;color:var(--brand-dark);}
.main-nav a.active{background:var(--brand);color:#fff;}
.nav-cta{flex-shrink:0;}
/* Page hero */
.page-hero{
 position:relative;
 padding:clamp(52px,6.5vw,86px) 0 clamp(44px,5.5vw,68px);
 color:#eef6f4;
 background:
 linear-gradient(114deg,rgba(8,29,26,.94) 0%,rgba(8,29,26,.78) 44%,rgba(8,29,26,.38) 100%),
 url('/assets/images/6f9ccbe5984d6d3a.jpg') center/cover no-repeat;
 overflow:hidden;
}
.page-hero::after{
 content:"";position:absolute;right:-8%;bottom:-38%;width:480px;height:480px;
 background:radial-gradient(circle,rgba(20,184,166,.3),transparent 68%);
 pointer-events:none;
}
.page-hero .container{position:relative;z-index:1;}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13.5px;color:#9fc2bd;margin-bottom:20px;}
.crumbs a{color:#cfe9e5;}
.crumbs a:hover{color:#fff;}
.crumbs span.sep{opacity:.55;}
.page-hero h1{font-size:clamp(28px,4vw,44px);color:#fff;max-width:820px;margin-bottom:18px;}
.page-hero h1 em{font-style:normal;color:#5eead4;}
.page-hero .hero-lead{max-width:700px;font-size:17px;line-height:1.85;color:#c6dcda;margin-bottom:28px;}
.page-hero .hero-actions{display:flex;flex-wrap:wrap;gap:14px;}
/* Stat strip */
.stat-strip{
 display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
 margin-top:42px;
}
.stat-card{
 background:rgba(255,255,255,.09);
 border:1px solid rgba(255,255,255,.2);
 border-radius:var(--radius);
 padding:20px 22px;
 backdrop-filter:blur(6px);
 transition:background .22s ease,transform .22s ease,border-color .22s ease;
}
.stat-card:hover{background:rgba(255,255,255,.15);transform:translateY(-3px);border-color:rgba(255,255,255,.36);}
.stat-card strong{display:block;font-size:clamp(22px,2.6vw,30px);font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.2;}
.stat-card small{display:block;margin-top:6px;font-size:13.5px;color:#a9c6c2;line-height:1.6;}
/* Class cards */
.class-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.class-card{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius-lg);
 box-shadow:var(--shadow-sm);
 overflow:hidden;
 display:flex;flex-direction:column;
 transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.class-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#cfe4df;}
.class-card figure{position:relative;aspect-ratio:16/11;overflow:hidden;}
.class-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.class-card:hover figure img{transform:scale(1.06);}
.class-card figure::after{
 content:"";position:absolute;inset:auto 0 0 0;height:56%;
 background:linear-gradient(180deg,transparent,rgba(8,29,26,.62));
}
.class-card .card-body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;}
.class-card h3{font-size:19px;margin-bottom:10px;}
.class-card p{font-size:14.8px;color:var(--muted);margin-bottom:18px;}
.class-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;}
/* Flow timeline */
.flow-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start;}
.flow-list{position:relative;padding-left:34px;}
.flow-list::before{
 content:"";position:absolute;left:9px;top:10px;bottom:10px;width:2px;
 background:linear-gradient(180deg,var(--brand) 0%,#a9d8d2 60%,transparent 100%);
}
.flow-item{position:relative;padding:0 0 26px 0;}
.flow-item:last-child{padding-bottom:0;}
.flow-item::before{
 content:"";position:absolute;left:-33px;top:7px;width:14px;height:14px;border-radius:50%;
 background:#fff;border:3px solid var(--brand);box-shadow:0 0 0 4px rgba(15,118,110,.12);
}
.flow-item h3{font-size:17px;margin-bottom:6px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.flow-item h3 .badge{font-weight:600;}
.flow-item p{font-size:14.8px;color:var(--muted);}
.flow-aside{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius-lg);
 box-shadow:var(--shadow);
 overflow:hidden;
}
.flow-aside figure{aspect-ratio:4/3;overflow:hidden;}
.flow-aside figure img{width:100%;height:100%;object-fit:cover;}
.flow-aside .aside-body{padding:26px 28px 30px;}
.flow-aside h3{font-size:20px;margin-bottom:12px;}
.check-list li{
 position:relative;padding:0 0 12px 26px;font-size:14.8px;color:var(--text);
}
.check-list li:last-child{padding-bottom:0;}
.check-list li::before{
 content:"";position:absolute;left:0;top:8px;width:14px;height:14px;border-radius:4px;
 background:var(--brand-soft);border:1px solid #b9ddd7;
}
.check-list li::after{
 content:"";position:absolute;left:4px;top:12px;width:5px;height:8px;
 border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
 transform:rotate(40deg);
}
/* Level cards */
.level-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.level-card{
 position:relative;
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius-lg);
 padding:28px 26px 30px;
 box-shadow:var(--shadow-sm);
 transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.level-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#cfe4df;}
.level-card .level-no{
 display:inline-flex;align-items:center;justify-content:center;
 width:42px;height:42px;border-radius:12px;margin-bottom:16px;
 font-size:17px;font-weight:800;color:#fff;background:var(--brand);
}
.level-card:nth-child(2) .level-no{background:var(--accent);}
.level-card:nth-child(3) .level-no{background:var(--ink);}
.level-card h3{font-size:19px;margin-bottom:10px;}
.level-card p{font-size:14.8px;color:var(--muted);margin-bottom:16px;}
.level-card .level-tags{display:flex;flex-wrap:wrap;gap:8px;}
/* Schedule list */
.schedule-list{display:grid;gap:14px;}
.schedule-item{
 display:grid;
 grid-template-columns:132px 1.4fr 1fr 1fr auto;
 align-items:center;gap:18px;
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:18px 24px;
 box-shadow:var(--shadow-sm);
 transition:transform .2s ease,box-shadow .22s ease,border-color .22s ease;
}
.schedule-item:hover{transform:translateX(4px);box-shadow:var(--shadow);border-color:#cfe4df;}
.schedule-time{font-size:15px;font-weight:800;color:var(--brand-dark);}
.schedule-time small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);}
.schedule-name{font-size:16.5px;font-weight:700;color:var(--ink);}
.schedule-name small{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:2px;}
.schedule-info{font-size:14px;color:var(--muted);}
.schedule-info b{display:block;font-size:13px;font-weight:600;color:#5d7772;}
.schedule-state{justify-self:end;}
/* Coach cards */
.coach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.coach-card{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius-lg);
 overflow:hidden;
 box-shadow:var(--shadow-sm);
 transition:transform .24s ease,box-shadow .24s ease;
}
.coach-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.coach-card figure{aspect-ratio:5/3;overflow:hidden;}
.coach-card figure img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.coach-card:hover figure img{transform:scale(1.05);}
.coach-card .coach-body{padding:22px 24px 26px;}
.coach-card h3{font-size:18px;margin-bottom:4px;}
.coach-card .coach-title{font-size:13.5px;color:var(--brand-dark);font-weight:600;margin-bottom:12px;}
.coach-card p{font-size:14.6px;color:var(--muted);}
/* Quotes */
.quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.quote-card{
 background:var(--surface);
 border:1px solid var(--line);
 border-left:4px solid var(--brand);
 border-radius:var(--radius);
 padding:26px 26px 24px;
 box-shadow:var(--shadow-sm);
 transition:transform .24s ease,box-shadow .24s ease;
}
.quote-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.quote-card p{font-size:15.2px;color:#38504b;margin-bottom:18px;}
.quote-meta{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--muted);}
.quote-avatar{
 width:38px;height:38px;border-radius:50%;
 background:var(--brand-soft);color:var(--brand-dark);
 display:flex;align-items:center;justify-content:center;
 font-weight:800;font-size:15px;
}
/* FAQ */
.faq-list{max-width:920px;margin:0 auto;}
.faq-item{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius);
 box-shadow:var(--shadow-sm);
 margin-bottom:14px;
 overflow:hidden;
 transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-item:hover{border-color:#cfe4df;}
.faq-item summary{
 cursor:pointer;list-style:none;
 padding:20px 24px;
 font-size:16.5px;font-weight:700;color:var(--ink);
 display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
 content:"+";flex-shrink:0;
 width:26px;height:26px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 font-size:18px;font-weight:600;
 color:var(--brand-dark);background:var(--brand-soft);
}
.faq-item[open] summary::after{content:"−";background:var(--accent-soft);color:#b45309;}
.faq-body{padding:0 24px 22px;font-size:15px;color:var(--muted);}
/* CTA panel */
.cta-panel{
 position:relative;
 border-radius:var(--radius-lg);
 overflow:hidden;
 padding:clamp(34px,4.5vw,58px);
 color:#e7f4f2;
 background:
 linear-gradient(112deg,rgba(8,29,26,.95) 0%,rgba(9,46,41,.86) 52%,rgba(9,46,41,.6) 100%),
 url('/assets/images/a395537d3b032ee4.webp') center/cover no-repeat;
 box-shadow:var(--shadow-lg);
}
.cta-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;position:relative;z-index:1;}
.cta-panel h2{color:#fff;font-size:clamp(24px,3vw,34px);margin-bottom:14px;}
.cta-panel p{color:#c3dcda;font-size:16px;}
.cta-facts{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.cta-facts span{
 display:inline-flex;align-items:center;gap:8px;
 padding:8px 15px;border-radius:999px;font-size:13.5px;
 background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#e2f2ef;
}
.cta-facts span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);}
.signup-form{
 display:grid;grid-template-columns:1fr 1fr;gap:16px;
 background:rgba(255,255,255,.07);
 border:1px solid rgba(255,255,255,.18);
 border-radius:var(--radius-lg);
 padding:26px 26px 28px;
}
.signup-form .full{grid-column:1 / -1;}
.field{display:flex;flex-direction:column;gap:8px;}
.field label{font-size:13.5px;font-weight:600;color:#d9ecea;}
.field input,.field select{
 padding:12px 14px;
 border-radius:var(--radius-sm);
 border:1px solid rgba(255,255,255,.26);
 background:rgba(255,255,255,.1);
 color:#fff;
 transition:border-color .2s ease,background .2s ease;
}
.field input::placeholder{color:rgba(255,255,255,.55);}
.field input:focus,.field select:focus{
 background:rgba(255,255,255,.16);
 border-color:#5eead4;
 outline:none;
}
.field select option{color:#0d1f1c;}
.form-note{grid-column:1 / -1;font-size:13px;color:#a9c6c2;}
/* Footer */
.site-footer{
 background:#0b1f1c;
 color:#a9c6c2;
 padding:clamp(46px,5.5vw,74px) 0 0;
 margin-top:0;
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:44px;}
.footer-brand .logo{color:#fff;margin-bottom:16px;font-size:21px;}
.footer-brand .logo:hover{color:#5eead4;}
.footer-brand p{font-size:14.4px;line-height:1.8;color:#93b0ac;max-width:340px;}
.footer-col h4{color:#fff;font-size:15.5px;margin-bottom:16px;}
.footer-col ul{display:grid;gap:10px;}
.footer-col a{color:#a9c6c2;font-size:14.4px;}
.footer-col a:hover{color:#5eead4;}
.footer-contact li{font-size:14.2px;color:#93b0ac;line-height:1.7;}
.footer-contact b{color:#cfe9e5;font-weight:600;}
.footer-bottom{
 display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
 padding:22px 0 28px;
 border-top:1px solid rgba(255,255,255,.1);
 font-size:13.4px;color:#7f9c98;
}
.footer-bottom a{color:#a9c6c2;}
.footer-bottom a:hover{color:#5eead4;}
/* Responsive */
@media (max-width:1024px){
 .container{padding:0 20px;}
 .class-grid{grid-template-columns:repeat(2,1fr);}
 .level-grid,.coach-grid,.quote-grid{grid-template-columns:repeat(2,1fr);}
 .flow-wrap{grid-template-columns:1fr;gap:34px;}
 .cta-grid{grid-template-columns:1fr;gap:32px;}
 .footer-grid{grid-template-columns:1fr 1fr;gap:30px;}
 .schedule-item{grid-template-columns:118px 1.3fr 1fr auto;}
}
@media (max-width:768px){
 .header-inner{flex-wrap:wrap;gap:12px;padding:12px 0;}
 .logo{font-size:20px;}
 .logo span{display:none;}
 .main-nav{
  order:3;width:100%;margin-left:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:4px;gap:6px;
 }
 .main-nav a{white-space:nowrap;padding:8px 13px;font-size:14.5px;}
 .nav-cta{display:none;}
 .stat-strip{grid-template-columns:repeat(2,1fr);gap:12px;margin-top:32px;}
 .section-head{margin-bottom:32px;}
 .schedule-item{
  grid-template-columns:1fr;gap:10px;padding:18px 20px;
 }
 .schedule-state{justify-self:start;}
 .signup-form{grid-template-columns:1fr;padding:22px;}
 .footer-grid{grid-template-columns:1fr;gap:26px;}
 .footer-bottom{justify-content:flex-start;}
}
@media (max-width:520px){
 .container{padding:0 16px;}
 .class-grid,.level-grid,.coach-grid,.quote-grid{grid-template-columns:1fr;}
 .stat-strip{grid-template-columns:1fr 1fr;}
 .stat-card{padding:16px 16px;}
 .page-hero .hero-actions .btn{width:100%;}
 .flow-list{padding-left:26px;}
 .flow-item::before{left:-25px;}
 .quote-card,.level-card{padding:22px 20px 24px;}
}

/* roulang page: category3 */
:root{
 --brand:#0f766e;
 --brand-dark:#0b5a54;
 --brand-soft:#e5f4f1;
 --accent:#f97316;
 --accent-soft:#fff2e7;
 --ink:#0d1f1c;
 --text:#3a4f4a;
 --muted:#748b85;
 --bg:#f5f8f7;
 --surface:#ffffff;
 --line:#e2ebe8;
 --radius-lg:22px;
 --radius:16px;
 --radius-sm:10px;
 --shadow-sm:0 2px 8px rgba(13,31,28,.06);
 --shadow:0 12px 32px rgba(13,31,28,.09);
 --shadow-lg:0 26px 60px rgba(13,31,28,.16);
 --container:1180px;
 --space:clamp(56px,7vw,96px);
 --font:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
 margin:0;
 font-family:var(--font);
 font-size:16px;
 line-height:1.75;
 color:var(--text);
 background:var(--bg);
 -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0 0 12px;color:var(--ink);font-weight:800;line-height:1.32;letter-spacing:-.01em;}
h1{font-size:clamp(28px,4.2vw,46px);}
h2{font-size:clamp(24px,3.1vw,34px);}
h3{font-size:19px;}
h4{font-size:16px;}
p{margin:0 0 14px;}
p:last-child{margin-bottom:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:var(--brand);text-decoration:none;transition:color .2s ease,opacity .2s ease;}
a:hover{color:var(--brand-dark);}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
 outline:3px solid rgba(249,115,22,.55);
 outline-offset:2px;
 border-radius:6px;
}
img{max-width:100%;display:block;height:auto;}
button,input,select,textarea{font:inherit;color:inherit;}
strong{color:var(--ink);}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
.section{padding:var(--space) 0;}
.section--tight{padding:calc(var(--space) * .66) 0;}
.section--surface{background:var(--surface);}
.section--soft{background:linear-gradient(180deg,#eef6f4 0%,#f5f8f7 100%);}
.section-head{max-width:780px;margin-bottom:44px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head h2{margin-bottom:14px;}
.section-head .lead{font-size:16.5px;color:var(--muted);}
.eyebrow{
 display:inline-flex;align-items:center;gap:8px;
 padding:6px 14px;margin-bottom:16px;
 font-size:13px;font-weight:600;letter-spacing:.08em;
 color:var(--brand-dark);background:var(--brand-soft);
 border:1px solid #cfe9e5;border-radius:999px;
}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);}
.btn{
 display:inline-flex;align-items:center;justify-content:center;gap:8px;
 padding:13px 26px;border-radius:999px;border:1px solid transparent;
 font-size:15px;font-weight:600;cursor:pointer;
 transition:transform .18s ease,box-shadow .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
 white-space:nowrap;
}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px rgba(15,118,110,.28);}
.btn-primary:hover{background:var(--brand-dark);color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px rgba(15,118,110,.34);}
.btn-primary:active{transform:translateY(0);}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 24px rgba(249,115,22,.28);}
.btn-accent:hover{background:#e0640c;color:#fff;transform:translateY(-2px);box-shadow:0 16px 32px rgba(249,115,22,.34);}
.btn-accent:active{transform:translateY(0);}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.55);}
.btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px);}
.btn-outline{background:transparent;color:var(--brand-dark);border-color:#c4ded9;}
.btn-outline:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark);}
.btn-sm{padding:9px 18px;font-size:14px;}
.btn-block{width:100%;}
.badge{
 display:inline-block;padding:4px 11px;border-radius:999px;
 font-size:12.5px;font-weight:600;line-height:1.6;
 background:var(--brand-soft);color:var(--brand-dark);border:1px solid #cfe9e5;
}
.badge-accent{background:var(--accent-soft);color:#b45309;border-color:#fbd9bd;}
.badge-ink{background:#eef2f1;color:#4b5f5a;border-color:#e0e8e6;}
.badge-strong{background:#0d1f1c;color:#e6f3f0;border-color:#0d1f1c;}
/* ---------- header ---------- */
.site-header{
 position:sticky;top:0;z-index:60;
 background:rgba(255,255,255,.94);
 backdrop-filter:blur(12px);
 border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;gap:28px;min-height:74px;}
.logo{display:flex;align-items:baseline;gap:10px;font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.logo:hover{color:var(--brand-dark);}
.logo span{font-size:12.5px;font-weight:500;color:var(--muted);letter-spacing:.02em;}
.main-nav{display:flex;align-items:center;gap:4px;margin-left:auto;}
.main-nav a{
 padding:9px 15px;border-radius:var(--radius-sm);
 font-size:15px;font-weight:500;color:#45605a;
 transition:background .2s ease,color .2s ease;
}
.main-nav a:hover{background:#eef5f3;color:var(--brand-dark);}
.main-nav a.active{background:var(--brand);color:#fff;}
.nav-cta{flex-shrink:0;}
/* ---------- page hero ---------- */
.page-hero{
 position:relative;
 padding:clamp(64px,8vw,104px) 0 clamp(56px,7vw,88px);
 color:#eef6f4;
 background:
 linear-gradient(112deg,rgba(8,29,26,.94) 0%,rgba(8,29,26,.78) 48%,rgba(8,29,26,.42) 100%),
 url('/assets/images/6f9ccbe5984d6d3a.jpg') center/cover no-repeat;
 overflow:hidden;
}
.page-hero::after{
 content:"";position:absolute;inset:auto -12% -34% auto;width:520px;height:520px;
 background:radial-gradient(circle,rgba(20,184,166,.32),transparent 68%);
 pointer-events:none;
}
.page-hero .container{position:relative;z-index:1;}
.page-hero .eyebrow{background:rgba(255,255,255,.14);color:#d5f0ec;border-color:rgba(255,255,255,.28);}
.page-hero h1{color:#fff;max-width:820px;margin-bottom:20px;}
.page-hero h1 em{font-style:normal;color:#5eead4;}
.page-hero .lead{max-width:700px;font-size:17px;line-height:1.9;color:#c9dedb;margin-bottom:30px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:32px;}
.hero-tags{display:flex;flex-wrap:wrap;gap:10px;}
.hero-tags span{
 display:inline-flex;align-items:center;gap:8px;
 padding:8px 16px;border-radius:999px;font-size:14px;
 background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#e2f2ef;
}
.hero-tags span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);}
/* ---------- stat bar ---------- */
.stat-bar{background:var(--ink);color:#dbeae7;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12);}
.stat-grid div{padding:30px 26px;background:var(--ink);}
.stat-grid strong{display:block;font-size:clamp(22px,2.6vw,30px);font-weight:800;color:#fff;letter-spacing:-.02em;}
.stat-grid small{display:block;margin-top:4px;font-size:13.5px;color:#9db8b4;}
/* ---------- cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.card{
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius-lg);
 box-shadow:var(--shadow-sm);
 overflow:hidden;
 transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
 display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:#cfe9e5;}
.card-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dfe9e7;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.card:hover .card-media img{transform:scale(1.05);}
.card-media .tag{
 position:absolute;left:16px;top:16px;
 padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:600;
 background:rgba(255,255,255,.92);color:var(--brand-dark);backdrop-filter:blur(6px);
}
.card-body{padding:24px 24px 26px;flex:1;display:flex;flex-direction:column;}
.card-body h3{margin-bottom:10px;}
.card-body p{color:var(--muted);font-size:15.3px;}
.card-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);}
/* ---------- week grid ---------- */
.week-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.week-item{
 position:relative;
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius);
 padding:26px 24px;
 box-shadow:var(--shadow-sm);
 transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.week-item:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#cfe9e5;}
.week-item .week-day{
 display:inline-block;margin-bottom:12px;
 font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--accent);
}
.week-item h3{font-size:17.5px;margin-bottom:8px;}
.week-item p{font-size:15px;color:var(--muted);margin-bottom:14px;}
.week-item .meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
/* ---------- pillar list ---------- */
.pillar-list{display:grid;gap:18px;}
.pillar{
 display:grid;grid-template-columns:64px 1fr auto;gap:20px;align-items:center;
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:22px 26px;box-shadow:var(--shadow-sm);
 transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}
.pillar:hover{border-color:#cfe9e5;box-shadow:var(--shadow);transform:translateX(4px);}
.pillar .num{
 width:64px;height:64px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 font-size:20px;font-weight:800;color:var(--brand-dark);
 background:var(--brand-soft);border:1px solid #cfe9e5;
}
.pillar h3{margin-bottom:6px;font-size:18px;}
.pillar p{margin:0;color:var(--muted);font-size:15.2px;}
.pillar .mark{font-size:13px;font-weight:600;color:var(--brand);white-space:nowrap;}
/* ---------- stage ---------- */
.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.stage{
 position:relative;
 background:var(--surface);
 border:1px solid var(--line);
 border-radius:var(--radius-lg);
 padding:30px 26px;
 box-shadow:var(--shadow-sm);
 overflow:hidden;
 transition:transform .24s ease,box-shadow .24s ease;
}
.stage::before{
 content:"";position:absolute;left:0;top:0;height:4px;width:100%;
 background:linear-gradient(90deg,var(--brand),var(--accent));
 opacity:.85;
}
.stage:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.stage .range{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--brand);margin-bottom:10px;display:block;}
.stage h3{font-size:20px;margin-bottom:12px;}
.stage p{color:var(--muted);font-size:15.3px;margin-bottom:18px;}
.meter{height:8px;border-radius:999px;background:#e9f1ef;overflow:hidden;margin-bottom:10px;}
.meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--brand),#34d399);}
.meter.m2 i{background:linear-gradient(90deg,var(--brand),#22c55e);}
.meter.m3 i{background:linear-gradient(90deg,var(--accent),#fb923c);}
.stage .scale{font-size:13px;color:var(--muted);display:flex;justify-content:space-between;}
/* ---------- quote cards ---------- */
.quote{
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
 padding:28px 26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;
 transition:transform .24s ease,box-shadow .24s ease;
}
.quote:hover{transform:translateY(-5px);box-shadow:var(--shadow);}
.quote .who{display:flex;align-items:center;gap:14px;margin-bottom:18px;}
.quote .who img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid #d9ece8;}
.quote .who b{display:block;color:var(--ink);font-size:15.5px;}
.quote .who small{color:var(--muted);font-size:13px;}
.quote p{font-size:15.4px;color:var(--text);}
.quote .result{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);font-size:14px;color:var(--brand-dark);font-weight:600;}
/* ---------- faq ---------- */
.faq-list{display:grid;gap:14px;max-width:960px;}
.faq-item{
 border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);
 box-shadow:var(--shadow-sm);overflow:hidden;
 transition:box-shadow .25s ease,border-color .25s ease;
}
.faq-item[open]{box-shadow:var(--shadow);border-color:#cfe9e5;}
.faq-item summary{
 cursor:pointer;padding:20px 24px;font-weight:600;color:var(--ink);
 display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"＋";font-size:17px;color:var(--brand);font-weight:600;flex-shrink:0;}
.faq-item[open] summary::after{content:"－";}
.faq-body{padding:0 24px 22px;color:var(--muted);font-size:15.4px;}
/* ---------- gear ---------- */
.gear-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;}
.gear-figure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);}
.gear-figure img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.gear-list{display:grid;gap:14px;}
.gear-list li{
 display:flex;gap:14px;align-items:flex-start;
 background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
 padding:18px 20px;box-shadow:var(--shadow-sm);
}
.gear-list li b{display:block;color:var(--ink);font-size:15.5px;margin-bottom:3px;}
.gear-list li span{color:var(--muted);font-size:14.8px;line-height:1.7;}
.gear-list .dot{
 flex-shrink:0;width:30px;height:30px;border-radius:50%;
 display:flex;align-items:center;justify-content:center;
 background:var(--accent-soft);color:#b45309;font-size:14px;font-weight:700;
}
/* ---------- cta ---------- */
.cta-band{
 position:relative;color:#eef6f4;
 background:
 linear-gradient(120deg,rgba(8,29,26,.94) 0%,rgba(8,29,26,.72) 52%,rgba(8,29,26,.4) 100%),
 url('/assets/images/01245204ec57c239.webp') center/cover no-repeat;
 padding:clamp(56px,7vw,88px) 0;
}
.cta-inner{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:center;}
.cta-band h2{color:#fff;margin-bottom:14px;}
.cta-band p{color:#c6dbd8;font-size:16.4px;max-width:640px;}
.cta-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}
.cta-panel{
 background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.24);
 border-radius:var(--radius-lg);padding:28px 26px;backdrop-filter:blur(6px);
}
.cta-panel h3{color:#fff;font-size:18px;margin-bottom:16px;}
.cta-panel ul{display:grid;gap:12px;}
.cta-panel li{display:flex;gap:10px;font-size:15px;color:#dceceA;align-items:flex-start;}
.cta-panel li::before{content:"";flex-shrink:0;margin-top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
/* ---------- footer ---------- */
.site-footer{background:#0b1c1a;color:#9db8b4;padding:64px 0 28px;font-size:14.8px;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1);}
.footer-brand .logo{color:#fff;font-size:21px;margin-bottom:14px;display:inline-block;}
.footer-brand p{color:#8ea9a5;font-size:14.6px;line-height:1.85;max-width:340px;}
.footer-col h4{color:#fff;font-size:15.5px;margin-bottom:16px;}
.footer-col ul{display:grid;gap:10px;}
.footer-col a{color:#9db8b4;font-size:14.6px;}
.footer-col a:hover{color:#5eead4;}
.footer-contact li{color:#9db8b4;font-size:14.4px;line-height:1.8;}
.footer-contact b{color:#d5e8e5;font-weight:600;}
.footer-bottom{
 display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;
 padding-top:24px;font-size:13.6px;color:#7d9793;
}
.footer-bottom a{color:#9db8b4;}
.footer-bottom a:hover{color:#5eead4;}
/* ---------- responsive ---------- */
@media (max-width:1024px){
 .grid-3,.week-grid,.stage-grid{grid-template-columns:repeat(2,1fr);}
 .stat-grid{grid-template-columns:repeat(2,1fr);}
 .cta-inner{grid-template-columns:1fr;gap:28px;}
 .gear-wrap{grid-template-columns:1fr;gap:30px;}
 .footer-grid{grid-template-columns:1fr 1fr;gap:30px;}
}
@media (max-width:900px){
 .header-inner{flex-wrap:wrap;gap:12px 16px;padding-top:10px;padding-bottom:10px;min-height:auto;}
 .main-nav{margin-left:0;order:3;width:100%;overflow-x:auto;padding-bottom:4px;}
 .main-nav a{white-space:nowrap;}
 .nav-cta{margin-left:auto;}
}
@media (max-width:768px){
 .grid-3,.grid-2,.week-grid,.stage-grid{grid-template-columns:1fr;}
 .pillar{grid-template-columns:48px 1fr;gap:16px;padding:20px;}
 .pillar .num{width:48px;height:48px;font-size:17px;}
 .pillar .mark{grid-column:2;font-size:12.5px;}
 .container{padding:0 18px;}
 .section{padding:52px 0;}
 .section-head{margin-bottom:32px;}
}
@media (max-width:520px){
 .stat-grid{grid-template-columns:1fr;}
 .hero-actions .btn,.cta-actions .btn{width:100%;}
 .footer-grid{grid-template-columns:1fr;}
 .logo{font-size:19px;}
 .logo span{font-size:11.5px;}
 .footer-bottom{flex-direction:column;align-items:flex-start;}
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}