@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Playfair+Display:wght@500;600&display=swap");

:root {
  --gold: #c8a14a;
  --gold-deep: #a87b25;
  --gold-light: #e3c98a;
  --cream: #fff6e8;
  --cream-deep: #f5e7cd;
  --sage: #a8b59a;
  --green: #55623d;
  --green-deep: #3e492b;
  --ink: #303429;
  --muted: #6e7366;
  --white: #fffdf8;
  --line: rgba(108, 91, 49, 0.16);
  --shadow: 0 24px 70px rgba(73, 67, 43, 0.12);
  --soft-shadow: 0 12px 34px rgba(73, 67, 43, 0.09);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--cream); scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 8% 12%, rgba(227, 201, 138, 0.25), transparent 30rem),
    radial-gradient(circle at 94% 84%, rgba(168, 181, 154, 0.22), transparent 32rem),
    linear-gradient(145deg, #fffaf1 0%, var(--cream) 54%, #f5eddc 100%);
  font-family: "DM Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
button { cursor: pointer; }

.ambient { position: fixed; z-index: 0; border-radius: 999px; pointer-events: none; opacity: .58; }
.ambient-one { width: 240px; height: 240px; top: -110px; right: -70px; border: 1px solid rgba(200,161,74,.25); box-shadow: 0 0 0 34px rgba(200,161,74,.05), 0 0 0 68px rgba(200,161,74,.03); }
.ambient-two { width: 180px; height: 180px; bottom: -90px; left: -70px; border: 1px solid rgba(85,98,61,.18); box-shadow: 0 0 0 28px rgba(168,181,154,.08); }

.app-shell { position: relative; z-index: 1; width: min(100%, 820px); min-height: 100vh; margin: 0 auto; padding: 22px 24px 56px; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.brand-mark { width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(80,66,31,.08)); }
.journey-progress { width: min(340px,58vw); }
.journey-line { height: 4px; overflow: hidden; border-radius: 999px; background: rgba(85,98,61,.12); }
.journey-line span { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold),var(--gold-light)); transition: width 500ms ease; }
.journey-progress > span { display: block; margin-top: 7px; color: var(--muted); font-size: .72rem; letter-spacing: .1em; text-align: right; text-transform: uppercase; }

.screen-root { min-height: calc(100vh - 145px); }
.screen { animation: screen-in 460ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

h1, h2, h3, p { margin-top: 0; }
h1, h2, .gift-card h3 { font-family: "Playfair Display", Georgia, serif; color: var(--green-deep); }
h1 { max-width: 680px; margin: 12px auto 16px; font-size: clamp(2.55rem,7vw,4.65rem); line-height: 1; letter-spacing: -.035em; }
h2 { margin-bottom: 12px; font-size: clamp(1.95rem,5vw,3.1rem); line-height: 1.07; letter-spacing: -.025em; }
h3 { margin-bottom: 8px; color: var(--green-deep); }
.eyebrow, .kicker { color: var(--gold-deep); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.spark { display: inline-block; margin-right: 5px; animation: glint 2.2s ease-in-out infinite; }
@keyframes glint { 0%,100% { transform: rotate(0) scale(1); opacity: .65; } 50% { transform: rotate(25deg) scale(1.18); opacity: 1; } }
.lead { max-width: 600px; margin: 0 auto 26px; color: var(--muted); font-size: clamp(1rem,2.6vw,1.16rem); line-height: 1.7; }
.lead.compact { max-width: 590px; }

.welcome-screen { padding: 10px 0 30px; text-align: center; }
.hero-emblem { position: relative; width: 184px; height: 184px; margin: 20px auto 6px; display: grid; place-items: center; }
.hero-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(200,161,74,.42); }
.ring-one { border-style: dashed; animation: slow-spin 14s linear infinite; }
.ring-two { inset: 14px; border-color: rgba(168,181,154,.42); }
.hero-emblem img { width: 154px; height: 154px; object-fit: contain; object-position: right center; opacity: .9; filter: drop-shadow(0 8px 18px rgba(200,161,74,.12)); }
@keyframes slow-spin { to { transform: rotate(360deg); } }

.primary-button, .whatsapp-button {
  width: min(100%,440px); min-height: 58px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 15px 24px; border: 0; border-radius: 999px; color: var(--white);
  background: linear-gradient(135deg,var(--gold),var(--gold-deep));
  box-shadow: 0 16px 32px rgba(168,123,37,.22); font-weight: 600; text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 20px 38px rgba(168,123,37,.28); }
.primary-button > *, .secondary-button > *, .whatsapp-button > * { pointer-events: none !important; }
.primary-button, .secondary-button, .whatsapp-button { position: relative; z-index: 3; pointer-events: auto !important; touch-action: manipulation; }
.primary-button:focus-visible, .whatsapp-button:focus-visible, .answer-option:focus-visible, .secondary-button:focus-visible { outline: 3px solid rgba(200,161,74,.48); outline-offset: 3px; }
.hidden { display: none !important; }

.section-heading { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 10px; }
.section-heading h2 { margin: 2px 0 0; }
.section-count { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(200,161,74,.42); border-radius: 50%; color: var(--gold-deep); font-family: "Playfair Display",serif; }
.section-intro { max-width: 630px; margin-bottom: 24px; color: var(--muted); line-height: 1.62; }

.key-map { position: relative; height: 112px; margin: 0 0 18px; }
.laser-wave { position: absolute; inset: 0; width: 100%; height: 110px; overflow: visible; }
.laser-wave path { fill: none; stroke: rgba(200,161,74,.45); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 8 8; animation: laser-flow 4s linear infinite; }
@keyframes laser-flow { to { stroke-dashoffset: -64; } }
.map-node { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 5px; width: 76px; color: var(--muted); transform: translateX(-50%); }
.map-node:nth-of-type(1) { left: 8%; top: 8px; }
.map-node:nth-of-type(2) { left: 50%; top: 48px; }
.map-node:nth-of-type(3) { left: 92%; top: 8px; }
.node-dot { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(200,161,74,.28); border-radius: 50%; background: var(--cream); font-weight: 600; transition: 220ms ease; }
.map-node small { font-size: .64rem; white-space: nowrap; }
.map-node.is-active .node-dot { color: #3d321d; border-color: var(--gold); background: var(--gold-light); box-shadow: 0 7px 20px rgba(200,161,74,.28); transform: scale(1.1); }
.map-node.is-active small { color: var(--green-deep); font-weight: 600; }
.map-node.is-done .node-dot { color: var(--white); border-color: var(--sage); background: var(--sage); }

.discovery-card, .method-detail, .gift-card { position: relative; overflow: hidden; border: 1px solid rgba(200,161,74,.22); background: rgba(255,253,248,.9); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.discovery-card, .method-detail { min-height: 300px; padding: 28px; border-radius: 28px; }
.illustrated-card::before { content: ""; position: absolute; z-index: 0; right: -42px; bottom: -75px; width: 255px; height: 320px; background: url("belora-body-lineart.png") center bottom / contain no-repeat; opacity: .095; pointer-events: none; }
.method-detail.illustrated-card::before { right: -18px; bottom: -22px; width: 230px; height: 230px; background-image: url("belora-face-lineart.png"); opacity: .13; }
.gift-card.illustrated-card::before { right: -18px; bottom: -28px; width: 230px; height: 230px; background-image: url("belora-face-lineart.png"); opacity: .12; }
.illustrated-card > * { position: relative; z-index: 1; }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.line-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--green-deep); background: linear-gradient(145deg,rgba(227,201,138,.55),rgba(255,246,232,.6)); font-size: 1.45rem; }
.card-number { color: rgba(85,98,61,.42); font-family: "Playfair Display",serif; font-size: 1.55rem; }
.discovery-card h3, .method-detail h3 { max-width: 520px; font-size: 1.42rem; line-height: 1.25; }
.answer-copy { max-width: 560px; color: var(--muted); line-height: 1.62; animation: reveal-in 320ms ease both; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.practical-note { width: min(100%,480px); display: flex; align-items: center; gap: 12px; margin: 17px 0 4px; color: var(--green-deep); animation: reveal-in 360ms ease both; }
.practical-note span { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #5f4717; background: rgba(227,201,138,.55); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.practical-note strong { max-width: 390px; font-size: .86rem; line-height: 1.45; }
.secondary-button { min-height: 51px; padding: 12px 21px; border: 0; border-radius: 999px; color: var(--white); background: linear-gradient(135deg,var(--gold),var(--gold-deep)); box-shadow: 0 12px 25px rgba(168,123,37,.18); font-weight: 600; }
.secondary-button:hover { transform: translateY(-1px); box-shadow: 0 16px 30px rgba(168,123,37,.24); }
.card-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.method-stage { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 22px; align-items: center; }
.method-title { white-space: nowrap; font-size: clamp(1.15rem,4.6vw,2.75rem); }
.method-path { position: relative; min-height: 430px; }
.method-face { position: absolute; z-index: 0; right: -24px; bottom: 4px; width: 190px; height: 190px; object-fit: contain; opacity: .07; pointer-events: none; }
.method-path svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.method-path svg path { fill: none; stroke: rgba(200,161,74,.42); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 8; animation: laser-flow 5s linear infinite; }
.pillar-node { position: absolute; z-index: 2; width: 128px; display: flex; align-items: center; gap: 8px; color: var(--muted); }
.pillar-node:nth-of-type(1) { top: 5px; left: 108px; }
.pillar-node:nth-of-type(2) { top: 116px; left: 8px; }
.pillar-node:nth-of-type(3) { top: 232px; left: 112px; }
.pillar-node:nth-of-type(4) { top: 350px; left: 42px; }
.pillar-node > span { flex: 0 0 auto; display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid var(--line); border-radius: 50%; background: var(--cream); font-size: 1.05rem; box-shadow: 0 6px 16px rgba(73,67,43,.06); }
.pillar-node small { max-width: 72px; font-size: .66rem; line-height: 1.25; }
.pillar-node.is-active > span { color: #3d321d; border-color: var(--gold); background: var(--gold-light); box-shadow: 0 8px 22px rgba(200,161,74,.3); animation: pillar-pulse 2s ease-in-out infinite; }
.pillar-node.is-active small { color: var(--green-deep); font-weight: 600; }
.pillar-node.is-done > span { color: var(--white); border-color: var(--sage); background: var(--sage); }
@keyframes pillar-pulse { 50% { transform: scale(1.08); box-shadow: 0 8px 28px rgba(200,161,74,.42); } }

.express-intro-screen, .processing-screen, .result-screen, .gift-screen { max-width: 690px; margin: 0 auto; text-align: center; }
.completion-halo { width: 88px; height: 88px; margin: 6px auto 22px; display: grid; place-items: center; border-radius: 50%; color: #3d321d; background: var(--gold-light); box-shadow: 0 0 0 12px rgba(227,201,138,.18),0 16px 32px rgba(168,123,37,.16); font-size: 1.8rem; }
.express-intro-screen .primary-button { margin-top: 8px; }

.question-screen { max-width: 650px; margin: 0 auto; }
.question-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; color: var(--muted); font-size: .76rem; }
.question-progress > div { flex: 1; height: 4px; overflow: hidden; border-radius: 99px; background: var(--line); }
.question-progress i { display: block; width: 20%; height: 100%; background: linear-gradient(90deg,var(--gold-light),var(--gold)); transition: width 300ms ease; }
.answer-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 22px 0; }
.answer-option { min-height: 72px; display: flex; align-items: center; gap: 13px; padding: 14px 17px; border: 1px solid var(--line); border-radius: 18px; color: var(--green-deep); background: rgba(255,253,248,.78); text-align: left; transition: 180ms ease; }
.answer-option:hover { border-color: rgba(200,161,74,.58); transform: translateY(-1px); }
.answer-option.is-selected { border-color: var(--gold); background: rgba(227,201,138,.24); box-shadow: 0 8px 20px rgba(200,161,74,.12); }
.option-icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 13px; color: var(--green); background: rgba(168,181,154,.2); }
.option-icon.swatch { background: var(--swatch); border: 3px solid rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(85,98,61,.22), inset 0 0 0 1px rgba(0,0,0,.04); }
.question-screen .primary-button { display: flex; margin: 18px auto 0; }

.analysis-orbit { position: relative; width: 166px; height: 166px; margin: 12px auto 24px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(200,161,74,.38); }
.analysis-orbit::before, .analysis-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(200,161,74,.5); animation: slow-spin 4s linear infinite; }
.analysis-orbit::before { inset: 8px; }
.analysis-orbit::after { inset: -9px; border-color: rgba(168,181,154,.46); animation-direction: reverse; animation-duration: 6s; }
.analysis-orbit img { width: 120px; height: 120px; object-fit: contain; opacity: .5; }
.analysis-pulse { position: absolute; inset: 44px; border-radius: 50%; background: rgba(227,201,138,.2); animation: analysis-pulse 1.5s ease-in-out infinite; }
@keyframes analysis-pulse { 50% { inset: 33px; opacity: .35; } }
.processing-screen h2 { max-width: 580px; margin-left: auto; margin-right: auto; }
.processing-copy { min-height: 50px; max-width: 540px; margin: 0 auto 24px; color: var(--muted); line-height: 1.6; }
.processing-bar { width: min(100%,470px); height: 7px; margin: 0 auto; overflow: hidden; border-radius: 99px; background: rgba(200,161,74,.13); }
.processing-bar span { display: block; width: 10%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--gold-light),var(--gold)); transition: width 700ms ease; }

.result-badge, .gift-ribbon { width: fit-content; margin: 0 auto 16px; padding: 8px 13px; border-radius: 999px; color: var(--green-deep); background: rgba(168,181,154,.22); font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.result-badge span { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 5px; border-radius: 50%; color: var(--white); background: var(--sage); }
.benefit-tease { width: fit-content; max-width: 100%; margin: 0 auto 22px; padding: 10px 15px; border-radius: 999px; color: #6c511c; background: rgba(227,201,138,.27); font-size: .8rem; }
.benefit-tease span { color: var(--gold-deep); }
.result-label { margin: 0 0 10px; color: var(--muted); font-size: .84rem; text-align: left; }
.result-summary { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin: 0 0 18px; }
.summary-item:last-child { grid-column: 1 / -1; }
.summary-item { padding: 15px 12px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.78); }
.summary-item span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .66rem; letter-spacing: .09em; text-transform: uppercase; }
.summary-item strong { color: var(--green-deep); font-size: .86rem; }
.orientation-card { display: flex; gap: 15px; align-items: flex-start; margin: 18px 0; padding: 23px; border: 1px solid rgba(200,161,74,.28); border-radius: 23px; background: linear-gradient(145deg,rgba(255,253,248,.96),rgba(255,246,232,.9)); color: var(--ink); text-align: left; box-shadow: var(--soft-shadow); }
.orientation-icon { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: #5d4618; background: var(--gold-light); font-size: 1.3rem; }
.orientation-card h3 { color: var(--green-deep); }
.orientation-card p { margin: 0; color: var(--muted); line-height: 1.58; font-size: .89rem; }
.orientation-card .compatibility-copy { margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(200,161,74,.22); color: var(--green-deep); font-weight: 500; }
.disclaimer { margin: 17px auto 25px; color: var(--muted); font-size: .78rem; line-height: 1.58; }

.gift-ribbon { color: #765a1d; background: rgba(227,201,138,.32); }
.gift-card { margin: 22px 0 27px; padding: 28px; border-radius: 28px; }
.premium-gift-card { border: 1px solid rgba(200,161,74,.45); background: linear-gradient(145deg,var(--cream),#f4e4c6); box-shadow: 0 22px 60px rgba(168,123,37,.18), inset 0 0 0 7px rgba(255,253,248,.52); }
.premium-gift-card::after { content: ""; position: absolute; inset: 12px; z-index: 0; border: 1px dashed rgba(168,123,37,.28); border-radius: 20px; pointer-events: none; }
.gift-icon { width: 58px; height: 58px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 18px; color: #5e4517; background: linear-gradient(145deg,var(--gold-light),#f0dba9); box-shadow: 0 10px 24px rgba(168,123,37,.2); font-size: 1.5rem; transform: rotate(-3deg); }
.gift-topline { margin-bottom: 7px; color: var(--gold-deep); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.gift-card h3 { max-width: 530px; margin: 0 auto 15px; font-size: clamp(1.45rem,4vw,2rem); }
.gift-card p { max-width: 500px; margin: 15px auto 0; color: var(--muted); line-height: 1.58; }
.free-seal { width: fit-content; margin: 0 auto; padding: 7px 12px; border-radius: 999px; color: var(--white); background: var(--green); font-size: .77rem; text-transform: uppercase; letter-spacing: .05em; }
.free-seal span { color: var(--gold-light); font-weight: 600; }
.free-seal .gift-box { color: inherit; font-size: 1rem; }

.contrast-screen { position: relative; padding: 28px; border: 1px solid rgba(200,161,74,.14); border-radius: 34px; background: rgba(255,253,248,.94); box-shadow: 0 24px 70px rgba(73,67,43,.09); }
.contrast-screen .method-detail, .contrast-screen .benefit-item { background: rgba(255,246,232,.82); }
.contrast-screen .section-intro, .contrast-screen .lead, .contrast-screen .gift-card p, .contrast-screen .benefit-item span, .contrast-screen .cta-note { color: #62675b; }
.benefits-title { margin-bottom: 14px; font-family: "DM Sans",sans-serif; font-size: 1.06rem; }
.benefit-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 8px; margin-bottom: 22px; }
.benefit-item { min-height: 116px; display: grid; place-content: center; gap: 7px; padding: 13px 9px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,253,248,.72); animation: reveal-in 340ms ease both; }
.benefit-item:nth-child(2) { animation-delay: 50ms; } .benefit-item:nth-child(3) { animation-delay: 100ms; } .benefit-item:nth-child(4) { animation-delay: 150ms; } .benefit-item:nth-child(5) { animation-delay: 200ms; }
.benefit-item b { color: var(--gold-deep); font-size: 1.15rem; }
.benefit-item strong { color: var(--green-deep); font-size: .73rem; }
.benefit-item span { color: var(--muted); font-size: .65rem; line-height: 1.32; }
.whatsapp-button { width: 100%; color: var(--white); background: linear-gradient(135deg,#3f8c58,#277342); box-shadow: 0 16px 32px rgba(39,115,66,.2); }
.whatsapp-button:hover { transform: translateY(-2px); box-shadow: 0 20px 38px rgba(39,115,66,.27); }
.whatsapp-dot { color: #a6efb2; font-size: 1.2rem; }
.cta-note { margin-top: 10px; color: var(--muted); font-size: .75rem; }

@media (max-width: 700px) {
  .app-shell { padding: 14px 16px 44px; }
  .app-header { margin-bottom: 17px; }
  .brand-mark { width: 65px; height: 65px; }
  .journey-progress { width: 60vw; }
  .section-heading { gap: 12px; }
  .section-count { width: 40px; height: 40px; }
  .key-map { height: 108px; }
  .map-node { width: 42px; }
  .map-node small { display: none; }
  .node-dot { width: 36px; height: 36px; font-size: .78rem; }
  .map-node:nth-of-type(1) { left: 8%; top: 10px; } .map-node:nth-of-type(2) { left: 50%; top: 48px; } .map-node:nth-of-type(3) { left: 92%; top: 10px; }
  .discovery-card, .method-detail { min-height: 318px; padding: 22px; border-radius: 24px; }
  .illustrated-card::before { right: -62px; width: 230px; opacity: .08; }
  .method-stage { grid-template-columns: 1fr; gap: 12px; }
  .method-path { min-height: 300px; width: min(100%,320px); margin: 0 auto; }
  .method-path svg { transform: none; }
  .method-face { right: -6px; bottom: 28px; width: 180px; height: 180px; opacity: .09; }
  .pillar-node:nth-of-type(1) { top: 0; left: 52%; }
  .pillar-node:nth-of-type(2) { top: 78px; left: 3%; }
  .pillar-node:nth-of-type(3) { top: 158px; left: 53%; }
  .pillar-node:nth-of-type(4) { top: 242px; left: 18%; }
  .pillar-node > span { width: 45px; height: 45px; }
  .pillar-node small { font-size: .62rem; }
  .answer-grid { grid-template-columns: 1fr; }
  .answer-option { min-height: 62px; }
  .result-summary { grid-template-columns: 1fr; }
  .summary-item:last-child { grid-column: auto; }
  .summary-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
  .summary-item span { margin: 0; }
  .benefit-grid { grid-template-columns: repeat(2,1fr); }
  .benefit-item:last-child { grid-column: 1 / -1; min-height: 96px; }
  .contrast-screen { margin-inline: -8px; padding: 24px 16px; border-radius: 28px; }
}

@media (max-width: 390px) {
  h1 { font-size: 2.42rem; }
  h2 { font-size: 1.82rem; }
  .hero-emblem { width: 166px; height: 166px; }
  .hero-emblem img { width: 140px; height: 140px; }
  .map-node:nth-of-type(1) { left: 9%; } .map-node:nth-of-type(3) { left: 91%; }
  .practical-note { align-items: flex-start; }
  .orientation-card { padding: 18px; }
  .orientation-icon { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}