.qr-hero { overflow: hidden; padding-bottom: clamp(4rem,8vw,8rem); }
.qr-hero__grid { display: grid; gap: 3rem; align-items: center; }
.qr-hero h1 { font-size: clamp(2.8rem,5.5vw,5.8rem); line-height: 1.06; letter-spacing: -.055em; max-width: 12ch; margin: 1.4rem 0; }
.qr-hero__lead { max-width: 55ch; color: var(--on-dark-2); font-size: 1.07rem; line-height: 1.8; }
.qr-hero__notes { display: flex; flex-wrap: wrap; gap: .65rem 1.2rem; margin-top: 1.6rem; font-size: .78rem; color: var(--on-dark-2); }
.qr-hero__notes li::before { content: '✓'; color: var(--signal); padding-right: .4rem; }
.qr-hero__screens { position: relative; display: flex; justify-content: center; gap: 1rem; padding: 1.2rem 1rem 3rem; background: radial-gradient(ellipse at 50% 50%,#b3c28e18,transparent 70%); }
.qr-phone { width: 43%; max-width: 220px; background: #171819; padding: 7px; border: 1px solid #ffffff30; border-radius: 27px; box-shadow: 0 24px 60px #0007; transform: rotate(-5deg); }
.qr-phone:nth-child(2) { transform: translateY(36px) rotate(5deg); }
.qr-phone img { width: 100%; height: auto; aspect-ratio: 390/844; object-fit: cover; object-position: top; border-radius: 21px; }
.qr-phone figcaption { text-align: center; font-size: .65rem; padding: 10px 2px 4px; color: #ddd; }
.qr-hero__stamp { position: absolute; left: 0; bottom: -12px; background: var(--signal); color: #10120c; padding: 18px 22px; border-radius: 4px; font-size: .95rem; transform: rotate(-4deg); box-shadow: 0 10px 30px #0005; }
.qr-value-grid { display: grid; gap: 2rem; }
.qr-value-grid article { border-top: 1px solid #0003; padding-top: 1.2rem; }
.qr-value-grid .mono { color: #68734d; }.qr-value-grid h3 { font-size: 1.4rem; margin: 1rem 0 .7rem; line-height: 1.3; }.qr-value-grid p,.qr-tech p { color: var(--on-light-2); line-height: 1.8; }
.qr-examples { display: grid; gap: 2rem; margin: 2.5rem 0; }
.qr-example__screen { background: #222426; padding: 2rem; display: flex; justify-content: center; border: 1px solid #ffffff18; }
.qr-example__screen img { width: 100%; max-width: 230px; height: auto; aspect-ratio: 390/844; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 12px 35px #0005; }
.qr-examples h3 { font-size: 1.3rem; margin: 1.3rem 0 .3rem; }.qr-examples p { color: var(--on-dark-2); font-size: .9rem; }
.qr-tech { display: grid; gap: 1.5rem; }.qr-tech h3 { margin-bottom: .5rem; font-size: 1.1rem; }
.qr-guide { display: grid; gap: 2.8rem; max-width: 850px; margin: 4rem auto 0; }.qr-guide h2 { font-size: clamp(1.5rem,3vw,2rem); line-height: 1.2; margin-bottom: 1rem; }.qr-guide p { margin: .8rem 0; color: var(--on-light-2); line-height: 1.85; }
.qr-fine { font-size: .82rem; line-height: 1.7; opacity: .7; margin: 1.2rem 0; max-width: 80ch; }.qr-final { background: #172019; }.qr-final .section-title { margin: 1rem 0 1.5rem; }.qr-final p { line-height: 1.8; }.qr-final .phero__actions { margin-top: 2rem; }
@media(min-width:700px) { .qr-value-grid { grid-template-columns: 1fr 1fr; }.qr-examples { grid-template-columns: repeat(3,1fr); gap: 1.3rem; }.qr-example__screen { padding: 1.5rem; } }
@media(min-width:1000px) { .qr-hero__grid { grid-template-columns: 1.15fr 1fr; gap: 3.5rem; }.qr-hero__screens { padding-bottom: 5rem; } }
@media(max-width:600px) { .qr-hero__stamp { left: 1rem; }.qr-hero .phero__actions { align-items: stretch; flex-direction: column; }.qr-hero .btn { justify-content: center; }.qr-final .btn { max-width: 100%; white-space: normal; text-align: center; }.qr-final { padding-bottom: 185px; } }
