:root {
  color-scheme: dark;
  --blue: #25a6ff;
  --gold: #ffc64e;
  --ink: #07101b;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; min-width: 0; margin: 0; padding: 0; background: #040a11; overflow-x: clip; }
body { color: #fff; font-family: "Trebuchet MS", Arial, sans-serif; }
a { color: inherit; }

.campaign-frame { position: relative; display: grid; height: 100svh; min-height: 0; place-items: center; overflow: hidden; background: #07101b; }
.campaign-stage { position: relative; width: min(100%, 177.68svh); aspect-ratio: 1672 / 941; }
.campaign-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.campaign-safe-area { position: absolute; inset: clamp(20px, 2vw, 32px) clamp(32px, 3vw, 56px) clamp(24px, 2.5vw, 40px); pointer-events: none; }

.desktop-cta { position: absolute; z-index: 3; left: 33.34%; top: 56.78%; width: 33.32%; height: 8.84%; border-radius: 1.35vw; overflow: hidden; box-shadow: 0 0 0 2px rgba(51, 170, 255, .58), 0 0 18px rgba(21, 148, 255, .5); pointer-events: auto; }
.desktop-cta::before { content: ""; position: absolute; z-index: 1; inset: -5px; border: 2px solid rgba(118, 220, 255, .72); border-radius: inherit; box-shadow: 0 0 13px rgba(33, 171, 255, .52), inset 0 0 10px rgba(58, 181, 255, .28); opacity: .3; animation: cta-glow 2.4s ease-in-out infinite; pointer-events: none; }
.desktop-cta::after { content: ""; position: absolute; z-index: 2; inset: 0; background: linear-gradient(108deg, transparent 34%, rgba(255, 255, 255, .52) 49%, transparent 64%); mix-blend-mode: screen; opacity: 0; pointer-events: none; transform: translateX(-130%); animation: cta-shimmer 3.4s ease-in-out infinite; }
.desktop-cta:hover, .desktop-cta:focus-visible { outline: 2px solid rgba(210, 243, 255, 1); outline-offset: 4px; }
.desktop-cta:focus-visible { outline-offset: 4px; }

.orb-motion { position: absolute; z-index: 2; width: 16.4%; aspect-ratio: 1; left: 41.6%; top: 5.5%; border: 1px solid rgba(105, 209, 255, .38); border-radius: 50%; box-shadow: inset 0 0 22px rgba(22, 154, 255, .2), 0 0 20px rgba(21, 151, 255, .22); pointer-events: none; }
.orb-motion::before, .orb-motion::after, .orb-motion i, .orb-motion b, .orb-motion em { content: ""; position: absolute; inset: -5%; border: 2px solid transparent; border-top-color: rgba(116, 229, 255, .72); border-right-color: rgba(255, 193, 55, .43); border-radius: inherit; transform-origin: center; animation: orb-spin 11s linear infinite; }
.orb-motion::after { inset: 7%; border-width: 1px; border-top-color: rgba(31, 155, 255, .82); border-bottom-color: rgba(255, 206, 87, .56); animation-duration: 7.6s; animation-direction: reverse; }
.orb-motion i { inset: -11%; border-width: 1px; border-left-color: rgba(255, 199, 81, .75); border-bottom-color: rgba(53, 183, 255, .62); animation-duration: 15s; }
.orb-motion b { inset: 1%; border: 1px dashed rgba(161, 231, 255, .52); animation-duration: 13s; animation-direction: reverse; }
.orb-motion em { inset: -16%; border: 0; background: radial-gradient(circle at 5% 50%, #f8ca5c 0 2px, transparent 3px), radial-gradient(circle at 96% 49%, #2bd3ff 0 2px, transparent 3px); animation-duration: 10s; }
@keyframes orb-spin { to { transform: rotate(360deg); } }
@keyframes cta-glow { 0%, 100% { opacity: .28; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes cta-shimmer { 0%, 48% { opacity: 0; transform: translateX(-130%); } 62% { opacity: .9; } 78% { opacity: 0; transform: translateX(130%); } 100% { opacity: 0; transform: translateX(130%); } }

.compact-campaign { display: none; position: relative; overflow: hidden; min-height: 100svh; padding: 27px 18px 34px; background: #07101b; isolation: isolate; }
.compact-sky { position: absolute; inset: 0 0 auto; height: 520px; z-index: -2; background: linear-gradient(180deg, rgba(3, 13, 30, .09), #07101b 94%), url("assets/scene.png") 58% 29% / auto 520px no-repeat; filter: saturate(.9); }
.compact-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 9, 18, .7), transparent 65%), linear-gradient(0deg, #07101b, transparent 50%); }
.compact-logo { width: min(150px, 44vw); display: block; position: relative; z-index: 1; }
.compact-orb { position: relative; z-index: 1; margin: 14px auto 12px; width: 129px; height: 129px; padding-top: 19px; border: 2px solid #2caaff; border-radius: 50%; background: radial-gradient(circle, #0f396f 0, #061429 67%, #04101e 70%); box-shadow: inset 0 0 24px #127cda, 0 0 19px #168ce8; text-align: center; overflow: visible; }
.compact-orb::before, .compact-orb::after { content: ""; position: absolute; inset: -9px; border-radius: inherit; border: 1px solid rgba(255, 201, 75, .8); clip-path: polygon(0 37%, 18% 37%, 22% 22%, 38% 18%, 50% 0, 62% 18%, 79% 23%, 84% 38%, 100% 39%, 100% 61%, 84% 62%, 79% 78%, 62% 83%, 50% 100%, 38% 83%, 22% 78%, 18% 62%, 0 62%); }
.compact-orb::after { inset: -15px; border-color: rgba(39, 179, 255, .4); animation: orb-spin 12s linear infinite; }
.compact-orb-rings { position: absolute; inset: -14px; border: 2px solid transparent; border-top-color: #50d3ff; border-bottom-color: #f5bd4a; border-radius: 50%; animation: orb-spin 9s linear infinite; }
.windows-mark { width: 35px; display: block; margin: 0 auto 6px; fill: #92d9ff; filter: drop-shadow(0 0 5px #2c9ce9); }
.compact-orb strong, .compact-orb span { display: block; letter-spacing: .02em; }
.compact-orb strong { font-size: 15px; } .compact-orb span { margin-top: 5px; font-size: 10px; }
.compact-copy { position: relative; z-index: 1; text-align: center; text-shadow: 0 2px 10px #010711; }
.ready { margin: 0; color: #e2eeff; font-family: Georgia, serif; font-weight: 700; font-size: clamp(28px, 8vw, 45px); line-height: .96; letter-spacing: .03em; }
.compact-copy h1 { margin: 0; color: #f7c85a; font-family: Georgia, serif; font-size: clamp(41px, 12.5vw, 63px); font-style: italic; letter-spacing: -.045em; line-height: 1; text-shadow: 0 2px 1px #7d4513, 0 0 12px rgba(255, 187, 35, .55); }
.legend { margin: 5px 0 15px; color: #bfdcff; font: 700 clamp(16px, 4.5vw, 22px)/1 Georgia, serif; letter-spacing: .08em; }
.compact-cta { position: relative; z-index: 1; display: flex; align-items: center; gap: 11px; width: min(100%, 470px); min-height: 76px; margin: 0 auto 25px; padding: 10px 16px; border: 2px solid #42b5ff; border-radius: 14px; outline: 1px solid #efb441; background: linear-gradient(180deg, #ffdc7c, #e9a92f); box-shadow: inset 0 0 0 3px #ffd879, 0 0 0 3px #1864a5, 0 0 20px #167fe7; color: #080806; text-decoration: none; animation: compact-cta-breathe 3.1s ease-in-out infinite; }
.compact-cta svg { width: 39px; flex: 0 0 39px; fill: #080806; } .compact-cta span { flex: 1; text-align: center; } .compact-cta b, .compact-cta small { display: block; } .compact-cta b { font-size: clamp(15px, 4.4vw, 22px); line-height: 1; } .compact-cta small { margin-top: 7px; font-size: clamp(10px, 3.1vw, 13px); font-weight: 700; letter-spacing: .22em; }
.compact-cta i { font: 900 39px/1 Arial, sans-serif; transition: transform .2s ease; } .compact-cta:hover, .compact-cta:focus-visible { transform: translateY(-3px) scale(1.018); box-shadow: inset 0 0 0 3px #ffe596, 0 0 0 3px #2179c0, 0 0 31px #2bb5ff; } .compact-cta:hover i, .compact-cta:focus-visible i { transform: translateX(5px); }
@keyframes compact-cta-breathe { 50% { transform: translateY(-3px) scale(1.012); } }

.benefit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(100%, 570px); margin: 0 auto; }
.benefit-card { min-width: 0; overflow: hidden; border: 1px solid #96742d; border-radius: 11px; background: linear-gradient(135deg, rgba(13, 30, 50, .98), rgba(4, 10, 18, .98)); box-shadow: inset 0 0 0 3px rgba(10, 22, 34, .88); }
.card-scene { height: 70px; background-image: url("assets/reference.png"); background-size: 520px auto; filter: saturate(.8) contrast(1.08); }
.scene-one { background-position: 0 72%; }.scene-two { background-position: 41% 80%; }.scene-three { background-position: 73% 79%; }.scene-four { background-position: 100% 78%; }
.card-detail { display: flex; gap: 8px; padding: 10px 9px 12px; }.card-icon { flex: 0 0 27px; color: #ffc64e; font: 26px/1 Georgia, serif; }.card-detail h2 { margin: 0 0 6px; color: #ffc64e; font-size: 11px; line-height: 1.1; }.card-detail p { margin: 0; color: #d2e0f3; font-size: 11px; line-height: 1.35; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (min-width: 761px) {
  html, body, main { block-size: 100%; overflow: hidden; overscroll-behavior: none; }
  .campaign-frame { position: fixed; inset: 0; block-size: auto; height: auto; min-height: 0; }
  .campaign-stage { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; }
  .campaign-safe-area { inset: 0; transform: none; }
}
@media (max-width: 760px) { html, body { height: auto; overflow-x: clip; overflow-y: visible; }.campaign-frame { display: none; }.compact-campaign { display: block; } }
@media (max-width: 430px) { .benefit-grid { grid-template-columns: 1fr; }.card-scene { height: 84px; background-size: 680px auto; }.card-detail h2 { font-size: 13px; }.card-detail p { font-size: 12px; }.benefit-card { display: grid; grid-template-columns: 42% 1fr; }.card-detail { padding: 13px 10px; }.card-scene { height: auto; background-size: auto 160px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }