.hero { display: grid; grid-template-columns: 1fr 1.05fr; min-height: 706px; align-items: center; gap: 26px; padding-top: 60px; padding-bottom: 66px; }
.hero-copy { padding-bottom: 4px; position: relative; z-index: 1; }
.product-signature { display: flex; align-items: center; gap: 13px; }
.product-signature img { border-radius: 12px; flex: 0 0 auto; }
.product-signature strong { display: block; font-size: 20px; font-weight: 600; letter-spacing: .13em; }
.product-signature span { display: block; font-size: 10px; letter-spacing: .08em; color: var(--muted); margin-top: 5px; }
.hero h1 { font-family: var(--serif); font-size: clamp(42px, 4.7vw, 63px); font-weight: 500; line-height: 1.4; letter-spacing: -.035em; margin: 29px 0 23px; }
.hero h1 em { font-style: normal; color: var(--green); position: relative; display: inline-block; }
.hero h1 em::after { content: ""; position: absolute; bottom: 1px; left: 0; width: 100%; height: 7px; background: var(--gold); border-radius: 50%; opacity: .65; z-index: -1; transform: rotate(-1deg); }
.hero-description { font-size: 14px; color: var(--muted); line-height: 2.05; margin-bottom: 27px; }
.hero-footnote { display: flex; gap: 9px; align-items: center; font-size: 11px; color: var(--muted); margin-top: 24px; letter-spacing: .025em; }
.hero-footnote .small-dot { width: 4px; height: 4px; background: #a7b89a; }
.hero-scene { min-width: 0; position: relative; isolation: isolate; padding-top: 16px; }
.hero-art { position: relative; z-index: 1; width: 100%; height: auto; }
.scene-ring { position: absolute; border: 1px solid #d9dfcd; border-radius: 50%; pointer-events: none; }
.ring-one { width: 91%; height: 80%; top: 8%; left: 4%; transform: rotate(-20deg); }
.ring-two { width: 77%; height: 91%; top: 3%; left: 12%; transform: rotate(25deg); opacity: .45; }
.scene-caption { position: absolute; z-index: 2; top: 0; right: 35px; display: flex; align-items: center; gap: 12px; font-size: 10px; color: #617052; letter-spacing: .08em; }
.caption-line { width: 28px; height: 1px; background: #b2bda4; }
.floating-word { position: absolute; z-index: 3; left: 0; top: 27%; display: flex; align-items: center; gap: 12px; padding: 16px 16px 15px; border: 1px solid #ececdd; background: var(--white); border-radius: 8px; box-shadow: 0 12px 28px rgb(57 70 43 / 7%); transform: rotate(-5deg); }
.word-dot { display: block; width: 10px; height: 32px; border-radius: 8px; background: var(--gold); }
.floating-word b { font-family: Georgia, serif; font-size: 24px; font-weight: 400; letter-spacing: -.02em; }
.floating-word div span { display: block; margin-top: 7px; font-size: 9px; color: var(--muted); }
.word-number { align-self: flex-start; font-family: Georgia, serif; color: #68755b; font-size: 11px; margin-left: 16px; }
.floating-note { position: absolute; z-index: 3; right: 1%; bottom: 12%; display: flex; gap: 12px; align-items: center; background: #f2d994; border: 1px solid #e9ca7d; padding: 17px 20px; border-radius: 7px; transform: rotate(5deg); font-size: 11px; color: #5c583b; line-height: 1.9; box-shadow: 0 10px 24px rgb(84 74 38 / 5%); }
.floating-note b { font-size: 12px; font-weight: 500; }
.note-spark { font-size: 33px; line-height: 1; color: #7b885a; }
.scene-label { position: absolute; bottom: 7%; left: 8%; z-index: 3; font-size: 9px; color: #617052; letter-spacing: .08em; }
.rhythm-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rhythm-inner { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rhythm-inner p { font-family: var(--serif); font-size: 14px; letter-spacing: .11em; margin: 0; }
.rhythm-inner div { display: flex; align-items: center; gap: 22px; font-size: 10px; color: var(--muted); letter-spacing: .08em; }
.rhythm-inner i { width: 35px; height: 1px; background: #b8c0ad; }