/* Visual approval iteration — approved SarangAudio aesthetic */
:root{--ink:#0c0b19;--muted:#6d6c78;--accent:#ae0756;--cream:#fffaf8;--max:1380px;--shadow:0 28px 90px rgba(128,18,65,.13)}
body{background:#fffaf8;color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.container{width:min(calc(100% - 108px),var(--max))}
.eyebrow{display:none!important}
.site-header{background:#fffbf9;position:relative;z-index:4}
.header-inner{min-height:91px}
.brand{font-size:1.43rem;letter-spacing:-.052em}
.launch-pill{font-size:.84rem;background:#a40b50;padding:12px 22px}
/* visually connected hero; the source image now has alpha-feathered edges */
.hero{background:radial-gradient(ellipse 58% 88% at 81% 44%,#f7dce6 0%,#fff8f7 70%,transparent 100%),#fffbf9}
.hero-grid{grid-template-columns:44% 56%;min-height:770px}
.hero-copy{padding:12px 0 60px}
.hero h1{font-size:clamp(4.4rem,5.85vw,6.75rem);line-height:.97;letter-spacing:-.073em;font-weight:790;margin:0 0 34px;max-width:650px}
.hero-lede{font-size:clamp(1.45rem,2.12vw,2.1rem);line-height:1.34;color:#6e6f78;letter-spacing:-.025em;margin:0 0 26px}
.hero-desc{font-size:1.08rem;line-height:1.62;color:#6c6a76;margin:0 0 30px;max-width:500px}
.coming-cta{padding:13px 24px 13px 13px;background:#fbe7ed;color:#ab0a56;border:0;font-size:1rem;box-shadow:none}
.device-note{display:none}
.hero-visual{align-items:center;justify-content:center;isolation:isolate}
.hero-visual img{width:116%;max-width:none;transform:translate(6.7%, -1%);filter:none;object-fit:contain}
.hero::after{height:0}
/* Each feature section has enough vertical room, while art extends toward the edges */
.feature-section{min-height:525px}
.feature-grid{min-height:540px;grid-template-columns:42% 58%}
.feature-copy{padding:62px 15px 64px 0}
.feature-copy h2{font-size:clamp(3.45rem,4.3vw,5.15rem);line-height:1.035;letter-spacing:-.07em;margin-bottom:21px}
.feature-copy>p:not(.eyebrow){font-size:1.25rem;line-height:1.52;color:#6e6b77;max-width:490px}
.bass-section{background:linear-gradient(95deg,#fff6f4 0%,#fbe3e9 40%,#f8d9e4 70%,#fff0ee 100%);isolation:isolate}
.bass-section::before{content:"";position:absolute;inset:-25px -35px;background:url('/assets/wave-ribbon.svg') center center/cover no-repeat;opacity:1;z-index:0;pointer-events:none}
.bass-section::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#fff9f8 2%,#fff8f7d4 16%,transparent 49%,transparent 80%,#f7dce255 100%);z-index:0}
.bass-section .section-wave{display:none}
.bass-section .feature-grid{min-height:510px;grid-template-columns:45% 55%}
.bass-section .feature-copy{padding:55px 0;align-self:center;z-index:2}
.bass-art{height:500px;padding:0 3% 0 0;z-index:2;justify-content:flex-end}
.bass-bubble{width:min(100%,490px);padding:30px 34px 36px;box-shadow:0 26px 75px #9b1b5d39,0 1px 2px #fff inset;border:1px solid #fff8fb;background:#fae2eae8;backdrop-filter:blur(10px);transform:none;border-radius:25px}
.bass-title-row strong{font-size:1.3rem}
.pill-options span{background:#f3d2de;color:#594f5f}
.mode-list{margin-top:36px;gap:27px}
.mode-list>div{font-size:.88rem;font-weight:630}
/* EQ: genuinely sharp original app screenshot in a large floating panel */
.eq-section{background:linear-gradient(102deg,#fffcf9 3%,#fff7f6 44%,#fbe9f0 100%)}
.eq-grid{grid-template-columns:35% 65%;min-height:565px}
.eq-art{padding:50px 0 50px 20px}
.eq-art:before{background:url('/assets/wave-ribbon.svg') center/cover no-repeat;opacity:.29;inset:-9% -12% -17% -30%}
.eq-card{padding:25px 28px 11px;min-height:360px;background:linear-gradient(105deg,#fce8ec,#eadfef);border-radius:26px;border:1px solid #efd4e0;box-shadow:0 19px 56px #7310401a}
.eq-card-header strong{font-size:1.38rem}
.eq-card img{height:320px;width:100%;object-position:center}
.segmented{margin-top:28px}
.segmented button{min-width:125px}
/* Soft transparency removes the rectangular photography panels */
.autoeq-section{background:radial-gradient(ellipse 60% 90% at 28% 50%,#f8d8e5 0%,#fff5f5 69%,#fffaf8 100%)}
.autoeq-grid{grid-template-columns:54% 46%;min-height:600px}
.autoeq-art{height:600px;position:relative;overflow:visible}
.autoeq-art img{width:108%;max-width:none;transform:translateX(-8%);filter:none;object-fit:contain}
.autoeq-grid .feature-copy{padding-left:40px;padding-right:0}
.autoeq-grid .feature-copy h2{font-size:clamp(3.3rem,4.05vw,5.2rem)}
.headphone-types>span{background:#f9e5e9;border-radius:50%;width:63px;height:63px}
/* Spatial has no hard art boundaries and remains light, consistent with approval */
.spatial-section{background:radial-gradient(ellipse 56% 93% at 76% 55%,#f9cbdc 2%,#fbe7ed 62%,#fff7f6 100%)}
.spatial-grid{grid-template-columns:51% 49%;min-height:600px}
.spatial-art{height:600px;display:flex;align-items:center;justify-content:center}
.spatial-art img{width:111%;max-width:none;transform:translate(6%,0);filter:none}
.spatial-copy{padding-right:4px}
.effect-cards{margin-top:27px;gap:11px}
.effect-mini{padding:14px 10px;background:#fff8fac9;box-shadow:0 12px 35px #a62f5b11;border:1px solid #f3d9e3}
/* Supporting content mirrors approved compact but well-spaced layouts */
.music-app-section{background:#fffbf9;padding:75px 0 58px;border:0}
.app-strip{grid-template-columns:33% 67%}
.app-strip h2{font-size:clamp(2.35rem,2.95vw,3.8rem)}
.music-icon{width:62px;height:62px;border-radius:16px}
.music-apps{gap:10px}
.music-app{font-size:.78rem;font-weight:560}
.app-note{font-size:.75rem;margin-top:28px;color:#978a94}
.setup-section{background:linear-gradient(105deg,#fffbf9,#fdeaf0 64%,#fff9f7);padding:80px 0 78px}
.setup-grid{grid-template-columns:36% 64%}
.setup-copy h2{font-size:clamp(2.65rem,3.5vw,4.4rem)}
.setup-card{background:#fffbfbd9;border:1px solid #f0d7e2;min-height:240px;border-radius:24px;box-shadow:0 11px 28px #9c20580b}
.setup-steps{gap:15px;grid-template-columns:1fr 15px 1fr 15px 1fr}
.step-arrow{font-size:1.32rem}
.bottom-launch-section{padding:30px 0 75px;background:linear-gradient(160deg,#fff9f7,#f8dce6)}
.bottom-launch{min-height:215px;background:linear-gradient(100deg,#f9dce5,#fee9ee 58%,#f8d9e5);padding:28px 35px;box-shadow:none;border:1px solid #fff1f5;border-radius:32px}
.bottom-launch h2{font-size:clamp(2.1rem,2.7vw,3.15rem)}
.bottom-launch img{box-shadow:0 10px 30px #6c0a3433}
.bottom-launch::after{background-image:url('/assets/wave-ribbon.svg');opacity:.22}
.site-footer{background:radial-gradient(ellipse at 57% 40%,#661132,#3a051d 70%);padding:62px 0 31px;min-height:270px}
.footer-top{grid-template-columns:33% 48% 19%;padding-bottom:60px}
.footer-description{font-size:1.06rem}
.footer-mark{font-size:.85rem}
.footer-bottom{font-size:.83rem}
.reveal:not(.visible){transform:none}
@media (max-width:1150px){
  .container{width:min(calc(100% - 75px),var(--max))}
  .hero-grid{min-height:680px;grid-template-columns:45% 55%}
  .hero h1{font-size:clamp(3.6rem,5.5vw,5.7rem)}
  .hero-visual img{width:117%;transform:translate(4%,0)}
  .feature-copy h2{font-size:clamp(2.75rem,4.6vw,4.3rem)}
  .feature-copy>p:not(.eyebrow){font-size:1.07rem}
  .eq-grid{grid-template-columns:38% 62%}
  .eq-card img{height:270px}
  .autoeq-grid .feature-copy{padding-left:24px}
  .spatial-grid{grid-template-columns:50% 50%}
  .music-apps{gap:7px}
}
@media (max-width:800px){
 .container{width:min(calc(100% - 48px),var(--max))}
 .site-header{background:#fffbf9}
 .hero-grid{display:flex;flex-direction:column;min-height:0}
 .hero-copy{padding:62px 0 0}
 .hero h1{font-size:clamp(3.8rem,9vw,6.7rem);margin-bottom:28px}
 .hero-lede{font-size:1.48rem}
 .hero-desc{font-size:1.03rem}
 .hero-visual{height:580px;margin:-10px -30px 0;overflow:hidden}
 .hero-visual img{height:100%;width:auto;max-width:none;transform:none}
 .feature-grid,.eq-grid,.autoeq-grid,.spatial-grid{display:flex;flex-direction:column;min-height:0;padding-top:0;padding-bottom:0}
 .feature-copy{padding:66px 0 20px}
 .feature-copy h2{font-size:clamp(3rem,6.8vw,5rem)}
 .feature-copy>p:not(.eyebrow){font-size:1.08rem}
 .bass-section::before{background-size:auto 700px;background-position:50% 68%}
 .bass-section::after{background:linear-gradient(180deg,#fff9f5db 0%,transparent 61%,transparent 88%)}
 .bass-section .feature-grid{display:flex;flex-direction:column}
 .bass-section .feature-copy{padding:64px 0 10px}
 .bass-art{height:360px;width:100%;justify-content:center;padding:0}
 .eq-art{width:100%;padding:22px 0 58px}
 .eq-card{max-width:none}
 .eq-card img{height:280px}
 .autoeq-grid{display:flex;flex-direction:column}
 .autoeq-grid .feature-copy{order:0;padding:70px 0 15px}
 .autoeq-art{order:1;width:100%;height:500px;justify-content:center;margin:0}
 .autoeq-art img{width:auto;height:500px;max-width:115%;transform:none}
 .spatial-copy{padding:70px 0 10px}
 .spatial-art{height:520px;width:100%}
 .spatial-art img{width:auto;height:520px;max-width:114%;transform:none}
 .effect-cards{max-width:650px}
 .music-app-section{padding:60px 0}
 .app-strip{display:flex;flex-direction:column;gap:31px}
 .music-apps{grid-template-columns:repeat(4,minmax(0,1fr));gap:23px}
 .setup-grid{display:flex;flex-direction:column;gap:27px}
 .setup-steps{width:100%;max-width:700px}
 .bottom-launch{grid-template-columns:115px 1fr;padding:26px}
 .bottom-launch>p{grid-column:2}
 .footer-top{grid-template-columns:1fr 1fr;gap:23px}
}
@media (max-width:520px){
 .container{width:calc(100% - 38px)}
 .header-inner{min-height:75px}
 .brand{font-size:1.2rem}
 .launch-pill{font-size:.7rem;padding:10px 13px}
 .hero-copy{padding:53px 0 0}
 .hero h1{font-size:clamp(3.2rem,12.5vw,4.65rem);line-height:1.005;margin-bottom:20px}
 .hero-lede{font-size:1.19rem;margin-bottom:14px}
 .hero-desc{font-size:.95rem;margin-bottom:23px}
 .coming-cta{font-size:.78rem;padding:10px 15px 10px 10px}
 .hero-visual{height:410px;margin:0 -38px 0}
 .hero-visual img{height:420px;max-width:none;width:auto;transform:none}
 .feature-copy{padding:50px 0 14px}
 .feature-copy h2{font-size:clamp(2.43rem,10vw,3.25rem);margin-bottom:12px}
 .feature-copy>p:not(.eyebrow){font-size:.98rem;line-height:1.55}
 .bass-section .feature-copy{padding:55px 0 0}
 .bass-art{height:330px}
 .bass-bubble{max-width:345px;padding:23px 20px 26px}
 .mode-list{gap:15px;margin-top:24px}
 .mode-list>div{font-size:.76rem}
 .eq-art{padding:16px 0 60px}
 .eq-card{padding:16px 13px 12px;min-height:0;border-radius:19px}
 .eq-card-header strong{font-size:.95rem}
 .eq-card-header .preset-pill{font-size:.76rem}
 .eq-card img{height:180px}
 .segmented{margin-top:18px}
 .autoeq-grid .feature-copy{padding:55px 0 0}
 .headphone-types{gap:9px;margin-top:20px}
 .headphone-types>span{width:51px;height:51px}
 .autoeq-art{height:360px;margin-top:0}
 .autoeq-art img{height:365px;max-width:none}
 .spatial-copy{padding:52px 0 10px}
 .effect-cards{grid-template-columns:repeat(2,1fr);gap:9px}
 .effect-mini{padding:12px 8px;gap:5px}
 .effect-mini strong{font-size:.72rem}
 .effect-mini small{font-size:.67rem}
 .effect-mini .mini-on{display:none}
 .spatial-art{height:350px}
 .spatial-art img{height:370px;max-width:none}
 .music-app-section{padding:55px 0 43px}
 .app-strip h2{font-size:2.15rem}
 .music-apps{gap:19px 5px}
 .music-icon{height:54px;width:54px}
 .music-app{font-size:.64rem;white-space:normal}
 .setup-section{padding:55px 0 51px}
 .setup-copy h2{font-size:2.5rem}
 .setup-steps{display:flex;flex-direction:column;gap:9px}
 .setup-card{min-height:0;width:100%;padding:21px 20px 20px 74px;text-align:left}
 .step-art{left:10px;top:23px;margin:0;width:45px;height:45px}
 .step-number{top:5px;left:5px}
 .step-arrow{font-size:1rem}
 .bottom-launch-section{padding:12px 0 45px}
 .bottom-launch{grid-template-columns:85px 1fr;padding:20px;gap:9px 14px;border-radius:22px}
 .bottom-launch img{width:85px;height:85px;border-radius:19px}
 .bottom-launch h2{font-size:1.55rem}
 .bottom-launch>p{grid-column:1 / -1;font-size:.9rem}
 .site-footer{padding:43px 0 28px}
 .footer-top{display:flex;flex-direction:column;padding-bottom:35px;gap:20px}
 .footer-description{padding:0;border:0;font-size:.9rem}
 .footer-bottom{font-size:.74rem}
}
/* QA refinement: blend source artwork seamlessly into the section color. */
.autoeq-art img,.spatial-art img{mix-blend-mode:multiply}
.autoeq-section{background:linear-gradient(95deg,#fae7ec 0%,#fff5f5 53%,#fffaf8 89%)}
.spatial-section{background:linear-gradient(102deg,#fff9f8 1%,#fbe8ed 48%,#f8d6e2 100%)}
@media (max-width:800px){
 .hero-visual{margin:0 -24px; height:auto; overflow:visible}
 .hero-visual img{height:auto;width:min(100%,700px);max-width:none;object-fit:contain;transform:none}
}
@media (max-width:520px){
 .hero-visual{margin:0 -18px; height:auto; overflow:visible}
 .hero-visual img{width:100%;height:auto;max-width:none;object-fit:contain;transform:none}
}
@media (min-width:801px){
.autoeq-art img{-webkit-mask-image:linear-gradient(to right,#000 0%,#000 65%,transparent 99%);mask-image:linear-gradient(to right,#000 0%,#000 65%,transparent 99%)}
.spatial-art img{-webkit-mask-image:linear-gradient(to right,transparent 1%,#000 26%,#000 93%);mask-image:linear-gradient(to right,transparent 1%,#000 26%,#000 93%)}
}