:root {
  --cream: #f7f2e8;
  --paper: #fffdf8;
  --pine: #123f32;
  --ink: #16312a;
  --safe: #15945e;
  --safe-deep: #087446;
  --coral: #ed6652;
  --sand: #d9ccb8;
  --danger: #c9483d;
  --amber: #d99027;
}

* { box-sizing: border-box; }
html { background: var(--cream); }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
button { font: inherit; }

.page {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 38%, rgba(255,255,255,.84), transparent 34rem),
    repeating-radial-gradient(ellipse at 4% 54%, transparent 0 43px, rgba(217,204,184,.2) 44px 45px, transparent 46px 88px),
    var(--cream);
  transition: color .7s cubic-bezier(.22,1,.36,1);
}

.page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 35%, rgba(92,220,157,.34), transparent 34rem),
    linear-gradient(145deg, #0d7d4b, #17a967 55%, #0b7446);
  opacity: 0;
  transition: opacity .85s cubic-bezier(.22,1,.36,1);
}
.page--safe::before { opacity: 1; }

.site-header {
  position: relative;
  z-index: 20;
  height: 76px;
  padding: 0 clamp(20px, 3vw, 46px);
  border-bottom: 1px solid rgba(139,119,88,.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color .7s ease;
}
.page--safe .site-header { border-color: rgba(255,255,255,.24); }

.brand { display: flex; align-items: center; gap: 14px; color: var(--pine); font-size: 14px; font-weight: 800; letter-spacing: .045em; transition: color .65s ease; }
.brand b { color: var(--coral); }
.page--safe .brand, .page--safe .help-button { color: white; }
.page--safe .brand b { color: #c9ffe4; }

.brand-mark { position: relative; width: 35px; height: 35px; display: inline-block; }
.brand-mark::before { content: ""; position: absolute; left: 8px; bottom: 8px; width: 20px; height: 24px; background: currentColor; clip-path: polygon(50% 0,68% 28%,58% 28%,80% 62%,60% 62%,88% 100%,12% 100%,40% 62%,20% 62%,42% 28%,32% 28%); }
.brand-mark i { position: absolute; left: 16px; width: 20px; height: 7px; border-bottom: 2px solid var(--safe); border-radius: 50%; transition: border-color .65s ease; }
.brand-mark i:nth-child(1) { top: 12px; }
.brand-mark i:nth-child(2) { top: 19px; left: 18px; }
.brand-mark i:nth-child(3) { top: 26px; }
.page--safe .brand-mark i { border-color: #bff7d8; }

.help-button { border: 0; background: transparent; color: var(--ink); display: flex; align-items: center; gap: 9px; cursor: pointer; transition: color .65s ease; }
.help-button span { width: 30px; height: 32px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 50%; font-weight: 900; }
.help-button b { font-size: 14px; }

.access-screen {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 44px));
  min-height: calc(100svh - 146px);
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: 28px 0;
}

.access-card { width: 100%; display: grid; grid-template-columns: .92fr 1.08fr; align-items: center; gap: clamp(46px,7vw,104px); }
.access-visual { display: grid; place-items: center; }
.access-radar { position: relative; width: min(38vw, 430px); aspect-ratio: 1; border: 1px solid rgba(18,63,50,.2); border-radius: 50%; display: grid; place-items: center; background: rgba(255,253,248,.42); box-shadow: inset 0 0 0 36px rgba(255,253,248,.25), 0 30px 90px rgba(55,42,17,.08); }
.access-radar::before, .access-radar::after { content: ""; position: absolute; border: 1px solid rgba(18,63,50,.14); border-radius: 50%; }
.access-radar::before { inset: 19%; }
.access-radar::after { inset: 38%; }
.access-radar > i { position: absolute; left: 50%; top: 50%; width: 50%; height: 1px; transform-origin: left center; background: linear-gradient(90deg, rgba(18,63,50,.23), transparent); }
.access-radar > i:nth-of-type(1) { transform: rotate(0deg); }
.access-radar > i:nth-of-type(2) { transform: rotate(120deg); }
.access-radar > i:nth-of-type(3) { transform: rotate(240deg); }
.access-pin { position: relative; z-index: 3; width: 82px; height: 82px; border-radius: 50% 50% 50% 10%; transform: rotate(-45deg); background: var(--pine); color: var(--coral); display: grid; place-items: center; font-size: 25px; box-shadow: 0 20px 38px rgba(18,63,50,.22); animation: pin-breathe 2.8s ease-in-out infinite; }
.access-pin::after { content: ""; width: 32px; height: 32px; border-radius: 50%; border: 4px solid var(--paper); }

.access-copy { max-width: 520px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: #806f54; font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.eyebrow span { font-size: 29px; color: #bda778; letter-spacing: -.2em; transform: rotate(90deg); }
h1 { margin: 18px 0 20px; color: var(--pine); font-size: clamp(64px,7.5vw,104px); line-height: .84; letter-spacing: -.066em; font-weight: 900; }
.access-lead { max-width: 500px; margin: 0 0 22px; color: var(--ink); font-size: clamp(18px,1.7vw,23px); line-height: 1.42; }

.primary-button, .modal-action { width: 100%; min-height: 68px; border: 0; border-radius: 16px; background: var(--pine); color: white; display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 18px; font-weight: 850; cursor: pointer; box-shadow: 0 17px 36px rgba(18,63,50,.18); transition: transform .26s cubic-bezier(.22,1,.36,1), box-shadow .26s ease, background .26s ease; }
.primary-button:hover { transform: translateY(-3px); box-shadow: 0 21px 42px rgba(18,63,50,.24); }
.primary-button:active { transform: scale(.985); }
.primary-button:disabled { opacity: .68; cursor: wait; transform: none; }
.button-icon { font-size: 26px; }
.access-button { max-width: 460px; }
.privacy-note { margin: 14px 0 0; color: #6e675c; font-size: 12px; }
.privacy-note span { color: var(--safe); margin-right: 6px; }

.permission-progress { padding: 8px 0 0; }
.permission-progress h2, .gate-message h2 { margin: 18px 0 8px; color: var(--pine); font-size: clamp(32px,4vw,50px); line-height: 1; letter-spacing: -.045em; }
.permission-progress > p, .gate-message > p { margin: 0; font-size: 17px; line-height: 1.5; }
.loading-orb { position: relative; width: 74px; height: 74px; border-radius: 50%; background: var(--pine); display: grid; place-items: center; }
.loading-orb i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: white; animation: loading-wave 1.1s ease-in-out infinite; }
.loading-orb i:nth-child(1) { --x: -18px; animation-delay: -.22s; }
.loading-orb i:nth-child(3) { --x: 18px; animation-delay: .22s; }
.progress-steps { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 9px; }
.progress-steps span { padding: 9px 12px; border: 1px solid rgba(18,63,50,.14); border-radius: 999px; background: rgba(255,255,255,.56); font-size: 12px; font-weight: 700; }
.progress-steps b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 5px; border-radius: 50%; background: var(--pine); color: white; font-size: 10px; }

.gate-message { max-width: 520px; }
.gate-symbol { width: 74px; height: 74px; margin-bottom: 16px; border-radius: 50%; display: grid; place-items: center; background: var(--coral); color: white; font-size: 36px; font-weight: 900; box-shadow: 0 14px 34px rgba(237,102,82,.22); }
.gate-message .primary-button { max-width: 390px; margin-top: 24px; }
.modal-kicker { color: var(--coral); font-size: 11px; font-weight: 900; letter-spacing: .15em; }

.active-screen { position: relative; z-index: 2; width: min(1040px, calc(100% - 40px)); min-height: calc(100svh - 142px); margin: 0 auto; padding: 18px 0 20px; display: grid; grid-template-rows: auto auto 1fr auto; gap: 13px; }
.active-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wind-pill, .location-pill { min-height: 54px; border: 1px solid rgba(139,119,88,.25); border-radius: 15px; background: rgba(255,253,248,.78); backdrop-filter: blur(16px); display: flex; align-items: center; color: var(--pine); box-shadow: 0 10px 35px rgba(51,38,13,.05); }
.wind-pill { padding: 6px 8px 6px 13px; gap: 10px; }
.wind-pill > span:nth-child(2) { display: flex; flex-direction: column; min-width: 128px; }
.wind-pill small { color: #766c5d; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.wind-pill strong { font-size: 15px; }
.wind-pill button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: transparent; color: var(--pine); cursor: pointer; font-size: 21px; transition: transform .35s ease, background .2s ease; }
.wind-pill button:hover { background: rgba(18,63,50,.08); transform: rotate(45deg); }
.wind-pill button:disabled { opacity: .5; animation: spin 1s linear infinite; }
.wind-icon { color: var(--coral); font-size: 31px; line-height: 1; transform: rotate(90deg); }
.location-pill { padding: 0 16px; gap: 7px; font-size: 11px; font-weight: 800; }
.location-pill span { color: var(--safe); }

.guidance-card { --guide: var(--coral); width: min(680px, 100%); min-height: 112px; margin: 0 auto; padding: 15px 22px; border: 1px solid color-mix(in srgb, var(--guide) 30%, transparent); border-radius: 24px; background: rgba(255,253,248,.94); display: flex; align-items: center; gap: 18px; box-shadow: 0 18px 55px color-mix(in srgb, var(--guide) 13%, transparent); animation: guidance-enter .48s cubic-bezier(.2,.9,.2,1) both; }
.guidance-card--near, .guidance-card--waiting, .guidance-card--calm { --guide: var(--amber); }
.guidance-card--safe { --guide: var(--safe-deep); }
.guidance-symbol { flex: 0 0 76px; width: 76px; height: 76px; border-radius: 22px; background: var(--guide); color: white; display: grid; place-items: center; font-size: 48px; line-height: 1; font-weight: 900; box-shadow: 0 12px 27px color-mix(in srgb, var(--guide) 28%, transparent); }
.guidance-card--safe .guidance-symbol { animation: safe-check .5s cubic-bezier(.2,1.4,.3,1) both; }
.guidance-copy { display: flex; min-width: 0; flex-direction: column; }
.guidance-copy small { color: var(--guide); font-size: 9px; font-weight: 900; letter-spacing: .16em; }
.guidance-copy strong { margin-top: 2px; color: var(--guide); font-size: clamp(22px,3vw,34px); line-height: 1; letter-spacing: -.035em; }
.guidance-copy span { margin-top: 5px; color: var(--ink); font-size: 14px; }

.airflow-layout { display: flex; min-height: 0; flex-direction: column; align-items: center; justify-content: center; }
.airflow-stage { position: relative; width: min(49vh, 470px, 76vw); aspect-ratio: 1; border-radius: 50%; background: rgba(255,253,248,.76); box-shadow: 0 22px 70px rgba(46,34,11,.09), inset 0 0 0 1px rgba(18,63,50,.12); overflow: hidden; transform: translateZ(0); }
.page--safe .airflow-stage { box-shadow: 0 26px 80px rgba(0,55,31,.22), inset 0 0 0 1px rgba(18,63,50,.1); }
.stage-ring { position: absolute; z-index: 3; inset: 15px; border: 2px solid rgba(18,63,50,.23); border-radius: 50%; }
.stage-ring::before { content: ""; position: absolute; inset: 9px; border: 1px dashed rgba(18,63,50,.14); border-radius: 50%; }
.stage-label { position: absolute; z-index: 7; left: 50%; transform: translateX(-50%); padding: 5px 9px; border-radius: 999px; background: var(--paper); color: var(--pine); font-size: 8px; font-weight: 900; letter-spacing: .09em; box-shadow: 0 3px 12px rgba(40,30,10,.08); }
.stage-label--front { top: 8px; }
.stage-label--back { bottom: 8px; }

.air-streams { position: absolute; z-index: 2; inset: 3%; border-radius: 50%; transform: rotate(var(--wind-source-angle)); will-change: transform; transition: transform .08s linear; }
.air-streams i { position: absolute; top: 3%; left: calc(50% + var(--offset, 0px)); width: 4px; height: 94%; border-radius: 999px; transform: translateX(-50%) translateZ(0); background: linear-gradient(to bottom, transparent 0%, rgba(237,102,82,.14) 24%, rgba(21,148,94,.2) 72%, transparent 100%); overflow: hidden; opacity: var(--opacity,.82); will-change: transform; }
.air-streams i::after { content: ""; position: absolute; left: 0; top: -42%; width: 100%; height: 42%; border-radius: 999px; background: linear-gradient(to bottom, transparent 0%, rgba(237,102,82,.72) 30%, rgba(255,255,255,.9) 55%, rgba(21,148,94,.92) 76%, transparent 100%); box-shadow: 0 0 9px rgba(21,148,94,.38); animation: stream-flight var(--speed,1.15s) linear infinite; animation-delay: var(--delay,0s); will-change: transform; }
.air-streams i::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -5%; width: 7px; height: 7px; border-radius: 50%; transform: translateX(-50%); background: rgba(21,148,94,.9); box-shadow: 0 0 12px rgba(21,148,94,.6); animation: stream-dot var(--speed,1.15s) linear infinite; animation-delay: var(--delay,0s); will-change: transform; }
.air-streams i:nth-child(1) { --offset: -38px; --speed: 1.08s; --opacity: .5; }
.air-streams i:nth-child(2) { --offset: -19px; --speed: 1.22s; --opacity: .72; --delay: -.3s; }
.air-streams i:nth-child(3) { --offset: 0px; width: 5px; --speed: .98s; --delay: -.6s; }
.air-streams i:nth-child(4) { --offset: 19px; --speed: 1.31s; --opacity: .7; --delay: -.18s; }
.air-streams i:nth-child(5) { --offset: 38px; --speed: 1.12s; --opacity: .48; --delay: -.75s; }

.person { position: absolute; z-index: 6; left: 50%; top: 48%; transform: translate(-50%,-50%); width: 128px; height: 158px; display: flex; flex-direction: column; align-items: center; filter: drop-shadow(0 15px 18px rgba(40,32,18,.14)); }
.person-head { position: relative; z-index: 2; width: 56px; height: 62px; border: 7px solid #544231; border-radius: 48% 48% 44% 44%; background: #b98157; }
.person-head i { position: absolute; left: 50%; top: 7px; width: 13px; height: 5px; transform: translateX(-50%); border-radius: 50% 50% 0 0; background: #544231; }
.person-body { width: 124px; height: 101px; margin-top: -7px; border: 2px solid rgba(79,61,39,.18); border-radius: 52% 52% 26% 26%; background: #ead8b3; display: grid; place-items: center; color: var(--pine); font-size: 41px; font-weight: 900; }
.person-body span { animation: forward-breathe 2.4s ease-in-out infinite; }

.hold-tip { margin: 10px 0 0; color: #746b5d; font-size: 11px; text-align: center; transition: color .65s ease; }
.hold-tip span { color: var(--pine); font-size: 17px; vertical-align: middle; transition: color .65s ease; }
.page--safe .hold-tip { color: rgba(255,255,255,.85); }
.page--safe .hold-tip span { color: white; }

.active-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 14px; color: #746b5d; font-size: 10px; transition: color .65s ease; }
.active-meta span + span::before { content: "·"; margin-right: 14px; }
.active-meta button { padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
.page--safe .active-meta { color: rgba(255,255,255,.84); }

footer { position: relative; z-index: 2; min-height: 66px; padding: 13px 22px; border-top: 1px solid rgba(139,119,88,.18); display: flex; align-items: center; justify-content: center; gap: 10px; color: #5f665e; font-size: 11px; text-align: center; transition: color .65s ease, border-color .65s ease; }
footer span { color: var(--safe); font-size: 19px; }
footer p { margin: 0; max-width: 800px; }
.page--safe footer { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.2); }
.page--safe footer span { color: white; }

.modal-backdrop { position: fixed; z-index: 50; inset: 0; padding: 20px; background: rgba(9,30,24,.58); backdrop-filter: blur(10px); display: grid; place-items: center; animation: fade-in .25s ease both; }
.help-modal { position: relative; width: min(520px,100%); max-height: calc(100svh - 40px); overflow: auto; padding: 36px; border-radius: 28px; background: var(--paper); box-shadow: 0 28px 90px rgba(4,20,16,.3); animation: modal-up .35s cubic-bezier(.22,1,.36,1) both; }
.close-button { position: absolute; top: 15px; right: 15px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(18,63,50,.07); color: var(--pine); cursor: pointer; font-size: 26px; }
.help-modal h2 { margin: 8px 0 23px; color: var(--pine); font-size: 38px; line-height: 1; letter-spacing: -.04em; }
.help-modal ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 17px; }
.help-modal li { display: flex; gap: 14px; align-items: flex-start; }
.help-modal li > span { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--pine); color: white; display: grid; place-items: center; font-weight: 900; }
.help-modal li p { margin: 0; line-height: 1.45; }
.help-modal li strong { display: block; color: var(--pine); }
.modal-note { margin: 18px 0 0; padding: 13px 15px; border-radius: 12px; background: #f4ecdd; color: #675d4d; font-size: 12px; line-height: 1.45; }
.modal-note + .modal-note { margin-top: 8px; }
.modal-action { min-height: 54px; margin-top: 18px; }

@keyframes pin-breathe { 0%,100% { transform: rotate(-45deg) translate(0,0); box-shadow: 0 20px 38px rgba(18,63,50,.22); } 50% { transform: rotate(-45deg) translate(5px,-5px); box-shadow: 0 28px 48px rgba(18,63,50,.28); } }
@keyframes loading-wave { 0%,100% { transform: translateX(var(--x,0)) scale(.55); opacity: .45; } 50% { transform: translateX(var(--x,0)) scale(1); opacity: 1; } }
@keyframes guidance-enter { from { opacity: 0; transform: translateY(-9px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes safe-check { 0% { transform: scale(.6) rotate(-10deg); } 70% { transform: scale(1.1) rotate(2deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes stream-flight { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,338%,0); } }
@keyframes stream-dot { from { transform: translate3d(-50%,0,0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { transform: translate3d(-50%,1350%,0); opacity: 0; } }
@keyframes forward-breathe { 0%,100% { transform: translateY(0); opacity: .82; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-up { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 760px) {
  .site-header { height: 58px; padding: 0 15px; }
  .brand { gap: 7px; font-size: 9px; letter-spacing: .025em; }
  .brand-mark { transform: scale(.72); transform-origin: left center; margin-right: -7px; }
  .help-button b { display: none; }
  .help-button span { width: 29px; height: 29px; font-size: 13px; }

  .access-screen { width: min(100% - 30px,500px); min-height: calc(100svh - 112px); padding: 17px 0 12px; align-items: center; }
  .access-card { grid-template-columns: 1fr; gap: 12px; }
  .access-visual { order: 2; position: absolute; right: -54px; top: 10%; opacity: .14; pointer-events: none; }
  .access-radar { width: 240px; }
  .access-copy { position: relative; z-index: 2; max-width: none; }
  .eyebrow { font-size: 9px; }
  .eyebrow span { font-size: 24px; }
  h1 { margin: 12px 0 16px; font-size: clamp(58px,19vw,80px); }
  .access-lead { margin-bottom: 18px; font-size: 17px; line-height: 1.38; }
  .primary-button { min-height: 64px; border-radius: 15px; font-size: 16px; }
  .access-button { max-width: none; }
  .privacy-note { font-size: 10px; line-height: 1.35; }
  .permission-progress h2, .gate-message h2 { font-size: 35px; }
  .loading-orb, .gate-symbol { width: 62px; height: 62px; }
  .progress-steps { margin-top: 18px; gap: 6px; }
  .progress-steps span { padding: 7px 9px; font-size: 10px; }
  .gate-message .primary-button { max-width: none; }

  .active-screen { width: min(100% - 24px,500px); min-height: calc(100svh - 108px); padding: 9px 0 10px; gap: 8px; }
  .active-topline { gap: 6px; }
  .wind-pill { min-height: 45px; padding: 4px 5px 4px 9px; gap: 7px; }
  .wind-pill > span:nth-child(2) { min-width: 103px; }
  .wind-pill small { font-size: 7px; }
  .wind-pill strong { font-size: 12px; }
  .wind-pill button { width: 32px; height: 32px; font-size: 18px; }
  .wind-icon { font-size: 25px; }
  .location-pill { min-height: 45px; padding: 0 10px; font-size: 9px; }
  .guidance-card { min-height: 88px; padding: 10px 13px; border-radius: 19px; gap: 12px; }
  .guidance-symbol { flex-basis: 62px; width: 62px; height: 62px; border-radius: 17px; font-size: 40px; }
  .guidance-copy small { font-size: 7px; }
  .guidance-copy strong { font-size: clamp(20px,6.3vw,29px); }
  .guidance-copy span { margin-top: 3px; font-size: 11px; }
  .airflow-stage { width: min(45vh, 84vw, 390px); }
  .stage-ring { inset: 11px; }
  .stage-label { font-size: 7px; padding: 4px 7px; }
  .person { width: 94px; height: 118px; }
  .person-head { width: 41px; height: 46px; border-width: 5px; }
  .person-body { width: 91px; height: 76px; font-size: 30px; }
  .air-streams i { width: 3px; }
  .air-streams i:nth-child(1) { --offset: -30px; }
  .air-streams i:nth-child(2) { --offset: -15px; }
  .air-streams i:nth-child(4) { --offset: 15px; }
  .air-streams i:nth-child(5) { --offset: 30px; }
  .hold-tip { margin-top: 7px; font-size: 9px; }
  .active-meta { font-size: 8px; }
  footer { min-height: 50px; padding: 9px 14px; font-size: 8px; }
  footer span { font-size: 16px; }
  .help-modal { padding: 31px 21px 22px; }
  .help-modal h2 { font-size: 34px; }
}

@media (max-width: 365px), (max-height: 700px) and (max-width: 760px) {
  .site-header { height: 52px; }
  .access-screen { min-height: calc(100svh - 96px); }
  .access-lead { font-size: 15px; }
  h1 { font-size: 54px; }
  .active-screen { min-height: calc(100svh - 94px); }
  .airflow-stage { width: min(39vh, 80vw, 330px); }
  .hold-tip { display: none; }
  .location-pill { display: none; }
  .active-topline { justify-content: center; }
  footer { min-height: 42px; }
}

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

@media (prefers-contrast: more) {
  .guidance-card, .wind-pill, .location-pill, .help-modal { border: 2px solid var(--pine); }
  .airflow-stage { background: var(--paper); }
}

/* ──────────────────────────────────────────────────────────────────────────
   LIVING INTERFACE — visual depth, reactive light and high-frame-rate motion
   ────────────────────────────────────────────────────────────────────────── */

body {
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.page {
  --alignment: 0;
  --turn-direction: 1;
  background:
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.96), transparent 29rem),
    radial-gradient(circle at 6% 88%, rgba(240,209,159,.28), transparent 28rem),
    linear-gradient(135deg, #f8f3e9 0%, #f5efe2 52%, #fbf7ef 100%);
}

.page::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(101,239,170,.72), transparent 29rem),
    radial-gradient(circle at 12% 12%, rgba(198,255,227,.24), transparent 24rem),
    linear-gradient(145deg, #075f3a 0%, #0a8b52 48%, #13a766 100%);
  opacity: calc(var(--alignment) * .5);
  transition: opacity .32s linear;
}

.page--safe::before {
  opacity: 1;
  animation: safe-background-arrival 1s cubic-bezier(.18,.85,.22,1) both;
}

.page::after {
  content: "";
  position: fixed;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  opacity: .13;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.ambient-field {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: calc(.32 + var(--alignment) * .2);
  will-change: transform;
}

.aurora--one {
  width: min(58vw, 760px);
  height: min(58vw, 760px);
  right: -19vw;
  top: -24vw;
  background: rgba(237,102,82,.18);
  animation: aurora-one 13s ease-in-out infinite alternate;
}

.aurora--two {
  width: min(50vw, 650px);
  height: min(50vw, 650px);
  left: -20vw;
  bottom: -24vw;
  background: rgba(21,148,94,.17);
  animation: aurora-two 15s ease-in-out infinite alternate;
}

.page--safe .aurora--one { background: rgba(255,255,255,.2); }
.page--safe .aurora--two { background: rgba(160,255,205,.25); }

.contour-field {
  position: absolute;
  inset: -20%;
  opacity: .45;
  background:
    repeating-radial-gradient(ellipse at 12% 54%, transparent 0 52px, rgba(76,92,66,.105) 53px 54px, transparent 55px 105px),
    repeating-radial-gradient(ellipse at 93% 22%, transparent 0 70px, rgba(76,92,66,.08) 71px 72px, transparent 73px 142px);
  animation: contours-drift 24s ease-in-out infinite alternate;
  will-change: transform;
}

.page--safe .contour-field { opacity: .25; filter: brightness(3); }

.ambient-motes i {
  position: absolute;
  left: var(--mote-left);
  top: var(--mote-top);
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--coral);
  box-shadow: 0 0 18px rgba(237,102,82,.72);
  opacity: calc(.12 + var(--alignment) * .34);
  transform: scale(var(--mote-scale));
  animation: mote-drift var(--mote-duration) ease-in-out var(--mote-delay) infinite;
  will-change: transform, opacity;
}

.ambient-motes i:nth-child(3n) {
  width: 10px;
  height: 2px;
  background: var(--safe);
  box-shadow: 0 0 16px rgba(21,148,94,.7);
}

.page--safe .ambient-motes i {
  background: #d8ffeb;
  box-shadow: 0 0 19px rgba(216,255,235,.86);
  opacity: .48;
}

.site-header {
  z-index: 20;
  background: linear-gradient(180deg, rgba(255,253,248,.8), rgba(255,253,248,.48));
  -webkit-backdrop-filter: blur(22px) saturate(130%);
  backdrop-filter: blur(22px) saturate(130%);
}

.page--safe .site-header {
  background: linear-gradient(180deg, rgba(3,69,41,.44), rgba(3,69,41,.08));
}

.brand-mark i {
  transform-origin: left center;
  animation: brand-wind 2.2s ease-in-out infinite;
}

.brand-mark i:nth-child(2) { animation-delay: -.62s; }
.brand-mark i:nth-child(3) { animation-delay: -1.18s; }

.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 5px;
  padding: 6px 9px;
  border: 1px solid rgba(21,148,94,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: var(--safe-deep);
  font-size: 8px;
  letter-spacing: .12em;
  box-shadow: 0 5px 18px rgba(18,63,50,.06);
}

.live-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #24d783;
  box-shadow: 0 0 0 0 rgba(36,215,131,.65);
  animation: live-pulse 1.7s ease-out infinite;
}

.page--safe .live-badge {
  border-color: rgba(255,255,255,.26);
  background: rgba(255,255,255,.13);
  color: white;
}

.access-card {
  position: relative;
  perspective: 1200px;
}

.access-copy { position: relative; z-index: 5; }

.access-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 340px;
  height: 340px;
  left: -150px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.8), transparent 68%);
  pointer-events: none;
}

.access-radar {
  width: min(39vw, 455px);
  border: 1px solid rgba(18,63,50,.18);
  background:
    linear-gradient(rgba(18,63,50,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,63,50,.09) 1px, transparent 1px),
    radial-gradient(circle at 44% 35%, rgba(255,255,255,.96), rgba(255,253,248,.63) 48%, rgba(220,238,224,.52));
  background-size: 32px 32px, 32px 32px, 100% 100%;
  box-shadow:
    inset 0 0 0 11px rgba(255,255,255,.32),
    inset 0 0 70px rgba(21,148,94,.1),
    0 42px 120px rgba(44,54,32,.15);
  animation: radar-float 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

.access-radar::before { inset: 18%; border-style: dashed; animation: orbit-spin 22s linear infinite; }
.access-radar::after { inset: 36%; box-shadow: 0 0 0 18px rgba(255,255,255,.2); }

.radar-sweep {
  position: absolute;
  z-index: 1;
  inset: 8px;
  overflow: hidden;
  border-radius: 50%;
  background: conic-gradient(from 12deg, transparent 0 76%, rgba(21,148,94,.04) 84%, rgba(21,148,94,.26) 99.5%, transparent 100%);
  animation: sweep-spin 5s linear infinite;
  -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 19%);
  mask: radial-gradient(circle, transparent 0 18%, #000 19%);
}

.radar-orbit {
  position: absolute;
  z-index: 4;
  inset: 12%;
  border: 1px solid rgba(21,148,94,.18);
  border-radius: 50%;
  animation: orbit-spin 9s linear infinite;
}

.radar-orbit i {
  position: absolute;
  left: 50%;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--safe);
  box-shadow: 0 0 0 7px rgba(21,148,94,.12), 0 0 20px rgba(21,148,94,.7);
}

.radar-orbit--two {
  inset: 28%;
  border-color: rgba(237,102,82,.18);
  animation-duration: 6s;
  animation-direction: reverse;
}

.radar-orbit--two i { background: var(--coral); box-shadow: 0 0 0 6px rgba(237,102,82,.12), 0 0 18px rgba(237,102,82,.68); }

.access-pin {
  z-index: 7;
  width: 90px;
  height: 90px;
  background: linear-gradient(145deg, #174c3d, #092e25);
  box-shadow: 0 26px 55px rgba(10,50,39,.3), inset 8px 8px 19px rgba(255,255,255,.08);
}

.access-pin::before {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(18,63,50,.2);
  border-radius: 50% 50% 50% 10%;
  animation: pin-ring 2.8s ease-out infinite;
}

.radar-chip {
  position: absolute;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border: 1px solid rgba(18,63,50,.13);
  border-radius: 13px;
  background: rgba(255,253,248,.78);
  -webkit-backdrop-filter: blur(13px);
  backdrop-filter: blur(13px);
  color: #655a48;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .12em;
  box-shadow: 0 15px 35px rgba(46,39,22,.12);
  animation: chip-float 4s ease-in-out infinite;
}

.radar-chip b { color: var(--coral); font-size: 18px; letter-spacing: 0; }
.radar-chip--wind { right: -23px; top: 21%; }
.radar-chip--radius { left: -20px; bottom: 17%; animation-delay: -1.6s; }
.radar-chip--radius b { color: var(--safe); font-size: 15px; }

h1 { text-wrap: balance; }
h1 em {
  position: relative;
  display: inline-block;
  color: transparent;
  font-style: normal;
  background: linear-gradient(112deg, var(--pine) 8%, #187b57 54%, var(--coral) 108%);
  -webkit-background-clip: text;
  background-clip: text;
}

h1 em::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 1%;
  bottom: -8px;
  height: 13px;
  border-top: 4px solid var(--coral);
  border-radius: 50%;
  transform: rotate(-2deg) scaleX(0);
  transform-origin: left center;
  animation: title-stroke .9s .18s cubic-bezier(.18,.9,.22,1) forwards;
}

.eyebrow { animation: copy-enter .7s .02s both; }
h1 { animation: copy-enter .8s .08s both; }
.access-lead { animation: copy-enter .8s .15s both; }
.access-button { animation: copy-enter .8s .22s both; }
.privacy-note { animation: copy-enter .8s .28s both; }

.primary-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(120deg, #0c382d 0%, #155541 58%, #123f32 100%);
  box-shadow: 0 18px 44px rgba(18,63,50,.24), inset 0 1px rgba(255,255,255,.18);
}

.primary-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.12);
}

.button-shine {
  position: absolute;
  z-index: -1;
  width: 42%;
  height: 260%;
  left: -62%;
  top: -80%;
  transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  animation: button-shine 3.8s 1.1s ease-in-out infinite;
}

.button-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}

.button-arrow {
  margin-left: auto;
  padding-right: 8px;
  font-size: 22px;
  transition: transform .3s cubic-bezier(.2,.9,.2,1);
}

.primary-button:hover .button-arrow { transform: translateX(6px); }

.wind-pill, .location-pill {
  border-color: rgba(255,255,255,.7);
  background: rgba(255,253,248,.72);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 14px 45px rgba(51,38,13,.07), inset 0 1px rgba(255,255,255,.82);
}

.wind-icon { animation: wind-icon-flow 2.1s ease-in-out infinite; }

.page--safe .wind-pill, .page--safe .location-pill {
  border-color: rgba(255,255,255,.22);
  background: rgba(4,76,44,.38);
  color: white;
  box-shadow: 0 16px 50px rgba(1,44,26,.18), inset 0 1px rgba(255,255,255,.14);
}

.page--safe .wind-pill small,
.page--safe .wind-pill button { color: rgba(255,255,255,.78); }
.page--safe .wind-icon,
.page--safe .location-pill span { color: #bfffdc; }

.guidance-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--guide) 24%, white);
  background: rgba(255,253,248,.88);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  box-shadow:
    0 22px 70px color-mix(in srgb, var(--guide) 15%, transparent),
    inset 0 1px rgba(255,255,255,.92);
}

.guidance-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 260px;
  height: 260px;
  left: -120px;
  top: -110px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--guide) 13%, transparent);
  filter: blur(1px);
}

.guidance-card::after {
  content: "";
  position: absolute;
  top: -70%;
  bottom: -70%;
  width: 90px;
  left: -150px;
  transform: rotate(19deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.46), transparent);
  animation: card-glint 4.8s 1.4s ease-in-out infinite;
  pointer-events: none;
}

.guidance-card--safe {
  background: rgba(247,255,250,.94);
  animation: safe-card-arrival .72s cubic-bezier(.18,1.2,.22,1) both;
}

.guidance-symbol {
  position: relative;
  overflow: visible;
  transform: translateZ(0);
}

.guidance-symbol::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid color-mix(in srgb, var(--guide) 28%, transparent);
  border-radius: 27px;
  animation: symbol-ring 2.1s ease-out infinite;
}

.guidance-symbol span {
  display: block;
  line-height: 1;
  transform: translateZ(0);
  animation: direction-nudge 1.3s ease-in-out infinite;
}

.guidance-card--waiting .guidance-symbol span,
.guidance-card--calm .guidance-symbol span { animation: waiting-breathe 1.4s ease-in-out infinite; }
.guidance-card--safe .guidance-symbol span { animation: safe-check-wow .7s cubic-bezier(.16,1.4,.28,1) both; }
.guidance-card--safe .guidance-symbol::before { animation: safe-symbol-ring .85s ease-out both; }

.guidance-copy { flex: 1; }

.guidance-meter {
  width: min(245px, 100%);
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--guide) 12%, transparent);
}

.guidance-meter i {
  display: block;
  height: 100%;
  min-width: 5px;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--guide) 60%, white), var(--guide));
  box-shadow: 0 0 12px color-mix(in srgb, var(--guide) 45%, transparent);
  transition: width .12s linear;
}

.airflow-layout { perspective: 1000px; }

.airflow-shell {
  position: relative;
  width: min(49vh, 470px, 76vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.stage-aura {
  position: absolute;
  z-index: -1;
  inset: -10%;
  border-radius: 50%;
  background:
    conic-gradient(from calc(var(--turn-direction) * 80deg), rgba(237,102,82,.1), rgba(21,148,94,.4), rgba(255,255,255,.05), rgba(237,102,82,.1));
  opacity: calc(.24 + var(--alignment) * .5);
  filter: blur(26px);
  animation: aura-breathe 3.2s ease-in-out infinite;
  transition: opacity .2s linear;
  will-change: transform, opacity;
}

.page--safe .stage-aura {
  inset: -15%;
  background: radial-gradient(circle, rgba(199,255,226,.72), rgba(81,234,157,.34) 37%, transparent 70%);
  opacity: 1;
  animation: safe-aura 1.8s ease-in-out infinite;
}

.airflow-stage {
  width: 100%;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.95), rgba(255,253,248,.76) 39%, rgba(231,235,219,.68) 100%);
  box-shadow:
    0 32px 95px rgba(46,34,11,.15),
    inset 0 0 0 1px rgba(255,255,255,.95),
    inset 0 -26px 80px rgba(18,63,50,.08);
  transform: translate3d(0,0,0) rotateX(1.5deg);
}

.page--safe .airflow-stage {
  background:
    radial-gradient(circle at 50% 42%, #ffffff 0%, rgba(244,255,249,.92) 42%, rgba(203,249,224,.88) 100%);
  box-shadow:
    0 36px 100px rgba(0,54,31,.3),
    0 0 0 8px rgba(255,255,255,.09),
    inset 0 0 0 1px rgba(255,255,255,.98),
    inset 0 -25px 80px rgba(21,148,94,.14);
}

.stage-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 50%;
  opacity: .34;
  background-image:
    linear-gradient(rgba(18,63,50,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,63,50,.1) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 75%);
  mask-image: radial-gradient(circle, #000 15%, transparent 75%);
}

.stage-sheen {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.9), transparent 24%),
    linear-gradient(125deg, rgba(255,255,255,.32), transparent 30% 68%, rgba(21,148,94,.07));
  mix-blend-mode: screen;
}

.stage-ring {
  z-index: 5;
  border-color: rgba(18,63,50,.26);
  box-shadow: inset 0 0 28px rgba(18,63,50,.04), 0 0 0 1px rgba(255,255,255,.68);
}

.stage-ring::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(18,63,50,.32) 0 1deg, transparent 1deg 8deg);
  -webkit-mask: radial-gradient(circle, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(circle, transparent calc(100% - 6px), #000 calc(100% - 5px));
  opacity: .52;
}

.stage-label {
  z-index: 10;
  border: 1px solid rgba(18,63,50,.08);
  background: rgba(255,253,248,.82);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
  box-shadow: 0 6px 22px rgba(40,30,10,.1), inset 0 1px white;
}

.wind-field {
  position: absolute;
  z-index: 2;
  inset: 1%;
  border-radius: 50%;
  transform: rotate(var(--wind-source-angle)) translateZ(0);
  transition: transform .075s linear;
  will-change: transform;
}

.wind-ribbons { width: 100%; height: 100%; overflow: visible; }

.wind-ribbons path {
  fill: none;
  stroke: url(#wind-flow);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.wind-ribbons__glow path {
  stroke-width: 8;
  opacity: .36;
  stroke-dasharray: 56 22;
  animation: ribbon-flow 2.6s linear infinite;
}

.wind-ribbons__spark path {
  stroke-width: 2.4;
  opacity: .92;
  stroke-dasharray: 3 17 10 24;
  animation: spark-flow 1.25s linear infinite;
}

.wind-ribbons path:nth-child(2) { animation-delay: -.52s; }
.wind-ribbons path:nth-child(3) { animation-delay: -.91s; }
.wind-ribbons path:nth-child(4) { animation-delay: -.28s; }
.wind-ribbons path:nth-child(5) { animation-delay: -.73s; }

.person {
  z-index: 7;
  top: 49%;
  filter: drop-shadow(0 21px 24px rgba(40,32,18,.2));
  animation: person-hover 3.2s ease-in-out infinite;
}

.person-head {
  overflow: hidden;
  border-color: #4b392b;
  background: linear-gradient(145deg, #d39a70, #a96f4c);
  box-shadow: inset -8px -5px 12px rgba(89,50,29,.16), 0 5px 10px rgba(50,34,21,.14);
}

.person-head::after {
  content: "";
  position: absolute;
  left: -9%;
  right: -9%;
  top: -8px;
  height: 24px;
  border-radius: 48% 52% 42% 35%;
  background: #4b392b;
  transform: rotate(-3deg);
}

.person-head i { z-index: 2; }

.person-head b {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 17px;
  height: 6px;
  border-bottom: 2px solid rgba(72,40,25,.28);
  border-radius: 50%;
  transform: translateX(-50%);
}

.person-body {
  position: relative;
  overflow: hidden;
  border-color: rgba(79,61,39,.16);
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.7), transparent 36%),
    linear-gradient(145deg, #f2e3c4, #d2b989);
  box-shadow: inset -13px -13px 27px rgba(108,81,45,.12), 0 9px 22px rgba(40,30,17,.08);
}

.person-body::after {
  content: "";
  position: absolute;
  inset: -55% -30% auto;
  height: 100%;
  transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  animation: shirt-glint 4s ease-in-out infinite;
}

.person-body span {
  position: relative;
  z-index: 2;
  width: 55px;
  height: 55px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18,63,50,.1);
  border-radius: 50%;
  background: rgba(255,255,255,.32);
  box-shadow: inset 0 1px rgba(255,255,255,.5);
}

.person-body > i {
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 30px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(18,63,50,.18);
}

.page--safe .person {
  filter: drop-shadow(0 22px 26px rgba(8,105,59,.24)) drop-shadow(0 0 22px rgba(105,255,178,.18));
}

.page--safe .person-body {
  border-color: rgba(21,148,94,.22);
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.88), transparent 38%),
    linear-gradient(145deg, #eeffe8, #b9ebc9);
}

.shell-caption {
  position: absolute;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgba(18,63,50,.11);
  border-radius: 999px;
  background: rgba(255,253,248,.76);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #6d6251;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
  box-shadow: 0 9px 26px rgba(37,30,16,.1);
}

.shell-caption i { width: 6px; height: 6px; border-radius: 50%; }
.shell-caption--wind { right: -30px; top: 23%; }
.shell-caption--wind i { background: var(--coral); box-shadow: 0 0 9px var(--coral); }
.shell-caption--you { left: -9px; bottom: 20%; }
.shell-caption--you i { background: var(--safe); box-shadow: 0 0 9px var(--safe); }

.page--safe .shell-caption {
  border-color: rgba(255,255,255,.4);
  background: rgba(240,255,247,.88);
}

.success-burst {
  position: fixed;
  z-index: 45;
  left: 50%;
  top: 55%;
  width: 1px;
  height: 1px;
  pointer-events: none;
  transform: translate(-50%,-50%);
}

.success-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  border: 3px solid rgba(231,255,242,.8);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  box-shadow: 0 0 45px rgba(210,255,231,.75), inset 0 0 35px rgba(255,255,255,.4);
  animation: success-halo 1.1s cubic-bezier(.17,.85,.24,1) both;
}

.success-burst > i {
  position: absolute;
  left: 0;
  top: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #eafff2;
  box-shadow: 0 0 18px rgba(230,255,241,.95);
  animation: success-spark .9s cubic-bezier(.12,.74,.2,1) var(--spark-delay) both;
}

.success-burst > i:nth-of-type(3n) {
  width: 17px;
  height: 4px;
  border-radius: 999px;
  background: #8affbd;
}

.page--safe footer p::before {
  content: "ALINEACIÓN SEGURA  ·  ";
  color: white;
  font-weight: 900;
  letter-spacing: .08em;
}

.help-modal {
  border: 1px solid rgba(255,255,255,.72);
  background:
    radial-gradient(circle at 100% 0, rgba(21,148,94,.12), transparent 230px),
    var(--paper);
  box-shadow: 0 34px 110px rgba(4,20,16,.38), inset 0 1px white;
}

.modal-action {
  background: linear-gradient(120deg, #0c382d, #176248);
  box-shadow: 0 15px 35px rgba(18,63,50,.18);
}

@keyframes aurora-one {
  from { transform: translate3d(-3%,2%,0) scale(.94); }
  to { transform: translate3d(5%,9%,0) scale(1.12); }
}
@keyframes aurora-two {
  from { transform: translate3d(0,0,0) scale(1); }
  to { transform: translate3d(12%,-8%,0) scale(1.16); }
}
@keyframes contours-drift {
  from { transform: translate3d(-1.5%,0,0) rotate(-1deg); }
  to { transform: translate3d(1.5%,-1.8%,0) rotate(1deg); }
}
@keyframes mote-drift {
  0%,100% { transform: translate3d(0,0,0) scale(var(--mote-scale)); opacity: .08; }
  34% { transform: translate3d(22px,-16px,0) scale(calc(var(--mote-scale) * 1.22)); opacity: .52; }
  68% { transform: translate3d(-12px,-38px,0) scale(var(--mote-scale)); opacity: .2; }
}
@keyframes safe-background-arrival {
  0% { filter: saturate(.7) brightness(1.28); }
  38% { filter: saturate(1.3) brightness(1.18); }
  100% { filter: saturate(1) brightness(1); }
}
@keyframes brand-wind {
  0%,100% { transform: scaleX(.72); opacity: .52; }
  50% { transform: scaleX(1.15); opacity: 1; }
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(36,215,131,.65); }
  72%,100% { box-shadow: 0 0 0 8px rgba(36,215,131,0); }
}
@keyframes radar-float {
  0%,100% { transform: rotateX(2deg) rotateY(-2deg) translateY(0); }
  50% { transform: rotateX(-1deg) rotateY(2deg) translateY(-9px); }
}
@keyframes sweep-spin { to { transform: rotate(360deg); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes pin-ring {
  0% { transform: scale(.72); opacity: 0; }
  25% { opacity: .55; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes chip-float {
  0%,100% { transform: translate3d(0,0,16px); }
  50% { transform: translate3d(0,-8px,28px); }
}
@keyframes title-stroke { to { transform: rotate(-2deg) scaleX(1); } }
@keyframes copy-enter {
  from { opacity: 0; transform: translate3d(0,20px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes button-shine {
  0%,55% { left: -62%; }
  78%,100% { left: 122%; }
}
@keyframes wind-icon-flow {
  0%,100% { transform: rotate(90deg) translateX(0) scaleX(.8); opacity: .72; }
  50% { transform: rotate(90deg) translateX(-2px) scaleX(1.1); opacity: 1; }
}
@keyframes card-glint {
  0%,57% { left: -150px; }
  82%,100% { left: calc(100% + 100px); }
}
@keyframes symbol-ring {
  0% { transform: scale(.8); opacity: 0; }
  35% { opacity: .42; }
  100% { transform: scale(1.16); opacity: 0; }
}
@keyframes direction-nudge {
  0%,100% { transform: translateX(0); }
  50% { transform: translateX(calc(var(--turn-direction) * 6px)); }
}
@keyframes waiting-breathe {
  0%,100% { transform: scale(.86); opacity: .65; }
  50% { transform: scale(1); opacity: 1; }
}
@keyframes safe-check-wow {
  0% { transform: scale(.25) rotate(-24deg); opacity: 0; }
  58% { transform: scale(1.22) rotate(5deg); opacity: 1; }
  78% { transform: scale(.92) rotate(-2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes safe-symbol-ring {
  from { transform: scale(.55); opacity: 1; border-width: 3px; }
  to { transform: scale(1.5); opacity: 0; border-width: 1px; }
}
@keyframes safe-card-arrival {
  0% { opacity: .4; transform: translateY(9px) scale(.94); }
  60% { transform: translateY(-2px) scale(1.025); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes aura-breathe {
  0%,100% { transform: scale(.92) rotate(-5deg); }
  50% { transform: scale(1.07) rotate(5deg); }
}
@keyframes safe-aura {
  0%,100% { transform: scale(.94); opacity: .68; }
  50% { transform: scale(1.07); opacity: 1; }
}
@keyframes ribbon-flow { to { stroke-dashoffset: -156; } }
@keyframes spark-flow { to { stroke-dashoffset: -108; } }
@keyframes person-hover {
  0%,100% { transform: translate3d(-50%,-50%,0); }
  50% { transform: translate3d(-50%,calc(-50% - 4px),0); }
}
@keyframes shirt-glint {
  0%,55% { transform: translateX(-80%) rotate(20deg); }
  82%,100% { transform: translateX(150%) rotate(20deg); }
}
@keyframes success-halo {
  0% { transform: translate(-50%,-50%) scale(.2); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(7); opacity: 0; }
}
@keyframes success-spark {
  0% { transform: translate(-50%,-50%) scale(.15) rotate(0); opacity: 0; }
  22% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(.18) rotate(170deg); opacity: 0; }
}

@media (max-width: 760px) {
  .site-header { background: rgba(255,253,248,.68); }
  .live-badge { width: 8px; height: 8px; margin-left: 2px; padding: 0; overflow: hidden; border: 0; background: #22ce7d; box-shadow: 0 0 0 5px rgba(34,206,125,.1); color: transparent; }
  .live-badge i { display: none; }

  .access-copy::before { left: -190px; top: -145px; }
  .access-visual { right: -84px; top: 5%; opacity: .19; }
  .access-radar { width: 310px; }
  .radar-chip { display: none; }
  h1 em::after { bottom: -4px; height: 8px; border-top-width: 3px; }
  .button-arrow { padding-right: 3px; }
  .button-icon { width: 32px; height: 32px; }

  .guidance-card { overflow: visible; }
  .guidance-card::after { display: none; }
  .guidance-meter { margin-top: 6px; }
  .guidance-symbol::before { inset: -4px; border-radius: 21px; }

  .airflow-shell { width: min(45vh, 84vw, 390px); }
  .shell-caption { padding: 5px 7px; font-size: 6px; }
  .shell-caption--wind { right: -7px; top: 20%; }
  .shell-caption--you { left: -5px; bottom: 17%; }
  .stage-grid { background-size: 27px 27px; }
  .person-body span { width: 42px; height: 42px; }
  .success-burst { top: 58%; transform: translate(-50%,-50%) scale(.72); }
  .page--safe footer p::before { display: block; margin-bottom: 2px; }
}

@media (max-width: 365px), (max-height: 700px) and (max-width: 760px) {
  .airflow-shell { width: min(39vh, 80vw, 330px); }
  .guidance-meter { display: none; }
  .shell-caption { display: none; }
  .success-burst { transform: translate(-50%,-50%) scale(.62); }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-motes, .radar-sweep, .radar-orbit, .success-burst { display: none !important; }
}

/* Standalone hosting helpers */
[hidden] { display: none !important; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.active-meta b, .location-pill b { font: inherit; }