*{margin:0;padding:0;box-sizing:border-box}:root{--color-bg-dark: #050508;--color-bg-panel: #0a0a0f;--color-accent-cyan: #00f0ff;--color-accent-magenta: #ff00ff;--color-accent-purple: #8b5cf6;--color-text-primary: #ffffff;--color-text-secondary: #a0a0b0;--color-text-tertiary: #606070;--color-glass-bg: rgba(255, 255, 255, .03);--color-glass-border: rgba(255, 255, 255, .08);--color-glass-highlight: rgba(255, 255, 255, .12)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--color-bg-dark);color:var(--color-text-primary);overflow-x:hidden;position:relative;min-height:100vh}.grain{position:fixed;top:-50%;left:-50%;width:200%;height:200%;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2.5' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:100;opacity:.4;animation:grainShift 8s steps(10) infinite}@keyframes grainShift{0%,to{transform:translate(0)}10%{transform:translate(-5%,-10%)}30%{transform:translate(3%,7%)}50%{transform:translate(-8%,3%)}70%{transform:translate(5%,-5%)}90%{transform:translate(-3%,8%)}}#app{width:100vw;height:100vh;position:relative;display:grid;grid-template-columns:minmax(420px,540px) 1fr;overflow:hidden}.hero-panel{background:linear-gradient(135deg,var(--color-bg-panel) 0%,var(--color-bg-dark) 100%);padding:4rem 3rem;display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:10;border-right:1px solid rgba(255,255,255,.04);overflow-y:auto}.hero-panel:before{content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:linear-gradient(180deg,transparent 0%,var(--color-accent-cyan) 30%,var(--color-accent-magenta) 70%,transparent 100%);opacity:.3;animation:borderPulse 3s ease-in-out infinite}@keyframes borderPulse{0%,to{opacity:.2}50%{opacity:.6}}.status-bar{display:flex;gap:.75rem;margin-bottom:3rem;flex-wrap:wrap;animation:fadeInDown .6s ease-out .1s both}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.status-pill{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--color-glass-bg);border:1px solid var(--color-glass-border);border-radius:100px;font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--color-text-secondary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all .3s ease}.status-pill:hover{background:var(--color-glass-highlight);border-color:#ffffff26;transform:translateY(-2px)}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--color-accent-cyan);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.2)}}.hero-content{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2rem}.hero-title{font-family:Space Grotesk,sans-serif;font-size:clamp(2.5rem,5vw,4rem);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:0}.title-line{display:block;animation:fadeInUp .8s ease-out both}.title-line:nth-child(1){animation-delay:.2s;color:var(--color-text-secondary);font-weight:300}.title-line:nth-child(2){animation-delay:.4s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px);filter:blur(10px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.title-highlight{background:linear-gradient(135deg,var(--color-accent-cyan) 0%,var(--color-accent-magenta) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;position:relative}.hero-subtitle{font-size:1rem;line-height:1.7;color:var(--color-text-secondary);max-width:480px;animation:fadeInUp .8s ease-out .6s both}.metrics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;animation:fadeInUp .8s ease-out .8s both}.metric-card{background:var(--color-glass-bg);border:1px solid var(--color-glass-border);border-radius:12px;padding:1.25rem 1rem;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:all .3s ease}.metric-card:hover{background:var(--color-glass-highlight);border-color:#ffffff26;transform:translateY(-4px)}.metric-value{font-family:Space Grotesk,sans-serif;font-size:2rem;font-weight:700;background:linear-gradient(135deg,var(--color-text-primary) 0%,var(--color-accent-cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.25rem}.metric-label{font-size:.75rem;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.05em}.cta-group{display:flex;gap:1rem;flex-wrap:wrap;animation:fadeInUp .8s ease-out 1s both}.btn{display:inline-flex;align-items:center;padding:1rem 2rem;border-radius:100px;font-size:.875rem;font-weight:600;text-decoration:none;transition:all .3s ease;white-space:nowrap}.btn-primary{background:linear-gradient(135deg,var(--color-accent-cyan) 0%,var(--color-accent-purple) 100%);color:var(--color-bg-dark);box-shadow:0 8px 24px #00f0ff33}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px #00f0ff4d}.btn-secondary{background:var(--color-glass-bg);border:1px solid var(--color-glass-border);color:var(--color-text-primary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.btn-secondary:hover{background:var(--color-glass-highlight);border-color:#fff3;transform:translateY(-2px)}.globe-container{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.globe-frame{position:relative;width:140%;height:140%;display:flex;align-items:center;justify-content:center;animation:fadeIn 1.2s ease-out .4s both}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}#globe{width:100%;height:100%;opacity:.95;transition:opacity .3s ease;cursor:grab}#globe:active{cursor:grabbing}.signals-ticker{position:absolute;bottom:2rem;right:2rem;display:flex;gap:1rem;animation:fadeInUp .8s ease-out 1.2s both}.ticker-item{background:var(--color-glass-bg);border:1px solid var(--color-glass-border);border-radius:8px;padding:.75rem 1.25rem;font-size:.75rem;font-weight:600;color:var(--color-text-secondary);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);display:flex;align-items:center;gap:.5rem;animation:tickerPulse 2s ease-in-out infinite}.ticker-item:nth-child(2){animation-delay:.3s}.ticker-item:nth-child(3){animation-delay:.6s}@keyframes tickerPulse{0%,to{opacity:.7}50%{opacity:1}}.latency{color:var(--color-accent-cyan);font-weight:700}.city-card{position:absolute;z-index:20;pointer-events:none;transition:opacity .4s ease,filter .4s ease,transform .4s ease;animation:cardFloat 3s ease-in-out infinite}@keyframes cardFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.city-card:nth-child(6){animation-delay:0s}.city-card:nth-child(7){animation-delay:.6s}.city-card:nth-child(8){animation-delay:1.2s}.city-card:nth-child(9){animation-delay:1.8s}.city-card:nth-child(10){animation-delay:2.4s}.city-card[data-city=sf]{position-anchor:--cobe-sf;bottom:anchor(top);left:anchor(center);transform:translate(-50%,-12px);opacity:var(--cobe-visible-sf, 0);filter:blur(calc((1 - var(--cobe-visible-sf, 0)) * 12px))}.city-card[data-city=nyc]{position-anchor:--cobe-nyc;bottom:anchor(top);left:anchor(center);transform:translate(-50%,-12px);opacity:var(--cobe-visible-nyc, 0);filter:blur(calc((1 - var(--cobe-visible-nyc, 0)) * 12px))}.city-card[data-city=london]{position-anchor:--cobe-london;bottom:anchor(top);left:anchor(center);transform:translate(-50%,-12px);opacity:var(--cobe-visible-london, 0);filter:blur(calc((1 - var(--cobe-visible-london, 0)) * 12px))}.city-card[data-city=tokyo]{position-anchor:--cobe-tokyo;bottom:anchor(top);left:anchor(center);transform:translate(-50%,-12px);opacity:var(--cobe-visible-tokyo, 0);filter:blur(calc((1 - var(--cobe-visible-tokyo, 0)) * 12px))}.city-card[data-city=saoPaulo]{position-anchor:--cobe-saoPaulo;bottom:anchor(top);left:anchor(center);transform:translate(-50%,-12px);opacity:var(--cobe-visible-saoPaulo, 0);filter:blur(calc((1 - var(--cobe-visible-saoPaulo, 0)) * 12px))}.card-content{background:#0a0a0fcc;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.875rem 1.25rem;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:0 8px 32px #0006,inset 0 1px #ffffff1a;min-width:160px}.city-name{font-family:Space Grotesk,sans-serif;font-size:.875rem;font-weight:600;color:var(--color-text-primary);margin-bottom:.25rem;letter-spacing:.02em}.city-meta{font-size:.6875rem;color:var(--color-text-tertiary);font-family:Space Grotesk,monospace;letter-spacing:.02em}@media(max-width:1200px){#app{grid-template-columns:1fr;grid-template-rows:auto 1fr}.hero-panel{padding:2rem 1.5rem;border-right:none;border-bottom:1px solid rgba(255,255,255,.04)}.hero-panel:before{width:100%;height:1px;top:auto;bottom:0;background:linear-gradient(90deg,transparent 0%,var(--color-accent-cyan) 30%,var(--color-accent-magenta) 70%,transparent 100%)}.hero-title{font-size:2.5rem}.metrics-grid{grid-template-columns:repeat(3,1fr)}.signals-ticker{bottom:1rem;right:1rem;flex-direction:column;gap:.5rem}.globe-frame{width:120%;height:120%}}@media(max-width:768px){.hero-panel{padding:1.5rem 1rem}.hero-title{font-size:2rem}.metrics-grid{gap:.75rem}.metric-card{padding:1rem .75rem}.metric-value{font-size:1.5rem}.cta-group{flex-direction:column}.btn{width:100%;justify-content:center}.signals-ticker{display:none}.city-card .card-content{padding:.625rem .875rem;min-width:120px}.city-name{font-size:.75rem}.city-meta{font-size:.625rem}}