@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Baloo+2:wght@600;700;800&display=swap");

.pabasa-info {
    --info-blue-deep: #10466e;
    --info-blue: #2ea8e5;
    --info-blue-light: #eaf7fd;
    --info-yellow: #ffd639;
    --info-yellow-soft: #fff8d6;
    --info-ink: #0f2d45;
    --info-muted: #4a6680;
    --info-line: rgba(16, 70, 110, 0.12);
    --info-shadow: 0 0.75rem 2rem rgba(16, 70, 110, 0.1);
    color: var(--info-ink);
    position: relative;
    isolation: isolate;
    background: #fcfbf8;
    font-family: "Nunito", "Segoe UI", sans-serif;
    overflow: hidden;
}

@keyframes learningPatternDrift {
    from { background-position: 0 0; }
    to { background-position: 360px 240px; }
}

main.flex-grow-1.py-4 { padding-block: 0 !important; }

.info-container { position: relative; z-index: 1; width: min(100% - clamp(2rem, 7vw, 8rem), 80rem); margin-inline: auto; }
.info-section, .info-hero { position: relative; isolation: isolate; overflow: hidden; }
.info-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.info-section--tint { background: linear-gradient(135deg, rgba(234,247,253,.82), rgba(255,248,214,.58)); }

.info-section::before,
.info-hero::before {
    content: "";
    position: absolute;
    inset: -17.5rem -26.25rem;
    z-index: 0;
    opacity: .18;
    pointer-events: none;
    background-repeat: repeat;
    animation: sectionPatternDrift 38s linear infinite;
}

.info-hero::before {
    opacity: .3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='240' viewBox='0 0 360 240'%3E%3Cg fill='none' stroke='%232EA8E5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.68'%3E%3Cpath d='M36 42h24v30H36zM40 47h16M40 53h16M40 59h11'/%3E%3Cpath d='M278 160l5 10 11 2-8 8 2 11-10-5-10 5 2-11-8-8 11-2z'/%3E%3Cpath d='M190 35l16 5-9 28-16-5zM190 35l8-7 8 12'/%3E%3Cpath d='M82 174c10-7 21-7 31 0v25c-10-7-21-7-31 0zM113 174c10-7 21-7 31 0v25c-10-7-21-7-31 0z'/%3E%3C/g%3E%3Cg fill='%23F5B800' opacity='.62'%3E%3Cpath d='M315 45l3 7 8 1-6 5 2 8-7-4-7 4 2-8-6-5 8-1z'/%3E%3Ccircle cx='224' cy='192' r='4'/%3E%3Ccircle cx='55' cy='125' r='3'/%3E%3C/g%3E%3Ctext x='135' y='128' fill='%2310466E' opacity='.54' font-family='Arial,sans-serif' font-size='20' font-weight='700' letter-spacing='3'%3EABC%3C/text%3E%3Ctext x='304' y='126' fill='%232EA8E5' opacity='.48' font-family='Arial,sans-serif' font-size='16' font-weight='700'%3E123%3C/text%3E%3C/svg%3E");
    animation-name: learningPatternDrift;
    animation-duration: 30s;
}

.info-section--purpose::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%2310466E' stroke-width='2' opacity='.5'%3E%3Cpath d='M45 54h75v52H82l-18 14 5-14H45zM300 52c15-9 30-9 45 0v34c-15-9-30-9-45 0zM345 52c15-9 30-9 45 0v34c-15-9-30-9-45 0z'/%3E%3Ccircle cx='91' cy='207' r='28'/%3E%3Ccircle cx='91' cy='207' r='17'/%3E%3Ccircle cx='91' cy='207' r='7'/%3E%3Cpath d='M290 210h78M329 171v78'/%3E%3C/g%3E%3Ctext x='172' y='151' fill='%232EA8E5' opacity='.55' font-family='Arial' font-size='20' font-weight='700'%3EGROW%3C/text%3E%3Cg fill='%23F5B800' opacity='.65'%3E%3Cpath d='M210 50l4 9 10 1-8 7 3 10-9-5-9 5 3-10-8-7 10-1z'/%3E%3C/g%3E%3C/svg%3E"); }
.info-section--actions::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%2310466E' stroke-width='2' opacity='.5'%3E%3Crect x='42' y='40' width='28' height='50' rx='14'/%3E%3Cpath d='M34 67c0 29 44 29 44 0M56 96v18M42 114h28M286 48h72v55h-72zM298 88V72M315 88V61M332 88V53M349 88V67M62 203h74M72 191l18-20 17 12 21-28'/%3E%3C/g%3E%3Ctext x='174' y='151' fill='%232EA8E5' opacity='.55' font-family='Arial' font-size='25' font-weight='700'%3EAa%3C/text%3E%3Ctext x='168' y='182' fill='%237160D8' opacity='.48' font-family='Arial' font-size='17' font-weight='700'%3EREAD%3C/text%3E%3Cg fill='%23F5B800' opacity='.65'%3E%3Ccircle cx='218' cy='60' r='5'/%3E%3C/g%3E%3C/svg%3E"); }
.info-section--audience::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%2310466E' stroke-width='2' opacity='.5'%3E%3Ccircle cx='55' cy='55' r='10'/%3E%3Cpath d='M35 88c3-17 37-17 40 0M300 42h62v48h-62zM310 52h10v10h-10zM327 52h10v10h-10zM344 52h10v10h-10zM327 72h10v18M82 205c13-9 27-9 40 0v31c-13-9-27-9-40 0zM122 205c13-9 27-9 40 0v31c-13-9-27-9-40 0z'/%3E%3C/g%3E%3Ctext x='165' y='157' fill='%232EA8E5' opacity='.5' font-family='Arial' font-size='17' font-weight='700'%3ETOGETHER%3C/text%3E%3Cg fill='%23F5B800' opacity='.65'%3E%3Cpath d='M374 210l4 8 9 1-7 6 2 9-8-4-8 4 2-9-7-6 9-1z'/%3E%3C/g%3E%3C/svg%3E"); }
.info-section--steps::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='280' viewBox='0 0 420 280'%3E%3Cg fill='none' stroke='%2310466E' stroke-width='2' opacity='.5'%3E%3Cpath d='M45 68h62M95 56l12 12-12 12M295 68h62M345 56l12 12-12 12M65 210h82M135 198l12 12-12 12M286 210h82M356 198l12 12-12 12'/%3E%3Ccircle cx='205' cy='68' r='24'/%3E%3Cpath d='M194 68l8 8 15-18M180 210h50v-50h-50zM190 176h30M190 188h22'/%3E%3C/g%3E%3Ctext x='170' y='138' fill='%232EA8E5' opacity='.55' font-family='Arial' font-size='17' font-weight='700'%3ENEXT STEP%3C/text%3E%3Cg fill='%23F5B800' opacity='.65'%3E%3Ccircle cx='66' cy='68' r='5'/%3E%3Ccircle cx='354' cy='210' r='5'/%3E%3C/g%3E%3C/svg%3E"); animation-direction: reverse; }

@keyframes sectionPatternDrift {
    from { background-position: 0 0; transform: translate3d(0,0,0); }
    to { background-position: 420px 280px; transform: translate3d(20px,-12px,0); }
}

.info-hero {
    display: grid;
    place-items: center;
    min-height: clamp(25rem, 56vh, 38rem);
    padding-block: clamp(4.5rem, 10vw, 8rem);
    background: radial-gradient(circle at 20% 25%, rgba(255,214,57,.2), transparent 25%), radial-gradient(circle at 85% 70%, rgba(46,168,229,.18), transparent 30%), rgba(255,255,255,.35);
}
.info-hero__card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(16rem, .9fr); align-items: center; gap: clamp(1.5rem, 5vw, 4rem); padding: clamp(2rem, 5vw, 4.25rem); border: 1px solid rgba(46,168,229,.2); border-radius: clamp(1.5rem, 3vw, 2.25rem); background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(234,247,253,.94) 68%, rgba(255,248,214,.88)); box-shadow: 0 1.5rem 4rem rgba(16,70,110,.14); overflow: hidden; }
.info-hero__inner { max-width: 40rem; }
.info-kicker { display: inline-flex; padding: .45rem .9rem; border: 1px solid rgba(46,168,229,.24); border-radius: 999px; background: rgba(46,168,229,.09); color: var(--info-blue-deep); font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.info-hero h1, .info-heading h2, .info-purpose h2, .info-card h3, .step-card h3 { font-family: "Baloo 2", "Nunito", sans-serif; }
.info-hero h1 { margin: 1rem 0 .8rem; font-size: clamp(2.7rem, 6vw, 5rem); font-weight: 800; line-height: 1.02; color: var(--info-blue-deep); }
.info-hero p { max-width: 46rem; margin: 0 auto; color: var(--info-muted); font-size: clamp(1rem, 1.7vw, 1.25rem); line-height: 1.7; }
.info-hero__visual { position: relative; display: grid; place-items: center; min-height: clamp(15rem, 26vw, 22rem); }
.info-hero__visual::before { content: ""; position: absolute; width: min(100%, 22rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255,214,57,.35), rgba(46,168,229,.2) 55%, transparent 72%); }
.info-hero__visual img { position: relative; z-index: 1; width: min(100%, 23rem); max-height: 22rem; object-fit: contain; filter: drop-shadow(0 1rem 1rem rgba(16,70,110,.15)); }
.pip-greeting { position: absolute; z-index: 3; top: 1%; left: 6%; padding: .65rem 1rem; border: .13rem solid rgba(46,168,229,.22); border-radius: 1.2rem 1.2rem 1.2rem .25rem; background: #fff; color: var(--info-blue-deep); box-shadow: 0 .55rem 1.3rem rgba(16,70,110,.13); font-family: "Baloo 2", sans-serif; font-size: clamp(.9rem, 1.5vw, 1.05rem); font-weight: 800; animation: playfulFloat 4s ease-in-out infinite; }
.pip-greeting span { color: #f36f8e; }
.hero-bubble, .hero-spark { position: absolute; z-index: 2; display: grid; place-items: center; font-family: "Baloo 2", sans-serif; font-weight: 800; }
.hero-bubble { width: 3.25rem; aspect-ratio: 1; border-radius: 1rem 1rem 1rem .3rem; background: #fff; color: var(--info-blue-deep); box-shadow: 0 .5rem 1.25rem rgba(16,70,110,.12); font-size: .78rem; transform: rotate(-7deg); }
.hero-bubble--one { top: 12%; left: 2%; }
.hero-bubble--two { right: 2%; bottom: 14%; transform: rotate(8deg); background: var(--info-yellow-soft); }
.hero-spark { color: var(--info-yellow); font-size: clamp(1.5rem, 3vw, 2.3rem); text-shadow: 0 .3rem .7rem rgba(245,184,0,.22); }
.hero-spark--one { top: 4%; right: 15%; transform: rotate(10deg); }
.hero-spark--two { bottom: 7%; left: 14%; color: var(--info-blue); }

@keyframes playfulFloat {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-.5rem) rotate(2deg); }
}

.info-purpose { display: grid; grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.3fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.info-purpose h2, .info-heading h2 { margin: .65rem 0 0; font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.1; color: var(--info-ink); }
.info-purpose > p { margin: 0; padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: .25rem solid var(--info-yellow); color: var(--info-muted); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.75; }
.info-heading { margin-bottom: clamp(2rem, 4vw, 3rem); text-align: center; }

.action-grid, .audience-grid { display: grid; align-items: stretch; gap: clamp(1rem, 2.4vw, 1.75rem); }
.action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.audience-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.info-card { height: 100%; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--info-line); border-radius: 1.5rem; background: #fff; box-shadow: var(--info-shadow); transition: transform .2s ease, box-shadow .2s ease; }
.info-card:nth-child(even) { border-top: .28rem solid var(--info-yellow); }
.info-card:nth-child(odd) { border-top: .28rem solid var(--info-blue); }
.info-card:hover { transform: translateY(-.3rem) rotate(-.2deg); box-shadow: 0 1.1rem 2.6rem rgba(16,70,110,.14); }
.card-icon { display: grid; place-items: center; width: 3rem; aspect-ratio: 1; margin-bottom: 1.15rem; border-radius: .9rem; background: var(--info-blue-light); color: var(--info-blue-deep); font-size: 1.3rem; }
.card-icon--yellow { background: var(--info-yellow-soft); color: #9b6500; }
.info-card h3 { margin: 0 0 .65rem; font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 800; }
.info-card p, .info-card li { color: var(--info-muted); line-height: 1.6; }
.info-card p { margin: 0; }
.action-card ul { display: grid; gap: .6rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.action-card li { position: relative; padding-left: 1.4rem; }
.action-card li::before { content: ""; position: absolute; left: 0; top: .58em; width: .48rem; aspect-ratio: 1; border-radius: 50%; background: var(--info-yellow); box-shadow: 0 0 0 .2rem var(--info-yellow-soft); }

.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.5rem); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.step-card { display: flex; flex-direction: column; height: 100%; padding: clamp(1.4rem, 2.5vw, 2rem); border-top: .3rem solid var(--info-blue); border-radius: 1rem; background: #fff; box-shadow: var(--info-shadow); }
.step-card > span { margin-bottom: clamp(1.5rem, 4vw, 3rem); color: var(--info-blue); font-size: .85rem; font-weight: 900; letter-spacing: .1em; }
.step-card h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.step-card p { margin: 0; color: var(--info-muted); line-height: 1.55; }

@media (max-width: 64rem) {
    .audience-grid, .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 48rem) {
    .info-container { width: min(100% - 2rem, 80rem); }
    .info-section { padding-block: clamp(3rem, 10vw, 4.5rem); }
    .info-purpose { grid-template-columns: 1fr; gap: 1.5rem; }
    .info-purpose > p { padding: 0 0 0 1.25rem; }
    .action-grid { grid-template-columns: 1fr; }
    .info-hero__card { grid-template-columns: 1fr; text-align: center; }
    .info-hero__inner { margin-inline: auto; }
    .info-hero__visual { min-height: 13rem; }
    .info-hero__visual img { max-height: 15rem; }
}
@media (max-width: 35rem) {
    .info-container { width: min(100% - 1.5rem, 80rem); }
    .info-hero { min-height: 22rem; padding-block: 4rem; }
    .audience-grid, .steps-grid { grid-template-columns: 1fr; }
    .info-card, .step-card { padding: 1.35rem; }
    .step-card { flex-direction: row; gap: 1rem; }
    .step-card > span { flex: 0 0 auto; margin: .2rem 0 0; }
}
@media (prefers-reduced-motion: reduce) { .pabasa-info *, .pabasa-info *::before, .pabasa-info *::after { animation: none !important; scroll-behavior: auto !important; transition: none !important; } }