:root {
  color-scheme: light;
  --confaf-forest: #063c27;
  --confaf-green: #087545;
  --confaf-lime: #a7e66c;
  --confaf-blue: #0d397c;
  --confaf-glass: rgba(235, 255, 243, 0.105);
  --confaf-glass-line: rgba(235, 255, 243, 0.32);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--confaf-forest);
  color: #f5fff8;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.desktop-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 10% 18%, rgba(93, 224, 139, .18), transparent 34%),
    radial-gradient(ellipse at 92% 76%, rgba(35, 155, 101, .23), transparent 38%),
    linear-gradient(132deg, #042f20 0%, #07552f 48%, #032b20 100%);
}

.desktop-stage::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .2;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(90deg, #000, transparent 43%, transparent 57%, #000);
}

.brand-rail {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(20px, 2.6vw, 48px);
  isolation: isolate;
}
.brand-rail::before,
.brand-rail::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
  border-radius: 50%;
}
.brand-rail::before {
  width: clamp(340px, 34vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(207,255,220,.22);
  box-shadow: 0 0 0 24px rgba(200,255,216,.025), 0 0 0 64px rgba(200,255,216,.025), inset 0 0 55px rgba(132,255,173,.06);
}
.brand-rail::after {
  width: 72%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(108,255,160,.15), rgba(45,184,109,.045) 42%, transparent 72%);
  filter: blur(10px);
}

.brand-rail--left { background: linear-gradient(110deg, rgba(2,34,22,.22), rgba(11,111,61,.08)); }
.brand-rail--right { background: linear-gradient(250deg, rgba(2,34,22,.22), rgba(11,111,61,.08)); }

.rail-glass-card {
  position: relative;
  width: min(100%, 370px);
  padding: clamp(22px, 2.3vw, 38px);
  border: 1px solid var(--confaf-glass-line);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(244,255,247,.16), rgba(211,255,226,.045) 52%, rgba(2,52,32,.2));
  box-shadow: 0 28px 75px rgba(0, 15, 8, .28), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(180,255,203,.09);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  transform: perspective(1200px) rotateY(2deg);
}
.brand-rail--right .rail-glass-card { transform: perspective(1200px) rotateY(-2deg); }

.rail-kicker, .rail-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(239,255,244,.82);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--confaf-lime); box-shadow: 0 0 14px rgba(167,230,108,.9); }
.rail-logo-wrap {
  display: grid;
  place-items: center;
  margin: 28px 0 22px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.23);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(225,245,232,.88));
  box-shadow: 0 16px 32px rgba(0,20,9,.18), inset 0 1px 0 #fff;
}
.rail-logo { display: block; width: 100%; max-width: 270px; height: auto; object-fit: contain; }
.rail-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(218,255,229,.65), transparent); }
.rail-manifesto { margin: 22px 0 18px; color: #f0fff4; font-size: clamp(16px, 1.2vw, 21px); line-height: 1.45; font-weight: 650; letter-spacing: -.025em; }
.rail-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.rail-pills span { padding: 7px 10px; border: 1px solid rgba(225,255,234,.25); border-radius: 999px; background: rgba(229,255,237,.075); color: rgba(244,255,247,.88); font-size: 10px; font-weight: 700; letter-spacing: .04em; }

.rail-side-brand { position: relative; z-index: 1; width: min(100%, 360px); text-align: center; }
.rail-emblem { position: relative; display: grid; width: clamp(104px, 10vw, 154px); aspect-ratio: 1; place-items: center; margin: 0 auto clamp(30px, 4vh, 48px); }
.emblem-ring { position: absolute; inset: 0; border: 1px solid rgba(219,255,230,.52); border-radius: 31% 69% 57% 43% / 43% 38% 62% 57%; box-shadow: inset 0 0 25px rgba(139,255,178,.11), 0 0 30px rgba(104,255,161,.08); }
.emblem-ring--outer { transform: rotate(28deg); }
.emblem-ring--inner { inset: 13%; border-color: rgba(180,255,201,.6); border-radius: 50%; transform: rotate(-32deg); }
.rail-emblem::before { position: absolute; inset: 22%; content: ""; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.72), rgba(126,246,168,.28) 18%, rgba(19,125,71,.12) 54%, transparent 72%); filter: blur(1px); }
.rail-emblem::after { position: absolute; inset: 4%; content: ""; border-radius: 50%; border: 1px solid rgba(210,255,224,.16); }
.rail-emblem .emblem-leaf { color: #d8ffb0; font-size: clamp(32px, 3.6vw, 52px); text-shadow: 0 0 24px rgba(174,255,148,.75); }
.rail-eyebrow { justify-content: center; margin: 0 0 17px; color: #b6f5c6; }
.rail-title { margin: 0; font-size: clamp(34px, 3.1vw, 58px); line-height: .99; letter-spacing: -.065em; font-weight: 850; text-shadow: 0 5px 28px rgba(0,0,0,.15); }
.rail-title span { color: #b8f38b; }
.rail-description { max-width: 290px; margin: 24px auto 0; color: rgba(240,255,245,.77); font-size: clamp(13px, 1vw, 16px); line-height: 1.7; }
.rail-signature { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(30px, 5vh, 58px); color: rgba(234,255,240,.72); font-size: 9px; font-weight: 800; letter-spacing: .2em; }
.signature-line { width: clamp(18px, 2vw, 35px); height: 1px; background: linear-gradient(90deg, transparent, rgba(196,255,213,.8)); }
.signature-line:last-child { transform: rotate(180deg); }

.rail-orbit { position: absolute; z-index: -1; border: 1px solid rgba(206,255,220,.18); border-radius: 50%; pointer-events: none; }
.rail-orbit--one { width: 270px; height: 270px; top: 7%; left: -125px; box-shadow: 0 0 0 22px rgba(220,255,228,.025), 0 0 0 58px rgba(220,255,228,.02); }
.rail-orbit--two { width: 180px; height: 180px; right: -90px; bottom: 8%; border-color: rgba(175,255,198,.27); }
.rail-orbit--three { width: 330px; height: 330px; right: -180px; top: 8%; box-shadow: 0 0 0 28px rgba(220,255,228,.025), 0 0 0 72px rgba(220,255,228,.018); }
.rail-orbit--four { width: 170px; height: 170px; left: -80px; bottom: 7%; }
.rail-glass-orb { position: absolute; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 24%, rgba(255,255,255,.65), rgba(166,255,196,.2) 9%, rgba(61,196,120,.1) 35%, rgba(14,100,55,.04) 63%, transparent 72%); border: 1px solid rgba(226,255,234,.2); box-shadow: inset -12px -16px 28px rgba(0,34,16,.12), inset 8px 8px 20px rgba(255,255,255,.1), 0 12px 35px rgba(0,0,0,.09); }
.rail-glass-orb--large { width: clamp(120px, 13vw, 205px); aspect-ratio: 1; left: -48px; bottom: 14%; }
.rail-glass-orb--small { width: clamp(54px, 5vw, 82px); aspect-ratio: 1; right: 7%; top: 18%; }
.rail-bottom-mark { position: absolute; bottom: 30px; left: 50%; display: flex; align-items: end; gap: 5px; height: 18px; transform: translateX(-50%); opacity: .65; }
.rail-bottom-mark span { width: 3px; border-radius: 8px; background: #b8f38b; }
.rail-bottom-mark span:nth-child(1), .rail-bottom-mark span:nth-child(5) { height: 7px; opacity: .55; }
.rail-bottom-mark span:nth-child(2), .rail-bottom-mark span:nth-child(4) { height: 12px; opacity: .75; }
.rail-bottom-mark span:nth-child(3) { height: 18px; box-shadow: 0 0 12px rgba(184,243,139,.5); }
.rail-vertical-label { position: absolute; left: 18px; bottom: 45px; writing-mode: vertical-rl; transform: rotate(180deg); color: rgba(229,255,237,.42); font-size: 8px; font-weight: 800; letter-spacing: .2em; }
.rail-vertical-label--right { left: auto; right: 18px; transform: none; }

.app-frame {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  border: 0;
  background: #eef2f6;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 0 65px rgba(0,20,9,.38);
}

@media (max-width: 1050px) {
  .desktop-stage { display: block; min-height: 100vh; background: #eef2f6; }
  .brand-rail { display: none; }
  .app-frame { width: 100%; height: 100vh; min-height: 100vh; box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1051px) {
  .rail-orbit--one { animation: orbitDrift 18s ease-in-out infinite alternate; }
  .rail-orbit--three { animation: orbitDrift 22s ease-in-out infinite alternate-reverse; }
  .rail-glass-orb--large { animation: orbFloat 11s ease-in-out infinite alternate; }
  .rail-glass-orb--small { animation: orbFloat 8s ease-in-out infinite alternate-reverse; }
}
@keyframes orbitDrift { from { transform: translate3d(0, -8px, 0) rotate(-8deg); } to { transform: translate3d(12px, 12px, 0) rotate(8deg); } }
@keyframes orbFloat { from { transform: translate3d(0, -7px, 0); } to { transform: translate3d(8px, 13px, 0); } }