/* roulang page: index */
:root {
            --ink: #14243a;
            --ink-soft: #53657b;
            --muted: #7890a6;
            --blue: #1769e0;
            --blue-deep: #0e4db5;
            --cyan: #22b8cf;
            --orange: #ff8a4c;
            --paper: #f7faff;
            --white: #ffffff;
            --line: #dfe9f3;
            --line-dark: #c9d7e6;
            --shadow-sm: 0 8px 24px rgba(19, 54, 92, .07);
            --shadow-md: 0 18px 48px rgba(19, 54, 92, .13);
            --radius-sm: 10px;
            --radius-md: 18px;
            --radius-lg: 28px;
            --ease: 220ms ease;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            letter-spacing: 0;
        }
        img { display: block; max-width: 100%; }
        a { color: inherit; text-decoration: none; transition: color var(--ease), background var(--ease), border var(--ease), transform var(--ease); }
        button, input { font: inherit; }
        button { cursor: pointer; }
        :focus-visible { outline: 3px solid rgba(34, 184, 207, .45); outline-offset: 3px; }
        .container { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
        .page-shell { min-height: 100vh; padding-left: 92px; }

        .side-nav {
            position: fixed;
            z-index: 20;
            inset: 0 auto 0 0;
            width: 92px;
            padding: 26px 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background: rgba(255, 255, 255, .96);
            border-right: 1px solid var(--line);
            box-shadow: 10px 0 30px rgba(25, 62, 102, .04);
        }
        .brand-mark {
            width: 54px;
            height: 54px;
            display: grid;
            place-items: center;
            color: var(--white);
            background: var(--ink);
            border-radius: 16px;
            font-size: 20px;
            font-weight: 800;
            letter-spacing: .5px;
            box-shadow: 0 10px 20px rgba(20, 36, 58, .18);
        }
        .brand-caption {
            margin-top: 10px;
            color: var(--ink);
            font-size: 12px;
            font-weight: 700;
            writing-mode: vertical-rl;
            letter-spacing: 2px;
        }
        .nav-list {
            width: 100%;
            margin: 54px 0 0;
            padding: 0;
            list-style: none;
        }
        .nav-list li { margin-bottom: 10px; }
        .nav-list a {
            min-height: 66px;
            padding: 10px 4px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            color: var(--muted);
            border-radius: 14px;
            font-size: 12px;
        }
        .nav-list a span:first-child { font-size: 19px; line-height: 1; }
        .nav-list a:hover, .nav-list a.active {
            color: var(--blue);
            background: #edf5ff;
        }
        .nav-foot {
            margin-top: auto;
            color: var(--muted);
            font-size: 11px;
            text-align: center;
            line-height: 1.5;
        }

        .mobile-topbar {
            display: none;
            height: 68px;
            padding: 0 20px;
            align-items: center;
            justify-content: space-between;
            background: var(--white);
            border-bottom: 1px solid var(--line);
        }
        .mobile-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
        .mobile-brand .brand-mini {
            width: 36px; height: 36px; display: grid; place-items: center;
            color: #fff; background: var(--ink); border-radius: 10px; font-size: 15px;
        }
        .menu-toggle {
            width: 40px; height: 40px; border: 1px solid var(--line-dark);
            border-radius: 10px; background: #fff; color: var(--ink);
        }

        .hero {
            position: relative;
            min-height: 690px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: var(--white);
            background: #10243c;
        }
        .hero-media {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: .46;
        }
        .hero::before {
            content: "";
            position: absolute;
            z-index: 1;
            inset: 0;
            background: linear-gradient(90deg, rgba(10, 29, 52, .94) 0%, rgba(10, 29, 52, .7) 44%, rgba(10, 29, 52, .2) 100%);
        }
        .hero::after {
            content: "";
            position: absolute;
            z-index: 1;
            right: -10%;
            bottom: -27%;
            width: 65%;
            height: 70%;
            background: rgba(34, 184, 207, .16);
            transform: rotate(-12deg);
        }
        .hero-content { position: relative; z-index: 2; padding: 92px 0; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 22px;
            color: #92e6ed;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1px;
        }
        .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--cyan); }
        h1, h2, h3, p { margin-top: 0; }
        h1 {
            max-width: 740px;
            margin-bottom: 24px;
            font-size: clamp(42px, 6vw, 76px);
            line-height: 1.12;
            letter-spacing: 0;
        }
        .hero-copy {
            max-width: 710px;
            margin-bottom: 34px;
            color: rgba(255,255,255,.8);
            font-size: 18px;
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
        .button-primary, .button-ghost, .button-dark {
            min-height: 48px;
            padding: 11px 22px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            border-radius: 9px;
            font-size: 15px;
            font-weight: 700;
            transition: transform var(--ease), box-shadow var(--ease), background var(--ease);
        }
        .button-primary { color: #fff; background: var(--blue); box-shadow: 0 10px 22px rgba(23,105,224,.25); }
        .button-primary:hover { color: #fff; background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(23,105,224,.32); }
        .button-ghost { color: #fff; border: 1px solid rgba(255,255,255,.44); background: rgba(255,255,255,.08); }
        .button-ghost:hover { color: #fff; background: rgba(255,255,255,.18); transform: translateY(-2px); }
        .button-dark { color: #fff; background: var(--ink); }
        .button-dark:hover { color: #fff; background: #243d5b; transform: translateY(-2px); }
        .hero-note { margin-top: 28px; color: rgba(255,255,255,.58); font-size: 13px; }
        .play-button {
            position: absolute;
            z-index: 3;
            right: 11%;
            top: 48%;
            width: 92px;
            height: 92px;
            display: grid;
            place-items: center;
            color: #fff;
            border: 1px solid rgba(255,255,255,.55);
            border-radius: 50%;
            background: rgba(255,255,255,.13);
            backdrop-filter: blur(8px);
            font-size: 28px;
            transition: transform var(--ease), background var(--ease);
        }
        .play-button:hover { background: rgba(34,184,207,.6); transform: scale(1.06); }

        main section { padding: 92px 0; }
        .section-intro { max-width: 720px; margin-bottom: 42px; }
        .section-kicker { margin-bottom: 10px; color: var(--blue); font-size: 13px; font-weight: 800; letter-spacing: 1.5px; }
        h2 { margin-bottom: 15px; font-size: clamp(30px, 4vw, 46px); line-height: 1.2; }
        .section-intro p { margin-bottom: 0; color: var(--ink-soft); font-size: 17px; }
        .section-light { background: var(--white); }
        .section-blue { color: #fff; background: #1264c9; }
        .section-blue .section-intro p { color: rgba(255,255,255,.76); }

        .audience-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
        .audience-panel { padding: 34px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
        .audience-panel.dark { color: #fff; background: var(--ink); border-color: var(--ink); }
        .audience-panel h3 { margin-bottom: 12px; font-size: 25px; }
        .audience-panel p { color: var(--ink-soft); }
        .audience-panel.dark p { color: rgba(255,255,255,.68); }
        .check-list { margin: 22px 0 0; padding: 0; list-style: none; }
        .check-list li { position: relative; margin: 13px 0; padding-left: 28px; color: var(--ink-soft); }
        .check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
        .audience-panel.dark .check-list li { color: rgba(255,255,255,.74); }
        .audience-panel.dark .check-list li::before { color: var(--cyan); }

        .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .feature-card {
            min-height: 238px;
            padding: 28px;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: #fff;
            box-shadow: var(--shadow-sm);
            transition: transform var(--ease), box-shadow var(--ease), border var(--ease);
        }
        .feature-card:hover { transform: translateY(-5px); border-color: #a9c9ee; box-shadow: var(--shadow-md); }
        .icon-box {
            width: 48px; height: 48px; margin-bottom: 20px; display: grid; place-items: center;
            color: var(--blue); background: #eaf3ff; border-radius: 13px; font-size: 23px;
        }
        .feature-card h3 { margin-bottom: 10px; font-size: 21px; }
        .feature-card p { margin-bottom: 0; color: var(--ink-soft); font-size: 14px; }

        .stat-band { padding: 45px 0; background: #eef7ff; border-top: 1px solid #d9eaf9; border-bottom: 1px solid #d9eaf9; }
        .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        .stat { padding: 8px 24px; border-left: 2px solid #a9d5f2; }
        .stat strong { display: block; margin-bottom: 4px; color: var(--blue-deep); font-size: 36px; line-height: 1.2; }
        .stat span { color: var(--ink-soft); font-size: 14px; }

        .solution-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; align-items: start; }
        .solution-list { margin: 0; padding: 0; list-style: none; }
        .solution-item { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 0 0 30px; }
        .solution-item:not(:last-child)::after { content: ""; position: absolute; left: 26px; top: 52px; width: 1px; height: calc(100% - 38px); background: var(--line-dark); }
        .step-num { position: relative; z-index: 1; width: 54px; height: 54px; display: grid; place-items: center; color: var(--blue); border: 1px solid #bcd6f0; border-radius: 50%; background: #eef6ff; font-weight: 800; }
        .solution-item h3 { margin-bottom: 6px; font-size: 21px; }
        .solution-item p { margin: 0; color: var(--ink-soft); font-size: 14px; }

        .channel-band { background: #f1f7fc; }
        .channel-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 18px; }
        .channel-card { min-height: 190px; padding: 28px; border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-sm); }
        .channel-card.primary { color: #fff; background: var(--blue); }
        .channel-card h3 { margin-bottom: 12px; font-size: 22px; }
        .channel-card p { margin-bottom: 0; color: var(--ink-soft); font-size: 14px; }
        .channel-card.primary p { color: rgba(255,255,255,.8); }

        .category-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
        .category-chip { padding: 10px 16px; color: var(--blue-deep); border: 1px solid #c3dcf6; border-radius: 99px; background: #f4f9ff; font-size: 14px; font-weight: 700; }
        .category-chip:hover { color: #fff; background: var(--blue); border-color: var(--blue); }

        .news-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; }
        .news-main { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); }
        .news-main img { width: 100%; height: 250px; object-fit: cover; }
        .news-content { padding: 28px; }
        .news-tag { color: var(--orange); font-size: 13px; font-weight: 800; }
        .news-content h3 { margin: 10px 0; font-size: 25px; line-height: 1.35; }
        .news-content p { margin-bottom: 0; color: var(--ink-soft); font-size: 14px; }
        .news-list { margin: 0; padding: 0; list-style: none; }
        .news-list li { padding: 17px 0; border-bottom: 1px solid var(--line); }
        .news-list li:last-child { border-bottom: 0; }
        .news-list a { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
        .news-list a:hover h3 { color: var(--blue); }
        .news-list h3 { margin: 0; font-size: 16px; line-height: 1.5; }
        .news-list time { flex: 0 0 auto; color: var(--muted); font-size: 12px; }

        .assurance { color: #fff; background: var(--ink); }
        .assurance-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 70px; align-items: center; }
        .assurance .section-intro { margin-bottom: 0; }
        .assurance .section-intro p { color: rgba(255,255,255,.7); }
        .assurance-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
        .assurance-item { padding: 22px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-sm); background: rgba(255,255,255,.06); }
        .assurance-item strong { display: block; margin-bottom: 6px; font-size: 17px; }
        .assurance-item span { color: rgba(255,255,255,.62); font-size: 13px; }

        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .faq-item { padding: 24px; border-bottom: 1px solid var(--line); background: #fff; }
        .faq-item h3 { margin-bottom: 10px; font-size: 18px; }
        .faq-item p { margin-bottom: 0; color: var(--ink-soft); font-size: 14px; }

        .closing {
            position: relative;
            overflow: hidden;
            padding: 78px 0;
            color: #fff;
            background: var(--blue);
        }
        .closing::after { content: ""; position: absolute; right: -5%; top: -90px; width: 46%; height: 260%; background: rgba(255,255,255,.08); transform: rotate(18deg); }
        .closing-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
        .closing h2 { margin-bottom: 10px; }
        .closing p { max-width: 620px; margin-bottom: 0; color: rgba(255,255,255,.78); }

        footer { padding: 56px 0 28px; color: #a9b8c9; background: #0d1b2d; }
        .footer-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr 1fr; gap: 30px; padding-bottom: 42px; }
        footer .brand-mark { color: #fff; background: var(--blue); box-shadow: none; }
        .footer-brand p { max-width: 300px; margin-top: 18px; color: #8799ad; font-size: 13px; }
        footer h3 { margin: 0 0 14px; color: #fff; font-size: 15px; }
        footer ul { margin: 0; padding: 0; list-style: none; }
        footer li { margin: 7px 0; font-size: 13px; }
        footer a:hover { color: #fff; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); color: #718399; font-size: 12px; }

        .video-modal { position: fixed; z-index: 50; inset: 0; display: none; place-items: center; padding: 24px; background: rgba(5,17,31,.84); }
        .video-modal.open { display: grid; }
        .video-modal-box { position: relative; width: min(820px, 100%); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: #081522; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
        .video-modal video { width: 100%; height: 100%; object-fit: cover; }
        .modal-close { position: absolute; z-index: 2; right: 12px; top: 12px; width: 38px; height: 38px; color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: rgba(0,0,0,.35); font-size: 22px; }

        @media (max-width: 1024px) {
            .container { width: min(100% - 40px, 900px); }
            .play-button { right: 7%; }
            .feature-grid { grid-template-columns: repeat(2, 1fr); }
            .channel-grid { grid-template-columns: 1fr 1fr; }
            .channel-card.primary { grid-column: span 2; }
        }
        @media (max-width: 768px) {
            .page-shell { padding-left: 0; }
            .side-nav { display: none; }
            .mobile-topbar { display: flex; }
            main section { padding: 68px 0; }
            .hero { min-height: 620px; }
            .hero-content { padding: 70px 0; }
            .hero-copy { font-size: 16px; }
            .play-button { top: auto; right: 24px; bottom: 42px; width: 64px; height: 64px; font-size: 20px; }
            .audience-layout, .solution-layout, .news-layout, .assurance-layout { grid-template-columns: 1fr; gap: 30px; }
            .stats { grid-template-columns: repeat(2, 1fr); gap: 24px 10px; }
            .stat { padding-left: 16px; }
            .assurance-list, .faq-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .closing-inner { display: block; }
            .closing-inner .button-ghost { margin-top: 24px; }
        }
        @media (max-width: 520px) {
            .container { width: min(100% - 32px, 460px); }
            h1 { font-size: 42px; }
            h2 { font-size: 31px; }
            .hero { min-height: 650px; }
            .hero-actions { align-items: stretch; flex-direction: column; }
            .hero-actions a { width: 100%; }
            .feature-grid, .channel-grid { grid-template-columns: 1fr; }
            .channel-card.primary { grid-column: auto; }
            .stats { grid-template-columns: 1fr 1fr; }
            .stat strong { font-size: 29px; }
            .audience-panel, .feature-card { padding: 23px; }
            .footer-grid { grid-template-columns: 1fr; gap: 24px; }
            .footer-bottom { display: block; }
            .footer-bottom span { display: block; margin-top: 7px; }
        }

/* roulang page: category1 */
:root {
 --ink:#14243a;
 --ink-soft:#53657b;
 --muted:#7890a6;
 --blue:#1769e0;
 --blue-deep:#0e4db5;
 --cyan:#22b8cf;
 --orange:#ff8a4c;
 --paper:#f7faff;
 --white:#fff;
 --line:#dfe9f3;
 --line-dark:#c9d7e6;
 --shadow-sm:0 8px 24px rgba(19,54,92,.07);
 --shadow-md:0 18px 48px rgba(19,54,92,.13);
 --radius-sm:10px;
 --radius-md:18px;
 --radius-lg:28px;
 --ease:220ms ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 color:var(--ink);
 background:var(--paper);
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
 font-size:16px;
 line-height:1.75;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none;transition:color var(--ease),background var(--ease),border var(--ease),transform var(--ease)}
button,input{font:inherit}
button{cursor:pointer}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.25}
.container{width:min(1180px,calc(100% - 48px));margin:0 auto}
.side-nav{
 position:fixed;z-index:20;inset:0 auto 0 0;width:92px;padding:26px 16px;
 display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.96);
 border-right:1px solid var(--line);box-shadow:10px 0 30px rgba(25,62,102,.04)
}
.brand-mark{
 width:54px;height:54px;display:grid;place-items:center;color:#fff;background:var(--ink);
 border-radius:16px;font-size:20px;font-weight:800;letter-spacing:.5px;
 box-shadow:0 10px 20px rgba(20,36,58,.18)
}
.brand-caption{margin-top:10px;color:var(--ink);font-size:12px;font-weight:700;writing-mode:vertical-rl;letter-spacing:2px}
.nav-list{width:100%;margin:54px 0 0;padding:0;list-style:none}
.nav-list li{margin-bottom:10px}
.nav-list a{
 min-height:66px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;
 justify-content:center;gap:4px;color:var(--muted);border-radius:14px;font-size:12px
}
.nav-list a span:first-child{font-size:19px;line-height:1}
.nav-list a:hover,.nav-list a.active{color:var(--blue);background:#edf5ff}
.nav-foot{margin-top:auto;color:var(--muted);font-size:11px;text-align:center;line-height:1.5}
.mobile-topbar{
 display:none;height:68px;padding:0 20px;align-items:center;justify-content:space-between;
 background:var(--white);border-bottom:1px solid var(--line)
}
.mobile-brand{display:flex;align-items:center;gap:10px;font-weight:800}
.mobile-brand .brand-mini{
 width:36px;height:36px;display:grid;place-items:center;color:#fff;background:var(--ink);
 border-radius:10px;font-size:15px
}
.menu-toggle{
 width:40px;height:40px;border:1px solid var(--line-dark);border-radius:10px;
 background:#fff;color:var(--ink);font-size:0
}
.menu-toggle::after{content:"☰";font-size:20px}
.page-shell{margin-left:92px}
.inner-hero{
 position:relative;overflow:hidden;padding:112px 0 96px;color:#fff;background:#10243c
}
.inner-hero::before{
 content:"";position:absolute;inset:0;
 background:linear-gradient(105deg,#10243c 0%,#173e67 58%,#1769e0 100%)
}
.inner-hero::after{
 content:"";position:absolute;right:7%;top:28%;width:230px;height:230px;
 border:1px solid rgba(146,230,237,.25);border-radius:50%;
 box-shadow:0 0 0 28px rgba(146,230,237,.05),0 0 0 58px rgba(146,230,237,.035)
}
.inner-hero .container{position:relative;z-index:1}
.eyebrow{
 display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;color:#92e6ed;
 font-size:14px;font-weight:700;letter-spacing:1px
}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--cyan)}
.inner-hero h1{max-width:720px;margin-bottom:22px;font-size:clamp(38px,5vw,66px);letter-spacing:0}
.inner-hero p{max-width:680px;margin-bottom:30px;color:rgba(255,255,255,.78);font-size:18px}
.hero-points{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.hero-points li{
 padding:8px 14px;border:1px solid rgba(255,255,255,.22);border-radius:30px;
 color:rgba(255,255,255,.88);font-size:14px;background:rgba(255,255,255,.08)
}
.button-primary,.button-ghost,.button-dark{
 min-height:48px;padding:11px 22px;display:inline-flex;align-items:center;justify-content:center;
 gap:8px;border-radius:9px;font-size:15px;font-weight:700;
 transition:transform var(--ease),box-shadow var(--ease),background var(--ease)
}
.button-primary{color:#fff;background:var(--blue);box-shadow:0 10px 22px rgba(23,105,224,.25)}
.button-primary:hover{color:#fff;background:var(--blue-deep);transform:translateY(-2px);box-shadow:0 14px 28px rgba(23,105,224,.32)}
.button-ghost{color:#fff;border:1px solid rgba(255,255,255,.44);background:rgba(255,255,255,.08)}
.button-ghost:hover{color:#fff;background:rgba(255,255,255,.18);transform:translateY(-2px)}
.section{padding:88px 0}
.section-alt{background:#eef5fb}
.section-heading{max-width:720px;margin-bottom:38px}
.section-heading .eyebrow{color:var(--blue);margin-bottom:13px}
.section-heading .eyebrow::before{background:var(--blue)}
.section-heading h2{margin-bottom:14px;font-size:clamp(28px,3vw,42px)}
.section-heading p{margin-bottom:0;color:var(--ink-soft)}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.category-card{
 min-height:236px;padding:28px;position:relative;display:flex;flex-direction:column;
 background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
 box-shadow:var(--shadow-sm);overflow:hidden
}
.category-card::after{
 content:"";position:absolute;right:-34px;bottom:-48px;width:130px;height:130px;
 border:18px solid rgba(34,184,207,.09);border-radius:50%
}
.category-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:#b9d4f2}
.category-icon{
 width:46px;height:46px;display:grid;place-items:center;margin-bottom:20px;
 border-radius:13px;color:var(--blue);background:#eaf3ff;font-size:22px;font-weight:800
}
.category-card h3{margin-bottom:10px;font-size:21px}
.category-card p{margin-bottom:20px;color:var(--ink-soft);font-size:14px}
.text-link{margin-top:auto;color:var(--blue);font-size:14px;font-weight:700}
.text-link:hover{color:var(--blue-deep)}
.split-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.feature-panel{
 padding:34px;background:#10243c;border-radius:var(--radius-lg);color:#fff;
 box-shadow:var(--shadow-md)
}
.feature-panel h2{margin-bottom:16px;font-size:32px}
.feature-panel p{color:rgba(255,255,255,.72)}
.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
.metric{padding:16px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.06)}
.metric strong{display:block;color:#92e6ed;font-size:25px;line-height:1.2}
.metric span{color:rgba(255,255,255,.65);font-size:12px}
.content-list{display:grid;gap:14px}
.content-item{
 display:flex;gap:18px;align-items:flex-start;padding:20px 0;border-bottom:1px solid var(--line)
}
.content-item:last-child{border-bottom:0}
.content-index{
 flex:0 0 38px;height:38px;display:grid;place-items:center;border-radius:10px;
 color:var(--blue);background:#eaf3ff;font-size:14px;font-weight:800
}
.content-item h3{margin:0 0 5px;font-size:18px}
.content-item p{margin:0;color:var(--ink-soft);font-size:14px}
.info-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.info-cell{padding:30px 24px;border-right:1px solid var(--line)}
.info-cell:first-child{padding-left:0}
.info-cell:last-child{border-right:0}
.info-cell strong{display:block;margin-bottom:5px;color:var(--blue);font-size:28px;line-height:1.2}
.info-cell span{color:var(--ink-soft);font-size:14px}
.faq-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.faq-item{padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}
.faq-item h3{margin-bottom:9px;font-size:17px}
.faq-item p{margin:0;color:var(--ink-soft);font-size:14px}
.cta-panel{
 display:flex;align-items:center;justify-content:space-between;gap:30px;padding:38px 42px;
 border-radius:var(--radius-lg);color:#fff;background:linear-gradient(110deg,#1769e0,#0e4db5)
}
.cta-panel h2{margin-bottom:8px;color:#fff;font-size:30px}
.cta-panel p{margin:0;color:rgba(255,255,255,.76)}
.cta-panel .button-ghost{flex:0 0 auto}
footer{padding:66px 0 24px;color:#c7d5e5;background:#10243c}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:38px}
.footer-brand .brand-mark{margin-bottom:18px;background:#fff;color:var(--ink)}
.footer-brand p{max-width:300px;color:#9db1c7;font-size:14px}
footer h3{margin-bottom:16px;color:#fff;font-size:15px}
footer ul{margin:0;padding:0;list-style:none}
footer li{margin-bottom:9px}
footer li a{color:#9db1c7;font-size:14px}
footer li a:hover{color:#92e6ed}
.footer-bottom{
 display:flex;justify-content:space-between;gap:20px;margin-top:44px;padding-top:20px;
 border-top:1px solid rgba(255,255,255,.13);color:#7890a6;font-size:12px
}
:focus-visible{outline:3px solid rgba(34,184,207,.55);outline-offset:3px}
@media (max-width:1024px){
 .category-grid{grid-template-columns:repeat(2,1fr)}
 .split-layout{gap:30px}
 .footer-grid{grid-template-columns:1.5fr repeat(3,1fr);gap:24px}
}
@media (max-width:768px){
 .side-nav{display:none}
 .mobile-topbar{display:flex;position:relative;z-index:30}
 .page-shell{margin-left:0}
 body.nav-open .side-nav{
  display:flex;top:68px;width:100%;height:calc(100vh - 68px);padding:26px 30px;
  align-items:stretch;border-right:0;border-top:1px solid var(--line)
 }
 body.nav-open .brand-caption{writing-mode:horizontal-tb;margin:0 0 20px}
 body.nav-open .nav-list{margin:0}
 body.nav-open .nav-list a{flex-direction:row;justify-content:flex-start;padding:14px 18px;gap:13px}
 body.nav-open .nav-foot{display:none}
 .container{width:min(100% - 36px,620px)}
 .inner-hero{padding:76px 0 70px}
 .inner-hero h1{font-size:42px}
 .section{padding:64px 0}
 .split-layout{grid-template-columns:1fr}
 .info-grid{grid-template-columns:repeat(2,1fr)}
 .info-cell:nth-child(2){border-right:0}
 .info-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .info-cell:first-child{padding-left:0}
 .cta-panel{align-items:flex-start;flex-direction:column;padding:30px}
 .footer-grid{grid-template-columns:repeat(2,1fr)}
 .footer-brand{grid-column:1/-1}
}
@media (max-width:520px){
 .container{width:calc(100% - 28px)}
 .inner-hero h1{font-size:36px}
 .inner-hero p{font-size:16px}
 .category-grid,.faq-list{grid-template-columns:1fr}
 .category-card{min-height:0}
 .metric-row{grid-template-columns:1fr}
 .info-cell{padding:22px 14px}
 .info-cell strong{font-size:24px}
 .footer-grid{grid-template-columns:1fr 1fr;gap:26px 18px}
 .footer-brand{grid-column:1/-1}
 .footer-bottom{display:block}
 .footer-bottom span{display:block;margin-bottom:8px}
}