/* DotConn V2: original, flat light grid with native upward drift. No perspective. */
.dc-hero.dc-grid-hero {
  isolation:isolate; position:relative; display:grid; place-items:center;
  min-height:calc(100svh - 80px); min-height:calc(100dvh - 80px);
  grid-template-rows:auto auto;gap:0;align-content:start;
  padding:0; overflow:hidden; background:#080808;
}
.dc-grid-hero .dc-hero-opening {
  display:grid;grid-template-rows:1fr auto;gap:40px;width:100%;min-width:0;
  min-height:calc(100svh - 80px);min-height:calc(100dvh - 80px);
  padding:64px 0 24px;box-sizing:border-box;
}
.dc-grid-hero .dc-hero-intro {
  display:grid;place-items:center;width:100%;min-width:0;
  padding:0;align-self:start;box-sizing:border-box;
}
.dc-grid-hero .dc-hero-scene {
  position:relative;display:grid;place-items:center;width:100%;min-width:0;
  min-height:calc(100svh - 80px);min-height:calc(100dvh - 80px);
  padding:64px 0;box-sizing:border-box;
}
/* Exact original .hx backdrop from the user's local 8793 reference.
   It sits below the native vector grid, preserving the full hero spotlight. */
.dc-grid-hero .dc-hero-scene::before {
  content:"";position:absolute;inset:0;z-index:-2;
  background:radial-gradient(900px 520px at 78% 38%,#f8b41418,transparent 65%),radial-gradient(700px 420px at 8% 0%,#77b5ff10,transparent 70%),#080808;
}
.dc-grid-hero .dc-hero-illustration {
  position:relative;z-index:1;width:calc(100% - 96px);max-width:800px;
  aspect-ratio:640/560;margin:0 auto;min-width:0;scroll-margin-top:104px;
}
.dc-grid-hero .dc-hero-illustration dc-hero-devops {
  position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:transparent;
}
.dc-grid-hero .dc-hero-illustration:focus-visible {outline:1px solid #888;outline-offset:12px;}
.dc-grid-background { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
/* Fade only the decorative hero layer, including late cursor/icon highlights.
   Finish above the boundary; copy, logos and neighboring sections stay unmasked. */
.dc-grid-hero .dc-grid-background {
  --hero-grid-fade:clamp(112px,20vh,180px);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--hero-grid-fade)),#0008 calc(100% - var(--hero-grid-fade)/2),transparent calc(100% - 20px));
  mask-image:linear-gradient(to bottom,#000 calc(100% - var(--hero-grid-fade)),#0008 calc(100% - var(--hero-grid-fade)/2),transparent calc(100% - 20px));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.dc-grid-background>svg { display:block; width:100%; height:100%;overflow:visible; }
.dc-grid-fallback {
  position:absolute; inset:0; --grid-size:64.5px;
  background-image:linear-gradient(#ffffff0c 1px,transparent 1px),linear-gradient(90deg,#ffffff0c 1px,transparent 1px);
  background-size:var(--grid-size) var(--grid-size);
  background-position:center center;
}
.dc-grid-fallback::after {
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 46%,#080808 4%,#080808e0 27%,transparent 68%),linear-gradient(transparent 75%,#080808);
}
.dc-grid-background[data-renderer="svg"] .dc-grid-fallback { display:none; }
.dc-grid-hero .dc-hero-copy {
  position:relative;z-index:1;width:100%;max-width:1184px;margin:0 auto;
  padding:0 24px;text-align:center;transform:none;align-self:center;
}
.dc-grid-hero .hero-environment {
  position:relative;z-index:1;width:calc(100% - 96px);max-width:1184px;
  margin:0 auto;padding:0;border:0;background:none;align-self:end;
}
.dc-grid-hero .hero-environment .environment-marquee {margin:0;padding-block:8px;}
.dc-grid-hero .hero-environment .environment-item {font-size:16px;}
.dc-grid-hero .hero-environment .environment-track {animation-duration:42s;}
.dc-grid-hero[data-motion="paused"] .environment-track,
.dc-grid-hero[data-motion="suspended"] .environment-track {animation-play-state:paused;}
.dc-grid-hero[data-motion="reduced"] .environment-track {animation:none;}
.dc-grid-hero .dc-intro {max-width:720px;color:#b0b0b0;}
.dc-grid-hero .morph-preview {margin-bottom:0;}
.dc-grid-hero:focus {outline:none;}
.dc-grid-hero:focus-visible {outline:1px solid #888;outline-offset:-8px;}
@media(max-width:800px) {
  .dc-hero.dc-grid-hero {min-height:calc(100svh - 74px);min-height:calc(100dvh - 74px);}
  .dc-grid-hero .dc-hero-opening {min-height:calc(100svh - 74px);min-height:calc(100dvh - 74px);padding:48px 0 20px;}
  .dc-grid-hero .dc-hero-scene {min-height:calc(100svh - 74px);min-height:calc(100dvh - 74px);padding:48px 0;}
  .dc-grid-hero .dc-hero-illustration {width:calc(100% - 64px);}
  .dc-grid-hero .hero-environment {width:calc(100% - 64px);}
}
@media(max-width:560px) {
  .dc-grid-hero .dc-hero-copy {padding-inline:20px;}.dc-grid-fallback {--grid-size:42px;}
  .dc-grid-hero .dc-hero-illustration {width:calc(100% - 40px);}
  .dc-grid-hero .hero-environment {width:calc(100% - 40px);}
  .dc-grid-hero .hero-environment .environment-item {font-size:14px;}
}