:root {
  --deep:#020617;
  --panel:rgba(2,6,23,.78);
  --gold:#d6b15d;
  --gold2:#f5d98b;
  --purple:#9d4edd;
  --purple2:#c084fc;
  --text:#f4e7c3;
  --muted:#c8b98a;
  --line:rgba(214,177,93,.35);
}

* { box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {
  margin:0;
  min-height:100vh;
  font-family:Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 4%,rgba(214,177,93,.16),transparent 18%),
    radial-gradient(circle at 16% 72%,rgba(157,78,221,.22),transparent 30%),
    radial-gradient(circle at 86% 58%,rgba(78,40,160,.16),transparent 30%),
    linear-gradient(135deg,#020617 0%,#050816 48%,#15051f 100%);
  overflow-x:hidden;
}

body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,transparent,rgba(157,78,221,.05),transparent),
    radial-gradient(circle at center,transparent 0%,rgba(0,0,0,.38) 78%);
}

body::after {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(245,217,139,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,217,139,.018) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.35;
}

.shell {
  position:relative;
  z-index:1;
}

.topbar {
  position:sticky;
  top:0;
  z-index:100;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  padding:18px 5vw;
  background:rgba(0,0,0,.66);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}

.brand {
  display:flex;
  gap:14px;
  align-items:center;
  color:var(--text);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.13em;
}

.sigil {
  position:relative;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid var(--gold);
  border-radius:50%;
  color:var(--gold2);
  font-size:28px;
  box-shadow:0 0 24px rgba(157,78,221,.55);
}

.brand strong {
  display:block;
  color:var(--gold2);
}

.brand em {
  display:block;
  color:var(--purple2);
  font-style:normal;
  font-size:.76rem;
}

nav {
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}

nav a {
  color:var(--text);
  text-decoration:none;
  opacity:.92;
}

nav a:hover {
  color:var(--gold2);
}

.access {
  border:1px solid var(--gold);
  padding:9px 13px;
  color:var(--gold2);
  background:rgba(214,177,93,.08);
}

.hero {
  min-height:68vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:6rem 5vw 4rem;
}

.hero-panel {
  width:min(1040px,100%);
  padding:3.4rem 2rem;
  background:rgba(2,6,23,.58);
  border:1px solid rgba(214,177,93,.35);
  box-shadow:0 0 70px rgba(157,78,221,.28);
  backdrop-filter:blur(12px);
}

.hero-panel::after {
  content:"// observer.signal.locked // visibility.before.failure //";
  display:block;
  margin-top:1.5rem;
  color:rgba(192,132,252,.58);
  letter-spacing:.18em;
  font-family:"Courier New", monospace;
  font-size:.74rem;
  text-transform:lowercase;
}

.eyebrow {
  color:var(--purple2);
  letter-spacing:.30em;
  text-transform:uppercase;
  font-size:.82rem;
  margin-bottom:1rem;
}

.eyebrow::before {
  content:"[sys] ";
  color:rgba(245,217,139,.55);
  font-family:"Courier New", monospace;
}

.eyebrow::after {
  content:" [online]";
  color:rgba(245,217,139,.55);
  font-family:"Courier New", monospace;
}

h1 {
  position:relative;
  display:inline-block;
  padding:0 1.2rem;
  color:var(--gold2);
  font-size:clamp(3.4rem,10vw,8rem);
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.22em;
  margin:.5rem 0;
  text-shadow:0 0 24px rgba(214,177,93,.35);
}

h1::before {
  content:"[";
  position:absolute;
  left:-.55em;
  top:50%;
  transform:translateY(-52%);
  font-size:.72em;
  font-weight:300;
  color:rgba(192,132,252,.72);
}

h1::after {
  content:"]";
  position:absolute;
  right:-.55em;
  top:50%;
  transform:translateY(-52%);
  font-size:.72em;
  font-weight:300;
  color:rgba(192,132,252,.72);
}

h2 {
  color:var(--gold2);
  text-transform:uppercase;
  letter-spacing:.13em;
  margin:0 0 1.25rem 0;
  text-shadow:0 0 10px rgba(245,217,139,.24);
}

h2::before {
  content:"⟡ ";
  color:rgba(192,132,252,.85);
}

.subtitle {
  max-width:820px;
  margin:1.25rem auto 2rem;
  color:var(--muted);
  font-size:1.25rem;
  line-height:1.65;
}

.buttons {
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
}

.primary,
.secondary {
  display:inline-block;
  padding:13px 18px;
  border:1px solid var(--gold);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:700;
}

.primary {
  background:linear-gradient(135deg,var(--gold),var(--purple));
  color:#020617;
}

.secondary {
  color:var(--gold2);
  background:rgba(157,78,221,.12);
}

.section {
  width:min(1220px,92vw);
  margin:3rem auto;
}

.section::before {
  content:"// observer grid online //";
  display:block;
  margin:0 0 1rem 0;
  color:rgba(245,217,139,.34);
  font-size:.72rem;
  letter-spacing:.18em;
  font-family:"Courier New", monospace;
  text-transform:lowercase;
}

.grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  align-items:stretch;
}

article,
.feature,
.contact {
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 0 26px rgba(157,78,221,.18);
  padding:34px;
  backdrop-filter:blur(10px);
  min-height:260px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

article::before,
.feature::before,
.contact::before {
  content:"◈";
  color:rgba(192,132,252,.72);
  font-size:1rem;
  margin-bottom:.5rem;
}

article:hover,
.feature:hover,
.contact:hover {
  border-color:rgba(245,217,139,.58);
  box-shadow:0 0 34px rgba(157,78,221,.26);
}

article p,
.feature p,
.contact p {
  color:var(--muted);
  line-height:1.62;
  font-size:1.05rem;
}

article::after {
  display:block;
  margin-top:auto;
  padding-top:1.25rem;
  color:rgba(192,132,252,.38);
  font-size:.72rem;
  letter-spacing:.08em;
  font-family:"Courier New", monospace;
}

article:nth-child(1)::after { content:"node.watch=true"; }
article:nth-child(2)::after { content:"boundary.mode=secure"; }
article:nth-child(3)::after { content:"signal.retention=active"; }

.feature {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2rem;
  align-items:center;
}

.feature h2 {
  font-size:clamp(2rem,5vw,4rem);
}

.feature-list {
  background:rgba(5,8,22,.64);
  border:1px solid rgba(157,78,221,.30);
  padding:1rem 1.25rem;
}

.feature-list p {
  margin:.75rem 0;
}

.feature-list p::before {
  content:"root@observer:~$ ";
  color:rgba(192,132,252,.55);
  font-family:"Courier New", monospace;
  font-size:.78rem;
}

.contact {
  text-align:center;
  min-height:auto;
}

.small {
  font-size:.95rem;
  opacity:.85;
}

footer {
  display:flex;
  justify-content:center;
  gap:2rem;
  flex-wrap:wrap;
  padding:28px 5vw;
  margin-top:3rem;
  color:var(--gold);
  letter-spacing:.18em;
  text-transform:uppercase;
  background:rgba(0,0,0,.46);
  border-top:1px solid rgba(214,177,93,.22);
}

footer::before {
  content:"observer.daemon active";
  display:block;
  width:100%;
  text-align:center;
  margin-bottom:.6rem;
  color:rgba(192,132,252,.55);
  font-size:.76rem;
  letter-spacing:.18em;
  font-family:"Courier New", monospace;
}

a {
  color:var(--gold2);
}

a:hover {
  color:white;
}

@media(max-width:900px) {
  .grid,
  .feature {
    grid-template-columns:1fr;
  }

  .topbar {
    justify-content:center;
    flex-wrap:wrap;
  }

  h1 {
    letter-spacing:.14em;
  }

  article {
    min-height:auto;
  }
}

/* Fix section label taking up a grid slot */
.section::before {
  grid-column: 1 / -1;
}

.grid::before {
  grid-column: 1 / -1;
}

.mission {
  margin:1.4rem auto 0;
  max-width:760px;
  color:rgba(245,217,139,.92);
  font-size:1.06rem;
  line-height:1.7;
  letter-spacing:.03em;
  padding:1rem 1.2rem;
  border:1px solid rgba(214,177,93,.22);
  background:rgba(214,177,93,.045);
  box-shadow:
    0 0 24px rgba(214,177,93,.06),
    inset 0 0 18px rgba(245,217,139,.02);
}

.mission::before {
  content:"ENTERPRISE-GRADE • ACCESSIBLE • OBSERVED";
  display:block;
  margin-bottom:.7rem;
  color:rgba(192,132,252,.72);
  font-size:.72rem;
  letter-spacing:.24em;
  font-family:"Courier New", monospace;
}

/* Formal platform mark: [ OBSERVER ] */
.brand strong,
h1 {
  white-space: nowrap;
}

h1 {
  letter-spacing: .16em;
}

h1::before,
h1::after {
  content: "" !important;
}

.brand strong {
  color: var(--gold2);
  text-shadow: 0 0 12px rgba(214,177,93,.35);
}