/* About page + brief home About teaser (preview). */
.about-page .svc-hero{padding:128px 0 56px}
.about-jump{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;max-width:100%}
.about-jump a{font-size:12px;font-weight:700;color:#e2e8f0;text-decoration:none;padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06)}
.about-jump a:hover{border-color:rgba(103,232,249,.6);color:#a5f3fc}

.about-main{background:#f6f7fb;color:#0f172a;padding:64px 0 80px}
.about-main .w{max-width:1100px}
.about-block{margin:0 0 64px}
.about-block h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.04em;margin:0 0 16px;line-height:1.2}
.about-block .lead,.about-intro{font-size:17px;line-height:1.7;color:#334155;max-width:760px;margin:0 0 22px}
.about-note{font-size:13px;color:#64748b;margin:14px 0 0;max-width:720px}

.about-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.about-fact{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:22px;min-width:0}
.about-fact h3{font-size:18px;letter-spacing:-.02em;margin:0 0 8px}
.about-fact p{margin:0;font-size:14.5px;line-height:1.65;color:#475569}

.about-badges{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.about-badges li{list-style:none;font-size:14px;font-weight:650;color:#0f172a;padding:10px 14px;border-radius:999px;border:1px solid #ddd6fe;background:#fff;box-shadow:0 1px 0 rgba(124,58,237,.06);max-width:100%;overflow-wrap:anywhere}

.about-mission{background:radial-gradient(circle at 85% 0,rgba(124,58,237,.35),transparent 45%),radial-gradient(circle at 0 100%,rgba(34,211,238,.18),transparent 45%),#0b1026;color:#fff;border-radius:28px;padding:42px 40px;margin:0 0 64px}
.about-mission .k{color:#67e8f9;margin-bottom:12px}
.about-mission h2{color:#fff;margin:0 0 14px}
.about-mission p{margin:0;font-size:20px;line-height:1.55;color:#e2e8f0;max-width:800px;letter-spacing:-.02em}
.about-mission .sub{margin-top:16px;font-size:15px;color:#cbd5e1;line-height:1.7}

.founder{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:40px;align-items:center}
.founder-copy h3{font-size:clamp(24px,3vw,32px);letter-spacing:-.03em;margin:0 0 6px}
.founder-copy .roles{font-size:14px;font-weight:650;color:#6d28d9;margin:0 0 14px}
.founder-copy p{font-size:15.5px;line-height:1.7;color:#334155;margin:0 0 12px}

/* Cutout portrait over the Smart Learning gradient + monogram pattern.
   overflow stays visible so the bust and glow can sit in front of the circle. */
.founder-frame{position:relative;width:100%;max-width:320px;aspect-ratio:1;margin:0 auto;border-radius:50%;
  background:
    url(/about/assets/founder-pattern.svg) center / 72% no-repeat,
    radial-gradient(circle at 28% 22%,rgba(255,255,255,.34),transparent 44%),
    radial-gradient(circle at 80% 80%,rgba(236,72,153,.28),transparent 46%),
    linear-gradient(135deg,#22d3ee 0%,#7c3aed 55%,#ec4899 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.28),
    0 22px 48px -16px rgba(76,29,149,.55),
    0 0 42px -8px rgba(34,211,238,.35);
  overflow:visible}
.founder-frame::before{content:"";position:absolute;inset:-18%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 55%,rgba(124,58,237,.22),transparent 68%);
  filter:blur(8px)}
.founder-frame::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:0;pointer-events:none;
  box-shadow:inset 0 0 36px rgba(11,16,38,.18), inset 0 0 0 3px rgba(255,255,255,.38)}
.founder-frame picture{position:absolute;inset:0;z-index:2;display:block;pointer-events:none}
.founder-photo{position:absolute;left:50%;bottom:-2%;width:108%;height:108%;max-width:none;
  transform:translateX(-50%);object-fit:contain;object-position:center bottom;
  filter:drop-shadow(0 16px 20px rgba(11,16,38,.38)) drop-shadow(0 0 18px rgba(124,58,237,.28));
  z-index:2}
.founder-photo.is-missing{opacity:0}
.founder-mono{position:absolute;inset:0;display:grid;place-items:center;z-index:1;font-weight:800;font-size:72px;letter-spacing:-2px;
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.7));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;opacity:.9}
.founder-frame:has(.founder-photo:not(.is-missing)) .founder-mono{opacity:0}
.founder-caption{display:block;text-align:center;margin:12px 0 0;font-size:12px;color:#64748b}
.founder-frame:has(.founder-photo:not(.is-missing)) + .founder-caption{display:none}

.about-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.about-work a{text-decoration:none;color:inherit;background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:22px;display:block;min-width:0;transition:border-color .2s,transform .2s}
.about-work a:hover{border-color:#c4b5fd;transform:translateY(-2px)}
.about-work h3{margin:0 0 8px;font-size:18px;letter-spacing:-.02em}
.about-work p{margin:0;font-size:14.5px;line-height:1.65;color:#475569}
.about-work .more{display:inline-block;margin-top:12px;color:#6d28d9;font-size:13px;font-weight:750}

.about-empty{background:#fff;border:1px dashed #c4b5fd;border-radius:18px;padding:22px 24px}
.about-empty p{margin:0;color:#475569;font-size:15px;line-height:1.7}
.about-empty a{color:#6d28d9;font-weight:650}

/* Home teaser: keep brief, point to the full page */
.about-teaser-enter{margin-top:22px}
.about-teaser-enter .btn{margin:0}

@media(max-width:900px){
  .founder,.about-work{grid-template-columns:minmax(0,1fr)}
  .about-mission{padding:32px 24px;border-radius:22px}
}
@media(max-width:700px){
  .about-facts{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:520px){
  .about-page .svc-hero,.about-main,.about-facts,.about-fact,.about-work,.founder,.about-mission,.about-jump,.about-badges{min-width:0;max-width:100%;box-sizing:border-box}
  .about-block h2,.about-fact h3,.about-badges li,.founder-copy h3{overflow-wrap:anywhere}
  .about-main{padding:48px 0 64px}
  .founder-mono{font-size:56px}
}
@media(prefers-reduced-motion:reduce){
  .about-work a{transition:none}
}