/*
 * LEARNOVA++ — Landing Page Executive Modern UI v1.4
 *
 * Built specifically from the current live landing markup and the user's
 * latest screenshots.
 *
 * IMPORTANT:
 * - THE SITE HEADER IS NOT STYLED HERE.
 * - Campus logo and school name are preserved.
 * - This is a visual-only redesign.
 */

/* =========================================================
   LANDING DESIGN TOKENS
   ========================================================= */

.hero,
.main,
.footer {
    --lp-green-950: #06271D;
    --lp-green-900: #093629;
    --lp-green-850: #0D4633;
    --lp-green-800: #125B40;
    --lp-green-700: #1B7751;
    --lp-green-600: #3D9669;
    --lp-green-100: #EAF4EE;
    --lp-green-050: #F6F9F7;

    --lp-gold: #F5C518;
    --lp-gold-2: #FFD84D;
    --lp-gold-soft: #FFF4B8;

    --lp-ink: #17372B;
    --lp-text: #42584D;
    --lp-muted: #718078;

    --lp-border: rgba(8, 54, 39, .11);

    --lp-shadow-s: 0 8px 22px rgba(6, 40, 29, .06);
    --lp-shadow-m: 0 20px 48px rgba(6, 40, 29, .10);
    --lp-shadow-l: 0 32px 90px rgba(0, 25, 17, .20);
}

/* Remove seasonal decoration only. */
.snow-container,
.leaves-container,
.flowers-container,
.sun-container {
    display: none !important;
}

/* =========================================================
   HERO — EXECUTIVE, LARGE-TYPE, MODERN
   ========================================================= */

.hero {
    position: relative !important;
    overflow: hidden !important;

    border-bottom: 1px solid rgba(245, 197, 24, .14) !important;

    background:
        radial-gradient(circle at 84% 18%, rgba(245, 197, 24, .14) 0, transparent 28rem),
        radial-gradient(circle at 9% 94%, rgba(67, 158, 108, .17) 0, transparent 34rem),
        linear-gradient(132deg, #05261C 0%, #083427 44%, #0D4B35 74%, #145E41 100%) !important;
}

.hero::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    background:
        linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px) !important;

    background-size: 52px 52px !important;

    mask-image: linear-gradient(to bottom, rgba(0,0,0,.42), transparent 92%);
}

.hero::after {
    content: "" !important;

    position: absolute !important;
    right: -12rem !important;
    top: 2rem !important;

    width: 38rem !important;
    height: 38rem !important;

    border-radius: 50% !important;

    border: 1px solid rgba(245,197,24,.055) !important;
    box-shadow:
        0 0 0 80px rgba(245,197,24,.018),
        0 0 0 160px rgba(245,197,24,.012) !important;

    pointer-events: none !important;
}

.hero-container {
    position: relative !important;
    z-index: 2 !important;

    width: min(1500px, calc(100% - 88px)) !important;
    max-width: none !important;
    min-height: 0 !important;

    margin: 0 auto !important;
    padding: 76px 0 70px !important;

    display: grid !important;
    grid-template-columns: minmax(0, 1.16fr) minmax(420px, .74fr) !important;
    grid-template-areas:
        "content campus"
        "features features" !important;

    column-gap: clamp(80px, 8vw, 150px) !important;
    row-gap: 72px !important;

    align-items: center !important;
}

/* ---------------------------------------------------------
   HERO COPY
   --------------------------------------------------------- */

.hero-content {
    grid-area: content !important;

    width: 100% !important;
    max-width: 870px !important;

    margin: 0 !important;
    padding: 0 !important;

    justify-self: start !important;
    align-self: center !important;

    text-align: left !important;
}

.hero-content::before {
    content: "Smart school learning · One connected platform" !important;

    width: fit-content !important;

    margin: 0 0 24px !important;
    padding: 10px 15px !important;

    display: inline-flex !important;
    align-items: center !important;

    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 999px !important;

    background: rgba(255,255,255,.07) !important;
    color: rgba(255,255,255,.84) !important;

    font-size: clamp(.85rem, .72vw, .98rem) !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
    letter-spacing: .01em !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.hero-content h2 {
    max-width: 840px !important;

    margin: 0 0 26px !important;

    color: #FFFFFF !important;

    font-family: "Fraunces", serif !important;
    font-size: clamp(4rem, 5.6vw, 6.15rem) !important;
    font-weight: 700 !important;
    line-height: .98 !important;
    letter-spacing: -.048em !important;

    text-wrap: balance !important;
}

.hero-content h2::after {
    content: "" !important;

    display: block !important;

    width: 88px !important;
    height: 5px !important;

    margin-top: 22px !important;

    border-radius: 999px !important;

    background: linear-gradient(90deg, var(--lp-gold), var(--lp-gold-2)) !important;

    box-shadow: 0 4px 18px rgba(245,197,24,.20) !important;
}

.hero-content p {
    max-width: 790px !important;

    margin: 0 0 36px !important;

    color: rgba(255,255,255,.78) !important;

    font-size: clamp(1.15rem, 1vw, 1.34rem) !important;
    font-weight: 450 !important;
    line-height: 1.78 !important;

    text-wrap: pretty !important;
}

.hero-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
}

.hero-btn {
    min-height: 56px !important;
    padding: 14px 24px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    border-radius: 13px !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: clamp(.94rem, .75vw, 1.05rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}

.hero-btn svg {
    width: 21px !important;
    height: 21px !important;
}

.hero-btn.primary {
    border: 1px solid rgba(245,197,24,.56) !important;

    background: var(--lp-gold) !important;
    color: #163526 !important;

    box-shadow: 0 12px 28px rgba(245,197,24,.20) !important;
}

.hero-btn.primary:hover {
    background: var(--lp-gold-2) !important;

    box-shadow: 0 15px 34px rgba(245,197,24,.28) !important;

    transform: translateY(-2px) !important;
}

.hero-btn.secondary {
    border: 1px solid rgba(255,255,255,.21) !important;

    background: rgba(255,255,255,.075) !important;
    color: #FFFFFF !important;

    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
}

.hero-btn.secondary:hover {
    border-color: rgba(255,255,255,.38) !important;

    background: rgba(255,255,255,.13) !important;

    transform: translateY(-2px) !important;
}

/* ---------------------------------------------------------
   CAMPUS IDENTITY — LESS "BOX", MORE INSTITUTIONAL
   --------------------------------------------------------- */

.campus-seal-wrap {
    grid-area: campus !important;

    width: min(520px, 100%) !important;
    min-height: 490px !important;

    margin: 0 !important;
    padding: 38px 32px 34px !important;

    justify-self: end !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 30px !important;

    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 34px !important;

    background:
        radial-gradient(circle at 50% 20%, rgba(245,197,24,.16), transparent 16rem),
        linear-gradient(160deg, rgba(255,255,255,.090), rgba(255,255,255,.035)) !important;

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.075),
        0 34px 80px rgba(0,0,0,.17) !important;
}

.campus-seal-ring-outer {
    position: relative !important;

    width: 232px !important;
    height: 232px !important;

    margin: 0 !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid rgba(245,197,24,.50) !important;
    border-radius: 50% !important;

    background: rgba(5, 42, 30, .40) !important;

    box-shadow:
        0 0 0 10px rgba(245,197,24,.055),
        0 24px 48px rgba(0,0,0,.18) !important;
}

.logo-seal-ring {
    display: none !important;
}

.campus-icon-img {
    width: 194px !important;
    height: 194px !important;

    object-fit: contain !important;

    border-radius: 50% !important;
}

.top-left-campus {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    position: static !important;

    display: flex !important;
    justify-content: center !important;
}

.campus-text {
    width: auto !important;
    max-width: 455px !important;

    padding: 14px 23px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(245,197,24,.80) !important;
    border-radius: 999px !important;

    background: rgba(6, 44, 31, .78) !important;
    color: var(--lp-gold) !important;

    font-size: clamp(.92rem, .75vw, 1.02rem) !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-align: center !important;

    box-shadow:
        0 10px 26px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* ---------------------------------------------------------
   FEATURE CAPABILITY CARDS
   --------------------------------------------------------- */

.features-grid {
    grid-area: features !important;

    width: 100% !important;

    margin: 0 !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

.feature-card {
    position: relative !important;

    min-height: 250px !important;
    padding: 30px 30px 28px !important;

    overflow: hidden !important;

    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 22px !important;

    background:
        linear-gradient(
            160deg,
            rgba(255,255,255,.085) 0%,
            rgba(255,255,255,.045) 100%
        ) !important;

    text-align: left !important;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow: none !important;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}

.feature-card::before {
    position: absolute !important;

    top: 25px !important;
    right: 28px !important;

    color: rgba(245,197,24,.24) !important;

    font-family: "Fraunces", serif !important;
    font-size: 2.6rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.feature-card:nth-child(1)::before { content: "01"; }
.feature-card:nth-child(2)::before { content: "02"; }
.feature-card:nth-child(3)::before { content: "03"; }

.feature-card:hover {
    border-color: rgba(245,197,24,.28) !important;

    background:
        linear-gradient(
            160deg,
            rgba(255,255,255,.11) 0%,
            rgba(255,255,255,.060) 100%
        ) !important;

    box-shadow: 0 20px 44px rgba(0,0,0,.11) !important;

    transform: translateY(-4px) !important;
}

.feature-icon {
    width: 54px !important;
    height: 54px !important;

    margin: 0 0 24px !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid rgba(245,197,24,.23) !important;
    border-radius: 15px !important;

    background: rgba(245,197,24,.105) !important;
    color: var(--lp-gold) !important;
}

.feature-icon svg {
    width: 24px !important;
    height: 24px !important;
}

.feature-card h3 {
    max-width: 82% !important;

    margin: 0 0 12px !important;

    color: #FFFFFF !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: clamp(1.12rem, .95vw, 1.28rem) !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

.feature-card p {
    max-width: 95% !important;

    margin: 0 !important;

    color: rgba(255,255,255,.70) !important;

    font-size: clamp(.96rem, .82vw, 1.07rem) !important;
    line-height: 1.72 !important;
}

/* =========================================================
   ANNOUNCEMENTS — MODERN CONTENT CARD
   ========================================================= */

.main {
    padding: 76px 0 88px !important;

    background:
        linear-gradient(180deg, #F1F5F2 0%, #F8FAF8 100%) !important;
}

.announcements-container {
    width: min(1320px, calc(100% - 64px)) !important;
    max-width: none !important;

    margin: 0 auto !important;
    padding: 0 !important;
}

.announcements-container > .card {
    height: auto !important;
    min-height: 0 !important;

    overflow: hidden !important;

    border: 1px solid var(--lp-border) !important;
    border-radius: 24px !important;

    background: #FFFFFF !important;

    box-shadow: var(--lp-shadow-m) !important;
}

.card-header {
    min-height: 86px !important;
    padding: 22px 26px !important;

    display: flex !important;
    align-items: center !important;

    border-bottom: 1px solid var(--lp-border) !important;

    background:
        linear-gradient(180deg, #FFFFFF 0%, #FCFDFC 100%) !important;
}

.card-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 13px !important;

    color: var(--lp-green-950) !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: clamp(1.3rem, 1.1vw, 1.5rem) !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

.card-title svg {
    width: 46px !important;
    height: 46px !important;
    padding: 11px !important;

    border: 1px solid rgba(245,197,24,.27) !important;
    border-radius: 13px !important;

    background: var(--lp-gold-soft) !important;
    color: #896A00 !important;
}

.card-content {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.announcements-list {
    height: auto !important;
    min-height: 0 !important;

    padding: 18px 24px 4px !important;
}

.landing-announcement-item {
    margin: 0 0 14px !important;
    padding: 20px 22px !important;

    border: 1px solid rgba(8,54,39,.085) !important;
    border-radius: 16px !important;

    background: #FBFDFC !important;

    box-shadow: 0 4px 12px rgba(6,40,29,.025) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease !important;
}

.landing-announcement-item:hover {
    border-color: rgba(8,54,39,.15) !important;

    box-shadow: 0 8px 18px rgba(6,40,29,.045) !important;

    transform: translateY(-1px) !important;
}

.landing-announcement-top {
    margin: 0 0 10px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
}

.landing-announcement-source {
    padding: 6px 11px !important;

    border-radius: 999px !important;

    background: var(--lp-green-100) !important;
    color: var(--lp-green-700) !important;

    font-size: clamp(.72rem, .62vw, .82rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
}

.landing-announcement-top time {
    color: var(--lp-muted) !important;

    font-size: clamp(.76rem, .64vw, .86rem) !important;
    font-weight: 650 !important;
}

.landing-announcement-item h3 {
    margin: 0 0 8px !important;

    color: var(--lp-green-950) !important;

    font-size: clamp(1.06rem, .88vw, 1.20rem) !important;
    font-weight: 800 !important;
    line-height: 1.38 !important;
}

.landing-announcement-item p {
    margin: 0 !important;

    color: var(--lp-text) !important;

    font-size: clamp(.96rem, .78vw, 1.05rem) !important;
    line-height: 1.72 !important;
}

.no-announcements {
    padding: 56px 26px !important;

    text-align: center !important;
}

.no-announcements-icon {
    width: 70px !important;
    height: 70px !important;

    margin: 0 auto 19px !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid rgba(8,54,39,.09) !important;
    border-radius: 20px !important;

    background: var(--lp-green-050) !important;
    color: var(--lp-green-600) !important;
}

.no-announcements-icon svg {
    width: 32px !important;
    height: 32px !important;
}

.no-announcements h3 {
    margin: 0 0 9px !important;

    color: var(--lp-green-950) !important;

    font-size: 1.18rem !important;
    font-weight: 800 !important;
}

.no-announcements p {
    max-width: 620px !important;

    margin: 0 auto !important;

    color: var(--lp-muted) !important;

    font-size: 1rem !important;
    line-height: 1.72 !important;
}

.view-all-btn {
    padding: 4px 24px 24px !important;

    display: flex !important;
    justify-content: flex-end !important;
}

.view-all-btn a {
    min-height: 46px !important;
    padding: 11px 17px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(8,54,39,.13) !important;
    border-radius: 11px !important;

    background: var(--lp-green-050) !important;
    color: var(--lp-green-700) !important;

    font-size: .90rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;

    transition: background .16s ease, border-color .16s ease, color .16s ease !important;
}

.view-all-btn a:hover {
    border-color: rgba(8,54,39,.22) !important;

    background: var(--lp-green-100) !important;
    color: var(--lp-green-900) !important;
}

/* =========================================================
   FOOTER — LARGER, BETTER READABILITY
   ========================================================= */

.footer {
    padding: 68px 0 26px !important;

    border-top: 1px solid rgba(245,197,24,.11) !important;

    background:
        radial-gradient(circle at 92% -18%, rgba(245,197,24,.08), transparent 23rem),
        linear-gradient(132deg, #051E16 0%, #082D22 56%, #0A3B2B 100%) !important;

    color: rgba(255,255,255,.72) !important;
}

.footer-container {
    width: min(1320px, calc(100% - 64px)) !important;
    max-width: none !important;

    margin: 0 auto !important;
    padding: 0 !important;
}

.footer-grid {
    display: grid !important;
    grid-template-columns: 1.5fr .72fr .82fr !important;
    gap: 58px !important;
}

.footer-section h3 {
    margin: 0 0 18px !important;

    color: #FFFFFF !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: clamp(1.14rem, .92vw, 1.28rem) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.footer-section > p {
    max-width: 690px !important;

    margin: 0 !important;

    color: rgba(255,255,255,.62) !important;

    font-size: clamp(.94rem, .78vw, 1.04rem) !important;
    line-height: 1.78 !important;
}

.contact-info {
    margin-top: 22px !important;

    display: grid !important;
    gap: 13px !important;
}

.contact-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 11px !important;

    color: rgba(255,255,255,.66) !important;

    font-size: clamp(.88rem, .72vw, .98rem) !important;
    line-height: 1.58 !important;
}

.contact-item svg {
    width: 18px !important;
    min-width: 18px !important;
    height: 18px !important;

    margin-top: 2px !important;

    color: var(--lp-gold) !important;
}

.footer-btn {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 0 11px !important;
    padding: 11px 14px !important;

    display: flex !important;
    align-items: center !important;
    gap: 10px !important;

    border: 1px solid rgba(255,255,255,.11) !important;
    border-radius: 11px !important;

    background: rgba(255,255,255,.045) !important;
    color: rgba(255,255,255,.78) !important;

    font-family: inherit !important;
    font-size: clamp(.88rem, .70vw, .96rem) !important;
    font-weight: 750 !important;
    text-align: left !important;

    cursor: pointer !important;

    transition:
        background .16s ease,
        border-color .16s ease,
        color .16s ease !important;
}

.footer-btn:hover {
    border-color: rgba(245,197,24,.25) !important;

    background: rgba(255,255,255,.08) !important;
    color: #FFFFFF !important;
}

.footer-btn svg {
    width: 18px !important;
    height: 18px !important;

    color: var(--lp-gold) !important;
}

.social-links {
    margin-top: 19px !important;
}

.social-links a {
    width: 44px !important;
    height: 44px !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid rgba(245,197,24,.20) !important;
    border-radius: 11px !important;

    background: rgba(245,197,24,.065) !important;
    color: var(--lp-gold) !important;

    transition:
        transform .16s ease,
        background .16s ease,
        border-color .16s ease !important;
}

.social-links a:hover {
    border-color: rgba(245,197,24,.36) !important;

    background: rgba(245,197,24,.12) !important;

    transform: translateY(-2px) !important;
}

.footer-separator {
    margin: 46px 0 22px !important;

    border-top: 1px solid rgba(255,255,255,.08) !important;
}

.footer-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.footer-bottom-text {
    color: rgba(255,255,255,.42) !important;

    font-size: clamp(.78rem, .64vw, .88rem) !important;
}

/* =========================================================
   MODALS — VISUAL ONLY
   ========================================================= */

.modal {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal-content {
    overflow: hidden !important;

    border: 1px solid rgba(8,54,39,.11) !important;
    border-radius: 20px !important;

    background: #FFFFFF !important;

    box-shadow: var(--lp-shadow-l) !important;
}

.modal-header {
    padding: 18px 20px !important;

    border-bottom: 1px solid var(--lp-border) !important;

    background:
        linear-gradient(135deg, var(--lp-green-900) 0%, var(--lp-green-700) 100%) !important;
}

.modal-header h3 {
    margin: 0 !important;

    color: #FFFFFF !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: 1.18rem !important;
    font-weight: 800 !important;
}

.modal-close {
    color: #FFFFFF !important;
}

.modal-body {
    background: #FBFDFC !important;

    font-size: 1rem !important;
    line-height: 1.72 !important;
}

.content-modal-body,
.contact-details,
.modal-links {
    font-size: 1rem !important;
    line-height: 1.72 !important;
}

/* =========================================================
   FLOATING BACK TO TOP
   ========================================================= */

.fab {
    width: 48px !important;
    height: 48px !important;

    border: 1px solid rgba(245,197,24,.34) !important;
    border-radius: 13px !important;

    background: var(--lp-green-900) !important;
    color: var(--lp-gold) !important;

    box-shadow: 0 14px 30px rgba(8,45,34,.21) !important;
}

.fab:hover {
    background: var(--lp-green-800) !important;
    transform: translateY(-2px) !important;
}

/* =========================================================
   RESPONSIVE — HEADER STILL EXCLUDED
   ========================================================= */

@media (max-width: 1180px) {
    .hero-container {
        width: min(100% - 48px, 1060px) !important;

        grid-template-columns: minmax(0, 1.05fr) minmax(360px, .72fr) !important;
        column-gap: 54px !important;
    }

    .hero-content h2 {
        font-size: clamp(3.4rem, 5vw, 5rem) !important;
    }

    .campus-seal-wrap {
        min-height: 450px !important;
    }
}

@media (max-width: 960px) {
    .hero-container {
        width: min(100% - 38px, 840px) !important;

        padding: 62px 0 56px !important;

        grid-template-columns: 1fr !important;
        grid-template-areas:
            "campus"
            "content"
            "features" !important;

        gap: 42px !important;
    }

    .campus-seal-wrap {
        width: min(500px, 100%) !important;
        min-height: 380px !important;

        justify-self: center !important;
    }

    .campus-seal-ring-outer {
        width: 176px !important;
        height: 176px !important;
    }

    .campus-icon-img {
        width: 148px !important;
        height: 148px !important;
    }

    .hero-content {
        max-width: 780px !important;

        justify-self: center !important;

        text-align: center !important;
    }

    .hero-content::before {
        margin-inline: auto !important;
    }

    .hero-content h2,
    .hero-content p {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-content h2::after {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-buttons {
        justify-content: center !important;
    }

    .features-grid {
        grid-template-columns: 1fr !important;
    }

    .feature-card {
        min-height: 0 !important;
    }

    .footer-grid {
        grid-template-columns: 1.15fr .85fr !important;
    }

    .footer-grid .footer-section:last-child {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 680px) {
    .hero-container {
        width: calc(100% - 26px) !important;

        padding: 46px 0 50px !important;
    }

    .campus-seal-wrap {
        min-height: 320px !important;
        padding: 25px 17px !important;

        border-radius: 24px !important;
    }

    .campus-seal-ring-outer {
        width: 146px !important;
        height: 146px !important;
    }

    .campus-icon-img {
        width: 122px !important;
        height: 122px !important;
    }

    .campus-text {
        padding: 10px 14px !important;

        font-size: .80rem !important;
    }

    .hero-content::before {
        font-size: .76rem !important;
        line-height: 1.45 !important;
        text-align: center !important;
    }

    .hero-content h2 {
        font-size: clamp(2.5rem, 11vw, 3.7rem) !important;
    }

    .hero-content p {
        font-size: 1rem !important;
        line-height: 1.75 !important;
    }

    .hero-buttons {
        width: 100% !important;

        flex-direction: column !important;
    }

    .hero-btn {
        width: 100% !important;

        font-size: .96rem !important;
    }

    .feature-card {
        padding: 24px !important;
    }

    .feature-card::before {
        top: 22px !important;
        right: 22px !important;

        font-size: 2.2rem !important;
    }

    .feature-card h3 {
        font-size: 1.10rem !important;
    }

    .feature-card p {
        font-size: .96rem !important;
    }

    .announcements-container,
    .footer-container {
        width: calc(100% - 26px) !important;
    }

    .main {
        padding: 46px 0 56px !important;
    }

    .announcements-container > .card {
        border-radius: 18px !important;
    }

    .card-header,
    .announcements-list,
    .view-all-btn {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .landing-announcement-item {
        padding: 17px !important;
    }

    .landing-announcement-top {
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    .landing-announcement-item p {
        font-size: .96rem !important;
    }

    .footer {
        padding-top: 50px !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
    }

    .footer-grid .footer-section:last-child {
        grid-column: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero *,
    .main *,
    .footer *,
    .modal *,
    .fab {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================
   v1.4.1 — FEATURE GRID EQUAL DISTRIBUTION
   ========================================================= */

/*
 * Force the three capability cards to consume the FULL available hero width
 * with equal columns and equal gaps. This also removes any inherited max-width
 * from the original landing stylesheet.
 */
.features-grid {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    justify-self: stretch !important;
    align-self: stretch !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 24px !important;

    justify-content: stretch !important;
    align-items: stretch !important;
}

.features-grid > .feature-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;

    margin: 0 !important;

    box-sizing: border-box !important;
}

@media (max-width: 960px) {
    .features-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}


/* =========================================================
   v1.4.2 — HERO TOP POSITION ADJUSTMENT
   ========================================================= */

/*
 * Reduce the large visual gap below the untouched header.
 * Keep the hero composition, campus identity, feature grid and typography.
 */
.hero-container {
    padding-top: 30px !important;
}

/* Keep the first hero row visually anchored toward the top. */
.hero-content,
.campus-seal-wrap {
    align-self: start !important;
}

/* Give both first-row elements a small, deliberate top offset only. */
.hero-content {
    margin-top: 18px !important;
}

.campus-seal-wrap {
    margin-top: 0 !important;
}

@media (max-width: 960px) {
    .hero-container {
        padding-top: 34px !important;
    }

    .hero-content {
        margin-top: 0 !important;
    }
}

@media (max-width: 680px) {
    .hero-container {
        padding-top: 28px !important;
    }
}


/* =========================================================
   v1.4.3 — SECTION CLARITY + GOLD HEADER DIVIDER
   ========================================================= */

/*
 * HEADER:
 * The original header remains fully controlled by landing.css.
 * This is the ONLY header visual adjustment requested:
 * a gold bottom divider similar to the supplied reference.
 */
.header {
    border-bottom: 3px solid #F5C518 !important;
}

/* =========================================================
   CLEAR SECTION 1: PLATFORM CAPABILITIES
   ========================================================= */

/*
 * Visually separate the capability cards from the main hero message.
 * The cards still remain inside the hero, but now read as their own section.
 */
.features-grid {
    position: relative !important;

    padding-top: 128px !important;
    margin-top: 8px !important;

    border-top: 1px solid rgba(255,255,255,.13) !important;
}

/* Small section eyebrow */
.features-grid::before {
    content: "PLATFORM CAPABILITIES" !important;

    position: absolute !important;
    top: 31px !important;
    left: 0 !important;

    padding: 8px 12px !important;

    border: 1px solid rgba(245,197,24,.28) !important;
    border-radius: 999px !important;

    background: rgba(245,197,24,.08) !important;
    color: #FFD94C !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .055em !important;
}

/* Large subsection title */
.features-grid::after {
    content: "Tools that support everyday school operations" !important;

    position: absolute !important;
    top: 72px !important;
    left: 0 !important;

    color: #FFFFFF !important;

    font-family: "Fraunces", serif !important;
    font-size: clamp(1.65rem, 1.6vw, 2.15rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -.025em !important;
}

/* =========================================================
   CLEAR SECTION 2: PUBLIC ANNOUNCEMENTS
   ========================================================= */

.main {
    position: relative !important;

    padding-top: 82px !important;
    padding-bottom: 96px !important;

    border-top: 1px solid rgba(8,54,39,.07) !important;
    border-bottom: 1px solid rgba(8,54,39,.08) !important;

    background:
        radial-gradient(circle at 86% 8%, rgba(20,91,64,.055), transparent 24rem),
        linear-gradient(180deg, #F5F8F6 0%, #EDF3EF 100%) !important;
}

.announcements-container {
    position: relative !important;

    padding-top: 126px !important;
}

/* Reference-inspired eyebrow */
.announcements-container::before {
    content: "PUBLIC ANNOUNCEMENTS" !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    padding: 8px 13px !important;

    border: 1px solid rgba(8,54,39,.11) !important;
    border-radius: 999px !important;

    background: #FFFFFF !important;
    color: #18372B !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: .80rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .065em !important;

    box-shadow: 0 5px 16px rgba(6,40,29,.045) !important;
}

/* Reference-inspired large section title */
.announcements-container::after {
    content: "Latest updates from LEARNOVA++" !important;

    position: absolute !important;
    top: 45px !important;
    left: 0 !important;

    color: #082D22 !important;

    font-family: "Fraunces", serif !important;
    font-size: clamp(2rem, 2.45vw, 3.1rem) !important;
    font-weight: 700 !important;
    line-height: 1.10 !important;
    letter-spacing: -.035em !important;
}

/*
 * Since the section now has its own clear title above the card,
 * turn the card header into a compact internal utility header rather
 * than another large competing heading.
 */
.card-header {
    min-height: 66px !important;
    padding: 14px 22px !important;

    background: #FFFFFF !important;
}

.card-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
}

.card-title svg {
    width: 38px !important;
    height: 38px !important;
    padding: 9px !important;
}

/* =========================================================
   CLEAR SECTION 3: FOOTER / SCHOOL INFORMATION
   ========================================================= */

.footer {
    border-top: 3px solid rgba(245,197,24,.92) !important;
}

/* =========================================================
   RESPONSIVE SECTION HEADINGS
   ========================================================= */

@media (max-width: 960px) {
    .features-grid {
        padding-top: 118px !important;
    }

    .features-grid::before,
    .features-grid::after {
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: max-content !important;
        max-width: 94% !important;

        text-align: center !important;
    }

    .announcements-container {
        padding-top: 118px !important;
    }
}

@media (max-width: 680px) {
    .header {
        border-bottom-width: 2px !important;
    }

    .features-grid {
        padding-top: 112px !important;
    }

    .features-grid::before {
        top: 25px !important;

        font-size: .72rem !important;
    }

    .features-grid::after {
        top: 65px !important;

        width: 100% !important;

        font-size: 1.45rem !important;
    }

    .main {
        padding-top: 56px !important;
        padding-bottom: 66px !important;
    }

    .announcements-container {
        padding-top: 112px !important;
    }

    .announcements-container::before {
        font-size: .72rem !important;
    }

    .announcements-container::after {
        top: 43px !important;

        width: 100% !important;

        font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    }
}


/* =========================================================
   v1.4.4 — POLISHED SECTION HIERARCHY
   ========================================================= */

/*
 * HEADER:
 * Only the requested gold bottom divider is applied.
 * No dimensions, colors, layout, logo, nav or button styling are changed.
 */
.header {
    border-bottom: 3px solid #F5C518 !important;
}

/* =========================================================
   HERO / INTRODUCTION SECTION
   ========================================================= */

.hero {
    padding-bottom: 0 !important;
}

.hero-container {
    row-gap: 78px !important;
}

/* =========================================================
   PLATFORM CAPABILITIES SECTION
   ========================================================= */

.features-grid {
    position: relative !important;

    padding-top: 138px !important;
    padding-bottom: 18px !important;
    margin-top: 6px !important;

    border-top: 1px solid rgba(255,255,255,.13) !important;
}

.features-grid::before {
    content: "PLATFORM CAPABILITIES" !important;

    position: absolute !important;
    top: 34px !important;
    left: 0 !important;

    padding: 8px 13px !important;

    border: 1px solid rgba(245,197,24,.30) !important;
    border-radius: 999px !important;

    background: rgba(245,197,24,.08) !important;
    color: #FFD94C !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
}

.features-grid::after {
    content: "Built to support daily school operations" !important;

    position: absolute !important;
    top: 77px !important;
    left: 0 !important;

    color: #FFFFFF !important;

    font-family: "Fraunces", serif !important;
    font-size: clamp(1.8rem, 1.7vw, 2.3rem) !important;
    font-weight: 700 !important;
    line-height: 1.14 !important;
    letter-spacing: -.026em !important;
}

/* =========================================================
   PUBLIC ANNOUNCEMENTS SECTION
   ========================================================= */

.main {
    position: relative !important;

    padding-top: 86px !important;
    padding-bottom: 98px !important;

    border-top: 1px solid rgba(8,54,39,.07) !important;
    border-bottom: 1px solid rgba(8,54,39,.08) !important;

    background:
        radial-gradient(circle at 88% 10%, rgba(20,91,64,.06), transparent 25rem),
        linear-gradient(180deg, #F6F9F7 0%, #EDF3EF 100%) !important;
}

.announcements-container {
    position: relative !important;
    padding-top: 136px !important;
}

.announcements-container::before {
    content: "PUBLIC ANNOUNCEMENTS" !important;

    position: absolute !important;
    top: 0 !important;
    left: 0 !important;

    padding: 8px 13px !important;

    border: 1px solid rgba(8,54,39,.12) !important;
    border-radius: 999px !important;

    background: #FFFFFF !important;
    color: #18372B !important;

    font-family: "Plus Jakarta Sans", sans-serif !important;
    font-size: .82rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;

    box-shadow: 0 6px 16px rgba(6,40,29,.05) !important;
}

.announcements-container::after {
    content: "Latest updates from LEARNOVA++" !important;

    position: absolute !important;
    top: 48px !important;
    left: 0 !important;

    color: #082D22 !important;

    font-family: "Fraunces", serif !important;
    font-size: clamp(2.2rem, 2.45vw, 3.2rem) !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
    letter-spacing: -.036em !important;
}

/*
 * Reduce the visual competition of the inner card header.
 * The external section title now owns the hierarchy.
 */
.card-header {
    min-height: 62px !important;
    padding: 13px 22px !important;

    background: linear-gradient(180deg, #FFFFFF 0%, #FCFDFC 100%) !important;
}

.card-title {
    font-size: 1rem !important;
    font-weight: 800 !important;
}

.card-title svg {
    width: 36px !important;
    height: 36px !important;
    padding: 8px !important;
}

/* =========================================================
   FOOTER SECTION DIVIDER
   ========================================================= */

.footer {
    border-top: 3px solid rgba(245,197,24,.95) !important;
}

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

@media (max-width: 960px) {
    .features-grid {
        padding-top: 124px !important;
    }

    .features-grid::before,
    .features-grid::after {
        left: 50% !important;
        transform: translateX(-50%) !important;

        width: max-content !important;
        max-width: 94% !important;

        text-align: center !important;
    }

    .announcements-container {
        padding-top: 122px !important;
    }
}

@media (max-width: 680px) {
    .header {
        border-bottom-width: 2px !important;
    }

    .features-grid {
        padding-top: 116px !important;
    }

    .features-grid::before {
        top: 26px !important;
        font-size: .72rem !important;
    }

    .features-grid::after {
        top: 66px !important;
        width: 100% !important;
        font-size: 1.5rem !important;
    }

    .main {
        padding-top: 58px !important;
        padding-bottom: 68px !important;
    }

    .announcements-container {
        padding-top: 116px !important;
    }

    .announcements-container::before {
        font-size: .72rem !important;
    }

    .announcements-container::after {
        top: 44px !important;
        width: 100% !important;
        font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
    }
}


/* =========================================================
   v1.4.5 — ANNOUNCEMENTS SECTION SIMPLE REFINEMENT
   ========================================================= */

/*
 * Requested:
 * 1) Remove the Announcements section .main background treatment.
 * 2) Change the large Announcements section heading to gold.
 *
 * Nothing else in the landing page is changed.
 */

.main {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* "Latest updates from LEARNOVA++" */
.announcements-container::after {
    color: #F5C518 !important;
}


/* =========================================================
   v1.4.6 — PUBLIC ANNOUNCEMENTS GOLD EYEBROW
   ========================================================= */

/*
 * Match the PUBLIC ANNOUNCEMENTS eyebrow with the existing
 * PLATFORM CAPABILITIES gold treatment.
 */
.announcements-container::before {
    border-color: rgba(245,197,24,.30) !important;
    background: rgba(245,197,24,.08) !important;
    color: #F5C518 !important;
}


/* =========================================================
   v1.4.7 — HERO TITLE READABILITY
   ========================================================= */

/*
 * Increase line spacing and slightly relax letter spacing so the multi-line
 * hero title is easier to read and no longer feels vertically compressed.
 */
.hero-content h2 {
    line-height: 1.10 !important;
    letter-spacing: -.032em !important;
}


/* =========================================================
   v1.4.8 — HERO TITLE GAP + CAMPUS SEAL RING
   ========================================================= */

/*
 * Make the multi-line hero heading visibly easier to read.
 * This is deliberately more generous than v1.4.7 so the change is obvious.
 */
.hero-content h2 {
    line-height: 1.20 !important;
    letter-spacing: -.025em !important;
}

/*
 * Campus seal ring — exact visual treatment requested.
 */
.campus-seal-ring-outer {
    position: relative !important;
    width: 232px !important;
    height: 232px !important;
    margin: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(245, 197, 24, .50) !important;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow:
        0 0 0 10px rgb(255 255 255 / 6%),
        0 24px 48px rgba(0, 0, 0, .18) !important;
}


/* =========================================================
   v1.4.9 — HEADER NAV FONT SIZE
   ========================================================= */

/*
 * User-requested header adjustment only:
 * make About and Login text larger without changing layout, colors,
 * spacing, logo, button shape, or header dimensions.
 */
.nav-desktop > a:not(.login-btn),
.login-btn {
    font-size: 1rem !important;
}


/* =========================================================
   v1.5.0 — ABOUT / MEET THE DEVELOPER TEAM
   ========================================================= */

/*
 * Reuses the same visual language as the existing Resources footer button.
 */
.about-developer-btn {
    width: min(100%, 350px) !important;
    min-height: 52px !important;

    margin-top: 22px !important;
    margin-bottom: 0 !important;

    justify-content: flex-start !important;

    border-color: rgba(245,197,24,.20) !important;
    background: rgba(255,255,255,.052) !important;
}

.about-developer-btn:hover {
    border-color: rgba(245,197,24,.38) !important;
    background: rgba(245,197,24,.09) !important;
}

.about-developer-btn .about-dev-chevron {
    margin-left: auto !important;
    color: rgba(255,255,255,.42) !important;
    transition: transform .16s ease, color .16s ease !important;
}

.about-developer-btn:hover .about-dev-chevron {
    color: #F5C518 !important;
    transform: translateX(3px) !important;
}

/* ---------------------------------------------------------
   DEVELOPER PORTFOLIO MODAL
   --------------------------------------------------------- */

.developer-team-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2600 !important;

    display: none !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 24px !important;

    background: rgba(3, 26, 18, .76) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.developer-team-modal.is-open {
    display: flex !important;
}

.developer-team-shell {
    width: min(1180px, 96vw) !important;
    height: min(850px, 90vh) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 24px !important;

    background: #F4F7F5 !important;

    box-shadow:
        0 32px 90px rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.developer-team-head {
    padding: 20px 22px !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;

    border-bottom: 3px solid #F5C518 !important;

    background:
        radial-gradient(circle at 90% -80%, rgba(245,197,24,.17), transparent 16rem),
        linear-gradient(135deg, #06271D 0%, #0A3A2A 58%, #145B40 100%) !important;
}

.developer-team-title-wrap {
    min-width: 0 !important;
}

.developer-team-kicker {
    margin-bottom: 6px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;

    color: #F5C518 !important;

    font-size: .76rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: .065em !important;
    text-transform: uppercase !important;
}

.developer-team-kicker i {
    font-size: .90rem !important;
}

.developer-team-head h3 {
    margin: 0 !important;

    color: #FFFFFF !important;

    font-family: "Fraunces", serif !important;
    font-size: clamp(1.55rem, 1.8vw, 2.15rem) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: -.025em !important;
}

.developer-team-head p {
    max-width: 760px !important;

    margin: 7px 0 0 !important;

    color: rgba(255,255,255,.65) !important;

    font-size: .90rem !important;
    line-height: 1.55 !important;
}

.developer-team-close {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;

    padding: 0 !important;

    display: inline-grid !important;
    place-items: center !important;

    border: 1px solid rgba(255,255,255,.16) !important;
    border-radius: 11px !important;

    background: rgba(255,255,255,.07) !important;
    color: #FFFFFF !important;

    font-size: 1.05rem !important;

    cursor: pointer !important;

    transition: background .16s ease, border-color .16s ease !important;
}

.developer-team-close:hover {
    border-color: rgba(255,255,255,.28) !important;
    background: rgba(255,255,255,.13) !important;
}

.developer-team-viewer {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    padding: 14px !important;

    background:
        linear-gradient(180deg, #EEF3F0 0%, #F7F9F8 100%) !important;
}

.developer-team-viewer iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 500px !important;

    display: block !important;

    border: 1px solid rgba(8,54,39,.12) !important;
    border-radius: 14px !important;

    background: #FFFFFF !important;

    box-shadow: 0 8px 24px rgba(6,40,29,.08) !important;
}

.developer-team-foot {
    min-height: 62px !important;
    padding: 11px 16px 11px 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    border-top: 1px solid rgba(8,54,39,.10) !important;

    background: #FFFFFF !important;
}

.developer-team-file-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    color: #51665B !important;

    font-size: .80rem !important;
    font-weight: 700 !important;
}

.developer-team-file-label i {
    color: #1B7751 !important;
    font-size: 1rem !important;
}

.developer-team-open {
    min-height: 40px !important;
    padding: 9px 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border: 1px solid rgba(8,54,39,.12) !important;
    border-radius: 10px !important;

    background: #EAF4EE !important;
    color: #125B40 !important;

    font-size: .80rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;

    transition: background .16s ease, border-color .16s ease !important;
}

.developer-team-open:hover {
    border-color: rgba(8,54,39,.22) !important;
    background: #DDEFE4 !important;
    color: #093629 !important;
}

@media (max-width: 680px) {
    .about-developer-btn {
        width: 100% !important;
        max-width: none !important;
    }

    .developer-team-modal {
        padding: 10px !important;
    }

    .developer-team-shell {
        width: 100% !important;
        height: 94vh !important;

        border-radius: 18px !important;
    }

    .developer-team-head {
        padding: 16px !important;
    }

    .developer-team-head p {
        font-size: .80rem !important;
    }

    .developer-team-viewer {
        padding: 8px !important;
    }

    .developer-team-viewer iframe {
        min-height: 420px !important;
        border-radius: 10px !important;
    }

    .developer-team-foot {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .developer-team-open {
        width: 100% !important;
    }
}


/* =========================================================
   v1.5.1 — MEET THE DEVELOPERS + MODAL HEADER VISIBILITY
   ========================================================= */

/* Footer About CTA: same family as Resources / Quick Links */
.about-developer-btn {
    width: min(100%, 360px) !important;
    min-height: 50px !important;
    margin-top: 22px !important;
    justify-content: flex-start !important;
    border-color: rgba(245, 197, 24, .24) !important;
    background: rgba(255,255,255,.05) !important;
}

.about-developer-btn:hover {
    border-color: rgba(245, 197, 24, .42) !important;
    background: rgba(245, 197, 24, .09) !important;
}

.about-developer-btn .about-dev-chevron {
    margin-left: auto !important;
    color: rgba(255,255,255,.48) !important;
}

.about-developer-btn:hover .about-dev-chevron {
    color: #F5C518 !important;
}

/* ---------------------------------------------------------
   FIX: Quick Links / Resources modal headers and close buttons
   --------------------------------------------------------- */

#quickLinksModal .modal-header,
#resourcesModal .modal-header {
    min-height: 64px !important;
    padding: 14px 18px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    border-bottom: 3px solid #F5C518 !important;

    background:
        linear-gradient(135deg, #06271D 0%, #0A3A2A 58%, #145B40 100%) !important;
}

#quickLinksModal .modal-header h3,
#resourcesModal .modal-header h3 {
    display: block !important;
    margin: 0 !important;
    color: #FFFFFF !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
}

#quickLinksModal .modal-close,
#resourcesModal .modal-close {
    position: static !important;

    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;

    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 10px !important;

    background: rgba(255,255,255,.08) !important;
    color: #FFFFFF !important;

    font-size: 1.55rem !important;
    font-weight: 400 !important;
    line-height: 1 !important;

    opacity: 1 !important;
    visibility: visible !important;

    cursor: pointer !important;
}

#quickLinksModal .modal-close:hover,
#resourcesModal .modal-close:hover {
    border-color: rgba(255,255,255,.38) !important;
    background: rgba(255,255,255,.15) !important;
    color: #FFFFFF !important;
}

/* ---------------------------------------------------------
   Developer Team portfolio modal
   --------------------------------------------------------- */

.developer-team-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2800 !important;

    display: none !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 24px !important;

    background: rgba(3, 26, 18, .80) !important;

    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.developer-team-modal.is-open {
    display: flex !important;
}

.developer-team-shell {
    width: min(1180px, 96vw) !important;
    height: min(850px, 90vh) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;

    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 24px !important;

    background: #F4F7F5 !important;

    box-shadow: 0 32px 90px rgba(0,0,0,.34) !important;
}

.developer-team-head {
    padding: 20px 22px !important;

    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 24px !important;

    border-bottom: 3px solid #F5C518 !important;

    background:
        radial-gradient(circle at 90% -80%, rgba(245,197,24,.17), transparent 16rem),
        linear-gradient(135deg, #06271D 0%, #0A3A2A 58%, #145B40 100%) !important;
}

.developer-team-kicker {
    margin-bottom: 7px !important;

    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;

    color: #F5C518 !important;

    font-size: .78rem !important;
    font-weight: 850 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
}

.developer-team-head h3 {
    margin: 0 !important;

    color: #FFFFFF !important;

    font-family: "Fraunces", serif !important;
    font-size: clamp(1.65rem, 1.8vw, 2.2rem) !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
}

.developer-team-head p {
    max-width: 760px !important;

    margin: 8px 0 0 !important;

    color: rgba(255,255,255,.68) !important;

    font-size: .91rem !important;
    line-height: 1.58 !important;
}

.developer-team-close {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;

    padding: 0 !important;

    display: grid !important;
    place-items: center !important;

    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 11px !important;

    background: rgba(255,255,255,.08) !important;
    color: #FFFFFF !important;

    cursor: pointer !important;
}

.developer-team-close:hover {
    border-color: rgba(255,255,255,.36) !important;
    background: rgba(255,255,255,.15) !important;
}

.developer-team-viewer {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    padding: 14px !important;

    background: linear-gradient(180deg, #EEF3F0 0%, #F7F9F8 100%) !important;
}

.developer-team-viewer iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 500px !important;

    display: block !important;

    border: 1px solid rgba(8,54,39,.12) !important;
    border-radius: 14px !important;

    background: #FFFFFF !important;

    box-shadow: 0 8px 24px rgba(6,40,29,.08) !important;
}

.developer-team-foot {
    min-height: 62px !important;
    padding: 11px 16px 11px 20px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    border-top: 1px solid rgba(8,54,39,.10) !important;

    background: #FFFFFF !important;
}

.developer-team-file-label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;

    color: #51665B !important;

    font-size: .82rem !important;
    font-weight: 700 !important;
}

.developer-team-open {
    min-height: 40px !important;
    padding: 9px 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;

    border: 1px solid rgba(8,54,39,.12) !important;
    border-radius: 10px !important;

    background: #EAF4EE !important;
    color: #125B40 !important;

    font-size: .80rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

.developer-team-open:hover {
    border-color: rgba(8,54,39,.22) !important;
    background: #DDEFE4 !important;
    color: #093629 !important;
}

@media (max-width: 680px) {
    .about-developer-btn {
        width: 100% !important;
        max-width: none !important;
    }

    .developer-team-modal {
        padding: 10px !important;
    }

    .developer-team-shell {
        width: 100% !important;
        height: 94vh !important;
        border-radius: 18px !important;
    }

    .developer-team-head {
        padding: 16px !important;
    }

    .developer-team-viewer {
        padding: 8px !important;
    }

    .developer-team-viewer iframe {
        min-height: 420px !important;
        border-radius: 10px !important;
    }

    .developer-team-foot {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .developer-team-open {
        width: 100% !important;
    }
}