.design-hero{padding-top:100px;padding-bottom:90px;position:relative;min-height:550px}
.design-hero h1{max-width:750px;font-size:clamp(58px,7vw,94px);font-weight:900;margin:0 0 23px}
.design-hero>p:not(.eyebrow){max-width:575px;font-size:20px;line-height:1.6;color:var(--muted)}
.design-hero-art{position:absolute;right:7%;top:82px;width:280px;height:320px;border-radius:32px;background:#f7f4f9;display:flex;align-items:center;justify-content:center;flex-direction:column}
.design-arc{width:165px;height:165px;overflow:hidden}
.design-arc img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.design-hero-caption{font-size:15px;font-weight:900;margin-top:20px}
.design-section{padding-top:85px;padding-bottom:85px;border-top:1px solid #efedf1}
.design-heading{display:grid;grid-template-columns:180px 1fr;gap:25px;align-items:start;margin-bottom:35px}
.design-heading>span,.tile-label{color:#7b36c4;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.design-heading h2{font-size:clamp(35px,4vw,53px);font-weight:900;margin:0 0 13px}
.design-heading p{color:var(--muted);font-size:16px;line-height:1.6;max-width:690px;margin:0}
.logo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.logo-tile{min-height:265px;border-radius:24px;background:#f5f5f7;padding:23px;display:flex;flex-direction:column;align-items:flex-start}
.logo-tile .logo-solo{width:104px;height:104px;object-fit:contain;align-self:center;margin:auto;mix-blend-mode:multiply}
.logo-tile small,.component-panel small{font-size:13px;line-height:1.5;color:#78737e}
.dark-tile{background:#09090b;color:#fff}.dark-tile .tile-label{color:#ceb1ff}.dark-tile small{color:#c8c1cd}.dark-tile .logo-solo{mix-blend-mode:screen}
.logo-lockup{display:flex;align-items:flex-end;gap:0;align-self:center;margin:auto}
.logo-lockup img{width:90px;height:90px;object-fit:contain;margin-right:2px;mix-blend-mode:multiply}
.logo-lockup strong{background:var(--aura);background-clip:text;-webkit-background-clip:text;color:transparent;font-size:55px;font-weight:900;letter-spacing:-.075em;line-height:1;margin-bottom:7px}
.design-guidance{font-size:14px;line-height:1.6;color:#78727c;margin:22px 0 0}
.gradient-spec{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;background:#f6f5f7;border-radius:25px;padding:22px;margin-bottom:17px}
.gradient-swatch{height:185px;border-radius:18px;background:var(--aura)}
.gradient-spec strong{font-size:21px;font-weight:900}.gradient-spec p{color:var(--muted);font-size:14px}
.gradient-stops{display:flex;flex-wrap:wrap;gap:8px}
code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.gradient-stops code{padding:8px;background:#fff;border-radius:9px}
.swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.swatch{background:#f6f5f7;border-radius:18px;padding:12px}
.swatch>span{display:block;height:74px;border-radius:12px;border:1px solid #e9e7eb}
.swatch strong,.swatch code{display:block;margin:9px 3px 0}.swatch strong{font-size:13px}.swatch code{color:#79737e}
.type-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.type-panel>div{min-height:180px;border-radius:22px;background:#f6f5f7;padding:24px}
.type-panel p{margin:18px 0 0}.type-display{font-size:40px;font-weight:800;letter-spacing:-1px;line-height:1.15}.type-headline{font-size:28px;font-weight:700;letter-spacing:-.4px}.type-body{font-size:16px;font-weight:400;line-height:1.6;max-width:390px}.type-interface{font-size:16px;font-weight:700}
.component-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.component-panel{background:#f6f5f7;border-radius:23px;padding:24px;min-height:230px;display:flex;align-items:flex-start;flex-direction:column}
.sample-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:auto 0}
.sample-secondary{padding:16px 21px;background:#fff;border-radius:15px;font-size:15px;font-weight:900}
.sample-surface{display:flex;align-items:center;gap:15px;background:#fff;border-radius:18px;padding:15px;margin:auto 0;width:100%}
.sample-avatar{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#e9d8fb;color:#7739be;font-weight:900}
.sample-surface strong,.sample-surface small{display:block}.sample-surface small{font-size:12px}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}.principles>div{padding:24px;border-radius:21px;background:#f6f5f7}.principles strong{font-size:16px}.principles p{font-size:14px;line-height:1.6;color:var(--muted);margin:9px 0 0}
@media(max-width:900px){.design-hero{min-height:0;padding-bottom:65px}.design-hero-art{position:static;margin-top:35px;width:100%;height:270px}.logo-grid{grid-template-columns:1fr 1fr}.swatch-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.design-hero{padding-top:65px}.design-hero>p:not(.eyebrow){font-size:17px}.design-section{padding-top:62px;padding-bottom:62px}.design-heading{grid-template-columns:1fr;gap:16px}.logo-grid,.gradient-spec,.type-panel,.component-grid,.principles{grid-template-columns:1fr}.logo-tile{min-height:230px}.gradient-swatch{height:130px}}