/* =========================================
   BRAND YOUR AUDIO
   SOLUTIONS PAGE
========================================= */

*{
    box-sizing:border-box;
}


body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
    color:#0B1120;
}


/* =========================================
   CONTAINER
========================================= */

.container{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 25px;
}


/* =========================================
   SECTION LABEL
========================================= */

.section-label{
    color:#06B6D4;
    font-size:13px;
    font-weight:bold;
    letter-spacing:3px;
    margin-bottom:20px;
}


/* =========================================
   HERO
========================================= */

.solution-hero{
    padding:120px 20px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(6,182,212,.12),
            transparent 35%
        ),
        #0B1120;
    color:white;
}


.solution-hero .container{
    max-width:950px;
}


.solution-hero h1{
    max-width:850px;
    font-size:58px;
    line-height:1.1;
    letter-spacing:-1.5px;
    margin:0 0 30px;
}


.solution-hero .hero-description{
    max-width:780px;
    font-size:19px;
    line-height:1.8;
    color:#cbd5e1;
    margin-bottom:18px;
}


.hero-actions{
    display:flex;
    gap:15px;
    margin-top:40px;
    flex-wrap:wrap;
}


.solution-btn{
    display:inline-block;
    padding:15px 30px;
    border-radius:30px;
    text-decoration:none;
    font-weight:bold;
    transition:all .3s ease;
}


.solution-btn.primary{
    background:#06B6D4;
    color:white;
}


.solution-btn.primary:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(6,182,212,.3);
}


.solution-btn.secondary{
    border:1px solid rgba(255,255,255,.35);
    color:white;
}


.solution-btn.secondary:hover{
    background:white;
    color:#0B1120;
}


/* =========================================
   STORY
========================================= */

.solution-story{
    padding:110px 20px;
    background:white;
}


.solution-story .container{
    max-width:850px;
}


.solution-story h2{
    font-size:44px;
    line-height:1.25;
    letter-spacing:-1px;
    margin-bottom:30px;
}


.solution-story p{
    font-size:17px;
    line-height:1.85;
    color:#64748b;
    margin-bottom:20px;
}


/* =========================================
   FEATURES
========================================= */

.solution-features{
    padding:110px 20px;
    background:#f8fafc;
}


.solution-features h2{
    font-size:44px;
    line-height:1.25;
    margin-bottom:20px;
}


.section-intro{
    font-size:18px;
    color:#64748b;
    margin-bottom:55px;
}


.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}


.feature-card{
    background:white;
    padding:35px;
    border-radius:22px;
    border:1px solid #e5e7eb;
    transition:all .3s ease;
}


.feature-card:hover{
    transform:translateY(-6px);
    border-color:#06B6D4;
    box-shadow:0 18px 40px rgba(6,182,212,.08);
}


.feature-number{
    color:#06B6D4;
    font-size:13px;
    font-weight:bold;
    letter-spacing:2px;
    margin-bottom:20px;
}


.feature-card h3{
    font-size:22px;
    margin-bottom:15px;
}


.feature-card p{
    font-size:15px;
    line-height:1.75;
    color:#64748b;
}


/* =========================================
   CUSTOMER EXPERIENCE
========================================= */

.solution-experience{
    padding:110px 20px;
    background:white;
}


.experience-content{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:start;
}


.experience-content h2{
    font-size:44px;
    line-height:1.25;
    margin-bottom:25px;
}


.experience-content p{
    font-size:17px;
    line-height:1.8;
    color:#64748b;
}


.experience-list{
    display:flex;
    flex-direction:column;
    gap:15px;
}


.experience-list > div{
    padding:25px;
    border-left:3px solid #06B6D4;
    background:#f8fafc;
}


.experience-list strong{
    display:block;
    font-size:18px;
    margin-bottom:8px;
}


.experience-list span{
    display:block;
    font-size:15px;
    line-height:1.6;
    color:#64748b;
}


/* =========================================
   BENEFITS
========================================= */

.solution-benefits{
    padding:110px 20px;
    background:#f8fafc;
}


.solution-benefits h2{
    max-width:750px;
    font-size:44px;
    line-height:1.25;
    margin-bottom:55px;
}


.benefit-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}


.benefit-card{
    padding:35px;
    background:white;
    border-radius:20px;
    border:1px solid #e5e7eb;
}


.benefit-card h3{
    font-size:21px;
    margin-bottom:12px;
}


.benefit-card p{
    font-size:15px;
    line-height:1.75;
    color:#64748b;
}


/* =========================================
   CTA
========================================= */

.solution-cta{
    padding:110px 20px;
    text-align:center;
    background:
        radial-gradient(
            circle at 50% 100%,
            rgba(6,182,212,.18),
            transparent 45%
        ),
        #0B1120;
    color:white;
}


.solution-cta .container{
    max-width:800px;
}


.solution-cta .section-label{
    color:#06B6D4;
}


.solution-cta h2{
    font-size:48px;
    line-height:1.2;
    margin-bottom:25px;
}


.solution-cta p{
    font-size:18px;
    line-height:1.8;
    color:#cbd5e1;
    margin-bottom:20px;
}


.solution-cta .hero-actions{
    justify-content:center;
}


/* =========================================
   FOOTER
========================================= */

footer{
    padding:30px 20px;
    background:#050816;
    color:#94a3b8;
    text-align:center;
}


footer p{
    margin:0;
    font-size:14px;
}


/* =========================================
   MOBILE
========================================= */

@media(max-width:768px){

    .container{
        padding:0 20px;
    }


    .solution-hero{
        padding:80px 20px;
    }


    .solution-hero h1{
        font-size:40px;
        line-height:1.15;
    }


    .solution-hero .hero-description{
        font-size:16px;
        line-height:1.7;
    }


    .solution-story{
        padding:75px 20px;
    }


    .solution-story h2{
        font-size:34px;
    }


    .solution-features{
        padding:75px 20px;
    }


    .solution-features h2{
        font-size:34px;
    }


    .feature-grid{
        grid-template-columns:1fr;
    }


    .solution-experience{
        padding:75px 20px;
    }


    .experience-content{
        grid-template-columns:1fr;
        gap:45px;
    }


    .experience-content h2{
        font-size:34px;
    }


    .solution-benefits{
        padding:75px 20px;
    }


    .solution-benefits h2{
        font-size:34px;
    }


    .benefit-grid{
        grid-template-columns:1fr;
    }


    .solution-cta{
        padding:75px 20px;
    }


    .solution-cta h2{
        font-size:35px;
    }


    .solution-cta p{
        font-size:16px;
    }


    .hero-actions{
        flex-direction:column;
        align-items:flex-start;
    }


    .solution-btn{
        text-align:center;
        width:100%;
        max-width:280px;
    }


    .solution-cta .hero-actions{
        align-items:center;
    }

}


/* ==========================================================
   BYA RESTAURANT SALES FUNNEL V1
   ========================================================== */

.restaurant-funnel-overview{
    padding:70px 20px;
    background:#f7f9fc;
}

.restaurant-funnel-overview h2{
    max-width:780px;
    margin:12px auto 18px;
    text-align:center;
}

.restaurant-funnel-overview .section-label{
    text-align:center;
}

.restaurant-funnel-intro{
    max-width:760px;
    margin:0 auto 38px;
    text-align:center;
    line-height:1.7;
}

.restaurant-funnel-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    max-width:1100px;
    margin:0 auto;
}

.restaurant-funnel-card{
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    border-radius:16px;
    padding:28px 22px;
    text-align:center;
}

.restaurant-funnel-icon{
    font-size:30px;
    margin-bottom:15px;
}

.restaurant-funnel-card h3{
    margin:0 0 12px;
    font-size:19px;
}

.restaurant-funnel-card p{
    margin:0;
    line-height:1.65;
    font-size:15px;
}

.restaurant-funnel-action{
    margin-top:34px;
    text-align:center;
}


@media(max-width:900px){

    .restaurant-funnel-grid{
        grid-template-columns:repeat(2,1fr);
    }

}


@media(max-width:600px){

    .restaurant-funnel-overview{
        padding:55px 18px;
    }

    .restaurant-funnel-grid{
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   BYA RESTAURANT AUDIO PROOF
   ========================================================== */

.restaurant-audio-showcase{
    padding:90px 20px;
    color:#f8fafc;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(249,115,22,.16),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #111827,
            #1c1917
        );
}

.restaurant-audio-showcase .section-label{
    color:#fb923c;
    text-align:center;
}

.restaurant-audio-showcase h2{
    max-width:780px;
    margin:12px auto 18px;
    color:#fff;
    font-size:clamp(32px,4vw,48px);
    line-height:1.15;
    text-align:center;
}

.restaurant-audio-intro{
    max-width:760px;
    margin:0 auto 42px;
    color:#d6d3d1;
    font-size:18px;
    line-height:1.7;
    text-align:center;
}

.restaurant-audio-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:22px;
    max-width:1180px;
    margin:0 auto;
}

.restaurant-audio-card{
    position:relative;
    display:flex;
    flex-direction:column;
    padding:29px 25px;
    border:1px solid #44403c;
    border-radius:18px;
    background:
        linear-gradient(
            155deg,
            rgba(41,37,36,.97),
            rgba(24,24,27,.97)
        );
    box-shadow:
        0 18px 42px rgba(0,0,0,.24);
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.restaurant-audio-card:hover,
.restaurant-audio-card.is-playing{
    transform:translateY(-5px);
    border-color:#fb923c;
    box-shadow:
        0 24px 55px rgba(0,0,0,.34),
        0 0 0 1px rgba(251,146,60,.12);
}

.restaurant-audio-card.featured{
    border-color:#c2410c;
}

.restaurant-audio-step{
    position:absolute;
    top:18px;
    right:21px;
    color:rgba(214,211,209,.2);
    font-size:43px;
    font-weight:900;
    line-height:1;
}

.restaurant-audio-type{
    align-self:flex-start;
    margin-bottom:17px;
    padding:7px 10px;
    border-radius:999px;
    color:#ffedd5;
    background:#9a3412;
    font-size:11px;
    font-weight:900;
    letter-spacing:.09em;
}

.restaurant-audio-card h3{
    max-width:88%;
    margin:0 0 12px;
    color:#fff;
    font-size:22px;
    line-height:1.3;
}

.restaurant-audio-card p{
    flex:1;
    margin:0 0 18px;
    color:#d6d3d1;
    line-height:1.65;
}

.restaurant-audio-voice{
    margin-bottom:15px;
    color:#fdba74;
    font-size:13px;
    font-weight:800;
}

.restaurant-audio-card audio{
    display:block;
    width:100%;
    height:45px;
    border-radius:10px;
}

.restaurant-demo-note{
    max-width:740px;
    margin:25px auto 0;
    color:#a8a29e;
    font-size:13px;
    line-height:1.6;
    text-align:center;
}

.restaurant-audio-action{
    max-width:760px;
    margin:46px auto 0;
    padding:30px;
    border:1px solid #57534e;
    border-radius:17px;
    background:rgba(28,25,23,.76);
    text-align:center;
}

.restaurant-audio-action h3{
    margin:0 0 9px;
    color:#fff;
    font-size:26px;
}

.restaurant-audio-action p{
    margin:0 auto 22px;
    color:#d6d3d1;
    line-height:1.65;
}

.restaurant-audio-action .solution-btn{
    display:inline-flex;
    width:auto;
    max-width:none;
}


@media(max-width:950px){

    .restaurant-audio-grid{
        grid-template-columns:1fr;
        max-width:650px;
    }

    .restaurant-audio-card p{
        min-height:0;
    }

}


@media(max-width:600px){

    .restaurant-audio-showcase{
        padding:65px 18px;
    }

    .restaurant-audio-card{
        padding:25px 20px;
    }

    .restaurant-audio-action{
        padding:25px 19px;
    }

    .restaurant-audio-action .solution-btn{
        width:100%;
    }

}


/* ==========================================================
BYA RESTAURANT CONSULTATION FORM
========================================================== */

.restaurant-consultation{
padding:85px 20px;
background:#07111f;
color:#e2e8f0;
}

.restaurant-consultation .container{
max-width:900px;
}

.restaurant-consultation .section-label{
text-align:center;
color:#7dd3fc;
}

.restaurant-consultation h2{
max-width:760px;
margin:12px auto 18px;
text-align:center;
color:#fff;
}

.restaurant-consultation-intro{
max-width:720px;
margin:0 auto 38px;
text-align:center;
color:#cbd5e1;
line-height:1.75;
}

#restaurant-consultation-form{
padding:30px;
border:1px solid #334155;
border-radius:18px;
background:#111827;
box-shadow:0 22px 55px rgba(0,0,0,.25);
}

.restaurant-form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}

.restaurant-form-grid label span{
display:block;
margin-bottom:8px;
color:#e2e8f0;
font-size:13px;
font-weight:700;
}

.restaurant-form-grid input,
.restaurant-form-grid select,
.restaurant-form-grid textarea{
width:100%;
padding:13px 14px;
border:1px solid #475569;
border-radius:9px;
color:#fff;
background:#0b1220;
font:inherit;
}

.restaurant-form-grid textarea{
resize:vertical;
line-height:1.6;
}

.restaurant-form-grid input:focus,
.restaurant-form-grid select:focus,
.restaurant-form-grid textarea:focus{
outline:2px solid #38bdf8;
outline-offset:1px;
border-color:#38bdf8;
}

.restaurant-form-full{
grid-column:1/-1;
}

.restaurant-form-honeypot{
position:absolute;
left:-10000px;
width:1px;
height:1px;
overflow:hidden;
}

.restaurant-form-consent{
display:flex;
align-items:flex-start;
gap:10px;
margin:22px 0;
color:#cbd5e1;
font-size:13px;
line-height:1.6;
}

.restaurant-form-consent input{
margin-top:3px;
}

.restaurant-submit{
display:block;
width:100%;
border:0;
cursor:pointer;
}

.restaurant-submit:disabled{
opacity:.65;
cursor:wait;
}

.restaurant-form-status{
min-height:24px;
margin-top:18px;
text-align:center;
font-size:14px;
font-weight:700;
}

.restaurant-form-status.success{
color:#86efac;
}

.restaurant-form-status.error{
color:#fca5a5;
}

@media(max-width:700px){

.restaurant-consultation{
padding:60px 18px;
}

#restaurant-consultation-form{
padding:22px 17px;
}

.restaurant-form-grid{
grid-template-columns:1fr;
}

.restaurant-form-full{
grid-column:auto;
}

}

/* BYA RESTAURANT MUSIC RIGHTS EDUCATION */

.restaurant-rights-education{
    padding:90px 24px;
    background:
        linear-gradient(
            135deg,
            #f8fafc 0%,
            #eff6ff 100%
        );
    color:#172033;
}


.restaurant-rights-heading{
    max-width:820px;
    margin:0 auto 42px;
    text-align:center;
}


.restaurant-rights-heading h2{
    margin:12px 0 18px;
    color:#07111f;
    font-size:clamp(30px,4vw,48px);
    line-height:1.15;
}


.restaurant-rights-heading p{
    margin:0;
    color:#475569;
    font-size:18px;
    line-height:1.75;
}


.restaurant-rights-grid{
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:24px;
    max-width:1180px;
    margin:0 auto;
}


.restaurant-rights-card{
    padding:30px;
    border:1px solid #dbeafe;
    border-radius:18px;
    background:#ffffff;
    box-shadow:
        0 16px 40px
        rgba(15,23,42,.08);
}


.restaurant-rights-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    margin-bottom:20px;
    border-radius:14px;
    background:#e0f2fe;
    font-size:25px;
}


.restaurant-rights-card h3{
    margin:0 0 14px;
    color:#0f172a;
    font-size:21px;
    line-height:1.35;
}


.restaurant-rights-card p{
    margin:0;
    color:#475569;
    font-size:16px;
    line-height:1.75;
}


.restaurant-rights-assurance{
    max-width:920px;
    margin:34px auto 0;
    padding:34px;
    border-radius:20px;
    background:#07111f;
    color:#e2e8f0;
    text-align:center;
    box-shadow:
        0 20px 50px
        rgba(7,17,31,.18);
}


.restaurant-rights-assurance h3{
    margin:0 0 16px;
    color:#ffffff;
    font-size:26px;
}


.restaurant-rights-assurance p{
    margin:0 auto 18px;
    max-width:790px;
    color:#dbeafe;
    font-size:17px;
    line-height:1.75;
}


.restaurant-rights-assurance
.restaurant-rights-note{
    padding:16px;
    border:1px solid rgba(147,197,253,.28);
    border-radius:12px;
    background:rgba(30,58,138,.22);
    color:#bfdbfe;
    font-size:13px;
}


.restaurant-rights-assurance
.solution-btn{
    margin-top:8px;
}


@media(max-width:900px){

    .restaurant-rights-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:600px){

    .restaurant-rights-education{
        padding:65px 18px;
    }

    .restaurant-rights-card,
    .restaurant-rights-assurance{
        padding:24px;
    }

    .restaurant-rights-heading p{
        font-size:16px;
    }

}



/* =========================================
   BYA RESTAURANT LANDING VIDEO V1
   ========================================= */

.restaurant-video-presentation {
    padding: 84px 0;
    background:
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 100%
        );
}

.restaurant-video-presentation .container {
    text-align: center;
}

.restaurant-video-presentation h2 {
    max-width: 820px;
    margin: 12px auto 18px;
}

.restaurant-video-intro {
    max-width: 780px;
    margin: 0 auto 34px;
    color: #475569;
    line-height: 1.75;
}

.restaurant-video-frame {
    max-width: 1080px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 22px;
    background: #020617;
    box-shadow:
        0 26px 70px rgba(15, 23, 42, 0.18);
    aspect-ratio: 16 / 9;
}

.restaurant-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #020617;
}

@media (max-width: 768px) {
    .restaurant-video-presentation {
        padding: 58px 0;
    }

    .restaurant-video-intro {
        margin-bottom: 24px;
    }

    .restaurant-video-frame {
        border-radius: 14px;
    }
}