:root { color-scheme: light; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: #25302b; background: #f7f8f5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 88% 14%, #e7eee8 0, transparent 30%), #f7f8f5; }
.frame { max-width: 1100px; min-height: 100vh; margin: auto; padding: 38px clamp(22px, 5vw, 70px) 28px; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 15px; font-size: 16px; font-weight: 740; letter-spacing: -.03em; }
.brand i { font-family: Georgia, serif; font-weight: 400; color: #80958a; }
.mark { width: 32px; height: 32px; display: grid; grid-template-columns: repeat(3, 7px); grid-template-rows: repeat(3, 7px); gap: 5px; transform: rotate(-12deg); }
.mark span { background: #304b3e; border-radius: 50%; }
.mark span:nth-child(1) { grid-column: 2; grid-row: 1; }
.mark span:nth-child(2) { grid-column: 1; grid-row: 2; }
.mark span:nth-child(3) { grid-column: 2; grid-row: 2; }
.mark span:nth-child(4) { grid-column: 3; grid-row: 2; }
.mark span:nth-child(5) { grid-column: 2; grid-row: 3; }
.card { position: relative; margin: auto 0; padding: clamp(36px, 6vw, 88px); overflow: hidden; border: 1px solid #e0e7e1; border-radius: 24px; background: #fff; box-shadow: 0 24px 70px #2846370b; }
.card::after { content: ""; position: absolute; width: 230px; height: 230px; top: -75px; right: -55px; border: 1px solid #d5e4d8; border-radius: 50%; box-shadow: 0 0 0 45px #f3f7f3, 0 0 0 46px #dce8df; pointer-events: none; }
.eyebrow { display: inline-block; color: #4d6b58; font-size: 12px; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; }
h1 { position: relative; z-index: 1; max-width: 740px; margin: 24px 0 22px; font-size: clamp(48px, 8vw, 102px); line-height: 1.03; font-weight: 650; letter-spacing: -.07em; }
.period { color: #83a18b; }
p { position: relative; z-index: 1; max-width: 575px; margin: 0; font-size: clamp(17px, 2vw, 20px); line-height: 1.65; color: #52625a; }
.note { display: flex; align-items: flex-start; gap: 11px; max-width: 575px; margin-top: 42px; padding-top: 25px; border-top: 1px solid #e7ede8; font-size: 14px; line-height: 1.55; color: #65746b; }
.note-dot { flex: 0 0 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: #7da78c; }
footer { display: flex; gap: 10px; padding-top: 28px; color: #829088; font-size: 12px; }
@media (max-width: 600px) { .frame { gap: 55px; padding-top: 26px; } .card { padding: 36px 26px; border-radius: 18px; } .card::after { width: 140px; height: 140px; top: -65px; right: -65px; } .note { margin-top: 34px; } footer { padding-top: 0; } }