:root {
  --blue: #1d74ff;
  --ink: #f3f7ff;
  --muted: #98a7bc;
  --paper: #030711;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Inter, Arial, Helvetica, sans-serif; }
a { color: inherit; text-decoration: none; }

main {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  padding: 0 clamp(24px, 5vw, 78px);
  background:
    radial-gradient(circle at 76% 42%, rgba(16, 66, 150, .18), transparent 34%),
    radial-gradient(circle at 14% 92%, rgba(12, 100, 247, .08), transparent 30%),
    linear-gradient(90deg, rgba(132, 169, 224, .055) 1px, transparent 1px),
    linear-gradient(rgba(132, 169, 224, .055) 1px, transparent 1px),
    #030711;
  background-size: auto, auto, 72px 72px, 72px 72px, auto;
}

.glow { position: absolute; border-radius: 50%; filter: blur(70px); z-index: -2; pointer-events: none; }
.glow-one { width: 520px; height: 520px; right: 0; top: 5%; background: rgba(12, 100, 247, .16); }
.glow-two { width: 380px; height: 380px; left: -12%; bottom: -20%; background: rgba(12, 100, 247, .09); }

.site-header { width: 100%; height: 116px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(161, 187, 224, .16); }
.wordmark { width: clamp(210px, 21vw, 300px); height: auto; display: block; padding: 9px 13px; border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .24), inset 0 0 0 1px rgba(17, 26, 41, .06); }
.build-status { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 6px rgba(12, 100, 247, .12); animation: pulse 2.2s ease-in-out infinite; }

.hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr); align-items: center; gap: clamp(36px, 6vw, 100px); padding: clamp(58px, 7vh, 96px) 0; }
.hero-copy { max-width: 820px; }
.eyebrow { margin: 0 0 28px; display: flex; align-items: center; gap: 13px; color: var(--blue); font-size: 12px; font-weight: 750; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow span { color: var(--muted); }
h1 { margin: 0; max-width: 820px; font-size: clamp(54px, 6.4vw, 106px); line-height: .92; letter-spacing: -.068em; font-weight: 720; }
h1 span { color: var(--blue); }
.intro { max-width: 635px; margin: 32px 0 0; color: var(--muted); font-size: clamp(16px, 1.35vw, 20px); line-height: 1.65; }

.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 42px; }
.contact-actions a { min-width: 258px; min-height: 78px; padding: 16px 18px 16px 21px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border: 1px solid rgba(161, 187, 224, .18); border-radius: 8px; font-size: 15px; font-weight: 660; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.contact-actions small { display: block; margin-bottom: 5px; font-size: 10px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; opacity: .62; }
.contact-actions b { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; font-size: 18px; font-weight: 500; }
.primary-action { background: var(--blue); color: white; border-color: var(--blue) !important; box-shadow: 0 15px 40px rgba(12, 100, 247, .22); }
.primary-action b { background: white; color: var(--blue); }
.secondary-action { background: rgba(12, 22, 39, .74); backdrop-filter: blur(14px); color: var(--ink); }
.secondary-action b { background: rgba(29, 116, 255, .18); color: #75aaff; }
.contact-actions a:hover { transform: translateY(-3px); border-color: rgba(88, 145, 238, .42); box-shadow: 0 18px 42px rgba(0, 24, 67, .42); }
.contact-actions a:focus-visible { outline: 3px solid rgba(12, 100, 247, .28); outline-offset: 4px; }

.visual { position: relative; width: min(42vw, 660px); aspect-ratio: 1; justify-self: center; }
.orbit, .globe { position: absolute; border-radius: 50%; }
.orbit-outer { inset: 1%; border: 1px solid rgba(12, 100, 247, .28); animation: spin 18s linear infinite; }
.orbit-middle { inset: 7%; border: 1px dashed rgba(141, 177, 229, .24); animation: spin-reverse 25s linear infinite; }
.satellite { position: absolute; width: 16px; height: 16px; top: 9%; left: 20%; border-radius: 50%; background: var(--blue); border: 4px solid var(--paper); box-shadow: 0 0 0 1px var(--blue), 0 6px 18px rgba(12, 100, 247, .4); }
.sun-flare { position: absolute; width: 36%; height: 36%; left: 2%; top: 3%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(255, 255, 255, .98) 0 5%, rgba(116, 177, 255, .52) 14%, rgba(12, 100, 247, .18) 36%, transparent 70%); filter: blur(5px); animation: sun-breathe 5s ease-in-out infinite; }
.globe { inset: 7%; overflow: visible; filter: drop-shadow(0 42px 42px rgba(2, 22, 63, .3)); perspective: 1000px; }
.globe::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; z-index: 3; background: radial-gradient(circle at 28% 20%, rgba(255, 255, 255, .38) 0, rgba(159, 207, 255, .14) 16%, transparent 38%), linear-gradient(112deg, transparent 46%, rgba(0, 10, 38, .32) 88%); pointer-events: none; animation: light-sweep 7s ease-in-out infinite; }
.globe::after { content: ''; position: absolute; inset: 6.4%; border-radius: 50%; z-index: 5; box-shadow: inset 0 0 0 1px rgba(169, 222, 255, .5), inset -24px -8px 45px rgba(0, 7, 30, .24), 0 0 28px rgba(58, 153, 255, .24); pointer-events: none; }
.real-time-globe { position: absolute; inset: 0; display: grid; place-items: center; }
.real-time-globe canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .7s ease; }
.real-time-globe.ready canvas { opacity: 1; }
.globe-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; clip-path: circle(46.4% at 50% 50%); transition: opacity .7s ease; }
.real-time-globe.ready .globe-fallback { opacity: 0; }
.globe-label { position: absolute; inset: 0; display: grid; place-items: center; color: white; font-size: clamp(38px, 4.2vw, 72px); font-weight: 790; letter-spacing: -.08em; z-index: 6; text-shadow: 0 3px 6px rgba(0, 10, 35, .9), 0 8px 28px rgba(0, 8, 28, .78); }
.visual-note { position: absolute; right: 4%; bottom: 5%; margin: 0; padding: 10px 15px; background: rgba(5, 10, 20, .88); border: 1px solid rgba(142, 181, 237, .18); color: white; font-size: 10px; font-weight: 700; letter-spacing: .15em; transform: rotate(-4deg); backdrop-filter: blur(10px); }
.visual-note span { color: #72a8ff; padding: 0 5px; }

footer { min-height: 74px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(161, 187, 224, .16); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
footer span { color: var(--blue); padding: 0 7px; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(12, 100, 247, 0); } }
@keyframes light-sweep { 0%, 100% { transform: translate(-2%, -1%); opacity: .92; } 50% { transform: translate(4%, 3%); opacity: .68; } }
@keyframes sun-breathe { 50% { transform: scale(1.12); opacity: .78; } }

@media (max-width: 900px) {
  main { overflow: auto; }
  .site-header { height: 92px; }
  .hero { grid-template-columns: 1fr; padding: 54px 0 40px; }
  .visual { order: -1; width: min(78vw, 430px); }
  h1 { font-size: clamp(50px, 12vw, 82px); }
}

@media (max-width: 560px) {
  main { padding: 0 20px; background-size: 48px 48px; }
  .wordmark { width: 178px; }
  .build-status { font-size: 0; gap: 0; }
  .hero { gap: 40px; padding-top: 38px; }
  .visual { width: min(94vw, 365px); }
  h1 { font-size: clamp(47px, 14vw, 68px); }
  .intro { margin-top: 24px; }
  .contact-actions { margin-top: 32px; }
  .contact-actions a { width: 100%; min-width: 0; }
  footer { padding: 24px 0; gap: 10px; flex-direction: column; align-items: flex-start; }
}

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