/* ============================================================
   Kronisys — about.css (v4)
   Editorial cover hero (rule + kicker, vertical colophon),
   ghost chapter numerals, mono domain tag lines, circled value
   indices, '+' spec sheets, CTA radial glow.
   Layered on css/global.css
   ============================================================ */

/* hero image — multi-format so whichever export exists renders */
.hero{--hero-img:url("../assets/heroes/hero-about.webp"),url("../assets/heroes/hero-about.jpg"),url("../assets/heroes/hero-about.png")}

/* ===== hero — the brand mark, monumental: the /// from the wordmark ===== */
.hero-flex{display:flex;align-items:center;justify-content:space-between;gap:clamp(32px,5vw,72px)}
.about-slashes{width:clamp(170px,19vw,250px);height:auto;flex-shrink:0;filter:drop-shadow(0 18px 48px rgba(0,151,237,.28))}
.about-slashes .sl{opacity:0;animation:slIn .9s var(--ease) forwards,slFloat 9s ease-in-out infinite alternate}
.about-slashes .sl1{animation-delay:.35s,1.3s}
.about-slashes .sl2{animation-delay:.5s,1.8s;fill-opacity:.55}
.about-slashes .sl3{animation-delay:.65s,2.3s;fill-opacity:.24}
@keyframes slIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes slFloat{from{transform:translateY(0)}to{transform:translateY(-7px)}}

/* ===== how we think — faint chapter numeral, columns slide in from both sides ===== */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:clamp(36px,5vh,56px)}
.cols2 p+p{margin-top:0}

/* ===== core domains — oversized ghost numerals top-right of each cell,
   tag lists as a single mono line joined with slashes ===== */
.domains>div{position:relative}
.dom-num{position:absolute;top:clamp(18px,2.4vw,26px);right:clamp(18px,2.6vw,30px);font-size:clamp(64px,7.5vw,96px);line-height:1;letter-spacing:-.045em;-webkit-text-stroke-color:rgba(255,255,255,.09);transition:-webkit-text-stroke-color .45s var(--ease)}
.domains>div:hover .dom-num{-webkit-text-stroke-color:rgba(0,151,237,.32)}
.domains h3{margin:0 0 10px;padding-right:clamp(64px,9vw,110px)}
.domains .dom-tags{margin-top:20px;font-family:var(--f);font-size:12.5px;font-weight:500;letter-spacing:.2px;line-height:2;color:var(--w3);transition:color .35s var(--ease)}
.domains>div:hover .dom-tags{color:var(--w2)}

/* ===== values — sticky heading left, cascading rows with circled indices ===== */
.values-left{margin-bottom:0}
.vrow{display:grid;grid-template-columns:44px 1fr;gap:clamp(14px,2vw,24px);align-items:start;padding:26px 0;border-bottom:1px solid var(--ltb)}
.vrow:first-child{border-top:1px solid var(--ltb)}
.vnum{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:1px solid rgba(0,151,237,.4);font-family:var(--f);font-size:11px;font-weight:600;letter-spacing:.2px;color:var(--cd);margin-top:2px;transition:border-color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.vrow:hover .vnum{border-color:rgba(0,151,237,.75);background:rgba(0,151,237,.07);box-shadow:0 0 0 4px rgba(0,151,237,.07)}
.vrow h3{font-size:clamp(17px,1.9vw,22px);font-weight:700;letter-spacing:-.5px;line-height:1.2}
.vrow p{margin-top:8px;font-size:14.5px;line-height:1.65;color:var(--ltt2);max-width:560px}

/* ===== specializations — compact '+'-prefixed spec sheets,
   two columns whenever the cell is wide enough ===== */
.spec-grid h3{margin-top:0}
.spec-grid>div{container-type:inline-size}
.spec-list{list-style:none;margin-top:20px;display:grid;grid-template-columns:1fr;gap:9px 18px}
.spec-list li{position:relative;padding-left:17px;font-size:13px;line-height:1.55;letter-spacing:-.1px;color:var(--w2);transition:color .25s var(--ease)}
.spec-list li::before{content:'+';position:absolute;left:0;top:0;font-family:var(--f);font-size:11px;font-weight:600;line-height:2;color:var(--c)}
.spec-list li:hover{color:var(--w)}
@container (min-width:340px){
  .spec-list{grid-template-columns:1fr 1fr}
}

/* ===== cta — soft radial glow centered behind the heading ===== */
.cta .wrap{position:relative}
.cta .wrap::before{content:'';position:absolute;left:50%;top:46%;width:min(760px,92%);height:min(460px,86%);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(0,151,237,.08),rgba(0,151,237,0) 72%);pointer-events:none}

/* ===== responsive ===== */
@media(min-width:960px){
  .values-left{position:sticky;top:110px}
}
@media(max-width:768px){
  .about-slashes{display:none}
  .cols2{grid-template-columns:1fr;gap:18px}
  .dom-num{font-size:56px;top:16px;right:16px}
  .domains h3{padding-right:64px}
  .vrow{grid-template-columns:40px 1fr;padding:22px 0}
  .vrow p{font-size:14px}
}



@media(prefers-reduced-motion:reduce){
  .about-slashes .sl{opacity:1;animation:none}
  .about-slashes .sl2{opacity:1}
  .about-slashes .sl3{opacity:1}
}