main { max-width: 1180px; margin: auto; padding: 0 24px; }
.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center; min-height: 500px; padding: 70px 0 48px; }
.hero h1 { max-width: 760px; margin: 14px 0 18px; font-size: clamp(42px, 6vw, 78px); line-height: .98; letter-spacing: -3.5px; }
.hero h1 em { color: var(--brand); font-family: Georgia, serif; font-weight: 400; }
.hero p { max-width: 620px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.hero-art { position: relative; min-height: 350px; }
.orb { position: absolute; border-radius: 50%; animation: orbit 8s ease-in-out infinite alternate; }
.orb.one { width: 260px; height: 260px; right: 34px; top: 34px; background: var(--brand); box-shadow: 0 30px 80px rgba(52,125,183,.24); }
.orb.two { width: 128px; height: 128px; right: 230px; top: 172px; background: var(--lavender); animation-delay: -2s; }
.orb.three { width: 64px; height: 64px; right: 12px; top: 6px; background: var(--amber); animation-delay: -4s; }
.dot-grid { position: absolute; right: 88px; top: 87px; width: 152px; height: 152px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; place-items: center; }
.dot-grid i { width: 17px; height: 17px; background: white; border-radius: 50%; opacity: .92; }
.dot-grid i:nth-child(3n) { transform: scale(.55); opacity: .6; }
@keyframes orbit { to { transform: translateY(-16px) rotate(7deg); } }
.section-head { margin: 28px 0 18px; }
.labs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.lab-card { min-height: 360px; padding: 28px; display: flex; flex-direction: column; position: relative; overflow: hidden; text-decoration: none; color: var(--ink); }
.lab-card::after { content: ""; position: absolute; z-index: 0; width: 210px; height: 210px; right: -75px; bottom: -95px; border-radius: 50%; background: var(--brand-pale); transition: transform .35s ease; pointer-events: none; }
.lab-card > * { position: relative; z-index: 1; }
.lab-card:hover { color: var(--ink); transform: translateY(-4px); border-color: #bfd8e8; }
.lab-card:hover::after { transform: scale(1.18); }
.lab-card h3 { margin: 18px 0 10px; font-size: 29px; letter-spacing: -1px; }
.lab-card p { max-width: 480px; color: var(--muted); line-height: 1.65; }
.card-visual { height: 135px; border-radius: 18px; margin-bottom: auto; background: #f6fafe; border: 1px solid #e2edf4; position: relative; overflow: hidden; }
.halftone-visual { display: grid; grid-template-columns: repeat(8, 1fr); place-items: center; padding: 22px; gap: 7px; }
.halftone-visual i { border-radius: 50%; background: var(--brand); width: var(--s, 14px); height: var(--s, 14px); }
.folding-preview { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.lab-card:hover .folding-preview { transform: scale(1.025); }
.card-action { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--brand-deep); z-index: 1; }
.hub-note { margin: 52px 0 20px; padding: 24px 28px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 18px; background: rgba(255,255,255,.82); box-shadow: 0 12px 30px rgba(32,56,79,.06); }
.hub-note p { max-width: 850px; margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.75; }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 52px; } .hero-art { min-height: 260px; } .labs { grid-template-columns: 1fr; } }
@media (max-width: 520px) { main { padding: 0 14px; } .hero h1 { letter-spacing: -2px; } .hero-art { transform: scale(.78); transform-origin: center; margin: -35px; } .lab-card { min-height: 330px; padding: 20px; } }