/* BASS PORTAL CONTROL ROOM — VISUAL ONLY / no external resources */
:root {
  color-scheme: dark;
  --base: #04070b;
  --ink: #f2f7ff;
  --muted: #93a0af;
  --blue: #158dff;
  --blue-soft: #61b9ff;
  --mint: #4cfbbf;
  --gold: #c8a66d;
  --line: rgba(112, 156, 193, .22);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --font: Inter, "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { min-height: 100%; background: var(--base); }
body { min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--base); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
button, input, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
::selection { background: rgba(21, 141, 255, .38); color: white; }
[hidden] { display: none !important; }

.scene-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 60% 80% at 35% 55%, rgba(0,63,114,.20), transparent 75%), #04070b; }
.ambient-glow { position: absolute; width: 86vw; height: 86vw; min-width: 920px; min-height: 920px; top: -52vw; left: -32vw; border-radius: 50%; background: radial-gradient(circle, rgba(12,91,146,.16), transparent 63%); filter: blur(36px); }
.cyber-grid { position:absolute; inset:0; opacity: .19; background-image: linear-gradient(to right, rgba(90, 158, 213, .13) 1px, transparent 1px), linear-gradient(to bottom, rgba(90, 158, 213, .13) 1px, transparent 1px); background-size: 55px 55px; mask-image: linear-gradient(to right, black, transparent 76%); }
.scene-background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 30%, rgba(4,7,11,.36) 65%, rgba(4,7,11,.85) 100%), linear-gradient(180deg, rgba(4,7,11,.06), transparent 55%, rgba(4,7,11,.58)); }
.scan-line { position: absolute; inset: -40% 0 auto; height: 70%; background: linear-gradient(180deg, transparent, rgba(38,255,179,.015) 98%, rgba(38,255,179,.08) 100%); animation: atmosphere-scan 16s linear infinite; }
.matrix-stream { position:absolute; inset:0; overflow:hidden; opacity:.56; }
.matrix-stream span { position: absolute; top: -74%; writing-mode: vertical-rl; text-orientation: upright; font: 9px/1.1 var(--mono); letter-spacing: .55em; color: rgba(38, 232, 159, .24); text-shadow: 0 0 9px rgba(0, 255, 151, .25); white-space: nowrap; animation: datafall 20s linear infinite; }
.matrix-stream span:nth-child(1) {left:3%; animation-duration:23s; animation-delay:-7s;}
.matrix-stream span:nth-child(2) {left:10%; animation-duration:17s; animation-delay:-13s;opacity:.6;}
.matrix-stream span:nth-child(3) {left:19%; animation-duration:26s; animation-delay:-17s;}
.matrix-stream span:nth-child(4) {left:27%; animation-duration:16s; animation-delay:-4s;opacity:.38;}
.matrix-stream span:nth-child(5) {left:34%; animation-duration:22s; animation-delay:-20s;}
.matrix-stream span:nth-child(6) {left:43%; animation-duration:18s; animation-delay:-2s;opacity:.4;}
.matrix-stream span:nth-child(7) {left:51%; animation-duration:24s; animation-delay:-10s;}
.matrix-stream span:nth-child(8) {left:60%; animation-duration:28s; animation-delay:-5s;opacity:.38;}
.matrix-stream span:nth-child(9) {left:68%; animation-duration:18s; animation-delay:-10s;}
.matrix-stream span:nth-child(10){left:77%; animation-duration:20s; animation-delay:-15s;opacity:.24;}
.matrix-stream span:nth-child(11){left:88%; animation-duration:26s; animation-delay:-11s;opacity:.30;}
.matrix-stream span:nth-child(12){left:96%; animation-duration:17s; animation-delay:-9s;opacity:.26;}

.site-shell {position:relative; z-index:1; width:min(1510px,100%); min-height:100vh; min-height:100dvh; margin:0 auto; padding: 0 clamp(22px, 5.3vw, 90px); display:flex; flex-direction:column;}
.masthead { height:110px; flex:none; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.identity {display:flex;align-items:center;gap:14px;}
.identity-mark {position:relative; width:46px;height:46px;display:flex;align-items:center;justify-content:center;gap:2px; border:1px solid rgba(41,154,249,.65); color:#e3f3ff; font-family:var(--mono);font-size:21px;font-weight:800;letter-spacing:-4px; transform:skew(-7deg); box-shadow: 0 0 20px rgba(25,140,240,.15), inset 0 0 18px rgba(25,140,240,.07);}
.identity-mark span {transform:skew(7deg);}
.identity-mark i {position:absolute;width:19px;height:2px;background:var(--gold);bottom:6px;right:-6px;box-shadow:0 0 9px rgba(209,178,114,.5);}
.identity-name {display:flex;flex-direction:column;gap:4px;}
.identity-name strong {font-size:16px; letter-spacing:.17em; font-weight:850;line-height:1;}
.identity-name>span {font:600 9px/1.4 var(--mono); color:#879bad; letter-spacing:.2em;}
.header-meta {display:flex;align-items:center;gap:11px;font:600 10px/1.4 var(--mono);letter-spacing:.17em;color:#8ea7b9;}
.header-led {display:inline-block;height:6px;width:6px;border-radius:50%;background:#40f6af;box-shadow:0 0 10px rgba(46,235,156,.8);}
.header-index {color:var(--gold);margin-left:11px;}
.main-layout {flex:1; display:grid;grid-template-columns:minmax(0,1.2fr) minmax(350px, .8fr);gap:clamp(30px,7vw,115px);align-items:center; padding: 45px 0 50px;}
.hero {position:relative; min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;}
.hero-copy {position:relative;z-index:2;}
.micro-heading {display:flex;gap:14px;align-items:center;font:650 11px/1.5 var(--mono);letter-spacing:.25em;color:var(--gold);margin:0 0 25px;}
.micro-heading span {color:var(--blue-soft);}
h1 {font-size:clamp(64px,7vw,111px); line-height:.85; margin:0;letter-spacing:-.09em;font-weight:900;text-transform:uppercase;}
h1 em {font-style:normal; color:transparent; -webkit-text-stroke:1px rgba(142,196,239,.58);}
h1>span {display:inline-block; white-space:nowrap; font-size:.76em; letter-spacing:-.077em; color:#e9f3ff;text-shadow:0 0 60px rgba(20,136,235,.2);}
.title-dot {color:var(--blue);}
.hero-subtitle {font-size:clamp(14px,1.4vw,16px);line-height:1.75;max-width:460px;color:#a6b7c5;margin:30px 0 0;}
.portal-graphic {position:relative; height: clamp(220px,27vw,380px); max-height:380px; width:100%; min-width:0; isolation:isolate; margin-top:-3px;}
.portal-aura {position:absolute; width:390px;height:310px;max-width:100%;top:14%;left:46%;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(12,117,210,.20),rgba(12,117,210,.06) 35%,transparent 67%);filter:blur(12px);}
.orbital,.orbital-arc {position:absolute;left:48%;top:48%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);}
.orbital--outer {width:min(340px,94%);border:1px solid rgba(59,160,244,.14);box-shadow:0 0 30px rgba(17,127,213,.08),inset 0 0 30px rgba(17,127,213,.04);}
.orbital--outer::before,.orbital--outer::after {content:"";position:absolute;left:50%;top:-3px;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:#55fbce;box-shadow:0 0 18px #4cfbbe;}
.orbital--outer::after {top:auto;bottom:-3px;background:var(--gold);box-shadow:0 0 16px rgba(211,169,96,.7);}
.orbital--middle {width:min(286px,78%);border:1px dashed rgba(82,177,255,.36);animation: orbit-rotate 36s linear infinite;}
.orbital--inner {width:min(223px,61%);border:1px solid rgba(79,198,255,.56);box-shadow:0 0 45px rgba(12,136,242,.12),inset 0 0 43px rgba(16,125,235,.07);}
.orbital-arc--one {width:min(314px,87%);border:2px solid transparent;border-top-color:var(--blue);border-right-color:rgba(39,201,254,.20);filter:drop-shadow(0 0 12px rgba(38,129,255,.75));animation:orbit-rotate 12s linear infinite;}
.orbital-arc--two {width:min(244px,68%);border:2px solid transparent;border-bottom-color:var(--gold);border-left-color:rgba(193,155,94,.2);filter:drop-shadow(0 0 10px rgba(204,158,87,.30));animation:orbit-rotate-reverse 15s linear infinite;}
.portal-core {position:absolute;left:48%;top:48%;width:min(160px,44%);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(5,37,68,.95),rgba(3,13,24,.84) 66%,transparent);border:1px solid rgba(59,143,220,.32);box-shadow:inset 0 0 45px rgba(19,126,203,.15),0 0 80px rgba(9,113,214,.12);}
.portal-core>span {font-size:38px;font-weight:900;letter-spacing:-.085em;color:#cceaff;text-shadow:0 0 24px rgba(52,167,255,.65);}
.portal-slash {color:var(--gold);padding:0 2px;}
.portal-crosshair {position:absolute;left:48%;width:1px;height:18px;background:rgba(145,199,235,.45);}
.portal-crosshair--top {top:0;}.portal-crosshair--bottom {bottom:0;}
.hero-techline {display:flex;flex-wrap:wrap;gap:16px;margin-top:auto;padding-top:10px;}
.hero-techline span {display:flex;align-items:center;gap:8px;font:600 9px/1.5 var(--mono);color:#7893a8;letter-spacing:.08em;white-space:nowrap;}
.hero-techline i {display:inline-block;width:4px;height:4px;background:var(--blue);box-shadow:0 0 10px rgba(56,159,255,.6);}

.gateway { width:100%;min-width:0;max-width:486px;justify-self:end;}
.gateway-overline,.gateway-baseline {display:flex;align-items:center;justify-content:space-between;gap:14px;font:600 9px/1.4 var(--mono);letter-spacing:.09em;color:#7993aa;}
.gateway-overline {margin-bottom:11px;padding:0 3px;}.gateway-overline span:first-child {color:var(--gold);}
.gateway-card {position:relative;padding:clamp(25px,3.4vw,47px);overflow:hidden;background:linear-gradient(145deg,rgba(17,32,46,.96),rgba(6,13,22,.98) 64%);border:1px solid rgba(82,144,197,.36);box-shadow:0 20px 100px rgba(0,0,0,.28),inset 0 0 42px rgba(33,141,220,.04);}
.gateway-card::before {content:"";position:absolute;left:-1px;top:-1px;width:90px;height:2px;background:linear-gradient(90deg,var(--gold),transparent);}
.gateway-card::after {content:"";position:absolute;right:-1px;bottom:-1px;width:90px;height:2px;background:linear-gradient(270deg,var(--blue),transparent);}
.gateway-top {display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:32px;}
.scan-icon {position:relative;width:88px;height:88px;display:grid;place-items:center;color:var(--blue-soft);background:radial-gradient(circle,rgba(17,121,212,.20),transparent 78%);}
.scan-icon svg {width:62px;height:62px;filter:drop-shadow(0 0 9px rgba(59,152,244,.4));}
.scan-corner {position:absolute;width:12px;height:12px;border:2px solid #45b4ff;filter:drop-shadow(0 0 6px rgba(40,165,255,.45));}
.scan-corner--tl{left:3px;top:3px;border-right:0;border-bottom:0}.scan-corner--tr{right:3px;top:3px;border-left:0;border-bottom:0}.scan-corner--bl{left:3px;bottom:3px;border-right:0;border-top:0}.scan-corner--br{right:3px;bottom:3px;border-left:0;border-top:0}
.scan-sweep {position:absolute;left:8px;right:8px;height:1px;top:50%;background:linear-gradient(90deg,transparent,#6fffdf,transparent);box-shadow:0 0 10px rgba(80,255,220,.8);animation:scan-pass 3.2s ease-in-out infinite alternate;}
.gateway-seal {font:650 9px/1.5 var(--mono);letter-spacing:.13em; color:#9db3c7;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.gateway-seal span {width:5px;height:5px;background:var(--mint);box-shadow:0 0 9px var(--mint);border-radius:50%;}
.step-tag {margin:0 0 12px;font:650 10px/1.4 var(--mono);color:var(--gold);letter-spacing:.1em;}
h2 {font-size:clamp(38px,4vw,53px);font-weight:850;letter-spacing:-.065em;line-height:1.03;margin:0;}
h2 span {color:var(--blue-soft);}
.gateway-description {margin:18px 0 32px;max-width:330px;color:#a1b3c6;font-size:14px;line-height:1.72;}
.form-row {display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:11px;}
.form-row label,.form-note {font:650 10px/1.4 var(--mono);letter-spacing:.11em;}
.form-row label {color:#d4e5f6;}.form-note{font-size:9px;color:#6ca9bd;}
.select-shell {position:relative;background:rgba(4,12,20,.66);border:1px solid rgba(116,166,208,.33);transition:border-color .18s,box-shadow .18s;}
.select-shell:focus-within{border-color:var(--blue-soft);box-shadow:0 0 0 2px rgba(37,133,250,.13);}
.select-shell select {display:block;appearance:none;-webkit-appearance:none;width:100%;height:58px;padding:0 50px 0 17px;border:0;outline:0;background:transparent;color:#eef7ff;font-weight:700;font-size:15px;cursor:pointer;}
.select-shell select option {background:#101923;color:#eef7ff;}
.select-chevron {position:absolute;right:19px;top:21px;pointer-events:none;width:10px;height:10px;border-right:2px solid #8bc3eb;border-bottom:2px solid #8bc3eb;transform:rotate(45deg);}
.approve-button {margin-top:15px; width:100%;min-height:76px;display:flex;align-items:center;text-align:left;gap:14px;padding:15px 19px;border:1px solid #39a8ff;background:linear-gradient(100deg,#0764c9,#178df7 67%,#187dde);color:white;box-shadow:0 7px 35px rgba(6,109,233,.21),inset 0 1px rgba(255,255,255,.24);transition:transform .15s, box-shadow .15s,filter .15s;}
.approve-button:hover {filter:brightness(1.12);box-shadow:0 10px 42px rgba(5,119,249,.35);transform:translateY(-1px);}
.approve-button:active {transform:translateY(1px);}
.button-symbol {width:38px;height:38px;display:grid;place-items:center;flex:none;border:1px solid rgba(255,255,255,.36);font-size:29px;font-family:var(--mono);}
.button-copy {display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}.button-copy small {font:600 9px/1.3 var(--mono);letter-spacing:.1em;opacity:.85;}.button-copy strong{font-size:17px;white-space:nowrap;}
.button-arrow {font-size:27px;line-height:1;align-self:center;}
#status {min-height:22px;margin:16px 0 0;color:#8bf9d6;line-height:1.6;font-size:13px;overflow-wrap:anywhere;}
.enrollment {margin-top:20px;padding:20px;background:rgba(10,29,42,.9);border:1px solid rgba(76,174,238,.4);}
.enrollment-kicker {font:650 10px/1.5 var(--mono);letter-spacing:.12em;color:var(--gold);margin:0 0 14px;}
.enrollment label {display:block;font-size:12px;color:#d4e3f6;margin-bottom:9px;}
.enrollment input {width:100%;min-height:46px;border:1px solid rgba(138,176,211,.45);background:#07121c;color:#fff;padding:11px 13px;border-radius:0;letter-spacing:.08em;}
.enrollment input::placeholder {color:#7a94a7;letter-spacing:0;}
.enroll-button {width:100%;border:1px solid rgba(96,195,255,.55);background:#103455;color:#e3f6ff;min-height:47px;margin-top:10px;padding:11px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:750;}
.enroll-button:hover {background:#16517d;}
.gateway-divider {border-top:1px solid rgba(126,159,182,.15);margin:20px 0 19px;}
.privacy-note {display:flex;align-items:flex-start;gap:10px;margin:0;color:#7f93a6;font-size:11px;line-height:1.6;}
.privacy-symbol {color:var(--gold);font-size:16px;line-height:1.1;}
.gateway-baseline {padding:13px 3px 0;color:#57768d;}
.footer {display:flex;justify-content:space-between;align-items:center;flex:none;gap:14px;min-height:74px;border-top:1px solid var(--line);font:650 10px/1.4 var(--mono);letter-spacing:.11em;color:#6e899e;}
.footer b {color:var(--gold);font-size:11px;padding:0 7px;}

@keyframes datafall {to {top:105%;}}
@keyframes atmosphere-scan {to{transform:translateY(240%);}}
@keyframes orbit-rotate {to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes orbit-rotate-reverse {to{transform:translate(-50%,-50%) rotate(-360deg);}}
@keyframes scan-pass {from {top:22%;}to{top:78%;}}

@media (max-width:1100px) {
  .main-layout {gap:30px;grid-template-columns:minmax(0,1fr) minmax(350px, .9fr);}
  h1 {font-size:clamp(62px,7vw,82px);}
  .gateway-card {padding:31px;}
  .hero-techline{gap:10px;}
  .hero-techline span {font-size:8px;}
}
@media (max-width:850px) {
  .main-layout{grid-template-columns:1fr;max-width:590px;width:100%;align-self:center;gap:25px;padding:45px 0;}
  .hero{align-self:auto;}
  .hero-copy{max-width:500px;}
  .hero-copy h1{font-size:clamp(60px,13vw,94px);}
  .hero-subtitle{max-width:460px;}
  .portal-graphic{position:absolute;right:0;top:10px;height:240px;width:300px;opacity:.32;z-index:-1;}
  .hero-techline{margin-top:25px;}
  .gateway{max-width:100%;justify-self:stretch;}
  .footer{font-size:9px;}
}
@media (max-width:520px) {
  .site-shell {padding:0 19px;}
  .masthead{height:80px;}
  .identity-mark{width:39px;height:39px;font-size:18px;}
  .identity-name strong{font-size:13px;}.identity-name>span{font-size:8px;letter-spacing:.09em;}
  .header-meta {font-size:0;gap:0;}.header-led{height:7px;width:7px;}.header-index{display:none;}
  .main-layout{padding:25px 0 34px;gap:28px;}
  .hero-copy h1{font-size:clamp(54px,13.9vw,76px);letter-spacing:-.085em;}
  .micro-heading{font-size:9px;margin-bottom:16px;}
  .hero-subtitle{font-size:13px;line-height:1.6;margin-top:21px;max-width:335px;}
  .portal-graphic{width:200px;height:200px;right:0;top:-12px;opacity:.24;}
  .hero-techline{gap:7px;margin-top:22px;}
  .hero-techline span{font-size:8px;}.hero-techline span:nth-child(2){display:none;}
  .gateway-overline,.gateway-baseline{font-size:8px;}
  .gateway-card {padding:25px 23px;}
  .gateway-top{margin-bottom:21px;}
  .scan-icon{width:65px;height:65px;}.scan-icon svg{width:50px;height:50px;}
  .gateway-seal{font-size:8px;}
  h2{font-size:43px;}
  .gateway-description{margin:14px 0 24px;font-size:13px;}
  .button-copy strong{font-size:16px;}
  .footer{min-height:64px;justify-content:center;text-align:center;}.footer span:last-child{display:none;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important;}
}