/* ==========================================================
   APC ENGLISH
   MAIN INDEX
========================================================== */


/* ==========================================================
   FOUNDATION
========================================================== */

:root{
    --apc-bg: #f5f7fb;
    --apc-surface: #ffffff;
    --apc-surface-soft: #f8faff;

    --apc-text: #172033;
    --apc-muted: #6d778c;

    --apc-primary: #0a4cff;
    --apc-primary-dark: #0738bc;
    --apc-secondary: #7546db;

    /* Learning card gradient tokens */
    --apc-eng-1: #0a2f82;
    --apc-eng-2: #0a6dff;
    --apc-eng-3: #14d4e0;

    --apc-other-1: #3e1094;
    --apc-other-2: #9333ea;
    --apc-other-3: #ec4899;

    --apc-border: rgba(23, 32, 51, 0.08);

    --apc-shadow-sm:
    0 10px 30px rgba(18, 37, 63, 0.06);

    --apc-shadow:
    0 20px 55px rgba(18, 37, 63, 0.10);

    --apc-radius-sm: 18px;
    --apc-radius: 24px;
    --apc-radius-lg: 30px;

    --apc-transition:
    0.25s ease;
}


*{
    box-sizing: border-box;
}


html{
    scroll-behavior: smooth;
}


body{
    margin: 0;
    min-width: 320px;

    background:
    radial-gradient(
        circle at top left,
        rgba(10, 76, 255, 0.05),
        transparent 28%
    ),
    var(--apc-bg);

    color: var(--apc-text);

    font-family:
    "Poppins",
    sans-serif;

    -webkit-font-smoothing:
    antialiased;
}


body,
button,
a{
    font-family:
    "Poppins",
    sans-serif;
}


button{
    border: 0;
    font: inherit;
    cursor: pointer;
}


a{
    color: inherit;
    text-decoration: none;
}


img{
    display: block;
    max-width: 100%;
}


[hidden]{
    display: none !important;
}


.apc-container{
    width:
    min(
        1120px,
        calc(100% - 40px)
    );

    margin: 0 auto;
}


/* ==========================================================
   CUSTOM SCROLLBAR
========================================================== */

::-webkit-scrollbar{
    width: 8px;
}


::-webkit-scrollbar-track{
    background: var(--apc-bg);
}


::-webkit-scrollbar-thumb{
    border-radius: 20px;
    background:
    linear-gradient(
        180deg,
        var(--apc-primary),
        var(--apc-secondary)
    );
}


::-webkit-scrollbar-thumb:hover{
    background:
    var(--apc-primary-dark);
}


/* ==========================================================
   SHARED SECTION HEADING
========================================================== */

.section-heading{
    max-width: 700px;

    margin:
    0 auto
    28px;

    text-align: center;
}


.section-heading__eyebrow{
    display: inline-block;

    margin-bottom: 10px;

    color: var(--apc-primary);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.14em;
}


.section-heading h2{
    margin: 0;

    font-size:
    clamp(
        1.7rem,
        3.4vw,
        2.5rem
    );

    line-height: 1.15;

    letter-spacing:
    -0.04em;
}


.section-heading p{
    margin:
    12px auto
    0;

    color: var(--apc-muted);

    font-size: 0.92rem;
    line-height: 1.7;
}


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

.apc-hero{
    position: relative;

    overflow: hidden;

    padding:
    70px 0
    90px;

    text-align: center;

    background:
    radial-gradient(
        circle at 18% 15%,
        rgba(255, 255, 255, 0.14),
        transparent 25%
    ),
    radial-gradient(
        circle at 85% 25%,
        rgba(0, 201, 255, 0.18),
        transparent 24%
    ),
    linear-gradient(
        135deg,
        #06183e 0%,
        #0a2f82 52%,
        #0a4cff 100%
    );
}


.apc-hero::before{
    content: "";

    position: absolute;

    top: -180px;
    right: -130px;

    width: 420px;
    height: 420px;

    border-radius: 50%;

    background:
    rgba(255, 255, 255, 0.06);

    pointer-events: none;
}


.apc-hero::after{
    content: "";

    position: absolute;

    left: -8%;
    bottom: -115px;

    width: 116%;
    height: 180px;

    border-radius:
    50% 50%
    0 0;

    background:
    var(--apc-bg);

    pointer-events: none;
}


.apc-hero .apc-container{
    position: relative;

    z-index: 1;

    max-width: 850px;
}


.apc-hero__badge{
    display: inline-flex;

    align-items: center;
    gap: 8px;

    padding:
    8px 14px;

    margin-bottom: 18px;

    border:
    1px solid
    rgba(255, 255, 255, 0.20);

    border-radius: 999px;

    background:
    rgba(255, 255, 255, 0.10);

    color:
    rgba(255, 255, 255, 0.92);

    font-size: 0.78rem;
    font-weight: 600;

    backdrop-filter:
    blur(12px);

    animation:
    apcFadeDown
    0.6s ease
    both;
}


.apc-hero h1{
    margin: 0;

    color: #ffffff;

    font-size:
    clamp(
        2.5rem,
        6vw,
        4.6rem
    );

    line-height: 1.04;

    font-weight: 800;

    letter-spacing:
    -0.06em;

    animation:
    apcFadeUp
    0.7s ease
    0.08s
    both;
}


.apc-hero h1 span{
    display: block;

    margin-top: 6px;

    color: #ffffff;
}


.apc-hero__description{
    max-width: 680px;

    margin:
    20px auto
    0;

    color:
    rgba(255, 255, 255, 0.88);

    font-size:
    clamp(
        0.95rem,
        1.8vw,
        1.08rem
    );

    line-height: 1.7;

    animation:
    apcFadeUp
    0.7s ease
    0.16s
    both;
}


.apc-hero__intro{
    max-width: 600px;

    margin:
    10px auto
    0;

    color:
    rgba(255, 255, 255, 0.64);

    font-size: 0.88rem;
    line-height: 1.65;

    animation:
    apcFadeUp
    0.7s ease
    0.22s
    both;
}


.apc-hero__explore{
    display: inline-flex;

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

    gap: 12px;

    margin-top: 24px;

    padding:
    11px 15px
    11px 19px;

    border-radius: 999px;

    background: #ffffff;

    color: var(--apc-primary);

    font-size: 0.83rem;
    font-weight: 700;

    box-shadow:
    0 15px 38px
    rgba(0, 0, 0, 0.16);

    transition:
    transform var(--apc-transition),
    box-shadow var(--apc-transition);

    animation:
    apcFadeUp
    0.7s ease
    0.28s
    both;
}


.apc-hero__explore:hover{
    transform:
    translateY(-3px);

    box-shadow:
    0 20px 45px
    rgba(0, 0, 0, 0.22);
}


.apc-hero__explore span:last-child{
    display: flex;

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

    width: 26px;
    height: 26px;

    border-radius: 50%;

    background:
    #edf2ff;

    font-size: 0.95rem;
}


/* ==========================================================
   LEARNING OPTIONS
========================================================== */

.learning-options{
    padding:
    30px 0
    46px;
}


.learning-options__grid{
    display: grid;

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

    gap: 18px;
}


.learning-card{
    position: relative;

    width: 100%;

    overflow: hidden;

    padding: 0;

    border: 1px solid transparent;

    border-radius:
    var(--apc-radius);

    text-align: left;

    box-shadow:
    0 16px 38px
    rgba(18, 37, 63, 0.14);

    transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}


/* --- Decorative glow orbs shared by both cards --- */

.learning-card::before,
.learning-card::after{
    content: "";

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

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


.learning-card::before{
    top: -60px;
    right: -50px;

    width: 190px;
    height: 190px;

    background:
    rgba(255, 255, 255, 0.14);
}


.learning-card::after{
    bottom: -70px;
    left: -40px;

    width: 160px;
    height: 160px;

    background:
    rgba(255, 255, 255, 0.08);
}


.learning-card:hover::before{
    transform:
    translate(-6px, 6px)
    scale(1.06);
}


.learning-card:hover::after{
    transform:
    translate(6px, -6px)
    scale(1.06);
}


/* --- Learn English : blue / cyan premium gradient --- */

.learning-card--english{

    background:
    radial-gradient(
        circle at 100% 0%,
        rgba(20, 212, 224, 0.55),
        transparent 45%
    ),
    linear-gradient(
        135deg,
        var(--apc-eng-1) 0%,
        var(--apc-eng-2) 62%,
        var(--apc-eng-3) 130%
    );
}


/* --- Learn Other Languages : violet / magenta premium gradient --- */

.learning-card--other{

    background:
    radial-gradient(
        circle at 100% 0%,
        rgba(236, 72, 153, 0.5),
        transparent 45%
    ),
    linear-gradient(
        135deg,
        var(--apc-other-1) 0%,
        var(--apc-other-2) 62%,
        var(--apc-other-3) 130%
    );
}


.learning-card:hover{
    transform:
    translateY(-6px);

    box-shadow:
    0 26px 55px
    rgba(18, 37, 63, 0.22);
}


.learning-card.is-active{
    border-color:
    rgba(255, 255, 255, 0.55);

    box-shadow:
    0 26px 60px
    rgba(18, 37, 63, 0.26);
}


.learning-card__content{
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    min-height: 168px;

    padding: 24px;
}


.learning-card__icon{
    display: flex;

    flex:
    0 0
    56px;

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

    width: 56px;
    height: 56px;

    margin-right: 16px;

    border-radius: 17px;

    background:
    rgba(255, 255, 255, 0.16);

    border:
    1px solid
    rgba(255, 255, 255, 0.28);

    backdrop-filter:
    blur(6px);

    font-size: 1.55rem;
}


.learning-card__text{
    min-width: 0;
}


.learning-card__eyebrow{
    display: block;

    margin-bottom: 6px;

    color:
    rgba(255, 255, 255, 0.78);

    font-size: 0.62rem;
    font-weight: 700;

    letter-spacing: 0.13em;
}


.learning-card h3{
    margin: 0;

    color: #ffffff;

    font-size: 1.24rem;

    line-height: 1.25;

    letter-spacing: -0.02em;
}


.learning-card p{
    margin:
    8px 0
    0;

    color:
    rgba(255, 255, 255, 0.78);

    font-size: 0.83rem;

    line-height: 1.6;
}


.learning-card__arrow{
    display: flex;

    flex:
    0 0
    auto;

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

    width: 38px;
    height: 38px;

    margin-left: 12px;

    border-radius: 50%;

    background:
    rgba(255, 255, 255, 0.16);

    border:
    1px solid
    rgba(255, 255, 255, 0.26);

    color: #ffffff;

    font-size: 1.05rem;

    transition:
    transform var(--apc-transition),
    background var(--apc-transition);
}


.learning-card:hover
.learning-card__arrow{
    background:
    rgba(255, 255, 255, 0.9);

    color:
    var(--apc-primary-dark);
}


.learning-card.is-active
.learning-card__arrow{
    transform:
    rotate(90deg);

    background:
    #ffffff;

    color:
    var(--apc-primary-dark);
}


/* ==========================================================
   LEARN ENGLISH
========================================================== */

.english-languages{
    padding:
    26px 0
    46px;

    animation:
    apcPanelIn
    0.4s ease
    both;
}


.languages-grid{
    display: grid;

    grid-template-columns:
    repeat(
        3,
        minmax(0, 1fr)
    );

    gap: 12px;
}


.language-card{
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 92px;

    padding:
    16px 18px;

    border:
    1px solid
    var(--apc-border);

    border-radius:
    var(--apc-radius-sm);

    background:
    var(--apc-surface);

    box-shadow:
    0 8px 25px
    rgba(18, 37, 63, 0.05);

    transition:
    transform var(--apc-transition),
    border-color var(--apc-transition),
    box-shadow var(--apc-transition);
}


.language-card::after{
    content: "→";

    position: absolute;

    top: 16px;
    right: 16px;

    color:
    rgba(10, 76, 255, 0.32);

    font-size: 0.95rem;

    transition:
    transform var(--apc-transition),
    color var(--apc-transition);
}


.language-card:hover{
    transform:
    translateY(-4px);

    border-color:
    rgba(10, 76, 255, 0.20);

    box-shadow:
    0 16px 36px
    rgba(18, 37, 63, 0.09);
}


.language-card:hover::after{
    transform:
    translateX(3px);

    color:
    var(--apc-primary);
}


.language-card__native{
    color:
    var(--apc-text);

    font-size: 0.98rem;
    font-weight: 700;

    line-height: 1.35;
}


.language-card__english{
    display: block;

    margin-top: 4px;

    color:
    var(--apc-muted);

    font-size: 0.74rem;
}


/* ==========================================================
   OTHER LANGUAGES
========================================================== */

.other-languages{
    padding:
    26px 0
    50px;

    animation:
    apcPanelIn
    0.4s ease
    both;
}


.other-languages__grid{
    display: grid;

    grid-template-columns:
    repeat(
        3,
        minmax(0, 1fr)
    );

    gap: 16px;
}


.other-language-card{
    overflow: hidden;

    border:
    1px solid
    var(--apc-border);

    border-radius:
    var(--apc-radius);

    background:
    var(--apc-surface);

    box-shadow:
    var(--apc-shadow-sm);

    transition:
    transform var(--apc-transition),
    box-shadow var(--apc-transition);
}


.other-language-card:hover{
    transform:
    translateY(-6px);

    box-shadow:
    var(--apc-shadow);
}


.other-language-card__image{
    height: 168px;

    overflow: hidden;

    background:
    #eef1f7;
}


.other-language-card__image img{
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
    transform 0.45s ease;
}


.other-language-card:hover
.other-language-card__image img{
    transform:
    scale(1.05);
}


.other-language-card__content{
    padding:
    18px 20px;
}


.other-language-card__eyebrow{
    color:
    var(--apc-primary);

    font-size: 0.6rem;
    font-weight: 700;

    letter-spacing: 0.12em;
}


.other-language-card h3{
    margin:
    7px 0
    0;

    font-size: 1.14rem;
}


.other-language-card p{
    margin:
    8px 0
    0;

    color:
    var(--apc-muted);

    font-size: 0.8rem;

    line-height: 1.6;
}


.other-language-card__link{
    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 14px;

    color:
    var(--apc-primary);

    font-size: 0.79rem;
    font-weight: 700;
}


.other-language-card__link span{
    transition:
    transform var(--apc-transition);
}


.other-language-card:hover
.other-language-card__link span{
    transform:
    translateX(4px);
}


/* ==========================================================
   APC COMMUNITY
========================================================== */

.apc-community-section{
    padding:
    26px 0
    50px;
}


.apc-community-card{
    display: grid;

    grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, 0.95fr);

    overflow: hidden;

    border-radius:
    var(--apc-radius-lg);

    background:
    #101a32;

    box-shadow:
    0 28px 70px
    rgba(18, 37, 63, 0.18);

    transition:
    transform var(--apc-transition),
    box-shadow var(--apc-transition);
}


.apc-community-card:hover{
    transform:
    translateY(-5px);

    box-shadow:
    0 35px 85px
    rgba(18, 37, 63, 0.24);
}


.apc-community-card__image{
    min-height: 360px;

    overflow: hidden;

    background:
    #0c1428;
}


.apc-community-card__image img{
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
    transform 0.55s ease;
}


.apc-community-card:hover
.apc-community-card__image img{
    transform:
    scale(1.04);
}


.apc-community-card__content{
    display: flex;

    flex-direction: column;

    justify-content: center;

    padding:
    38px;
}


.apc-community-card__badge{
    display: inline-flex;

    align-self: flex-start;

    padding:
    7px 12px;

    border:
    1px solid
    rgba(255, 255, 255, 0.12);

    border-radius: 999px;

    background:
    rgba(255, 255, 255, 0.06);

    color:
    rgba(255, 255, 255, 0.84);

    font-size: 0.66rem;
    font-weight: 700;

    letter-spacing: 0.08em;
}


.apc-community-card h3{
    margin:
    16px 0
    0;

    color: #ffffff;

    font-size:
    clamp(
        1.8rem,
        3.6vw,
        2.9rem
    );

    line-height: 1.05;

    letter-spacing:
    -0.045em;
}


.apc-community-card__content > p{
    margin:
    14px 0
    0;

    color:
    rgba(255, 255, 255, 0.65);

    font-size: 0.9rem;

    line-height: 1.7;
}


.apc-community-card__features{
    display: flex;

    flex-wrap: wrap;

    gap: 9px;

    margin-top: 20px;
}


.apc-community-card__features span{
    padding:
    7px 11px;

    border:
    1px solid
    rgba(255, 255, 255, 0.10);

    border-radius: 999px;

    background:
    rgba(255, 255, 255, 0.05);

    color:
    rgba(255, 255, 255, 0.78);

    font-size: 0.72rem;
}


.apc-community-card__action{
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 22px;

    color: #ffffff;

    font-size: 0.87rem;
    font-weight: 700;
}


.apc-community-card__action span{
    transition:
    transform var(--apc-transition);
}


.apc-community-card:hover
.apc-community-card__action span{
    transform:
    translateX(4px);
}


/* ==========================================================
   THE FUTURE OF APC ENGLISH
========================================================== */

.apc-future-section{
    padding:
    18px 0
    64px;
}


.apc-future-card{
    display: grid;

    grid-template-columns:
    74px
    minmax(0, 1fr);

    gap: 24px;

    padding:
    34px;

    border:
    1px solid
    rgba(10, 76, 255, 0.10);

    border-radius:
    var(--apc-radius-lg);

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #f4f7ff
    );

    box-shadow:
    var(--apc-shadow-sm);
}


.apc-future-card__icon{
    display: flex;

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

    width: 64px;
    height: 64px;

    border-radius: 21px;

    background:
    #eaf0ff;

    font-size: 1.85rem;
}


.apc-future-card__eyebrow{
    display: inline-block;

    margin-bottom: 8px;

    color:
    var(--apc-primary);

    font-size: 0.65rem;
    font-weight: 700;

    letter-spacing: 0.13em;
}


.apc-future-card h2{
    margin: 0;

    font-size:
    clamp(
        1.65rem,
        3.4vw,
        2.4rem
    );

    line-height: 1.15;

    letter-spacing:
    -0.04em;
}


.apc-future-card p{
    margin:
    11px 0
    0;

    color:
    var(--apc-muted);

    font-size: 0.88rem;

    line-height: 1.7;
}


.apc-future-card__lead{
    color:
    var(--apc-text)
    !important;

    font-weight: 600;
}


.apc-future-card__benefits{
    display: grid;

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

    gap: 10px;

    margin-top: 20px;
}


.apc-future-benefit{
    display: flex;

    align-items: center;

    gap: 10px;

    padding:
    11px 13px;

    border:
    1px solid
    var(--apc-border);

    border-radius: 15px;

    background:
    rgba(255, 255, 255, 0.72);
}


.apc-future-benefit span{
    font-size: 1rem;
}


.apc-future-benefit p{
    margin: 0;

    color:
    var(--apc-text);

    font-size: 0.75rem;

    line-height: 1.4;
}


.apc-future-card__action{
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 22px;

    padding:
    11px 16px;

    border-radius: 999px;

    background:
    var(--apc-primary);

    color: #ffffff;

    font-size: 0.81rem;
    font-weight: 700;

    box-shadow:
    0 12px 28px
    rgba(10, 76, 255, 0.22);

    transition:
    transform var(--apc-transition),
    background var(--apc-transition);
}


.apc-future-card__action:hover{
    transform:
    translateY(-3px);

    background:
    var(--apc-primary-dark);
}


.apc-future-card__action span:last-child{
    transition:
    transform var(--apc-transition);
}


.apc-future-card__action:hover span:last-child{
    transform:
    translateX(4px);
}


/* ==========================================================
   PDF RESOURCES OFFCANVAS
========================================================== */

.apc-resources-trigger{

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    gap:
    9px;

    margin-top:
    12px;

    padding:
    10px 17px;

    border:
    1px solid
    rgba(255, 255, 255, 0.22);

    border-radius:
    999px;

    background:
    rgba(255, 255, 255, 0.08);

    color:
    rgba(255, 255, 255, 0.92);

    font-size:
    16px;

    font-weight:
    600;

    cursor:
    pointer;

    backdrop-filter:
    blur(10px);

    transition:
    background var(--apc-transition),
    transform var(--apc-transition),
    border-color var(--apc-transition);
}


.apc-resources-trigger:hover{

    transform:
    translateY(-2px);

    background:
    rgba(255, 255, 255, 0.16);

    border-color:
    rgba(255, 255, 255, 0.40);
}


.apc-resources-trigger span:first-child{

    font-size:
    1rem;
}


/* ==========================================================
   OVERLAY
========================================================== */

.apc-resources-overlay{

    position:
    fixed;

    inset:
    0;

    z-index:
    9998;

    background:
    rgba(6, 16, 38, 0.48);

    backdrop-filter:
    blur(4px);

    opacity:
    0;

    visibility:
    hidden;

    transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}


.apc-resources-overlay.is-open{

    opacity:
    1;

    visibility:
    visible;
}


/* ==========================================================
   OFFCANVAS
========================================================== */

.apc-resources-offcanvas{

    position:
    fixed;

    top:
    0;

    right:
    0;

    z-index:
    9999;

    display:
    flex;

    flex-direction:
    column;

    width:
    min(
        560px,
        94vw
    );

    height:
    100vh;

    background:
    var(--apc-bg);

    box-shadow:
    -20px 0 60px
    rgba(18, 37, 63, 0.22);

    transform:
    translateX(100%);

    transition:
    transform 0.35s
    cubic-bezier(
        0.22,
        1,
        0.36,
        1
    );

    visibility:
    hidden;
}


.apc-resources-offcanvas.is-open{

    transform:
    translateX(0);

    visibility:
    visible;
}


/* ==========================================================
   OFFCANVAS HEADER
========================================================== */

.apc-resources-offcanvas__header{

    display:
    flex;

    align-items:
    center;

    justify-content:
    space-between;

    flex:
    0 0 auto;

    padding:
    20px 22px;

    border-bottom:
    1px solid
    var(--apc-border);

    background:
    rgba(255, 255, 255, 0.96);

    backdrop-filter:
    blur(12px);
}


.apc-resources-offcanvas__heading{

    min-width:
    0;
}


.apc-resources-offcanvas__eyebrow{

    display:
    block;

    margin-bottom:
    4px;

    color:
    var(--apc-primary);

    font-size:
    0.62rem;

    font-weight:
    700;

    letter-spacing:
    0.13em;

    text-transform:
    uppercase;
}


.apc-resources-offcanvas__title{

    margin:
    0;

    color:
    var(--apc-text);

    font-size:
    1.25rem;

    line-height:
    1.2;
}


.apc-resources-offcanvas__close{

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    flex:
    0 0 auto;

    width:
    40px;

    height:
    40px;

    margin-left:
    15px;

    border:
    1px solid
    var(--apc-border);

    border-radius:
    50%;

    background:
    #f4f6fb;

    color:
    var(--apc-text);

    font-size:
    1.25rem;

    cursor:
    pointer;

    transition:
    background var(--apc-transition),
    transform var(--apc-transition);
}


.apc-resources-offcanvas__close:hover{

    background:
    #e9eef9;

    transform:
    rotate(90deg);
}


/* ==========================================================
   OFFCANVAS BODY
========================================================== */

.apc-resources-offcanvas__body{

    flex:
    1 1 auto;

    overflow-y:
    auto;

    padding:
    20px;
}


/* ==========================================================
   LOADING
========================================================== */

.apc-resources-loading{

    display:
    flex;

    flex-direction:
    column;

    align-items:
    center;

    justify-content:
    center;

    min-height:
    260px;

    color:
    var(--apc-muted);

    text-align:
    center;
}


.apc-resources-loading__spinner{

    width:
    38px;

    height:
    38px;

    margin-bottom:
    14px;

    border:
    3px solid
    #e5eaf4;

    border-top-color:
    var(--apc-primary);

    border-radius:
    50%;

    animation:
    apcResourcesSpin
    0.8s linear
    infinite;
}


@keyframes apcResourcesSpin{

    to{

        transform:
        rotate(360deg);

    }

}

/* ==========================================================
   PDF RESOURCES — PREMIUM COMPACT OFFCANVAS
========================================================== */

.apc-resources-offcanvas .resources-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


/* ==========================================================
   RESOURCE CARD
========================================================== */

.apc-resources-offcanvas .resource-card {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    overflow: hidden;

    border: 1px solid rgba(23, 32, 51, 0.07);
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fcfdff 100%
        );

    box-shadow:
        0 2px 5px rgba(18, 37, 63, 0.025),
        0 8px 24px rgba(18, 37, 63, 0.055);

    transition:
        transform 0.22s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}

.apc-resources-offcanvas .resource-card:hover {
    transform: translateY(-2px);

    border-color: rgba(10, 76, 255, 0.14);

    box-shadow:
        0 4px 10px rgba(18, 37, 63, 0.035),
        0 14px 32px rgba(18, 37, 63, 0.10);
}


/* ==========================================================
   PDF VISUAL AREA
========================================================== */

.apc-resources-offcanvas .resource-card__top {
    position: relative;

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

    width: 100%;
    height: 112px;
    min-height: 112px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(10, 76, 255, 0.12),
            transparent 34%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(117, 70, 219, 0.10),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #f3f7ff 0%,
            #f8f5ff 100%
        );
}


/* Decorative glow */

.apc-resources-offcanvas .resource-card__top::before {
    content: "";

    position: absolute;

    width: 130px;
    height: 130px;

    top: -72px;
    right: -38px;

    border-radius: 50%;

    background:
        rgba(10, 76, 255, 0.08);

    filter: blur(1px);
}


.apc-resources-offcanvas .resource-card__top::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    bottom: -55px;
    left: -30px;

    border-radius: 50%;

    background:
        rgba(117, 70, 219, 0.07);
}


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

.apc-resources-offcanvas .resource-card__pdf {
    position: relative;
    z-index: 2;

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

    width: 56px;
    height: 68px;

    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f8faff 100%
        );

    color: #e53935;

    font-size: 2rem;

    box-shadow:
        0 7px 18px rgba(18, 37, 63, 0.13),
        0 1px 3px rgba(18, 37, 63, 0.06);

    transform: rotate(-3deg);

    transition:
        transform 0.25s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.25s ease;
}


.apc-resources-offcanvas .resource-card:hover .resource-card__pdf {
    transform:
        rotate(0deg)
        translateY(-2px);

    box-shadow:
        0 10px 22px rgba(18, 37, 63, 0.16);
}


/* ==========================================================
   BADGE
========================================================== */

.apc-resources-offcanvas .resource-card__badge {
    position: absolute;

    top: 10px;
    left: 10px;

    z-index: 3;

    padding: 5px 8px;

    border: 1px solid rgba(10, 76, 255, 0.09);
    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.72);

    color: var(--apc-primary);

    font-size: 0.50rem;
    font-weight: 800;

    line-height: 1;

    letter-spacing: 0.08em;
    text-transform: uppercase;

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}


/* ==========================================================
   CONTENT
========================================================== */

.apc-resources-offcanvas .resource-card__content {
    display: flex;
    flex-direction: column;

    padding: 14px 15px 14px;
}


/* ==========================================================
   LANGUAGE
========================================================== */

.apc-resources-offcanvas .resource-card__language {
    margin: 0 0 5px;

    color: var(--apc-primary);

    font-size: 0.54rem;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: 0.10em;
    text-transform: uppercase;
}


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

.apc-resources-offcanvas .resource-card h2 {
    margin: 0;

    color: var(--apc-text);

    font-size: 0.94rem;
    font-weight: 700;

    line-height: 1.3;
    letter-spacing: -0.018em;
}


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

.apc-resources-offcanvas .resource-card__description {
    margin: 6px 0 0;

    color: var(--apc-muted);

    font-size: 0.69rem;

    line-height: 1.5;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
}


/* ==========================================================
   META
========================================================== */

.apc-resources-offcanvas .resource-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    margin-top: 10px;
}


.apc-resources-offcanvas .resource-card__meta span {
    display: inline-flex;
    align-items: center;

    padding: 5px 7px;

    border: 1px solid rgba(23, 32, 51, 0.055);
    border-radius: 7px;

    background: #f7f9fc;

    color: #6d788b;

    font-size: 0.52rem;
    font-weight: 600;

    line-height: 1;
}


/* ==========================================================
   ACTION
========================================================== */

.apc-resources-offcanvas .resource-card__action {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-top: 10px;

    padding: 9px 11px;

    border: 1px solid rgba(10, 76, 255, 0.09);
    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #f3f6ff 0%,
            #f7f5ff 100%
        );

    color: var(--apc-primary);

    font-size: 0.61rem;
    font-weight: 700;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.apc-resources-offcanvas .resource-card__action:hover {
    background:
        linear-gradient(
            135deg,
            var(--apc-primary) 0%,
            #315fff 100%
        );

    color: #ffffff;

    transform: translateY(-1px);

    box-shadow:
        0 5px 14px rgba(10, 76, 255, 0.20);
}


/* ==========================================================
   EMPTY / ERROR
========================================================== */

.apc-resources-message {
    padding: 28px 20px;

    border: 1px solid var(--apc-border);
    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #fafcff
        );

    color: var(--apc-muted);

    text-align: center;

    font-size: 0.76rem;
    line-height: 1.6;

    box-shadow:
        0 6px 20px rgba(18, 37, 63, 0.05);
}


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

@media (max-width: 520px) {

    .apc-resources-offcanvas__body {
        padding: 12px;
    }


    .apc-resources-offcanvas .resources-grid {
        gap: 10px;
    }


    .apc-resources-offcanvas .resource-card {
        border-radius: 14px;
    }


    .apc-resources-offcanvas .resource-card__top {
        height: 100px;
        min-height: 100px;
    }


    .apc-resources-offcanvas .resource-card__pdf {
        width: 50px;
        height: 61px;

        font-size: 1.8rem;
    }


    .apc-resources-offcanvas .resource-card__content {
        padding: 12px 13px 13px;
    }


    .apc-resources-offcanvas .resource-card h2 {
        font-size: 0.88rem;
    }


    .apc-resources-offcanvas .resource-card__description {
        font-size: 0.65rem;
        line-height: 1.45;
    }


    .apc-resources-offcanvas .resource-card__meta {
        margin-top: 8px;
    }


    .apc-resources-offcanvas .resource-card__action {
        margin-top: 8px;
        padding: 8px 10px;
    }
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .apc-resources-offcanvas .resource-card,
    .apc-resources-offcanvas .resource-card__pdf,
    .apc-resources-offcanvas .resource-card__action {
        transition: none;
    }
}



/* ==========================================================
   BODY LOCK
========================================================== */

body.apc-resources-open{

    overflow:
    hidden;
}


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

@media(max-width: 520px){

    .apc-resources-offcanvas{

        width:
        100vw;
    }


    .apc-resources-offcanvas__header{

        padding:
        17px;
    }


    .apc-resources-offcanvas__body{

        padding:
        14px;
    }


    .apc-resources-offcanvas
    .resource-card{

        grid-template-columns:
        84px
        minmax(0, 1fr);
    }


    .apc-resources-offcanvas
    .resource-card__top{

        min-height:
        112px;
    }


    .apc-resources-offcanvas
    .resource-card__content{

        padding:
        12px;
    }

}


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

@keyframes apcFadeUp{

    from{
        opacity: 0;

        transform:
        translateY(18px);
    }

    to{
        opacity: 1;

        transform:
        translateY(0);
    }

}


@keyframes apcFadeDown{

    from{
        opacity: 0;

        transform:
        translateY(-12px);
    }

    to{
        opacity: 1;

        transform:
        translateY(0);
    }

}


@keyframes apcPanelIn{

    from{
        opacity: 0;

        transform:
        translateY(-10px);
    }

    to{
        opacity: 1;

        transform:
        translateY(0);
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media(max-width: 900px){

    .other-languages__grid{
        grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    }


    .other-language-card:last-child{
        grid-column:
        1 / -1;

        max-width: 50%;
        justify-self: center;
    }


    .apc-community-card{
        grid-template-columns: 1fr;
    }


    .apc-community-card__image{
        min-height: 300px;
    }

}


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

@media(max-width: 768px){

    .apc-container{
        width:
        min(
            100% - 26px,
            1120px
        );
    }


    .apc-hero{
        padding:
        58px 0
        80px;
    }


    .apc-hero::after{
        bottom: -140px;
    }


    .learning-options{
        padding:
        22px 0
        36px;
    }


    .learning-options__grid{
        grid-template-columns: 1fr;

        gap: 14px;
    }


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


    .other-languages__grid{
        grid-template-columns: 1fr;
    }


    .other-language-card:last-child{
        grid-column: auto;

        max-width: none;
    }


    .apc-community-card__content{
        padding: 28px;
    }


    .apc-community-card__image{
        min-height: 230px;
    }


    .apc-future-card{
        grid-template-columns: 1fr;

        gap: 16px;

        padding: 24px;
    }

}


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

@media(max-width: 520px){

    .apc-hero__badge{
        font-size: 0.7rem;
    }


    .apc-hero h1{
        font-size: 2.35rem;
    }


    .apc-hero__explore{
        width: 100%;
    }


    .section-heading{
        margin-bottom: 22px;
    }


    .section-heading h2{
        font-size: 1.6rem;
    }


    .section-heading p{
        font-size: 0.86rem;
    }


    .learning-card__content{
        min-height: 0;

        padding: 20px;
    }


    .learning-card__icon{
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        margin-right: 13px;

        border-radius: 15px;

        font-size: 1.3rem;
    }


    .learning-card h3{
        font-size: 1.08rem;
    }


    .learning-card p{
        font-size: 0.77rem;
    }


    .learning-card__arrow{
        width: 33px;
        height: 33px;

        margin-left: 8px;

        font-size: 0.92rem;
    }


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


    .language-card{
        min-height: 78px;
    }


    .other-language-card__image{
        height: 190px;
    }


    .apc-community-card__content{
        padding: 22px;
    }


    .apc-community-card h3{
        font-size: 2rem;
    }


    .apc-community-card__content > p{
        font-size: 0.85rem;
    }


    .apc-future-card{
        padding: 20px;
    }


    .apc-future-card__icon{
        width: 52px;
        height: 52px;

        border-radius: 17px;

        font-size: 1.5rem;
    }


    .apc-future-card__benefits{
        grid-template-columns: 1fr;
    }


    .apc-future-card__action{
        width: 100%;

        justify-content: center;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media(prefers-reduced-motion: reduce){

    *,
    *::before,
    *::after{
        scroll-behavior: auto !important;

        animation-duration:
        0.01ms !important;

        animation-iteration-count:
        1 !important;

        transition-duration:
        0.01ms !important;
    }

}

/* ==========================================================
   RESOURCES COUNT
========================================================== */

.apc-resources-trigger__count{

    display:
    inline-flex;

    align-items:
    center;

    justify-content:
    center;

    min-width:
    22px;

    height:
    22px;

    padding:
    0 7px;

    border:
    1px solid
    rgba(255, 255, 255, 0.20);

    border-radius:
    999px;

    background:
    rgba(255, 255, 255, 0.14);

    color:
    #ffffff;

    font-size:
    13px;

    font-weight:
    800;

    line-height:
    1;
}


.apc-resources-offcanvas__count{

    color:
    var(--apc-muted);

    font-size:
    0.68rem;

    font-weight:
    600;

    white-space:
    nowrap;
}


/* ==========================================================
   SEARCH
========================================================== */

.apc-resources-search{

    position:
    relative;

    display:
    flex;

    align-items:
    center;

    width:
    100%;

    margin-bottom:
    16px;

    border:
    1px solid
    var(--apc-border);

    border-radius:
    15px;

    background:
    #ffffff;

    box-shadow:
    0 6px 20px
    rgba(18, 37, 63, 0.05);

    transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


.apc-resources-search:focus-within{

    border-color:
    rgba(10, 76, 255, 0.30);

    box-shadow:
    0 8px 25px
    rgba(10, 76, 255, 0.09);
}


.apc-resources-search__icon{

    flex:
    0 0 auto;

    margin-left:
    14px;

    font-size:
    0.9rem;

    opacity:
    0.65;
}


.apc-resources-search__input{

    width:
    100%;

    min-width:
    0;

    padding:
    12px 42px 12px 10px;

    border:
    0;

    outline:
    0;

    background:
    transparent;

    color:
    var(--apc-text);

    font-family:
    inherit;

    font-size:
    0.74rem;
}


.apc-resources-search__input::placeholder{

    color:
    #9aa3b3;
}


.apc-resources-search__clear{

    position:
    absolute;

    top:
    50%;

    right:
    9px;

    display:
    flex;

    align-items:
    center;

    justify-content:
    center;

    width:
    27px;

    height:
    27px;

    transform:
    translateY(-50%);

    border-radius:
    50%;

    background:
    #f0f3f8;

    color:
    #6d778c;

    font-size:
    1rem;

    line-height:
    1;
}


.apc-resources-search__clear:hover{

    background:
    #e5eaf3;

    color:
    var(--apc-text);
}


/* ==========================================================
   SEARCH RESULT STATE
========================================================== */

.apc-resource-hidden{

    display:
    none !important;
}


.apc-resources-no-results{

    padding:
    35px 20px;

    border:
    1px solid
    var(--apc-border);

    border-radius:
    18px;

    background:
    #ffffff;

    color:
    var(--apc-muted);

    text-align:
    center;

    font-size:
    0.75rem;

    line-height:
    1.6;
}


.apc-resources-no-results strong{

    display:
    block;

    margin-bottom:
    5px;

    color:
    var(--apc-text);

    font-size:
    0.86rem;
}