:root { --ink:#192943; --muted:#627087; --accent:#6856c7; --line:#e2e7f0; }
* { box-sizing:border-box; }
body { margin:0; background:#f3f5f9; color:var(--ink); font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
.page-shell { min-height:100dvh; padding:32px 0 20px; }
.content-wrapper { max-width:1280px; margin:auto; padding:0 24px; }
.hero { display:flex; align-items:center; justify-content:space-between; gap:32px; padding:0 0 24px; margin-bottom:24px; border-bottom:1px solid #dce2ed; }
.hero-text { max-width:740px; }
.eyebrow { display:flex; align-items:center; flex-wrap:wrap; gap:9px; color:var(--accent); font-size:12px; font-weight:600; margin-bottom:14px; }
.eyebrow-icon { display:grid; place-items:center; width:28px; height:28px; background:#eae6f9; border-radius:8px; }
.eyebrow-sep { width:3px; height:3px; background:#9b92b9; border-radius:50%; }
.eyebrow-muted { color:var(--muted); font-weight:500; }
.hero-title { font-size:clamp(25px,2.5vw,34px); font-weight:750; line-height:1.25; letter-spacing:-.7px; margin:0 0 12px; }
.text-gradient { color:var(--accent); }
.hero-subtitle { color:var(--muted); font-size:14px; line-height:1.7; margin:0; max-width:640px; }
.hero-action { flex-shrink:0; }
.btn-primary-custom { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:42px; padding:10px 18px; border-radius:12px; background:linear-gradient(120deg,#6050d6,#557ce2); color:white; text-decoration:none; font-size:13px; font-weight:600; box-shadow:0 4px 12px #6050d61a; }
.btn-primary-custom:hover { color:white; filter:brightness(.96); }
.btn-primary-custom.disabled { opacity:.7; pointer-events:none; }
.glass-card { --card-accent:#a498d9; height:100%; padding:22px; border:1px solid var(--line); border-left:3px solid var(--card-accent); border-bottom:3px solid var(--card-accent); border-radius:18px; background:white; box-shadow:0 5px 18px #22345104; }
.about-grid > :nth-child(2) .glass-card { --card-accent:#8db8d2; }
.about-grid > :nth-child(3) .glass-card { --card-accent:#8cb89d; }
.section-header { display:flex; align-items:center; gap:10px; padding-bottom:15px; margin-bottom:16px; border-bottom:1px solid #edf0f5; }
.section-icon { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:10px; background:#f0edfa; color:#7462b4; font-size:15px; }
.about-grid > :nth-child(2) .section-icon { background:#eef6fa; color:#5486a2; }
.about-grid > :nth-child(3) .section-icon { background:#eef7f1; color:#58856a; }
.section-title { margin:0; font-size:17px; font-weight:700; }
.card-text { font-size:13px; line-height:1.8; margin-bottom:14px; color:#526078; }
.card-text strong { font-weight:600; color:var(--ink); }
.value-chips { display:flex; flex-wrap:wrap; gap:7px; list-style:none; padding:0; margin:18px 0; }
.value-chip { display:flex; gap:6px; align-items:center; font-size:11px; color:#665686; padding:5px 8px; border-radius:7px; background:#f5f2fb; }
.mission-box { padding:14px; border-radius:10px; background:#f7f5fc; }
.mission-label { font-size:12px; font-weight:600; color:#77658c; margin-bottom:6px; }
.mission-text { margin:0; color:#47536c; font-size:13px; line-height:1.7; }
.tile-list { list-style:none; padding:0; margin:0; }
.glass-tile { display:flex; align-items:flex-start; gap:11px; padding:14px 0; border-bottom:1px solid #edf0f5; }
.glass-tile:last-child { border-bottom:0; padding-bottom:0; }
.tile-icon { display:grid; place-items:center; flex-shrink:0; width:30px; height:30px; border-radius:8px; background:#f0f6fa; color:#6590a8; font-size:13px; }
.tile-title { font-size:13px; line-height:1.5; font-weight:600; margin:0 0 4px; }
.tile-desc { font-size:12px; line-height:1.7; color:var(--muted); margin:0; }
.member { align-items:center; padding:15px 0; }
.avatar-btn { position:relative; width:52px; height:52px; flex-shrink:0; border:2px solid #e4ede7; padding:0; border-radius:14px; overflow:hidden; background:#edf5ef; cursor:zoom-in; }
.avatar-img { display:block; width:100%; height:100%; object-fit:cover; }
.avatar-btn { transition:transform .2s ease,box-shadow .2s ease; }
@media(hover:hover) and (pointer:fine) {
 .avatar-btn:not(.is-fallback):hover { transform:scale(1.08); box-shadow:0 4px 12px #26345120; }
}
.avatar-zoom { position:absolute; bottom:0; right:0; color:white; background:#35455e; width:18px; height:18px; font-size:9px; border-radius:5px 0 0 0; }
.avatar-fallback { display:none; font-size:16px; color:#608169; font-weight:600; }
.is-fallback .avatar-img,.is-fallback .avatar-zoom { display:none; }
.is-fallback .avatar-fallback { display:inline; }
.is-fallback { cursor:default; }
.member-info { min-width:0; }
.member-name { font-size:14px; font-weight:600; margin:0 0 3px; }
.role-pill { color:var(--muted); font-size:12px; }
.member-phone { display:inline-flex; gap:7px; align-items:center; color:#536b85; font-size:12px; text-decoration:none; margin-top:6px; }
.member-phone:hover { text-decoration:underline; }
.member-deco { display:none; }
.note-box { display:flex; align-items:flex-start; gap:9px; padding:12px; margin-top:20px; border-radius:10px; background:#f2f8f4; color:#5c7664; font-size:12px; line-height:1.7; }
.note-box i { margin-top:4px; }
.page-footer { text-align:center; color:#778296; font-size:11px; margin-top:22px; }
.photo-modal .modal-dialog { width:calc(100% - 32px); max-width:430px; margin:16px auto; min-height:calc(100% - 32px); }
.photo-modal-content { position:relative; display:block; max-height:calc(100dvh - 32px); overflow:auto; border:0; border-radius:18px; background:#fff; }
.modern-close-btn { position:absolute; z-index:2; top:12px; right:12px; width:36px; height:36px; border-radius:50%; border:1px solid #e2e7f0; background:#fff; color:#3f4d63; }
.photo-frame { padding:56px 16px 0; text-align:center; }
.photo-frame img { display:block; width:auto; height:auto; max-width:100%; max-height:min(58dvh,calc(100dvh - 190px)); margin:0 auto; border-radius:12px; object-fit:contain; }
.photo-caption { padding:14px 16px 18px; text-align:center; }
.photo-caption h4 { font-size:18px; margin:0 0 5px; }
.photo-role { color:var(--muted); font-size:13px; }
a:focus-visible,button:focus-visible { outline:3px solid #a499db; outline-offset:3px; }
@media(min-width:992px) and (max-height:800px) { .page-shell { padding-top:20px; } .hero { padding-bottom:18px; margin-bottom:18px; } .glass-card { padding:18px; } }
@media(max-width:991px) { .hero { align-items:flex-start; gap:20px; } .hero-title { font-size:28px; } .hero-action { align-self:flex-end; } .member-list { display:flex; gap:24px; flex-wrap:wrap; } .member-list .member { flex:1; min-width:220px; border:0; } }
@media(max-width:767px) { .page-shell { padding-top:20px; } .content-wrapper { padding:0 16px; } .hero { flex-direction:column; gap:16px; } .hero-action { align-self:flex-start; } .hero-title { font-size:26px; } .glass-card { padding:18px; } .member-list { display:block; } .member-list .member { min-width:0; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } .avatar-btn:not(.is-fallback):hover { transform:none; } }