:root {
  --brand-background-dark: #0C1117;
  --brand-background-light: #F4F9FA;
  --brand-text-light: #FFFFFF;
  --brand-text-muted: #A8B6C7;
  --brand-gradient-start: #1B4D78;
  --brand-gradient-end: #249ED8;
  --brand-gradient-ramos: linear-gradient(90deg, var(--brand-gradient-start) 0%, var(--brand-gradient-end) 100%);
  --surface: rgba(244, 249, 250, .075);
  --stroke: rgba(255, 255, 255, .13);
  --shadow: 0 24px 80px rgba(0, 0, 0, .35);
  --radius-xl: 28px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--brand-background-dark); scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100%; color: var(--brand-text-light); font-family: var(--font); line-height: 1.5;
  background:
    radial-gradient(circle at 20% -10%, rgba(36,158,216,.24), transparent 34rem),
    radial-gradient(circle at 100% 18%, rgba(27,77,120,.28), transparent 28rem),
    linear-gradient(180deg, #0C1117 0%, #101821 54%, #0C1117 100%);
  overflow-x: hidden;
}
body::before { content:""; position: fixed; inset:0; pointer-events:none; opacity:.24; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 50% 10%, #000, transparent 72%); }
.ambient { position: fixed; width: 15rem; height: 15rem; border-radius: 999px; filter: blur(42px); pointer-events: none; opacity: .30; transform: translate3d(0,0,0); }
.ambient-one { left: -5rem; top: 8rem; background: #249ED8; animation: floatOne 12s ease-in-out infinite; }
.ambient-two { right: -6rem; bottom: 5rem; background: #1B4D78; animation: floatTwo 15s ease-in-out infinite; }
.page-shell { width: min(100%, 520px); margin: 0 auto; padding: max(24px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)); position: relative; z-index: 1; }
.hero { padding: 18px 2px 18px; text-align: center; }
.brand-lockup { margin: 0 auto 18px; width: min(210px, 58vw); padding: 18px 20px; border: 1px solid rgba(255,255,255,.09); border-radius: 26px; background: rgba(12,17,23,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 18px 48px rgba(0,0,0,.24); backdrop-filter: blur(16px); }
.brand-lockup img { width: 100%; height: auto; display: block; }
.eyebrow { margin: 0 0 12px; color: #8fd7ff; text-transform: uppercase; letter-spacing: .17em; font-size: .72rem; font-weight: 800; }
h1 { margin: 0 auto; max-width: 13ch; font-size: clamp(2.24rem, 12vw, 4.9rem); line-height: .96; letter-spacing: -.07em; font-weight: 800; text-wrap: balance; }
.hero-copy { margin: 18px auto 0; max-width: 28rem; color: var(--brand-text-muted); font-size: 1.02rem; }
.choice-grid { display: grid; gap: 13px; margin-top: 14px; }
.choice-card { position: relative; display: grid; grid-template-columns: 60px 1fr; grid-template-areas: "orb kicker" "orb title" "orb text" "orb action"; column-gap: 15px; min-height: 148px; width: 100%; padding: 18px; border-radius: var(--radius-xl); border: 1px solid var(--stroke); background: linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.045)); color: #fff; text-align: left; text-decoration: none; box-shadow: var(--shadow); overflow: hidden; isolation: isolate; cursor: pointer; backdrop-filter: blur(18px); transform: translateZ(0); transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s ease, background .25s ease, box-shadow .25s ease; font: inherit; }
.choice-card::before { content:""; position:absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(115deg, transparent 0 18%, rgba(143,215,255,.8) 29%, rgba(36,158,216,.28) 38%, transparent 52% 100%); background-size: 260% 260%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .56; pointer-events:none; animation: liveShimmer 7s linear infinite; }
.choice-card::after { content:""; position:absolute; width: 9rem; height: 9rem; right: -4rem; top: -4rem; background: radial-gradient(circle, rgba(36,158,216,.24), transparent 68%); opacity:.7; z-index:-1; }
.choice-card:hover, .choice-card:focus-visible { transform: translateY(-3px) scale(1.012); border-color: rgba(36,158,216,.42); box-shadow: 0 30px 90px rgba(0,0,0,.42); }
.choice-card:active { transform: translateY(1px) scale(.985); background: linear-gradient(145deg, rgba(36,158,216,.16), rgba(255,255,255,.055)); }
.choice-card:focus-visible { outline: 3px solid rgba(143,215,255,.86); outline-offset: 4px; }
.card-orb { grid-area: orb; width: 60px; height: 60px; align-self: start; display:grid; place-items:center; border-radius: 26%; background: linear-gradient(145deg, rgba(12,17,23,.78), rgba(27,77,120,.22)); border: 1px solid rgba(255,255,255,.13); position: relative; overflow:hidden; box-shadow: inset 0 0 0 1px rgba(36,158,216,.18), 0 14px 34px rgba(0,0,0,.22); }
.card-orb::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background: var(--brand-gradient-ramos); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.card-orb img { width: 43px; height: 43px; display:block; filter: drop-shadow(0 0 14px rgba(36,158,216,.26)); }
.travel img { animation: planeFloat 3.5s ease-in-out infinite; }
.imports::after { content:""; position:absolute; inset:-40%; background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%); transform: translateX(-60%) rotate(12deg); animation: importSheen 6s ease-in-out infinite; }
.energy img { animation: energyPulse 4s ease-in-out infinite; }
.card-kicker { grid-area:kicker; color:#8fd7ff; font-weight:800; font-size:.70rem; letter-spacing:.13em; text-transform:uppercase; }
.card-title { grid-area:title; margin-top: 2px; font-size:1.10rem; line-height:1.15; font-weight:800; letter-spacing:-.025em; }
.card-text { grid-area:text; margin-top: 7px; color: var(--brand-text-muted); font-size:.91rem; }
.card-action { grid-area:action; margin-top: 12px; width:max-content; max-width:100%; border-radius: 999px; padding: 8px 12px; font-size:.82rem; font-weight:800; background: rgba(36,158,216,.15); color:#fff; border: 1px solid rgba(36,158,216,.24); }
.trust-note { margin: 18px auto 0; max-width: 28rem; text-align:center; color: var(--brand-text-muted); font-size:.9rem; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .72s cubic-bezier(.16,1,.3,1), transform .72s cubic-bezier(.16,1,.3,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
@keyframes floatOne { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(34px, 28px) scale(1.08); } }
@keyframes floatTwo { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-26px, -30px) scale(.94); } }
@keyframes liveShimmer { 0% { background-position: 220% 50%; } 100% { background-position: -80% 50%; } }
@keyframes planeFloat { 0%,100% { transform: translate(0,0); } 50% { transform: translate(1.5px,-1.5px); } }
@keyframes importSheen { 0%,68%,100% { transform: translateX(-70%) rotate(12deg); opacity:0; } 76% { opacity:.55; } 88% { transform: translateX(70%) rotate(12deg); opacity:0; } }
@keyframes energyPulse { 0%,100% { filter: drop-shadow(0 0 8px rgba(36,158,216,.24)); } 50% { filter: drop-shadow(0 0 18px rgba(36,158,216,.62)); } }
@keyframes nodePulse { 0%,100% { opacity:.82; transform:scale(1); } 50% { opacity:1; transform:scale(1.08); } }
@media (min-width: 760px) { .page-shell { width:min(100%, 840px); padding: 44px 28px; } .hero { padding-top: 10px; } .brand-lockup { width: 224px; } h1 { max-width: 14ch; font-size: clamp(2.4rem, 3.8vw, 3.4rem); letter-spacing: -.055em; } .hero-copy { font-size: 1.08rem; } .choice-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin-top: 30px; } .choice-card { grid-template-columns: 68px 1fr; min-height: 214px; align-content: start; padding: 22px; } .card-orb { width:64px; height:64px; } .card-orb img { width:46px; height:46px; } .card-title { font-size: 1.22rem; } .card-text { font-size: .96rem; } .trust-note { margin-top: 26px; } }
@media (max-width: 380px) { .page-shell { padding-left: 14px; padding-right: 14px; } .choice-card { grid-template-columns: 52px 1fr; padding: 15px; min-height: 142px; } .card-orb { width:52px; height:52px; } .card-orb img { width:38px; height:38px; } h1 { font-size: 2.05rem; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; } .reveal { opacity: 1 !important; transform: none !important; } }