.page { width: min(1180px, calc(100% - 40px)); margin: 0 auto 58px; }

.hero {
    min-height: 570px;
    display: grid;
    grid-template-columns: 1.04fr .96fr;
    align-items: stretch;
    margin-top: 38px;
    overflow: hidden;
    background: rgba(255, 255, 255, .52);
    border: 1px solid rgba(255, 255, 255, .86);
    box-shadow: 0 23px 70px rgba(128, 22, 52, .16), 0 0 45px rgba(240, 31, 58, .11);
    backdrop-filter: blur(20px) saturate(145%);
}

.hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(42px, 7vw, 86px);
    background: rgba(255, 255, 255, .58);
    backdrop-filter: blur(18px) saturate(145%);
}

.eyebrow { margin-bottom: 20px; color: var(--rp-gray); font-size: 12px; font-weight: 900; letter-spacing: .18em; }
.hero h1 { max-width: 620px; margin: 0; color: var(--rp-text); font-size: clamp(44px, 5.5vw, 74px); line-height: .94; letter-spacing: -.06em; }
.lead { max-width: 530px; margin: 27px 0 0; color: var(--rp-muted); font-size: 19px; line-height: 1.58; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 35px; }

.button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    border: 1px solid var(--rp-gray);
    text-decoration: none;
    font-size: 14px;
    font-weight: 900;
    transition: transform .15s ease, background .15s ease, color .15s ease;
}

.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--rp-gray); color: #fff; }
.button-primary:hover { background: var(--rp-gray-dark); }
.button-secondary { background: #fff; color: var(--rp-gray-dark); }
.button-secondary:hover { background: var(--rp-gray-light); }
.register-line { margin: 19px 0 0; color: var(--rp-muted); font-size: 14px; }
.register-line a { color: var(--rp-gray-dark); font-weight: 900; }

.hero-visual {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 38px;
    isolation: isolate;
    background:
        radial-gradient(circle at 22% 20%, rgba(255, 255, 255, .24), transparent 19%),
        radial-gradient(circle at 84% 9%, rgba(255, 95, 120, .62), transparent 25%),
        linear-gradient(145deg, #ff2848, #b40025 60%, #660014);
    box-shadow: inset 0 0 80px rgba(255, 65, 91, .18), 0 0 42px rgba(240, 31, 58, .22);
}

.hero-visual::before {
    position: absolute;
    top: -20%;
    right: -27%;
    width: 88%;
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    box-shadow: 0 0 0 54px rgba(255, 255, 255, .06), 0 0 0 108px rgba(255, 255, 255, .04);
    content: "";
}

.hero-visual-kicker { position: absolute; top: 34px; left: 38px; color: rgba(255, 255, 255, .82); font-size: 11px; font-weight: 900; letter-spacing: .16em; }

.parapet-sample {
    position: absolute;
    top: 115px;
    right: 9%;
    width: min(77%, 350px);
    height: 258px;
    transform: perspective(740px) rotateY(-10deg) rotateX(3deg);
}

.parapet-sample-wall, .parapet-sample-window, .parapet-sample-board, .parapet-sample-edge { position: absolute; display: block; }
.parapet-sample-wall { inset: 0; background: linear-gradient(135deg, #f6f1ec, #d8d0ca); box-shadow: 18px 22px 0 rgba(88, 9, 14, .22); }
.parapet-sample-window { top: 28px; left: 18px; right: 18px; height: 142px; border: 13px solid #fbfbfa; background: linear-gradient(145deg, #bfe0ed, #eff9fa 52%, #a9d0df); box-shadow: inset 0 0 0 2px rgba(59, 103, 118, .2); }
.parapet-sample-board { top: 172px; left: 4px; right: -18px; height: 32px; background: linear-gradient(100deg, #fffdf8, #ddd5ca 52%, #faf8f2); box-shadow: 0 10px 0 #a79b8f, 8px 15px 18px rgba(50, 22, 23, .35); }
.parapet-sample-edge { top: 204px; left: 4px; right: -18px; height: 13px; background: #b6a99b; }

.hero-visual-label { position: relative; z-index: 1; color: #fff; font-size: clamp(35px, 4.2vw, 61px); font-weight: 900; line-height: .8; letter-spacing: -.06em; }
.hero-visual-label span { font-size: .31em; letter-spacing: .17em; }

.delivery-banner { display: flex; align-items: center; gap: 16px; margin: 26px 0 30px; padding: 19px 24px; border: 1px solid rgba(255, 255, 255, .84); border-left: 5px solid var(--rp-gray); background: rgba(255, 255, 255, .58); box-shadow: 0 10px 30px rgba(128, 22, 52, .11); backdrop-filter: blur(18px) saturate(145%); }
.delivery-icon { width: 39px; height: 39px; display: grid; flex: 0 0 auto; place-items: center; border-radius: 50%; background: var(--rp-gray); color: #fff; font-size: 21px; font-weight: 900; }
.delivery-banner strong { display: block; color: var(--rp-text); font-size: 17px; }
.delivery-banner span { display: block; margin-top: 4px; color: var(--rp-muted); font-size: 14px; }

.benefits, .quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid rgba(255, 255, 255, .84); background: rgba(255, 255, 255, .58); box-shadow: 0 10px 30px rgba(128, 22, 52, .11); backdrop-filter: blur(18px) saturate(145%); }
.benefit, .quick-card { min-height: 174px; display: flex; gap: 18px; padding: 30px 28px; border-right: 1px solid var(--rp-line); }
.benefit:last-child, .quick-card:last-child { border-right: 0; }
.benefit > span, .quick-number { color: var(--rp-gray); font-size: 12px; font-weight: 900; }
.benefit strong, .quick-card strong { display: block; margin-bottom: 8px; font-size: 16px; }
.benefit p, .quick-card > span:last-child { margin: 0; color: var(--rp-muted); font-size: 14px; line-height: 1.5; }
.quick-card { flex-direction: column; text-decoration: none; transition: background .15s ease; }
.quick-card:hover { background: var(--rp-gray-light); }
.quick-card strong { margin-top: 20px; }

@media (max-width: 820px) {
    .page { width: min(100% - 28px, 1180px); }
    .hero { grid-template-columns: 1fr; margin-top: 26px; }
    .hero-copy { padding: 48px 34px; }
    .hero-visual { min-height: 390px; }
    .benefits, .quick-grid { grid-template-columns: 1fr; }
    .benefit, .quick-card { border-right: 0; border-bottom: 1px solid var(--rp-line); }
    .benefit:last-child, .quick-card:last-child { border-bottom: 0; }
}

@media (max-width: 520px) {
    .page { width: min(100% - 26px, 1180px); }
    .hero-copy { padding: 43px 25px; }
    .hero h1 { font-size: 45px; }
    .lead { font-size: 17px; }
    .button { width: 100%; }
    .hero-visual { min-height: 340px; padding: 26px; }
    .hero-visual-kicker { top: 25px; left: 26px; font-size: 9px; }
    .parapet-sample { top: 100px; right: 11%; width: 76%; height: 206px; }
    .parapet-sample-window { height: 112px; border-width: 10px; }
    .parapet-sample-board { top: 142px; }
    .parapet-sample-edge { top: 174px; }
    .delivery-banner { align-items: flex-start; padding: 17px; }
}