/* roulang page: index */
:root {
            --pine: #163f38;
            --pine-deep: #102a27;
            --pine-soft: #e8f0ea;
            --orange: #e78a3d;
            --orange-dark: #bc6928;
            --cream: #f6f3ed;
            --paper: #fffdf9;
            --ink: #263330;
            --muted: #6d7974;
            --line: #dbe3dc;
            --white: #fffefa;
            --shadow: 0 18px 48px rgba(22,63,56,.10);
            --shadow-sm: 0 8px 24px rgba(22,63,56,.08);
            --radius: 16px;
            --radius-lg: 24px;
            --container: 1200px;
            --ease: 220ms ease;
        }
        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--cream);
            font-family: "Noto Sans SC","Microsoft YaHei","PingFang SC",Arial,sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input, textarea { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(231,138,61,.65); outline-offset: 3px; }
        .container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--orange-dark);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .12em;
            text-transform: uppercase;
        }
        .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--orange); }
        h1, h2, h3, p { margin-top: 0; }
        h1, h2, h3 { color: var(--pine-deep); line-height: 1.2; letter-spacing: -.035em; }
        h1 { margin-bottom: 24px; font-size: clamp(42px, 5vw, 72px); font-weight: 800; }
        h2 { margin-bottom: 18px; font-size: clamp(30px, 3.3vw, 46px); font-weight: 800; }
        h3 { margin-bottom: 10px; font-size: 21px; }
        .section { padding: 104px 0; }
        .section-head { max-width: 680px; margin-bottom: 44px; }
        .section-head p { color: var(--muted); margin-bottom: 0; font-size: 17px; }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 48px;
            padding: 0 22px;
            border: 1px solid transparent;
            border-radius: 10px;
            font-weight: 700;
            transition: transform var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease), border-color var(--ease);
        }
        .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(22,63,56,.16); }
        .btn:active { transform: translateY(0); }
        .btn-primary { color: var(--white); background: var(--pine); }
        .btn-primary:hover { background: var(--pine-deep); }
        .btn-secondary { color: var(--pine); background: transparent; border-color: var(--pine); }
        .btn-secondary:hover { color: var(--pine-deep); background: var(--pine-soft); }
        .btn-light { color: var(--pine); background: var(--white); }
        .btn-light:hover { background: var(--pine-soft); }
        .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
        .site-header {
            position: relative;
            z-index: 20;
            background: rgba(246,243,237,.96);
            border-bottom: 1px solid var(--line);
        }
        .nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
        .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--pine-deep); font-weight: 800; white-space: nowrap; }
        .brand-mark {
            display: grid; place-items: center; width: 38px; height: 38px;
            color: var(--white); background: var(--pine); border-radius: 11px; font-size: 15px; letter-spacing: -.05em;
        }
        .brand-text { font-size: 18px; }
        .brand-text small { display: block; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .08em; line-height: 1.2; }
        .nav-links { display: flex; align-items: center; gap: 30px; margin-left: auto; }
        .nav-links a { position: relative; color: #53625d; font-size: 15px; font-weight: 600; transition: color var(--ease); }
        .nav-links a::after { content: ""; position: absolute; right: 0; bottom: -10px; left: 0; height: 2px; background: var(--orange); transform: scaleX(0); transition: transform var(--ease); }
        .nav-links a:hover, .nav-links a.active { color: var(--pine); }
        .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
        .menu-toggle { display: none; border: 0; color: var(--pine); background: transparent; font-size: 25px; }
        .hero {
            position: relative;
            min-height: 650px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: var(--white);
            background: var(--pine-deep);
            background-image: linear-gradient(90deg, rgba(16,42,39,.98) 8%, rgba(16,42,39,.86) 45%, rgba(16,42,39,.45)), url("/assets/images/backpic/back-1.webp");
            background-size: cover;
            background-position: center;
        }
        .hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(231,138,61,.10), transparent 36%); pointer-events: none; }
        .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr); gap: 70px; align-items: center; }
        .hero .eyebrow { color: #f4c08e; }
        .hero h1 { max-width: 720px; color: var(--white); }
        .hero h1 em { color: #f2aa67; font-style: normal; }
        .hero-copy { max-width: 650px; color: rgba(255,254,250,.82); font-size: 18px; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 32px 0 23px; }
        .hero .btn-primary { color: var(--pine-deep); background: #f1a05a; }
        .hero .btn-primary:hover { background: #f5b274; }
        .hero .btn-secondary { color: var(--white); border-color: rgba(255,255,255,.5); }
        .hero .btn-secondary:hover { color: var(--white); background: rgba(255,255,255,.12); }
        .compliance { color: rgba(255,254,250,.62); font-size: 13px; }
        .hero-panel {
            position: relative; min-height: 360px; padding: 26px; border: 1px solid rgba(255,255,255,.23);
            border-radius: var(--radius-lg); background: rgba(255,255,255,.10); backdrop-filter: blur(5px);
            box-shadow: 0 20px 60px rgba(0,0,0,.18);
        }
        .hero-panel img { width: 100%; height: 305px; object-fit: cover; border-radius: 14px; opacity: .9; }
        .hero-panel-caption { position: absolute; right: 42px; bottom: 44px; left: 42px; padding: 16px 18px; border-radius: 12px; color: var(--white); background: rgba(16,42,39,.86); }
        .hero-panel-caption strong { display: block; margin-bottom: 4px; font-size: 18px; }
        .hero-panel-caption span { color: rgba(255,255,255,.7); font-size: 13px; }
        .index-strip { background: var(--paper); border-bottom: 1px solid var(--line); }
        .strip-grid { display: grid; grid-template-columns: repeat(5,1fr); }
        .strip-item { min-height: 88px; display: flex; align-items: center; gap: 13px; padding: 18px 22px; border-right: 1px solid var(--line); }
        .strip-item:first-child { border-left: 1px solid var(--line); }
        .strip-num { color: var(--orange); font-size: 13px; font-weight: 800; }
        .strip-item strong { display: block; color: var(--pine); font-size: 15px; }
        .strip-item span { display: block; color: var(--muted); font-size: 12px; }
        .overview { background: var(--paper); }
        .overview-grid { display: grid; grid-template-columns: .83fr 1.17fr; gap: 80px; align-items: center; }
        .overview-text > p { color: var(--muted); }
        .steps { margin: 34px 0 0; padding: 0; list-style: none; }
        .steps li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
        .step-no { color: var(--orange-dark); font-weight: 800; }
        .steps strong { display: block; color: var(--pine); margin-bottom: 3px; }
        .steps span { color: var(--muted); font-size: 14px; }
        .feature-card { position: relative; min-height: 475px; overflow: hidden; border-radius: var(--radius-lg); background: var(--pine); box-shadow: var(--shadow); }
        .feature-card img { width: 100%; height: 475px; object-fit: cover; opacity: .62; }
        .feature-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(16,42,39,.95)); }
        .feature-content { position: absolute; z-index: 1; right: 36px; bottom: 32px; left: 36px; color: var(--white); }
        .feature-content h3 { color: var(--white); font-size: 28px; }
        .feature-content p { max-width: 520px; color: rgba(255,255,255,.75); margin-bottom: 20px; }
        .tag { display: inline-flex; align-items: center; min-height: 27px; padding: 0 10px; border-radius: 6px; color: var(--pine); background: var(--pine-soft); font-size: 12px; font-weight: 700; }
        .tag.orange { color: #7c431b; background: #f8d8b9; }
        .category { background: var(--cream); }
        .category-layout { display: grid; grid-template-columns: 230px 1fr; gap: 54px; align-items: start; }
        .category-index { position: sticky; top: 24px; padding: 8px 0; }
        .category-index a { display: block; padding: 14px 16px; border-left: 2px solid transparent; color: var(--muted); font-weight: 600; transition: all var(--ease); }
        .category-index a:hover, .category-index a.active { border-left-color: var(--orange); color: var(--pine); background: var(--paper); }
        .category-main { display: grid; grid-template-columns: 1.25fr .75fr; gap: 18px; }
        .category-feature { grid-row: span 2; padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
        .category-feature img { width: 100%; height: 235px; margin-bottom: 22px; object-fit: cover; border-radius: 12px; }
        .category-feature p, .mini-card p { color: var(--muted); font-size: 14px; }
        .mini-card { padding: 25px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: transform var(--ease), box-shadow var(--ease); }
        .mini-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); }
        .mini-card h3 { font-size: 19px; }
        .mini-card .card-link, .category-feature .card-link { color: var(--orange-dark); font-size: 14px; font-weight: 700; }
        .content-section { background: var(--paper); }
        .content-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
        .spotlight { overflow: hidden; border-radius: var(--radius-lg); background: var(--pine-soft); }
        .spotlight img { width: 100%; height: 245px; object-fit: cover; }
        .spotlight-body { padding: 25px; }
        .spotlight-body h3 { font-size: 25px; }
        .spotlight-body p { color: var(--muted); }
        .content-list { margin: 0; padding: 0; list-style: none; }
        .content-list li { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 17px 0; border-bottom: 1px solid var(--line); }
        .content-list li:first-child { padding-top: 0; }
        .content-list a { color: var(--pine); font-weight: 700; transition: color var(--ease); }
        .content-list a:hover { color: var(--orange-dark); }
        .content-list small { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; font-weight: 400; }
        .content-list time { color: var(--muted); font-size: 13px; white-space: nowrap; }
        .faq { background: var(--cream); }
        .faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: start; }
        .faq-intro p { color: var(--muted); }
        .faq-list { border-top: 1px solid var(--line); }
        .faq-item { border-bottom: 1px solid var(--line); }
        .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; border: 0; color: var(--pine); background: transparent; text-align: left; font-weight: 700; }
        .faq-icon { display: grid; place-items: center; flex: 0 0 27px; width: 27px; height: 27px; border-radius: 50%; color: var(--pine); background: var(--pine-soft); font-size: 20px; line-height: 1; transition: transform var(--ease), background var(--ease); }
        .faq-answer { max-height: 0; overflow: hidden; color: var(--muted); font-size: 14px; transition: max-height 260ms ease, padding 260ms ease; }
        .faq-item.open .faq-answer { max-height: 180px; padding: 0 48px 21px 0; }
        .faq-item.open .faq-icon { color: var(--white); background: var(--orange); transform: rotate(45deg); }
        .cta { padding: 82px 0; color: var(--white); background: var(--pine-deep); }
        .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 42px; }
        .cta h2 { max-width: 680px; margin-bottom: 12px; color: var(--white); }
        .cta p { max-width: 680px; margin-bottom: 0; color: rgba(255,255,255,.68); }
        .cta-note { margin-top: 16px; color: rgba(255,255,255,.48); font-size: 12px; }
        .site-footer { color: rgba(255,255,255,.7); background: #0b211f; }
        .footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.5fr; gap: 46px; padding: 66px 0 46px; }
        .footer-brand .brand { color: var(--white); margin-bottom: 16px; }
        .footer-brand p, .footer-col p { margin-bottom: 0; color: rgba(255,255,255,.54); font-size: 14px; }
        .footer-col h3 { margin-bottom: 17px; color: var(--white); font-size: 15px; letter-spacing: 0; }
        .footer-col a { display: block; width: fit-content; margin: 9px 0; color: rgba(255,255,255,.62); font-size: 14px; transition: color var(--ease); }
        .footer-col a:hover { color: #f2aa67; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,.13); color: rgba(255,255,255,.42); font-size: 12px; }
        .footer-bottom-links { display: flex; gap: 19px; }
        .footer-bottom a:hover { color: var(--white); }
        @media (max-width: 1024px) {
            .hero-inner { gap: 35px; }
            .category-layout { gap: 28px; }
            .overview-grid, .content-layout { gap: 42px; }
            .footer-main { grid-template-columns: 1.2fr 1fr 1fr; }
            .footer-col:last-child { grid-column: 1 / -1; }
        }
        @media (max-width: 768px) {
            .container { width: min(100% - 34px, var(--container)); }
            .section { padding: 70px 0; }
            .nav-wrap { min-height: 68px; }
            .menu-toggle { display: block; }
            .nav-links { position: absolute; top: 68px; right: 17px; left: 17px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper); box-shadow: var(--shadow); }
            .nav-links.show { display: flex; }
            .nav-links a { padding: 12px 14px; }
            .nav-links a::after { display: none; }
            .nav-cta { display: none; }
            .hero { min-height: auto; padding: 78px 0 68px; background-position: 62% center; }
            .hero-inner, .overview-grid, .content-layout, .faq-grid { grid-template-columns: 1fr; }
            .hero-panel { min-height: 300px; }
            .hero-panel img { height: 245px; }
            .strip-grid { grid-template-columns: repeat(2,1fr); }
            .strip-item:nth-child(3), .strip-item:nth-child(5) { border-left: 1px solid var(--line); }
            .strip-item:nth-child(n) { border-bottom: 1px solid var(--line); }
            .category-layout { grid-template-columns: 1fr; }
            .category-index { position: static; display: flex; overflow-x: auto; padding-bottom: 4px; }
            .category-index a { min-width: max-content; border-left: 0; border-bottom: 2px solid transparent; }
            .category-index a:hover, .category-index a.active { border-bottom-color: var(--orange); border-left: 0; }
            .category-main { grid-template-columns: 1fr; }
            .category-feature { grid-row: auto; }
            .faq-grid { gap: 30px; }
            .cta-inner { align-items: flex-start; flex-direction: column; }
            .footer-main { grid-template-columns: 1fr 1fr; gap: 32px; }
            .footer-col:last-child { grid-column: auto; }
            .footer-bottom { align-items: flex-start; flex-direction: column; }
        }
        @media (max-width: 520px) {
            h1 { font-size: 40px; }
            h2 { font-size: 31px; }
            .hero-copy { font-size: 16px; }
            .hero-actions { align-items: stretch; flex-direction: column; }
            .hero-actions .btn { width: 100%; }
            .strip-grid { grid-template-columns: 1fr; }
            .strip-item, .strip-item:first-child, .strip-item:nth-child(3), .strip-item:nth-child(5) { border-left: 0; }
            .content-list li { grid-template-columns: 1fr; gap: 4px; }
            .content-list time { order: -1; }
            .footer-main { grid-template-columns: 1fr; }
            .footer-col:last-child { grid-column: auto; }
        }

/* roulang page: category1 */
:root{
  --pine:#163f38;
  --pine-deep:#102a27;
  --pine-soft:#e8f0ea;
  --orange:#e78a3d;
  --orange-dark:#c76b27;
  --paper:#f6f3ed;
  --white:#fffdf9;
  --ink:#263330;
  --muted:#6d7974;
  --line:#dbe2dc;
  --shadow:0 18px 45px rgba(16,42,39,.09);
  --shadow-sm:0 8px 24px rgba(16,42,39,.07);
  --radius:16px;
  --ease:220ms ease;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;background:var(--paper);color:var(--ink);line-height:1.75;font-size:16px}
a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),transform var(--ease),box-shadow var(--ease)}
img{display:block;max-width:100%;height:auto}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(1180px,calc(100% - 48px));margin:0 auto}
.site-header{height:78px;background:rgba(255,253,249,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.header-inner{height:78px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:center;gap:11px;color:var(--pine);font-weight:800}
.brand-mark{width:40px;height:40px;border-radius:12px;background:var(--pine);color:var(--white);display:grid;place-items:center;font-size:14px;letter-spacing:.04em;position:relative}
.brand-mark:after{content:"";position:absolute;width:8px;height:8px;background:var(--orange);border-radius:50%;right:-3px;top:-3px;border:3px solid var(--white)}
.brand-text{font-size:18px;line-height:1.15;letter-spacing:.02em}
.brand-text small{display:block;font-size:10px;color:var(--muted);font-weight:600;margin-top:4px;letter-spacing:.08em}
.nav-links{display:flex;align-items:center;gap:7px;margin-left:auto}
.nav-links a{padding:9px 15px;border-radius:9px;color:var(--muted);font-weight:600;font-size:14px}
.nav-links a:hover,.nav-links a:focus{color:var(--pine);background:var(--pine-soft)}
.nav-links a.active{color:var(--pine);background:var(--pine-soft);position:relative}
.nav-links a.active:after{content:"";position:absolute;left:15px;right:15px;bottom:3px;height:2px;background:var(--orange);border-radius:2px}
.header-action{background:var(--pine);color:var(--white);padding:11px 18px;border-radius:10px;font-weight:700;font-size:14px;white-space:nowrap}
.header-action:hover{background:var(--pine-deep);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.menu-toggle{display:none;border:1px solid var(--line);background:var(--white);color:var(--pine);border-radius:9px;padding:8px 11px}
.hero-inner{min-height:390px;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.page-hero{background:var(--pine-deep);color:var(--white);position:relative;overflow:hidden}
.page-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,42,39,.97) 15%,rgba(16,42,39,.73) 58%,rgba(16,42,39,.4));pointer-events:none}
.hero-copy,.hero-visual{position:relative;z-index:1}
.hero-copy{padding:58px 0}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--orange);font-size:13px;font-weight:800;letter-spacing:.08em;margin-bottom:15px}
.eyebrow:before{content:"";width:24px;height:2px;background:var(--orange)}
h1{font-size:clamp(36px,4.5vw,60px);line-height:1.18;letter-spacing:-.04em;margin-bottom:18px}
.hero-copy p{color:#d6e1da;max-width:590px;font-size:17px}
.hero-visual{height:280px;border-radius:18px;overflow:hidden;background:url('/assets/images/coverpic/cover-1.webp') center/cover;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.hero-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(22,63,56,.15),rgba(16,42,39,.76))}
.visual-note{position:absolute;left:26px;bottom:24px;right:26px;border-left:3px solid var(--orange);padding-left:15px;color:var(--white);font-weight:700}
.breadcrumb{border-bottom:1px solid var(--line);padding:16px 0;color:var(--muted);font-size:13px}
.breadcrumb a:hover{color:var(--pine)}
.breadcrumb span{padding:0 9px;color:#a3ada8}
.section{padding:90px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:35px}
.section-kicker{color:var(--orange-dark);font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:7px}
h2{font-size:clamp(27px,3vw,40px);line-height:1.25;letter-spacing:-.03em;color:var(--pine)}
.section-head p{max-width:490px;color:var(--muted);font-size:15px}
.guide-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.guide-tabs a{border:1px solid var(--line);background:var(--white);padding:9px 16px;border-radius:9px;color:var(--muted);font-weight:600;font-size:14px}
.guide-tabs a:hover,.guide-tabs a.active{border-color:var(--pine);color:var(--pine);background:var(--pine-soft)}
.feature-card{display:grid;grid-template-columns: .86fr 1.14fr;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:64px}
.feature-image{min-height:285px;background:url('/assets/images/coverpic/cover-2.webp') center/cover}
.feature-content{padding:42px 46px;display:flex;flex-direction:column;justify-content:center}
.badge{display:inline-flex;width:max-content;padding:5px 10px;border-radius:6px;background:#f9e7d5;color:var(--orange-dark);font-size:12px;font-weight:800;margin-bottom:13px}
.feature-content h3{font-size:28px;color:var(--pine);line-height:1.35;margin-bottom:13px}
.feature-content p{color:var(--muted);margin-bottom:23px}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;border:1px solid transparent;border-radius:10px;padding:11px 19px;font-size:14px;font-weight:700;transition:all var(--ease)}
.btn-primary{background:var(--pine);color:var(--white)}
.btn-primary:hover{background:var(--pine-deep);transform:translateY(-2px);box-shadow:0 10px 20px rgba(16,42,39,.16)}
.btn-secondary{border-color:var(--pine);color:var(--pine);background:transparent}
.btn-secondary:hover{background:var(--pine-soft);transform:translateY(-2px)}
.btn:focus,.nav-links a:focus,.header-action:focus,summary:focus{outline:3px solid rgba(231,138,61,.45);outline-offset:3px}
.btn:disabled{cursor:not-allowed;opacity:.45;transform:none;box-shadow:none}
.support-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.support-card{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:25px 26px;display:grid;grid-template-columns:44px 1fr;gap:17px;transition:all var(--ease)}
.support-card:hover{transform:translateY(-3px);border-color:#b8cbc0;box-shadow:var(--shadow-sm)}
.support-icon{width:44px;height:44px;border-radius:12px;background:var(--pine-soft);color:var(--pine);display:grid;place-items:center;font-weight:800}
.support-card h3{font-size:18px;color:var(--pine);margin-bottom:5px}
.support-card p{font-size:14px;color:var(--muted)}
.meta{color:var(--muted);font-size:12px;margin-top:10px;display:block}
.service-band{background:var(--pine-soft);padding:30px;border-radius:var(--radius);display:grid;grid-template-columns:1.2fr 2fr;gap:35px;align-items:center;margin-top:48px}
.service-band h3{font-size:23px;color:var(--pine);line-height:1.4}
.service-band p{font-size:14px;color:var(--muted)}
.service-list{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}
.service-list div{background:rgba(255,253,249,.72);border:1px solid #d4e1d7;border-radius:11px;padding:16px}
.service-list strong{display:block;color:var(--pine);font-size:15px;margin-bottom:3px}
.service-list span{font-size:12px;color:var(--muted)}
.notice{margin-top:65px;background:#fff8ee;border:1px solid #f0d8bd;border-radius:14px;padding:20px 24px;display:flex;gap:15px;align-items:flex-start}
.notice-mark{color:var(--orange-dark);font-weight:900;font-size:20px}
.notice p{font-size:14px;color:#735c49}
.faq-wrap{max-width:850px;margin:0 auto}
.faq-item{border-top:1px solid var(--line);padding:4px 0}
.faq-item:last-child{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:20px 5px;font-weight:700;color:var(--pine);display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary:after{content:"＋";font-size:22px;font-weight:400;color:var(--orange);line-height:1}
details[open] summary:after{content:"－"}
.answer{padding:0 40px 21px 5px;color:var(--muted);font-size:14px}
.cta{background:var(--pine-deep);color:var(--white);padding:62px 0}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}
.cta h2{color:var(--white);font-size:32px;margin-bottom:9px}
.cta p{color:#c8d7d0;max-width:610px;font-size:14px}
.cta .btn-primary{background:var(--orange);color:#fff}
.cta .btn-primary:hover{background:var(--orange-dark)}
.site-footer{background:#0d2421;color:#d5e0da;padding-top:54px}
.footer-main{display:grid;grid-template-columns:1.5fr .8fr .9fr 1.3fr;gap:38px;padding-bottom:42px}
.footer-brand p{color:#91a39b;font-size:13px;margin-top:17px;max-width:230px}
.footer-col{display:flex;flex-direction:column;gap:8px}
.footer-col h3{font-size:14px;color:var(--white);margin-bottom:8px}
.footer-col a{color:#9caea6;font-size:13px}
.footer-col a:hover{color:var(--orange)}
.footer-col p{font-size:12px;color:#91a39b;line-height:1.8}
.footer-bottom{border-top:1px solid rgba(215,230,220,.12);display:flex;justify-content:space-between;gap:20px;padding:18px 0;color:#80938b;font-size:12px}
.footer-bottom-links{display:flex;gap:18px}
.footer-bottom-links a:hover{color:var(--orange)}
@media(max-width:1024px){
 .hero-inner{gap:35px}.footer-main{grid-template-columns:1.2fr 1fr 1fr}.footer-col:last-child{grid-column:1/-1}
}
@media(max-width:768px){
 .container{width:min(100% - 34px,620px)}
 .site-header,.header-inner{height:70px}.menu-toggle{display:block}
 .nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:var(--white);border-bottom:1px solid var(--line);padding:15px 17px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}
 .nav-links.open{display:flex}.nav-links a{padding:12px 13px}.header-action{display:none}
 .hero-inner{grid-template-columns:1fr;min-height:auto;gap:5px}.hero-copy{padding:56px 0 24px}.hero-visual{height:220px;margin-bottom:52px}
 .section{padding:62px 0}.section-head{display:block;margin-bottom:25px}.section-head p{margin-top:12px}
 .feature-card{grid-template-columns:1fr}.feature-image{min-height:210px}.feature-content{padding:28px}
 .support-grid{grid-template-columns:1fr}.service-band{grid-template-columns:1fr;gap:20px}.service-list{grid-template-columns:1fr}
 .notice{margin-top:42px}.cta-inner{display:block}.cta .btn{margin-top:22px}.footer-main{grid-template-columns:1fr 1fr;gap:27px}.footer-col:last-child{grid-column:1/-1}
}
@media(max-width:520px){
 h1{font-size:36px}.brand-text{font-size:16px}.brand-mark{width:36px;height:36px}
 .hero-copy p{font-size:15px}.feature-content h3{font-size:23px}.footer-main{grid-template-columns:1fr}.footer-col:last-child{grid-column:auto}
 .footer-bottom{display:block}.footer-bottom-links{margin-top:10px}.btn{width:100%}
}