/* Decorative editor beside the centered hero, isolated from the text layout. */
.hero { position: relative; }
.hero-code-anchor {
  position: absolute;
  right: 50px;
  bottom: max(30px, calc(var(--hero-gap) - 24px));
  width: clamp(240px, calc((100vw - 640px) / 2 - 32px), 380px);
}
.hero-code {
  position: relative;
  width: 100%;
  color: #e1e9f7;
  border: 1px solid rgba(171, 199, 245, .28);
  border-radius: 15px;
  background: linear-gradient(140deg, rgba(38, 51, 75, .82), rgba(10, 17, 29, .9) 65%);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 #d3e5ff24, 0 22px 65px #0007, -8px -6px 38px #6695ff0c;
  transform: perspective(1000px) translate3d(var(--code-x, 0px), var(--code-y, 0px), 0) rotateY(calc(-13deg + var(--code-ry, 0deg))) rotateX(calc(6deg + var(--code-rx, 0deg))) rotateZ(-5deg);
  transform-origin: center;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  text-rendering: geometricPrecision;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.hero-code__toolbar, .hero-code__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  font: 10px/1.2 Consolas, 'Courier New', monospace;
  color: #c1cde0;
}
.hero-code__toolbar { border-bottom: 1px solid #b6ceff17; background: #adcaff05; }
.hero-code__dots { display: flex; gap: 5px; }
.hero-code__dots i { width: 5px; height: 5px; border-radius: 50%; background: #8092b2; }
.hero-code__dots i:first-child { background: #ca8f9b; }
.hero-code__dots i:nth-child(2) { background: #c7b38b; }
.hero-code__dots i:last-child { background: #88b9ac; }
.hero-code__icon { color: #8ebaff; }
.hero-code__body { margin: 0; padding: 18px 10px 19px 0; font: 500 clamp(9px, .79vw, 12px)/1.85 Consolas, 'Courier New', monospace; white-space: pre; counter-reset: code-line; }
.hero-code__body code { font: inherit; }
.hc-line { counter-increment: code-line; }
.hc-line::before { content: counter(code-line); display: inline-block; width: 23px; margin-right: 8px; text-align: right; color: #94a5c0; font-size: .9em; }
.hc-tag { color: #a6ceff; }
.hc-attr { color: #d9baff; }
.hc-string { color: #b4ead0; }
.hc-muted { color: #a3b3cb; }
.hero-code__status { padding: 9px 15px; border-top: 1px solid #b6ceff12; font-size: 9px; }
.hero-code__status b { display: inline-block; width: 4px; height: 4px; margin-right: 5px; background: #9ed5be; border-radius: 50%; }
.hero-code__spark { margin-left: 9px; color: #a9c7ff; }
@media (max-width: 1099px) { .hero-code-anchor { display: none; } }

/* Second home screen; the first screen keeps its existing layout. */
/* Only the document scrolls. An overflow:auto body intercepts the snap
   areas even when it has no constrained height and does not itself scroll. */
html[data-view="home"] {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y proximity;
}
html[data-view="home"].story-snap-custom { scroll-snap-type: none; }
html[data-view="home"] body {
  height: auto;
  overflow: visible;
}
html[data-view="home"].vortium-menu-open { overflow: hidden; }
html[data-view="home"] .page { scroll-snap-align: start; scroll-snap-stop: normal; }
html[data-view="home"] .site-footer { scroll-snap-align: end; }
.home-story {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 7vw, 120px);
  min-height: 100vh;
  min-height: 100svh;
  padding: 100px max(40px, calc((100vw - 1160px) / 2));
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}
.home-story[hidden], html:not([data-view="home"]) .home-story { display: none; }
.home-story__copy { max-width: 520px; }
.home-story__eyebrow { color: #a7c6f2; font-size: 11px; font-weight: 600; letter-spacing: .18em; }
.home-story h2 { margin: 22px 0; color: #f0f4fc; font-size: clamp(32px, 3.7vw, 54px); line-height: 1.12; letter-spacing: -.045em; font-weight: 500; }
.home-story p { color: #b8c2d2; font-size: 16px; line-height: 1.8; margin: 0 0 20px; }
.home-story .home-story__note { color: #899ab4; font-size: 14px; }
.home-story__visual { display: flex; justify-content: center; align-items: center; min-width: 0; padding: 20px; }
.home-story .hero-code-anchor { position: relative; display: block; right: auto; bottom: auto; width: min(100%, 440px); }
.home-story .hero-code__body { font-size: clamp(10px, 1vw, 13px); }
.home-story__steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:30px; }
.home-story__steps article { padding:14px; border:1px solid rgba(151,181,225,.18); border-radius:16px; background:rgba(8,18,35,.34); }
.home-story__steps span { display:block; color:#7fa9df; font-size:10px; letter-spacing:.16em; margin-bottom:12px; }
.home-story__steps strong { display:block; color:#eaf1fc; font-size:14px; font-weight:600; }
.home-story__steps p { margin:8px 0 0; font-size:12px; line-height:1.45; color:#aab8cd; }
.home-story__extras { display:flex; flex-wrap:wrap; gap:8px 18px; margin:22px 0 0; padding:0; list-style:none; color:#9eafc7; font-size:12px; line-height:1.45; }
.home-story__extras li::before { content:'+'; color:#78aaff; margin-right:7px; }
@media (max-width: 760px) {
  .home-story { grid-template-columns: 1fr; gap: 30px; padding: 70px 28px; }
  .home-story__copy { max-width: 560px; }
  .home-story__visual { padding: 16px 8px; }
  .home-story .hero-code__body { font-size: clamp(9px, 2.4vw, 12px); }
  .home-story__steps { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce) { html[data-view="home"] { scroll-snap-type: none; } }
html[data-view="home"].touch-scroll { scroll-snap-type: none; }
@media (any-pointer: coarse) {
  html[data-view="home"] { scroll-snap-type: none; }
}