/* Riff Mates visual identity pass: friendly community, rehearsal-room energy. */
body{background:radial-gradient(circle at 8% 12%,rgba(15,92,80,.055) 0 1px,transparent 1.5px) 0 0/18px 18px,var(--cream)}
.site-header{height:82px;padding-top:3px;border-bottom:1px solid rgba(23,43,42,.08)}
.brand-logo{width:148px}.main-nav{gap:25px}
.hero{min-height:620px;padding-top:28px;padding-bottom:68px;gap:42px}
h1{font-size:clamp(48px,5.35vw,70px);margin:15px 0 20px;max-width:680px}
.hero-intro{font-size:17px;line-height:1.65;max-width:570px}
.search-card{margin-top:27px;border:1px solid rgba(15,92,80,.09);box-shadow:0 22px 55px rgba(9,63,57,.14)}
.search-card:focus-within{outline:3px solid rgba(239,115,87,.18);outline-offset:2px}
.hero-visual{min-height:520px;border-radius:30px;isolation:isolate;overflow:visible}
.hero-visual:after{content:"";position:absolute;inset:27px 6px 18px 42px;z-index:-3;border-radius:28px;background:#093f39;box-shadow:0 28px 65px rgba(9,63,57,.24);transform:rotate(1.5deg)}
.rehearsal-backdrop{position:absolute;inset:27px 6px 18px 42px;border-radius:28px;z-index:-2;overflow:hidden;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 8px,radial-gradient(circle at 78% 18%,rgba(241,199,91,.25),transparent 30%)}
.rehearsal-backdrop:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 15%,rgba(255,255,255,.045) 15.5%,transparent 16%,transparent 63%,rgba(255,255,255,.035) 63.5%,transparent 64%)}
.rehearsal-backdrop>b{position:absolute;right:24px;top:20px;color:rgba(255,255,255,.54);font:800 9px Manrope;letter-spacing:.22em}
.sound-line{position:absolute;height:2px;background:rgba(217,239,232,.35);border-radius:4px;transform-origin:left}
.line-one{width:86px;left:28px;top:64px;transform:rotate(12deg)}.line-two{width:54px;left:38px;top:78px;transform:rotate(-8deg)}.line-three{width:105px;right:24px;bottom:70px;transform:rotate(-12deg)}
.amp{position:absolute;bottom:30px;width:70px;height:88px;border:3px solid rgba(255,255,255,.22);border-radius:8px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0 2px,transparent 2px 5px)}
.amp:before{content:"•••";position:absolute;left:0;right:0;top:4px;height:18px;border-bottom:2px solid rgba(255,255,255,.18);color:#f1c75b;text-align:center;font:900 11px/14px sans-serif;letter-spacing:4px}
.amp-left{left:20px;transform:rotate(-3deg)}.amp-right{right:18px;width:58px;height:70px;transform:rotate(4deg)}
.sun{width:380px;height:380px;left:95px;top:72px;opacity:.93;background:#f1c75b}
.hero-visual>svg{width:103%;left:0;bottom:4px}.card-one{left:-12px;top:91px}.card-two{right:-8px;bottom:54px}.floating-card{border:1px solid rgba(15,92,80,.1)}
.how{padding-top:82px;padding-bottom:78px;position:relative;overflow:hidden}.how:before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,#0f5c50 0 46%,#ef7357 46% 67%,#f1c75b 67%)}
.section-heading{margin-bottom:43px}.steps{gap:44px}.step-icon{margin-bottom:20px}.levels{padding-top:100px;padding-bottom:100px}
.level-card{border:1px solid rgba(15,92,80,.14);border-top-width:6px;border-radius:15px;box-shadow:0 14px 32px rgba(9,63,57,.09);cursor:pointer;position:relative;overflow:hidden}
.level-card:after{content:"";position:absolute;inset:auto -30px -45px auto;width:110px;height:110px;border:1px solid rgba(15,92,80,.1);border-radius:50%}
.level-card:hover{border-color:rgba(15,92,80,.35);box-shadow:0 23px 48px rgba(9,63,57,.17)}.level-card:focus-within{outline:3px solid rgba(239,115,87,.25);outline-offset:3px}.level-card>a{display:inline-flex;align-items:center;min-height:38px}
.quote-section{background:linear-gradient(125deg,#093f39,#0f5c50 70%);position:relative;overflow:hidden}.quote-section:after{content:"";position:absolute;width:350px;height:350px;right:-120px;top:-130px;border:1px solid rgba(255,255,255,.12);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.02)}
.coming{padding-top:92px;padding-bottom:92px}.feature-grid article{transition:.2s;background:#fff}.feature-grid article:hover{transform:translateY(-4px);box-shadow:0 15px 32px rgba(9,63,57,.1);border-color:rgba(15,92,80,.28)}
.footer-brand .brand-logo{width:168px}
@media(max-width:950px){.hero{padding-top:48px}.hero-copy{max-width:720px;margin:auto}.hero-copy h1{margin-left:auto;margin-right:auto}.hero-visual{max-width:620px}.hero-visual:after,.rehearsal-backdrop{inset:27px 12px 18px}.sun{left:50%;transform:translateX(-50%)}}
@media(max-width:720px){.site-header{height:72px}.brand-logo{width:118px}.main-nav{top:68px}.hero{padding-top:35px}.hero h1{font-size:46px}.hero-visual{min-height:450px}.hero-visual:after,.rehearsal-backdrop{inset:30px 0 18px}.sun{width:330px;height:330px}.how{padding-top:70px;padding-bottom:63px}.section-heading{margin-bottom:36px}.levels{padding-top:75px;padding-bottom:75px}}
@media(max-width:430px){.hero h1{font-size:39px}.hero-visual{min-height:365px}.sun{width:270px;height:270px;top:62px}.hero-visual:after,.rehearsal-backdrop{inset:27px -5px 12px}.amp{transform:scale(.75)}.rehearsal-backdrop>b{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.floating-card{animation:none}.button,.level-card,.feature-grid article{transition:none}}