/*==========================================================
HEYOUQUAN V5.2.1 Responsive Final
Part 1 : Foundation + Header + Hero
Status : Production Ready
==========================================================*/

/*==================================================
Header Responsive
V5.2 Premium Final
==================================================*/

/*========================
Tablet
========================*/

@media (max-width:1024px){

    .menu{

        display:none;

    }

    .menu-toggle{

        width:42px;

        height:42px;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:6px;

        cursor:pointer;

        background:none;

        border:0;

        padding:0;

    }

    .menu-toggle span{

        width:24px;

        height:2px;

        background:#23343b;

        transition:.35s;

        border-radius:2px;

    }

}


/*========================
Mobile Menu
========================*/

@media (max-width:768px){

    .menu{

        position:fixed;

        top:0;

        right:-100%;

        width:280px;

        height:100vh;

        background:#ffffff;

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:34px;

        transition:right .35s ease;

        box-shadow:-12px 0 40px rgba(0,0,0,.08);

        z-index:998;

    }

    .menu a{

        font-size:20px;

    }

    .menu.open{

        right:0;

    }

    body.menu-open{

        overflow:hidden;

    }

}
/*==========================================================
≤ 991px
Tablet
==========================================================*/

@media (max-width:991px){

.container{
    width:min(92%,1200px);
}

/*==================================================
Header
==================================================*/

.header{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);

}

.nav{

    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;

}

/* Logo */

.logo{

    gap:12px;
    flex-shrink:0;

}

.logo img{

    height:44px;
    width:auto;

}

.logo-title{

    font-size:16px;

}

.logo-sub{

    font-size:11px;

}

/* Navigation */

.menu{

    display:flex;
    gap:22px;

}

.menu a{

    font-size:14px;
    white-space:nowrap;

}

.menu a:nth-child(4){

    display:none;

}

.header .container{

    width:96%;

}
/* Right */

.nav-right{

    gap:6px;
    flex-shrink:0;

}

.nav-right .btn{

    padding:11px 18px;
    font-size:14px;
    white-space:nowrap;

}

/* Hamburger 暂时隐藏 */

.menu-toggle{

    display:none;

}

.section{
    padding:90px 0;
}


/* Hero */

.hero{

    padding:130px 0 90px;

}

.hero-wrapper{

    grid-template-columns:1fr;
    gap:60px;
    text-align:center;

}

.hero-content{

    max-width:760px;
    margin:auto;

}

.hero-content p{

    max-width:680px;
    margin:0 auto 36px;

}

.hero-buttons{

    justify-content:center;

}

.hero-data{

    justify-content:center;

}

.hero-image{

    order:2;

}

.hero-image img{

    max-width:500px;

}

.hero-card.card-1{

    left:20px;
    top:40px;

}

.hero-card.card-2{

    right:20px;
    top:170px;

}

.hero-card.card-3{

    left:40px;
    bottom:20px;

}

/*==================================================
Founder Premium
==================================================*/

/* Founder */

.founder{

    padding:90px 0 80px;

}

#founder .founder-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin-top:40px;

}

#founder .founder-image{

    margin-bottom:42px;

}

#founder .founder-image img{

    width:100%;

    max-width:340px;

    margin:auto;

    display:block;

    border-radius:26px;

}

#founder .founder-info{

    width:100%;

    max-width:720px;

}

.founder-info p{

    font-size:18px;

    line-height:1.9;

}

}

/*==========================================================
≤ 768px
Mobile
==========================================================*/

@media (max-width:768px){

/* ---------- Layout ---------- */

.section{

    padding:72px 0;

}

.container{

    width:min(92%,100%);
}



/* ---------- Header ---------- */

.header{

    background:rgba(255,255,255,.94);
    backdrop-filter:blur(16px);

}

.nav{

    height:72px;

}

.logo{

    gap:10px;

}

.logo img{

    height:42px;
    width:auto;

}

.logo-title{

    font-size:17px;

}

.logo-sub{

    font-size:11px;
    letter-spacing:1px;

}

.menu{

    display:none;

}

.nav-right{

    gap:10px;

}

.nav-right .btn{

    display:none;

}

.menu-toggle{

    display:flex;
    width:46px;
    height:46px;
    justify-content:center;
    align-items:center;
    border-radius:12px;

}

.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after{

    width:24px;

}



/* ---------- Hero ---------- */

.hero{

    padding:105px 0 60px;

}

.hero::before{

    width:460px;
    height:460px;
    right:-180px;
    top:-160px;
    opacity:.55;

}

.hero::after{

    width:380px;
    height:380px;
    left:-180px;
    bottom:-160px;
    opacity:.40;

}

.hero-wrapper{

    display:flex;
    flex-direction:column;
    gap:36px;

}

.hero-content{

    text-align:center;

}

.hero-content h1{

    font-size:42px;
    line-height:1.20;
    margin-bottom:20px;

}

.hero-content p{

    font-size:17px;
    line-height:1.85;
    margin-bottom:30px;
    max-width:100%;

}

.hero-buttons{

    flex-direction:column;
    align-items:center;
    gap:16px;
    margin-bottom:34px;

}

.hero-buttons .btn{

    width:260px;

}

.hero-image{

    width:100%;
    justify-content:center;

}

.hero-image img{

    width:100%;
    max-width:360px;
    border-radius:24px;

}



/* ---------- Data ---------- */

.hero-data{

    justify-content:center;
    gap:28px;

}

.hero-data-item{

    min-width:92px;

}

.hero-data-item h3{

    font-size:28px;

}

.hero-data-item p{

    font-size:14px;

}



/* ---------- Floating Cards ---------- */

.hero-card{

    display:none;

}



/* ---------- Scroll ---------- */

.scroll-down{

    display:none;

}

/* Founder Mobile */

#founder .founder-box{

    display:flex;

    flex-direction:column;

    gap:34px;

    align-items:center;

}

#founder .founder-image{

    width:100%;

    text-align:center;

}

#founder .founder-image img{

    display:block;
    
    width:220px;

    max-width:100%;

    margin:auto;

}

#founder .founder-info{

    width:100%;

    max-width:100%;

}

#founder .founder-info p{

    font-size:17px;

    line-height:1.9;

}

}



/*==========================================================
≤ 430px
iPhone
==========================================================*/

@media (max-width:430px){

.hero{

    padding:92px 0 52px;

}

.hero-content h1{

    font-size:36px;
    line-height:1.18;

}

.hero-content p{

    font-size:16px;
    line-height:1.80;

}

.hero-buttons{

    gap:14px;

}

.hero-buttons .btn{

    width:100%;
    max-width:320px;

}

.hero-image img{

    max-width:300px;

}

.hero-data{

    gap:20px;

}

.hero-data-item h3{

    font-size:24px;

}

.hero-data-item p{

    font-size:13px;

}

}



/*==========================================================
iPhone Safe Area
==========================================================*/

@supports (padding:max(0px)){

.header{

    padding-top:env(safe-area-inset-top);

}

}
/*==================================================
HEYOUQUAN V5.2.1
Module 01 Premium Polish
Responsive Frozen
==================================================*/


@media(max-width:1024px){

.brand-grid{

    grid-template-columns:1fr;

    gap:24px;

}

.brand-card{

    padding:36px;

}

}


@media(max-width:768px){

.brand-philosophy{

    padding:72px 0;

}

.brand-header{

    margin-bottom:50px;

}

.brand-tag{

    font-size:15px;

    letter-spacing:6px;

}

.brand-title{

    font-size:56px;

}

.brand-intro{

    font-size:17px;

}

.brand-grid{

    gap:20px;

    margin-top:50px;

}

.brand-card{

    border-radius:22px;

    padding:30px 26px;

}

.brand-icon{

    width:56px;

    height:56px;

    font-size:20px;

    margin-bottom:22px;

}

.brand-card h3{

    font-size:24px;

    margin-bottom:16px;

}

.brand-card p{

    font-size:16px;

    line-height:1.9;

}

.brand-card::after{

    left:26px;

    bottom:24px;

}

}


@media(max-width:480px){

.brand-title{

    font-size:46px;

    line-height:1.18;

}

.brand-intro{

    font-size:16px;

}

}
/*==================================================
HEYOUQUAN V5.2
Module 02
Question
Premium Responsive
==================================================*/


/*==================================================
iPad
==================================================*/

@media (max-width:1024px){

.section-light{

    padding:110px 0;

}

.section-tag{

    font-size:18px;

    letter-spacing:8px;

}

.section-title{

    font-size:60px;

    line-height:1.15;

    margin-top:22px;

}

.section-subtitle{

    max-width:760px;

    font-size:24px;

    line-height:1.9;

    margin:42px auto 90px;

}

.question-grid{

    grid-template-columns:1fr;

    gap:34px;

}

.question-card{

    padding:46px;

    border-radius:30px;

}

.question-card h3{

    font-size:48px;

    margin-bottom:30px;

}

.question-card p{

    font-size:26px;

    line-height:2;

}

.question-card a{

    font-size:24px;

    margin-top:34px;

}

}



/*==================================================
Mobile
==================================================*/

@media (max-width:768px){

.section-light{

    padding:80px 0;

}

.section-tag{

    font-size:15px;

    letter-spacing:5px;

    margin-bottom:18px;

}

.section-title{

    font-size:48px;

    line-height:1.15;

}

.section-subtitle{

    width:100%;

    max-width:100%;

    font-size:20px;

    line-height:1.9;

    margin:34px auto 60px;

}
#academy .section-subtitle{

    max-width:88%;

    font-size:18px;

    line-height:1.75;

    margin:28px auto 54px;

}

.question-grid{

    grid-template-columns:1fr;

    gap:24px;

}

.question-card{

    padding:36px 30px;

    border-radius:24px;

}

.question-card h3{

    font-size:34px;

    line-height:1.25;

    margin-bottom:24px;

}

.question-card p{

    font-size:19px;

    line-height:1.95;

}

.question-card a{

    font-size:19px;

    margin-top:26px;

}

}
/*==================================================
HEYOUQUAN V5.2.1
Module 03
Barrier Science
Premium Responsive
==================================================*/


/*==================================================
iPad
==================================================*/

@media (max-width:1024px){

.science-grid{

    grid-template-columns:1fr;

    gap:34px;

}

.science-card{

    padding:46px;

    border-radius:30px;

}

.science-card h3{

    font-size:48px;

    line-height:1.25;

    margin-bottom:28px;

}

.science-card p{

    font-size:26px;

    line-height:2;

}

.science-more{

    margin-top:70px;

    font-size:24px;

}

.science-more a{

    margin-left:18px;

    padding:18px 38px;

    font-size:22px;

}

}



/*==================================================
Mobile
==================================================*/

@media (max-width:768px){

.science-grid{

    grid-template-columns:1fr;

    gap:24px;

}

.science-card{

    padding:34px 30px;

    border-radius:24px;

}

#science .section-title{
    font-size:46px;
    max-width:520px;
    margin:auto;
    line-height:1.18;
}

#science .section-subtitle{
    margin-top:36px;
}

.science-card::before{

    width:48px;

    height:48px;

    margin-bottom:22px;

}

.science-card h3{

    font-size:34px;

    line-height:1.25;

    margin-bottom:22px;

}

.science-card p{

    font-size:19px;

    line-height:1.9;

}

.science-more{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

    margin-top:56px;

    font-size:20px;

    text-align:center;

}

.science-more a{

    margin-left:0;

    padding:16px 34px;

    border-radius:999px;

    font-size:18px;

}

}



/*==================================================
Small Mobile
==================================================*/

@media (max-width:430px){

.science-card{

    padding:30px 26px;

}

.science-card h3{

    font-size:30px;

}

.science-card p{

    font-size:17px;

    line-height:1.85;

}

.science-more{

    font-size:18px;

}

.science-more a{

    width:100%;

    max-width:280px;

    justify-content:center;

    font-size:17px;

}

}
/*======================================
V5.2 Module 04
Barrier Academy Responsive
======================================*/


/*======================================
Tablet
======================================*/

@media (max-width:1200px){

    .academy-grid{

        grid-template-columns:repeat(2,1fr);

        gap:28px;

    }

    .academy-card{

        min-height:360px;

        padding:42px;

    }

    .academy-card h3{

        font-size:34px;

        min-height:130px;

    }

    .academy-card p{

        font-size:18px;

    }

}


/*======================================
Mobile
======================================*/

@media (max-width:768px){

    .academy-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .academy-card{

        min-height:auto;

        padding:34px 30px;

        border-radius:24px;

    }

    .academy-card h3{

        font-size:28px;

        line-height:1.35;

        min-height:auto;

        margin-bottom:20px;

    }

    .academy-card p{

        font-size:17px;

        line-height:1.8;

        margin-bottom:24px;

    }

    .academy-card span{

        font-size:17px;

        margin-top:auto;

    }

}


/*======================================
Small Mobile
======================================*/

@media (max-width:480px){

    .academy-card{

        padding:28px 24px;

    }

    .academy-card h3{

        font-size:24px;

    }

    .academy-card p{

        font-size:16px;

    }

    .academy-card span{

        font-size:16px;

    }

}
/*=========================================
Module 05
Product Center
=========================================*/

#product{

    padding:120px 0;

}

#product .section-title{

    font-size:64px;

    line-height:1.08;

}

#product .section-subtitle{

    font-size:21px;

    line-height:1.8;

    max-width:760px;

    margin:28px auto 0;

}

/* Layout */

.product-box{

    margin-top:72px;

    grid-template-columns:1fr 1fr;

    gap:48px;

    align-items:center;

}

/* Image */

.product-image img{

    max-width:500px;

}

/* Tag */

.product-tag{

    font-size:14px;

    gap:6px;

    margin-bottom:24px;

}

/* Product Title */

.product-info h2{

    font-size:40px;

    margin-bottom:26px;

}

/* Description */

.product-info p{

    font-size:19px;

    line-height:1.9;

    margin-bottom:34px;

}

/* List */

.product-list{

    gap:18px;

    margin-bottom:40px;

}

.product-list li{

    font-size:24px;

}

.product-list li::before{

    width:12px;

    height:12px;

    margin-right:18px;

}

/* Button */

.product-info .btn-primary{

    padding:20px 52px;

    font-size:18px;

}

/*==================================================
HEYOUQUAN V5.2
Module 05
Product Responsive
==================================================*/


/*======================================
Tablet
======================================*/

@media (max-width:1024px){

    .product-box{

        gap:56px;

    }

    .product-image img{

        max-width:360px;

    }

}


/*======================================
Mobile
======================================*/

@media (max-width:768px){

    .product-box{

    display:grid;

    grid-template-columns:1fr;

    gap:42px;

}

    .product-image{

        width:100%;

        text-align:center;

    }

    .product-image img{

        display:block;

        width:260px;

        max-width:100%;

        margin:auto;

    }

    .product-info{

        width:100%;

        max-width:100%;

        text-align:left;

    }

    .product-tag{

        text-align:center;

        margin-bottom:24px;

    }

    .product-info h2{

        text-align:center;

        margin-bottom:22px;

    }

    .product-info p{

        font-size:17px;

        line-height:1.9;

    }

    .product-list{

        margin:30px 0;

    }

    .product-list li{

        font-size:17px;

        line-height:1.9;

    }

    .btn-primary{

        display:flex;

        justify-content:center;

        width:100%;

        max-width:320px;

        margin:auto;

    }

}


/*======================================
Small Mobile
======================================*/

@media (max-width:430px){

    .product-image img{

        width:220px;

    }

    .product-info h2{

        font-size:46px;

    }

}
/*==================================================
  Founder Premium Responsive
  iPad (≤991px)
==================================================*/

/* Hero */

.founder-hero{

    padding:120px 0 70px;

}

.founder-hero h1{

    font-size:72px;

    line-height:1.08;

    margin-bottom:28px;

}

.founder-hero .subtitle{

    font-size:32px;

    line-height:1.6;

    max-width:760px;

    margin:0 auto;

}

/*==================================================
Module 07
Contact Responsive
V5.2 Premium
==================================================*/


/*======================================
Tablet
======================================*/

@media (max-width:1024px){

    #contact{

        padding:120px 0;

    }

    .contact-grid{

        grid-template-columns:repeat(2,1fr);

        gap:28px;

        margin-top:64px;

    }

    .contact-card{

        padding:46px 34px;

    }

    .contact-icon{

        width:62px;

        height:62px;

        margin-bottom:24px;

    }

    .contact-card h3{

        font-size:24px;

    }

    .contact-card p{

        font-size:18px;

        line-height:1.8;

    }

}


/*======================================
Mobile
======================================*/

@media (max-width:768px){

    #contact{

        padding:90px 0;

    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:24px;

        margin-top:52px;

    }

    .contact-card{

        padding:42px 28px;

        border-radius:24px;

    }

    .contact-icon{

        width:60px;

        height:60px;

        margin-bottom:22px;

    }

    .icon-circle::before{

        width:20px;

        height:20px;

    }

    .icon-dot::before{

        width:14px;

        height:14px;

    }

    .icon-square::before{

        width:16px;

        height:16px;

    }

    .contact-card h3{

        font-size:22px;

        margin-bottom:16px;

    }

    .contact-card p{

        font-size:17px;

        line-height:1.8;

    }

}


/*======================================
Small Mobile
======================================*/

@media (max-width:430px){

    #contact{

        padding:80px 0;

    }

    .contact-grid{

        gap:20px;

    }

    .contact-card{

        padding:36px 24px;

    }

    .contact-icon{

        width:56px;

        height:56px;

    }

    .contact-card h3{

        font-size:20px;

    }

    .contact-card p{

        font-size:16px;

    }

}
/*==================================================
Module 08
Footer Responsive
V5.2 Premium
==================================================*/


/*======================================
Tablet
======================================*/

@media (max-width:1024px){


.footer{

    padding:90px 0 50px;

}


.footer-logo{

    font-size:56px;

}


.footer-en{

    font-size:22px;

    letter-spacing:.35em;

}


.footer-slogan{

    font-size:18px;

    line-height:2;

}


.footer-nav{

    margin-top:60px;

    gap:34px;

    flex-wrap:wrap;

    justify-content:center;

}


.footer-nav a{

    font-size:18px;

}


.footer-copy{

    margin-top:55px;

    font-size:15px;

}


}




/*======================================
Mobile
======================================*/


@media (max-width:768px){


.footer{

    padding:80px 0 45px;

    text-align:center;

}



/* Logo */

.footer-logo{

    font-size:46px;

    letter-spacing:.08em;

}


.footer-en{

    margin-top:12px;

    font-size:18px;

    letter-spacing:.32em;

}



/* Ending */

.footer-ending{

    margin-top:55px;

}


.ending-en{

    font-size:22px;

    line-height:1.9;

}


.ending-cn{

    font-size:18px;

    line-height:2;

    margin-top:22px;

}


/* Slogan */

.footer-slogan{

    margin-top:45px;

    font-size:16px;

    line-height:2;

}



/* Navigation */


.footer-nav{

    margin-top:55px;

    display:flex;

    flex-direction:column;

    gap:24px;

}


.footer-nav a{

    font-size:17px;

}



/* Divider */

.footer::after{

    width:120px;

}


/* Copyright */


.footer-copy{

    margin-top:40px;

    font-size:14px;

    line-height:2;

}



}





/*======================================
Small Mobile
======================================*/


@media (max-width:430px){


.footer{

    padding:70px 0 35px;

}



.footer-logo{

    font-size:40px;

}


.footer-en{

    font-size:16px;

}


.ending-en{

    font-size:20px;

}


.ending-cn{

    font-size:17px;

}


.footer-nav a{

    font-size:16px;

}


.footer-copy{

    font-size:13px;

}



}

/*======================================
Back Top Mobile
======================================*/

@media(max-width:768px){

.back-top{

    width:46px;

    height:46px;

    right:22px;

    bottom:calc(26px + env(safe-area-inset-bottom));
    
    font-size:20px;

}

}
/*==================================================
Mobile Navigation Final Fix
Phone only
==================================================*/

/* iPad、平板與桌機維持原有橫向選單 */
@media (min-width: 768px) {

    .menu {
        display: flex;
    }

    .menu-toggle {
        display: none;
    }

}


/* 手機版 */
@media (max-width: 767px) {

    .nav {
        position: relative;
    }


    /* 下拉選單 */

    .menu {
        position: absolute;

        top: calc(100% + 8px);
        left: 0;
        right: 0;

        z-index: 1000;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 0;
        padding: 12px;

        background: #ffffff;

        border: 1px solid #e3ecef;
        border-radius: 16px;

        box-shadow:
            0 18px 45px rgba(25, 56, 68, 0.14);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transform: translateY(-8px);

        transition:
            opacity 0.22s ease,
            transform 0.22s ease,
            visibility 0.22s ease;
    }


    .menu.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;

        transform: translateY(0);
    }


    /* 顯示全部六個選單項目 */

    .menu a,
    .menu a:nth-child(4) {
        display: block;
    }


    .menu a {
        padding: 12px 14px;

        border-radius: 10px;

        font-size: 16px;
        line-height: 1.5;
    }


    /* 手機選單不需要桌機底線動畫 */

    .menu a::after {
        display: none;
    }


    /* Hamburger 按鈕 */

    .menu-toggle {
        display: flex;

        flex-direction: column;
        justify-content: center;
        align-items: center;

        gap: 5px;

        width: 46px;
        height: 46px;

        padding: 0;

        border-radius: 12px;

        background: #f2f7f8;
    }


    /*
    關鍵修正：
    關閉舊 CSS 產生的 ::before、::after 線條，
    避免三個 span 疊成五條或更多線。
    */

    .menu-toggle > span {
        display: block;

        position: static;

        width: 22px;
        height: 2px;

        margin: 0;

        flex: 0 0 auto;

        background: #34484d;

        border-radius: 999px;

        transition:
            transform 0.22s ease,
            opacity 0.22s ease;
    }


    .menu-toggle > span::before,
    .menu-toggle > span::after {
        content: none;
        display: none;
    }


    /* 開啟後變成 X */

    .menu-toggle.is-open > span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }


    .menu-toggle.is-open > span:nth-child(2) {
        opacity: 0;
    }


    .menu-toggle.is-open > span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }


    .menu-toggle:focus-visible {
        outline: 2px solid #2d7c82;
        outline-offset: 3px;
    }

}

/*==========================================================
HEYOUQUAN Mobile Typography Calibration
Scope  : phone only (<= 767px)
Purpose: reduce visual pressure while preserving desktop layout
Added  : 2026-08-17
==========================================================*/

@media (max-width: 767px) {

    /* Homepage hero */
    .hero-content h1 {
        font-size: 36px;
        line-height: 1.22;
    }

    .hero-content p {
        font-size: 16px;
        line-height: 1.75;
    }

    /* Brand positioning and philosophy */
    .brand-position-title {
        font-size: 32px;
        line-height: 1.28;
    }

    .brand-position-intro,
    .brand-intro {
        font-size: 17px;
        line-height: 1.75;
    }

    .brand-title {
        font-size: 36px;
        line-height: 1.25;
    }

    .brand-card h3 {
        font-size: 25px;
        line-height: 1.35;
    }

    .brand-card p {
        font-size: 16px;
        line-height: 1.75;
    }

    /* Shared section hierarchy */
    .section-tag {
        font-size: 13px;
        letter-spacing: 4px;
    }

    .section-title,
    #academy .section-title,
    #product .section-title {
        font-size: 36px;
        line-height: 1.2;
    }

    #science .section-title {
        font-size: 34px;
        line-height: 1.25;
    }

    .section-subtitle,
    #academy .section-subtitle,
    #product .section-subtitle {
        font-size: 17px;
        line-height: 1.75;
    }

    /* Why / science cards */
    .question-card h3,
    .science-card h3 {
        font-size: 26px;
        line-height: 1.35;
    }

    .question-card p,
    .science-card p {
        font-size: 16px;
        line-height: 1.75;
    }

    .question-card a,
    .science-more,
    .science-more a {
        font-size: 16px;
    }

    /* Academy cards */
    .academy-card h3 {
        font-size: 24px;
        line-height: 1.35;
    }

    .academy-card p,
    .academy-card span,
    .academy-card .topic-link {
        font-size: 16px;
        line-height: 1.75;
    }

    /* Product, founder and contact */
    .product-info h2 {
        font-size: 30px;
        line-height: 1.25;
    }

    .product-info p,
    .product-list li,
    #founder .founder-info p,
    .contact-card p {
        font-size: 16px;
        line-height: 1.75;
    }

    .contact-card h3 {
        font-size: 21px;
        line-height: 1.35;
    }

    /* Slightly tighten oversized mobile section spacing */
    .section,
    .section-light {
        padding-top: 68px;
        padding-bottom: 68px;
    }

    .section-subtitle {
        margin-top: 26px;
        margin-bottom: 48px;
    }
}

@media (max-width: 430px) {

    .hero-content h1 {
        font-size: 32px;
    }

    .brand-title,
    .section-title,
    #academy .section-title,
    #product .section-title {
        font-size: 34px;
    }

    #science .section-title {
        font-size: 32px;
    }

    .brand-position-title {
        font-size: 30px;
    }

    .question-card h3,
    .science-card h3 {
        font-size: 24px;
    }

}