.section-hero { position: relative; overflow: hidden; isolation: isolate; color: #24232c; background: #e6e5eb; }
.section-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 76% 50%, #f9b8b35c, transparent 49%), radial-gradient(ellipse at 24% 20%, #f7f7fbba, transparent 65%), linear-gradient(110deg, #e1e3ec, #e9e5e9 58%, #e8cbd0); }
.section-hero::after { content: ''; position: absolute; z-index: -1; width: 650px; height: 650px; border: 1px solid #fff6; border-radius: 50%; right: -90px; top: -200px; box-shadow: 0 0 0 65px #ffffff0f, 0 0 0 130px #ffffff0b; }
.section-hero__dots { position: absolute; inset: 0 0 0 50%; z-index: -1; background-image: radial-gradient(#975c681f .8px, transparent .8px); background-size: 12px 12px; mask-image: radial-gradient(ellipse, #000, transparent 65%); }
.section-hero__inner { max-width: 1360px; margin: auto; padding: 26px 40px; min-height: 360px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 55px; align-items: center; }
.section-hero--overlap .section-hero__inner { padding-bottom: 70px; }
.section-hero__copy { position: relative; z-index: 1; padding: 16px 0; }
.section-hero__eyebrow { display: flex; align-items: center; gap: 10px; color: #897480; font: 9px/1.7 ui-monospace, monospace; letter-spacing: 2px; margin-bottom: 18px; }
.section-hero__eyebrow > span { width: 5px; height: 5px; background: #c8212b; flex-shrink: 0; }
.section-hero h1 { font-size: clamp(29px, 2.65vw, 40px); font-weight: 750; letter-spacing: -1px; line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
.section-hero h1 > span { display: block; color: #bb1523; }
.section-hero__description { color: #625c69; font-size: 15px; line-height: 1.95; max-width: 670px; margin: 20px 0 0; }
.section-hero__tags { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 22px; }
.section-hero__tags > span { font-size: 11px; color: #947480; display: flex; align-items: center; gap: 8px; }
.section-hero__tags > span::before { content: ''; width: 3px; height: 3px; border-radius: 50%; background: #c78291; }
.section-art { position: relative; width: 440px; height: 310px; justify-self: center; pointer-events: none; }
.section-art__halo { position: absolute; inset: 20px -15px 0; background: radial-gradient(ellipse, #d9667b30, transparent 68%); filter: blur(12px); }
.section-art__back { position: absolute; width: 324px; height: 235px; top: 31px; left: 55px; border: 1px solid #fff9; border-radius: 13px; background: linear-gradient(130deg, #fff6, #d7cbd86e); transform: rotate(7deg); }
.section-art__sheet { position: absolute; top: 25px; left: 25px; width: 343px; height: 239px; border: 1px solid #fff; border-radius: 13px; background: linear-gradient(135deg, #ffffffdc, #f5edf5de); box-shadow: 7px 9px 0 #ffffff45, 10px 19px 25px #8a5c741e; transform: perspective(850px) rotateY(-12deg) rotateX(5deg) rotateZ(-4deg); }
.section-art__chrome { display: flex; align-items: center; gap: 4px; height: 28px; padding: 0 14px; border-bottom: 1px solid #e7d9e333; }
.section-art__chrome i { width: 4px; height: 4px; background: #e0a2b2; border-radius: 50%; }
.section-art__chrome i:first-child { background: #c44763; }
.section-art__chrome > span { margin-left: auto; font: 6px ui-monospace, monospace; letter-spacing: 1px; color: #b498a7; }
.section-art__sheet-body { padding: 16px 21px; }
.section-art__label { font: 6px ui-monospace, monospace; color: #b48a9b; letter-spacing: 1.2px; }
.section-art h3 { color: #634458; font-size: 14px; font-weight: 600; margin: 7px 0 13px; }
.section-art__questions { display: flex; flex-direction: column; gap: 7px; }
.section-art__questions > div { display: flex; align-items: center; gap: 8px; color: #a95370; background: #f2dfe9; border: 1px solid #fff; padding: 8px 10px; border-radius: 7px 7px 7px 2px; font-size: 9px; }
.section-art__questions > div:nth-child(2) { margin-left: 20px; background: #f8f4fa; }
.section-art__questions small { color: #c7a7b7; margin-left: auto; font: 7px ui-monospace, monospace; }
.section-art__lines { display: flex; gap: 6px; margin-top: 13px; }
.section-art__lines i { width: 54px; height: 3px; background: #ddcbd9; border-radius: 3px; }
.section-art__lines i:last-child { width: 84px; background: #e6dde9; }
.section-art__emblem { position: absolute; top: 100px; right: 0; width: 104px; height: 116px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #fff; border: 2px solid #f0afbf; border-radius: 21px; background: linear-gradient(140deg, #f28a9e, #ca2c4a 60%, #a91937); box-shadow: 5px 6px 0 #a93450, 8px 9px 0 #db9daf, 13px 18px 24px #99405b30, inset 2px 2px 7px #ffd1da; transform: perspective(650px) rotateY(-15deg) rotateZ(7deg); }
.section-art__emblem strong { font-size: 12px; letter-spacing: 2px; text-shadow: 1px 2px #a22145; }
.section-art__note { position: absolute; left: 85px; top: 242px; display: flex; align-items: center; gap: 11px; padding: 13px 19px; min-width: 280px; border: 1px solid #fff; border-radius: 10px; background: linear-gradient(120deg, #fffe, #f8edf4de); box-shadow: 0 12px 20px #8a5c7418; transform: rotate(2deg); }
.section-art__note > span { color: #bb4e6d; background: #f2dce7; border-radius: 8px; width: 32px; height: 32px; display: grid; place-items: center; }
.section-art__note strong { display: block; color: #8c5d76; font-size: 9px; font-weight: 600; }
.section-art__note small { display: block; color: #b497aa; font-size: 7px; margin-top: 5px; }
.section-art__workflow { display: flex; gap: 8px; }
.section-art__workflow > div { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 14px 4px 10px; border: 1px solid #fff; border-radius: 8px; background: #fff9; }
.section-art__workflow > div > span { color: #b9506e; }
.section-art__workflow strong { font: 9px ui-monospace, monospace; color: #c393a7; margin-top: 8px; }
.section-art__workflow small { font-size: 7px; margin-top: 7px; color: #92677f; }
.section-art__case > div { display: flex; gap: 12px; align-items: center; color: #b95671; background: #f1dce6; padding: 8px 12px; border-radius: 7px; margin-bottom: 8px; }
.section-art__case > div > span { font-size: 11px; }
.section-art__case > p { display: flex; align-items: center; gap: 8px; font-size: 8px; color: #8c6b80; margin: 6px 0; }
.section-art__case > p > span { font: 7px ui-monospace, monospace; color: #be96ab; }
.section-art__case > p > svg { margin-left: auto; color: #b68199; }
.section-art__books { display: flex; align-items: flex-end; gap: 10px; height: 107px; }
.section-art__books > div { display: flex; flex-direction: column; justify-content: space-between; flex: 1; height: 100px; padding: 11px 7px; border: 1px solid #fff; border-left: 4px solid #ba667e; border-radius: 3px 8px 8px 3px; background: linear-gradient(135deg, #e5bacb, #f3e7f1); color: #a24f6b; box-shadow: 3px 4px 0 #d4c3d3; }
.section-art__books > div:nth-child(2) { height: 110px; background: linear-gradient(135deg, #d8cadd, #f2ecf5); border-left-color: #a18aaf; color: #887093; }
.section-art__books strong { font: 6px ui-monospace, monospace; letter-spacing: .5px; }
.section-art__books span { font-size: 7px; }
.section-art__checklist { display: flex; flex-direction: column; gap: 9px; }
.section-art__checklist > div { display: flex; align-items: center; gap: 8px; color: #a56783; padding: 8px; background: #fff7; border: 1px solid #fff; border-radius: 6px; font-size: 9px; }
.section-art__checklist > div > svg:last-child { margin-left: auto; }
.section-art--compliance .section-art__sheet { transform: perspective(850px) rotateY(-10deg) rotateZ(-7deg); }
.section-art--about .section-art__sheet { transform: perspective(850px) rotateY(-12deg) rotateZ(3deg); }
@media (max-width: 1100px) { .section-hero__inner { grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 16px; padding-inline: 28px; } .section-art { scale: .82; margin-inline: -40px; } .section-hero h1 { font-size: 32px; } }
@media (max-width: 850px) and (min-width: 641px) { .section-art { scale: .65; margin-inline: -77px; } .section-hero__inner { gap: 10px; } .section-hero h1 { font-size: 28px; } .section-hero__description { font-size: 14px; } }
@media (max-width: 640px) { .section-hero__inner { display: flex; flex-direction: column; gap: 0; padding: 30px 24px 22px; } .section-hero__copy { width: 100%; padding: 0; } .section-hero h1 { font-size: 29px; } .section-hero__eyebrow { font-size: 8px; margin-bottom: 14px; letter-spacing: 1.5px; } .section-hero__description { font-size: 14px; margin-top: 16px; } .section-hero__tags { margin-top: 17px; gap: 10px 14px; } .section-art { scale: .74; transform-origin: top center; margin: 22px 0 -80px; } .section-hero--overlap .section-hero__inner { padding-bottom: 75px; } }
@media (max-width: 360px) { .section-hero__inner { padding-inline: 20px; } .section-art { scale: .63; margin-bottom: -112px; } .section-hero h1 { font-size: 26px; } }