:root{
  --bg:#050713;
  --bg-soft:#0b1020;
  --bg-elev:#11182b;
  --panel:#0f1628cc;
  --panel-solid:#10172a;
  --panel-2:#121d34;
  --ink:#ecf1ff;
  --muted:#9aa8c7;
  --faint:#657191;
  --line:rgba(143,167,213,.16);
  --line-strong:rgba(143,167,213,.28);
  --accent:#7aa7ff;
  --accent-2:#9f7bff;
  --accent-3:#6cf5d3;
  --acid:#a6ff9a;
  --warn:#ff8989;
  --gold:#ffd27a;
  --danger:#ff6464;
  --shadow:0 30px 120px rgba(3,8,24,.52);
  --glow:0 0 80px rgba(122,167,255,.18);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
  --max-width:1280px;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", "Fira Code", Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hero-gradient:
    radial-gradient(1200px 800px at 85% -10%, rgba(109,82,255,.24), transparent 60%),
    radial-gradient(1000px 700px at -10% 20%, rgba(31,159,255,.24), transparent 58%),
    radial-gradient(900px 600px at 50% 110%, rgba(24,219,197,.16), transparent 55%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  position:relative;
  overflow-x:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--hero-gradient),
    var(--bg);
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.05), transparent 25%),
    radial-gradient(circle at 80% 10%, rgba(122,167,255,.08), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 10%, transparent 90%, rgba(255,255,255,.02));
  opacity:.85;
  z-index:0;
}
body::after{
  content:"";
  position:fixed;
  inset:auto 0 0 0;
  height:40vh;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(2,6,14,.65));
  z-index:0;
}
img,svg,canvas{max-width:100%}
a{
  color:var(--accent);
  text-decoration:none;
  transition:color .2s ease, opacity .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
a:hover{color:#fff}
button,input,textarea,select{
  font:inherit;
}
button{cursor:pointer}
h1,h2,h3,h4,h5,h6{
  margin:0;
  font-weight:650;
  letter-spacing:-.03em;
  line-height:1.04;
}
p,li{
  color:var(--muted);
}
code,pre,kbd{
  font-family:var(--mono);
}

#stars{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:.12;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.8' numOctaves='2' seed='7'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/></svg>");
}

.nav{
  position:sticky;
  top:0;
  z-index:50;
  width:min(calc(100% - 24px), var(--max-width));
  margin:16px auto 0;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(10,15,27,.72);
  box-shadow:0 18px 60px rgba(5,9,20,.28);
  backdrop-filter:blur(18px) saturate(130%);
}
.nav .brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.28em;
  text-transform:uppercase;
  white-space:nowrap;
}
.nav .brand::before{
  content:"";
  width:10px;
  height:10px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow:0 0 20px rgba(122,167,255,.6);
}
.nav nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.nav nav a{
  position:relative;
  padding:10px 14px;
  border-radius:999px;
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.nav nav a:hover,
.nav nav a[aria-current="page"]{
  color:#fff;
  background:rgba(255,255,255,.04);
}
.nav nav a::after{
  content:"";
  position:absolute;
  inset:auto 14px 8px;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  opacity:0;
  transition:opacity .2s ease;
}
.nav nav a:hover::after,
.nav nav a[aria-current="page"]::after{opacity:1}

.portal{
  position:relative;
  z-index:2;
  width:min(calc(100% - 28px), var(--max-width));
  margin:0 auto;
  padding-bottom:120px;
}
.hero{
  min-height:calc(100vh - 80px);
  padding:76px 6px 44px;
  display:grid;
  align-items:center;
  gap:28px;
  grid-template-columns:minmax(0, 1.2fr) minmax(320px, .8fr);
}
.hero-copy{
  position:relative;
}
.eyebrow,
.kicker,
.label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:34px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.eyebrow::before,
.kicker::before,
.label::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent-3);
  box-shadow:0 0 18px rgba(108,245,211,.8);
}
.title{
  position:relative;
  margin:18px 0 18px;
  font-size:clamp(48px, 9vw, 112px);
  letter-spacing:-.06em;
  line-height:.94;
  color:#fff;
}
.tagline{
  margin:0;
  color:#dfe7ff;
  font-size:clamp(18px, 2.4vw, 28px);
  line-height:1.32;
  max-width:760px;
}
.sub{
  margin:18px 0 0;
  max-width:760px;
  font-size:16px;
  line-height:1.75;
}
.sub .earn{color:var(--accent-3)}
.cta{
  margin-top:28px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:46px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  color:#fff;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  backdrop-filter:blur(14px);
  box-shadow:0 10px 40px rgba(4,8,18,.2);
}
.btn:hover{
  transform:translateY(-2px);
  border-color:rgba(164,196,255,.42);
  box-shadow:0 18px 50px rgba(51,100,255,.18);
}
.btn.ghost{
  background:rgba(255,255,255,.02);
  color:var(--muted);
}
.btn.tiny{
  min-height:34px;
  padding:0 14px;
  font-size:10px;
  letter-spacing:.14em;
}
.btn.block{
  width:100%;
}
.whisper{
  margin-top:18px;
  color:var(--faint);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.36em;
  text-transform:uppercase;
}
.hero-side{
  display:grid;
  gap:16px;
}
.hero-panel,
.card,
.panel,
.metric-card,
.feature-card,
.signal-panel,
.glass{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    var(--panel);
  backdrop-filter:blur(22px) saturate(120%);
  box-shadow:var(--shadow);
}
.hero-panel{
  padding:22px;
  overflow:hidden;
}
.hero-panel::before,
.card::before,
.feature-card::before,
.signal-panel::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.02), rgba(108,245,211,.18));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.6;
  pointer-events:none;
}
.card,
.panel{
  padding:24px;
  margin:16px 0;
}
.panel.tight,
.card.tight{padding:18px}
.card h2,
.panel h2{
  margin-bottom:8px;
  font-size:20px;
}
.card h3,
.panel h3{font-size:16px}

.hero-kpis{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:12px;
  margin-top:16px;
}
.kpi{
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.025);
}
.kpi .num{
  display:block;
  color:#fff;
  font-size:30px;
  line-height:1;
  margin-bottom:8px;
}
.kpi .meta{
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.orb{
  width:min(100%, 320px);
  aspect-ratio:1;
  position:relative;
  margin-inline:auto;
  cursor:pointer;
  filter:drop-shadow(0 0 90px rgba(122,167,255,.22));
}
.orb-core{
  position:absolute;
  inset:28%;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 32%, rgba(255,255,255,.95) 0%, rgba(199,226,255,.92) 15%, rgba(122,167,255,.88) 40%, rgba(63,87,186,.72) 65%, rgba(11,15,26,.95) 100%);
  animation:pulse 4.2s ease-in-out infinite;
  box-shadow:
    inset 0 0 40px rgba(255,255,255,.35),
    0 0 90px rgba(122,167,255,.32);
}
.orb-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(122,167,255,.36);
  animation:spin 18s linear infinite;
}
.orb-ring.r2{
  inset:10%;
  border-color:rgba(159,123,255,.28);
  animation-duration:34s;
  animation-direction:reverse;
}
.orb-ring.r3{
  inset:18%;
  border-color:rgba(108,245,211,.2);
  animation-duration:26s;
}
.orb.pulse .orb-core{
  animation-duration:1s;
  box-shadow:
    inset 0 0 50px rgba(255,255,255,.45),
    0 0 120px rgba(166,255,154,.45);
}
.orb-halo{
  position:absolute;
  inset:6%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent 60%);
  filter:blur(22px);
}
@keyframes pulse{
  0%,100%{transform:scale(1);opacity:.92}
  50%{transform:scale(1.06);opacity:1}
}
@keyframes spin{to{transform:rotate(360deg)}}

.meter{
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.meter > i{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--accent), var(--accent-3));
}
.signal-bars{
  display:grid;
  grid-template-columns:repeat(32, minmax(0,1fr));
  gap:6px;
  align-items:end;
  min-height:90px;
}
.signal-bars i{
  display:block;
  min-height:12px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(122,167,255,.9), rgba(108,245,211,.25));
  box-shadow:0 0 20px rgba(122,167,255,.15);
}

.doors,
.section{
  padding:32px 0 0;
}
.section-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.section-header p{
  max-width:680px;
  margin:8px 0 0;
}
.doors h2,
.signal h2,
.page h2.section-title,
.section h2,
.faq h2{
  font-size:12px;
  letter-spacing:.3em;
  color:var(--faint);
  font-family:var(--mono);
  text-transform:uppercase;
}
.door-grid,
.grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.grid.two{grid-template-columns:repeat(auto-fit, minmax(280px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit, minmax(220px,1fr))}
.grid.four{grid-template-columns:repeat(auto-fit, minmax(200px,1fr))}
.door,
.feature,
.project-card,
.tool-card{
  position:relative;
  display:block;
  min-height:100%;
  padding:22px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:
    radial-gradient(500px 220px at 100% 0%, rgba(122,167,255,.16), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    rgba(10,15,27,.68);
  color:#fff;
  box-shadow:0 18px 55px rgba(3,7,18,.22);
  overflow:hidden;
}
.door:hover,
.feature:hover,
.project-card:hover,
.tool-card:hover{
  transform:translateY(-4px);
  border-color:rgba(143,167,213,.38);
  box-shadow:0 25px 70px rgba(37,90,255,.16);
}
.door span,
.pill,
.tag,
.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:26px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.door b,
.feature b,
.project-card b{
  display:block;
  margin:12px 0 8px;
  font-size:24px;
  letter-spacing:-.04em;
}
.door i,
.feature i,
.project-card i{
  display:block;
  color:var(--muted);
  font-style:normal;
  line-height:1.65;
}
.door::after,
.feature::after,
.project-card::after{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-60px;
  bottom:-70px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(122,167,255,.24), transparent 62%);
  opacity:.8;
}
.door small,
.feature small,
.project-card small{
  display:block;
  margin-top:16px;
  color:var(--faint);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.signal{
  display:grid;
  gap:16px;
  align-items:start;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
  padding:36px 0 0;
}
.signal-panel{
  padding:24px;
}
.signal-line{
  margin:10px 0 0;
  color:#fff;
  font-size:clamp(24px, 3vw, 36px);
  line-height:1.15;
  letter-spacing:-.04em;
}
.fine{
  color:var(--faint);
  font-size:11px;
  font-family:var(--mono);
  letter-spacing:.24em;
  text-transform:uppercase;
}

.faq{
  margin:34px 0 0;
}
.faq details{
  position:relative;
  margin:12px 0;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.02);
  overflow:hidden;
}
.faq summary{
  list-style:none;
  padding:18px 20px;
  cursor:pointer;
  color:#fff;
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.08em;
}
.faq summary::-webkit-details-marker{display:none}
.faq details p{
  margin:0;
  padding:0 20px 20px;
}

.foot{
  position:relative;
  z-index:2;
  width:min(calc(100% - 28px), var(--max-width));
  margin:0 auto;
  padding:40px 0 70px;
  text-align:center;
  color:var(--faint);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.foot .tap{cursor:pointer; user-select:none}

.toast{
  position:fixed;
  left:50%;
  bottom:26px;
  transform:translateX(-50%) translateY(18px);
  min-width:min(92vw, 280px);
  max-width:min(92vw, 520px);
  padding:14px 18px;
  border:1px solid rgba(143,167,213,.38);
  border-radius:16px;
  background:rgba(9,14,26,.88);
  box-shadow:0 30px 80px rgba(9,16,37,.4);
  color:#fff;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  backdrop-filter:blur(18px);
  opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
  z-index:120;
}
.toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
.hud{
  position:fixed;
  top:18px;
  right:18px;
  z-index:110;
  pointer-events:none;
  color:var(--muted);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.page{
  position:relative;
  z-index:2;
  width:min(calc(100% - 28px), 1140px);
  margin:0 auto;
  padding:50px 0 120px;
}
.page > .hero-lite{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.75fr);
  gap:20px;
  margin-top:10px;
  align-items:start;
}
.page h1{
  font-size:clamp(38px, 6vw, 72px);
  margin:0 0 12px;
  line-height:.95;
}
.page .lead{
  margin:0 0 26px;
  font-size:18px;
  line-height:1.7;
  max-width:820px;
}
.crumbs{
  margin:0 0 16px;
  color:var(--faint);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.crumbs a{color:var(--faint)}
.crumbs a:hover{color:#fff}

.stack,
.chips,
.tag-row,
.inline-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.search,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea,
select{
  width:100%;
  min-height:50px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  outline:none;
}
.search,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
select{
  max-width:100%;
}
textarea{min-height:160px;resize:vertical}
input::placeholder,
textarea::placeholder{color:#7f8db0}
input:focus,
textarea:focus,
select:focus{
  border-color:rgba(143,167,213,.42);
  box-shadow:0 0 0 4px rgba(122,167,255,.12);
}
label{
  display:block;
  color:#dbe5ff;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
}
form .field{
  margin-bottom:16px;
}
.form-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.helper,
.microcopy{
  margin-top:8px;
  color:var(--faint);
  font-size:12px;
}
.note{
  color:var(--muted);
  font-size:14px;
}
blockquote{
  margin:0;
  padding:16px 18px;
  border-left:2px solid rgba(143,167,213,.44);
  border-radius:0 14px 14px 0;
  background:rgba(255,255,255,.025);
  color:#fff;
  font-family:var(--serif);
  font-size:21px;
  line-height:1.55;
}
ul,ol{
  padding-left:1.2rem;
  line-height:1.8;
}

.list{
  display:grid;
  gap:12px;
}
.list-item{
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.02);
}
.metric-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
}
.metric-card{
  padding:20px;
}
.metric-card b{
  display:block;
  font-size:32px;
  color:#fff;
  margin-bottom:10px;
}
.metric-card span{
  display:block;
  color:var(--muted);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.metric-card p{
  margin:10px 0 0;
  font-size:14px;
  line-height:1.6;
}

.sidebar-card{
  padding:20px;
}
.sidebar-card h3{
  margin-bottom:12px;
  font-size:18px;
}
.columns{
  display:grid;
  gap:20px;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);
}
.split{
  display:grid;
  gap:18px;
  grid-template-columns:repeat(2, minmax(0,1fr));
}
.callout{
  padding:18px 20px;
  border-left:3px solid var(--accent);
  border-radius:0 18px 18px 0;
  background:rgba(122,167,255,.06);
}
.callout strong{color:#fff}

.table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.table th,
.table td{
  padding:14px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
}
.table th{
  color:#fff;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.table td{color:var(--muted)}

.badge-grid{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
}
.badge-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:16px;
  background:rgba(255,255,255,.03);
}
.badge-row .dot{
  flex:0 0 14px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
}
.badge-row.on{
  border-color:rgba(122,167,255,.28);
  background:rgba(122,167,255,.08);
}
.badge-row.on .dot{
  background:linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow:0 0 18px rgba(122,167,255,.38);
}
.badge-row b{
  flex:1;
  color:#fff;
}
.badge-row .pill{margin-left:auto}

.chart{
  display:flex;
  align-items:flex-end;
  gap:8px;
  min-height:180px;
}
.chart .bar{
  flex:1;
  min-width:14px;
  border-radius:999px 999px 6px 6px;
  background:linear-gradient(180deg, rgba(122,167,255,.95), rgba(108,245,211,.28));
  box-shadow:0 0 18px rgba(122,167,255,.14);
  position:relative;
}
.chart .bar span{
  position:absolute;
  bottom:calc(100% + 8px);
  left:50%;
  transform:translateX(-50%);
  color:var(--faint);
  font-size:11px;
  font-family:var(--mono);
  letter-spacing:.12em;
}

.shell-dock{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:95;
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.shell-dock > *{pointer-events:auto}
.shell-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:48px;
  padding:0 16px;
  border:1px solid rgba(143,167,213,.24);
  border-radius:999px;
  background:rgba(7,11,21,.78);
  backdrop-filter:blur(16px) saturate(125%);
  color:#fff;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 18px 50px rgba(5,10,22,.32);
}
.shell-pill strong{
  color:var(--accent-3);
  font-weight:600;
}
.shell-btn{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(143,167,213,.24);
  background:rgba(7,11,21,.78);
  color:#fff;
  display:grid;
  place-items:center;
  font-family:var(--mono);
  box-shadow:0 18px 50px rgba(5,10,22,.32);
  backdrop-filter:blur(16px) saturate(125%);
}
.shell-btn:hover{
  border-color:rgba(143,167,213,.42);
  transform:translateY(-2px);
}
.shell-progress{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-3));
  transform-origin:left center;
  transform:scaleX(0);
  z-index:120;
}

.palette{
  position:fixed;
  inset:0;
  z-index:140;
  display:none;
  place-items:start center;
  padding:12vh 18px 18px;
  background:rgba(3,6,13,.52);
  backdrop-filter:blur(18px);
}
.palette.on{display:grid}
.palette-card{
  width:min(760px, 100%);
  max-height:min(78vh, 760px);
  overflow:hidden;
  border:1px solid rgba(143,167,213,.26);
  border-radius:28px;
  background:rgba(8,13,24,.92);
  box-shadow:0 40px 120px rgba(4,9,22,.48);
}
.palette-top{
  padding:18px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.palette-top input{
  min-height:58px;
  border-radius:18px;
  font-size:18px;
}
.palette-meta{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-top:10px;
  color:var(--faint);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.palette-results{
  max-height:58vh;
  overflow:auto;
  padding:10px;
}
.palette-item{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 14px;
  border-radius:18px;
  color:inherit;
}
.palette-item:hover,
.palette-item.active{
  background:rgba(255,255,255,.05);
}
.palette-item b{
  display:block;
  color:#fff;
  margin-bottom:4px;
}
.palette-item p{
  margin:0;
  font-size:13px;
  line-height:1.55;
}
.palette-item .key{
  margin-left:auto;
  color:var(--faint);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.palette-empty{
  padding:30px 18px;
  text-align:center;
  color:var(--muted);
}

.modal{
  position:fixed;
  inset:0;
  z-index:135;
  display:none;
  place-items:center;
  padding:24px;
  background:rgba(2,5,12,.55);
  backdrop-filter:blur(16px);
}
.modal.on{display:grid}
.modal-card{
  width:min(880px, 100%);
  max-height:88vh;
  overflow:auto;
  padding:26px;
  border-radius:28px;
  border:1px solid rgba(143,167,213,.26);
  background:rgba(8,13,24,.94);
  box-shadow:0 40px 120px rgba(4,9,22,.48);
}
.modal-close{
  position:sticky;
  top:0;
  float:right;
}

.timeline{
  display:grid;
  gap:12px;
}
.timeline-item{
  position:relative;
  padding:16px 18px 16px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.03);
}
.timeline-item::before{
  content:"";
  position:absolute;
  top:20px;
  left:10px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent-3));
  box-shadow:0 0 18px rgba(122,167,255,.24);
}
.timeline-item b{
  color:#fff;
}

.guestbook-list{
  display:grid;
  gap:12px;
}
.guestbook-entry{
  padding:18px;
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.guestbook-entry header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.guestbook-entry b{color:#fff}
.empty-state{
  padding:28px;
  text-align:center;
  border:1px dashed rgba(143,167,213,.22);
  border-radius:18px;
  color:var(--muted);
}
.flash{
  animation:flash .7s ease;
}
@keyframes flash{
  0%{transform:scale(.98); opacity:.6}
  100%{transform:scale(1); opacity:1}
}

.invis{
  color:transparent;
  text-shadow:none;
  user-select:text;
}
.invis:hover{color:var(--acid)}

kbd{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 8px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:11px;
}

.text-center{text-align:center}
.muted{color:var(--muted)}
.white{color:#fff}
.faint{color:var(--faint)}
.hidden{display:none !important}
.spacer-16{height:16px}
.spacer-24{height:24px}
.spacer-32{height:32px}

@media (max-width:980px){
  .hero,
  .signal,
  .columns,
  .page > .hero-lite{
    grid-template-columns:1fr;
  }
  .nav{
    width:min(calc(100% - 18px), var(--max-width));
    margin-top:10px;
    border-radius:22px;
  }
}
@media (max-width:760px){
  .nav{
    padding:14px;
    align-items:flex-start;
  }
  .nav nav{
    gap:6px;
  }
  .nav nav a{
    padding:8px 10px;
    font-size:10px;
  }
  .hero{
    min-height:auto;
    padding-top:54px;
  }
  .hero-kpis,
  .form-grid,
  .split{
    grid-template-columns:1fr;
  }
  .door-grid,
  .grid,
  .badge-grid,
  .metric-grid{
    grid-template-columns:1fr;
  }
  .page{
    width:min(calc(100% - 20px), 1140px);
    padding-bottom:96px;
  }
  .shell-dock{
    right:10px;
    bottom:10px;
    gap:8px;
  }
  .shell-pill{
    min-height:42px;
    padding:0 12px;
    font-size:10px;
  }
  .shell-btn{
    width:42px;
    height:42px;
  }
  .palette{
    padding-top:8vh;
  }
}

.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}