/* ============================================================
   SAYRU — about.css  (About page specific)
   ============================================================ */

/* hero */
.abhero__in { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 54px; align-items: center; padding: clamp(40px, 5vw, 76px) 32px clamp(56px, 6vw, 92px); }
.abhero__title { font-size: clamp(36px, 4.4vw, 58px); }
.abhero__stats { display: flex; gap: 36px; margin-top: 40px; flex-wrap: wrap; }
.abhero__stat { display: flex; flex-direction: column; gap: 4px; }
.abhero__stat-v { font-family: var(--font-display); font-weight: 800; font-size: 40px; letter-spacing: -0.02em; line-height: 1; }
.abhero__stat-l { font-size: 13.5px; color: #8fa8c8; }
.abhero__visual { position: relative; display: flex; flex-direction: column; align-items: center; gap: 34px; }
.abhero__eye { display: grid; place-items: center; }
.abhero__eye .radar-eye__ring { border-color: rgba(91,216,248,.3); }
.abhero__quote { position: relative; text-align: center; background: rgba(8,25,56,.5); border: 1px solid rgba(91,216,248,.18); border-radius: var(--r-lg); padding: 30px 34px; backdrop-filter: blur(6px); }
.abhero__quote p { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.3; color: #fff; letter-spacing: -0.01em; }
.abhero__qmark { font-size: 56px; margin-bottom: -10px; }
@media (max-width: 920px) { .abhero__in { grid-template-columns: 1fr; gap: 40px; } .abhero__visual { order: -1; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; } }
@media (max-width: 540px) { .abhero__visual { flex-direction: column; align-items: stretch; } }

/* mission */
.abmission__in { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; }
.abmission__h { font-size: var(--t-h2); margin: 18px 0 22px; }
.abmission__text p { color: var(--ink-soft); font-size: 16.5px; line-height: 1.75; margin-bottom: 16px; }
.abmission__boxes { display: flex; flex-direction: column; gap: 16px; }
.abmission__box { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 26px; box-shadow: var(--sh-sm); position: relative; overflow: hidden; }
.abmission__box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--cyan), var(--blue)); }
.abmission__box-ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: var(--glow-soft); margin-bottom: 16px; }
.abmission__box h3 { font-size: 20px; color: var(--navy); margin-bottom: 9px; }
.abmission__box p { color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
@media (max-width: 860px) { .abmission__in { grid-template-columns: 1fr; gap: 36px; } }

/* values */
.abval-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.abval-card { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 26px; overflow: hidden; transition: all .35s var(--ease); }
.abval-card:hover { border-color: rgba(24,197,244,.5); box-shadow: var(--sh-lg); transform: translateY(-5px); }
.abval-card__ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--blue); background: linear-gradient(135deg, rgba(24,197,244,.13), rgba(14,77,164,.08)); margin-bottom: 18px; transition: all .35s; }
.abval-card:hover .abval-card__ic { color: #fff; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: var(--glow-soft); }
.abval-card h3 { font-size: 19px; color: var(--navy); margin-bottom: 10px; }
.abval-card p { font-size: 14.5px; color: var(--ink-soft); line-height: 1.6; }
.abval-card__n { position: absolute; top: 20px; right: 22px; font-size: 13px; color: var(--ink-faint); opacity: .5; }
@media (max-width: 900px) { .abval-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .abval-grid { grid-template-columns: 1fr; } }