/* roulang page: index */
:root {
      --bg: #0b0d14;
      --bg-soft: #121622;
      --bg-card: rgba(255,255,255,.065);
      --bg-card-strong: rgba(255,255,255,.105);
      --text: #f7f2ea;
      --text-muted: #bdb4a6;
      --text-soft: #8f8799;
      --primary: #ff6b3d;
      --primary-dark: #e04f27;
      --secondary: #9f7aea;
      --accent: #ffd166;
      --green: #41d39e;
      --border: rgba(255,255,255,.12);
      --border-strong: rgba(255,255,255,.2);
      --shadow: 0 24px 70px rgba(0,0,0,.38);
      --shadow-soft: 0 14px 36px rgba(0,0,0,.24);
      --radius-sm: 12px;
      --radius: 20px;
      --radius-lg: 30px;
      --container: 1180px;
      --nav-height: 92px;
      --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      font-family: var(--font);
      color: var(--text);
      background:
        radial-gradient(circle at 16% 8%, rgba(255,107,61,.22), transparent 30%),
        radial-gradient(circle at 82% 4%, rgba(159,122,234,.20), transparent 28%),
        linear-gradient(180deg, #090b12 0%, #111522 44%, #0b0d14 100%);
      line-height: 1.72;
      letter-spacing: .01em;
      padding-bottom: 84px;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, opacity .2s ease;
    }
    a:hover, a:focus { color: var(--accent); }
    img { max-width: 100%; height: auto; display: block; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    :focus-visible {
      outline: 3px solid rgba(255,209,102,.58);
      outline-offset: 3px;
      border-radius: 10px;
    }

    .site-shell {
      overflow: hidden;
      position: relative;
    }
    .site-shell::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 72%);
      z-index: 0;
    }
    .container {
      width: min(100% - 40px, var(--container));
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .mag-header {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(11,13,20,.82);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 12px 36px rgba(0,0,0,.16);
    }
    .masthead {
      min-height: var(--nav-height);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 24px;
      padding: 18px 0 14px;
    }
    .brand-wrap {
      display: flex;
      align-items: center;
      min-width: 0;
      gap: 18px;
    }
    .brand-mark {
      width: 46px;
      height: 46px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      color: #160b07;
      background: linear-gradient(135deg, var(--accent), var(--primary));
      box-shadow: 0 12px 24px rgba(255,107,61,.28);
      flex: 0 0 auto;
      font-weight: 900;
    }
    .brand-text {
      display: flex;
      align-items: baseline;
      gap: 18px;
      min-width: 0;
    }
    .brand-name {
      font-size: clamp(1.55rem, 3vw, 2.65rem);
      font-weight: 900;
      line-height: 1;
      letter-spacing: -.05em;
      white-space: nowrap;
    }
    .brand-line {
      width: 1px;
      height: 40px;
      background: var(--border-strong);
    }
    .brand-note {
      color: var(--text-muted);
      font-size: .92rem;
      white-space: nowrap;
    }
    .nav-row {
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: rgba(255,255,255,.055);
    }
    .desktop-nav a {
      padding: 9px 16px;
      border-radius: 999px;
      color: var(--text-muted);
      font-weight: 700;
      font-size: .95rem;
    }
    .desktop-nav a.active,
    .desktop-nav a:hover {
      color: var(--text);
      background: rgba(255,255,255,.105);
    }
    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 12px 18px;
      border-radius: 999px;
      background: var(--text);
      color: #121018;
      font-weight: 900;
      box-shadow: 0 14px 30px rgba(255,242,234,.12);
    }
    .nav-cta:hover {
      color: #121018;
      transform: translateY(-2px);
      background: var(--accent);
    }
    .menu-toggle {
      display: none;
      width: 44px;
      height: 44px;
      border: 1px solid var(--border);
      border-radius: 14px;
      color: var(--text);
      background: rgba(255,255,255,.06);
    }
    .mobile-panel {
      display: none;
      border-top: 1px solid var(--border);
      padding: 0 0 16px;
    }
    .mobile-panel.is-open { display: block; }
    .mobile-panel a {
      display: block;
      padding: 13px 16px;
      margin-top: 8px;
      border-radius: 14px;
      background: rgba(255,255,255,.055);
      color: var(--text);
      font-weight: 800;
    }

    .section {
      padding: 84px 0;
      position: relative;
      z-index: 1;
    }
    .section-tight { padding: 56px 0; }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--accent);
      font-size: .88rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
      margin-bottom: 12px;
    }
    .section-title {
      margin: 0;
      font-size: clamp(2rem, 4vw, 3.35rem);
      line-height: 1.12;
      letter-spacing: -.055em;
      font-weight: 950;
    }
    .section-desc {
      max-width: 760px;
      margin: 16px 0 0;
      color: var(--text-muted);
      font-size: 1.08rem;
    }

    .hero {
      padding: 52px 0 78px;
    }
    .hero-stage {
      min-height: 650px;
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(10,12,20,.80), rgba(10,12,20,.38)),
        radial-gradient(circle at 82% 24%, rgba(255,209,102,.22), transparent 28%),
        radial-gradient(circle at 18% 72%, rgba(255,107,61,.18), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
      box-shadow: var(--shadow);
      position: relative;
      display: grid;
      align-items: stretch;
    }
    .hero-stage::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(120deg, transparent 0 48%, rgba(255,255,255,.08) 48% 49%, transparent 49%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 112px);
      opacity: .7;
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(330px, .72fr);
      gap: 28px;
      padding: clamp(26px, 5vw, 58px);
      align-items: end;
    }
    .hero-copy {
      align-self: center;
      max-width: 760px;
    }
    .age-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 999px;
      color: #ffe8d8;
      background: rgba(255,107,61,.14);
      border: 1px solid rgba(255,107,61,.35);
      font-weight: 900;
      margin-bottom: 20px;
    }
    h1.hero-title {
      margin: 0;
      max-width: 880px;
      font-size: clamp(2.65rem, 6vw, 5.95rem);
      line-height: .98;
      letter-spacing: -.078em;
      font-weight: 1000;
      text-wrap: balance;
    }
    .hero-lead {
      margin: 24px 0 0;
      color: #ddd4ca;
      font-size: clamp(1.06rem, 1.8vw, 1.28rem);
      max-width: 730px;
    }
    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 30px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 14px 20px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-weight: 950;
      line-height: 1;
      transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease;
    }
    .btn-primary {
      color: #1c0e08;
      background: linear-gradient(135deg, var(--accent), var(--primary));
      box-shadow: 0 18px 42px rgba(255,107,61,.26);
    }
    .btn-primary:hover {
      color: #1c0e08;
      transform: translateY(-3px);
      box-shadow: 0 24px 54px rgba(255,107,61,.34);
    }
    .btn-ghost {
      color: var(--text);
      background: rgba(255,255,255,.08);
      border-color: var(--border-strong);
    }
    .btn-ghost:hover {
      color: var(--text);
      background: rgba(255,255,255,.14);
      transform: translateY(-2px);
    }
    .btn-dark {
      color: var(--text);
      background: #171b29;
      border-color: var(--border);
    }
    .btn-dark:hover {
      color: var(--accent);
      border-color: rgba(255,209,102,.36);
      transform: translateY(-2px);
    }

    .hero-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 28px;
      max-width: 760px;
    }
    .point {
      padding: 16px;
      border-radius: 18px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.06);
    }
    .point strong {
      display: block;
      font-size: 1.32rem;
      color: var(--text);
      line-height: 1.1;
    }
    .point span {
      display: block;
      color: var(--text-muted);
      font-size: .9rem;
      margin-top: 5px;
    }
    .booking-card {
      align-self: center;
      border-radius: 28px;
      padding: 22px;
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(8,10,17,.72);
      backdrop-filter: blur(20px);
      box-shadow: var(--shadow-soft);
    }
    .booking-card h2 {
      margin: 0;
      font-size: 1.45rem;
      font-weight: 950;
      letter-spacing: -.03em;
    }
    .booking-card p {
      color: var(--text-muted);
      margin: 8px 0 18px;
      font-size: .96rem;
    }
    .slot-list {
      display: grid;
      gap: 10px;
      margin: 0 0 18px;
      padding: 0;
      list-style: none;
    }
    .slot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.055);
    }
    .slot:hover { background: rgba(255,255,255,.09); border-color: rgba(255,209,102,.28); }
    .slot-time {
      font-weight: 950;
      color: var(--text);
    }
    .slot-note {
      color: var(--text-muted);
      font-size: .88rem;
    }
    .slot-status {
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(65,211,158,.12);
      color: #8ef0c7;
      font-weight: 900;
      font-size: .78rem;
      white-space: nowrap;
    }
    .mini-form {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
    }
    .mini-form input {
      height: 50px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.07);
      color: var(--text);
      border-radius: 999px;
      padding: 0 16px;
      box-shadow: none;
      margin: 0;
    }
    .mini-form input::placeholder { color: #8e8797; }
    .mini-form input:focus {
      border-color: rgba(255,209,102,.48);
      background: rgba(255,255,255,.095);
      box-shadow: 0 0 0 4px rgba(255,209,102,.10);
    }
    .form-tip {
      margin-top: 10px;
      color: var(--text-soft);
      font-size: .84rem;
    }

    .entry-grid {
      display: grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      grid-auto-rows: minmax(178px, auto);
      gap: 16px;
      margin-top: 30px;
    }
    .entry-card {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      padding: 24px;
      border: 1px solid var(--border);
      background: var(--bg-card);
      box-shadow: 0 10px 32px rgba(0,0,0,.14);
      min-height: 178px;
    }
    .entry-card:hover {
      transform: translateY(-4px);
      border-color: rgba(255,209,102,.34);
      background: var(--bg-card-strong);
    }
    .entry-card.large {
      grid-row: span 2;
      background:
        radial-gradient(circle at 85% 15%, rgba(255,107,61,.25), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
    }
    .entry-icon {
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 16px;
      background: rgba(255,209,102,.14);
      color: var(--accent);
      margin-bottom: 20px;
      font-size: 1.1rem;
    }
    .entry-card h3 {
      margin: 0;
      font-weight: 950;
      font-size: 1.25rem;
      letter-spacing: -.02em;
    }
    .entry-card p {
      margin: 10px 0 0;
      color: var(--text-muted);
    }
    .entry-card .arrow {
      position: absolute;
      right: 22px;
      bottom: 20px;
      color: rgba(255,255,255,.5);
    }

    .scenario-wrap {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 26px;
      align-items: stretch;
      margin-top: 30px;
    }
    .scenario-panel {
      border-radius: 28px;
      border: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.045));
      padding: 26px;
      box-shadow: var(--shadow-soft);
    }
    .scenario-panel h3 {
      margin: 0 0 12px;
      font-size: 1.45rem;
      font-weight: 950;
    }
    .scenario-panel p {
      margin: 0;
      color: var(--text-muted);
    }
    .step-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 14px;
    }
    .step-item {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 14px;
      padding: 18px;
      border-radius: 20px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,.055);
    }
    .step-no {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(255,107,61,.16);
      color: var(--primary);
      font-weight: 1000;
    }
    .step-item strong {
      display: block;
      color: var(--text);
      font-size: 1.05rem;
      margin-bottom: 5px;
    }
    .step-item span {
      color: var(--text-muted);
      font-size: .96rem;
    }

    .timeline {
      margin-top: 34px;
      display: grid;
      gap: 14px;
    }
    .timeline-item {
      display: grid;
      grid-template-columns: 128px 1fr auto;
      align-items: center;
      gap: 18px;
      padding: 18px 20px;
      border: 1px solid var(--border);
      border-radius: 22px;
      background: rgba(255,255,255,.055);
    }
    .timeline-item:hover {
      border-color: rgba(255,209,102,.34);
      background: rgba(255,255,255,.085);
    }
    .timeline-time {
      color: var(--accent);
      font-weight: 1000;
      font-size: 1.02rem;
      white-space: nowrap;
    }
    .timeline-main strong {
      display: block;
      font-size: 1.12rem;
      color: var(--text);
      margin-bottom: 3px;
    }
    .timeline-main span {
      color: var(--text-muted);
      font-size: .95rem;
    }
    .timeline-action {
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 900;
      font-size: .86rem;
      white-space: nowrap;
    }
    .timeline-action:hover {
      color: #1c0e08;
      background: var(--accent);
      border-color: var(--accent);
    }

    .milestone-band {
      margin-top: 32px;
      border-radius: 30px;
      border: 1px solid var(--border);
      background:
        radial-gradient(circle at 10% 20%, rgba(159,122,234,.18), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.095), rgba(255,255,255,.035));
      padding: 28px;
      box-shadow: var(--shadow-soft);
    }
    .metric-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .metric {
      padding: 22px;
      border-radius: 22px;
      background: rgba(0,0,0,.16);
      border: 1px solid var(--border);
    }
    .metric b {
      display: block;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      line-height: 1;
      letter-spacing: -.06em;
      color: var(--text);
    }
    .metric span {
      display: block;
      color: var(--text-muted);
      margin-top: 10px;
      font-weight: 700;
    }

    .news-layout {
      margin-top: 30px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) 360px;
      gap: 22px;
      align-items: start;
    }
    .news-list, .recommend-rail, .guarantee-panel, .app-panel, .faq-card {
      border: 1px solid var(--border);
      background: rgba(255,255,255,.055);
      border-radius: 26px;
      box-shadow: var(--shadow-soft);
    }
    .news-list {
      padding: 8px;
    }
    .news-item {
      display: grid;
      grid-template-columns: 108px 1fr;
      gap: 18px;
      padding: 18px;
      border-radius: 20px;
      align-items: start;
    }
    .news-item + .news-item { border-top: 1px solid rgba(255,255,255,.08); }
    .news-item:hover {
      background: rgba(255,255,255,.065);
    }
    .news-date {
      display: grid;
      place-items: center;
      min-height: 76px;
      border-radius: 18px;
      background: rgba(255,209,102,.12);
      color: var(--accent);
      font-weight: 950;
      text-align: center;
      line-height: 1.25;
      font-size: .92rem;
    }
    .news-content a {
      display: inline;
      font-size: 1.16rem;
      font-weight: 950;
      line-height: 1.35;
      color: var(--text);
    }
    .news-content a:hover { color: var(--accent); }
    .news-content p {
      margin: 8px 0 0;
      color: var(--text-muted);
      font-size: .96rem;
    }
    .recommend-rail {
      padding: 22px;
      position: sticky;
      top: 118px;
    }
    .recommend-rail h3 {
      margin: 0 0 14px;
      font-size: 1.22rem;
      font-weight: 950;
    }
    .tag-cloud {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-bottom: 18px;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text-muted);
      background: rgba(255,255,255,.04);
      font-size: .86rem;
      font-weight: 800;
    }
    .tag:hover {
      color: var(--text);
      border-color: rgba(255,209,102,.34);
      background: rgba(255,209,102,.08);
    }
    .mini-rec {
      display: block;
      padding: 14px;
      border-radius: 16px;
      background: rgba(0,0,0,.15);
      border: 1px solid rgba(255,255,255,.08);
      margin-top: 10px;
    }
    .mini-rec:hover {
      transform: translateX(3px);
      border-color: rgba(255,209,102,.28);
      color: var(--text);
    }
    .mini-rec strong { display: block; }
    .mini-rec span { display: block; color: var(--text-muted); font-size: .9rem; margin-top: 4px; }

    .guarantee-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 30px;
    }
    .guarantee-panel {
      padding: 24px;
      min-height: 236px;
    }
    .guarantee-panel .icon {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      display: grid;
      place-items: center;
      background: rgba(65,211,158,.13);
      color: var(--green);
      font-size: 1.18rem;
      margin-bottom: 18px;
    }
    .guarantee-panel h3 {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 950;
    }
    .guarantee-panel p {
      margin: 10px 0 0;
      color: var(--text-muted);
    }

    .app-panel {
      padding: clamp(24px, 4vw, 38px);
      background:
        radial-gradient(circle at 86% 18%, rgba(255,107,61,.24), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
      display: grid;
      grid-template-columns: 1fr 390px;
      gap: 28px;
      align-items: center;
      overflow: hidden;
    }
    .app-panel h2 {
      margin: 0;
      font-size: clamp(2rem, 4vw, 3.25rem);
      font-weight: 1000;
      line-height: 1.08;
      letter-spacing: -.06em;
    }
    .app-panel p {
      color: var(--text-muted);
      margin: 16px 0 0;
      max-width: 650px;
      font-size: 1.06rem;
    }
    .app-actions {
      margin-top: 24px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }
    .app-visual {
      border-radius: 30px;
      padding: 22px;
      background: rgba(0,0,0,.23);
      border: 1px solid var(--border);
    }
    .sync-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.08);
      margin-bottom: 12px;
    }
    .sync-card:last-child { margin-bottom: 0; }
    .sync-dot {
      width: 44px;
      height: 44px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      background: linear-gradient(135deg, rgba(255,209,102,.22), rgba(255,107,61,.18));
      color: var(--accent);
      flex: 0 0 auto;
    }
    .sync-card strong { display: block; }
    .sync-card span { color: var(--text-muted); font-size: .9rem; }

    .faq-layout {
      margin-top: 30px;
      display: grid;
      grid-template-columns: .75fr 1.25fr;
      gap: 20px;
      align-items: start;
    }
    .faq-card {
      padding: 24px;
    }
    .faq-card h3 {
      margin: 0;
      font-size: 1.35rem;
      font-weight: 950;
    }
    .faq-card p {
      margin: 12px 0 0;
      color: var(--text-muted);
    }
    .accordion {
      background: transparent;
      margin: 0;
    }
    .accordion-item {
      overflow: hidden;
      border: 1px solid var(--border) !important;
      border-radius: 18px;
      background: rgba(255,255,255,.055);
      margin-bottom: 12px;
    }
    .accordion-title {
      border: 0 !important;
      color: var(--text) !important;
      background: transparent !important;
      font-weight: 950;
      font-size: 1.02rem;
      padding: 18px 46px 18px 18px;
    }
    .accordion-title:hover, .accordion-title:focus {
      color: var(--accent) !important;
      background: rgba(255,255,255,.05) !important;
    }
    .accordion-content {
      border: 0 !important;
      background: rgba(0,0,0,.12) !important;
      color: var(--text-muted);
      padding: 0 18px 18px;
    }

    .cta-strip {
      border-radius: 28px;
      padding: 26px;
      border: 1px solid rgba(255,209,102,.25);
      background:
        linear-gradient(135deg, rgba(255,209,102,.16), rgba(255,107,61,.12)),
        rgba(255,255,255,.055);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 20px;
      align-items: center;
      box-shadow: var(--shadow-soft);
    }
    .cta-strip h2 {
      margin: 0;
      font-size: clamp(1.55rem, 3vw, 2.45rem);
      font-weight: 1000;
      letter-spacing: -.045em;
    }
    .cta-strip p {
      margin: 8px 0 0;
      color: var(--text-muted);
    }

    .site-footer {
      position: relative;
      z-index: 1;
      border-top: 1px solid var(--border);
      background: rgba(7,8,13,.72);
      padding: 46px 0 34px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 32px;
      align-items: start;
    }
    .footer-brand {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 14px;
    }
    .footer-name {
      font-size: 1.45rem;
      font-weight: 1000;
      letter-spacing: -.04em;
    }
    .footer-text {
      max-width: 720px;
      color: var(--text-muted);
      margin: 0;
    }
    .footer-links {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .footer-links a {
      padding: 9px 12px;
      border: 1px solid var(--border);
      border-radius: 999px;
      color: var(--text-muted);
      font-weight: 800;
    }
    .footer-links a:hover {
      color: var(--text);
      border-color: rgba(255,209,102,.28);
      background: rgba(255,255,255,.06);
    }
    .copyright {
      margin-top: 26px;
      padding-top: 20px;
      border-top: 1px solid rgba(255,255,255,.08);
      color: var(--text-soft);
      font-size: .9rem;
      display: flex;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .fixed-conversion {
      position: fixed;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      z-index: 40;
      width: min(100% - 28px, 940px);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 14px;
      align-items: center;
      padding: 12px 14px 12px 18px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.16);
      background: rgba(13,15,24,.86);
      backdrop-filter: blur(18px);
      box-shadow: 0 18px 48px rgba(0,0,0,.34);
    }
    .fixed-conversion strong {
      display: block;
      line-height: 1.2;
      font-size: .98rem;
    }
    .fixed-conversion span {
      color: var(--text-muted);
      font-size: .86rem;
    }

    @media (max-width: 1024px) {
      :root { --nav-height: 78px; }
      .brand-note, .brand-line, .desktop-nav, .nav-cta { display: none; }
      .menu-toggle { display: inline-grid; place-items: center; }
      .masthead { grid-template-columns: 1fr auto; }
      .hero-content { grid-template-columns: 1fr; align-items: start; }
      .booking-card { max-width: 680px; width: 100%; }
      .entry-grid { grid-template-columns: 1fr 1fr; }
      .entry-card.large { grid-column: 1 / -1; grid-row: auto; }
      .scenario-wrap, .news-layout, .app-panel, .faq-layout { grid-template-columns: 1fr; }
      .recommend-rail { position: static; }
      .metric-grid, .guarantee-grid { grid-template-columns: repeat(2, 1fr); }
      .timeline-item { grid-template-columns: 110px 1fr; }
      .timeline-action { grid-column: 2; justify-self: start; }
    }

    @media (max-width: 768px) {
      body { padding-bottom: 104px; }
      .container { width: min(100% - 28px, var(--container)); }
      .section { padding: 62px 0; }
      .hero { padding: 28px 0 58px; }
      .hero-stage { min-height: auto; border-radius: 24px; }
      .hero-content { padding: 24px; }
      h1.hero-title { font-size: clamp(2.35rem, 12vw, 4rem); }
      .hero-points { grid-template-columns: 1fr; }
      .mini-form { grid-template-columns: 1fr; }
      .entry-grid, .metric-grid, .guarantee-grid { grid-template-columns: 1fr; }
      .news-item { grid-template-columns: 1fr; }
      .news-date { min-height: auto; justify-content: start; padding: 12px; place-items: start; }
      .timeline-item { grid-template-columns: 1fr; gap: 8px; }
      .timeline-action { grid-column: auto; }
      .cta-strip, .footer-grid, .fixed-conversion { grid-template-columns: 1fr; border-radius: 24px; }
      .fixed-conversion .btn { width: 100%; }
      .footer-links { justify-content: flex-start; }
    }

    @media (max-width: 520px) {
      .brand-mark { width: 40px; height: 40px; border-radius: 14px; }
      .brand-name { font-size: 1.35rem; white-space: normal; }
      .masthead { gap: 12px; padding: 14px 0; }
      .hero-actions, .app-actions { flex-direction: column; }
      .btn { width: 100%; }
      .section-title { font-size: 2rem; }
      .booking-card, .entry-card, .scenario-panel, .milestone-band, .app-panel, .faq-card { border-radius: 22px; }
    }