/* roulang page: index */
:root {
      --ink: #102330;
      --ink-soft: #49606d;
      --paper: #f4f7f6;
      --white: #ffffff;
      --night: #10232e;
      --night-2: #173442;
      --teal: #0e8a7a;
      --teal-dark: #08695e;
      --lime: #c5dd58;
      --coral: #f26d5b;
      --line: #d9e3e0;
      --line-dark: rgba(255,255,255,.15);
      --shadow: 0 16px 35px rgba(18, 47, 57, .10);
      --shadow-strong: 0 24px 50px rgba(18, 47, 57, .18);
      --radius: 8px;
      --side-w: 248px;
      --container: 1180px;
      --font: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background: var(--paper);
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.72;
      text-rendering: optimizeLegibility;
    }
    a { color: inherit; text-decoration: none; }
    button, input, textarea { font: inherit; }
    button { cursor: pointer; }
    img { display: block; max-width: 100%; }
    :focus-visible { outline: 3px solid rgba(197, 221, 88, .9); outline-offset: 3px; }

    .site-shell { min-height: 100vh; padding-left: var(--side-w); }
    .sidebar {
      position: fixed;
      z-index: 30;
      inset: 0 auto 0 0;
      display: flex;
      width: var(--side-w);
      flex-direction: column;
      padding: 28px 18px 20px;
      color: #e8f2f0;
      background: var(--night);
      border-right: 1px solid rgba(255,255,255,.08);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 4px 10px 28px;
      color: var(--white);
    }
    .brand-mark {
      display: grid;
      width: 36px;
      height: 36px;
      place-items: center;
      color: var(--night);
      font-size: 14px;
      font-weight: 800;
      background: var(--lime);
      border-radius: 7px;
      box-shadow: 0 8px 20px rgba(197,221,88,.18);
    }
    .brand-name {
      max-width: 157px;
      font-size: 14px;
      font-weight: 800;
      line-height: 1.35;
      letter-spacing: 0;
    }
    .sidebar-label {
      margin: 4px 10px 9px;
      color: #9eb3b7;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1px;
    }
    .nav-list { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
    .nav-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 11px;
      color: #c6d6d8;
      font-size: 15px;
      font-weight: 700;
      border: 1px solid transparent;
      border-radius: 7px;
      transition: color .2s ease, background .2s ease, transform .2s ease;
    }
    .nav-link:hover { color: var(--white); background: rgba(255,255,255,.07); transform: translateX(2px); }
    .nav-link.active { color: var(--night); background: var(--lime); }
    .nav-icon {
      width: 19px;
      height: 19px;
      flex: 0 0 19px;
      border: 2px solid currentColor;
      border-radius: 4px;
    }
    .nav-icon.circle { border-radius: 50%; }
    .side-bottom {
      margin-top: auto;
      padding: 20px 10px 6px;
      border-top: 1px solid var(--line-dark);
    }
    .side-bottom p { margin: 0 0 12px; color: #a8bcc0; font-size: 12px; line-height: 1.7; }
    .side-domain { color: var(--lime); font-size: 12px; font-weight: 700; }

    .mobile-bar {
      display: none;
      position: sticky;
      top: 0;
      z-index: 30;
      align-items: center;
      justify-content: space-between;
      padding: 12px 18px;
      color: var(--white);
      background: var(--night);
      box-shadow: 0 6px 20px rgba(15,35,46,.18);
    }
    .mobile-brand { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; }
    .mobile-brand .brand-mark { width: 30px; height: 30px; font-size: 12px; }
    .menu-toggle {
      width: 39px;
      height: 34px;
      color: var(--white);
      background: transparent;
      border: 1px solid rgba(255,255,255,.28);
      border-radius: 6px;
    }

    .container { width: min(calc(100% - 72px), var(--container)); margin: 0 auto; }
    .section { padding: 92px 0; }
    .section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 34px; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      color: var(--teal-dark);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 1.4px;
    }
    .eyebrow::before { width: 25px; height: 2px; content: ""; background: var(--coral); }
    h1, h2, h3, p { margin-top: 0; }
    h1, h2, h3 { color: var(--ink); line-height: 1.25; letter-spacing: 0; }
    h1 { margin-bottom: 18px; color: var(--white); font-size: clamp(34px, 4vw, 56px); }
    h2 { margin-bottom: 0; font-size: clamp(27px, 3vw, 38px); }
    h3 { margin-bottom: 9px; font-size: 20px; }
    .section-copy { max-width: 565px; margin-bottom: 0; color: var(--ink-soft); font-size: 16px; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      gap: 8px;
      padding: 11px 20px;
      font-weight: 800;
      line-height: 1;
      border: 1px solid transparent;
      border-radius: 6px;
      transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
    }
    .btn:hover { transform: translateY(-2px); }
    .btn-primary { color: var(--night); background: var(--lime); box-shadow: 0 9px 18px rgba(197,221,88,.18); }
    .btn-primary:hover { background: #d5eb70; box-shadow: 0 12px 22px rgba(197,221,88,.28); }
    .btn-outline { color: var(--white); background: transparent; border-color: rgba(255,255,255,.45); }
    .btn-outline:hover { color: var(--night); background: var(--white); }
    .btn-dark { color: var(--white); background: var(--night); }
    .btn-dark:hover { background: var(--teal-dark); box-shadow: var(--shadow); }
    .btn-arrow { font-size: 19px; line-height: .8; }

    .hero {
      position: relative;
      overflow: hidden;
      min-height: 618px;
      padding: 64px 0 52px;
      color: var(--white);
      background: var(--night);
    }
    .hero::before {
      position: absolute;
      inset: 0;
      content: "";
      background:
        linear-gradient(90deg, rgba(11,31,41,.93) 0%, rgba(11,31,41,.82) 45%, rgba(11,31,41,.55) 100%),
        url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1800&q=85") center/cover no-repeat;
    }
    .hero-grid { position: relative; display: grid; min-height: 498px; grid-template-columns: 1.15fr .85fr; gap: 55px; align-items: center; }
    .hero .eyebrow { color: var(--lime); }
    .hero .eyebrow::before { background: var(--coral); }
    .hero-copy { max-width: 680px; }
    .hero-copy p { max-width: 640px; margin-bottom: 28px; color: #d5e2df; font-size: 17px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
    .hero-note { margin-top: 22px; color: #b7c8ca; font-size: 13px; }
    .fund-panel {
      align-self: stretch;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 26px;
      background: rgba(255,255,255,.95);
      border: 1px solid rgba(255,255,255,.5);
      border-radius: var(--radius);
      box-shadow: var(--shadow-strong);
    }
    .fund-panel h2 { color: var(--night); font-size: 23px; }
    .fund-panel p { color: var(--ink-soft); font-size: 14px; }
    .progress-row { display: flex; align-items: center; gap: 18px; margin: 18px 0 22px; }
    .progress-ring {
      position: relative;
      display: grid;
      width: 112px;
      height: 112px;
      flex: 0 0 112px;
      place-items: center;
      background: conic-gradient(var(--teal) 0 72%, #dfe8e5 72% 100%);
      border-radius: 50%;
    }
    .progress-ring::before { width: 89px; height: 89px; content: ""; background: var(--white); border-radius: 50%; }
    .progress-value { position: absolute; color: var(--night); font-size: 22px; font-weight: 900; }
    .progress-meta strong { display: block; color: var(--night); font-size: 23px; line-height: 1.1; }
    .progress-meta span { color: var(--ink-soft); font-size: 12px; }
    .tier-list { display: grid; gap: 9px; margin: 0 0 20px; }
    .tier {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 12px;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 6px;
    }
    .tier span { font-size: 13px; font-weight: 700; }
    .tier b { color: var(--teal-dark); font-size: 13px; }
    .tier.featured { background: #f3f9d6; border-color: #d7e594; }

    .trust-strip { background: var(--white); border-bottom: 1px solid var(--line); }
    .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
    .trust-item { display: flex; align-items: center; gap: 12px; padding: 23px 18px; border-right: 1px solid var(--line); }
    .trust-item:last-child { border-right: 0; }
    .trust-symbol { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; color: var(--teal-dark); font-size: 18px; font-weight: 900; background: #e4f3ef; border-radius: 50%; }
    .trust-item b { display: block; color: var(--ink); font-size: 14px; }
    .trust-item span { display: block; color: var(--ink-soft); font-size: 12px; }

    .feature-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 58px; align-items: start; }
    .feature-sticky { position: sticky; top: 30px; }
    .feature-sticky .section-copy { margin: 17px 0 24px; }
    .feature-number { margin-top: 30px; color: var(--teal); font-size: 60px; font-weight: 900; line-height: 1; }
    .feature-number span { margin-left: 6px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
    .feature-list { display: grid; gap: 13px; }
    .feature-card { padding: 23px 24px; background: var(--white); border: 1px solid var(--line); border-left: 4px solid var(--teal); border-radius: var(--radius); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
    .feature-card:hover { border-left-color: var(--coral); box-shadow: var(--shadow); transform: translateX(4px); }
    .feature-card p { margin-bottom: 0; color: var(--ink-soft); font-size: 14px; }

    .schedule { color: var(--white); background: var(--night-2); }
    .schedule h2 { color: var(--white); }
    .schedule .section-copy { color: #c5d4d4; }
    .schedule .eyebrow { color: var(--lime); }
    .schedule-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 22px; }
    .time-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius); }
    .time-card { min-height: 214px; padding: 23px; background: rgba(8,25,34,.55); transition: background .2s ease; }
    .time-card:hover { background: rgba(14,138,122,.32); }
    .time-card small { color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
    .time-card h3 { margin: 14px 0 10px; color: var(--white); font-size: 20px; }
    .time-card p { margin: 0; color: #bdd0d2; font-size: 13px; }
    .notice-card { display: flex; min-height: 214px; flex-direction: column; justify-content: space-between; padding: 27px; background: var(--coral); border-radius: var(--radius); }
    .notice-card small { color: #fff0d9; font-size: 12px; font-weight: 800; }
    .notice-card h3 { color: var(--white); font-size: 26px; }
    .notice-card p { color: #fff2ed; font-size: 14px; }
    .notice-card .btn { align-self: flex-start; color: var(--coral); background: var(--white); }

    .topic-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 24px; }
    .topic-main {
      position: relative;
      min-height: 365px;
      overflow: hidden;
      display: flex;
      align-items: end;
      padding: 30px;
      color: var(--white);
      background: var(--night);
      border-radius: var(--radius);
    }
    .topic-main::before {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(0deg, rgba(8,29,38,.93), rgba(8,29,38,.10)), url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1200&q=85") center/cover;
      transition: transform .4s ease;
    }
    .topic-main:hover::before { transform: scale(1.04); }
    .topic-main > div { position: relative; }
    .topic-main h3 { max-width: 500px; color: var(--white); font-size: 31px; }
    .topic-main p { max-width: 530px; margin-bottom: 17px; color: #d8e7e5; }
    .topic-side { display: grid; gap: 14px; }
    .topic-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 113px;
      padding: 20px;
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .topic-link:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
    .topic-link b { display: block; margin-bottom: 4px; font-size: 17px; }
    .topic-link span { color: var(--ink-soft); font-size: 13px; }
    .topic-arrow { color: var(--teal); font-size: 25px; font-weight: 400; }

    .news-wrap { display: grid; grid-template-columns: 1fr 340px; gap: 54px; }
    .news-list { border-top: 1px solid var(--line); }
    .news-item { display: grid; grid-template-columns: 102px 1fr auto; gap: 22px; align-items: center; padding: 21px 0; border-bottom: 1px solid var(--line); transition: padding .2s ease; }
    .news-item:hover { padding-left: 9px; }
    .news-date { color: var(--teal-dark); font-size: 13px; font-weight: 800; }
    .news-item h3 { margin: 0 0 4px; font-size: 18px; }
    .news-item p { margin: 0; color: var(--ink-soft); font-size: 13px; }
    .news-arrow { color: var(--teal); font-size: 24px; }
    .news-aside { padding: 28px; background: #e1efec; border-radius: var(--radius); }
    .news-aside h3 { font-size: 22px; }
    .news-aside p { color: var(--ink-soft); font-size: 14px; }
    .check-list { display: grid; gap: 12px; margin: 20px 0 25px; padding: 0; list-style: none; }
    .check-list li { position: relative; padding-left: 22px; color: var(--ink); font-size: 14px; font-weight: 700; }
    .check-list li::before { position: absolute; left: 0; color: var(--teal); content: "✓"; font-weight: 900; }

    .faq-layout { display: grid; grid-template-columns: .76fr 1.24fr; gap: 62px; align-items: start; }
    .faq-intro p { margin: 18px 0 25px; color: var(--ink-soft); }
    .faq-list { border-top: 1px solid var(--line); }
    details { border-bottom: 1px solid var(--line); }
    summary {
      position: relative;
      padding: 20px 34px 20px 0;
      color: var(--ink);
      font-size: 17px;
      font-weight: 800;
      cursor: pointer;
      list-style: none;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after { position: absolute; top: 17px; right: 3px; color: var(--teal); content: "+"; font-size: 25px; font-weight: 400; transition: transform .2s ease; }
    details[open] summary::after { transform: rotate(45deg); }
    .answer { padding: 0 20px 20px 0; color: var(--ink-soft); font-size: 14px; }

    .booking { padding: 88px 0; color: var(--white); background: var(--teal-dark); }
    .booking-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 70px; align-items: center; }
    .booking h2 { color: var(--white); }
    .booking p { color: #d7ece7; }
    .booking .eyebrow { color: var(--lime); }
    .booking-form { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
    .field { display: grid; gap: 7px; }
    .field.full { grid-column: 1 / -1; }
    .field label { color: #e4f2ef; font-size: 13px; font-weight: 700; }
    .field input, .field textarea {
      width: 100%;
      padding: 13px 14px;
      color: var(--ink);
      background: var(--white);
      border: 1px solid transparent;
      border-radius: 5px;
      outline: none;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .field textarea { min-height: 94px; resize: vertical; }
    .field input:focus, .field textarea:focus { border-color: var(--lime); box-shadow: 0 0 0 3px rgba(197,221,88,.28); }
    .form-note { grid-column: 1 / -1; margin: 0; color: #c6e0d9; font-size: 12px; }
    .form-success { display: none; grid-column: 1 / -1; margin: 0; padding: 12px; color: #effac0; background: rgba(0,0,0,.13); border-radius: 5px; font-size: 14px; }

    footer { padding: 34px 0; color: #a8bcc0; background: var(--night); }
    .footer-row { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
    .footer-brand { color: var(--white); font-size: 15px; font-weight: 800; }
    .footer-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 13px; }
    .footer-links a:hover { color: var(--lime); }
    .copyright { margin: 0; font-size: 12px; }

    @media (max-width: 1024px) {
      :root { --side-w: 220px; }
      .container { width: min(calc(100% - 48px), var(--container)); }
      .hero-grid, .booking-grid { gap: 32px; }
      .feature-layout, .faq-layout { gap: 36px; }
      .news-wrap { gap: 30px; }
      .topic-grid { grid-template-columns: 1.1fr .9fr; }
    }
    @media (max-width: 768px) {
      .site-shell { padding-left: 0; }
      .sidebar { display: none; }
      .mobile-bar { display: flex; }
      .mobile-menu {
        display: none;
        position: fixed;
        z-index: 29;
        top: 58px;
        right: 0;
        left: 0;
        padding: 12px 18px 18px;
        background: var(--night);
        box-shadow: 0 15px 25px rgba(0,0,0,.18);
      }
      .mobile-menu.open { display: block; }
      .mobile-menu .nav-list { grid-template-columns: 1fr 1fr; }
      .mobile-menu .nav-link { padding: 10px; }
      .container { width: min(calc(100% - 36px), var(--container)); }
      .section { padding: 68px 0; }
      .hero { min-height: auto; padding: 58px 0 42px; }
      .hero-grid, .feature-layout, .schedule-grid, .topic-grid, .news-wrap, .faq-layout, .booking-grid { grid-template-columns: 1fr; }
      .hero-grid { min-height: auto; }
      .fund-panel { max-width: 540px; }
      .trust-grid { grid-template-columns: 1fr 1fr; }
      .trust-item:nth-child(2) { border-right: 0; }
      .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
      .feature-sticky { position: static; }
      .time-board { grid-template-columns: 1fr 1fr; }
      .time-card:last-child { grid-column: span 2; }
      .news-aside { max-width: 520px; }
    }
    @media (max-width: 520px) {
      body { font-size: 15px; }
      .container { width: min(calc(100% - 28px), var(--container)); }
      .section { padding: 54px 0; }
      .section-head { display: block; margin-bottom: 25px; }
      .section-copy { margin-top: 13px; }
      h1 { font-size: 34px; }
      h2 { font-size: 27px; }
      .hero-copy p { font-size: 15px; }
      .hero-actions .btn { width: 100%; }
      .fund-panel { padding: 20px; }
      .progress-row { gap: 13px; }
      .progress-ring { width: 94px; height: 94px; flex-basis: 94px; }
      .progress-ring::before { width: 74px; height: 74px; }
      .trust-grid { grid-template-columns: 1fr; }
      .trust-item, .trust-item:nth-child(2) { border-right: 0; border-bottom: 1px solid var(--line); }
      .trust-item:last-child { border-bottom: 0; }
      .time-board { grid-template-columns: 1fr; }
      .time-card:last-child { grid-column: auto; }
      .topic-main { min-height: 310px; padding: 22px; }
      .topic-main h3 { font-size: 25px; }
      .news-item { grid-template-columns: 1fr auto; gap: 8px 15px; }
      .news-date { grid-column: 1 / -1; }
      .news-item h3 { font-size: 16px; }
      .news-item p { display: none; }
      .booking { padding: 58px 0; }
      .booking-form { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .footer-row { align-items: flex-start; flex-direction: column; }
      .footer-links { gap: 12px 17px; }
    }

/* roulang page: category1 */
:root {
 --ink: #102330;
 --ink-soft: #49606d;
 --paper: #f4f7f6;
 --white: #ffffff;
 --night: #10232e;
 --night-2: #173442;
 --teal: #0e8a7a;
 --teal-dark: #08695e;
 --lime: #c5dd58;
 --coral: #f26d5b;
 --line: #d9e3e0;
 --line-dark: rgba(255,255,255,.15);
 --shadow: 0 16px 35px rgba(18,47,57,.10);
 --shadow-strong: 0 24px 50px rgba(18,47,57,.18);
 --radius: 8px;
 --side-w: 220px;
 --container: 1180px;
 --font: "PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 min-width: 320px;
 color: var(--ink);
 background: var(--paper);
 font-family: var(--font);
 font-size: 16px;
 line-height: 1.72;
 text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button,input,textarea { font: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
h1,h2,h3,p { margin-top: 0; }
h1,h2,h3 { letter-spacing: 0; line-height: 1.22; }
h1 { margin-bottom: 22px; font-size: clamp(34px,4vw,58px); }
h2 { margin-bottom: 13px; font-size: clamp(27px,3vw,40px); }
h3 { margin-bottom: 10px; font-size: 19px; }
.site-shell { min-height: 100vh; padding-left: var(--side-w); }
.sidebar {
 position: fixed;
 inset: 0 auto 0 0;
 z-index: 40;
 display: flex;
 flex-direction: column;
 width: var(--side-w);
 padding: 30px 19px 22px;
 color: var(--white);
 background: var(--night);
 border-right: 1px solid rgba(255,255,255,.08);
}
.brand {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 4px 10px 28px;
 color: var(--white);
}
.brand-mark {
 display: grid;
 width: 36px;
 height: 36px;
 place-items: center;
 color: var(--night);
 font-size: 14px;
 font-weight: 800;
 background: var(--lime);
 border-radius: 7px;
 box-shadow: 0 8px 20px rgba(197,221,88,.18);
}
.brand-name {
 max-width: 145px;
 font-size: 14px;
 font-weight: 800;
 line-height: 1.35;
}
.nav-list { display: grid; gap: 6px; padding: 0; margin: 0; list-style: none; }
.nav-link {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 12px 11px;
 color: #c6d6d8;
 font-size: 15px;
 font-weight: 700;
 border: 1px solid transparent;
 border-radius: 7px;
 transition: color .2s ease,background .2s ease,transform .2s ease;
}
.nav-link:hover { color: var(--white); background: rgba(255,255,255,.07); transform: translateX(2px); }
.nav-link.active { color: var(--night); background: var(--lime); }
.nav-icon { width: 19px; height: 19px; flex: 0 0 19px; border: 2px solid currentColor; border-radius: 4px; }
.nav-icon.circle { border-radius: 50%; }
.sidebar-bottom { margin-top: auto; padding: 22px 10px 0; border-top: 1px solid var(--line-dark); }
.side-domain { margin: 0 0 4px; color: var(--lime); font-size: 12px; font-weight: 800; }
.side-copy { margin: 0; color: #9bb1b4; font-size: 12px; line-height: 1.65; }
.mobile-bar {
 display: none;
 position: sticky;
 top: 0;
 z-index: 30;
 align-items: center;
 justify-content: space-between;
 padding: 12px 18px;
 color: var(--white);
 background: var(--night);
 box-shadow: 0 6px 20px rgba(15,35,46,.18);
}
.mobile-brand { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 800; }
.mobile-brand .brand-mark { width: 30px; height: 30px; font-size: 12px; }
.menu-toggle {
 width: 39px;
 height: 34px;
 color: var(--white);
 background: transparent;
 border: 1px solid rgba(255,255,255,.28);
 border-radius: 6px;
}
.mobile-menu {
 display: none;
 position: fixed;
 inset: 58px 12px auto 12px;
 z-index: 50;
 padding: 13px;
 color: var(--white);
 background: var(--night-2);
 border: 1px solid rgba(255,255,255,.14);
 border-radius: var(--radius);
 box-shadow: var(--shadow-strong);
}
.mobile-menu.open { display: block; }
.container { width: min(calc(100% - 72px),var(--container)); margin: 0 auto; }
.section { padding: 88px 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 35px; }
.eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 10px;
 color: var(--teal-dark);
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 1.4px;
}
.eyebrow::before { width: 25px; height: 2px; content: ""; background: var(--coral); }
.section-copy { max-width: 590px; margin-bottom: 0; color: var(--ink-soft); }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 min-height: 48px;
 padding: 11px 20px;
 font-weight: 800;
 line-height: 1;
 border: 1px solid transparent;
 border-radius: 6px;
 transition: transform .2s ease,background .2s ease,box-shadow .2s ease,color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus,.nav-link:focus,input:focus,textarea:focus { outline: 3px solid rgba(197,221,88,.55); outline-offset: 3px; }
.btn-primary { color: var(--night); background: var(--lime); box-shadow: 0 9px 18px rgba(197,221,88,.18); }
.btn-primary:hover { background: #d5eb70; box-shadow: 0 12px 22px rgba(197,221,88,.28); }
.btn-dark { color: var(--white); background: var(--night); }
.btn-dark:hover { background: var(--teal-dark); box-shadow: var(--shadow); }
.btn-outline { color: var(--night); background: transparent; border-color: var(--line); }
.btn-outline:hover { color: var(--teal-dark); border-color: var(--teal); background: #edf8f5; }
.hero {
 position: relative;
 overflow: hidden;
 min-height: 590px;
 padding: 70px 0 58px;
 color: var(--white);
 background: var(--night);
}
.hero::before {
 position: absolute;
 inset: 0;
 content: "";
 background: linear-gradient(90deg,rgba(11,31,41,.96) 0%,rgba(11,31,41,.86) 49%,rgba(11,31,41,.60) 100%),url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1800&q=85") center/cover no-repeat;
}
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 390px; gap: 58px; align-items: center; min-height: 462px; }
.hero .eyebrow { color: var(--lime); }
.hero .eyebrow::before { background: var(--coral); }
.hero-copy { max-width: 690px; }
.hero-copy p { max-width: 635px; margin-bottom: 28px; color: #d5e2df; font-size: 17px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin: 19px 0 0; color: #afc1c1; font-size: 13px; }
.report-card {
 overflow: hidden;
 color: var(--ink);
 background: var(--white);
 border-radius: var(--radius);
 box-shadow: var(--shadow-strong);
}
.report-cover {
 min-height: 132px;
 padding: 24px 26px;
 color: var(--white);
 background: var(--teal-dark);
}
.report-cover span { display: block; margin-bottom: 8px; color: var(--lime); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.report-cover strong { display: block; max-width: 260px; font-size: 23px; line-height: 1.35; }
.report-body { padding: 22px 26px 25px; }
.report-body h3 { font-size: 16px; }
.report-list { display: grid; gap: 10px; padding: 0; margin: 0 0 22px; list-style: none; }
.report-list li { display: flex; gap: 11px; color: var(--ink-soft); font-size: 14px; }
.report-list b { color: var(--teal); }
.report-form { display: grid; gap: 10px; }
.report-form input {
 width: 100%;
 min-height: 45px;
 padding: 10px 12px;
 color: var(--ink);
 background: #f8faf9;
 border: 1px solid var(--line);
 border-radius: 6px;
}
.form-tip { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.55; }
.dashboard { background: var(--white); border-bottom: 1px solid var(--line); }
.dashboard-grid { display: grid; grid-template-columns: 1.25fr repeat(3,1fr); }
.metric { min-height: 152px; padding: 29px 25px; border-right: 1px solid var(--line); }
.metric:last-child { border-right: 0; }
.metric-label { display: block; margin-bottom: 10px; color: var(--ink-soft); font-size: 13px; font-weight: 700; }
.metric strong { display: block; color: var(--teal-dark); font-size: 32px; line-height: 1.05; }
.metric p { margin: 8px 0 0; color: var(--ink-soft); font-size: 13px; }
.metric.intro strong { color: var(--ink); font-size: 18px; line-height: 1.4; }
.matrix { display: grid; grid-template-columns: .82fr 1.18fr; gap: 55px; align-items: start; }
.sticky-copy { position: sticky; top: 28px; }
.sticky-copy p { color: var(--ink-soft); }
.point-list { display: grid; gap: 17px; padding: 0; margin: 28px 0 0; list-style: none; }
.point-list li { display: grid; grid-template-columns: 33px 1fr; gap: 14px; }
.point-number { display: grid; width: 33px; height: 33px; place-items: center; color: var(--night); font-size: 13px; font-weight: 800; background: var(--lime); border-radius: 50%; }
.point-list strong { display: block; margin-bottom: 2px; font-size: 15px; }
.point-list span { color: var(--ink-soft); font-size: 14px; }
.service-grid { display: grid; gap: 14px; }
.service-card {
 padding: 25px;
 background: var(--white);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: 0 7px 18px rgba(18,47,57,.04);
 transition: transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.service-card:hover { transform: translateY(-4px); border-color: #b6d6ce; box-shadow: var(--shadow); }
.service-card.top { border-left: 4px solid var(--teal); }
.service-card h3 { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.badge { display: inline-flex; align-items: center; padding: 4px 8px; color: var(--teal-dark); font-size: 11px; font-weight: 800; background: #e4f3ee; border-radius: 4px; }
.service-card p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.compare-band { color: var(--white); background: var(--night); }
.compare-band .eyebrow { color: var(--lime); }
.compare-band .section-copy { color: #bfd0d1; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.compare-card { padding: 30px; border: 1px solid var(--line-dark); border-radius: var(--radius); }
.compare-card h3 { color: var(--lime); }
.compare-card p { margin-bottom: 20px; color: #bcd0d0; }
.check-list { display: grid; gap: 11px; padding: 0; margin: 0; list-style: none; }
.check-list li { display: flex; gap: 10px; color: #e6efed; font-size: 14px; }
.check-list li::before { content: "✓"; color: var(--lime); font-weight: 900; }
.process { background: #eaf1ef; }
.process-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; }
.process-item { position: relative; min-height: 205px; padding: 28px 25px; border-right: 1px solid #cbd9d5; }
.process-item:last-child { border-right: 0; }
.process-step { display: block; margin-bottom: 30px; color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.process-item p { margin: 0; color: var(--ink-soft); font-size: 14px; }
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; }
.faq-intro { color: var(--ink-soft); }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question {
 display: flex;
 align-items: center;
 justify-content: space-between;
 width: 100%;
 padding: 21px 0;
 color: var(--ink);
 font-weight: 800;
 text-align: left;
 background: transparent;
 border: 0;
}
.faq-symbol { color: var(--teal); font-size: 24px; font-weight: 400; transition: transform .2s ease; }
.faq-answer { display: none; padding: 0 35px 21px 0; color: var(--ink-soft); font-size: 14px; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-symbol { transform: rotate(45deg); }
.cta { padding: 76px 0; color: var(--white); background: var(--teal-dark); }
.cta-grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.cta p { max-width: 620px; margin: 0; color: #d1e6df; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 11px; }
footer { padding: 30px 0; color: #bdd0d0; background: var(--night); }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.footer-brand { margin-bottom: 5px; color: var(--white); font-size: 15px; font-weight: 800; }
.copyright { margin: 0; font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; color: #c6d6d8; font-size: 13px; font-weight: 700; }
.footer-links a:hover { color: var(--lime); }
@media (max-width:1024px) {
 :root { --side-w: 0px; }
 .sidebar { display: none; }
 .site-shell { padding-left: 0; }
 .mobile-bar { display: flex; }
 .hero-grid { grid-template-columns: 1fr 350px; gap: 32px; }
 .matrix,.faq-layout { gap: 38px; }
 .container { width: min(calc(100% - 48px),var(--container)); }
}
@media (max-width:768px) {
 .section { padding: 68px 0; }
 .hero { min-height: auto; padding: 56px 0; }
 .hero-grid,.matrix,.faq-layout { grid-template-columns: 1fr; }
 .hero-grid { gap: 35px; }
 .hero-copy p { font-size: 16px; }
 .report-card { max-width: 490px; }
 .dashboard-grid { grid-template-columns: 1fr 1fr; }
 .metric { min-height: 135px; border-bottom: 1px solid var(--line); }
 .metric:nth-child(2) { border-right: 0; }
 .metric:nth-child(3),.metric:nth-child(4) { border-bottom: 0; }
 .sticky-copy { position: static; }
 .compare-grid { grid-template-columns: 1fr; }
 .process-grid { grid-template-columns: 1fr 1fr; }
 .process-item:nth-child(2) { border-right: 0; }
 .process-item:nth-child(-n+2) { border-bottom: 1px solid #cbd9d5; }
 .section-head { display: block; }
 .section-head .section-copy { margin-top: 12px; }
}
@media (max-width:520px) {
 .container { width: min(calc(100% - 34px),var(--container)); }
 .mobile-bar { padding: 10px 14px; }
 h1 { font-size: 33px; }
 h2 { font-size: 27px; }
 .hero { padding: 48px 0; }
 .hero-actions,.cta-actions { display: grid; grid-template-columns: 1fr; }
 .hero-actions .btn,.cta-actions .btn { width: 100%; }
 .report-cover,.report-body { padding-left: 20px; padding-right: 20px; }
 .dashboard-grid { grid-template-columns: 1fr; }
 .metric,.metric:nth-child(2),.metric:nth-child(3) { border-right: 0; border-bottom: 1px solid var(--line); }
 .metric:last-child { border-bottom: 0; }
 .process-grid { grid-template-columns: 1fr; }
 .process-item,.process-item:nth-child(2) { min-height: auto; border-right: 0; border-bottom: 1px solid #cbd9d5; }
 .process-item:last-child { border-bottom: 0; }
 .compare-card { padding: 24px 20px; }
 .cta-grid,.footer-row { align-items: flex-start; flex-direction: column; }
 .footer-links { gap: 14px; }
}