/* ==========================================================================
   Datacogence — home page set pieces
   ========================================================================== */

/* ---------- HERO : the governed data mesh ---------- */

.hero{
  position:relative;
  min-height:100svh;
  background:var(--ink);
  color:var(--mist);
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-block:150px 90px;
}
#mesh{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
}
.hero__veil{
  position:absolute;inset:0;
  background:
    radial-gradient(96% 72% at 6% 46%, rgba(4,34,45,.96) 0%, rgba(4,34,45,.72) 30%, rgba(4,34,45,0) 60%),
    linear-gradient(to top, rgba(4,34,45,.92) 0%, rgba(4,34,45,0) 34%);
  pointer-events:none;
}
.hero .shell{position:relative;z-index:3;width:100%}
.hero__copy{max-width:min(760px,64vw)}
@media (max-width:1024px){.hero__copy{max-width:100%}}

.hero h1{
  font-size:clamp(2.7rem,6.6vw,5.35rem);
  line-height:1.02;
  letter-spacing:-.03em;
}
.hero h1 .em{color:var(--ember);position:relative;white-space:nowrap}

/* per-word load animation */
.w{display:inline-block;overflow:hidden;vertical-align:bottom}
.w > i{
  display:inline-block;font-style:normal;
  transform:translateY(105%);
  transition:transform .95s var(--ease-out);
}
.is-ready .w > i{transform:translateY(0)}

.hero__sub{
  margin-top:1.9rem;
  font-size:clamp(1.05rem,1.55vw,1.28rem);
  line-height:1.56;
  color:rgba(237,241,243,.74);
  max-width:58ch;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease-out) .55s,transform .9s var(--ease-out) .55s;
}
.is-ready .hero__sub{opacity:1;transform:none}

.hero__btns{
  margin-top:2.5rem;display:flex;gap:.85rem;flex-wrap:wrap;
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease-out) .72s,transform .9s var(--ease-out) .72s;
}
.is-ready .hero__btns{opacity:1;transform:none}

.hero__geo{
  position:absolute;
  left:var(--gut);bottom:38px;
  display:flex;align-items:center;gap:1.1rem;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal-glow);
  z-index:3;
  opacity:0;transition:opacity 1s var(--ease-out) 1.1s;
}
.is-ready .hero__geo{opacity:1}
.hero__geo b{color:rgba(237,241,243,.5);font-weight:500}
.hero__geo em{
  font-style:normal;width:5px;height:5px;background:var(--ember);
  border-radius:50%;display:inline-block;
  animation:blip 2.6s var(--ease) infinite;
}
@keyframes blip{0%,100%{opacity:1}50%{opacity:.15}}

.hero__legend{
  position:absolute;right:var(--gut);bottom:38px;z-index:3;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;
  color:rgba(237,241,243,.42);text-align:right;line-height:1.9;
  opacity:0;transition:opacity 1s var(--ease-out) 1.3s;
}
.is-ready .hero__legend{opacity:1}
.hero__legend s{text-decoration:none;display:inline-flex;align-items:center;gap:.45rem}
.hero__legend s::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--k,var(--ember))}
@media (max-width:900px){.hero__legend{display:none}}

.scrollcue{
  position:absolute;left:50%;bottom:34px;transform:translateX(-50%);
  z-index:3;width:1px;height:52px;background:var(--line-dark);overflow:hidden;
}
.scrollcue::after{
  content:"";position:absolute;top:0;left:0;width:1px;height:18px;
  background:var(--ember);
  animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{0%{transform:translateY(-20px)}100%{transform:translateY(56px)}}
@media (max-width:900px){.scrollcue{display:none}}

/* ---------- marquee of capability terms ---------- */

.marq{
  background:var(--ink-2);
  border-block:1px solid var(--line-dark);
  overflow:hidden;
  padding-block:1.05rem;
  white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.marq__t{display:inline-flex;gap:3rem;align-items:center;will-change:transform}
.marq span{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(237,241,243,.5);display:inline-flex;align-items:center;gap:3rem;
}
.marq span::after{content:"";width:5px;height:5px;background:var(--ember);border-radius:50%;opacity:.8}

/* ---------- problem statement ---------- */

.thesis{background:var(--mist)}
.thesis__body p{font-size:clamp(1.06rem,1.55vw,1.24rem);line-height:1.62;color:var(--slate);max-width:60ch}
.thesis__body p strong{color:var(--ink);font-weight:600}
.thesis__kicker{
  margin-top:2.4rem;padding-top:2.2rem;border-top:1px solid var(--line-light);
  font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,2.3vw,1.85rem);
  line-height:1.28;letter-spacing:-.018em;color:var(--teal);max-width:26ch;
}

/* ---------- pillars ---------- */

.pillars{background:var(--white)}
.pillar{
  position:relative;
  display:grid;
  grid-template-columns:78px minmax(0,1fr) minmax(0,1.05fr) 190px;
  gap:2rem;
  align-items:start;
  padding:2.5rem 0;
  border-top:1px solid var(--line-light);
  text-decoration:none;color:inherit;
  transition:background .45s var(--ease);
}
.pillar:last-of-type{border-bottom:1px solid var(--line-light)}
.pillar::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:var(--ember);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.pillar:hover::before{transform:scaleX(1)}
.pillar:hover{background:rgba(2,75,100,.028)}
.pillar__n{
  font-family:var(--f-mono);font-size:.76rem;letter-spacing:.1em;
  color:var(--slate-2);padding-top:.42rem;
}
.pillar:hover .pillar__n{color:var(--ember)}
.pillar h3{transition:transform .5s var(--ease-out)}
.pillar:hover h3{transform:translateX(5px)}
.pillar__d{color:var(--slate);font-size:.97rem;margin:0}
.pillar__viz{width:170px;height:104px}
.pillar__go{
  grid-column:4;justify-self:end;align-self:center;
  width:44px;height:44px;border:1px solid var(--line-light);border-radius:50%;
  display:none;place-items:center;
}
@media (max-width:1080px){
  .pillar{grid-template-columns:56px 1fr;gap:1.2rem 1.4rem}
  .pillar__d{grid-column:2}
  .pillar__viz{grid-column:2;width:150px;height:92px}
}

/* ---------- value chain (scroll-drawn) ---------- */

.chain{background:var(--ink);position:relative;overflow:hidden}
.chain__wrap{margin-top:3.4rem;position:relative}
#chainSvg{width:100%;height:auto;overflow:visible}
.chain__path{fill:none;stroke:rgba(237,241,243,.13);stroke-width:1.5}
.chain__prog{fill:none;stroke:var(--ember);stroke-width:2.5;stroke-linecap:round}
.chain__node circle{fill:var(--ink);stroke:rgba(237,241,243,.25);stroke-width:1.5;transition:stroke .5s,fill .5s}
.chain__node.on circle{stroke:var(--ember);fill:#0B3341}
.chain__node text{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  fill:rgba(237,241,243,.45);transition:fill .5s;
}
.chain__node.on text{fill:var(--mist)}
.chain__node .dot{fill:rgba(237,241,243,.3);stroke:none;transition:fill .5s}
.chain__node.on .dot{fill:var(--ember)}

/* ---------- agent loop ---------- */

.loop{background:var(--mist)}
.loop__stage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center;margin-top:3rem}
@media (max-width:900px){.loop__stage{grid-template-columns:1fr}}
#loopSvg{width:100%;max-width:430px;height:auto;overflow:visible;margin-inline:auto}
.lp-seg{fill:none;stroke:rgba(2,75,100,.16);stroke-width:12;stroke-linecap:round;transition:stroke .5s var(--ease)}
.lp-seg.on{stroke:var(--teal)}
.lp-hit{fill:none;stroke:transparent;stroke-width:30;cursor:pointer}
.lp-lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;fill:var(--slate);transition:fill .4s}
.lp-lbl.on{fill:var(--ink)}
.lp-core{fill:none;stroke:rgba(2,75,100,.16);stroke-width:1}
.lp-pip{fill:var(--ember)}
.loop__panels{position:relative;min-height:270px}
.loop__panel{
  position:absolute;inset:0;opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .16s linear,transform .16s linear;
}
.loop__panel.on{
  opacity:1;transform:none;pointer-events:auto;
  transition:opacity .42s var(--ease) .14s,transform .52s var(--ease-out) .14s;
}
.loop__panel h3{margin-bottom:.8rem}
.loop__panel p{color:var(--slate);max-width:46ch}
.loop__step{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;color:var(--ember);margin-bottom:.9rem;text-transform:uppercase}

/* ---------- lineage explorer ---------- */

.lin{background:var(--white)}
.lin__stage{margin-top:2.8rem;border:1px solid var(--line-light);border-radius:4px;background:var(--mist);overflow:hidden}
.lin__bar{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.85rem 1.2rem;border-bottom:1px solid var(--line-light);background:var(--white);
}
.lin__bar b{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--slate)}
.lin__bar em{font-style:normal;font-family:var(--f-mono);font-size:.72rem;color:var(--ember);letter-spacing:.08em}
#linSvg{width:100%;height:auto;display:block}
.ln-edge{stroke:rgba(2,75,100,.22);stroke-width:1.4;fill:none;transition:stroke .35s,stroke-width .35s,opacity .35s}
.ln-edge.up{stroke:var(--teal);stroke-width:2.2}
.ln-edge.down{stroke:var(--ember);stroke-width:2.2}
.ln-edge.dim{opacity:.18}
.ln-node rect{fill:var(--white);stroke:rgba(2,75,100,.28);stroke-width:1.3;transition:all .35s}
.ln-node text{font-family:var(--f-mono);font-size:10px;fill:var(--teal);letter-spacing:.04em;transition:fill .35s}
.ln-node .sub{font-size:8.5px;fill:var(--slate-2);letter-spacing:.06em;text-transform:uppercase}
.ln-node{cursor:pointer}
.ln-node.sel rect{fill:var(--ink);stroke:var(--ink)}
.ln-node.sel text{fill:var(--mist)}
.ln-node.sel .sub{fill:var(--teal-glow)}
.ln-node.up rect{stroke:var(--teal);stroke-width:2}
.ln-node.down rect{stroke:var(--ember);stroke-width:2}
.ln-node.dim{opacity:.32}
.lin__note{padding:1rem 1.2rem;border-top:1px solid var(--line-light);background:var(--white);font-size:.88rem;color:var(--slate)}

/* ---------- industries ---------- */

.inds{background:var(--ink)}
.ind{
  position:relative;padding:2.3rem 1.9rem 2.1rem;
  border:1px solid var(--line-dark);border-radius:3px;overflow:hidden;
  text-decoration:none;color:var(--mist);display:block;
  transition:border-color .45s,transform .5s var(--ease-out);
}
.ind:hover{border-color:rgba(237,241,243,.3);transform:translateY(-5px)}
.ind canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.36;transition:opacity .6s}
.ind:hover canvas{opacity:.72}
.ind__c{position:relative;z-index:2}
.ind h3{margin-bottom:.65rem}
.ind p{color:rgba(237,241,243,.66);font-size:.95rem}
.ind .tlink{margin-top:1.4rem}

/* ---------- regions ---------- */

.reg{background:var(--mist);overflow:hidden}
.reg__stage{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:2.6rem}
@media (max-width:900px){.reg__stage{grid-template-columns:1fr}}
#regSvg{width:100%;max-width:440px;height:auto;overflow:visible;margin-inline:auto}
.rg-arc{fill:none;stroke:var(--teal);stroke-width:1.2;opacity:.35;stroke-dasharray:5 7}
.rg-pin circle{transition:r .4s var(--ease-out),fill .4s}
.rg-pin text{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;fill:var(--teal);transition:fill .35s}
.rg-pin{cursor:pointer}
.rg-pin.on text{fill:var(--ink)}
.rg-grat{fill:none;stroke:rgba(2,75,100,.16);stroke-width:1}
.rg-grat--f{stroke:rgba(2,75,100,.09)}
.reg__list{display:grid;gap:0}
.reg__item{
  padding:1.15rem 0;border-top:1px solid var(--line-light);cursor:pointer;
  text-decoration:none;color:inherit;
  display:grid;grid-template-columns:64px 1fr;gap:1.2rem;align-items:baseline;
  transition:padding-left .4s var(--ease-out);
}
.reg__item:last-child{border-bottom:1px solid var(--line-light)}
.reg__item:hover,.reg__item.on{padding-left:.55rem}
.reg__item b{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;color:var(--slate-2);transition:color .35s}
.reg__item.on b{color:var(--ember)}
.reg__item h4{margin-bottom:.25rem}
.reg__item p{font-size:.92rem;color:var(--slate);margin:0}

/* ---------- method ---------- */

.method{background:var(--white)}
.meth{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:3rem;border-top:1px solid var(--line-light)}
@media (max-width:860px){.meth{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.meth{grid-template-columns:1fr}}
.meth__s{padding:1.9rem 1.6rem 2.2rem;border-right:1px solid var(--line-light);position:relative}
.meth__s:last-child{border-right:0}
.meth__s::before{
  content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out);
}
.meth__s.in::before{transform:scaleX(1)}
.meth__s b{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.15em;color:var(--slate-2);display:block;margin-bottom:1.1rem}
.meth__s h4{margin-bottom:.55rem;font-size:1.16rem;font-family:var(--f-display);font-weight:700}
.meth__s p{font-size:.92rem;color:var(--slate);margin:0}

/* ---------- ecosystem ---------- */

.eco{background:var(--mist)}
.eco__row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem}
@media (max-width:820px){.eco__row{grid-template-columns:1fr}}
.eco__c{
  padding:1.9rem 1.7rem;background:var(--white);border:1px solid var(--line-light);border-radius:3px;
  text-decoration:none;color:inherit;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
  position:relative;overflow:hidden;
}
.eco__c::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease-out)}
.eco__c:hover{transform:translateY(-4px);box-shadow:0 22px 44px -32px rgba(4,34,45,.45)}
.eco__c:hover::before{transform:scaleX(1)}
.eco__c h4{font-family:var(--f-display);font-size:1.3rem;font-weight:700;margin-bottom:.5rem}
.eco__c p{font-size:.93rem;color:var(--slate);margin:0}
.eco__note{
  margin-top:1.8rem;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;
  color:var(--slate-2);display:flex;gap:.6rem;align-items:flex-start;
}
.eco__note::before{content:"—";color:var(--ember)}

/* ---------- hero: small screens ---------- */
@media (max-width:1024px){
  .hero{min-height:auto;padding-block:130px 96px;flex-direction:column;align-items:stretch}
  .hero__veil{
    background:
      linear-gradient(to right, rgba(4,34,45,.97) 0%, rgba(4,34,45,.86) 46%, rgba(4,34,45,.6) 100%),
      linear-gradient(to top, rgba(4,34,45,.95) 0%, rgba(4,34,45,0) 38%);
  }
  .hero__geo{
    position:static;width:100%;order:2;
    margin:2.4rem 0 0;padding-inline:var(--gut);
    flex-wrap:wrap;gap:.55rem;font-size:.66rem;letter-spacing:.12em;
  }
  .scrollcue{display:none}
}
@media (max-width:640px){
  .brand img{width:142px}
  .hero h1{font-size:clamp(2.15rem,9vw,3rem)}
  .hero__btns .btn{width:100%;justify-content:center}
}