.detail-system{min-height:760px;padding:clamp(70px,8vw,125px) clamp(24px,7vw,140px);display:grid;grid-template-columns:minmax(450px,.92fr) minmax(400px,1.08fr);align-items:center;gap:clamp(55px,8vw,140px);background:#fff}
.room-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:720px}
.room-card{margin:0}.room-card h3{font-size:16px;text-align:center;text-transform:uppercase;margin:0 0 12px;letter-spacing:.03em}.room-card:nth-child(n+3) h3{margin:12px 0 0}
.room-photo{height:clamp(190px,20vw,320px);display:grid;place-items:center;background:linear-gradient(145deg,#edf4f4,#d9e9e7);border:1px dashed #9abbb9;color:#66817f;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.12em}
.rotation-mark{position:absolute;width:138px;height:138px;border:7px solid var(--teal);border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.86)}
.rotation-mark i{position:absolute;width:25px;height:25px;border:7px solid var(--teal);background:#b7d95f;border-radius:50%}.rotation-mark i:nth-child(1){left:-15px;top:-8px}.rotation-mark i:nth-child(2){right:-15px;top:-8px}.rotation-mark i:nth-child(3){right:-15px;bottom:-8px}.rotation-mark i:nth-child(4){left:-15px;bottom:-8px}
.system-copy{max-width:790px}.section-kicker{text-transform:uppercase;color:var(--teal);font-size:13px;font-weight:800;letter-spacing:.18em;margin:0 0 18px}.system-copy h2{font-size:clamp(38px,4vw,64px);line-height:1.08;letter-spacing:-.045em;margin:0 0 28px}.system-copy>p:not(.section-kicker){font-size:18px;line-height:1.75;color:#45565c;margin:0 0 34px;max-width:730px}
.system-button{display:inline-flex;align-items:center;justify-content:center;min-height:62px;padding:0 30px;background:var(--teal);color:#fff;font-weight:800;letter-spacing:.04em}.system-button:hover{background:var(--navy);transform:translateY(-2px)}
@media(max-width:1180px){.detail-system{grid-template-columns:1fr;gap:70px}.room-grid{margin:auto;width:100%}.system-copy{margin:auto;text-align:center}.system-copy>p:not(.section-kicker){margin-left:auto;margin-right:auto}}
@media(max-width:780px){.detail-system{padding:70px 20px;grid-template-columns:1fr}.room-photo{height:43vw;min-height:150px}.rotation-mark{width:104px;height:104px;border-width:6px}.rotation-mark i{width:21px;height:21px;border-width:6px}.system-copy h2{font-size:38px}.system-copy>p:not(.section-kicker){font-size:16px}.system-button{width:100%;padding:0 18px}}
@media(max-width:430px){.room-grid{gap:8px}.room-card h3{font-size:12px}.room-photo span{font-size:10px;text-align:center;padding:10px}.rotation-mark{width:84px;height:84px}.rotation-mark i{width:18px;height:18px}}