/* roulang page: index */
:root {
      --ink: #eaf2ff;
      --muted: #9eabc0;
      --dim: #68758c;
      --night: #07101f;
      --night-deep: #040913;
      --surface: #0d192c;
      --surface-raised: #12213a;
      --line: rgba(180, 205, 238, .15);
      --line-strong: rgba(180, 205, 238, .28);
      --cyan: #4be2ed;
      --cyan-deep: #1ebecb;
      --violet: #8c7cff;
      --amber: #ffc45e;
      --green: #60d394;
      --danger: #ff7791;
      --radius-sm: 12px;
      --radius: 20px;
      --radius-lg: 28px;
      --shadow: 0 18px 46px rgba(0, 0, 0, .28);
      --shadow-hover: 0 24px 54px rgba(0, 0, 0, .42);
      --container: 1180px;
      --ease: 180ms ease;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background:
        radial-gradient(circle at 82% 0%, rgba(76, 226, 237, .10), transparent 26rem),
        radial-gradient(circle at 0% 28%, rgba(140, 124, 255, .09), transparent 29rem),
        var(--night-deep);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.7;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; transition: color var(--ease), background var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease); }
    img { display: block; width: 100%; max-width: 100%; object-fit: cover; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    ::selection { background: var(--cyan); color: var(--night-deep); }
    :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

    .site-shell { overflow: hidden; }
    .container { width: min(calc(100% - 40px), var(--container)); margin: 0 auto; }
    .section { position: relative; padding: 90px 0; }
    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
      color: var(--cyan);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
    }
    .section-label::before {
      width: 26px;
      height: 1px;
      content: "";
      background: currentColor;
    }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 35px;
    }
    .section-title {
      max-width: 700px;
      margin: 0;
      color: #f6f9ff;
      font-size: clamp(27px, 3.5vw, 42px);
      line-height: 1.22;
      letter-spacing: 0;
    }
    .section-desc {
      max-width: 430px;
      margin: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .site-header {
      position: absolute;
      z-index: 20;
      top: 20px;
      right: 0;
      left: 0;
    }
    .nav-capsule {
      display: flex;
      align-items: center;
      min-height: 68px;
      padding: 8px 10px 8px 20px;
      border: 1px solid rgba(225, 241, 255, .18);
      border-radius: 999px;
      background: rgba(6, 15, 30, .72);
      box-shadow: 0 12px 34px rgba(0, 0, 0, .2);
      backdrop-filter: blur(18px);
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      margin-right: 32px;
      font-size: 17px;
      font-weight: 800;
      letter-spacing: 0;
      white-space: nowrap;
    }
    .brand-mark {
      display: grid;
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      place-items: center;
      color: var(--night-deep);
      border-radius: 10px;
      background: var(--cyan);
      font-size: 15px;
    }
    .brand-name { overflow: hidden; text-overflow: ellipsis; }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .nav-links a {
      display: inline-flex;
      align-items: center;
      min-height: 40px;
      padding: 0 17px;
      color: var(--muted);
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
    }
    .nav-links a:hover,
    .nav-links a.active { color: var(--ink); background: rgba(255,255,255,.09); }
    .nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
    .nav-search {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 168px;
      padding: 0 13px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: rgba(255,255,255,.07);
      color: var(--dim);
      transition: border-color var(--ease), background var(--ease);
    }
    .nav-search:focus-within { border-color: rgba(75,226,237,.6); background: rgba(255,255,255,.1); }
    .nav-search input {
      width: 100%;
      min-width: 0;
      height: 39px;
      margin: 0;
      padding: 0;
      color: var(--ink);
      border: 0;
      outline: 0;
      background: transparent;
      box-shadow: none;
      font-size: 13px;
    }
    .nav-search input::placeholder { color: #8290a5; }
    .nav-cta, .button-primary, .button-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      min-height: 42px;
      border: 1px solid transparent;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 800;
    }
    .nav-cta {
      padding: 0 17px;
      color: var(--night-deep);
      background: var(--cyan);
    }
    .nav-cta:hover, .button-primary:hover { color: var(--night-deep); background: #8af5fa; box-shadow: 0 8px 24px rgba(75,226,237,.24); transform: translateY(-1px); }
    .mobile-toggle {
      display: none;
      width: 42px;
      height: 42px;
      padding: 0;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 50%;
      background: rgba(255,255,255,.06);
    }

    .hero {
      position: relative;
      min-height: 780px;
      padding: 178px 0 80px;
      isolation: isolate;
    }
    .hero::after {
      position: absolute;
      z-index: -1;
      right: -90px;
      bottom: 40px;
      width: min(54vw, 720px);
      height: 440px;
      content: "";
      border: 1px solid rgba(75,226,237,.11);
      border-radius: 50%;
      transform: rotate(-18deg);
      box-shadow: inset 0 0 90px rgba(75,226,237,.04);
    }
    .hero-grid { align-items: center; min-height: 500px; }
    .hero-content { padding-right: 28px; }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 22px;
      padding: 7px 12px;
      color: #c4faff;
      border: 1px solid rgba(75,226,237,.28);
      border-radius: 999px;
      background: rgba(75,226,237,.08);
      font-size: 13px;
      font-weight: 700;
    }
    .signal { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(96,211,148,.12); }
    .hero h1 {
      max-width: 680px;
      margin: 0;
      color: #f9fbff;
      font-size: clamp(37px, 5.4vw, 66px);
      font-weight: 850;
      line-height: 1.12;
      letter-spacing: 0;
    }
    .hero h1 em { color: var(--cyan); font-style: normal; }
    .hero-text {
      max-width: 590px;
      margin: 25px 0 30px;
      color: #b2bfd1;
      font-size: 17px;
      line-height: 1.85;
    }
    .hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
    .button-primary {
      min-height: 50px;
      padding: 0 22px;
      color: var(--night-deep);
      background: var(--cyan);
    }
    .button-secondary {
      min-height: 50px;
      padding: 0 22px;
      color: var(--ink);
      border-color: var(--line-strong);
      background: rgba(255,255,255,.045);
    }
    .button-secondary:hover { color: var(--cyan); border-color: rgba(75,226,237,.54); background: rgba(75,226,237,.09); transform: translateY(-1px); }
    .hero-mini {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      margin-top: 37px;
      color: var(--muted);
      font-size: 13px;
    }
    .hero-mini span { display: inline-flex; align-items: center; gap: 8px; }
    .hero-mini i { color: var(--cyan); }

    .screen-panel {
      position: relative;
      max-width: 530px;
      margin-left: auto;
      padding: 13px;
      border: 1px solid rgba(191,218,246,.2);
      border-radius: var(--radius-lg);
      background: rgba(11, 25, 45, .72);
      box-shadow: var(--shadow);
      transform: rotate(2deg);
    }
    .screen-panel::before {
      position: absolute;
      z-index: -1;
      top: 42px;
      right: -27px;
      bottom: -31px;
      left: 35px;
      content: "";
      border-radius: 26px;
      background: rgba(140,124,255,.15);
      filter: blur(32px);
    }
    .screen-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 38px;
      padding: 0 5px 10px;
      color: var(--muted);
      font-size: 12px;
    }
    .dots { display: flex; gap: 5px; }
    .dots b { display: block; width: 7px; height: 7px; border-radius: 50%; background: #60708a; }
    .dots b:first-child { background: var(--danger); }
    .dots b:nth-child(2) { background: var(--amber); }
    .dots b:last-child { background: var(--green); }
    .featured-art {
      position: relative;
      min-height: 355px;
      overflow: hidden;
      border-radius: 17px;
      background: #13233d;
    }
    .featured-art img { height: 355px; opacity: .78; }
    .featured-art::after {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(0deg, rgba(2,8,19,.94) 0%, rgba(2,8,19,.04) 68%);
    }
    .watch-ring {
      position: absolute;
      z-index: 2;
      top: 50%;
      left: 50%;
      display: grid;
      width: 68px;
      height: 68px;
      place-items: center;
      color: var(--night-deep);
      border: 7px solid rgba(255,255,255,.2);
      border-radius: 50%;
      background: var(--cyan);
      transform: translate(-50%, -50%);
      font-size: 20px;
    }
    .featured-info { position: absolute; z-index: 2; right: 24px; bottom: 22px; left: 24px; }
    .featured-info small { color: var(--cyan); font-weight: 800; }
    .featured-info h2 { margin: 5px 0 0; color: #fff; font-size: 24px; line-height: 1.3; }
    .featured-info p { margin: 6px 0 0; color: #b7c5d8; font-size: 13px; }
    .status-chip {
      position: absolute;
      z-index: 3;
      top: 28px;
      right: -17px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 13px;
      color: var(--ink);
      border: 1px solid var(--line-strong);
      border-radius: 12px;
      background: rgba(8,18,35,.90);
      box-shadow: var(--shadow);
      font-size: 12px;
      font-weight: 700;
      transform: rotate(-2deg);
    }
    .status-chip i { color: var(--green); }

    .metrics-band { position: relative; z-index: 3; margin-top: -42px; }
    .metrics {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(14,27,48,.87);
      box-shadow: var(--shadow);
      backdrop-filter: blur(12px);
    }
    .metric { position: relative; padding: 22px 27px; }
    .metric + .metric::before { position: absolute; top: 23px; bottom: 23px; left: 0; width: 1px; content: ""; background: var(--line); }
    .metric-value { display: block; color: #fff; font-size: 24px; font-weight: 850; line-height: 1.2; }
    .metric-label { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; }

    .discovery { background: rgba(10,20,37,.42); }
    .category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .category-card {
      position: relative;
      display: flex;
      min-height: 148px;
      flex-direction: column;
      justify-content: end;
      overflow: hidden;
      padding: 20px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--surface);
    }
    .category-card::before {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(140deg, rgba(75,226,237,.16), transparent 54%);
      opacity: 0;
      transition: opacity var(--ease);
    }
    .category-card:hover { border-color: rgba(75,226,237,.42); box-shadow: 0 13px 30px rgba(0,0,0,.22); transform: translateY(-4px); }
    .category-card:hover::before { opacity: 1; }
    .category-icon {
      position: absolute;
      top: 19px;
      left: 20px;
      display: grid;
      width: 40px;
      height: 40px;
      place-items: center;
      color: var(--cyan);
      border: 1px solid rgba(75,226,237,.25);
      border-radius: 12px;
      background: rgba(75,226,237,.08);
      font-size: 17px;
    }
    .category-card h3, .category-card p { position: relative; margin: 0; }
    .category-card h3 { color: #f4f8ff; font-size: 19px; }
    .category-card p { margin-top: 4px; color: var(--muted); font-size: 13px; }

    .release-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 24px; }
    .spotlight-card {
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      min-height: 355px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--surface);
    }
    .spotlight-image { position: relative; min-height: 100%; overflow: hidden; }
    .spotlight-image img { height: 100%; min-height: 355px; transition: transform 500ms ease; }
    .spotlight-card:hover .spotlight-image img { transform: scale(1.05); }
    .spotlight-image::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent 44%, var(--surface)); }
    .spotlight-copy { display: flex; flex-direction: column; justify-content: center; padding: 35px 34px 35px 5px; }
    .tag-row { display: flex; flex-wrap: wrap; gap: 7px; }
    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 25px;
      padding: 0 9px;
      color: #bfc9db;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255,255,255,.045);
      font-size: 11px;
      font-weight: 700;
    }
    .tag.hot { color: #ffdfa5; border-color: rgba(255,196,94,.32); background: rgba(255,196,94,.1); }
    .spotlight-copy h3 { margin: 15px 0 10px; color: #fff; font-size: 29px; line-height: 1.23; }
    .spotlight-copy p { margin: 0; color: var(--muted); font-size: 14px; }
    .meta-line { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 17px; color: #c6d1e1; font-size: 12px; }
    .meta-line i { margin-right: 5px; color: var(--cyan); }
    .text-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin-top: 22px; color: var(--cyan); font-size: 14px; font-weight: 800; }
    .text-link:hover { color: #b8fcff; gap: 12px; }

    .watchlist {
      padding: 10px 22px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(13,25,44,.66);
    }
    .watchlist-title { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; color: #fff; font-size: 17px; font-weight: 800; }
    .watchlist-title span { color: var(--cyan); font-size: 12px; }
    .watch-item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
    .watch-rank { color: var(--cyan); font-size: 20px; font-weight: 850; font-style: italic; }
    .watch-item:nth-child(3) .watch-rank { color: var(--violet); }
    .watch-item:nth-child(4) .watch-rank { color: var(--amber); }
    .watch-info strong { display: block; color: #edf4ff; font-size: 14px; line-height: 1.35; }
    .watch-info small { display: block; margin-top: 4px; color: var(--dim); font-size: 12px; }
    .watch-score { color: var(--amber); font-size: 13px; font-weight: 800; }

    .feature-band { padding: 32px 0; }
    .feature-surface {
      display: grid;
      grid-template-columns: .95fr 1.4fr;
      gap: 50px;
      align-items: center;
      padding: 58px;
      border: 1px solid rgba(140,124,255,.25);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(110deg, rgba(140,124,255,.16), transparent 46%),
        #101a35;
      box-shadow: var(--shadow);
    }
    .feature-copy h2 { margin: 0; color: #fff; font-size: clamp(27px, 3vw, 39px); line-height: 1.24; }
    .feature-copy p { margin: 17px 0 25px; color: #b9c5d8; font-size: 15px; }
    .feature-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
    .feature-list li { display: flex; gap: 12px; align-items: start; color: #dce6f5; font-size: 14px; }
    .feature-list i { margin-top: 5px; color: var(--cyan); }
    .device-board { position: relative; min-height: 340px; }
    .device-main {
      position: absolute;
      top: 17px;
      right: 18px;
      left: 52px;
      overflow: hidden;
      border: 8px solid #1c2945;
      border-radius: 16px;
      background: #0a1223;
      box-shadow: 0 25px 44px rgba(0,0,0,.33);
    }
    .device-main img { height: 238px; opacity: .75; }
    .device-overlay { position: absolute; inset: 0; padding: 24px; background: linear-gradient(0deg, rgba(4,10,22,.82), rgba(4,10,22,.08)); }
    .device-overlay span { color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
    .device-overlay h3 { max-width: 265px; margin: 102px 0 0; color: #fff; font-size: 20px; line-height: 1.35; }
    .device-bottom {
      position: absolute;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      gap: 13px;
      width: 215px;
      padding: 13px;
      border: 1px solid var(--line-strong);
      border-radius: 14px;
      background: rgba(8,17,33,.94);
      box-shadow: var(--shadow);
    }
    .device-bottom i { display: grid; width: 32px; height: 32px; place-items: center; color: var(--cyan); border-radius: 9px; background: rgba(75,226,237,.12); }
    .device-bottom strong { display: block; font-size: 12px; }
    .device-bottom small { color: var(--muted); font-size: 11px; }

    .guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
    .guide-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
    .guide-card:hover { border-color: rgba(140,124,255,.5); background: var(--surface-raised); transform: translateY(-4px); }
    .guide-number { display: flex; align-items: center; justify-content: space-between; color: var(--violet); font-size: 27px; font-weight: 850; font-style: italic; }
    .guide-number i { color: var(--dim); font-size: 18px; }
    .guide-card h3 { margin: 21px 0 8px; color: #f4f8ff; font-size: 19px; }
    .guide-card p { margin: 0; color: var(--muted); font-size: 14px; }

    .schedule-section { background: rgba(10,20,37,.5); }
    .schedule-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 28px; }
    .schedule-list { border-top: 1px solid var(--line); }
    .schedule-item {
      display: grid;
      grid-template-columns: 115px 1fr auto;
      gap: 20px;
      align-items: center;
      padding: 18px 4px;
      border-bottom: 1px solid var(--line);
    }
    .schedule-time { color: var(--cyan); font-size: 13px; font-weight: 800; }
    .schedule-time small { display: block; color: var(--dim); font-weight: 500; }
    .schedule-main strong { display: block; color: #eef5ff; font-size: 15px; }
    .schedule-main span { color: var(--muted); font-size: 13px; }
    .schedule-type { padding: 4px 8px; color: #bbc8d9; border: 1px solid var(--line); border-radius: 7px; font-size: 11px; }
    .notice-card {
      padding: 31px;
      border: 1px solid rgba(75,226,237,.23);
      border-radius: var(--radius);
      background:
        linear-gradient(145deg, rgba(75,226,237,.10), transparent 45%),
        var(--surface);
    }
    .notice-icon { display: grid; width: 46px; height: 46px; place-items: center; color: var(--cyan); border-radius: 13px; background: rgba(75,226,237,.11); font-size: 19px; }
    .notice-card h3 { margin: 20px 0 8px; color: #fff; font-size: 23px; }
    .notice-card p { margin: 0; color: var(--muted); font-size: 14px; }
    .notice-points { display: grid; gap: 12px; margin: 23px 0 0; }
    .notice-points span { display: flex; gap: 10px; align-items: center; color: #cbd6e6; font-size: 13px; }
    .notice-points i { color: var(--green); }

    .faq-grid { display: grid; grid-template-columns: .86fr 1.14fr; gap: 68px; align-items: start; }
    .faq-intro { position: sticky; top: 20px; }
    .faq-intro h2 { margin: 0; color: #f8fbff; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.22; }
    .faq-intro p { margin: 17px 0 0; color: var(--muted); font-size: 15px; }
    .faq-list { border-top: 1px solid var(--line); }
    .faq-item { border-bottom: 1px solid var(--line); }
    .faq-question {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 21px 0;
      color: #edf3fb;
      border: 0;
      background: transparent;
      text-align: left;
      font-size: 16px;
      font-weight: 750;
    }
    .faq-question i { flex: 0 0 auto; color: var(--cyan); font-size: 13px; transition: transform var(--ease); }
    .faq-answer { display: none; max-width: 680px; padding: 0 0 21px; color: var(--muted); font-size: 14px; }
    .faq-item.open .faq-answer { display: block; }
    .faq-item.open .faq-question i { transform: rotate(45deg); }

    .cta-section { padding-top: 40px; }
    .cta-panel {
      position: relative;
      overflow: hidden;
      padding: 64px 7%;
      border: 1px solid rgba(75,226,237,.3);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(90deg, rgba(5,18,35,.98), rgba(5,18,35,.67)),
        url("https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?auto=format&fit=crop&w=1500&q=85") center/cover;
    }
    .cta-panel::after {
      position: absolute;
      right: 8%;
      bottom: -80px;
      width: 210px;
      height: 210px;
      content: "";
      border: 1px solid rgba(75,226,237,.35);
      border-radius: 50%;
    }
    .cta-content { position: relative; z-index: 1; max-width: 680px; }
    .cta-content h2 { margin: 0; color: #fff; font-size: clamp(30px, 4vw, 48px); line-height: 1.2; }
    .cta-content p { max-width: 560px; margin: 16px 0 28px; color: #bdcada; font-size: 16px; }

    .site-footer { margin-top: 90px; border-top: 1px solid var(--line); background: #050b16; }
    .footer-top { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 35px; padding: 55px 0 37px; }
    .footer-brand .brand { margin: 0; }
    .footer-brand p { max-width: 350px; margin: 15px 0 0; color: var(--muted); font-size: 13px; }
    .footer-title { margin: 5px 0 14px; color: #eaf2ff; font-size: 14px; font-weight: 800; }
    .footer-links { display: grid; gap: 8px; }
    .footer-links a { width: fit-content; color: var(--muted); font-size: 13px; }
    .footer-links a:hover { color: var(--cyan); }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      min-height: 68px;
      border-top: 1px solid var(--line);
      color: var(--dim);
      font-size: 12px;
    }
    .footer-status { display: inline-flex; align-items: center; gap: 7px; }
    .footer-status i { color: var(--green); font-size: 8px; }

    @media (max-width: 1024px) {
      .brand { margin-right: 15px; font-size: 15px; }
      .nav-search { width: 125px; }
      .hero { min-height: auto; padding-bottom: 105px; }
      .hero-content { padding-right: 0; }
      .feature-surface { gap: 30px; padding: 42px; }
      .faq-grid { gap: 40px; }
    }
    @media (max-width: 768px) {
      .container { width: min(calc(100% - 28px), var(--container)); }
      .site-header { top: 13px; }
      .nav-capsule { min-height: 58px; padding: 7px 8px 7px 14px; }
      .brand { max-width: calc(100vw - 130px); margin-right: auto; }
      .brand-mark { width: 29px; height: 29px; flex-basis: 29px; }
      .nav-links, .nav-search, .nav-cta { display: none; }
      .mobile-toggle { display: grid; place-items: center; }
      .mobile-menu {
        display: none;
        margin-top: 9px;
        padding: 12px;
        border: 1px solid var(--line);
        border-radius: 17px;
        background: rgba(6,15,30,.96);
        box-shadow: var(--shadow);
      }
      .mobile-menu.show { display: grid; gap: 6px; }
      .mobile-menu a { padding: 11px 13px; color: var(--muted); border-radius: 10px; font-size: 14px; font-weight: 700; }
      .mobile-menu a:hover { color: var(--cyan); background: rgba(75,226,237,.08); }
      .hero { padding-top: 132px; }
      .hero-grid { row-gap: 52px; }
      .screen-panel { max-width: 580px; margin: 0 auto; transform: none; }
      .metrics { grid-template-columns: repeat(2, 1fr); }
      .metric + .metric::before { display: none; }
      .metric:nth-child(odd)::after { position: absolute; top: 20px; right: 0; bottom: 20px; width: 1px; content: ""; background: var(--line); }
      .category-grid { grid-template-columns: repeat(2, 1fr); }
      .release-grid, .schedule-grid, .faq-grid, .feature-surface { grid-template-columns: 1fr; }
      .watchlist { padding: 10px 20px; }
      .feature-surface { padding: 33px; }
      .device-board { max-width: 540px; width: 100%; margin: 0 auto; }
      .faq-intro { position: static; }
      .footer-top { grid-template-columns: 1.2fr 1fr; }
      .footer-top > :first-child { grid-column: 1 / -1; }
    }
    @media (min-width: 769px) { .mobile-menu { display: none !important; } }
    @media (max-width: 520px) {
      .section { padding: 64px 0; }
      .section-head { display: block; margin-bottom: 27px; }
      .section-desc { margin-top: 12px; }
      .hero { padding-bottom: 82px; }
      .hero h1 { font-size: 35px; }
      .hero-text { font-size: 15px; }
      .hero-buttons { display: grid; grid-template-columns: 1fr; }
      .button-primary, .button-secondary { width: 100%; }
      .hero-mini { gap: 12px; margin-top: 28px; }
      .featured-art, .featured-art img { min-height: 300px; height: 300px; }
      .status-chip { top: 20px; right: 12px; }
      .metrics-band { margin-top: -31px; }
      .metric { padding: 17px; }
      .metric-value { font-size: 20px; }
      .category-grid, .guide-grid { grid-template-columns: 1fr; }
      .category-card { min-height: 128px; }
      .spotlight-card { grid-template-columns: 1fr; }
      .spotlight-image { min-height: 230px; }
      .spotlight-image img { min-height: 230px; height: 230px; }
      .spotlight-image::after { background: linear-gradient(0deg, var(--surface), transparent 55%); }
      .spotlight-copy { padding: 25px; }
      .spotlight-copy h3 { font-size: 25px; }
      .feature-surface { padding: 26px; }
      .device-board { min-height: 285px; }
      .device-main { top: 10px; right: 0; left: 15px; }
      .device-main img { height: 200px; }
      .device-overlay h3 { margin-top: 75px; font-size: 17px; }
      .device-bottom { width: 190px; }
      .schedule-item { grid-template-columns: 80px 1fr; gap: 11px; }
      .schedule-type { display: none; }
      .notice-card { padding: 26px; }
      .cta-panel { padding: 48px 28px; }
      .footer-top { grid-template-columns: 1fr; gap: 25px; }
      .footer-top > :first-child { grid-column: auto; }
      .footer-bottom { align-items: flex-start; flex-direction: column; justify-content: center; padding: 15px 0; }
    }