html,
  body {
    min-width: 320px;
    background: #fbfaf6;
  }

  body { margin: 0; }

  .xq-skip-link {
    position: fixed;
    z-index: 120;
    top: 16px;
    left: 16px;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0 16px;
    border-radius: 12px;
    color: #fff;
    background: #102d3d;
    box-shadow: 0 10px 30px rgba(16,45,61,.2);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(calc(-100% - 20px));
  }

  .xq-skip-link:focus-visible {
    outline: 3px solid #f3c85b;
    outline-offset: 3px;
    transform: translateY(0);
  }

  .xq-site {
    --navy: #102d3d;
    --navy-2: #173c4c;
    --teal: #197b76;
    --teal-soft: #cfe4de;
    --cream: #f5f1e8;
    --paper: #fbfaf6;
    --amber: #f3c85b;
    --coral: #d9674f;
    --ink: #142f3e;
    --muted: #6a777a;
    --line: rgba(20, 47, 62, .13);
    min-height: 100%;
    overflow: hidden;
    color: var(--ink);
    background: var(--paper);
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  }

  .xq-site * { box-sizing: border-box; }

  .xq-site a { color: inherit; text-decoration: none; }

  .xq-container {
    width: min(1180px, calc(100% - 64px));
    margin-inline: auto;
  }

  .xq-nav {
    position: absolute;
    z-index: 30;
    top: 25px;
    left: 50%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: min(1180px, calc(100% - 64px));
    min-height: 68px;
    padding: 0 13px 0 18px;
    border: 1px solid rgba(16,45,61,.1);
    border-radius: 22px;
    background: rgba(251,250,246,.78);
    box-shadow: 0 18px 50px rgba(16,45,61,.07);
    transform: translateX(-50%);
    backdrop-filter: blur(18px) saturate(130%);
  }

  .xq-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    width: max-content;
  }

  .xq-logo {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    color: #fff;
    background: var(--teal);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    font-size: 16px;
    transform: rotate(-5deg);
  }

  .xq-logo::after {
    content: "";
    position: absolute;
    top: -18px;
    left: -22px;
    width: 30px;
    height: 60px;
    background: rgba(255,255,255,.18);
    transform: rotate(33deg);
  }

  .xq-brand-copy b {
    display: block;
    color: var(--navy);
    font-size: 16px;
    letter-spacing: .08em;
  }

  .xq-brand-copy span {
    display: block;
    margin-top: 2px;
    color: #718086;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .2em;
  }

  .xq-menu {
    display: flex;
    align-items: center;
    gap: 31px;
    color: #405763;
    font-size: 12px;
    font-weight: 600;
  }

  .xq-menu a { position: relative; padding: 10px 0; }

  .xq-menu a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 4px;
    left: 0;
    height: 1px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .2s ease;
  }

  .xq-menu a:hover::after { transform: scaleX(1); transform-origin: left; }

  .xq-nav-side { justify-self: end; }

  .xq-boundary-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    color: #fff !important;
    background: var(--navy);
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(16,45,61,.14);
    transition: transform .18s ease, box-shadow .18s ease;
  }

  .xq-boundary-link:hover { transform: translateY(-2px); box-shadow: 0 13px 28px rgba(16,45,61,.2); }

  .xq-boundary-link i {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 50%;
    color: var(--navy);
    background: var(--amber);
    font-style: normal;
  }

  .xq-hero {
    position: relative;
    display: flex;
    min-height: 820px;
    align-items: center;
    padding: 132px 0 72px;
    background:
      radial-gradient(circle at 78% 28%, rgba(243,200,91,.18), transparent 20%),
      radial-gradient(circle at 88% 68%, rgba(25,123,118,.09), transparent 27%),
      linear-gradient(180deg, #fbfaf6 0%, #f6f5ef 100%);
  }

  .xq-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .33;
    background-image: radial-gradient(rgba(16,45,61,.12) .6px, transparent .6px);
    background-size: 16px 16px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 74%);
  }

  .xq-hero-grid {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(380px, .75fr);
    gap: 50px;
    align-items: center;
  }

  .xq-eyebrow,
  .xq-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--coral);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
  }

  .xq-eyebrow::before,
  .xq-section-eyebrow::before {
    content: "";
    width: 25px;
    height: 1px;
    background: currentColor;
  }

  .xq-hero-copy { animation: xqRise .55s cubic-bezier(.22,.9,.35,1) both; }

  .xq-hero h1 {
    max-width: 740px;
    margin: 26px 0 0;
    color: var(--navy);
    font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
    font-size: clamp(52px, 6.3vw, 88px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -.06em;
  }

  .xq-hero h1 em {
    position: relative;
    color: var(--teal);
    font-style: normal;
    white-space: nowrap;
  }

  .xq-hero h1 em::after {
    content: "";
    position: absolute;
    right: 2px;
    bottom: 2px;
    left: 5px;
    height: 8px;
    border-radius: 999px;
    background: rgba(243,200,91,.56);
    z-index: -1;
  }

  .xq-lead {
    max-width: 650px;
    margin: 30px 0 0;
    color: #53666c;
    font-size: 16px;
    line-height: 2;
  }

  .xq-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }

  .xq-btn {
    display: inline-flex;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    border: 1px solid var(--line);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 800;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
  }

  .xq-btn:hover { transform: translateY(-2px); }
  .xq-btn.primary { color: #fff; border-color: var(--navy); background: var(--navy); box-shadow: 0 14px 32px rgba(16,45,61,.17); }
  .xq-btn.secondary { color: var(--navy); background: rgba(255,255,255,.65); }
  .xq-btn span { font-size: 16px; }

  .xq-hero-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 27px;
    color: #788387;
    font-size: 10px;
  }

  .xq-hero-note i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 0 5px rgba(25,123,118,.1);
  }

  .xq-visual {
    position: relative;
    min-height: 500px;
    animation: xqFade .8s .12s ease both;
  }

  .xq-orbit-shell {
    position: absolute;
    inset: 9% 0 0 3%;
    border: 1px solid rgba(16,45,61,.1);
    border-radius: 50% 48% 45% 55% / 46% 49% 51% 54%;
    transform: rotate(-8deg);
  }

  .xq-orbit-shell::before,
  .xq-orbit-shell::after {
    content: "";
    position: absolute;
    border-radius: 50%;
  }

  .xq-orbit-shell::before {
    inset: 14%;
    border: 1px dashed rgba(25,123,118,.22);
  }

  .xq-orbit-shell::after {
    inset: 31%;
    background: radial-gradient(circle at 36% 30%, #fff8d9 0%, #f3c85b 30%, #dda844 76%);
    box-shadow: 0 30px 90px rgba(221,168,68,.28), inset -10px -12px 35px rgba(151,101,22,.16);
  }

  .xq-center-star {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    color: var(--navy);
    font-size: 52px;
    transform: translate(-50%, -49%) rotate(10deg);
  }

  .xq-route {
    position: absolute;
    inset: 5% -5% -4% 0;
    border: 18px solid rgba(25,123,118,.08);
    border-top-color: transparent;
    border-left-color: transparent;
    border-radius: 48%;
    transform: rotate(29deg);
  }

  .xq-route-dot {
    position: absolute;
    z-index: 8;
    top: 99px;
    left: 67px;
    width: 15px;
    height: 15px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0 0 0 6px rgba(217,103,79,.14), 0 10px 25px rgba(16,45,61,.12);
    offset-path: path("M 0 155 C 40 35, 192 -15, 320 65 C 435 136, 416 315, 272 363 C 164 398, 68 345, 25 258");
    animation: xqTravel 5.2s cubic-bezier(.35,.05,.35,1) .5s 2 both;
  }

  .xq-step {
    position: absolute;
    z-index: 10;
    padding: 12px 14px;
    border: 1px solid rgba(16,45,61,.09);
    border-radius: 16px;
    color: var(--navy);
    background: rgba(255,255,255,.76);
    box-shadow: 0 16px 38px rgba(16,45,61,.08);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    backdrop-filter: blur(12px);
  }

  .xq-step::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--teal);
    vertical-align: 1px;
  }

  .xq-step.s1 { top: 66px; left: 14px; transform: rotate(-3deg); }
  .xq-step.s2 { top: 75px; right: -3px; transform: rotate(3deg); }
  .xq-step.s3 { right: -9px; bottom: 70px; transform: rotate(-2deg); }
  .xq-step.s4 { bottom: 47px; left: 27px; transform: rotate(3deg); }

  .xq-scroll-cue {
    position: absolute;
    z-index: 5;
    bottom: 31px;
    left: 50%;
    display: flex;
    align-items: center;
    gap: 11px;
    color: #829093;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    transform: translateX(-50%);
  }

  .xq-scroll-cue i { width: 35px; height: 1px; background: #aeb7b8; }

  .xq-statement {
    position: relative;
    padding: 130px 0 122px;
    color: #fff;
    background: var(--navy);
  }

  .xq-statement::before {
    content: "✦";
    position: absolute;
    top: 32px;
    right: 7%;
    color: rgba(243,200,91,.14);
    font-size: clamp(150px, 25vw, 330px);
    transform: rotate(12deg);
  }

  .xq-statement-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    gap: 85px;
  }

  .xq-section-index { color: rgba(255,255,255,.5); font-size: 10px; font-weight: 800; letter-spacing: .18em; }

  .xq-statement h2,
  .xq-section-head h2,
  .xq-boundary h2 {
    margin: 0;
    font-family: "Songti SC", "STSong", "Noto Serif SC", serif;
    font-weight: 600;
    letter-spacing: -.045em;
  }

  .xq-statement h2 { max-width: 770px; font-size: clamp(38px, 5vw, 66px); line-height: 1.28; }
  .xq-statement h2 span { color: var(--amber); }

  .xq-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    margin-top: 65px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 26px;
    background: rgba(255,255,255,.12);
  }

  .xq-pair article { min-height: 205px; padding: 31px; background: rgba(255,255,255,.055); }
  .xq-pair small { color: var(--amber); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
  .xq-pair h3 { margin: 16px 0 12px; font-size: 21px; font-weight: 650; }
  .xq-pair p { margin: 0; color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.9; }

  .xq-beliefs { padding: 130px 0 135px; background: var(--cream); }

  .xq-section-head {
    display: grid;
    grid-template-columns: .75fr 1.25fr;
    gap: 65px;
    align-items: end;
  }

  .xq-section-head h2 { max-width: 700px; color: var(--navy); font-size: clamp(42px, 5vw, 66px); line-height: 1.19; }
  .xq-section-head p { max-width: 530px; margin: 0 0 4px; color: var(--muted); font-size: 13px; line-height: 1.9; }

  .xq-belief-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 64px;
  }

  .xq-belief {
    position: relative;
    min-height: 255px;
    overflow: hidden;
    padding: 31px;
    border: 1px solid rgba(16,45,61,.1);
    border-radius: 25px;
    background: rgba(255,255,255,.62);
    box-shadow: 0 17px 45px rgba(16,45,61,.04);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  }

  .xq-belief:hover { transform: translateY(-4px); background: #fff; box-shadow: 0 24px 50px rgba(16,45,61,.09); }

  .xq-belief-no { color: var(--coral); font-size: 10px; font-weight: 800; letter-spacing: .18em; }
  .xq-belief h3 { max-width: 420px; margin: 49px 0 14px; color: var(--navy); font-size: 23px; line-height: 1.35; }
  .xq-belief p { max-width: 470px; margin: 0; color: #718083; font-size: 12px; line-height: 1.85; }
  .xq-belief-symbol { position: absolute; right: 24px; top: 20px; color: rgba(25,123,118,.12); font-family: serif; font-size: 78px; }

  .xq-explore { padding: 130px 0; background: #f8f7f2; }

  .xq-lab-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 22px;
    padding: 8px 11px;
    border-radius: 999px;
    color: #8f4c3a;
    background: #f9e8df;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
  }

  .xq-lab-label i { width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }

  .xq-explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; margin-top: 64px; }

  .xq-explore-card {
    position: relative;
    min-height: 370px;
    overflow: hidden;
    padding: 31px;
    border-radius: 28px;
    color: #fff;
    background: var(--teal);
    transition: transform .2s ease;
  }

  .xq-explore-card:nth-child(2) { color: var(--navy); background: var(--amber); }
  .xq-explore-card:nth-child(3) { background: var(--coral); }
  .xq-explore-card:hover { transform: translateY(-5px); }

  .xq-explore-card small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .17em; opacity: .72; }
  .xq-explore-card h3 { max-width: 260px; margin: 28px 0 13px; font-size: 26px; line-height: 1.3; }
  .xq-explore-card p { max-width: 275px; margin: 0; font-size: 12px; line-height: 1.85; opacity: .75; }

  .xq-card-art {
    position: absolute;
    right: -15px;
    bottom: -28px;
    width: 190px;
    height: 190px;
    border: 1px solid currentColor;
    border-radius: 50%;
    opacity: .22;
  }

  .xq-card-art::before,
  .xq-card-art::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid currentColor;
  }

  .xq-card-art::before { inset: 27px; }
  .xq-card-art::after { inset: 57px; background: currentColor; opacity: .5; }

  .xq-boundary { position: relative; padding: 135px 0 125px; color: #fff; background: #0a2533; }

  .xq-boundary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 45%, rgba(25,123,118,.24), transparent 30%);
  }

  .xq-boundary-inner { position: relative; z-index: 2; }
  .xq-boundary h2 { max-width: 820px; font-size: clamp(43px, 5.3vw, 70px); line-height: 1.2; }
  .xq-boundary h2 span { color: var(--amber); }

  .xq-boundary-grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 80px;
    align-items: end;
    margin-top: 73px;
  }

  .xq-rules { display: grid; gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.1); }

  .xq-rule {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 68px;
    padding: 12px 18px;
    background: rgba(255,255,255,.045);
    font-size: 12px;
  }

  .xq-rule i { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid rgba(255,255,255,.19); border-radius: 50%; color: var(--amber); font-style: normal; }
  .xq-boundary-note { color: rgba(255,255,255,.62); font-size: 13px; line-height: 2; }
  .xq-boundary-note strong { display: block; margin-bottom: 14px; color: #fff; font-size: 17px; }

  .xq-footer { padding: 78px 0 30px; background: #f4f0e7; }

  .xq-footer-top { display: grid; grid-template-columns: 1.25fr .75fr; gap: 65px; align-items: start; padding-bottom: 68px; }

  .xq-footer h2 { max-width: 700px; margin: 28px 0 0; color: var(--navy); font-family: "Songti SC", "STSong", serif; font-size: clamp(35px, 4.5vw, 58px); font-weight: 600; line-height: 1.28; letter-spacing: -.04em; }
  .xq-footer-detail { justify-self: end; max-width: 390px; padding-top: 7px; color: #6e797d; font-size: 12px; line-height: 1.9; }
  .xq-footer-detail b { display: block; margin-bottom: 9px; color: var(--navy); font-size: 13px; }

  .xq-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-top: 24px;
    border-top: 1px solid rgba(16,45,61,.12);
    color: #7b8587;
    font-size: 10px;
  }

  .xq-footer-links { display: flex; flex-wrap: wrap; gap: 23px; }

  @keyframes xqRise { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes xqFade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes xqTravel { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }

  @media (prefers-reduced-motion: reduce) {
    .xq-site *, .xq-site *::before, .xq-site *::after { animation: none !important; transition: none !important; }
  }

  @media (max-width: 920px) {
    .xq-menu { display: none; }
    .xq-nav { grid-template-columns: 1fr auto; }
    .xq-hero { min-height: auto; padding-top: 150px; }
    .xq-hero-grid { grid-template-columns: 1fr; }
    .xq-visual { min-height: 470px; }
    .xq-statement-grid, .xq-section-head, .xq-boundary-grid, .xq-footer-top { grid-template-columns: 1fr; gap: 36px; }
    .xq-explore-grid { grid-template-columns: 1fr; }
    .xq-explore-card { min-height: 285px; }
    .xq-footer-detail { justify-self: start; }
  }

  @media (max-width: 640px) {
    .xq-container, .xq-nav { width: min(100% - 30px, 1180px); }
    .xq-nav { top: 14px; min-height: 60px; border-radius: 18px; }
    .xq-brand-copy span, .xq-boundary-link span { display: none; }
    .xq-boundary-link { padding: 9px; }
    .xq-hero { padding-top: 118px; }
    .xq-hero h1 { font-size: 48px; }
    .xq-lead { font-size: 14px; }
    .xq-visual { min-height: 390px; }
    .xq-step.s2, .xq-step.s3 { right: 2px; }
    .xq-pair, .xq-belief-grid { grid-template-columns: 1fr; }
    .xq-pair article { min-height: auto; }
    .xq-statement, .xq-beliefs, .xq-explore, .xq-boundary { padding: 90px 0; }
    .xq-footer-bottom { align-items: flex-start; flex-direction: column; }
  }

  /* V2 — B+C visual system: real interaction becomes a game world */
  .xq-hero { background: #f8f2e5; }

  .xq-hero-art {
    position: absolute;
    z-index: 0;
    inset: 0;
    background: url('/assets/images/homepage-hero-bc-v2.png') center / cover no-repeat;
    animation: xqArtReveal .95s cubic-bezier(.2,.85,.25,1) both;
  }

  .xq-hero-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(250,245,233,.99) 0%, rgba(250,245,233,.97) 30%, rgba(250,245,233,.69) 45%, rgba(250,245,233,.08) 66%, transparent 100%);
  }

  .xq-hero::before { z-index: 1; opacity: .16; }
  .xq-hero-grid { grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); }
  .xq-hero-copy { position: relative; z-index: 4; }
  .xq-visual { z-index: 3; }
  .xq-visual > * { display: none; }

  .xq-explore-card {
    min-height: 445px;
    color: #fff !important;
    background-color: var(--navy) !important;
    background-image: url('/assets/images/child-game-directions-v2.png') !important;
    background-size: 300% auto !important;
    background-repeat: no-repeat !important;
    background-position-y: center !important;
    box-shadow: 0 22px 55px rgba(16,45,61,.12);
    transition: transform .22s ease, box-shadow .22s ease, background-size .45s ease !important;
  }

  .xq-explore-card:nth-child(1) { background-position-x: left !important; }
  .xq-explore-card:nth-child(2) { background-position-x: center !important; }
  .xq-explore-card:nth-child(3) { background-position-x: right !important; }

  .xq-explore-card::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,30,42,.86) 0%, rgba(8,30,42,.55) 38%, rgba(8,30,42,.04) 72%, rgba(8,30,42,.28) 100%);
  }

  .xq-explore-card small,
  .xq-explore-card h3,
  .xq-explore-card p { position: relative; z-index: 3; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,.24); }

  .xq-explore-card p { opacity: .8; }
  .xq-explore-card:hover { transform: translateY(-6px); box-shadow: 0 30px 65px rgba(16,45,61,.18); background-size: 306% auto !important; }
  .xq-card-art { display: none; }

  @keyframes xqArtReveal {
    from { opacity: 0; transform: scale(1.025); clip-path: inset(0 0 0 9%); }
    to { opacity: 1; transform: scale(1); clip-path: inset(0 0 0 0); }
  }

  @media (max-width: 920px) {
    .xq-hero-art { background-position: 66% center; }
    .xq-hero-art::after { background: linear-gradient(180deg, rgba(250,245,233,.98) 0%, rgba(250,245,233,.91) 42%, rgba(250,245,233,.2) 73%, transparent 100%); }
    .xq-hero-grid { grid-template-columns: 1fr; }
    .xq-visual { min-height: 330px; }
  }

  @media (max-width: 640px) {
    .xq-hero-art { background-position: 70% center; }
    .xq-visual { min-height: 295px; }
    .xq-explore-card { min-height: 390px; }
  }

  /* V4 — viewport chapters, material backgrounds and visible scroll motion */
  .xq-nav { position: fixed; }

  .xq-hero,
  .xq-statement,
  .xq-beliefs,
  .xq-explore,
  .xq-boundary {
    min-height: 100svh;
    scroll-margin-top: 0;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  .xq-hero[id],
  .xq-statement[id],
  .xq-beliefs[id],
  .xq-explore[id],
  .xq-boundary[id] { scroll-margin-top: 0; }

  .xq-statement,
  .xq-beliefs,
  .xq-explore,
  .xq-boundary {
    display: flex;
    align-items: center;
    padding: clamp(68px, 8.5vh, 102px) 0;
  }

  .xq-statement {
    background-image:
      linear-gradient(90deg, rgba(8,29,40,.96) 0%, rgba(8,29,40,.88) 44%, rgba(8,29,40,.68) 100%),
      url('/assets/images/child-game-directions-v2.png');
    background-size: 300% auto;
    background-position: left center;
    background-repeat: no-repeat;
  }

  .xq-beliefs {
    background-image:
      linear-gradient(90deg, rgba(245,241,232,.95), rgba(245,241,232,.86)),
      url('/assets/images/asset-directions-triptych-v1.png');
    background-size: 300% auto;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .xq-explore {
    background-image:
      linear-gradient(90deg, rgba(248,247,242,.97) 0%, rgba(248,247,242,.88) 52%, rgba(248,247,242,.72) 100%),
      url('/assets/images/homepage-hero-bc-v2.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .xq-boundary {
    background-image:
      linear-gradient(90deg, rgba(7,26,37,.96) 0%, rgba(7,26,37,.83) 47%, rgba(7,26,37,.16) 74%, rgba(7,26,37,.04) 100%),
      url('/assets/images/boundary-trust-v4.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .xq-hero h1 { font-size: clamp(48px, 5.6vw, 76px); }
  .xq-statement h2 { font-size: clamp(36px, 4.4vw, 60px); }
  .xq-pair { margin-top: clamp(28px, 5vh, 48px); }
  .xq-pair article { min-height: 165px; padding: 24px 27px; backdrop-filter: blur(12px); }
  .xq-pair h3 { margin: 12px 0 8px; font-size: 18px; }
  .xq-pair p { font-size: 11px; line-height: 1.75; }

  .xq-section-head { gap: 50px; }
  .xq-section-head h2 { font-size: clamp(36px, 4.4vw, 58px); }
  .xq-belief-grid { gap: 12px; margin-top: clamp(26px, 4.5vh, 43px); }
  .xq-belief { min-height: 175px; padding: 23px 25px; background: rgba(255,255,255,.7); backdrop-filter: blur(13px) saturate(115%); }
  .xq-belief h3 { margin: 26px 0 8px; font-size: 18px; }
  .xq-belief p { font-size: 10px; line-height: 1.7; }
  .xq-belief-symbol { right: 18px; top: 12px; font-size: 58px; }

  .xq-explore-grid { gap: 13px; margin-top: clamp(26px, 4.5vh, 43px); }
  .xq-explore-card { min-height: clamp(300px, 40vh, 365px); }
  .xq-explore-card h3 { margin-top: 20px; font-size: 22px; }
  .xq-explore-card p { font-size: 11px; }

  .xq-boundary h2 { font-size: clamp(38px, 4.7vw, 62px); }
  .xq-boundary-grid { gap: 60px; margin-top: clamp(30px, 5vh, 48px); }
  .xq-rule { min-height: 55px; padding: 9px 15px; backdrop-filter: blur(11px); }
  .xq-rules { background: rgba(255,255,255,.08); backdrop-filter: blur(8px); }
  .xq-boundary-note { padding: 20px; border: 1px solid rgba(255,255,255,.1); border-radius: 19px; background: rgba(6,24,34,.4); backdrop-filter: blur(10px); }

  .xq-chapter-rail {
    position: fixed;
    z-index: 90;
    top: 50%;
    right: 17px;
    display: grid;
    gap: 5px;
    padding: 9px 7px;
    border: 1px solid rgba(16,45,61,.1);
    border-radius: 17px;
    background: rgba(255,255,255,.73);
    box-shadow: 0 13px 35px rgba(16,45,61,.1);
    transform: translateY(-50%);
    backdrop-filter: blur(14px) saturate(130%);
  }

  .xq-chapter-rail a {
    position: relative;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 10px;
  }

  .xq-chapter-rail i {
    width: 6px;
    height: 6px;
    border: 1px solid rgba(16,45,61,.3);
    border-radius: 50%;
    background: transparent;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
  }

  .xq-chapter-rail span {
    position: absolute;
    right: 39px;
    padding: 6px 8px;
    border-radius: 8px;
    color: #fff;
    background: var(--navy);
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(5px);
    transition: .18s ease;
  }

  .xq-chapter-rail a:hover span,
  .xq-chapter-rail a:focus-visible span { opacity: 1; transform: translateX(0); }
  .xq-chapter-rail a:hover i { transform: scale(1.5); border-color: var(--teal); }
  .xq-chapter-rail a:first-child i { border-color: var(--teal); background: var(--teal); }
  body:has(#why:target) .xq-chapter-rail i,
  body:has(#beliefs:target) .xq-chapter-rail i,
  body:has(#exploring:target) .xq-chapter-rail i,
  body:has(#boundary:target) .xq-chapter-rail i { border-color: rgba(16,45,61,.3); background: transparent; }
  body:has(#why:target) .xq-chapter-rail a[href="#why"] i,
  body:has(#beliefs:target) .xq-chapter-rail a[href="#beliefs"] i,
  body:has(#exploring:target) .xq-chapter-rail a[href="#exploring"] i,
  body:has(#boundary:target) .xq-chapter-rail a[href="#boundary"] i { border-color: var(--teal); background: var(--teal); transform: scale(1.32); }

  @keyframes xqScrollReveal {
    from { opacity: 0; transform: translateY(26px); clip-path: inset(0 0 24% 0); }
    to { opacity: 1; transform: translateY(0); clip-path: inset(0); }
  }

  @keyframes xqCardReveal {
    from { opacity: 0; transform: translateY(34px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes xqMaterialDrift {
    from { background-position-y: 44%; }
    to { background-position-y: 56%; }
  }

  @supports (animation-timeline: view()) {
    .xq-statement h2,
    .xq-section-head,
    .xq-boundary h2,
    .xq-boundary-note {
      animation: xqScrollReveal linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 28%;
    }

    .xq-pair,
    .xq-belief,
    .xq-explore-card,
    .xq-rules {
      animation: xqCardReveal linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 28%;
    }

    .xq-belief:nth-child(2), .xq-explore-card:nth-child(2) { animation-range: entry 10% cover 33%; }
    .xq-belief:nth-child(3), .xq-explore-card:nth-child(3) { animation-range: entry 15% cover 38%; }
    .xq-belief:nth-child(4) { animation-range: entry 20% cover 43%; }

    .xq-explore,
    .xq-boundary { animation: xqMaterialDrift linear both; animation-timeline: view(); animation-range: entry 0 exit 100%; }
  }

  @media (max-height: 760px) and (min-width: 921px) {
    .xq-statement, .xq-beliefs, .xq-explore, .xq-boundary { padding: 58px 0 44px; }
    .xq-statement h2, .xq-section-head h2, .xq-boundary h2 { font-size: 42px; }
    .xq-pair { margin-top: 24px; }
    .xq-pair article { min-height: 142px; padding: 18px 22px; }
    .xq-belief-grid, .xq-explore-grid { margin-top: 24px; }
    .xq-belief { min-height: 152px; padding: 18px 21px; }
    .xq-belief h3 { margin-top: 18px; font-size: 16px; }
    .xq-explore-card { min-height: 285px; padding: 24px; }
    .xq-boundary-grid { margin-top: 25px; }
    .xq-rule { min-height: 48px; }
  }

  @media (max-width: 920px) {
    .xq-chapter-rail {
      top: auto;
      right: 50%;
      bottom: max(11px, env(safe-area-inset-bottom));
      display: flex;
      gap: 4px;
      padding: 6px 8px;
      transform: translateX(50%);
    }
    .xq-chapter-rail a { width: 34px; height: 30px; }
    .xq-chapter-rail span { display: none; }
    .xq-statement, .xq-beliefs, .xq-explore, .xq-boundary { min-height: 100svh; padding: 76px 0 48px; }
    .xq-visual { display: none; }
    .xq-statement { background-size: auto 100%; }
    .xq-beliefs { background-size: auto 100%; }
    .xq-pair {
      display: flex;
      overflow-x: auto;
      gap: 1px;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .xq-pair::-webkit-scrollbar { display: none; }
    .xq-pair article { flex: 0 0 min(84vw, 520px); min-height: 180px; scroll-snap-align: start; }
    .xq-belief-grid,
    .xq-explore-grid {
      display: flex;
      width: calc(100vw - 30px);
      overflow-x: auto;
      gap: 12px;
      padding: 4px 18vw 14px 0;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    .xq-belief-grid::-webkit-scrollbar, .xq-explore-grid::-webkit-scrollbar { display: none; }
    .xq-belief, .xq-explore-card { flex: 0 0 min(82vw, 360px); scroll-snap-align: start; }
    .xq-belief { min-height: 220px; }
    .xq-explore-card { min-height: 390px; }
    .xq-boundary { background-position: 64% center; }
    .xq-boundary-grid { grid-template-columns: 1fr; gap: 20px; }
    .xq-boundary-note {
      display: block;
      width: 100%;
      max-width: 680px;
      justify-self: start;
    }
    .xq-footer {
      padding-bottom: 88px;
      padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }
  }

  @media (max-width: 640px) {
    .xq-hero, .xq-statement, .xq-beliefs, .xq-explore, .xq-boundary { min-height: 100svh; }
    .xq-hero h1 { font-size: 39px; line-height: 1.16; }
    .xq-hero h1 br { display: none; }
    .xq-hero h1 em { white-space: normal; }
    .xq-statement h2, .xq-section-head h2, .xq-boundary h2 { font-size: 34px; }
    .xq-statement-grid { gap: 18px; }
    .xq-pair { margin-top: 19px; }
    .xq-pair article { padding: 17px; }
    .xq-section-head p { font-size: 11px; }
    .xq-belief-grid, .xq-explore-grid { margin-top: 21px; }
    .xq-rule { min-height: 48px; font-size: 10px; }
  }

  /* V6 — narrative motion system */
  .xq-site {
    --motion-ease: cubic-bezier(.16, 1, .3, 1);
    --motion-soft: cubic-bezier(.22, .8, .28, 1);
  }

  .xq-nav {
    transition: transform .5s var(--motion-ease), box-shadow .5s ease, background .5s ease;
  }

  .xq-site.is-scrolled .xq-nav {
    background: rgba(251,250,246,.9);
    box-shadow: 0 20px 58px rgba(16,45,61,.13);
    transform: translateX(-50%) translateY(-4px);
  }

  .xq-logo {
    animation: xqLogoBreathe 5.5s 1.2s ease-in-out infinite;
  }

  .xq-hero-line {
    display: block;
    overflow: clip;
    padding: .02em 0 .06em;
  }

  .xq-hero-line > span { display: block; }

  .xq-hero-art {
    scale: 1.025;
    translate: 0 var(--hero-shift, 0px);
    animation: xqArtRevealV6 1.15s var(--motion-ease) both, xqHeroBreath 13s 1.2s ease-in-out infinite alternate;
    will-change: translate, background-position;
  }

  .xq-hero-light {
    position: absolute;
    z-index: 2;
    inset: 0;
    opacity: .72;
    pointer-events: none;
    background: radial-gradient(circle 220px at var(--mx, 75%) var(--my, 54%), rgba(255,232,151,.3), rgba(255,232,151,.08) 44%, transparent 72%);
    mix-blend-mode: screen;
    transition: opacity .6s ease;
  }

  .xq-signal-field {
    position: absolute;
    z-index: 3;
    right: 1.5%;
    bottom: 5%;
    width: min(61vw, 930px);
    height: min(48vh, 450px);
    opacity: .92;
    pointer-events: none;
    filter: drop-shadow(0 0 24px rgba(250,211,105,.16));
  }

  .xq-signal-field svg { width: 100%; height: 100%; overflow: visible; }

  .xq-signal-path-base {
    fill: none;
    stroke: rgba(255,240,190,.18);
    stroke-width: 7;
    stroke-linecap: round;
  }

  .xq-signal-path-live {
    fill: none;
    stroke: url(#xq-signal-gradient);
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    filter: url(#xq-signal-glow);
  }

  .xq-signal-ripple {
    fill: none;
    stroke: rgba(255,226,132,.72);
    stroke-width: 2;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
  }

  .xq-signal-orb { fill: #fff6c9; filter: url(#xq-signal-glow); }

  .xq-hero.is-active .xq-signal-path-live { animation: xqSignalDraw 1.75s .75s var(--motion-ease) forwards; }
  .xq-hero.is-active .xq-signal-ripple.r1 { animation: xqSignalRipple 2.8s 1.15s ease-out infinite; }
  .xq-hero.is-active .xq-signal-ripple.r2 { animation: xqSignalRipple 2.8s 2.05s ease-out infinite; }

  .xq-site[data-motion-ready="true"] .xq-hero .xq-eyebrow,
  .xq-site[data-motion-ready="true"] .xq-hero .xq-lead,
  .xq-site[data-motion-ready="true"] .xq-hero .xq-actions,
  .xq-site[data-motion-ready="true"] .xq-hero .xq-hero-note,
  .xq-site[data-motion-ready="true"] .xq-hero .xq-scroll-cue {
    opacity: 0;
    transform: translateY(18px);
  }

  .xq-site[data-motion-ready="true"] .xq-hero .xq-hero-line > span {
    transform: translateY(112%) rotate(1.5deg);
    transform-origin: left bottom;
  }

  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-eyebrow,
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-lead,
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-actions,
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-hero-note,
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-scroll-cue {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .8s var(--motion-soft), transform .9s var(--motion-ease);
  }

  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-eyebrow { transition-delay: .18s; }
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-hero-line > span { transform: translateY(0) rotate(0); transition: transform 1.05s var(--motion-ease); }
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-hero-line:nth-child(1) > span { transition-delay: .3s; }
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-hero-line:nth-child(2) > span { transition-delay: .42s; }
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-hero-line:nth-child(3) > span { transition-delay: .54s; }
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-lead { transition-delay: .72s; }
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-actions { transition-delay: .84s; }
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-hero-note { transition-delay: .96s; }
  .xq-site[data-motion-ready="true"] .xq-hero.is-active .xq-scroll-cue { transition-delay: 1.05s; }

  .xq-btn { position: relative; overflow: hidden; isolation: isolate; }
  .xq-btn::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgba(255,255,255,.12);
    transform: translateX(-105%) skewX(-16deg);
    transition: transform .55s var(--motion-ease);
  }
  .xq-btn:hover::before { transform: translateX(105%) skewX(-16deg); }

  .xq-site[data-motion-ready="true"] [data-motion-chapter] .xq-section-head,
  .xq-site[data-motion-ready="true"] [data-motion-chapter] .xq-pair,
  .xq-site[data-motion-ready="true"] [data-motion-chapter] .xq-belief,
  .xq-site[data-motion-ready="true"] [data-motion-chapter] .xq-explore-card,
  .xq-site[data-motion-ready="true"] [data-motion-chapter] .xq-rules,
  .xq-site[data-motion-ready="true"] [data-motion-chapter] .xq-boundary-note { animation: none !important; }

  .xq-site[data-motion-ready="true"] [data-motion-chapter]:not(.xq-hero) .xq-section-index,
  .xq-site[data-motion-ready="true"] [data-motion-chapter]:not(.xq-hero) .xq-section-eyebrow,
  .xq-site[data-motion-ready="true"] [data-motion-chapter]:not(.xq-hero) h2,
  .xq-site[data-motion-ready="true"] [data-motion-chapter]:not(.xq-hero) .xq-section-head > p,
  .xq-site[data-motion-ready="true"] [data-motion-chapter]:not(.xq-hero) .xq-boundary-note {
    opacity: 0;
    transform: translateY(26px);
    clip-path: inset(0 0 22% 0);
    transition: opacity .75s var(--motion-soft), transform .9s var(--motion-ease), clip-path .9s var(--motion-ease);
  }

  .xq-site[data-motion-ready="true"] [data-motion-chapter]:not(.xq-hero) .xq-pair article,
  .xq-site[data-motion-ready="true"] [data-motion-chapter]:not(.xq-hero) .xq-belief,
  .xq-site[data-motion-ready="true"] [data-motion-chapter]:not(.xq-hero) .xq-explore-card,
  .xq-site[data-motion-ready="true"] [data-motion-chapter]:not(.xq-hero) .xq-rule {
    opacity: 0;
    transform: translateY(32px) scale(.975);
    transition: opacity .7s var(--motion-soft), transform .9s var(--motion-ease), box-shadow .3s ease;
  }

  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-section-index,
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-section-eyebrow,
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active h2,
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-section-head > p,
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-boundary-note,
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-pair article,
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-belief,
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-explore-card,
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-rule {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0);
  }

  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-section-index,
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-section-eyebrow { transition-delay: .08s; }
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active h2 { transition-delay: .16s; }
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-section-head > p { transition-delay: .26s; }
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-pair article:nth-child(1),
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-belief:nth-child(1),
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-explore-card:nth-child(1),
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-rule:nth-child(1) { transition-delay: .3s; }
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-pair article:nth-child(2),
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-belief:nth-child(2),
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-explore-card:nth-child(2),
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-rule:nth-child(2) { transition-delay: .4s; }
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-belief:nth-child(3),
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-explore-card:nth-child(3),
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-rule:nth-child(3) { transition-delay: .5s; }
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-belief:nth-child(4),
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-rule:nth-child(4) { transition-delay: .6s; }
  .xq-site[data-motion-ready="true"] [data-motion-chapter].is-active .xq-boundary-note { transition-delay: .48s; }

  .xq-statement,
  .xq-beliefs,
  .xq-explore,
  .xq-boundary {
    background-position-y: calc(50% + var(--scene-shift, 0px));
    transition: background-position-y .18s linear;
  }

  .xq-explore-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    transform-style: preserve-3d;
  }

  .xq-explore-card::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(circle 240px at var(--shine-x, 50%) var(--shine-y, 35%), rgba(255,244,198,.25), transparent 68%);
    transition: opacity .35s ease;
  }

  .xq-explore-card:hover {
    transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-7px);
  }
  .xq-explore-card:hover::after { opacity: 1; }

  .xq-chapter-progress {
    position: absolute;
    z-index: 0;
    top: 20px;
    bottom: 20px;
    left: 50%;
    width: 1px;
    overflow: hidden;
    background: rgba(16,45,61,.12);
    transform: translateX(-50%);
  }

  .xq-chapter-progress b {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--teal), var(--amber));
    transform: scaleY(var(--chapter-progress, 0));
    transform-origin: top;
    transition: transform .16s linear;
  }

  .xq-chapter-rail a { z-index: 2; }
  .xq-chapter-rail a[aria-current="page"] i {
    border-color: var(--teal) !important;
    background: var(--teal) !important;
    box-shadow: 0 0 0 5px rgba(25,123,118,.12);
    transform: scale(1.32);
  }

  @keyframes xqArtRevealV6 {
    from { opacity: 0; scale: 1.065; clip-path: inset(0 0 0 10%); }
    to { opacity: 1; scale: 1.025; clip-path: inset(0); }
  }

  @keyframes xqHeroBreath {
    from { background-position: 48% 50%; }
    to { background-position: 52% 48%; }
  }

  @keyframes xqSignalDraw { to { stroke-dashoffset: 0; } }

  @keyframes xqSignalRipple {
    0% { opacity: .8; transform: scale(.55); }
    72%, 100% { opacity: 0; transform: scale(2.7); }
  }

  @keyframes xqLogoBreathe {
    0%, 76%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 0 rgba(25,123,118,0); }
    86% { box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 0 0 7px rgba(25,123,118,.1); }
  }

  @media (max-width: 920px) {
    .xq-signal-field { right: -17%; bottom: 1%; width: 112%; height: 43%; opacity: .78; }
    .xq-hero-light { background: radial-gradient(circle 170px at var(--mx, 70%) var(--my, 63%), rgba(255,232,151,.28), transparent 72%); }
    .xq-chapter-progress {
      top: 50%;
      right: 18px;
      bottom: auto;
      left: 18px;
      width: auto;
      height: 1px;
      transform: translateY(-50%);
    }
    .xq-chapter-progress b { transform: scaleX(var(--chapter-progress, 0)); transform-origin: left; }
    .xq-explore-card:hover { transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .xq-signal-field { opacity: .28; }
    .xq-signal-orb, .xq-signal-ripple { display: none; }
    .xq-signal-path-live { stroke-dashoffset: 0; }
    .xq-hero-art { scale: 1; translate: 0; }
    .xq-site[data-motion-ready="true"] [data-motion-chapter] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  }