/* ============================================================
   DEADLINK hero : single viewport, no scroll.
   Background = live fleet-coverage grid (ported from the
   uploaded reference) recolored to brand cyan + amber.
   Type system + motion follow DecideAI (PP Neue Montreal).
   ============================================================ */
:root{
  --void:#08080D; --graphite:#1A1C20; --offwhite:#F5F6F7;
  --cyan:#00E5FF; --amber:#FFC53D;
  --cyan-rgb:0 229 255; --ow-rgb:245 246 247;
  --pad:clamp(22px,4vw,72px);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--void);color:var(--offwhite);scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{font-family:'PP Neue Montreal',-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{text-decoration:none;color:inherit}
::selection{background:var(--cyan);color:var(--void)}

@keyframes dl-fadeup{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes dl-fadein{from{opacity:0}to{opacity:1}}
.dl-up{opacity:0;animation:dl-fadeup .9s cubic-bezier(.16,1,.3,1) both}

/* headline: word-by-word masked rise (DecideAI/isidor reveal technique) */
@keyframes dl-wordrise{from{transform:translateY(115%)}to{transform:translateY(0)}}
.dl-h1 .ln{display:block}
.dl-h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.18em .03em 0;margin-top:-.18em}
.dl-h1 .w>i{display:inline-block;font-style:normal;transform:translateY(115%);
  animation:dl-wordrise .95s cubic-bezier(.16,1,.3,1) both}

/* nav entrance */
@keyframes dl-navdrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.dl-navup{opacity:0;animation:dl-navdrop .7s ease both}

/* CTA arrow nudge (button hover already lifts) */
.dl-btn span{transition:transform .2s}
.dl-btn:hover span{transform:translateX(3px)}

/* ---------------- hero shell (locks to one screen) ---------------- */
.hero{position:relative;height:100svh;min-height:600px;width:100%;overflow:hidden;display:flex;flex-direction:column}

/* background : interactive canvas square-field */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
#dl-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}

/* Essential-style crosshair corner frame */
.dl-frame{position:fixed;inset:0;z-index:6;pointer-events:none;padding:18px}
.dl-frame i{position:absolute;width:14px;height:14px;opacity:.5}
.dl-frame i::before,.dl-frame i::after{content:"";position:absolute;background:rgba(var(--ow-rgb)/.5)}
.dl-frame i::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-50%)}
.dl-frame i::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-50%)}
.dl-frame .tl{top:18px;left:18px}.dl-frame .tr{top:18px;right:18px}
.dl-frame .bl{bottom:18px;left:18px}.dl-frame .br{bottom:18px;right:18px}

/* legibility veil over the grid */
.hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(90% 95% at 50% 50%, rgba(8,8,13,.92) 0%, rgba(8,8,13,.6) 38%, rgba(8,8,13,.16) 70%, rgba(8,8,13,0) 100%),
  linear-gradient(0deg, var(--void) 0%, rgba(8,8,13,0) 24%, rgba(8,8,13,0) 74%, var(--void) 100%)}

/* ---------------- nav ---------------- */
.dl-nav{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:clamp(16px,1.7vw,26px) var(--pad);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s ease, backdrop-filter .35s ease, border-color .35s ease}
.dl-nav.scrolled{background:rgba(8,8,13,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(var(--ow-rgb)/.07)}
.dl-logo{display:flex;align-items:center;gap:.7rem}
.dl-logo img{height:28px;width:auto;display:block}
.dl-wordmark{font-family:'Geist Pixel',monospace;font-weight:400;letter-spacing:.04em;font-size:1.18rem;line-height:1;padding-top:2px}
.dl-nav-right{display:flex;align-items:center;gap:clamp(20px,2.3vw,40px)}
.dl-navlink{position:relative;font-family:'Geist Mono',monospace;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(var(--ow-rgb)/.5);transition:color .25s ease;padding:5px 1px}
.dl-navlink::after{content:"";position:absolute;left:0;right:0;bottom:0;margin:auto;height:1px;width:0;background:var(--cyan);transition:width .32s cubic-bezier(.2,.7,.2,1);box-shadow:0 0 6px rgba(var(--cyan-rgb)/.6)}
.dl-navlink:hover{color:var(--offwhite)}
.dl-navlink:hover::after{width:100%}
/* Contact = pill CTA */
.dl-navcta{font-family:'Geist Mono',monospace;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);
  border:1px solid rgba(var(--cyan-rgb)/.38);border-radius:3px;padding:.52rem .95rem;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.dl-navcta:hover{background:var(--cyan);color:var(--void);border-color:var(--cyan)}

/* ---------------- foreground content (centered, Essential-style) ---------------- */
.hero-content{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 var(--pad);max-width:1240px;margin:0 auto;width:100%}
.dl-h1{margin:0;font-family:'Geist Pixel',monospace;font-weight:400;
  font-size:clamp(2.3rem,7.4vw,7rem);line-height:1.06;letter-spacing:.005em;color:var(--offwhite)}
.dl-h1 .cyan{color:var(--cyan)}
.dl-sub{margin:1.8rem auto 0;max-width:46em;font-family:'Geist Mono',monospace;font-weight:400;
  font-size:clamp(.92rem,1.15vw,1.12rem);line-height:1.65;letter-spacing:-.01em;color:rgba(var(--ow-rgb)/.62)}
.dl-cta{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:2rem;flex-wrap:wrap}
.dl-btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.4rem;background:var(--cyan);color:var(--void);
  font-family:'Geist Mono',monospace;font-weight:500;font-size:.84rem;letter-spacing:.02em;border-radius:3px;transition:opacity .2s,transform .2s}
.dl-btn:hover{opacity:.88;transform:translateY(-1px)}
.dl-byline{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(var(--ow-rgb)/.4)}
.dl-hero-proof{width:min(100%,760px);margin:1.6rem auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid rgba(var(--ow-rgb)/.1);border-bottom:1px solid rgba(var(--ow-rgb)/.1)}
.dl-hero-proof span{position:relative;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.78rem .9rem}
.dl-hero-proof span+span::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:1px;background:rgba(var(--ow-rgb)/.1)}
.dl-hero-proof b{font-family:'Geist Pixel',monospace;font-weight:400;color:var(--offwhite);font-size:.95rem;letter-spacing:0}
.dl-hero-proof i{font-family:'Geist Mono',monospace;font-style:normal;text-transform:uppercase;letter-spacing:.12em;
  color:rgba(var(--ow-rgb)/.48);font-size:.62rem;line-height:1.25}

@media(max-width:640px){
  .dl-nav-right .dl-navlink:not(.accent){display:none}
  #dl-grid{opacity:.5}
  .dl-sub{margin-top:1.35rem;font-size:.84rem;line-height:1.54;max-width:30em}
  .dl-cta{margin-top:1.45rem}
  .dl-hero-proof{grid-template-columns:1fr;margin-top:1.15rem;width:min(100%,23rem)}
  .dl-hero-proof span{padding:.52rem .65rem;gap:.12rem}
  .dl-hero-proof span+span::before{left:12%;right:12%;top:0;bottom:auto;width:auto;height:1px}
  .dl-hero-proof b{font-size:.78rem}
  .dl-hero-proof i{font-size:.54rem;letter-spacing:.1em}
}
@media(prefers-reduced-motion:reduce){.dl-up{animation-duration:.01ms}}