:root { color-scheme: light; --ink: #100d20; --purple: #663777; }
* { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--ink); font-family: Vazirmatn, sans-serif; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #b971dc; outline-offset: 5px; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
/* Reuse the product photography from the supplied mockup. */
.hero { background: #090820; color: #fff; overflow: hidden; }
.hero-inner { max-width: 1264px; min-height: 320px; margin-inline: auto; position: relative; display: flex; align-items: center; }
.hero-art { position: absolute; right: 0; top: 0; width: 600px; height: 320px; background: url('../images/mockups/about.webp') 100% 15.909091% / 210.666667% auto no-repeat; }
.hero-copy { position: relative; width: 50%; margin-right: auto; padding: 10px 14px 13px 45px; }
.hero h1 { font-size: 44px; line-height: 1.6; margin: 0 0 7px; letter-spacing: -1.3px; }
.hero p { color: #ddd9e6; font-size: 20px; line-height: 1.6; margin: 0; }
.about-content { display: grid; grid-template-columns: minmax(0, 410fr) minmax(0, 636fr); gap: 48px; width: min(1094px, 88%); margin: 30px auto 20px; align-items: start; }
.eyebrow { font-family: Arial, sans-serif; color: #674a70; font-size: 13px; }
.story h2 { font-size: 25px; line-height: 1.6; margin: 2px 0 9px; }
.story p, .story ol { color: #646464; font-size: 13px; line-height: 1.75; }
.story p { margin: 0 0 10px; }
.story ol { list-style: none; padding: 0 19px 0 0; margin: 10px 17px 0 0; }
.story ol li { position: relative; padding: 0 0 9px; }
.story ol li::before { content: ''; position: absolute; width: 8px; height: 8px; border: 2px solid #d8c8df; background: #d8c8df; border-radius: 50%; right: -24px; top: 6px; }
.story ol li:first-child::before { background: white; }
.story ol li:not(:last-child)::after { content: ''; position: absolute; right: -19px; top: 17px; bottom: -6px; border-right: 1px solid #b9b1bd; }
.values { padding-top: 65px; }
.value-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.value-card { min-height: 140px; padding: 13px 14px 10px; border: 1px solid #e7e6e9; border-radius: 10px; box-shadow: 0 0 3px #1607240d; }
.value-card > .icon { display: block; color: var(--purple); margin-bottom: 8px; }
.value-card h2 { font-size: 15px; line-height: 1.7; margin: 0 0 3px; }
.value-card p { color: #606060; font-size: 12px; line-height: 1.8; margin: 0; }
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #f2edfa; border-radius: 11px; margin-top: 22px; padding: 15px 9px; }
.highlight { display: flex; align-items: center; justify-content: center; gap: 8px; padding-inline: 8px; }
.highlight + .highlight { border-right: 1px solid #d8cde1; }
.highlight .icon { color: #793984; width: 34px; height: 34px; }
.highlight h3 { font-size: 15px; margin: 0; }
.highlight p { font-size: 11px; color: #625a6b; white-space: nowrap; margin: 0; }
.products-cta { text-align: center; padding-top: 23px; }
.products-cta h2 { font-size: 24px; margin: 0 0 8px; line-height: 1.6; }
.products-cta a { display: inline-block; background: linear-gradient(#c000cb, #9705aa); border: 1px solid #9600a7; box-shadow: 0 2px 4px #59086424; border-radius: 24px; padding: 5px 18px; color: #fff; font-size: 13px; }
.products-cta a:hover { background: #820896; }

@media (max-width: 1150px) {
    .hero-copy { padding-left: 25px; }
    .hero h1 { font-size: 36px; }
    .hero p { font-size: 18px; }
    .hero-art { right: -70px; }
    .about-content { gap: 28px; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .value-cards { gap: 10px; }
    .value-card { padding-inline: 10px; }
    .value-card h2 { font-size: 13px; }
    .value-card p { font-size: 11px; }
    .highlight { flex-direction: column; text-align: center; }
    .highlight p { white-space: normal; }
}
@media (max-width: 800px) {
    .hero-inner { flex-direction: column; }
    .hero-art { position: relative; right: auto; width: min(600px, 100%); height: auto; aspect-ratio: 600 / 320; }
    .hero-copy { width: 100%; padding: 15px 6% 30px; text-align: center; }
    .hero h1 { font-size: clamp(28px, 5vw, 38px); }
    .hero p { font-size: 17px; }
    .about-content { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .story p, .story ol { font-size: 14px; }
    .values { padding-top: 0; }
    .value-card h2 { font-size: 15px; }
    .value-card p { font-size: 12px; }
    .highlight { flex-direction: row; }
}
@media (max-width: 540px) {
    .value-cards { grid-template-columns: minmax(0, 1fr); }
    .value-card { min-height: 0; padding: 18px; }
    .value-card > .icon { float: right; margin: 5px 0 5px 18px; }
    .value-card p br { display: none; }
    .highlight { flex-direction: column; padding-inline: 5px; }
    .highlight h3 { font-size: 14px; }
    .highlight p { font-size: 10px; }
    .desktop-break { display: none; }
}