/* Neoteric Analytics - homepage sections */

/* ============================================================
   HERO
   ============================================================ */
#hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  background:var(--ink); color:var(--white); overflow:hidden;
  padding-bottom:clamp(56px,8vh,96px);
}
/* Fixed and viewport-filling rather than confined to #hero: this is what
   lets the object stay on screen (hovering, screen-fixed) as the page
   scrolls from the hero into the manifesto section on desktop. It fades
   out via JS opacity once manifesto has scrolled past (see core.js). */
#hero-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }
#hero::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(6,11,8,.96) 0%, rgba(6,11,8,.86) 38%, rgba(6,11,8,.34) 62%, rgba(6,11,8,0) 78%),
    linear-gradient(to top, rgba(6,11,8,.88) 0%, rgba(6,11,8,0) 42%);
}
/* Narrow screens stack to one column, so the object sits above the copy
   rather than beside it. The scrim stays heavy over the text band at the
   bottom and lifts sharply over the upper band, otherwise the object is
   buried behind it and barely reads. */
@media(max-width:800px){
  #hero::after{
    background:linear-gradient(to top,
      rgba(6,11,8,.97) 34%,
      rgba(6,11,8,.9) 62%,
      rgba(6,11,8,.15) 88%,
      rgba(6,11,8,.05) 100%);
  }
}
.hero-inner{ position:relative; z-index:2; width:100%; padding-top:132px; }
.hero-h1{ max-width:13ch; color:var(--white); }
.hero-h1 em{ font-style:normal; color:var(--green); }
.hero-lead{ margin:28px 0 42px; max-width:50ch; color:var(--mint); font-size:clamp(1.02rem,1.4vw,1.15rem); line-height:1.62; }
.hero-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }

.scroll-cue{
  position:absolute; right:var(--gut); bottom:clamp(56px,8vh,96px); z-index:2;
  display:none; flex-direction:column; align-items:center; gap:12px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(207,224,216,.4);
}
@media(min-width:1180px){ .scroll-cue{ display:flex; } }
.scroll-cue .bar{ width:1px; height:52px; background:linear-gradient(to bottom, rgba(62,254,29,.9), transparent); }

/* ============================================================
   MANIFESTO
   ============================================================ */
/* Opaque on purpose: the hero's 3D object hovers on top of this section
   (fixed canvas, see #hero-canvas), so the section behind it stays a solid,
   fully legible ground rather than a translucent overlay. */
#manifesto{ background:var(--white); }
/* Keeps the section's own text above the object where they might overlap. */
#manifesto .shell{ position:relative; z-index:2; }
.man-grid{ display:grid; gap:clamp(44px,6vw,84px); align-items:center; }
@media(min-width:960px){ .man-grid{ grid-template-columns:1.12fr .88fr; } }
.man-quote{ margin-top:24px; font-size:clamp(1.5rem,2.7vw,2.1rem); font-family:var(--display); font-weight:500; letter-spacing:-.032em; line-height:1.2; max-width:19ch; }
.man-quote b{ font-weight:500; color:var(--fir); }
.man-body{ margin-top:26px; }

/* ============================================================
   CAPABILITIES — editorial rows, not cards
   ============================================================ */
#capabilities{ background:var(--white); padding-top:0; }
.cap-intro{ margin-top:22px; }
.cap-list{ margin-top:clamp(48px,6vw,76px); border-top:1px solid var(--line-light); }
.cap{
  position:relative; display:grid; gap:14px 48px;
  padding:clamp(34px,4vw,52px) 0; border-bottom:1px solid var(--line-light);
  align-items:start;
}
@media(min-width:920px){ .cap{ grid-template-columns:62px 1.02fr 1fr 128px; gap:0 44px; } }
.cap::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--green); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s var(--ease);
}
.cap:hover::before{ transform:scaleX(1); }
.cap-n{ font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; color:var(--grey); padding-top:7px; }
.cap-title h3{ font-size:clamp(1.3rem,2.1vw,1.7rem); letter-spacing:-.032em; }
.cap-title .sub{
  margin-top:10px; font-family:var(--mono); font-size:.665rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--fir);
}
.cap-body{ color:var(--grey); font-size:1rem; line-height:1.68; }
.cap-viz{ display:flex; align-items:center; justify-content:flex-start; }
@media(min-width:920px){ .cap-viz{ justify-content:flex-end; } }
.cap-viz svg{ width:118px; height:80px; overflow:visible; }
.cap-viz .st{ stroke:#B4B4AE; stroke-width:1.2; fill:none; transition:stroke .45s var(--ease); }
.cap-viz .fl{ fill:#C6C6C0; transition:fill .45s var(--ease); }
.cap-viz .ac{ fill:var(--green); }
.cap:hover .cap-viz .st{ stroke:var(--fir); }
.cap:hover .cap-viz .fl{ fill:var(--fir); }
.cap-viz .dash{ stroke-dasharray:4 4; animation:march 1.5s linear infinite; animation-play-state:paused; }
.cap:hover .cap-viz .dash{ animation-play-state:running; }
@keyframes march{ to{ stroke-dashoffset:-16; } }

/* ============================================================
   WHY — dark
   ============================================================ */
#why{ background:var(--fir-deep); color:var(--white); }
#why::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.55;
  background-image:linear-gradient(rgba(207,224,216,.055) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(207,224,216,.055) 1px, transparent 1px);
  background-size:88px 88px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 40%, #000 0%, transparent 100%);
  mask-image:radial-gradient(ellipse 78% 62% at 50% 40%, #000 0%, transparent 100%);
}
#why .shell{ position:relative; z-index:1; }
.why-grid{ margin-top:clamp(48px,6vw,76px); display:grid; gap:0; }
@media(min-width:720px){ .why-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1060px){ .why-grid{ grid-template-columns:repeat(3,1fr); } }
.why-item{ position:relative; padding:32px 36px 34px 0; border-top:1px solid var(--line-dark); }
.why-item::after{
  content:''; position:absolute; left:0; top:-1px; height:1px; width:100%;
  background:var(--green); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .6s var(--ease);
}
.why-item:hover::after{ transform:scaleX(1); }
.why-k{ font-family:var(--display); font-size:2.25rem; font-weight:600; letter-spacing:-.04em; color:var(--white); font-variant-numeric:tabular-nums; line-height:1; }
.why-k .u{ color:var(--green); font-size:1.3rem; margin-left:3px; letter-spacing:-.02em; }
.why-item h3{ font-size:1.02rem; margin:16px 0 8px; letter-spacing:-.02em; }
.why-item p{ color:rgba(207,224,216,.62); font-size:.94rem; line-height:1.62; max-width:34ch; }

/* ============================================================
   CASES
   ============================================================ */
#cases{ background:var(--white); }
.case-list{ margin-top:clamp(48px,6vw,76px); border-top:1px solid var(--line-light); }
.case{
  position:relative; display:grid; gap:16px 48px; align-items:start;
  padding:clamp(34px,4vw,50px) 0; border-bottom:1px solid var(--line-light);
  transition:padding-left .55s var(--ease);
}
@media(min-width:920px){
  .case{ grid-template-columns:200px 1fr 164px; gap:0 44px; }
  .case:hover{ padding-left:20px; }
}
.case::before{
  content:''; position:absolute; left:0; top:-1px; height:1px; width:100%;
  background:var(--green); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .7s var(--ease);
}
.case:hover::before{ transform:scaleX(1); }
.case-client{ font-family:var(--mono); font-size:.665rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fir); padding-top:7px; }
.case h3{ font-size:clamp(1.26rem,2vw,1.6rem); letter-spacing:-.03em; max-width:22ch; }
.case p{ margin-top:12px; color:var(--grey); font-size:.985rem; line-height:1.66; max-width:58ch; }
.tags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
.tag{
  font-family:var(--mono); font-size:.615rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fir); background:var(--grey-fill); padding:6px 11px;
}
.case-go{ display:flex; align-items:center; gap:9px; font-size:.86rem; font-weight:500; color:var(--fir); padding-top:7px; }
@media(min-width:920px){ .case-go{ justify-content:flex-end; } }
.case-go .arw{ transition:transform .38s var(--ease); }
.case:hover .case-go .arw{ transform:translateX(6px); }
.cases-more{ margin-top:40px; }