/* ================================================================
   WEBCRAFT — css/about.css
   About page styles
   ================================================================ */

.about-split  { display:grid; grid-template-columns:1fr 1fr; gap:68px; align-items:center; margin-top:52px }
.about-vis    { position:relative; padding:20px 20px 24px }
.about-img    {
  border-radius:var(--r4); aspect-ratio:4/3;
  background:linear-gradient(135deg,#0A1020 0%,#0C1A0C 50%,#0A1020 100%);
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  font-size:5.5rem; position:relative; overflow:hidden;
}
.about-img::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 60% 60% at 30% 40%,rgba(200,255,87,.08) 0%,transparent 65%),
    radial-gradient(ellipse 50% 50% at 70% 70%,rgba(74,124,255,.06) 0%,transparent 60%);
}
.about-img::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:40px 40px;
}
.about-badge  {
  position:absolute; bottom:-16px; right:-16px; background:var(--s2); border:1px solid var(--border2);
  border-radius:var(--r2); padding:12px 18px; box-shadow:0 8px 32px rgba(0,0,0,.4);
}
.about-bn     { font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:800; color:var(--accent); letter-spacing:-.03em }
.about-bl     { font-size:.72rem; color:var(--muted) }
.about-txt .label { margin-bottom:14px }
.about-txt h2 { margin-bottom:18px }
.about-txt p  { color:var(--muted); margin-bottom:14px; font-weight:300; line-height:1.7 }

/* ── Values ──────────────────────────────────────────────────── */
.val-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:48px }
.vc         {
  background:var(--s1); border:1px solid var(--border); border-radius:var(--r3); padding:26px;
  transition:all var(--t) var(--ease); position:relative; overflow:hidden;
}
.vc::after  {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 80% at 50% 0%,var(--glow),transparent 70%);
  opacity:0; transition:opacity var(--t) var(--ease);
}
.vc:hover   { border-color:rgba(200,255,87,.25); transform:translateY(-3px) }
.vc:hover::after { opacity:1 }
.vi         { font-size:1.6rem; margin-bottom:12px; position:relative; z-index:1 }
.vc h4      { font-size:.95rem; margin-bottom:7px; position:relative; z-index:1 }
.vc p       { font-size:.84rem; color:var(--muted); line-height:1.6; position:relative; z-index:1 }

/* ── Tools ───────────────────────────────────────────────────── */
.tools-grid        { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:48px }
.tool-card         { text-align:center }
.tool-avi          {
  border-radius:var(--r3); aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  font-size:2.8rem; margin-bottom:14px; border:1px solid var(--border);
  transition:all var(--t) var(--ease); position:relative; overflow:hidden;
}
.tool-avi::after   {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,var(--glow),transparent 70%);
  opacity:0; transition:opacity var(--t) var(--ease);
}
.tool-card:hover .tool-avi { transform:scale(1.05) translateY(-3px); border-color:rgba(200,255,87,.3); box-shadow:0 12px 32px rgba(0,0,0,.3) }
.tool-card:hover .tool-avi::after { opacity:1 }
.tool-name         { font-weight:700; font-size:.9rem; margin-bottom:3px }
.tool-role         { font-size:.77rem; color:var(--accent) }

/* ── Manifesto strip ──────────────────────────────────────── */
.manifesto       {
  padding:56px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  text-align:center; position:relative; overflow:hidden;
}
.manifesto::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%,rgba(200,255,87,.04),transparent 70%);
  pointer-events:none;
}
.manifesto-inner { position:relative; z-index:1 }
.manifesto-quote {
  font-family:'Syne',sans-serif; font-size:clamp(1.5rem,3.5vw,2.6rem); font-weight:800;
  letter-spacing:-.03em; line-height:1.15; max-width:680px; margin:0 auto;
}
.manifesto-quote em {
  font-style:normal;
  background:linear-gradient(130deg,var(--accent) 0%,#7FB5FF 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.manifesto-sub {
  margin-top:18px; color:var(--muted); font-size:.9375rem; font-weight:300; max-width:420px; margin:18px auto 0;
}

/* ── Additional stat badge ────────────────────────────────── */
.about-badge2 {
  position:absolute; top:-16px; left:-16px; background:var(--s2); border:1px solid var(--border2);
  border-radius:var(--r2); padding:12px 18px; box-shadow:0 8px 32px rgba(0,0,0,.4);
}

/* ── Editorial values ─────────────────────────────────────── */
.val-list         { display:flex; flex-direction:column; gap:0; margin-top:52px }
.val-row          {
  display:grid; grid-template-columns:80px 1fr; gap:28px; align-items:start;
  padding:32px 0; border-bottom:1px solid var(--border);
  transition:background var(--t) var(--ease);
}
.val-row:last-child { border-bottom:none }
.val-row:hover    { background:rgba(255,255,255,.01) }
.val-num          {
  font-family:'Syne',sans-serif; font-size:clamp(2.5rem,5vw,4rem); font-weight:800;
  color:transparent; -webkit-text-stroke:1px rgba(200,255,87,.2); line-height:1;
  user-select:none;
  transition:-webkit-text-stroke .3s var(--ease);
}
.val-row:hover .val-num { -webkit-text-stroke:1px rgba(200,255,87,.5) }
.val-body h4      { font-size:1.05rem; margin-bottom:8px; padding-top:4px }
.val-body p       { color:var(--muted); font-size:.9rem; line-height:1.65 }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width:1024px) {
  .tools-grid  { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px) {
  .about-split { grid-template-columns:1fr; gap:40px }
  .val-grid    { grid-template-columns:1fr }
  .val-row     { grid-template-columns:56px 1fr; gap:18px }
  .val-num     { font-size:2.2rem }
  .manifesto-quote { font-size:clamp(1.3rem,5vw,1.8rem) }
}
@media (max-width:480px) {
  .val-grid   { grid-template-columns:1fr }
  .tools-grid { grid-template-columns:repeat(2,1fr) }
  .val-row    { grid-template-columns:1fr; gap:6px; padding:24px 0 }
  .val-num    { font-size:1rem; -webkit-text-stroke:1px rgba(200,255,87,.35); line-height:1.4 }
}