/* ======================================
   3HC BIBLE QUIZ PRODUCT PAGE
====================================== */


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

.quiz-hero{
    padding:70px 0 55px;
    background:
        radial-gradient(circle at top right,#18365d 0%,#10213e 45%,#0d1a32 100%);
    overflow:hidden;
    position:relative;
    color:#fff;
}

.quiz-hero .wrap{
    max-width:1500px;
    padding-left:18px;
    padding-right:18px;
}

.quiz-hero::before{
    content:"";
    position:absolute;
    right:-180px;
    top:-180px;
    width:550px;
    height:550px;
    border-radius:50%;
    background:rgba(255,255,255,.03);
    filter:blur(10px);
    pointer-events:none;
}

.hero-grid{
    display:grid;
    grid-template-columns:54% 46%;
    align-items:center;
    gap:42px;
}

.hero-copy{
    position:relative;
    z-index:2;
}

.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(212,168,61,.45);
    color:#d4a83d;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:26px;
}

.hero-copy h1,
.quiz-hero h1{
    font-family:"Fraunces",serif;
    font-size:clamp(3.4rem,5vw,5.2rem);
    line-height:1.05;
    letter-spacing:-.03em;
    font-weight:700;
    color:#fff;
    max-width:780px;
    margin:0 0 24px;
}

.hero-copy h1 span{
    color:#d4a83d;
}

.hero-text{
    max-width:700px;
    font-size:1.22rem;
    line-height:1.9;
    color:rgba(255,255,255,.84);
    margin-bottom:38px;
}


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

.hero-highlights{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    width:100%;
    margin:34px 0 36px;
}

.hero-highlights .pill{
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    padding:14px 22px;
    border-radius:999px;
    background:#28427d;
    color:#fff;
    font-size:16px;
    font-weight:600;
    border:1px solid rgba(255,255,255,.08);
    transition:.35s ease;
}

.hero-highlights .pill:hover{
    transform:translateY(-3px);
    background:#284a88;
    box-shadow:0 16px 35px rgba(0,0,0,.25);

}

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

.hero-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;
    margin-top:12px;
}

.hero-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    height:60px;
    padding:0 34px;
    border-radius:999px;
    font-size:18px;
    font-weight:700;
    text-decoration:none;
    transition:.35s ease;
}

.hero-btn-primary{
    background:#df4a3b;
    color:#fff;
    box-shadow:0 18px 45px rgba(223,74,59,.35);
}

.hero-btn-primary:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 55px rgba(223,74,59,.45);
}

.hero-btn-secondary{
    background:transparent;
    color:#fff;
    border:2px solid rgba(255,255,255,.18);
}

.hero-btn-secondary:hover{
    background:rgba(255,255,255,.06);
    transform:translateY(-4px);
}

.hero-btn img{
    width:20px;
    height:20px;
}


/* ===========================
   HERO ART / PHONE STAGE
=========================== */

.hero-art{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:700px;
}

.phone-stage{
    position:relative;
    width:640px;
    height:640px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:42px;
    background:
        linear-gradient(145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    box-shadow:0 40px 100px rgba(0,0,0,.35);
    overflow:visible;
}

.phone-stage::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:
        radial-gradient(circle,
        rgba(212,168,61,.40) 0%,
        rgba(212,168,61,.18) 45%,
        transparent 72%);
    filter:blur(45px);
    animation:floatCard 8s ease-in-out infinite;
}

.phone-stage::after{
    content:"";
    position:absolute;
    inset:18px;
    border-radius:30px;
    background:
        radial-gradient(circle at top,
        rgba(255,255,255,.10),
        transparent 70%);
    pointer-events:none;
}


/* ===========================
   PHONE IMAGES
=========================== */

.phone{
    position:absolute;
    width:225px;
    border-radius:28px;
    overflow:hidden;
    filter:drop-shadow(0 28px 60px rgba(0,0,0,.35));
    transition:.35s;
}

.phone:hover{
    filter:drop-shadow(0 40px 80px rgba(0,0,0,.45));
}

.center-phone{
    z-index:10;
    width:245px;
    animation:floatCenterPhone 5s ease-in-out infinite;
}

.left-phone{
    left:55px;
    opacity:.92;
    z-index:5;
    animation:floatLeftPhone 6s ease-in-out infinite;
}

.right-phone{
    right:55px;
    opacity:.92;
    z-index:5;
    animation:floatRightPhone 6.5s ease-in-out infinite;
}


/* ===========================
   FLOATING HERO STATS
=========================== */

.hero-stat-card{
    position:absolute;
    background:rgba(255,255,255,.96);
    border-radius:22px;
    padding:18px 24px;
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    backdrop-filter:blur(18px);
    min-width:170px;
    z-index:20;
    animation:floatCard 6s ease-in-out infinite;
}

.hero-stat-card strong{
    display:block;
    font-size:2rem;
    font-family:"Fraunces",serif;
    color:#071528;
    margin-bottom:4px;
}

.hero-stat-card span{
    color:#6b7280;
    font-weight:700;
    font-size:.95rem;
}

.stat-downloads{
    top:55px;
    left:-45px;
    animation-delay:1.5s;
}

.stat-books{
    top:220px;
    right:-70px;
    animation-delay:.5s;
}

.stat-countries{
    bottom:80px;
    right:-30px;
    animation-delay:1s;
}


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

@keyframes floatCenterPhone{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-12px); }
    100%{ transform:translateY(0); }
}

@keyframes floatLeftPhone{
    0%{ transform:rotate(-16deg) translateY(30px); }
    50%{ transform:rotate(-16deg) translateY(18px); }
    100%{ transform:rotate(-16deg) translateY(30px); }
}

@keyframes floatRightPhone{
    0%{ transform:rotate(16deg) translateY(30px); }
    50%{ transform:rotate(16deg) translateY(18px); }
    100%{ transform:rotate(16deg) translateY(30px); }
}

@keyframes floatCard{
    0%{ transform:translateY(0); }
    50%{ transform:translateY(-8px); }
    100%{ transform:translateY(0); }
}


/* ===========================
   LEGACY / EXISTING FEATURE CARDS
=========================== */

.quiz-highlight{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:28px;
    margin-top:70px;
}

.highlight-card{
    background:#fff;
    padding:34px;
    border-radius:24px;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:.3s;
    text-align:center;
}

.highlight-card:hover{
    transform:translateY(-8px);
}

.highlight-card .icon{
    font-size:2.8rem;
    margin-bottom:18px;
}

.feature{
    border-radius:24px;
}

.store-banner{
    margin-top:80px;
    padding:70px 50px;
    border-radius:30px;
    background:linear-gradient(135deg,#0d223f,#1d4373);
    text-align:center;
    color:#fff;
}

.store-banner h2{
    color:#fff;
    font-size:clamp(2rem,4vw,3rem);
    margin-bottom:18px;
}

.store-banner p{
    max-width:700px;
    margin:auto auto 30px;
    line-height:1.8;
    opacity:.92;
}

.badge-row{
    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:28px;
}

.badge{
    padding:12px 20px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;
    font-weight:600;
    backdrop-filter:blur(8px);
}

.screenshot-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:24px;
    margin-top:60px;
}

.screenshot{
    aspect-ratio:9/16;
    border-radius:22px;
    background:linear-gradient(135deg,#d8dde8,#f6f8fb);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#7d8895;
    font-weight:700;
    box-shadow:0 16px 40px rgba(0,0,0,.08);
}


/*==========================================
  LEARNING PATHS
==========================================*/

.learning-paths{
    padding:110px 0;
    background:#f7f3ec;
}

.paths-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
    margin-top:60px;
}

.path-card{
    background:#fff;
    padding:36px;
    border-radius:28px;
    box-shadow:0 18px 50px rgba(0,0,0,.08);
    transition:.35s;
    text-align:center;
    border:1px solid rgba(0,0,0,.05);
}

.path-card:hover{
    transform:translateY(-10px);
    box-shadow:0 26px 65px rgba(0,0,0,.12);
    border-color:#d4a83d;
}

.path-icon{
    font-size:3rem;
    margin-bottom:24px;
}

.path-card h3{
    font-size:1.6rem;
    margin-bottom:18px;
    color:#071528;
}

.path-card p{
    color:#5c6574;
    line-height:1.8;
    margin-bottom:28px;
}

.path-card span{
    display:inline-block;
    padding:10px 18px;
    background:#fff8e7;
    border-radius:999px;
    font-weight:700;
    color:#b88a17;
    border:1px solid #ecd7a3;
}


/*==========================================
  PREMIUM FEATURE SHOWCASE
==========================================*/

.premium-showcase-section{
    width:100vw;
    margin-left:calc(50% - 50vw);
    margin-right:calc(50% - 50vw);
    padding:60px 36px;
    background:#f7f3ec;
}

.premium-showcase-card{
    width:100%;
    max-width:none;
    margin:0;
    padding:48px 56px;
    display:grid;
    grid-template-columns:58% 42%;
    gap:60px;
    align-items:center;
    background:#fff;
    border-radius:30px;
    box-shadow:0 24px 70px rgba(0,0,0,.10);
    border:1px solid rgba(0,0,0,.06);
    transition:transform .35s ease, box-shadow .35s ease;
}

.premium-showcase-card:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 90px rgba(0,0,0,.14);
}

.premium-showcase-left{
    position:relative;
    height:100%;
    min-height:560px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding-top:18px;
}

.premium-carousel-window{
    width:100%;
    height:100%;
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border-radius:22px;
    background:#fff;
}

.premium-carousel-slide{
    display:none;
    width:100%;
    height:100%;
}

.premium-carousel-slide.active{
    display:flex;
    align-items:center;
    justify-content:center;
}

.premium-carousel-slide img{
    width:100%;
    height:auto;
    max-height:610px;
    object-fit:contain;
    display:block;
    border-radius:20px;
}

.premium-showcase-right{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:10px 0;
}

.premium-showcase-right .eyebrow{
    display:block;
    margin-bottom:14px;
}

.premium-showcase-right h2,
.premium-showcase-right h3{
    font-size:2.65rem;
    line-height:1.22;
    letter-spacing:-.02em;
    margin:14px 0 40px;
    color:#111827;
    max-width:560px;
}

.premium-highlights{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.premium-highlights li{
    position:relative;
    padding-left:42px;
    font-size:1.18rem;
    font-weight:500;
    line-height:1.75;
    color:#1f2937;
}

.premium-highlights li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:7px;
    width:24px;
    height:24px;
    border-radius:50%;
    background:#d4a83d;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:.82rem;
    font-weight:800;
}

.premium-tech{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:nowrap;
    gap:8px;
    padding:0 18px;
    margin-top:42px;
    margin-bottom:42px;
}

.premium-tech span{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:11px 10px;
    border:1px solid #ead8b3;
    border-radius:999px;
    background:#fffdf8;
    font-size:.95rem;
    font-weight:700;
    white-space:nowrap;
    color:#1f2937;
    transition:all .25s ease;
}

.premium-tech span:hover{
    transform:translateY(-3px);
    box-shadow:0 8px 18px rgba(212,168,61,.18);
    border-color:#d4a83d;
}

.premium-tech span img{
    width:20px;
    height:20px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
}

.premium-studio-note{
    border-top:1px solid #ececec;
    padding-top:34px;
    margin-top:12px;
    margin-bottom:40px;
    display:flex;
    align-items:flex-start;
    gap:22px;
}

.premium-studio-note span{
    font-size:2rem;
    line-height:1;
    color:#d4a83d;
}

.premium-studio-note p{
    margin:0;
    font-size:1rem;
    line-height:1.55;
    color:#4b5563;
}

.premium-studio-note strong{
    color:#111827;
    font-size:1.1rem;
}

.premium-showcase-actions{
    display:flex;
    gap:18px;
}

.premium-showcase-actions a{
    height:58px;
    min-width:190px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    text-decoration:none;
    font-size:1rem;
    font-weight:800;
    transition:.25s;
}

.premium-play-btn{
    background:#d4a83d;
    color:#fff;
    box-shadow:0 12px 30px rgba(212,168,61,.28);
    gap:10px;
}

.premium-play-btn img{
    width:24px;
    height:24px;
    object-fit:contain;
    display:block;
    flex-shrink:0;
}

.premium-learn-btn{
    background:#fff;
    color:#111827;
    border:2px solid #d4a83d;
}

.premium-showcase-actions a:hover{
    transform:translateY(-3px);
}

.premium-carousel-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#d4a83d;
    font-size:28px;
    font-weight:800;
    box-shadow:0 12px 32px rgba(0,0,0,.14);
    cursor:pointer;
    z-index:20;
}

.premium-prev{
    left:-28px;
}

.premium-next{
    right:-28px;
}

.premium-carousel-dots{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-top:22px;
}

.premium-carousel-dots button{
    width:12px;
    height:12px;
    border:none;
    border-radius:50%;
    background:#ddd;
    cursor:pointer;
}

.premium-carousel-dots button.active{
    background:#d4a83d;
}


/*==========================================
  RESPONSIVE
==========================================*/

@media(max-width:1200px){

    .hero-grid{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-copy h1,
    .quiz-hero h1{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-text{
        margin-left:auto;
        margin-right:auto;
    }

    .hero-pills,
    .hero-buttons{
        justify-content:center;
    }

    .hero-art{
        min-height:620px;
        margin-top:60px;
    }

    .premium-showcase-card{
        grid-template-columns:1fr;
        gap:35px;
    }

    .premium-showcase-left,
    .premium-showcase-right{
        min-height:auto;
    }

    .premium-showcase-right{
        padding:20px 0;
    }

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

@media(max-width:700px){

    .quiz-hero{
        padding:75px 0 55px;
    }

    .hero-copy h1,
    .quiz-hero h1{
        font-size:clamp(2.7rem,12vw,3.8rem);
    }

    .hero-text{
        font-size:1.05rem;
    }

    .phone-stage{
        width:100%;
        max-width:420px;
        height:450px;
        border-radius:28px;
    }

    .phone{
        width:145px;
    }

    .center-phone{
        width:165px;
    }

    .left-phone{
        left:22px;
    }

    .right-phone{
        right:22px;
    }

    .hero-stat-card{
        min-width:130px;
        padding:13px 16px;
    }

    .hero-stat-card strong{
        font-size:1.45rem;
    }

    .hero-stat-card span{
        font-size:.82rem;
    }

    .stat-downloads{
        left:0;
        top:35px;
    }

    .stat-books{
        right:0;
        top:180px;
    }

    .stat-countries{
        right:25px;
        bottom:45px;
    }

    .learning-paths{
        padding:80px 0;
    }

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

    .premium-showcase-section{
        padding:45px 16px;
    }

    .premium-showcase-card{
        padding:22px;
    }

    .premium-tech{
        flex-wrap:wrap;
    }

    .premium-showcase-actions{
        flex-direction:column;
    }

    .premium-showcase-actions a{
        width:100%;
    }

    .premium-prev{
        left:6px;
    }

    .premium-next{
        right:6px;
    }

    .store-banner{
        padding:50px 24px;
    }

    .badge{
        font-size:.9rem;
    }
}

/* CONCEPT HERO IMAGE VERSION */

.concept-hero-art{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:640px;
    padding:0;
}

.concept-hero-img{
    width:100%;
    max-width:760px;
    height:auto;
    display:block;
    object-fit:contain;
    margin:0 auto;
    transform:none;
    filter:drop-shadow(0 30px 70px rgba(0,0,0,.32));
}

.hero-stats-strip{
    margin-top:40px;
    padding:30px 46px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:30px;
    background:rgba(255,255,255,.035);
    backdrop-filter:blur(16px);
    box-shadow:0 24px 70px rgba(0,0,0,.22);
}

.hero-strip-item{
    display:flex;
    align-items:center;
    gap:18px;

    padding-right:28px;
    border-right:1px solid rgba(255,255,255,.14);
}

.hero-strip-item:last-child{
    border-right:none;
}

.hero-strip-icon{
    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:2px solid #d4a83d;
    color:#d4a83d;

    font-size:1.4rem;
}

.hero-strip-item strong{
    display:block;

    font-family:"Fraunces",serif;
    font-size:2rem;
    color:#fff;
    line-height:1;
}

.hero-strip-item span{
    display:block;
    margin-top:8px;

    color:rgba(255,255,255,.76);
    font-weight:600;
    line-height:1.4;
}

@media(max-width:1000px){
    .hero-stats-strip{
        grid-template-columns:repeat(2,1fr);
    }

    .hero-strip-item:nth-child(2){
        border-right:none;
    }
}

@media(max-width:650px){
    .hero-stats-strip{
        grid-template-columns:1fr;
    }

    .hero-strip-item{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.14);
        padding-bottom:22px;
    }

    .hero-strip-item:last-child{
        border-bottom:none;
        padding-bottom:0;
    }
}

/* =======================================================
   QUIZ ADVENTURE
======================================================= */

.quiz-adventure{
    background:#faf7f1;
    padding:120px 0;
}

.adventure-wrap{
    width:min(96vw,1700px);
    margin:0 auto;
    padding:0 36px;
    box-sizing:border-box;
}

.adventure-grid{
    display:grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));
    gap:32px;
    width:100%;
}

.adventure-card{
    display:flex;
    flex-direction:column;
    background:#fff;
    border:1px solid rgba(15,35,65,.08);
    border-radius:30px;
    width:100%;
    min-width:0;
    box-sizing:border-box;
    padding:40px;
    min-height:560px;
    box-shadow:0 20px 55px rgba(15,35,65,.08);
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.adventure-card:hover{
    transform:translateY(-8px);

    border-color:rgba(212,168,61,.35);

    box-shadow:0 32px 70px rgba(15,35,65,.12);
}

/* =======================================================
   ICON
======================================================= */

.adventure-icon{
    width:78px;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:2.3rem;
    border-radius:22px;
    background:linear-gradient(
        135deg,
        #fff8ea,
        #f5e6bf
    );

    margin-bottom:30px;
}

.adventure-icon img{
    width:38px;
    height:38px;
}

/* =======================================================
   TITLE
======================================================= */

.adventure-card h3{
    font-family:"Fraunces",serif;
    font-size:2rem;
    line-height:1.2;
    color:#14284d;
    margin-bottom:18px;
}

/* =======================================================
   DESCRIPTION
======================================================= */

.adventure-card p{
    font-size:1.08rem;
    line-height:1.9;
    color:#56657f;
    margin-bottom:34px;
}

/* =======================================================
   DIVIDER
======================================================= */

.adventure-divider{
    height:1px;
    background:#ece8df;
    margin-bottom:34px;
}

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

.adventure-footer{
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

/* =======================================================
   TAG
======================================================= */

.adventure-tag{
    width:170px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:#fffaf1;
    border:1px solid #e6c26b;
    color:#c78d08;
    font-size:.88rem;
    font-weight:700;
    white-space:nowrap;
}

/* =======================================================
   BUTTON
======================================================= */

.adventure-btn{
    width:140px;
    height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border-radius:999px;
    background:#d4a83d;
    color:#fff;
    font-size:.90rem;
    font-weight:700;
    text-decoration:none;
    flex-shrink:0;
    transition:.3s ease;
}

.adventure-btn img{
    width:14px;
    height:14px;
}

.adventure-btn:hover{
    transform:translateY(-3px);
    background:#c99d2f;
    box-shadow:0 18px 38px rgba(212,168,61,.35);
}

/* =======================================================
   BUTTON ICON
======================================================= */

.adventure-btn img{
    width:18px;
    height:18px;

    transition:transform .3s ease;
}

.adventure-btn:hover img{
    transform:translateX(4px);
}

/* ======================================================
   NEW SHOWCASE POLISH
====================================================== */

.didyouknow-theme .showcase-card,
.friends-theme .showcase-card{
    position:relative;
    overflow:hidden;
}

.didyouknow-theme .showcase-card::before,
.friends-theme .showcase-card::before{
    content:"";
    position:absolute;
    top:0;
    left:56px;
    right:56px;
    height:3px;
    border-radius:0 0 999px 999px;
    background:var(--showcase-accent);
    opacity:.75;
}

.didyouknow-theme .showcase-media img,
.friends-theme .showcase-media img{
    filter:
        drop-shadow(0 24px 48px rgba(15,35,65,.14));

    transition:
        transform .35s ease,
        filter .35s ease;
}

.didyouknow-theme .showcase-card:hover .showcase-media img,
.friends-theme .showcase-card:hover .showcase-media img{
    transform:translateY(-5px);

    filter:
        drop-shadow(0 30px 58px rgba(15,35,65,.18));
}

.didyouknow-theme .feature-list div,
.friends-theme .feature-list div{
    line-height:1.55;
}

.didyouknow-theme .showcase-stat,
.friends-theme .showcase-stat{
    border:1px solid rgba(15,35,65,.055);
}

/* =======================================================
   RESPONSIVE
======================================================= */

@media (max-width:1400px){

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

}

@media (max-width:768px){

    .quiz-adventure{
        padding:90px 0;
    }

    .adventure-wrap{
        padding:0 20px;
    }

    .adventure-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .adventure-card{
        min-height:auto;
        padding:32px;
    }

    .adventure-footer{
        flex-direction:column;
        align-items:stretch;
    }

    .adventure-tag,
    .adventure-btn{
        width:100%;
        justify-content:center;
    }

}


/* ======================================================
   3HC SHOWCASE DESIGN SYSTEM
====================================================== */

.showcase-section{
    padding:70px 0;
}

/* ======================================================
   SHOWCASE THEMES
====================================================== */

.showcase-section{
    --showcase-accent:#d4a83d;
    --showcase-accent-hover:#c79212;
    --showcase-accent-shadow:rgba(212,168,61,.30);
}


/* Learn by Concepts */

.concepts-theme{
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbf8f3 100%
        );
}


/* Learn by Books */

.books-theme{
    background:#fbf8f1;
}


/* Learn by Pictures */

.pictures-theme{
    background:#ffffff;
}


/* Print & Share */

.print-theme{
    background:#f9f6ef;
}


/* Did You Know...? */

.didyouknow-theme{
    --showcase-accent:#d09b32;
    --showcase-accent-hover:#b98119;
    --showcase-accent-shadow:rgba(208,155,50,.30);

    background:
        radial-gradient(
            circle at 12% 15%,
            rgba(236,198,104,.14),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #fffdf7 0%,
            #f8f3e7 100%
        );
}


/* Friends' Challenge */

.friends-theme{
    --showcase-accent:#315f9b;
    --showcase-accent-hover:#254b7d;
    --showcase-accent-shadow:rgba(49,95,155,.28);

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(74,126,190,.12),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f9fbff 0%,
            #eef3fa 100%
        );
}

.showcase-wrap{
    width:min(94vw,1650px);
    margin:0 auto;
    padding:0 24px;
    box-sizing:border-box;
}

.showcase-card{
    background:#fff;
    border-radius:30px;
    border:1px solid rgba(0,0,0,.06);
    box-shadow:0 24px 70px rgba(0,0,0,.10);
    padding:52px 56px;
    transition:.35s;
}

.showcase-card:hover{
    transform:translateY(-6px);
    box-shadow:0 30px 90px rgba(0,0,0,.14);
}

.showcase-grid{
    display:grid;
    grid-template-columns:48% 52%;
    gap:54px;
    align-items:center;
}

.showcase-grid.reverse .showcase-content{order:2;}
.showcase-grid.reverse .showcase-media{order:1;}

.showcase-media{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:8px;
}

.showcase-media img{
    width:100%;
    max-width:620px;
    height:auto;
    display:block;
    object-fit:contain;
}

.showcase-title{
    font-family:"Fraunces",serif;
    font-size:3rem;
    line-height:1.12;
    letter-spacing:-.02em;
    color:#14284d;
    margin:14px 0 22px;
}

.showcase-title span{
    color:var(--showcase-accent);
}

.showcase-lead{
    font-size:1.08rem;
    line-height:1.85;
    color:#53627d;
    margin-bottom:34px;
}

.feature-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px 34px;
    margin:0 0 34px;
}

.feature-list div{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:1rem;
    font-weight:600;
    color:#17335d;
}

.feature-list img{
    width:22px;
    height:22px;
    flex-shrink:0;
}

.showcase-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin:0 0 30px;
}

.showcase-stat{
    background:#fff;
    border-radius:20px;
    padding:24px;
    text-align:center;
    box-shadow:0 14px 34px rgba(15,35,65,.08);
}

.showcase-stat h3{
    font-family:"Fraunces",serif;
    font-size:2.2rem;
    line-height:1.08;
    color:var(--showcase-accent);
    margin:0 0 6px;
}

.showcase-stat p{
    font-size:.95rem;
    font-weight:600;
    color:#53627d;
}

.showcase-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:16px 30px;
    border-radius:999px;
    background:var(--showcase-accent);
    color:#fff;
    text-decoration:none;
    font-weight:800;
    box-shadow:
        0 12px 30px var(--showcase-accent-shadow);
    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;
}

.showcase-btn:hover{
    background:var(--showcase-accent-hover);
    transform:translateY(-3px);
    box-shadow:
        0 18px 40px var(--showcase-accent-shadow);
}

@media(max-width:1100px){
    .showcase-card{padding:36px;}
    .showcase-grid,
    .showcase-grid.reverse{
        grid-template-columns:1fr;
        gap:36px;
    }
    .showcase-grid.reverse .showcase-content,
    .showcase-grid.reverse .showcase-media{order:unset;}
}

@media(max-width:700px){
    .showcase-section{padding:50px 0;}
    .showcase-wrap{padding:0 16px;}
    .showcase-card{padding:24px;}
    .showcase-title{font-size:2.2rem;}
    .feature-list,
    .showcase-stats{grid-template-columns:1fr;}
    .didyouknow-theme .showcase-card::before,
    .friends-theme .showcase-card::before{
        left:24px;
        right:24px;
    }
}

@media (max-width:900px){
.hero-highlights{
    grid-template-columns:1fr;
}

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

.hero-btn{
    width:100%;
    min-width:0;
}

}