:root { --about-blue: #3561ff; --about-ink: #0d1020; --about-muted: #687084; }.about-page { overflow: hidden; background: #fff; font-family: "Inter", Arial, sans-serif; }.about-navbar { top: 14px; left: 78px; right: 78px; }
.about-hero { position: relative; min-height: 465px; display: flex; align-items: center; overflow: hidden; padding: 162px max(8vw, 50px) 70px; background: #3561ff; }.about-hero::before, .about-hero::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.27); border-radius: 50%; }.about-hero::before { right: -100px; top: -205px; width: 580px; height: 580px; box-shadow: 0 0 0 65px rgba(255,255,255,.06); }.about-hero::after { right: 12%; bottom: -160px; width: 320px; height: 320px; }.about-hero-copy { position: relative; z-index: 1; max-width: 685px; color: #fff; }.about-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: inherit; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 800; }.about-eyebrow::before { content: ""; width: 23px; height: 2px; background: currentColor; }.about-hero h1 { margin: 0 0 22px; font-size: clamp(45px, 5.2vw, 72px); line-height: .98; letter-spacing: -3.5px; font-weight: 800; }.about-hero p { max-width: 570px; margin: 0; color: rgba(255,255,255,.79); font-size: 16px; line-height: 1.7; }.about-hero-mark { position: absolute; z-index: 1; right: max(10vw, 80px); bottom: 54px; display: flex; align-items: flex-end; gap: 13px; color: #fff; }.about-hero-mark span { font-size: 118px; line-height: .72; letter-spacing: -9px; font-weight: 800; opacity: .12; }.about-hero-mark strong { margin-bottom: 1px; font-size: 18px; line-height: 1.05; letter-spacing: -.5px; }
.about-story { display: grid; grid-template-columns: .44fr 1.56fr; gap: 70px; max-width: 1160px; margin: 0 auto; padding: 110px 30px 78px; }.story-label { display: flex; align-items: flex-start; justify-content: space-between; color: var(--about-blue); font-size: 15px; line-height: 1.13; font-weight: 800; }.story-label i { margin-top: 4px; font-size: 18px; }.story-copy h2, .about-close h2 { margin: 0; color: var(--about-ink); font-size: clamp(34px, 3.7vw, 54px); line-height: 1.06; letter-spacing: -2.3px; font-weight: 800; }.story-copy p { max-width: 715px; margin: 29px 0 24px; color: var(--about-muted); font-size: 16px; line-height: 1.78; }.story-copy a { color: var(--about-blue); font-size: 13px; font-weight: 800; }.story-copy a i { margin-left: 9px; transition: transform .25s; }.story-copy a:hover i { transform: translateX(5px); }
.about-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1220px; margin: 0 auto; padding: 0 30px 112px; }.value-card { position: relative; min-height: 268px; padding: 31px; overflow: hidden; border: 1px solid #e4e9f5; border-radius: 14px; background: #f9faff; transition: color .3s, background .3s, transform .3s, box-shadow .3s; }.value-card::after { content: ""; position: absolute; right: -58px; bottom: -58px; width: 150px; height: 150px; border: 1px solid var(--about-blue); border-radius: 50%; opacity: .11; transition: transform .5s; }.value-card > span { position: absolute; top: 29px; right: 29px; color: #a5afc5; font-size: 12px; font-weight: 800; }.value-card > i { width: 49px; height: 49px; display: grid; place-items: center; color: var(--about-blue); border-radius: 12px; background: #e9eeff; font-size: 21px; transition: color .3s, background .3s, transform .3s; }.value-card h3 { margin: 29px 0 12px; font-size: 21px; line-height: 1; letter-spacing: -.7px; }.value-card p { position: relative; z-index: 1; margin: 0; color: var(--about-muted); font-size: 14px; line-height: 1.65; transition: color .3s; }.value-card:hover { color: #fff; background: var(--about-blue); box-shadow: 0 18px 30px rgba(53,97,255,.23); transform: translateY(-8px); }.value-card:hover > i { color: var(--about-blue); background: #fff; transform: rotate(-8deg) scale(1.08); }.value-card:hover p { color: rgba(255,255,255,.8); }.value-card:hover > span { color: rgba(255,255,255,.58); }.value-card:hover::after { transform: scale(1.7); border-color: #fff; }
.about-close { display: flex; align-items: center; justify-content: space-between; gap: 40px; max-width: 1160px; margin: 0 auto 102px; padding: 53px 59px; overflow: hidden; border-radius: 17px; background: #edf1ff; }.about-close .about-eyebrow { color: var(--about-blue); margin-bottom: 14px; }.about-close a { display: inline-flex; align-items: center; gap: 13px; min-height: 54px; padding: 0 23px; flex: 0 0 auto; color: #fff; border-radius: 5px; background: var(--about-blue); font-size: 13px; font-weight: 800; transition: transform .25s, box-shadow .25s; }.about-close a:hover { box-shadow: 0 12px 22px rgba(53,97,255,.22); transform: translateY(-3px); }.reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }.reveal.visible { opacity: 1; transform: translateY(0); }.about-values .reveal:nth-child(2) { transition-delay: .12s; }.about-values .reveal:nth-child(3) { transition-delay: .24s; }
@media (max-width: 800px) { .about-story { grid-template-columns: 1fr; gap: 30px; padding: 80px 25px 56px; }.about-values { padding: 0 20px 75px; }.about-close { margin: 0 20px 70px; }.about-hero-mark { right: 38px; }.about-navbar { left: 78px; right: 78px; } }
@media (max-width: 620px) { .about-navbar { top: 8px; left: 26px; right: 26px; }.about-hero { min-height: 500px; padding: 137px 26px 50px; }.about-hero h1 { font-size: clamp(42px, 12vw, 62px); letter-spacing: -2.8px; }.about-hero p { font-size: 14px; }.about-hero-mark { right: 25px; bottom: 34px; }.about-hero-mark span { font-size: 83px; }.about-hero-mark strong { font-size: 14px; }.about-story { padding: 70px 25px 46px; }.story-copy h2, .about-close h2 { font-size: 37px; letter-spacing: -1.6px; }.story-copy p { font-size: 14px; }.about-values { grid-template-columns: 1fr; padding: 0 20px 70px; }.value-card { min-height: 235px; }.about-close { display: block; margin: 0 20px 65px; padding: 38px 30px; }.about-close h2 { margin-bottom: 27px; } }