/* roulang page: index */
:root {
      --blue: #2563eb;
      --blue-deep: #1746a2;
      --blue-soft: #eaf2ff;
      --teal: #0f9f91;
      --coral: #f97362;
      --yellow: #f4c84b;
      --ink: #172033;
      --muted: #5b667a;
      --line: #dce5f0;
      --paper: #ffffff;
      --bg: #f5f8fc;
      --shadow: 0 14px 34px rgba(37, 74, 130, .10);
      --shadow-small: 0 7px 18px rgba(37, 74, 130, .08);
      --radius: 12px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--bg);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.7;
      letter-spacing: 0;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    :focus-visible { outline: 3px solid #f4c84b; outline-offset: 3px; }
    .container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
    .pixel-line { height: 4px; width: 42px; background: var(--blue); box-shadow: 8px 0 0 var(--teal), 16px 0 0 var(--coral); }
    .eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      color: var(--blue-deep); font-size: 13px; font-weight: 800; letter-spacing: .08em;
    }
    .eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--coral); }
    .section { padding: 92px 0; }
    .section-head { max-width: 680px; margin-bottom: 42px; }
    .section-head h2 { margin: 13px 0 12px; font-size: clamp(28px, 4vw, 46px); line-height: 1.2; letter-spacing: 0; }
    .section-head p { margin: 0; color: var(--muted); font-size: 16px; }

    .site-header {
      position: sticky; top: 0; z-index: 30;
      background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line);
      box-shadow: 0 3px 15px rgba(37, 74, 130, .05);
    }
    .nav-wrap { min-height: 76px; display: flex; align-items: center; gap: 25px; }
    .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 17px; white-space: nowrap; }
    .brand-mark { width: 26px; height: 26px; display: grid; place-items: center; background: var(--blue); color: #fff; border: 2px solid var(--ink); font-size: 13px; }
    .main-nav { display: flex; align-items: center; gap: 5px; margin-left: auto; }
    .nav-link { padding: 9px 12px; color: var(--muted); font-size: 14px; font-weight: 700; border-bottom: 2px solid transparent; transition: .2s ease; }
    .nav-link:hover, .nav-link.active { color: var(--blue); border-bottom-color: var(--blue); }
    .timeline { display: flex; align-items: center; gap: 0; margin-left: 10px; }
    .phase { position: relative; display: flex; align-items: center; gap: 6px; color: #8a94a5; font-size: 12px; font-weight: 700; }
    .phase:not(:last-child)::after { content: ""; width: 22px; height: 1px; background: var(--line); margin: 0 7px; }
    .phase i { width: 8px; height: 8px; border: 2px solid #b8c3d2; background: #fff; }
    .phase.current { color: var(--blue); }
    .phase.current i { border-color: var(--blue); background: var(--blue); box-shadow: 3px 3px 0 #b9d0ff; }
    .nav-cta, .btn {
      display: inline-flex; justify-content: center; align-items: center; gap: 8px;
      min-height: 44px; padding: 10px 18px; border: 1px solid var(--blue);
      border-radius: 7px; font-weight: 800; transition: .2s ease;
    }
    .btn-primary, .nav-cta { color: #fff; background: var(--blue); box-shadow: 4px 4px 0 #bdd1fa; }
    .btn-primary:hover, .nav-cta:hover { transform: translateY(-1px); background: var(--blue-deep); box-shadow: 6px 6px 0 #bdd1fa; }
    .btn-primary:active, .nav-cta:active { transform: translateY(1px); box-shadow: 2px 2px 0 #bdd1fa; }
    .btn-secondary { color: var(--blue-deep); background: #fff; }
    .btn-secondary:hover { background: var(--blue-soft); transform: translateY(-1px); }
    .menu-btn { display: none; margin-left: auto; border: 1px solid var(--line); background: #fff; padding: 9px 12px; border-radius: 7px; color: var(--blue); }

    .hero { padding: 76px 0 64px; background: #fff; border-bottom: 1px solid var(--line); }
    .hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 62px; align-items: center; }
    .hero h1 { max-width: 620px; margin: 17px 0 19px; font-size: clamp(38px, 5.4vw, 70px); line-height: 1.1; letter-spacing: 0; }
    .hero-copy { max-width: 600px; color: var(--muted); font-size: 17px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
    .hero-stats { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 29px; }
    .stat strong { display: block; font-size: 21px; color: var(--ink); }
    .stat span { display: block; color: var(--muted); font-size: 12px; }
    .cover-stage { position: relative; padding: 18px 18px 26px; background: #eaf2ff; border: 1px solid #c9dbf6; box-shadow: var(--shadow); }
    .cover-stage::before { content: "在线浏览指南"; position: absolute; top: 0; right: 0; padding: 5px 9px; color: #fff; background: var(--coral); font-size: 11px; font-weight: 800; }
    .cover-image { position: relative; min-height: 310px; overflow: hidden; background: #b9d8e8; border: 4px solid #fff; }
    .cover-image img { width: 100%; height: 310px; object-fit: cover; }
    .cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; background: #c9e5ef; color: #155e75; font-size: 26px; font-weight: 900; text-align: center; padding: 35px; }
    .play-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 62px; height: 62px; border: 3px solid #fff; background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 23px; box-shadow: 5px 5px 0 rgba(23,32,51,.24); }
    .cover-meta { display: flex; justify-content: space-between; gap: 15px; margin-top: 15px; font-size: 13px; }
    .cover-meta strong { font-size: 16px; }
    .cover-meta span { color: var(--muted); }

    .process-band { background: var(--blue); color: #fff; padding: 30px 0; }
    .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
    .process-item { position: relative; padding: 5px 35px 5px 61px; min-height: 86px; border-right: 1px solid rgba(255,255,255,.25); }
    .process-item:last-child { border-right: 0; }
    .process-number { position: absolute; left: 0; top: 4px; width: 40px; height: 40px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); border: 2px solid #fff; font-weight: 900; }
    .process-item h3 { margin: 0 0 4px; font-size: 18px; }
    .process-item p { margin: 0; color: #dbe8ff; font-size: 13px; }

    .feature-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: 44px; align-items: start; }
    .feature-note { padding: 27px; background: #fff; border-left: 5px solid var(--teal); box-shadow: var(--shadow-small); }
    .feature-note h3 { margin: 0 0 10px; font-size: 23px; }
    .feature-note p { margin: 0; color: var(--muted); font-size: 14px; }
    .feature-list { display: grid; gap: 16px; }
    .feature-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
    .feature-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--blue); background: var(--blue-soft); border: 1px solid #bed3f6; font-weight: 900; }
    .feature-row h3 { margin: 0 0 4px; font-size: 17px; }
    .feature-row p { margin: 0; color: var(--muted); font-size: 13px; }
    .badge { display: inline-block; padding: 4px 9px; color: var(--blue-deep); background: var(--blue-soft); font-size: 11px; font-weight: 800; white-space: nowrap; }

    .scene { background: #eef5fc; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .scene-board { display: grid; grid-template-columns: 220px 1fr; min-height: 405px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
    .filters { padding: 25px; border-right: 1px solid var(--line); background: #fbfdff; }
    .filters h3 { margin: 0 0 18px; font-size: 16px; }
    .filter-label { display: block; margin: 16px 0 6px; color: var(--muted); font-size: 12px; font-weight: 800; }
    .filter-select, .search-input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: #fff; }
    .preview { padding: 25px; }
    .preview-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 20px; }
    .preview-top h3 { margin: 0; font-size: 20px; }
    .video-row { display: grid; grid-template-columns: 150px 1fr auto; gap: 17px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
    .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #d8e8ef; }
    .thumb img { width: 100%; height: 100%; object-fit: cover; }
    .thumb em { position: absolute; bottom: 6px; right: 6px; padding: 2px 6px; color: #fff; background: rgba(23,32,51,.82); font-size: 11px; font-style: normal; }
    .video-row h4 { margin: 0 0 5px; font-size: 16px; }
    .video-row p { margin: 0; color: var(--muted); font-size: 12px; }
    .progress { width: 100%; height: 5px; margin-top: 9px; background: #e8edf4; }
    .progress span { display: block; height: 100%; width: 64%; background: var(--teal); }

    .timeline-section { background: #fff; }
    .schedule { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--blue); }
    .schedule-item { padding: 22px 20px; border-right: 1px solid var(--line); }
    .schedule-item:last-child { border-right: 0; }
    .schedule-time { color: var(--coral); font-weight: 900; font-size: 13px; }
    .schedule-item h3 { margin: 9px 0 6px; font-size: 17px; }
    .schedule-item p { margin: 0; color: var(--muted); font-size: 13px; }

    .updates-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 44px; }
    .update-list { border-top: 1px solid var(--line); }
    .update-item { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
    .update-item a { font-weight: 800; }
    .update-item a:hover { color: var(--blue); }
    .update-item time { flex: none; color: var(--muted); font-size: 12px; }
    .side-panel { padding: 25px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-small); }
    .side-panel h3 { margin: 0 0 13px; font-size: 19px; }
    .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
    .tag { padding: 7px 10px; border: 1px solid var(--line); color: var(--muted); background: #f9fbfe; font-size: 12px; }
    .tag:hover { color: var(--blue); border-color: var(--blue); }

    .proof { padding: 32px 0; background: #f0f7f7; border-top: 1px solid #d5e9e7; border-bottom: 1px solid #d5e9e7; }
    .proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
    .proof-item { padding-left: 16px; border-left: 3px solid var(--teal); }
    .proof-item strong { display: block; font-size: 20px; }
    .proof-item span { color: var(--muted); font-size: 13px; }

    .faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 42px; }
    .faq-item { padding: 19px 0; border-bottom: 1px solid var(--line); }
    .faq-item h3 { margin: 0 0 8px; font-size: 16px; }
    .faq-item p { margin: 0; color: var(--muted); font-size: 14px; }

    .cta { padding: 58px 0; background: var(--blue-deep); color: #fff; }
    .cta-wrap { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
    .cta h2 { margin: 0 0 8px; font-size: 32px; line-height: 1.25; }
    .cta p { max-width: 650px; margin: 0; color: #dbe8ff; }
    .cta .btn-primary { color: var(--blue-deep); background: #fff; border-color: #fff; box-shadow: 4px 4px 0 var(--yellow); white-space: nowrap; }
    .cta .btn-primary:hover { background: #f4f8ff; }

    .site-footer { padding: 44px 0 86px; background: #fff; border-top: 1px solid var(--line); }
    .footer-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 40px; }
    .footer-brand p { max-width: 360px; margin: 15px 0 0; color: var(--muted); font-size: 13px; }
    .footer-col h3 { margin: 0 0 12px; font-size: 14px; }
    .footer-col a { display: block; width: fit-content; margin: 7px 0; color: var(--muted); font-size: 13px; }
    .footer-col a:hover { color: var(--blue); }
    .copyright { margin-top: 35px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }

    .fixed-cta { position: fixed; z-index: 25; bottom: 18px; left: 50%; transform: translateX(-50%); width: min(720px, calc(100% - 32px)); display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 10px 12px 10px 18px; background: rgba(255,255,255,.98); border: 1px solid #c8d8ed; box-shadow: 0 9px 28px rgba(23,32,51,.16); }
    .fixed-cta span { color: var(--muted); font-size: 13px; }
    .fixed-cta button { width: 28px; height: 28px; border: 0; color: var(--muted); background: transparent; font-size: 18px; }
    .fixed-cta button:hover { color: var(--coral); }

    @media (max-width: 1024px) {
      .timeline { display: none; }
      .hero-grid { gap: 35px; }
      .feature-layout, .updates-layout { gap: 28px; }
    }
    @media (max-width: 768px) {
      .container { width: min(100% - 30px, 620px); }
      .nav-wrap { min-height: 68px; }
      .brand { font-size: 15px; }
      .main-nav { display: none; position: absolute; left: 15px; right: 15px; top: 74px; padding: 15px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); flex-direction: column; align-items: stretch; }
      .main-nav.open { display: flex; }
      .nav-link { min-height: 44px; }
      .menu-btn { display: block; }
      .nav-cta { display: none; }
      .hero { padding: 52px 0 45px; }
      .hero-grid, .feature-layout, .updates-layout { grid-template-columns: 1fr; }
      .hero h1 { font-size: 42px; }
      .cover-image, .cover-image img { min-height: 245px; height: 245px; }
      .process-grid { grid-template-columns: 1fr; }
      .process-item { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.25); padding: 17px 15px 17px 61px; }
      .process-item:last-child { border-bottom: 0; }
      .scene-board { grid-template-columns: 1fr; }
      .filters { border-right: 0; border-bottom: 1px solid var(--line); }
      .schedule { grid-template-columns: 1fr 1fr; }
      .schedule-item:nth-child(2) { border-right: 0; }
      .schedule-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .proof-grid { grid-template-columns: 1fr 1fr; }
      .faq-grid { grid-template-columns: 1fr; }
      .cta-wrap { align-items: flex-start; flex-direction: column; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 520px) {
      .section { padding: 64px 0; }
      .hero h1 { font-size: 36px; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .btn { width: 100%; }
      .hero-stats { gap: 15px; }
      .feature-row { grid-template-columns: 42px 1fr; }
      .feature-row .badge { grid-column: 2; width: fit-content; }
      .preview-top { align-items: flex-start; flex-direction: column; }
      .video-row { grid-template-columns: 112px 1fr; }
      .video-row .btn { grid-column: 2; width: fit-content; }
      .schedule { grid-template-columns: 1fr; }
      .schedule-item, .schedule-item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
      .schedule-item:last-child { border-bottom: 0; }
      .proof-grid { grid-template-columns: 1fr; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-brand { grid-column: auto; }
      .fixed-cta { bottom: 10px; }
      .fixed-cta span { max-width: 190px; line-height: 1.4; }
    }

/* roulang page: category1 */
:root {
      --blue:#2563eb;
      --blue-deep:#1746a2;
      --blue-soft:#eaf2ff;
      --teal:#0f9f91;
      --coral:#f97362;
      --yellow:#f4c84b;
      --ink:#172033;
      --muted:#5b667a;
      --line:#dce5f0;
      --paper:#fff;
      --bg:#f5f8fc;
      --shadow:0 14px 34px rgba(37,74,130,.10);
      --shadow-small:0 7px 18px rgba(37,74,130,.08);
      --radius:12px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--bg);font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.7;letter-spacing:0}
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input{font:inherit}
    button{cursor:pointer}
    .container{width:min(1180px,calc(100% - 40px));margin:0 auto}
    .site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);box-shadow:0 3px 15px rgba(37,74,130,.05)}
    .nav-wrap{min-height:76px;display:flex;align-items:center;gap:25px}
    .brand{display:inline-flex;align-items:center;gap:10px;font-weight:900;font-size:17px;white-space:nowrap}
    .brand-mark{width:26px;height:26px;display:grid;place-items:center;background:var(--blue);color:#fff;border:2px solid var(--ink);font-size:13px}
    .main-nav{display:flex;align-items:center;gap:5px;margin-left:auto}
    .nav-link{padding:9px 12px;color:var(--muted);font-size:14px;font-weight:700;border-bottom:2px solid transparent;transition:.2s ease}
    .nav-link:hover,.nav-link.active{color:var(--blue);border-bottom-color:var(--blue)}
    .nav-cta,.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border:1px solid var(--blue);border-radius:7px;font-weight:800;transition:.2s ease}
    .btn-primary,.nav-cta{color:#fff;background:var(--blue);box-shadow:4px 4px 0 #bdd1fa}
    .btn-primary:hover,.nav-cta:hover{transform:translateY(-1px);background:var(--blue-deep);box-shadow:6px 6px 0 #bdd1fa}
    .btn-primary:active,.nav-cta:active{transform:translateY(1px);box-shadow:2px 2px 0 #bdd1fa}
    .btn-secondary{color:var(--blue-deep);background:#fff}
    .btn-secondary:hover{background:var(--blue-soft);transform:translateY(-1px)}
    .menu-btn{display:none;margin-left:auto;border:1px solid var(--line);background:#fff;padding:9px 12px;border-radius:7px;color:var(--blue)}
    :focus-visible{outline:3px solid rgba(249,115,98,.65);outline-offset:3px}
    .hero{padding:66px 0 56px;background:#fff;border-bottom:1px solid var(--line)}
    .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:62px;align-items:center}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue-deep);font-size:13px;font-weight:800;letter-spacing:.08em}
    .eyebrow:before{content:"";width:8px;height:8px;background:var(--coral)}
    .hero h1{max-width:680px;margin:16px 0 17px;font-size:clamp(36px,5vw,66px);line-height:1.12}
    .hero-copy{max-width:630px;color:var(--muted);font-size:17px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:27px}
    .breadcrumb{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:23px}
    .breadcrumb a:hover{color:var(--blue)}
    .promo-board{position:relative;padding:20px;background:var(--blue-soft);border:1px solid #c9dbf6;box-shadow:var(--shadow)}
    .promo-board:before{content:"分类精选";position:absolute;right:-8px;top:18px;padding:5px 11px;background:var(--coral);color:#fff;border:2px solid var(--ink);font-size:12px;font-weight:900;transform:rotate(3deg)}
    .media-art{position:relative;aspect-ratio:16/10;overflow:hidden;background:#d8e8ff;border:1px solid #b9d0f3}
    .media-art:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#dbeafe 0 42%,#b8d6ff 42% 62%,#9cc4f5 62%);opacity:.9}
    .media-art:after{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;display:grid;place-items:center;background:var(--blue);color:#fff;border:3px solid #fff;box-shadow:5px 5px 0 rgba(23,32,51,.2);font-size:23px}
    .art-lines{position:absolute;left:22px;bottom:20px;z-index:1;display:grid;gap:7px}
    .art-lines span{display:block;height:8px;background:#fff;opacity:.9}
    .art-lines span:nth-child(1){width:145px}.art-lines span:nth-child(2){width:90px}.art-lines span:nth-child(3){width:116px}
    .promo-meta{display:flex;justify-content:space-between;gap:15px;margin-top:15px;font-size:13px}
    .promo-meta strong{font-size:17px}.promo-meta span{color:var(--muted)}
    .section{padding:82px 0}
    .section-head{max-width:700px;margin-bottom:34px}
    .section-head h2{margin:12px 0;font-size:clamp(28px,4vw,44px);line-height:1.2}
    .section-head p{margin:0;color:var(--muted);font-size:16px}
    .filter-area{display:grid;grid-template-columns:245px 1fr;gap:38px;align-items:start}
    .filter-panel{padding:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-small);border-radius:var(--radius)}
    .filter-panel h3{margin:0 0 15px;font-size:17px}
    .filter-label{display:block;margin:16px 0 7px;color:var(--muted);font-size:13px;font-weight:800}
    .search-input,.filter-select{width:100%;min-height:43px;padding:9px 11px;border:1px solid var(--line);border-radius:6px;color:var(--ink);background:#fff}
    .search-input:focus,.filter-select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);outline:0}
    .tag-list{display:flex;flex-wrap:wrap;gap:7px}
    .tag{padding:5px 9px;color:var(--muted);background:#f7f9fc;border:1px solid var(--line);font-size:12px;transition:.2s}
    .tag:hover,.tag.selected{color:var(--blue-deep);background:var(--blue-soft);border-color:#a9c6f5}
    .result-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:17px}
    .result-head h3{margin:0;font-size:21px}
    .result-head p{margin:0;color:var(--muted);font-size:13px}
    .video-list{background:#fff;border-top:3px solid var(--blue);box-shadow:var(--shadow-small);padding:0 22px}
    .video-row{display:grid;grid-template-columns:166px 1fr auto;gap:18px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
    .video-row:last-child{border-bottom:0}
    .thumb{position:relative;aspect-ratio:16/10;overflow:hidden;background:#dbeafe;border:1px solid #c7daf4}
    .thumb:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#dbeafe 0 38%,#8ebbf2 38% 70%,#c5efdF 70%)}
    .thumb:after{content:"▶";position:absolute;right:10px;bottom:9px;width:27px;height:27px;display:grid;place-items:center;background:#fff;color:var(--blue);font-size:11px;border:1px solid var(--blue)}
    .thumb-text{position:absolute;z-index:1;left:10px;bottom:9px;color:#fff;font-size:11px;font-weight:800;text-shadow:0 1px 2px #1746a2}
    .video-row h4{margin:0 0 5px;font-size:17px}
    .video-row p{margin:0;color:var(--muted);font-size:13px}
    .meta-line{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
    .badge{display:inline-block;padding:4px 9px;color:var(--blue-deep);background:var(--blue-soft);font-size:11px;font-weight:800;white-space:nowrap}
    .badge.teal{color:#08766d;background:#def7f3}.badge.coral{color:#a83e31;background:#ffebe7}
    .row-action{white-space:nowrap}
    .outline-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 13px;border:1px solid var(--line);border-radius:6px;color:var(--blue-deep);font-size:13px;font-weight:800;transition:.2s}
    .outline-btn:hover{border-color:var(--blue);background:var(--blue-soft);transform:translateY(-1px)}
    .intro-band{background:#172033;color:#fff;padding:46px 0}
    .process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
    .process-item{position:relative;padding:7px 30px 7px 58px;border-right:1px solid rgba(255,255,255,.22)}
    .process-item:last-child{border-right:0}
    .process-number{position:absolute;left:0;top:7px;color:var(--yellow);font-size:24px;font-weight:900}
    .process-item h3{margin:0 0 5px;font-size:18px}.process-item p{margin:0;color:#dbe8ff;font-size:13px}
    .faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:55px}
    .faq-list{display:grid;gap:12px}
    .faq-item{background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);padding:17px 20px}
    .faq-item button{width:100%;display:flex;justify-content:space-between;gap:20px;text-align:left;border:0;background:none;color:var(--ink);font-weight:850;padding:0}
    .faq-item button span:last-child{color:var(--blue);font-size:20px;line-height:1}
    .faq-answer{display:none;margin:10px 30px 0 0;color:var(--muted);font-size:14px}
    .faq-item.open .faq-answer{display:block}
    .faq-item.open button span:last-child{transform:rotate(45deg)}
    .cta-band{padding:68px 0;background:var(--blue-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta-inner h2{margin:0 0 8px;font-size:32px;line-height:1.25}.cta-inner p{margin:0;color:var(--muted)}
    .site-footer{padding:55px 0 88px;background:#eef3f9;border-top:1px solid var(--line)}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:50px}
    .footer-brand p{max-width:420px;color:var(--muted);font-size:14px}
    .footer-col{display:grid;align-content:start;gap:8px}.footer-col h3{margin:0 0 9px;font-size:15px}.footer-col a{color:var(--muted);font-size:14px}.footer-col a:hover{color:var(--blue)}
    .copyright{margin-top:38px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
    .bottom-bar{position:fixed;z-index:25;bottom:0;left:0;right:0;padding:12px 0;background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -5px 20px rgba(37,74,130,.08)}
    .bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:20px}.bottom-inner p{margin:0;color:var(--muted);font-size:13px}.bottom-inner strong{color:var(--ink)}
    .close-bar{border:0;background:none;color:var(--muted);font-size:20px;padding:5px 8px}.bottom-bar.closed{display:none}
    .pagination{display:flex;justify-content:center;gap:8px;margin-top:25px}.page-btn{width:38px;height:38px;border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:5px}.page-btn.active,.page-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
    @media(max-width:1024px){.nav-wrap{gap:14px}.hero-grid{gap:35px}.filter-area{grid-template-columns:215px 1fr}.container{width:min(100% - 32px,1180px)}}
    @media(max-width:768px){.main-nav{display:none;position:absolute;left:16px;right:16px;top:68px;padding:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.nav-link{padding:12px}.timeline{display:none}.nav-cta{display:none}.menu-btn{display:block}.hero{padding:45px 0 40px}.hero-grid,.filter-area,.faq-layout{grid-template-columns:1fr}.hero-grid{gap:32px}.section{padding:60px 0}.process-grid{grid-template-columns:1fr;gap:22px}.process-item{border-right:0;border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:20px}.process-item:last-child{border-bottom:0}.video-row{grid-template-columns:125px 1fr}.row-action{grid-column:2}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1/-1}.cta-inner{align-items:flex-start;flex-direction:column}}
    @media(max-width:520px){.container{width:calc(100% - 28px)}.brand{font-size:14px}.brand-mark{width:24px;height:24px}.hero h1{font-size:36px}.hero-copy{font-size:15px}.hero-actions .btn{width:100%}.promo-board{padding:12px}.video-list{padding:0 13px}.video-row{grid-template-columns:1fr;gap:12px}.thumb{width:100%}.row-action{grid-column:auto}.row-action .outline-btn{width:100%}.result-head{align-items:flex-start;flex-direction:column}.footer-grid{grid-template-columns:1fr}.bottom-inner p{font-size:12px}.bottom-inner .btn{min-height:40px;padding:8px 12px;font-size:13px}}