html{scroll-behavior:smooth}

        /* Layout */
        .about-page { padding: 30px 24px 72px; max-width:1240px; margin: 0 auto }
        .about-hero { padding:clamp(32px,6vw,72px); background:linear-gradient(125deg,#edf6ff,#ffffff);border:1px solid rgba(11,99,214,.12);border-radius:12px;margin-bottom:28px }
        .about-hero-content { max-width:900px }

        /* Animated title */
        .animated-title{display:inline-block;font-weight:800;background:linear-gradient(90deg,#0b63d6,#0066cc,#0a4ea0);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;transform-origin:center;opacity:0;animation: titleUp .7s cubic-bezier(.2,.9,.2,1) forwards, titleShift 6s linear infinite}

        @keyframes titleUp{from{transform:translateY(12px) scale(.995);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
        @keyframes titleShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

        @media (prefers-reduced-motion: reduce){
            .animated-title{animation:none;background:none;color:var(--secondary)}
        }

        .about-grid { display:grid; gap:20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top:20px }
        .about-card { background:#fff; padding:22px; border:1px solid rgba(15,45,85,.09);border-radius:10px; box-shadow:0 8px 20px rgba(15,45,85,0.04); transition:transform .28s cubic-bezier(.2,.9,.2,1), box-shadow .28s; will-change:transform }
        .about-card h2{margin-top:0}

        .about-values { margin-top:28px }
        .values-grid { display:grid; gap:16px; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)) }
        .value-card { background:#fff; padding:20px; border:1px solid rgba(15,45,85,.09);border-radius:10px; box-shadow:0 8px 18px rgba(15,45,85,0.04); transition:transform .28s, box-shadow .28s; will-change:transform }

        /* Hover / focus animations */
        .about-card:hover, .about-card:focus-within { transform: translateY(-8px) scale(1.02); box-shadow:0 20px 40px rgba(15,45,85,0.08) }
        .value-card:hover, .value-card:focus-within { transform: translateY(-6px); box-shadow:0 18px 36px rgba(15,45,85,0.08) }
        a.btn{display:inline-block;margin-top:12px}

        /* Responsive tweaks */
        @media (max-width:900px){ .about-hero{padding:28px 14px} .about-page{padding:16px} }
        @media (max-width:480px){ .about-page{padding:18px 14px 48px}.about-hero{padding:28px 20px} .about-card{padding:18px}.value-card{padding:18px} }

        /* Respect reduced motion */
        @media (prefers-reduced-motion: reduce){
            .about-card, .value-card { transition: none; transform: none }
        }