.about-hero .container { min-height: 440px; padding-top: 74px; padding-bottom: 74px; } .hero-copy { position: relative; padding-left: 28px; } .hero-copy:before { content: ""; position: absolute; left: 0; top: 58px; width: 4px; height: 132px; border-radius: 999px; background: linear-gradient(180deg, var(--red), var(--gold)); } .about-tags { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .about-tags span { padding: 10px 14px; border: 1px solid rgba(224, 211, 189, .78); border-radius: 999px; color: #6d766f; background: rgba(255,253,248,.74); box-shadow: 0 14px 32px rgba(72, 57, 38, .06); font-weight: 800; transition: transform .22s ease, color .22s ease, background .22s ease; } .about-tags span:hover { color: #fff; background: var(--green); transform: translateY(-3px); } .about-seal { position: relative; min-height: 260px; overflow: hidden; display: grid; place-items: center; text-align: center; color: #fff; background: linear-gradient(155deg, var(--green-dark), var(--green)); } .about-seal:before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 34px 34px; opacity: .34; } .seal-orb { position: absolute; right: 76px; top: 40px; width: 110px; height: 110px; border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: 0 0 40px rgba(255,255,255,.1); animation: sealPulse 4s ease-in-out infinite; } .about-seal span { position: relative; z-index: 2; width: 96px; height: 96px; margin-bottom: 20px; border-radius: 50%; display: grid; place-items: center; color: var(--red); background: rgba(255,255,255,.94); font-family: "SimSun", "Songti SC", serif; font-size: 48px; font-weight: 800; transition: transform .24s ease, background .24s ease; } .about-seal:hover span { transform: rotate(-8deg) scale(1.08); } .about-seal p { position: relative; z-index: 2; margin: 0; color: rgba(255,255,255,.84); font-size: 22px; } .values-section { position: relative; overflow: hidden; } .values-section:before { content: ""; position: absolute; left: 50%; top: 58px; width: 520px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(196, 146, 69, .09), transparent 68%); transform: translateX(-50%); } .value-card { min-height: 190px; position: relative; overflow: hidden; } .value-card:after { content: ""; position: absolute; left: -42%; top: 0; width: 36%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.54), transparent); transform: skewX(-18deg); transition: left .56s ease; } .value-card:hover:after { left: 112%; } .value-icon { width: 48px; height: 48px; margin-bottom: 18px; border-radius: 14px; display: grid; place-items: center; color: var(--red); background: #f7e4dc; font-family: "SimSun", "Songti SC", serif; font-size: 22px; font-weight: 900; transition: transform .26s ease, background .26s ease, color .26s ease; } .value-card:hover .value-icon { color: #fff; background: var(--red); transform: rotate(-6deg) scale(1.08); } .tilt-card { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0)); transition: transform .18s ease, box-shadow .24s ease, border-color .24s ease; } .tilt-card:hover { --lift: -6px; } @keyframes sealPulse { 0%, 100% { opacity: .55; transform: scale(.92); } 50% { opacity: .9; transform: scale(1.08); } } @media (max-width: 720px) { .hero-copy { padding-left: 0; } .hero-copy:before { display: none; } }