/* ============================================================
   DEADLINK : Section 01 "The Problem"
   Reuses isidor's real component rules (card_icon-corner brackets,
   t-heading/t-label/tag type), remapped to Deadlink. Body + small
   text in Geist Mono. Background = the hero square-grid, mostly
   inactive (gray) with a single active cyan line.
   ============================================================ */

/* remap isidor's variable NAMES to Deadlink values + fonts */
:root{
  --_colors---c-brand--black:#08080D;
  --_colors---c-brand--white:#F5F6F7;
  --_colors---c-brand--white-50p:rgba(245,246,247,.32);
  --_colors---c-brand--white-80p:rgba(245,246,247,.78);
  --_colors---c-brand--gray:#1A1C20;
  --_colors---c-brand--accent:#00E5FF;
  --_colors---c-brand--accent-light:#00E5FF;
  --_typography---font-styles--heading:'Geist Pixel',monospace;   /* titles + headings = pixel */
  --_typography---font-styles--body:'Geist Mono',ui-monospace,monospace;   /* body = mono */
  --_typography---font-styles--label:'Geist Pixel',monospace;     /* numbers + labels = pixel */
}

/* isidor component rules (reused; values intact) */
.padding-global{padding-left:1.5rem;padding-right:1.5rem}
.container-large{width:100%;max-width:90rem;margin-left:auto;margin-right:auto} /* dashed side rails removed per request */
.t-heading-1-rg{font-family:var(--_typography---font-styles--heading);letter-spacing:0;font-size:clamp(1.8rem,3.2vw,3rem);font-weight:400;line-height:1.12}
.t-heading-4-rg{font-family:var(--_typography---font-styles--heading);letter-spacing:0;font-size:1.3rem;font-weight:400;line-height:1.3}
.t-label-3-rg{font-family:var(--_typography---font-styles--label);letter-spacing:.02em;text-transform:uppercase;font-size:.82rem;font-weight:400;line-height:1}
.t-paragraph-1-rg{font-family:var(--_typography---font-styles--body);letter-spacing:-.01em;font-size:.98rem;font-weight:400;line-height:1.62}
.tag-component{background-color:var(--_colors---c-brand--gray);font-family:var(--_typography---font-styles--label);text-transform:uppercase;padding:.42rem .7rem;font-weight:400;display:inline-flex;letter-spacing:.04em;border-radius:2px;font-size:.8rem;color:var(--_colors---c-brand--white)}
.text-color-accent{color:var(--_colors---c-brand--accent)}
.card_icon-corner{z-index:3;width:.7rem;height:.7rem;position:absolute;
  background-color:var(--_colors---c-brand--white-50p);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 10L0 0L10 0L10 .95L.95 .95L.95 10L0 10Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 10L0 0L10 0L10 .95L.95 .95L.95 10L0 10Z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:background-color .3s ease}
.card_icon-corner.is-top-left{top:0;left:0}
.card_icon-corner.is-top-right{top:0;right:0;transform:rotate(90deg)}
.card_icon-corner.is-bottom-right{bottom:0;right:0;transform:rotate(180deg)}
.card_icon-corner.is-bottom-left{bottom:0;left:0;transform:rotate(270deg)}

/* ===== section shell ===== */
.dl-sec{position:relative;background:var(--void);overflow:hidden}
.dl-pbg{position:absolute;inset:0;z-index:0;overflow:hidden}
#dl-pcanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dl-pveil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(115% 80% at 50% 46%, rgba(8,8,13,.40) 0%, rgba(8,8,13,.66) 55%, rgba(8,8,13,.86) 100%),
  linear-gradient(180deg, var(--void) 0%, rgba(8,8,13,0) 14%, rgba(8,8,13,0) 86%, var(--void) 100%)}
.dl-sec .container-large{position:relative;z-index:2;padding-top:clamp(76px,9vw,150px);padding-bottom:clamp(76px,9vw,150px)}
.dl-sec-inner{padding:0 clamp(8px,3vw,64px)}

/* heading block */
.dl-prob-head{max-width:none}
.dl-stmt{white-space:normal}
@media(min-width:760px){.dl-stmt{white-space:nowrap}}
.dl-eyebrow{margin-bottom:1.7rem}
.dl-stmt{color:var(--offwhite);margin:0}
.dl-stmt .amber{color:var(--amber)}
.dl-prob-copy{color:var(--_colors---c-brand--white-80p);margin:1.7rem 0 0;max-width:40rem;font-size:1.02rem}

/* open band where the single active line reads through */
.dl-line-slot{height:clamp(80px,11vw,150px)}

/* cards : koyeb bento structure + isidor corner brackets + square mini-diagram */
.dl-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,26px)}
.dl-card{position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:rgba(var(--ow-rgb)/.018);
  transition:transform .5s cubic-bezier(.16,1,.3,1),background-color .35s ease,box-shadow .5s ease}
.dl-card:hover{transform:translateY(-6px);background:rgba(var(--cyan-rgb)/.04);
  box-shadow:0 26px 50px -20px rgba(var(--cyan-rgb)/.32)}
.dl-card:hover .card_icon-corner{background-color:var(--cyan)}

/* visual area : square mini-diagram of the failure */
.dl-card-visual{position:relative;height:clamp(150px,15vw,192px);
  background:rgba(8,8,13,.7);border-bottom:1px solid rgba(var(--ow-rgb)/.08);overflow:hidden}
.dl-mini{position:absolute;inset:clamp(16px,1.6vw,24px);display:grid;
  grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(4,1fr);gap:clamp(3px,.4vw,5px)}
.dl-mini-c{border-radius:2px;background:rgba(var(--cyan-rgb)/.12)}
.dl-mini-c.a{background:rgba(var(--cyan-rgb)/.5)}
.dl-mini-c.b{background:rgba(var(--cyan-rgb)/.28)}
.dl-mini-c.drop{background:rgba(var(--ow-rgb)/.05)}
.dl-mini-c.live{background:rgba(var(--cyan-rgb)/.42)}
.dl-mini-c.conflict{animation:dl-conflict 1.7s ease-in-out infinite}
.dl-mini-c.dead{animation:dl-deadcell 4.4s ease-in-out infinite}
.dl-mini-c.flick{animation:dl-flick 2.2s steps(2,end) infinite}
@keyframes dl-conflict{0%,100%{background:rgba(255,197,61,.28)}50%{background:rgba(255,197,61,.95);box-shadow:0 0 8px rgba(255,197,61,.5)}}
@keyframes dl-deadcell{0%{background:rgba(var(--cyan-rgb)/.42)}7%{background:rgba(255,197,61,.95)}15%{background:#1a1c20}100%{background:#1a1c20}}
@keyframes dl-flick{0%,100%{opacity:.16}50%{opacity:.8}}
/* fleet: a coordinated formation, gently sweeping (Section 03 industries) */
.dl-mini-c.fleetcell{background:rgba(var(--cyan-rgb)/var(--lv,.4));animation:dl-fleetpulse 3s ease-in-out infinite}
@keyframes dl-fleetpulse{0%,100%{opacity:.5}50%{opacity:1}}
/* pending : in-progress (Section 05 roadmap cards) */
.dl-mini-c.pending{background:transparent;border:1px dashed rgba(var(--ow-rgb)/.26)}
.dl-mini-c.prog{background:rgba(var(--cyan-rgb)/.55);animation:dl-fleetpulse 2.6s ease-in-out infinite}

@media(min-width:641px){
  .dl-card .dl-mini-c.conflict{animation:none}
  .dl-card .dl-mini-c.dead{animation:none}
  .dl-card .dl-mini-c.flick{animation:none}
  .dl-card .dl-mini-c.fleetcell{animation:none}
  .dl-card .dl-mini-c.prog{animation:none}
  .dl-card-visual{opacity:.78}
}

.dl-card-body{padding:clamp(22px,2vw,32px) clamp(20px,1.8vw,30px) clamp(28px,2.4vw,40px)}
.dl-card-tag{display:inline-block;font-family:'Geist Pixel',monospace;color:var(--cyan);font-size:.8rem;
  border:1px solid rgba(var(--cyan-rgb)/.3);border-radius:2px;padding:.28rem .55rem;margin-bottom:1.3rem}
.dl-cardttl{color:var(--offwhite);margin:0 0 .7rem}
.dl-cardcopy{color:var(--_colors---c-brand--white-80p);font-size:.92rem;line-height:1.6;margin:0;font-family:'Geist Mono',monospace}

@media(max-width:860px){ .dl-cards{grid-template-columns:1fr} .dl-line-slot{height:90px} }
@media(max-width:640px){
  .padding-global{padding-left:1rem;padding-right:1rem}
  .dl-sec .container-large{padding-top:64px;padding-bottom:64px}
  .dl-sec-inner{padding:0}
  .dl-eyebrow{margin-bottom:1rem}
  .dl-prob-copy{margin:1rem 0 0;font-size:.88rem;line-height:1.58}
  .t-heading-1-rg{font-size:clamp(1.45rem,7.3vw,1.85rem);line-height:1.13}
  .dl-line-slot{display:none}
  #problem .dl-cards{gap:10px}
  #problem .dl-card{display:block;min-height:0;background:var(--void);border:1px solid rgba(var(--ow-rgb)/.07)}
  #problem .dl-card-visual{display:none}
  #problem .dl-card-body{padding:16px 15px 17px}
  #problem .dl-card-tag{font-size:.66rem;padding:.2rem .42rem;margin-bottom:.65rem}
  #problem .dl-cardttl{font-size:1.02rem;line-height:1.18;margin-bottom:.45rem}
  #problem .dl-cardcopy{font-size:.74rem;line-height:1.45}
}
@media(max-width:359px){
  #problem .dl-card{display:block;grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.dl-mini-c{animation:none!important}}

/* reveal-on-scroll (isidor motion) */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}