:root {
  --night: #050a14;
  --paper: #eef4ff;
  --muted: #93a1b8;
  --line: rgba(185, 208, 255, 0.16);
  --blue: #5a84ec;
  --cursor-x: 70vw;
  --cursor-y: 20vh;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; background: var(--night); color: var(--paper); }
body { font-family: Gilroy, Arial, sans-serif; line-height: 1.45; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #8eb0ff; outline-offset: 4px; border-radius: 4px; }
::selection { background: #89aaff; color: #050a14; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.ambient__aurora {
  position: absolute; inset: -25%;
  background:
    radial-gradient(ellipse at 78% 12%, rgba(52, 99, 207, .42), transparent 31%),
    radial-gradient(ellipse at 20% 80%, rgba(25, 90, 117, .32), transparent 30%),
    radial-gradient(ellipse at 50% 48%, rgba(37, 57, 102, .35), transparent 37%);
  filter: blur(32px); animation: drift 18s ease-in-out infinite alternate;
}
.ambient__grid {
  position: absolute; inset: 0; opacity: .2;
  background-image: linear-gradient(rgba(160, 190, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(160, 190, 255, .08) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(circle at 50% 45%, #000, transparent 72%);
}
.ambient__ring { position: absolute; border: 1px solid rgba(145, 178, 245, .14); border-radius: 50%; }
.ambient__ring::before, .ambient__ring::after { content: ""; position: absolute; border-radius: 50%; border: inherit; }
.ambient__ring::before { inset: 8%; }
.ambient__ring::after { inset: 18%; }
.ambient__ring--one { width: 660px; height: 660px; right: -280px; top: -260px; animation: spin 32s linear infinite; }
.ambient__ring--two { width: 440px; height: 440px; left: -260px; bottom: -180px; animation: spin 24s linear infinite reverse; }
.ambient__cursor { position: absolute; inset: 0; background: radial-gradient(circle 300px at var(--cursor-x) var(--cursor-y), rgba(126, 164, 255, .14), transparent 68%); transition: opacity .3s ease; }
.ambient__noise { position: absolute; inset: 0; opacity: .12; 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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }

.shell { position: relative; z-index: 1; width: min(1480px, 100%); min-height: 100vh; margin: auto; padding: 26px clamp(20px, 4vw, 68px) 22px; display: flex; flex-direction: column; }
.header { display: flex; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.header__brand { width: 142px; transition: opacity .25s ease; }
.header__brand:hover { opacity: .72; }
.header__brand img { filter: grayscale(1) brightness(0) invert(1); }

.main { flex: 1; display: grid; grid-template-columns: minmax(240px, .8fr) 2.4fr; gap: clamp(28px, 5vw, 82px); align-items: center; padding: clamp(42px, 8vh, 92px) 0; }
.intro { position: relative; align-self: start; padding-top: 24px; }
.intro__eyebrow { margin: 0 0 18px; color: #8ea8dd; font-size: 10px; letter-spacing: .25em; text-transform: uppercase; }
.intro h1 { margin: 0; font-size: clamp(48px, 5.3vw, 84px); font-weight: 500; line-height: .91; letter-spacing: -.055em; }
.intro h1 em { display: inline-block; color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(202, 218, 251, .74); transition: opacity .28s ease, transform .28s ease, filter .28s ease; }
.intro h1 em.is-changing { opacity: 0; filter: blur(8px); transform: translateY(10px); }
.intro__copy { max-width: 330px; margin: 30px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

.orbit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 22px); perspective: 1200px; }
.portal {
  --x: 50%; --y: 50%; --tone: 99, 143, 255;
  position: relative; min-height: 610px; overflow: hidden; padding: 24px;
  display: flex; flex-direction: column;
  background: linear-gradient(155deg, rgba(255, 255, 255, .115), rgba(255, 255, 255, .035) 42%, rgba(var(--tone), .06));
  border: 1px solid rgba(210, 225, 255, .18); border-radius: 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.25);
  backdrop-filter: blur(18px); transform-style: preserve-3d;
  transition: transform .18s ease-out, border-color .3s ease, box-shadow .3s ease, opacity .3s ease, filter .3s ease;
}
.portal::before { content: ""; position: absolute; inset: 0; opacity: 0; background: radial-gradient(260px circle at var(--x) var(--y), rgba(var(--tone), .25), transparent 68%); transition: opacity .3s ease; }
.portal::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(var(--tone), .65), transparent 40%, transparent 65%, rgba(var(--tone), .18)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.portal:hover, .portal:focus-within { border-color: rgba(var(--tone), .48); box-shadow: 0 38px 90px rgba(0,0,0,.44), 0 0 70px rgba(var(--tone), .08); }
.portal:hover::before, .portal:focus-within::before { opacity: 1; }
.portal__number { position: absolute; right: 10px; top: 4px; color: transparent; font-size: 104px; font-weight: 700; line-height: 1; letter-spacing: -.08em; -webkit-text-stroke: 1px rgba(var(--tone), .1); pointer-events: none; transition: transform .45s ease, -webkit-text-stroke-color .35s ease; }
.portal:hover .portal__number { transform: translate(-3px, 5px); -webkit-text-stroke-color: rgba(var(--tone), .2); }
.portal__beam { position: absolute; top: -10%; bottom: -10%; left: -45%; width: 35%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); transition: left .7s ease; }
.portal:hover .portal__beam { left: 125%; }
.portal__logo { position: relative; z-index: 1; display: flex; align-items: center; height: 96px; margin-top: 36px; padding: 19px 17px; border-radius: 17px; background: rgba(246, 249, 255, .98); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.portal:hover .portal__logo, .portal:focus-within .portal__logo { transform: translateZ(24px) scale(1.025); }
.portal__logo img { width: 100%; max-height: 58px; object-fit: contain; }
.portal__field { position: relative; z-index: 1; margin: 20px 0 0; color: #f3f6fc; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; }
.portal__description { position: relative; z-index: 1; min-height: 66px; margin: 11px 0 0; color: #bbc6d8; font-size: 12.5px; line-height: 1.58; }
.portal__services { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.portal__services li { position: relative; display: flex; align-items: center; min-width: 0; min-height: 34px; padding: 7px 7px 7px 20px; border: 1px solid rgba(var(--tone), .22); border-radius: 9px; color: #c7d2e2; background: rgba(var(--tone), .065); font-size: 9.5px; line-height: 1.25; }
.portal__services li::before { content: ""; position: absolute; left: 9px; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--tone)); box-shadow: 0 0 7px rgba(var(--tone), .8); transform: translateY(-50%); }
.portal__address { position: relative; z-index: 1; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; margin-top: 16px; padding-top: 13px; border-top: 1px solid rgba(var(--tone), .2); color: #b9c4d5; font-size: 10.5px; font-style: normal; line-height: 1.5; }
.portal__contact { position: relative; z-index: 1; display: grid; gap: 9px; margin-top: 12px; }
.portal__contact a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; width: 100%; color: #c5cfde; font-size: 10.5px; line-height: 1.35; transition: color .25s ease; }
.portal__contact a:hover { color: rgb(var(--tone)); }
.portal__info-icon { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(var(--tone), .42); border-radius: 8px; color: rgb(var(--tone)); background: rgba(var(--tone), .1); font-size: 12px; font-weight: 700; line-height: 1; }
.portal__info-copy { display: block; min-width: 0; }
.portal__info-copy b { display: block; margin-bottom: 3px; color: rgb(var(--tone)); font-size: 8.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .13em; }
.portal__address-line { display: block; white-space: nowrap; }
.portal__bottom { position: relative; z-index: 1; display: flex; align-items: end; margin-top: auto; padding-top: 24px; }
.portal__actions { display: grid; gap: 8px; }
.portal__actions a { width: max-content; color: #aeb9cb; font-size: 12.5px; border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease; }
.portal__actions a:first-child { color: #fff; }
.portal__actions a:hover { color: rgb(var(--tone)); border-color: currentColor; }
.portal__actions b { padding-left: 4px; font-size: 15px; }

.footer { display: flex; justify-content: flex-start; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; }
.footer p { margin: 0; color: #aab6ca; }
.footer__identity span { display: block; margin-top: 3px; color: #53627a; font-size: 7px; text-transform: uppercase; letter-spacing: .15em; }
.reveal { animation: reveal .8s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--delay); }

@media (hover: hover) and (pointer: fine) {
  .orbit:hover .portal:not(:hover) { opacity: .68; filter: saturate(.72); }
}

@media (min-width: 1181px) and (max-height: 820px) {
  .main { padding: 32px 0; }
  .portal { min-height: 580px; }
  .portal__logo { height: 86px; margin-top: 26px; padding-top: 14px; padding-bottom: 14px; }
  .portal__description { min-height: 60px; }
  .portal__address { margin-top: 10px; padding-top: 8px; }
  .portal__bottom { padding-top: 14px; }
}

@media (max-width: 1180px) {
  .main { grid-template-columns: 1fr; padding-top: 46px; }
  .intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 30px; padding-top: 0; }
  .intro__eyebrow { grid-column: 1 / -1; margin-bottom: -12px; }
  .intro__copy { margin: 0; }
  .portal { min-height: 590px; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .orbit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portal:last-child { grid-column: 1 / -1; min-height: 560px; }
  .portal:last-child .portal__logo { max-width: 360px; }
}

@media (max-width: 760px) {
  .shell { padding: 18px 16px; }
  .header { grid-template-columns: 1fr auto; }
  .header__brand { width: 122px; }
  .intro { display: block; }
  .intro__eyebrow { margin-bottom: 16px; }
  .intro h1 { font-size: clamp(49px, 16vw, 72px); }
  .intro__copy { margin-top: 22px; }
  .orbit { grid-template-columns: 1fr; }
  .portal { min-height: 590px; }
  .portal__logo { margin-top: 38px; }
  .footer { align-items: flex-start; flex-direction: column; }
}

@keyframes reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes drift { to { transform: rotate(8deg) scale(1.1) translate3d(-2%, 3%, 0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }