/* Devint - sobre page styles (shared rules are in ../common.css) */

.pagehero .herogrid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.heroimg{border-radius:20px;overflow:hidden;box-shadow:0 24px 60px -24px rgba(1,28,76,.18);aspect-ratio:4/5}
@media (max-width:960px){.pagehero .herogrid{grid-template-columns:1fr;gap:28px}}
@media (max-width:640px){.heroimg{aspect-ratio:1/1}}
.origem{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-top:8px}
.origem .story p{font-size:15px;line-height:1.8;color:#3E4046;margin-top:16px}
.origem .story p b{color:var(--navy)}
.origem .story a{color:var(--acc);font-weight:700}
@media (min-width:961px){
  .origem .story{order:2}
  .origem .ocard{order:1}
}
.socgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.soccard{overflow:hidden;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.soccard:hover{transform:translateY(-3px);box-shadow:0 18px 44px -18px rgba(1,28,76,.16)}
.soccard .socphoto{width:100%;aspect-ratio:1/1;overflow:hidden}
.soccard .soctext{padding:20px 22px}
.socname{font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.socrole{font-size:13px;color:var(--muted);margin-top:4px}
@media (max-width:960px){
  .socgrid{grid-template-columns:1fr}
  .soccard{flex-direction:row;align-items:center;gap:16px;padding:16px}
  .soccard .socphoto{width:64px;height:64px;flex-shrink:0;border-radius:12px}
  .soccard .soctext{padding:0}
}
.ocard{position:relative;overflow:hidden;background:radial-gradient(420px 300px at 82% 0%, rgba(47,220,201,.20), transparent 60%),radial-gradient(360px 280px at 10% 100%, rgba(232,163,220,.14), transparent 60%),var(--navy);border:1px solid var(--navybdr);border-radius:20px;padding:42px 40px;color:#fff}
.ocard::after{content:"";position:absolute;right:-70px;bottom:-90px;width:240px;height:280px;background:url("../../img/hex-stroke.svg") no-repeat center/contain;filter:invert(1);opacity:.14;pointer-events:none}
.ocard .obig{font-size:46px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.ocard .osub{font-size:15px;font-weight:700;color:#8FA2C9;margin-top:6px}
.ocard ul{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:13px;position:relative;z-index:1}
.ocard li{display:flex;gap:11px;font-size:13.5px;line-height:1.55;color:#D7E0F2}
.ocard li::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--teal);flex-shrink:0;margin-top:7px}
.lgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:8px}
.lcard{padding:28px;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.lcard:hover{transform:translateY(-3px);box-shadow:0 18px 44px -18px rgba(1,28,76,.16)}
.lcard .ic{width:44px;height:44px;border-radius:12px;margin-bottom:16px}
.lcard .ic svg{width:20px;height:20px}
.lcard h3{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.lcard p{font-size:13.5px;color:#5A5D66;line-height:1.68;margin-top:9px}
.tline{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:8px;counter-reset:tstep}
.tstep{position:relative;padding:28px 26px 26px}
.tstep::before{counter-increment:tstep;content:"0" counter(tstep);display:inline-flex;font-size:12px;font-weight:800;letter-spacing:.08em;color:#0B8A7C;background:rgba(47,220,201,.12);border-radius:999px;padding:4px 12px;margin-bottom:16px}
.tstep h3{font-size:16px;font-weight:800;color:var(--navy)}
.tstep p{font-size:13.5px;color:#5A5D66;line-height:1.68;margin-top:9px}
.tstep:not(:last-child)::after{content:"";position:absolute;top:50%;right:-13px;width:10px;height:10px;border-top:2px solid #C6CAD3;border-right:2px solid #C6CAD3;transform:translateY(-50%) rotate(45deg);z-index:1}
.quote{background:#fff;border:1px solid #E4E6EB;border-radius:20px;padding:48px 52px;margin-top:8px;box-shadow:0 10px 30px rgba(1,28,76,.05);text-align:center}
.quote blockquote{font-size:clamp(1.3rem,2.4vw,1.75rem);font-weight:800;letter-spacing:-.02em;line-height:1.35;color:var(--navy);max-width:34ch;margin:0 auto}
.quote blockquote em{font-style:normal;background:linear-gradient(90deg,var(--acc),#0B8A7C);-webkit-background-clip:text;background-clip:text;color:transparent}
.quote figcaption{font-size:13px;font-weight:700;color:var(--muted);margin-top:18px}
@media (max-width:960px){
  .origem{grid-template-columns:1fr;gap:28px}
  .lgrid,.tline{grid-template-columns:1fr}
  .tstep:not(:last-child)::after{top:auto;right:auto;bottom:-13px;left:50%;transform:translateX(-50%) rotate(135deg)}
  .quote{padding:34px 26px}
}