:root {
  --v011-gold: #f1c874;
  --v011-gold-bright: #ffd98d;
  --v011-gold-dim: rgba(241, 200, 116, .34);
  --v011-panel: rgba(2, 7, 11, .86);
  --v011-panel-line: rgba(241, 200, 116, .24);
}

/* v0.11 preserves v0.10 structure and raises fidelity: richer conduits, stations and detail surfaces. */
.hero-conduit-core { stroke-width: 3.35; opacity: .62; }
.hero-conduit-glow { stroke-width: 11; opacity: .95; }

.hero-micro-signal {
  color: var(--v011-gold);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 680ms ease, transform 760ms cubic-bezier(.2,.75,.15,1);
}
.hero-micro-signal line,
.hero-micro-signal path,
.hero-micro-signal circle {
  fill: none;
  stroke: currentColor;
  stroke-width: .9;
  vector-effect: non-scaling-stroke;
}
.hero-micro-signal .signal-fill { fill: currentColor; stroke: none; }
.scene.is-idle .hero-micro-signal,
.scene.is-reduced .hero-micro-signal,
.scene.is-fallback .hero-micro-signal { opacity: .48; }
.scene.is-idle .signal-a { transition-delay: .7s; }
.scene.is-idle .signal-b { transition-delay: 1.05s; }
.scene.is-idle .signal-c { transition-delay: 1.4s; }
.scene.is-idle .signal-d { transition-delay: 1.8s; }
.scene.is-idle .signal-e { transition-delay: 2.15s; }
.scene.is-idle .signal-f { transition-delay: 2.45s; }

.doors-network { filter: drop-shadow(0 0 2px rgba(239, 181, 82, .05)); }
.network-glow path {
  stroke-width: 12;
  stroke: rgba(241, 200, 116, .095);
}
.network-trace path {
  fill: none;
  stroke: rgba(241, 200, 116, .28);
  stroke-width: .9;
  opacity: .42;
  vector-effect: non-scaling-stroke;
}
.network-core path {
  stroke-width: 2.85;
  stroke: rgba(245, 204, 126, .88);
  opacity: .56;
}
.doors[data-selected] .network-glow [data-route-owner],
.doors[data-selected] .network-trace [data-route-owner],
.doors[data-selected] .network-core [data-route-owner] { opacity: .13; }
.doors[data-selected="start"] [data-route-owner="start"],
.doors[data-selected="improve"] [data-route-owner="improve"],
.doors[data-selected="operate"] [data-route-owner="operate"],
.doors[data-selected="particular"] [data-route-owner="particular"],
.doors[data-selected="care"] [data-route-owner="care"] {
  opacity: .95;
  filter: drop-shadow(0 0 4px rgba(255, 212, 130, .34));
}

.micro-mark.is-visible { opacity: .56; }
.doors[data-selected="start"] .micro-mark[data-micro-owner="start"],
.doors[data-selected="improve"] .micro-mark[data-micro-owner="improve"],
.doors[data-selected="operate"] .micro-mark[data-micro-owner="operate"],
.doors[data-selected="particular"] .micro-mark[data-micro-owner="particular"],
.doors[data-selected="care"] .micro-mark[data-micro-owner="care"] {
  opacity: .92;
  filter: drop-shadow(0 0 3px rgba(255, 216, 143, .25));
}

/* Stations: still a map, now with a semantic glyph and layered rings. */
.door-node {
  min-height: 106px;
  padding-top: 58px;
  color: rgba(234, 222, 201, .55);
}
.door-node::before {
  top: 28px;
  width: 39px;
  height: 39px;
  border-color: rgba(241, 200, 116, .44);
  background: radial-gradient(circle at center, rgba(241, 200, 116, .04), rgba(2, 6, 10, .94) 62%);
  box-shadow:
    0 0 0 7px rgba(241, 200, 116, .028),
    0 0 0 13px rgba(241, 200, 116, .014),
    inset 0 0 0 5px rgba(241, 200, 116, .016);
}
.door-node::after {
  top: -7px;
  color: rgba(241, 200, 116, .62);
  font-size: .68rem;
}
.station-glyph {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  color: rgba(241, 200, 116, .68);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  transition: color 260ms ease, filter 260ms ease, transform 260ms ease;
}
.door-label { display: block; }
.door-node:hover .station-glyph,
.door-node:focus-visible .station-glyph,
.door-node.is-selected .station-glyph {
  color: var(--v011-gold-bright);
  filter: drop-shadow(0 0 5px rgba(255, 213, 132, .38));
  transform: translateX(-50%) scale(1.06);
}
.door-node:hover::before,
.door-node:focus-visible::before,
.door-node.is-selected::before {
  background: radial-gradient(circle at center, rgba(241, 200, 116, .16), rgba(2, 6, 10, .92) 68%);
  border-color: rgba(255, 218, 146, .76);
  box-shadow:
    0 0 0 7px rgba(241, 200, 116, .045),
    0 0 0 13px rgba(241, 200, 116, .018),
    0 0 26px rgba(241, 200, 116, .16);
}

/* Rich editorial detail panel. */
.door-detail {
  left: 50%;
  bottom: max(16px, 2.2vh);
  width: min(1120px, 90vw);
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  gap: clamp(24px, 3vw, 46px);
  padding: clamp(18px, 2.4vw, 28px);
  border: 1px solid var(--v011-panel-line);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(5, 12, 18, .94), rgba(1, 5, 8, .88) 58%, rgba(8, 13, 16, .9)),
    radial-gradient(circle at 78% 30%, rgba(33, 61, 76, .16), transparent 42%);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255,255,255,.018);
  backdrop-filter: blur(12px);
  overflow: hidden;
}
.door-detail::after {
  content: "";
  position: absolute;
  left: 52%;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(241, 200, 116, .11) 20%, rgba(241, 200, 116, .11) 80%, transparent);
  pointer-events: none;
}
.door-detail-copy,
.door-detail-demo,
.door-detail > .detail-cta { position: relative; z-index: 2; }
.door-detail-index {
  margin: 0 0 8px;
  color: rgba(241, 200, 116, .72);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .16em;
}
.door-detail h3 {
  font-size: clamp(1.55rem, 2.25vw, 2.25rem);
  font-weight: 540;
  color: rgba(246, 237, 219, .98);
}
.door-detail p#door-detail-description {
  max-width: 51ch;
  margin-top: 10px;
  color: rgba(231, 220, 201, .68);
  font-size: clamp(.9rem, 1.05vw, 1rem);
  line-height: 1.5;
}
.door-detail-benefits {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}
.door-benefit {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 28px;
  color: rgba(231, 220, 201, .72);
  font-size: clamp(.78rem, .9vw, .88rem);
  line-height: 1.35;
}
.benefit-icon {
  width: 19px;
  height: 19px;
  color: rgba(241, 200, 116, .68);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.door-detail-demo {
  min-height: 254px;
  align-self: stretch;
}
.door-detail > .detail-cta {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: min(360px, 70vw);
  justify-content: center;
  margin: -2px 0 0;
}

/* Demo surfaces are code-native examples, not claims or client cases. */
.door-demo {
  position: relative;
  width: 100%;
  min-height: 254px;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(241, 200, 116, .23);
  border-radius: 18px;
  background: #061018;
  color: rgba(244, 235, 219, .9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 18px 50px rgba(0,0,0,.22);
}
.door-demo strong { font-weight: 510; }
.door-demo p { margin: 0; }
.demo-browser-bar {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid rgba(241, 200, 116, .12);
  background: rgba(3, 8, 12, .74);
}
.demo-browser-bar > span { width: 5px; height: 5px; border: 1px solid rgba(241,200,116,.35); border-radius: 50%; }
.demo-browser-bar nav { margin-left: auto; color: rgba(230,219,199,.46); font-size: .52rem; letter-spacing: .04em; }
.demo-start-copy {
  position: absolute;
  z-index: 3;
  left: 9%;
  top: 29%;
  width: 45%;
}
.demo-start-copy strong { display: block; max-width: 9em; font-family: Georgia, serif; font-size: clamp(1.25rem, 1.9vw, 1.8rem); line-height: 1.05; }
.demo-start-copy p { margin-top: 11px; max-width: 20em; color: rgba(235,224,205,.67); font-size: .7rem; line-height: 1.45; }
.demo-button { display: inline-flex; margin-top: 14px; padding: 8px 12px; border: 1px solid rgba(241,200,116,.52); border-radius: 5px; color: rgba(247,225,183,.9); font-size: .6rem; }
.demo-landscape { position: absolute; inset: 34px 0 0 0; width: 100%; height: calc(100% - 34px); }
.demo-start::after { content:""; position:absolute; z-index:2; inset:34px 0 0; background:linear-gradient(to right, rgba(2,6,9,.96) 0%, rgba(2,6,9,.78) 32%, rgba(2,6,9,.08) 68%, rgba(2,6,9,.2)); pointer-events:none; }

.demo-compare-head { display:flex; justify-content:space-between; padding:12px 15px 8px; color:rgba(241,200,116,.52); font-size:.55rem; letter-spacing:.15em; }
.demo-compare-grid { display:grid; grid-template-columns: .86fr 1.14fr; gap:10px; padding:0 14px 14px; height:calc(100% - 34px); }
.demo-old-site,.demo-new-site { position:relative; overflow:hidden; border:1px solid rgba(231,220,201,.12); border-radius:12px; }
.demo-old-site { padding:18px 13px; background:#0a0d0f; opacity:.55; }
.old-line { height:5px; width:68%; margin-bottom:9px; background:rgba(221,215,203,.25); }
.old-line.wide{width:88%;}.old-line.short{width:44%;}.old-box{height:72px;margin:15px 0;background:rgba(221,215,203,.09);border:1px solid rgba(221,215,203,.08);}
.demo-new-site { padding:16px; background:radial-gradient(circle at 78% 28%, rgba(31,65,80,.32), transparent 38%), #061119; }
.new-kicker { color:rgba(241,200,116,.55); font-size:.48rem; letter-spacing:.13em; }
.demo-new-site strong { display:block; width:67%; margin-top:13px; font-size:1rem; line-height:1.08; }
.demo-new-site p { width:65%; margin-top:8px; color:rgba(231,220,201,.55); font-size:.58rem; line-height:1.4; }
.new-button { width:42%; height:24px; margin-top:13px; border:1px solid rgba(241,200,116,.43); border-radius:4px; }
.new-mobile { position:absolute; right:10%; bottom:-11px; width:52px; height:110px; border:1px solid rgba(241,200,116,.38); border-radius:9px 9px 0 0; background:#03080c; padding:15px 8px 0; }
.new-mobile span,.new-mobile i { display:block; height:4px; margin-bottom:7px; background:rgba(241,200,116,.22); }
.new-mobile i:nth-child(2){width:70%}.new-mobile i:nth-child(3){height:33px;background:rgba(44,75,89,.38)}.new-mobile i:nth-child(4){width:55%}

.demo-operate { padding:18px; background:radial-gradient(circle at 50% 0%, rgba(37,68,80,.28), transparent 43%), #050c11; }
.demo-flow-copy strong { font-size:1.02rem; }.demo-flow-copy p { margin-top:6px; color:rgba(231,220,201,.56); font-size:.61rem; line-height:1.4; max-width:44ch; }
.demo-flow-steps { display:grid; grid-template-columns:1fr 16px 1fr 16px 1fr; align-items:center; gap:5px; margin-top:18px; }
.flow-card { min-height:82px; padding:10px; border:1px solid rgba(241,200,116,.16); border-radius:10px; background:rgba(3,8,12,.62); }
.flow-card.active { border-color:rgba(241,200,116,.48); box-shadow:0 0 24px rgba(241,200,116,.05); }
.flow-card small{color:rgba(241,200,116,.48);font-size:.5rem}.flow-card b{display:block;margin-top:7px;font-size:.72rem}.flow-card span{display:block;margin-top:5px;color:rgba(231,220,201,.5);font-size:.52rem;line-height:1.25}.flow-link{height:1px;background:rgba(241,200,116,.23)}
.demo-calendar { display:flex; gap:7px; margin-top:16px; }
.demo-calendar span { padding:6px 8px; border:1px solid rgba(231,220,201,.11); border-radius:5px; color:rgba(231,220,201,.5); font-size:.52rem; }
.demo-calendar .chosen { border-color:rgba(241,200,116,.52); color:rgba(247,226,187,.86); background:rgba(241,200,116,.05); }

.demo-particular { padding:18px; background:linear-gradient(150deg,#061017,#03070a); }
.demo-particular header { display:flex; justify-content:space-between; gap:15px; }
.demo-particular header strong { font-size:1rem; }.demo-particular header p { margin-top:6px; color:rgba(231,220,201,.54); font-size:.59rem; line-height:1.35; max-width:38ch; }
.demo-status { align-self:flex-start; padding:5px 7px; border:1px solid rgba(241,200,116,.25); border-radius:4px; color:rgba(241,200,116,.58); font-size:.48rem; letter-spacing:.12em; }
.demo-dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:18px; }
.demo-metric,.demo-panel-list { padding:11px; border:1px solid rgba(241,200,116,.13); border-radius:9px; background:rgba(2,6,9,.5); }
.demo-metric small{display:block;color:rgba(231,220,201,.43);font-size:.5rem}.demo-metric b{display:block;margin-top:8px;font-size:.76rem}.demo-metric i{display:block;width:var(--w);height:3px;margin-top:12px;background:linear-gradient(to right,rgba(241,200,116,.65),rgba(241,200,116,.15));border-radius:99px}.demo-panel-list{grid-column:1/-1;display:flex;gap:13px}.demo-panel-list span{flex:1;color:rgba(231,220,201,.54);font-size:.49rem}.demo-panel-list i{display:inline-block;width:5px;height:5px;margin-right:5px;border:1px solid rgba(241,200,116,.55);border-radius:50%}

.demo-care { padding:18px; background:radial-gradient(circle at 90% 20%, rgba(29,64,72,.24), transparent 38%), #050c10; }
.demo-care-copy strong { font-size:1rem; }.demo-care-copy p { margin-top:6px; max-width:46ch; color:rgba(231,220,201,.54); font-size:.59rem; line-height:1.4; }
.demo-care-board { display:grid; gap:8px; margin-top:16px; }
.demo-care-board > div { display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:8px; padding:9px 10px; border:1px solid rgba(241,200,116,.11); border-radius:8px; background:rgba(2,6,9,.42); }
.demo-care-board b { font-size:.62rem; font-weight:520; }.demo-care-board small { color:rgba(231,220,201,.39); font-size:.48rem; }.care-dot { width:7px;height:7px;border:1px solid rgba(241,200,116,.3);border-radius:50%}.care-dot.done{background:rgba(241,200,116,.5)}.care-dot.live{box-shadow:0 0 8px rgba(241,200,116,.4);border-color:rgba(241,200,116,.75)}

@media (max-width: 960px) and (min-width: 681px) {
  .door-detail { width: 94vw; grid-template-columns: 1fr 1fr; gap: 20px; padding: 18px; }
  .door-detail-demo { min-height: 232px; }
}

@media (max-width: 680px) {
  .hero-micro-signal { opacity: 0; }
  .scene.is-idle .hero-micro-signal,
  .scene.is-reduced .hero-micro-signal,
  .scene.is-fallback .hero-micro-signal { opacity: .34; }
  .network-glow path { stroke-width: 9; }
  .network-trace path { stroke-width: .72; opacity: .34; }
  .network-core path { stroke-width: 2.35; }

  .door-node { min-height: 84px; padding-top: 47px; }
  .door-node::before { top: 23px; width: 31px; height: 31px; box-shadow:0 0 0 5px rgba(241,200,116,.028),0 0 0 9px rgba(241,200,116,.012); }
  .door-node::after { top: -2px; }
  .station-glyph { top: 15px; width: 16px; height: 16px; }

  .door-detail {
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    max-height: 58svh;
    display: block;
    padding: 16px;
    border-radius: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
  .door-detail::after { display: none; }
  .door-detail-index { font-size: .65rem; margin-bottom: 5px; }
  .door-detail h3 { font-size: 1.25rem; }
  .door-detail p#door-detail-description { margin-top: 7px; font-size: .8rem; line-height: 1.42; }
  .door-detail-benefits { gap: 6px; margin-top: 12px; }
  .door-benefit { grid-template-columns: 21px 1fr; gap: 8px; min-height: 24px; font-size: .72rem; }
  .benefit-icon { width: 16px; height: 16px; }
  .door-detail-demo { min-height: 188px; margin-top: 14px; }
  .door-detail > .detail-cta { display:flex; width:100%; min-width:0; margin-top:14px; }

  .door-demo { min-height:188px; border-radius:13px; }
  .demo-browser-bar { height:27px; padding:0 8px; }.demo-browser-bar nav{font-size:.42rem}.demo-browser-bar>span{width:4px;height:4px}
  .demo-landscape{inset:27px 0 0;height:calc(100% - 27px)}.demo-start::after{inset:27px 0 0}
  .demo-start-copy{left:7%;top:29%;width:55%}.demo-start-copy strong{font-size:1rem}.demo-start-copy p{font-size:.52rem;margin-top:6px}.demo-button{font-size:.48rem;margin-top:8px;padding:6px 8px}
  .demo-compare-grid{padding:0 8px 8px;gap:6px}.demo-old-site,.demo-new-site{padding:9px}.demo-new-site strong{font-size:.75rem}.demo-new-site p{font-size:.46rem}.new-mobile{right:5%;width:40px;height:82px}.new-kicker{font-size:.39rem}
  .demo-operate,.demo-particular,.demo-care{padding:11px}.demo-flow-copy strong,.demo-particular header strong,.demo-care-copy strong{font-size:.8rem}.demo-flow-copy p,.demo-particular header p,.demo-care-copy p{font-size:.48rem}.demo-flow-steps{margin-top:10px;grid-template-columns:1fr 8px 1fr 8px 1fr;gap:3px}.flow-card{min-height:62px;padding:6px}.flow-card span{font-size:.4rem}.demo-calendar{margin-top:8px;gap:4px}.demo-calendar span{padding:4px 5px;font-size:.4rem}.demo-dashboard-grid{margin-top:10px;gap:5px}.demo-metric,.demo-panel-list{padding:7px}.demo-panel-list{gap:5px}.demo-panel-list span{font-size:.4rem}.demo-care-board{gap:5px;margin-top:9px}.demo-care-board>div{padding:6px 7px}.demo-care-board b{font-size:.5rem}.demo-care-board small{font-size:.4rem}
}

@media (prefers-reduced-motion: reduce) {
  .hero-micro-signal { opacity: .46 !important; transform: none !important; transition: none !important; }
  .network-trace path { stroke-dashoffset: 0 !important; }
}