:root {
  --lavender: #f3effb;
  --lavender-deep: #eae4f5;
  --purple: #271042;
  --purple-soft: #3a1c5c;
  --pink: #ff2a85;
  --pink-deep: #e0115f;
  --cyan: #80f5d4;
  --cyan-soft: #a6e3e9;
  --ink: #241832;
  --muted: #6f6382;
  --line: rgba(58, 28, 92, .14);
  --shadow: 0 22px 65px rgba(39, 16, 66, .13);
  --radius: 16px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--lavender); font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif; line-height: 1.75; text-rendering: optimizeLegibility; }
body:has(.lightbox[open]) { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.1em; height: 1.1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -60px; padding: 10px 16px; border-radius: 16px; color: #fff; background: var(--purple); transition: top .2s; }
.skip-link:focus { top: 16px; }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; background: rgba(243, 239, 251, .78); border-bottom: 1px solid transparent; backdrop-filter: blur(16px); transition: background .25s, border-color .25s, box-shadow .25s; }
.site-header.is-scrolled { background: rgba(243, 239, 251, .94); border-color: var(--line); box-shadow: 0 8px 30px rgba(39, 16, 66, .08); }
.nav-wrap { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 10px; min-width: max-content; }
.brand img { width: 48px; height: 44px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 22px rgba(39,16,66,.15); }
.brand strong, .footer-brand span { display: block; color: var(--purple); font-size: 15px; line-height: 1.2; letter-spacing: .02em; }
.brand small, .footer-brand small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.primary-nav { display: flex; align-items: center; gap: 21px; font-size: 13px; font-weight: 700; }
.primary-nav > a { display: inline-flex; align-items: center; gap: 6px; }
.primary-nav > a:not(.nav-cta) { position: relative; color: var(--purple-soft); }
.primary-nav > a:not(.nav-cta)::after { content: ""; position: absolute; right: 0; bottom: -7px; left: 0; height: 2px; transform: scaleX(0); transform-origin: right; background: var(--pink); transition: transform .3s ease; }
.primary-nav > a:not(.nav-cta):hover::after, .primary-nav > a.active::after { transform: scaleX(1); transform-origin: left; }
.nav-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; font-weight: 800; transition: transform .3s ease, box-shadow .3s ease, filter .3s ease, background .3s ease, color .3s ease; }
.nav-cta { padding: 10px 16px; color: #fff; background: var(--pink); box-shadow: 0 7px 18px rgba(255, 42, 133, .25); }
.nav-cta:hover, .button:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); box-shadow: 0 13px 28px rgba(255, 42, 133, .3); }
.menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 16px; background: transparent; }
.menu-toggle span { display: block; width: 19px; height: 2px; margin: 4px auto; background: var(--purple); border-radius: 2px; transition: transform .3s ease, opacity .3s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.hero { position: relative; min-height: 760px; display: grid; align-items: center; overflow: hidden; color: #fff; background: var(--purple); }
.hero-media { position: absolute; inset: 0; background: url("img/tu1.webp") center/cover no-repeat; transform: scale(1.01); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29, 9, 52, .9) 0%, rgba(39, 16, 66, .63) 42%, rgba(39, 16, 66, .16) 100%), linear-gradient(0deg, rgba(39,16,66,.64), transparent 40%); }
.hero-inner { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; padding-top: 112px; padding-bottom: 78px; }
.hero-copy { max-width: 660px; }
.eyebrow, .kicker { margin: 0 0 14px; color: var(--pink); font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.hero .eyebrow { color: var(--cyan); }
.live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 5px rgba(255,42,133,.15), 0 0 18px var(--pink); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 630px; margin-bottom: 18px; font-size: clamp(42px, 6vw, 72px); line-height: 1.08; letter-spacing: 0; text-wrap: balance; }
.hero-lead { max-width: 620px; margin-bottom: 28px; color: rgba(255,255,255,.85); font-size: clamp(17px, 2vw, 20px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 48px; padding: 0 22px; font-size: 14px; }
.button-primary { color: #fff; background: var(--pink); box-shadow: 0 12px 26px rgba(255,42,133,.26); }
.button-ghost { color: #fff; border: 1px solid rgba(255,255,255,.45); background: rgba(255,255,255,.08); }
.button-ghost:hover { border-color: var(--cyan); background: rgba(128,245,212,.16); box-shadow: 0 13px 28px rgba(128,245,212,.16); }
.hero-facts { display: flex; flex-wrap: wrap; gap: 20px; margin: 46px 0 0; }
.hero-facts div { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3); }
.hero-facts dt { color: rgba(255,255,255,.56); font-size: 11px; }
.hero-facts dd { margin: 2px 0 0; color: #fff; font-size: 13px; }
.hero-note { display: flex; align-items: center; gap: 13px; align-self: flex-end; color: rgba(255,255,255,.68); font-size: 12px; letter-spacing: .08em; writing-mode: vertical-rl; }
.note-line { width: 1px; height: 74px; background: linear-gradient(var(--cyan), transparent); }

.section { padding: 122px 0; content-visibility: auto; contain-intrinsic-size: 700px; }
.intro-section { background: var(--lavender); }
.split-layout { display: grid; grid-template-columns: minmax(230px, .75fr) minmax(0, 1.25fr); gap: clamp(42px, 9vw, 150px); }
.section-heading h2 { margin-bottom: 18px; color: var(--purple); font-size: clamp(30px, 4vw, 48px); line-height: 1.16; letter-spacing: 0; }
.heading-summary { max-width: 360px; margin-bottom: 0; color: var(--muted); font-size: 16px; }
.intro-heading-image { overflow: hidden; margin: 30px 0 0; border-radius: 12px; background: var(--purple); box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
.intro-heading-image:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(39,16,66,.18), 0 0 22px rgba(255,42,133,.12); }
.intro-heading-image img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s ease, filter .3s ease; }
.intro-heading-image:hover img { transform: scale(1.025); filter: saturate(1.05); }
.intro-copy { padding-top: 6px; color: #51455e; font-size: 16px; }
.intro-copy p { margin-bottom: 22px; }
.meta-strip { display: flex; flex-wrap: wrap; gap: 13px 22px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.meta-strip b { display: block; margin-bottom: 2px; color: var(--purple); font-size: 11px; }

.content-section { background: #fff; }
.centered { text-align: center; }
.centered .heading-summary { max-width: 550px; margin-right: auto; margin-left: auto; }
.content-stories { display: grid; gap: 54px; margin-top: 58px; }
.content-story { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 6vw, 78px); }
.content-story:nth-child(even) figure { order: 2; }
.content-story figure { overflow: hidden; margin: 0; border-radius: 12px; background: var(--purple); box-shadow: var(--shadow); transition: transform .3s ease, box-shadow .3s ease; }
.content-story figure:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(39,16,66,.18), 0 0 22px rgba(255,42,133,.12); }
.content-story figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .3s ease; }
.content-story:hover figure img { transform: scale(1.025); }
.content-story-copy > span { display: block; margin-bottom: 12px; color: var(--pink-deep); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.content-story-copy h3 { margin-bottom: 12px; color: var(--purple); font-size: clamp(22px, 2.5vw, 31px); line-height: 1.3; }
.content-story-copy p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.9; }

.guide-section { background: var(--lavender-deep); }
.guide-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 38px 0 28px; }
.guide-filter { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 17px; border: 1px solid rgba(58,28,92,.18); border-radius: 999px; color: var(--purple-soft); background: rgba(255,255,255,.58); font-size: 13px; font-weight: 800; cursor: pointer; transition: transform .3s ease, color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, filter .3s ease; }
.guide-filter:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.04); border-color: rgba(255,42,133,.4); box-shadow: 0 9px 24px rgba(39,16,66,.1), 0 0 18px rgba(255,42,133,.12); }
.guide-filter.is-active { color: #fff; border-color: var(--pink); background: var(--pink); box-shadow: 0 8px 22px rgba(255,42,133,.25); }
.guide-filter:focus-visible, .gallery-card button:focus-visible, .lightbox button:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.guide-card { min-height: 250px; display: flex; flex-direction: column; padding: 25px; border: 1px solid rgba(58,28,92,.14); border-radius: 16px; background: rgba(255,255,255,.72); box-shadow: 0 12px 30px rgba(39,16,66,.05); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, filter .3s ease; }
.guide-card:hover { transform: translateY(-7px); border-color: rgba(255,42,133,.48); box-shadow: 0 18px 42px rgba(39,16,66,.14), 0 0 25px rgba(255,42,133,.12); }
.guide-card[hidden] { display: none; }
.guide-tag { align-self: flex-start; margin-bottom: 18px; padding: 4px 10px; border-radius: 4px; color: var(--pink-deep); background: rgba(255,42,133,.1); font-size: 11px; font-weight: 800; }
.guide-card h3 { margin-bottom: 9px; color: var(--purple); font-size: 19px; line-height: 1.4; }
.guide-card p { margin-bottom: 24px; color: var(--muted); font-size: 14px; line-height: 1.75; }
.guide-views { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: #8a7d98; font-size: 12px; }
.guide-empty { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 150px; margin: 0; border: 1px dashed rgba(58,28,92,.24); border-radius: 16px; color: var(--muted); background: rgba(255,255,255,.48); text-align: center; }

.gallery-section { background: #1d0b31; }
.gallery-section .section-heading h2 { color: #fff; }
.gallery-section .heading-summary { color: rgba(255,255,255,.64); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 50px; }
.gallery-card { position: relative; overflow: hidden; aspect-ratio: 16 / 9; margin: 0; border-radius: 12px; background: var(--purple); transition: transform .3s ease, box-shadow .3s ease; }
.gallery-card button { width: 100%; height: 100%; display: block; padding: 0; border: 0; color: #fff; background: transparent; cursor: zoom-in; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease, filter .3s ease; }
.gallery-card:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(0,0,0,.24), 0 0 24px rgba(255,42,133,.16); }
.gallery-card:hover img { transform: scale(1.05); filter: saturate(1.08) brightness(1.05); }
.gallery-card::after { content: ""; position: absolute; inset: auto 0 0; height: 44%; background: linear-gradient(transparent, rgba(39,16,66,.82)); }
.gallery-card figcaption { position: absolute; z-index: 1; right: 48px; bottom: 14px; left: 16px; color: #fff; font-size: 13px; font-weight: 700; pointer-events: none; }
.gallery-zoom { position: absolute; z-index: 2; right: 13px; bottom: 12px; display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid rgba(255,255,255,.32); border-radius: 50%; background: rgba(29,11,49,.68); backdrop-filter: blur(8px); }

.features-section { background: var(--purple); color: #fff; }
.features-section .section-heading h2 { color: #fff; }
.features-section .heading-summary { color: rgba(255,255,255,.65); }
.feature-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.feature-point { min-height: 236px; padding: 26px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: rgba(255,255,255,.065); backdrop-filter: blur(10px); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease; }
.feature-point:hover { transform: translateY(-7px); border-color: rgba(128,245,212,.55); background: rgba(255,255,255,.09); box-shadow: 0 18px 42px rgba(0,0,0,.22), 0 0 26px rgba(128,245,212,.12); }
.feature-icon { display: grid; width: 46px; height: 46px; margin-bottom: 25px; place-items: center; border-radius: 12px; color: var(--cyan); background: rgba(128,245,212,.1); font-size: 24px; transition: transform .3s ease, color .3s ease; }
.feature-point:hover .feature-icon { transform: translateY(-3px) rotate(4deg) scale(1.07); color: #fff; }
.feature-point h3 { margin-bottom: 8px; color: #fff; font-size: 18px; }
.feature-point p { margin: 0; color: rgba(255,255,255,.68); font-size: 14px; line-height: 1.75; }

.updates-section { background: var(--lavender); }
.updates-list { display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%; margin: 48px 0 0; padding: 0; list-style: none; }
.updates-list li { display: grid; grid-template-columns: 50px 1fr; gap: 18px; width: 100%; padding: 23px 26px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.62); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.updates-list li:hover { transform: translateX(5px); border-color: rgba(255,42,133,.34); box-shadow: 0 12px 30px rgba(39,16,66,.08); }
.updates-list li > span { color: var(--pink); font-weight: 900; }
.updates-list h3 { margin-bottom: 4px; color: var(--purple); font-size: 17px; }
.updates-list p { margin: 0; color: var(--muted); font-size: 14px; }

.faq-section { background: #fff; }
.faq-layout { display: block; }
.faq-layout > .section-heading { margin-bottom: 44px; }
.faq-list { display: grid; gap: 10px; width: min(980px, 100%); margin-inline: auto; }
.faq-item { border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.faq-item:hover { transform: translateY(-3px); border-color: rgba(255,42,133,.35); box-shadow: 0 12px 28px rgba(39,16,66,.1), 0 0 18px rgba(255,42,133,.08); }
.faq-item[open] { border-color: rgba(255,42,133,.35); box-shadow: 0 11px 26px rgba(39,16,66,.06); }
.faq-item summary { position: relative; padding: 18px 48px 18px 21px; color: var(--purple); font-size: 15px; font-weight: 800; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 21px; color: var(--pink); font-size: 21px; line-height: 1; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: -3px 22px 19px; color: var(--muted); font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding-bottom: 5px; border-bottom: 2px solid var(--pink); color: var(--pink-deep); font-size: 14px; font-weight: 800; }

.floating-cta { position: fixed; z-index: 45; right: 24px; bottom: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 19px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; background: var(--pink); box-shadow: 0 14px 36px rgba(39,16,66,.28), 0 0 24px rgba(255,42,133,.24); font-size: 14px; font-weight: 800; transition: transform .3s ease, box-shadow .3s ease, filter .3s ease; }
.floating-cta:hover { transform: translateY(-4px) scale(1.05); filter: brightness(1.08); box-shadow: 0 18px 42px rgba(39,16,66,.34), 0 0 28px rgba(255,42,133,.34); }

.lightbox { width: min(1120px, calc(100vw - 48px)); max-width: none; padding: 0; border: 0; overflow: visible; color: #fff; background: transparent; }
.lightbox::backdrop { background: rgba(13,5,22,.9); backdrop-filter: blur(12px); }
.lightbox figure { margin: 0; }
.lightbox figure img { width: 100%; max-height: 82vh; border-radius: 12px; object-fit: contain; background: #12071f; box-shadow: 0 26px 80px rgba(0,0,0,.5); }
.lightbox figcaption { margin-top: 10px; color: rgba(255,255,255,.78); text-align: center; font-size: 13px; }
.lightbox button { position: absolute; z-index: 2; display: grid; width: 46px; height: 46px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 50%; color: #fff; background: rgba(29,11,49,.78); cursor: pointer; transition: transform .2s, background .2s; }
.lightbox button:hover { transform: scale(1.06); background: var(--pink); }
.lightbox-close { top: -58px; right: 0; }
.lightbox-nav { top: 50%; transform: translateY(-50%); }
.lightbox-nav:hover { transform: translateY(-50%) scale(1.06) !important; }
.lightbox-prev { left: -62px; }
.lightbox-next { right: -62px; }

.friendly-links { padding: 48px 0 50px; background: var(--lavender-deep); text-align: center; }
.friendly-links h2 { margin: 0 0 24px; color: var(--purple); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; }
.friendly-links-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.friend-link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; max-width: 100%; padding: 0 19px; border: 1px solid rgba(58,28,92,.1); border-radius: 999px; color: var(--purple-soft); background: rgba(255,255,255,.92); box-shadow: 0 8px 22px rgba(39,16,66,.08); font-size: 13px; font-weight: 800; line-height: 1.4; transition: transform .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease; }
.friend-link:hover { transform: translateY(-3px) scale(1.02); color: #fff; background: var(--pink); box-shadow: 0 12px 28px rgba(255,42,133,.25); }

.site-footer { padding: 25px 0; background: #1d0b31; color: rgba(255,255,255,.6); font-size: 12px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-brand img { width: 38px; height: 34px; object-fit: cover; border-radius: 10px; }
.footer-brand span { color: #fff; font-size: 12px; }
.footer-brand small { color: rgba(255,255,255,.48); font-size: 9px; }
.footer-inner p { margin: 0; }
.back-top { display: inline-flex; align-items: center; gap: 6px; color: var(--cyan); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal-left { transform: translateX(-34px); }
.reveal-right { transform: translateX(34px); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal.guide-card, .reveal.feature-point, .reveal.gallery-card { transition: opacity .6s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease, background .3s ease, filter .3s ease; }
.reveal.is-visible.guide-card:hover { transform: translateY(-7px); }
.reveal.is-visible.feature-point:hover { transform: translateY(-7px); }
.reveal.is-visible.gallery-card:hover { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .primary-nav { gap: 8px; font-size: 12px; }
  .primary-nav > a { gap: 4px; }
  .guide-grid, .feature-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-layout, .faq-layout { gap: 44px; }
}
@media (max-width: 840px) {
  .container { width: min(var(--container), calc(100% - 32px)); }
  .nav-wrap { min-height: 67px; }
  .menu-toggle { display: block; }
  .primary-nav { position: absolute; top: calc(100% + 8px); right: 16px; left: 16px; display: grid; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.97); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s, visibility .2s, transform .2s; }
  .primary-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .primary-nav > a { padding: 10px 12px; }
  .primary-nav > a:not(.nav-cta)::after { display: none; }
  .nav-cta { margin-top: 5px; }
  .hero { min-height: 700px; }
  .hero-inner { display: block; padding-top: 150px; padding-bottom: 58px; }
  .hero-note { display: none; }
  .hero-facts { gap: 12px; margin-top: 34px; }
  .hero-facts div { flex: 1 1 30%; }
  .section { padding: 86px 0; }
  .split-layout, .faq-layout { display: block; }
  .section-heading { margin-bottom: 36px; }
  .content-stories { gap: 44px; margin-top: 42px; }
  .content-story { grid-template-columns: 1fr; gap: 22px; }
  .content-story:nth-child(even) figure { order: initial; }
  .content-story-copy p { line-height: 1.8; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .feature-points { margin-top: 36px; }
  .faq-list { margin-top: 36px; }
  .lightbox { width: calc(100vw - 24px); }
  .lightbox-close { top: 10px; right: 10px; }
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox button { width: 42px; height: 42px; background: rgba(29,11,49,.84); }
  .floating-cta { right: 16px; bottom: 16px; min-height: 46px; padding: 0 16px; }
  .footer-inner { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  h1 { font-size: clamp(38px, 12vw, 54px); }
  .guide-grid, .feature-points, .gallery-grid { grid-template-columns: 1fr; }
  .guide-filters { justify-content: flex-start; }
  .guide-filter { flex: 1 1 calc(33.333% - 9px); padding: 0 12px; }
  .guide-card { min-height: 220px; }
  .feature-point { min-height: 0; }
  .updates-list li { grid-template-columns: 36px 1fr; gap: 10px; padding: 20px 17px; }
  .floating-cta span { display: none; }
  .floating-cta { width: 48px; padding: 0; border-radius: 50%; }
  .floating-cta .icon { width: 20px; height: 20px; }
  .hero-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-facts div:last-child { grid-column: span 2; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}