/* Final visual polish for /o-nama. Structure and copy intentionally unchanged. */
.phase3-about{
  --about-radius:14px;
  --about-border:rgba(24,48,91,.13);
  --about-shadow:0 22px 60px rgba(20,38,72,.08);
}

.phase3-about .page-hero{
  padding-top:clamp(58px,7vw,92px);
  padding-bottom:clamp(68px,7.5vw,104px);
  background:
    radial-gradient(circle at 82% 20%,rgba(49,94,251,.08),transparent 28%),
    linear-gradient(145deg,#f7f9fc 0%,#f3f6fb 100%);
}
.phase3-about .page-hero .h1{
  max-width:980px;
  line-height:.98;
  letter-spacing:-.05em;
  margin-bottom:24px;
}
.phase3-about .page-hero .lede{
  max-width:760px;
  line-height:1.68;
}

.phase3-about > .section:first-of-type{
  padding-top:clamp(76px,8vw,112px);
  padding-bottom:clamp(76px,8vw,112px);
}
.phase3-about .phase3-about-intro{
  align-items:start;
  gap:clamp(44px,7vw,108px);
}
.phase3-about .phase3-about-intro .eyebrow{
  margin-bottom:14px;
}
.phase3-about .phase3-about-intro .mono{
  color:#50627f;
  letter-spacing:.12em;
}
.phase3-about .phase3-about-intro .big-quote{
  max-width:900px;
  line-height:1.01;
  letter-spacing:-.05em;
}
.phase3-about .phase3-about-intro .lede{
  max-width:760px;
  line-height:1.72;
}

.phase3-about .dark{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%,rgba(49,94,251,.10),transparent 28%),
    linear-gradient(180deg,#081426 0%,#0a1729 100%);
}
.phase3-about .dark::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background-image:
    linear-gradient(rgba(117,150,207,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(117,150,207,.14) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,transparent,black 16%,black 84%,transparent);
}
.phase3-about .dark .container{
  position:relative;
  z-index:1;
}
.phase3-about .phase3-about-rail{
  border-color:rgba(135,163,214,.28);
}
.phase3-about .phase3-about-principle{
  min-height:230px;
  padding:34px 30px;
  border-color:rgba(135,163,214,.24);
}
.phase3-about .phase3-about-principle>span{
  color:#87a4ff;
  letter-spacing:.11em;
}
.phase3-about .phase3-about-principle h2{
  line-height:1.08;
  letter-spacing:-.03em;
  margin-top:34px;
}
.phase3-about .phase3-about-principle p{
  color:rgba(224,232,246,.78);
  line-height:1.72;
}

.phase3-about .split{
  gap:clamp(48px,7vw,108px);
  align-items:start;
}
.phase3-about .split .h2{
  max-width:560px;
  line-height:1.05;
}
.phase3-about .split .kicker{
  font-size:clamp(23px,2.4vw,33px);
  line-height:1.35;
  letter-spacing:-.025em;
  color:#172033;
}
.phase3-about .split p:not(.kicker){
  color:#5f6e84;
  line-height:1.78;
}

.phase3-about .phase3-timeline{
  margin-top:clamp(52px,6vw,78px);
  border-top:1px solid var(--about-border);
}
.phase3-about .phase3-timeline article{
  position:relative;
  padding-top:32px;
  padding-bottom:28px;
}
.phase3-about .phase3-timeline article::before{
  content:"";
  position:absolute;
  top:-4px;
  left:0;
  width:8px;
  height:8px;
  border-radius:1px;
  background:#315efb;
  box-shadow:0 0 0 4px #edf2ff;
}
.phase3-about .phase3-timeline article>span{
  color:#5371ca;
  letter-spacing:.11em;
}
.phase3-about .phase3-timeline h3{
  line-height:1.18;
  letter-spacing:-.02em;
}
.phase3-about .phase3-timeline p{
  line-height:1.65;
}

.phase3-about .phase3-proof-band{
  position:relative;
  overflow:hidden;
  padding-top:clamp(76px,8vw,112px);
  padding-bottom:clamp(76px,8vw,112px);
  background:
    radial-gradient(circle at 78% 24%,rgba(49,94,251,.10),transparent 28%),
    linear-gradient(180deg,#071426 0%,#09172a 100%);
}
.phase3-about .phase3-proof-band::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.13;
  background-image:
    linear-gradient(rgba(117,150,207,.15) 1px,transparent 1px),
    linear-gradient(90deg,rgba(117,150,207,.15) 1px,transparent 1px);
  background-size:38px 38px;
}
.phase3-about .phase3-proof-grid{
  position:relative;
  z-index:1;
  gap:clamp(44px,7vw,96px);
}
.phase3-about .phase3-proof-grid .h2{
  line-height:1.04;
  letter-spacing:-.035em;
}
.phase3-about .phase3-proof-grid .kicker{
  max-width:520px;
  line-height:1.65;
}
.phase3-about .phase3-proof-products{
  gap:12px;
}
.phase3-about .phase3-proof-products a{
  min-height:112px;
  padding:22px 24px;
  border-radius:12px;
  border-color:rgba(128,157,214,.27);
  background:rgba(14,30,54,.82);
  transition:transform .28s ease,border-color .28s ease,background .28s ease,box-shadow .28s ease;
}
.phase3-about .phase3-proof-products a:hover,
.phase3-about .phase3-proof-products a:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(116,148,255,.62);
  background:rgba(18,38,68,.96);
  box-shadow:0 18px 44px rgba(0,0,0,.14);
}
.phase3-about .phase3-proof-products a strong{
  font-size:20px;
}

@media (max-width:900px){
  .phase3-about .phase3-about-intro,
  .phase3-about .split,
  .phase3-about .phase3-proof-grid{
    grid-template-columns:1fr;
  }
  .phase3-about .phase3-about-intro,
  .phase3-about .split,
  .phase3-about .phase3-proof-grid{
    gap:32px;
  }
}

@media (max-width:680px){
  .phase3-about .page-hero{
    padding-top:42px;
    padding-bottom:50px;
  }
  .phase3-about .page-hero .h1{
    font-size:clamp(2.05rem,10.2vw,2.7rem);
    line-height:1.01;
    letter-spacing:-.042em;
  }
  .phase3-about .page-hero .lede{
    font-size:16px;
    line-height:1.62;
  }
  .phase3-about > .section:first-of-type{
    padding-top:58px;
    padding-bottom:62px;
  }
  .phase3-about .phase3-about-intro{
    gap:28px;
  }
  .phase3-about .phase3-about-intro .big-quote{
    font-size:clamp(2rem,9.6vw,2.6rem);
    line-height:1.03;
    margin-bottom:18px;
  }
  .phase3-about .dark{
    padding-top:58px;
    padding-bottom:58px;
  }
  .phase3-about .phase3-about-rail{
    grid-template-columns:1fr;
    border-top:1px solid rgba(135,163,214,.28);
    border-bottom:1px solid rgba(135,163,214,.28);
  }
  .phase3-about .phase3-about-principle{
    min-height:auto;
    padding:26px 18px;
    border-right:0;
    border-bottom:1px solid rgba(135,163,214,.24);
  }
  .phase3-about .phase3-about-principle:last-child{
    border-bottom:0;
  }
  .phase3-about .phase3-about-principle h2{
    margin-top:20px;
    font-size:22px;
  }
  .phase3-about .split{
    gap:26px;
  }
  .phase3-about .split .kicker{
    font-size:21px;
    line-height:1.38;
  }
  .phase3-about .phase3-timeline{
    margin-top:42px;
  }
  .phase3-about .phase3-timeline article{
    padding-top:28px;
    padding-bottom:24px;
  }
  .phase3-about .phase3-proof-band{
    padding-top:60px;
    padding-bottom:62px;
  }
  .phase3-about .phase3-proof-grid{
    gap:30px;
  }
  .phase3-about .phase3-proof-products{
    grid-template-columns:1fr;
    gap:10px;
  }
  .phase3-about .phase3-proof-products a{
    min-height:92px;
    padding:20px;
  }
}

@media (prefers-reduced-motion:reduce){
  .phase3-about .phase3-proof-products a{
    transition:none!important;
    transform:none!important;
  }
}
