/* An engraved node field: warm paper, porous planes, one active brand node. */
.hero {
  display:block;
  padding:0 40px;
  text-align:left;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(ellipse at 79% 43%,#edeee450,transparent 57%);
}
.hero-inner {
  position:relative;
  display:grid;
  grid-template-columns:44% 56%;
  align-items:center;
  width:100%;
  max-width:1080px;
  min-height:clamp(640px,calc(100svh - 72px),880px);
  margin:0 auto;
  padding:44px 0 90px;
}
.hero-copy { position:relative; z-index:2; padding-bottom:16px; }
.hero-eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:30px;
  color:#7f8577;
  font-size:10px;
  letter-spacing:.15em;
}
.hero-eyebrow>span { width:5px; height:5px; background:var(--accent); border-radius:1px; }
.hero h1 { font-size:clamp(54px,5.3vw,76px); line-height:1.22; letter-spacing:-.055em; }
.hero-copy>p { font-size:13px; letter-spacing:.025em; margin:26px 0 0; color:#73786c; }
.hero-copy>.btn { margin-top:32px; gap:36px; font-size:11px; }
.cloud-scene {
  position:relative;
  z-index:1;
  justify-self:center;
  width:min(720px,calc((100svh - 260px)*1.1875));
  margin:0 -98px 0 -70px;
}
.cloud-art {
  position:relative;
  width:100%;
  transform:perspective(1100px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));
  transform-origin:50% 45%;
  user-select:none;
}
.cloud-art img { pointer-events:none; }
.cloud-art>img { display:block; width:100%; height:auto; }
.cloud-signals { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.node-wanderer { visibility:hidden; opacity:.85; }
.motion-ready .node-wanderer { visibility:visible; }
.node-wanderer[data-plane="compute"] { opacity:.5; }
.node-wanderer[data-plane="runtime"] { opacity:.7; }
.wander-trail { stroke:#c76d4e; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.8; }
.wander-head { display:none; }
.node-response { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.agent-glow { fill:#f1ba89; opacity:0; }
.cloud-label {
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  color:#8e9584;
  font:9px/1.4 'SFMono-Regular',Consolas,monospace;
  letter-spacing:.02em;
}
.cloud-label i { display:block; width:18px; height:1px; background:#b6bdac; opacity:.8; }
.cloud-label-agent { top:31.2%; left:88%; }
.cloud-label-runtime { top:47.5%; left:88%; }
.cloud-label-compute { top:63.7%; left:88%; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.cloud-layer,.layer-surface { position:absolute; inset:0; }
.layer-surface { transform:translateY(var(--float-y,0px)); }
.cloud-layer { transform:translate3d(calc(var(--pointer-x,0px)*var(--depth)),calc((var(--parallax,0px) + var(--pointer-y,0px))*var(--depth)),0); }
.layer-surface>img { position:absolute; inset:0; display:block; width:100%; height:100%; }
.layer-compute { z-index:1; --depth:-.18; --plane-top:41.4%; --plane-mid:64.53%; --plane-bottom:87.66%; }
.layer-runtime { z-index:2; --depth:-.5; --plane-top:25.16%; --plane-mid:48.28%; --plane-bottom:71.4%; }
.layer-agent { z-index:3; --depth:-1; --plane-top:8.9%; --plane-mid:32.03%; --plane-bottom:55.16%; }
.cloud-glass {
  position:absolute;
  inset:0;
  clip-path:polygon(50% var(--plane-top),89.9% var(--plane-mid),50% var(--plane-bottom),10.1% var(--plane-mid));
  background:linear-gradient(145deg,#fffefb42,#f7f5ef08 68%,#e8eadd16);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.layer-runtime .cloud-glass { background:linear-gradient(145deg,#fffefb32,#f7f5ef05); }
.layer-compute .cloud-glass { background:linear-gradient(145deg,#fffefb22,#f7f5ef02); }
.cloud-signals { z-index:4; pointer-events:none; }
.hero-footnote {
  position:absolute;
  bottom:28px;
  left:0;
  right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-top:22px;
  border-top:1px solid #dedfd680;
  color:#969b8e;
  font:9px/1.6 'SFMono-Regular',Consolas,monospace;
  letter-spacing:.03em;
}
.hero-footnote>a { font-family:inherit; font-size:10px; }
.hero-footnote>a>span { padding-left:14px; }
.hero-footnote>a:hover { color:var(--accent); }
/* Reuse the vocabulary sparingly; the reading sections keep a plain paper surface. */
.scope-section { position:relative; background:#eeeee7; }
.scope-section::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(#979e8a45 .6px,transparent .6px);
  background-size:16px 16px;
  mask-image:linear-gradient(110deg,transparent 42%,#0005);
}
.scope-section>.wrap { position:relative; }
.cta { position:relative; isolation:isolate; overflow:hidden; }
.cta::before {
  content:'';
  position:absolute;
  z-index:-1;
  width:260px;
  height:260px;
  right:70px;
  top:-110px;
  border:1px solid #bdc1b01a;
  border-radius:36px;
  box-shadow:0 0 0 26px #bdc1b009,0 0 0 52px #bdc1b006;
  transform:rotate(30deg) skew(-15deg);
}
@media(prefers-reduced-motion:no-preference) {
  .motion-ready .agent-glow { animation:node-breathe 8s ease-in-out infinite; animation-play-state:paused; }
  .motion-ready.is-visible .agent-glow { animation-play-state:running; }
}
@media(prefers-reduced-motion:reduce) { .cloud-layer,.cloud-art { transform:none; } }
@keyframes node-breathe { 0%,100% { opacity:0; } 50% { opacity:.16; } }
@media(min-width:1450px) { .cloud-scene { margin-left:-50px; margin-right:-112px; } }
@media(max-width:1000px) and (min-width:761px) {
  .hero { padding:0 32px; }
  .hero-inner { grid-template-columns:45% 55%; min-height:660px; }
  .hero h1 { font-size:58px; }
  .cloud-scene { margin-left:-70px; margin-right:-90px; }
  .cloud-label { font-size:8px; gap:5px; }
  .cloud-label i { width:10px; }
}
@media(max-width:760px) {
  .hero { min-height:0; padding:0 26px; background:radial-gradient(ellipse at 60% 60%,#edeee450,transparent 65%); }
  .hero-inner { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:64px 0 90px; }
  .hero-copy { padding:0; }
  .hero-eyebrow { font-size:9px; margin-bottom:22px; }
  .hero h1 { font-size:clamp(48px,11.8vw,68px); line-height:1.2; }
  .hero-copy>p { max-width:none; font-size:12px; margin:22px 0 0; }
  .hero-copy>.btn { margin-top:24px; }
  .cloud-scene { width:auto; margin:10px -34px 0; }
  .cloud-label { font-size:7px; gap:4px; }
  .cloud-label i { width:9px; }
  .cloud-label-agent,.cloud-label-runtime,.cloud-label-compute { left:87%; }
  .hero-footnote { bottom:24px; font-size:8px; padding-top:16px; }
  .hero-footnote>a { font-size:9px; }
  .hero-footnote>a>span { padding-left:8px; }
}
@media(max-width:360px) {
  .hero { padding:0 22px; }
  .hero-inner { padding-top:48px; }
  .cloud-scene { margin-left:-28px; margin-right:-28px; }
  .cloud-label { font-size:6px; }
  .hero-footnote { font-size:7px; gap:10px; }
}