/* =========================
   Root
========================= */
:root {
    --primary: #00A99D;
    --primary-hover: #009287;
    --primary-soft: #EAF5F3;
    --primary-bright: #20DDD1;

    --secondary: #002147;

    --bg: #F8FAFC;
    --bg-soft: #F3F4F6;
    --white: #FFFFFF;

    --border-light: #D7DDE3;

    --text-muted: #5F738E;

    --secondary-border: rgba(10, 46, 103, 0.08);
    --overlay-dark: rgba(5, 31, 73, 0.72);
    --overlay-light: rgba(8, 43, 99, 0.08);
    --overlay-light-2: rgba(8, 43, 99, 0.18);

    --glass-bg: rgba(255, 255, 255, 0.16);
    --glass-stroke-1: rgba(255, 255, 255, 0.07);
    --glass-stroke-2: rgba(255, 255, 255, 0.03);
    --white-soft: rgba(255, 255, 255, 0.78);
    --white-soft-2: rgba(255, 255, 255, 0.55);
    --white-soft-3: rgba(255, 255, 255, 0.86);
    --white-soft-4: rgba(255, 255, 255, 0.90);
    --white-soft-5: rgba(255, 255, 255, 0.75);

    --primary-divider: rgba(0, 169, 157, 0.45);

    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 18px 40px rgba(0, 33, 71, 0.08);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-xl: 24px;
    --radius-2xl: 28px;
    --radius-3xl: 34px;
    --radius-4xl: 36px;
    --radius-pill: 999px;

    --transition: 0.3s ease;
}

/* =========================
   Base
========================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: "IBM Plex Sans Arabic", sans-serif;
    background: var(--bg);
    color: var(--secondary);
}

a {
    text-decoration: none;
    transition: var(--transition);
}

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

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

section {
    position: relative;
}

/* =========================
   Header / Navbar
========================= */
.site-header {
    padding: 20px 0;
    position: relative;
    z-index: 999;
    background: transparent;
}

.custom-navbar {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-logo img {
    height: 48px;
    width: auto;
    display: block;
}

.custom-navbar .navbar-nav .nav-link {
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    white-space: nowrap;
}

.custom-navbar .navbar-nav .nav-link:hover,
.custom-navbar .navbar-nav .nav-link.active {
    color: var(--secondary);
}

.navbar-actions {
    display: flex;
    align-items: center;
}

.login-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 40px;
    padding: 0 20px;
    border: 2px solid var(--secondary);
    border-radius: var(--radius-md);
    color: var(--secondary);
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.login-btn:hover {
    background: var(--secondary);
    color: var(--white);
}

.navbar-toggler {
    display: none;
}

.navbar-toggler:focus,
.btn-close:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    width: 1.8rem;
    height: 1.8rem;
    filter: contrast(0.2);
}

.offcanvas-lg .offcanvas-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
}

@media (min-width: 992px) {
    .custom-navbar .offcanvas-header {
        display: none;
    }

    .custom-navbar .offcanvas-body {
        padding: 0;
        overflow: visible;
    }

    .custom-navbar .navbar-nav {
        flex-direction: row;
    }
}

@media (max-width: 1199.98px) {
    .site-logo img {
        height: 42px;
    }

    .custom-navbar .navbar-nav .nav-link {
        font-size: 16px;
    }

    .login-btn {
        min-width: 124px;
        font-size: 15px;
        height: 40px;
    }
}

@media (max-width: 991.98px) {
    .site-header {
        padding: 18px 0;
    }

    .navbar-toggler {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .site-logo img {
        height: 38px;
    }

    .custom-navbar .offcanvas-lg {
        width: 320px !important;
        background: var(--white);
        border-left: 1px solid var(--secondary-border);
    }

    .custom-navbar .offcanvas-header {
        padding: 18px 20px;
        border-bottom: 1px solid var(--secondary-border);
    }

    .custom-navbar .offcanvas-body {
        padding: 20px;
        display: block;
    }

    .custom-navbar .navbar-nav {
        gap: 6px !important;
        margin-bottom: 18px;
    }

    .custom-navbar .navbar-nav .nav-link {
        font-size: 16px;
        padding: 10px 0;
    }

    .navbar-actions {
        display: block;
    }

    .login-btn {
        width: 100%;
        min-width: 100%;
        height: 44px;
        border-radius: var(--radius-md);
    }
}

@media (max-width: 575.98px) {
    .site-logo img {
        height: 34px;
    }

    .custom-navbar .offcanvas-lg {
        width: 280px !important;
    }

    .custom-navbar .navbar-nav .nav-link {
        font-size: 15px;
    }
}

/* =========================
   Hero Section
========================= */
#heroSection {
    position: relative;
    overflow: hidden;
    padding: 30px 0;
    background: var(--bg) url("../img/bg-h.webp") left top / cover no-repeat;
}

#heroSection .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    margin-bottom: 24px;
    background: var(--bg-soft);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-pill);
    color: var(--secondary);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

#heroSection .hero-badge::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--primary);
    flex-shrink: 0;
}

#heroSection h1 {
    margin: 0 0 6px;
    color: var(--secondary);
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
}

#heroSection h2 {
    color: var(--primary);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}

#heroSection p {
    max-width: 620px;
    margin: 0 0 32px;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1.9;
}

#heroSection .hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

#heroSection .btn-hero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 230px;
    height: 64px;
    padding: 0 28px;
    border-radius: var(--radius-lg);
    font-size: 20px;
    font-weight: 700;
}

#heroSection .btn-hero-primary {
    background: var(--primary);
    color: var(--white);
    border: 1px solid var(--primary);
}

#heroSection .btn-hero-primary:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--white);
}

#heroSection .btn-hero-outline {
    background: var(--white);
    color: var(--secondary);
    border: 1px solid var(--border-light);
}

#heroSection .btn-hero-outline:hover {
    background: var(--secondary);
    color: var(--white);
    border-color: var(--secondary);
}

#heroSection .icon-circle {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

#heroSection .col-md-6.position-relative {
    position: relative;
}

#heroSection .hero-image-wrap {
    position: relative;
    width: 100%;
}

#heroSection .hero-image-wrap img {
    width: 100%;
    height: auto;
}

#heroSection .hero-stat-card {
    position: absolute;
    right: 55px;
    bottom: 40px;
    display: flex;
    align-items: center;
    gap: 18px;
    background: var(--white);
    padding: 18px 24px;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}

#heroSection .hero-stat-icon {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: var(--primary);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

#heroSection .hero-stat-info {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

#heroSection .hero-stat-info strong {
    margin-bottom: 4px;
    color: var(--secondary);
    font-size: 34px;
    font-weight: 400;
}

#heroSection .hero-stat-info span {
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 1199.98px) {
    #heroSection h1 {
        font-size: 36px;
    }

    #heroSection h2 {
        font-size: 30px;
    }

    #heroSection p {
        font-size: 17px;
    }

    #heroSection .btn-hero {
        min-width: 210px;
        height: 58px;
        font-size: 18px;
    }
}

@media (max-width: 991.98px) {
    #heroSection {
        padding: 30px 0 70px;
        background-position: left top;
        background-size: 160%;
    }

    #heroSection .row {
        row-gap: 40px;
    }

    #heroSection .col-md-6:first-child {
        order: 2;
        text-align: center;
    }

    #heroSection .col-md-6:last-child {
        order: 1;
    }

    #heroSection p {
        max-width: 100%;
    }

    #heroSection .hero-actions {
        justify-content: center;
    }

    #heroSection .hero-image-wrap {
        max-width: 560px;
        margin: 0 auto;
    }

    #heroSection .hero-stat-card {
        right: 50%;
        transform: translateX(50%);
        bottom: -16px;
    }
}

@media (max-width: 767.98px) {
    #heroSection {
        padding: 20px 0;
        background-size: 100%;
    }

    #heroSection .hero-badge {
        font-size: 12px;
        padding: 8px 14px;
        margin-bottom: 18px;
    }

    #heroSection h1 {
        font-size: 26px;
        line-height: 1.4;
    }

    #heroSection h2 {
        font-size: 22px;
        line-height: 1.4;
        margin-bottom: 18px;
    }

    #heroSection p {
        font-size: 15px;
        line-height: 1.9;
        margin-bottom: 24px;
    }

    #heroSection .btn-hero {
        width: 100%;
        min-width: 100%;
        height: 54px;
        font-size: 16px;
        border-radius: 14px;
    }

    #heroSection .hero-stat-card {
        min-width: 190px;
        padding: 14px 16px;
        gap: 12px;
    }

    #heroSection .hero-stat-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    #heroSection .hero-stat-info strong {
        font-size: 28px;
    }

    #heroSection .hero-stat-info span {
        font-size: 13px;
    }
}

/* =========================
   About Section
========================= */
#aboutSection {
    padding: 90px 0;
}

#aboutSection .about-mini-title {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    color: var(--primary);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
}

#aboutSection .about-mini-title .line {
    width: 38px;
    height: 2px;
    background: var(--primary);
    display: inline-block;
}

#aboutSection .about-mini-title strong {
    font-weight: 700;
    letter-spacing: 0.3px;
}

#aboutSection h2 {
    margin: 0 0 28px;
    color: var(--secondary);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.55;
}

#aboutSection p {
    margin: 0 auto 28px;
    max-width: 560px;
    color: var(--text-muted);
    font-size: 19px;
    font-weight: 400;
    line-height: 1.9;
}

#aboutSection .about-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 500;
}

#aboutSection .about-link:hover {
    color: var(--primary);
}

#aboutSection .about-link .arrow {
    color: var(--primary);
    font-size: 22px;
    line-height: 1;
}

#aboutSection .about-image-frame {
    position: relative;
    padding: 24px;
    border: 1.5px dashed var(--primary);
    border-radius: 32px;
}

#aboutSection .about-image-inner {
    overflow: hidden;
    border-radius: var(--radius-2xl);
}

#aboutSection .about-image-inner img {
    width: 100%;
    height: auto;
    min-height: 430px;
    object-fit: cover;
}

@media (max-width: 1199.98px) {
    #aboutSection {
        padding: 70px 0;
    }

    #aboutSection h2 {
        font-size: 30px;
    }

    #aboutSection p {
        font-size: 17px;
    }
}

@media (max-width: 991.98px) {
    #aboutSection {
        padding: 60px 0;
    }

    #aboutSection .row {
        min-height: auto;
    }

    #aboutSection .col-lg-6 {
        order: 1;
    }

    #aboutSection .col-lg-5 {
        order: 2;
    }

    #aboutSection .about-content {
        text-align: center;
    }

    #aboutSection .about-image-frame {
        max-width: 640px;
        margin: 0 auto;
    }

    #aboutSection h2 {
        font-size: 28px;
    }

    #aboutSection p {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    #aboutSection {
        padding: 45px 0;
    }

    #aboutSection .about-mini-title {
        gap: 10px;
        margin-bottom: 18px;
        font-size: 15px;
    }

    #aboutSection .about-mini-title .line {
        width: 28px;
    }

    #aboutSection h2 {
        font-size: 22px;
        line-height: 1.7;
        margin-bottom: 18px;
    }

    #aboutSection p {
        font-size: 15px;
        line-height: 1.9;
        margin-bottom: 20px;
    }

    #aboutSection .about-link {
        font-size: 16px;
    }

    #aboutSection .about-link .arrow {
        font-size: 19px;
    }

    #aboutSection .about-image-frame {
        padding: 14px;
        border-radius: 24px;
    }

    #aboutSection .about-image-inner {
        border-radius: 22px;
    }

    #aboutSection .about-image-inner img {
        min-height: auto;
    }
}

/* =========================
   Library Section
========================= */
#librarySection {
    padding: 70px 0;
}

#librarySection .library-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 42px;
}

#librarySection .library-head-right {
    max-width: 620px;
}

#librarySection .library-head-left {
    max-width: 470px;
    padding-top: 18px;
}

#librarySection .section-mini-title {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color: var(--primary);
    font-size: 18px;
    font-weight: 600;
}

#librarySection .section-mini-title .line {
    width: 34px;
    height: 2px;
    background: var(--primary);
    display: inline-block;
}

#librarySection h2 {
    margin: 0;
    color: var(--secondary);
    font-size: 58px;
    font-weight: 800;
    line-height: 1.2;
}

#librarySection .library-head-left p {
    margin: 0;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.9;
}

#librarySection .library-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 44px;
}

#librarySection .library-card {
    background: var(--white);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#librarySection .library-card-image {
    position: relative;
    height: 196px;
    overflow: hidden;
}

#librarySection .library-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#librarySection .library-lock {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: var(--shadow-sm);
}

#librarySection .library-card-body {
    padding: 24px 26px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

#librarySection .library-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 18px;
}

#librarySection .library-card h3 {
    margin: 0 0 16px;
    color: var(--secondary);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.45;
}

#librarySection .library-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.5;
}

#librarySection .library-card-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-muted);
    font-size: 10px;
    padding-top: 24px;
}

#librarySection .library-arrow {
    color: var(--primary);
    font-size: 14px;
    line-height: 1;
}

#librarySection .library-arrow:hover {
    transform: translateX(-3px);
}

#librarySection .library-action {
    display: flex;
    justify-content: center;
}

#librarySection .library-btn {
    min-width: 214px;
    height: 58px;
    padding: 0 28px;
    border-radius: var(--radius-lg);
    background: var(--secondary);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 18px;
    font-weight: 700;
}

#librarySection .library-btn:hover {
    color: var(--white);
    transform: translateY(-2px);
}

#librarySection .library-btn i {
    font-size: 18px;
}

@media (max-width: 1399.98px) {
    #librarySection h2 {
        font-size: 38px;
    }

    #librarySection .library-card h3 {
        font-size: 20px;
    }
}

@media (max-width: 1199.98px) {
    #librarySection {
        padding: 75px 0 60px;
    }

    #librarySection .library-head {
        flex-direction: column;
        gap: 20px;
    }

    #librarySection .library-head-left,
    #librarySection .library-head-right {
        max-width: 100%;
        padding-top: 0;
    }

    #librarySection h2 {
        font-size: 40px;
    }

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

@media (max-width: 767.98px) {
    #librarySection {
        padding: 55px 0 50px;
    }

    #librarySection .section-mini-title {
        font-size: 15px;
        gap: 10px;
        margin-bottom: 14px;
    }

    #librarySection .section-mini-title .line {
        width: 26px;
    }

    #librarySection h2 {
        font-size: 30px;
        line-height: 1.35;
    }

    #librarySection .library-head-left p {
        font-size: 15px;
        line-height: 1.9;
    }

    #librarySection .library-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    #librarySection .library-card {
        min-height: auto;
        border-radius: 22px;
    }

    #librarySection .library-card-image {
        height: 220px;
    }

    #librarySection .library-card-body {
        padding: 20px 18px 18px;
    }

    #librarySection .library-card h3 {
        font-size: 22px;
        min-height: auto;
    }

    #librarySection .library-card p {
        font-size: 15px;
        min-height: auto;
    }

    #librarySection .library-card-footer {
        padding-top: 18px;
        font-size: 13px;
    }

    #librarySection .library-btn {
        min-width: 190px;
        height: 52px;
        font-size: 16px;
        border-radius: 16px;
    }
}

/* =========================
   Services Section
========================= */
#servicesSection {
    position: relative;
    padding: 70px 0;
    background: url("../img/bg-s.webp") center center / cover no-repeat;
    overflow: hidden;
    isolation: isolate;
}

#servicesSection::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-dark);
    z-index: -2;
}

#servicesSection .services-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--overlay-light) 0%, var(--overlay-light-2) 100%);
    z-index: -1;
}

#servicesSection .services-head {
    display: flex;
    flex-direction: column;
    margin-bottom: 34px;
}

#servicesSection .section-mini-title.light {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--primary);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 18px;
}

#servicesSection .section-mini-title.light .line {
    width: 34px;
    height: 2px;
    background: var(--primary);
    display: inline-block;
}

#servicesSection .services-head h2 {
    margin: 0;
    color: var(--white);
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    text-align: right;
}

#servicesSection .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

#servicesSection .service-card {
    position: relative;
    min-height: 318px;
    padding: 30px 34px 26px;
    border-radius: var(--radius-xl);
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    overflow: hidden;
}

#servicesSection .service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--glass-stroke-1) 0%, var(--glass-stroke-2) 100%);
    pointer-events: none;
}

#servicesSection .service-icon {
    width: 66px;
    height: 66px;
    border-radius: var(--radius-lg);
    background: var(--primary);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}

#servicesSection .service-body {
    position: relative;
    z-index: 1;
}

#servicesSection .service-body h3 {
    margin: 0 0 18px;
    color: var(--white);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
}

#servicesSection .service-body p {
    margin: 0;
    color: var(--white-soft);
    font-size: 16px;
    line-height: 1.9;
    min-height: 115px;
}

#servicesSection .service-link {
    margin-top: 28px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--primary);
    font-size: 18px;
    font-weight: 700;
}

#servicesSection .service-link:hover {
    color: var(--primary-bright);
}

#servicesSection .service-link i {
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 1399.98px) {
    #servicesSection .services-head h2 {
        font-size: 36px;
    }

    #servicesSection .service-body h3 {
        font-size: 24px;
    }
}

@media (max-width: 1199.98px) {
    #servicesSection {
        padding: 72px 0 58px;
    }

    #servicesSection .services-head h2 {
        font-size: 42px;
    }

    #servicesSection .services-grid {
        gap: 20px;
    }

    #servicesSection .service-card {
        padding: 26px 24px 22px;
    }

    #servicesSection .service-body h3 {
        font-size: 22px;
    }
}

@media (max-width: 991.98px) {
    #servicesSection .services-grid {
        grid-template-columns: 1fr;
    }

    #servicesSection .service-card {
        min-height: auto;
    }

    #servicesSection .service-body p {
        min-height: auto;
    }
}

@media (max-width: 767.98px) {
    #servicesSection {
        padding: 55px 0 46px;
    }

    #servicesSection .section-mini-title.light {
        font-size: 15px;
        gap: 10px;
        margin-bottom: 14px;
    }

    #servicesSection .section-mini-title.light .line {
        width: 26px;
    }

    #servicesSection .services-head {
        margin-bottom: 24px;
    }

    #servicesSection .services-head h2 {
        font-size: 30px;
        line-height: 1.35;
    }

    #servicesSection .services-grid {
        gap: 16px;
    }

    #servicesSection .service-card {
        padding: 22px 18px 18px;
        border-radius: 20px;
    }

    #servicesSection .service-icon {
        width: 58px;
        height: 58px;
        border-radius: 16px;
        font-size: 24px;
        margin-bottom: 20px;
    }

    #servicesSection .service-body h3 {
        font-size: 22px;
        margin-bottom: 14px;
    }

    #servicesSection .service-body p {
        font-size: 15px;
        line-height: 1.85;
    }

    #servicesSection .service-link {
        margin-top: 20px;
        font-size: 16px;
        gap: 10px;
    }
}

/* =========================
   Pricing Section
========================= */
#pricingSection {
    padding: 70px 0;
}

#pricingSection .pricing-head {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 54px;
}

#pricingSection .pricing-head h2 {
    margin: 0 0 14px;
    color: var(--secondary);
    font-size: 38px;
    font-weight: 800;
    line-height: 1.3;
}

#pricingSection .pricing-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.9;
}

#pricingSection .pricing-layout {
    display: grid;
    grid-template-columns: 1fr 1.06fr 1fr;
    gap: 26px;
    align-items: center;
}

#pricingSection .pricing-card {
    position: relative;
    border-radius: var(--radius-3xl);
    overflow: hidden;
}

#pricingSection .pricing-card-side {
    background: transparent;
    border: 1px solid var(--border-light);
    min-height: 434px;
}

#pricingSection .pricing-card-featured {
    background: var(--secondary);
    border: 2px solid var(--primary);
    min-height: 506px;
    box-shadow: var(--shadow-lg);
}

#pricingSection .pricing-card-body {
    padding: 46px 42px 30px;
    display: flex;
    flex-direction: column;
    min-height: inherit;
}

#pricingSection .pricing-card-featured .pricing-card-body {
    padding-top: 62px;
    padding-bottom: 34px;
}

#pricingSection .pricing-card h3 {
    margin: 0 0 18px;
    color: var(--secondary);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
}

#pricingSection .pricing-card-featured h3 {
    color: var(--white);
    font-size: 29px;
}

#pricingSection .pricing-note {
    margin-bottom: 28px;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 700;
}

#pricingSection .pricing-desc {
    margin: 0 0 28px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 2;
}

#pricingSection .pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 34px;
}

#pricingSection .pricing-price .currency {
    color: var(--text-muted);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}

#pricingSection .pricing-price strong {
    color: var(--primary);
    font-size: 46px;
    font-weight: 800;
    line-height: 1;
}

#pricingSection .pricing-price-free strong {
    color: var(--secondary);
}

#pricingSection .pricing-card-featured .pricing-price .currency {
    color: var(--white-soft-2);
}

#pricingSection .pricing-card-featured .pricing-price strong {
    color: var(--primary);
    font-size: 58px;
}

#pricingSection .pricing-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

#pricingSection .pricing-features li {
    position: relative;
    padding-right: 34px;
    margin-bottom: 18px;
    color: var(--secondary);
    font-size: 16px;
    line-height: 1.95;
}

#pricingSection .pricing-card-featured .pricing-features li {
    color: var(--white);
}

#pricingSection .pricing-features li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
}

#pricingSection .pricing-features li::after {
    content: "";
    position: absolute;
    right: 7px;
    top: 12px;
    width: 7px;
    height: 4px;
    border-left: 2px solid var(--white);
    border-bottom: 2px solid var(--white);
    transform: rotate(-45deg);
}

#pricingSection .pricing-badge {
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(50%);
    min-width: 94px;
    height: 30px;
    padding: 0 14px;
    background: var(--primary);
    color: var(--white);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    z-index: 2;
}

#pricingSection .pricing-btn {
    margin-top: auto;
    width: 100%;
    min-height: 58px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 800;
}

#pricingSection .pricing-btn-outline {
    border: 1px solid var(--border-light);
    color: var(--secondary);
    background: transparent;
}

#pricingSection .pricing-btn-outline:hover {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--white);
}

#pricingSection .pricing-btn-solid {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: var(--white);
}

#pricingSection .pricing-btn-solid:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

@media (max-width: 1199.98px) {
    #pricingSection .pricing-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    #pricingSection .pricing-card-side,
    #pricingSection .pricing-card-featured {
        min-height: auto;
    }

    #pricingSection .pricing-card-body,
    #pricingSection .pricing-card-featured .pricing-card-body {
        min-height: auto;
    }

    #pricingSection .pricing-card-featured .pricing-price strong {
        font-size: 52px;
    }
}

@media (max-width: 767.98px) {
    #pricingSection {
        padding: 56px 0 48px;
    }

    #pricingSection .pricing-head {
        margin-bottom: 28px;
    }

    #pricingSection .pricing-head h2 {
        font-size: 28px;
    }

    #pricingSection .pricing-head p {
        font-size: 15px;
    }

    #pricingSection .pricing-card {
        border-radius: 24px;
    }

    #pricingSection .pricing-card-body {
        padding: 28px 18px 18px;
    }

    #pricingSection .pricing-card-featured .pricing-card-body {
        padding-top: 52px;
    }

    #pricingSection .pricing-card h3 {
        font-size: 24px;
    }

    #pricingSection .pricing-price {
        margin-bottom: 24px;
    }

    #pricingSection .pricing-price .currency,
    #pricingSection .pricing-desc,
    #pricingSection .pricing-features li,
    #pricingSection .pricing-note {
        font-size: 15px;
    }

    #pricingSection .pricing-price strong {
        font-size: 42px;
    }

    #pricingSection .pricing-card-featured .pricing-price strong {
        font-size: 48px;
    }

    #pricingSection .pricing-btn {
        min-height: 52px;
        font-size: 16px;
        border-radius: 14px;
    }
}

/* =========================
   Footer
========================= */
#siteFooter {
    padding: 50px 0 0;
    background: var(--secondary);
    color: var(--white);
    overflow: hidden;
}

#siteFooter .footer-top {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1.1fr;
    gap: 48px;
    padding-bottom: 34px;
}

#siteFooter .footer-col h3 {
    margin: 0 0 24px;
    color: var(--white);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.4;
}

#siteFooter .footer-logo {
    display: inline-block;
    margin-bottom: 22px;
}

#siteFooter .footer-logo img {
    height: 56px;
    width: auto;
}

#siteFooter .footer-brand p {
    margin: 0 0 22px;
    max-width: 290px;
    color: var(--white-soft-3);
    font-size: 14px;
    line-height: 2;
}

#siteFooter .footer-links,
#siteFooter .footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

#siteFooter .footer-links li:not(:last-child),
#siteFooter .footer-contact-list li:not(:last-child) {
    margin-bottom: 14px;
}

#siteFooter .footer-links a,
#siteFooter .footer-contact-list a {
    color: var(--white-soft-4);
    font-size: 14px;
    line-height: 1;
}

#siteFooter .footer-links a:hover,
#siteFooter .footer-contact-list a:hover {
    color: var(--primary);
}

#siteFooter .footer-contact-list a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#siteFooter .footer-contact-list i {
    color: var(--primary);
    font-size: 18px;
    line-height: 1;
}

#siteFooter .footer-social {
    display: flex;
    align-items: center;
    gap: 12px;
}

#siteFooter .footer-social a {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--white-soft-5);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#siteFooter .footer-social a:hover {
    border-color: var(--primary);
    color: var(--primary);
}

#siteFooter .footer-bottom {
    border-top: 1px solid var(--primary-divider);
    padding: 18px 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

#siteFooter .footer-partner img {
    height: 40px;
    width: auto;
}

#siteFooter .footer-bottom p {
    margin: 0;
    color: var(--white);
    font-size: 16px;
    line-height: 1.7;
}

@media (max-width: 1199.98px) {
    #siteFooter .footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px 24px;
    }
}

@media (max-width: 767.98px) {
    #siteFooter {
        padding-top: 32px;
    }

    #siteFooter .footer-top {
        grid-template-columns: 1fr;
        gap: 28px;
        padding-bottom: 24px;
    }

    #siteFooter .footer-col h3 {
        font-size: 20px;
        margin-bottom: 16px;
    }

    #siteFooter .footer-logo img {
        height: 48px;
    }

    #siteFooter .footer-brand p,
    #siteFooter .footer-links a,
    #siteFooter .footer-contact-list a,
    #siteFooter .footer-bottom p {
        font-size: 14px;
    }

    #siteFooter .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    #siteFooter .footer-partner img {
        height: 34px;
    }
}

/* =========================
   Career Articles Section - Refined
========================= */
#careerArticlesSection {
    padding: 30px 0 70px;
}

#careerArticlesSection .container {
    max-width: 1230px;
}

#careerArticlesSection .career-articles-heading {
    margin-bottom: 34px;
}

#careerArticlesSection .career-articles-heading h2 {
    margin: 0;
    color: #000000;
    font-size: 45px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
}

#careerArticlesSection .career-articles-row {
    --bs-gutter-x: 28px;
    --bs-gutter-y: 28px;
}

#careerArticlesSection .career-article-card {
    background: #ffffff;
    border: 1px solid rgba(0, 33, 71, 0.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 33, 71, 0.05);
    height: 100%;
}

#careerArticlesSection .career-article-image {
    position: relative;
    height: 191px;
    overflow: hidden;
}

#careerArticlesSection .career-article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#careerArticlesSection .premium-badge {
    position: absolute;
    top: 14px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    background: #1fd3eb;
    color: #002147;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

#careerArticlesSection .premium-badge i {
    font-size: 11px;
    line-height: 1;
}

#careerArticlesSection .article-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #1fd3eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 33, 71, 0.08);
    font-size: 18px;
}

#careerArticlesSection .career-article-body {
    padding: 22px 24px 18px;
}

#careerArticlesSection .career-article-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

#careerArticlesSection .article-category {
    color: #1fd3eb;
    background-color: #E7FBFD;
    padding: 2px 5px;
    border-radius: 7px;
}

#careerArticlesSection .reading-time,
#careerArticlesSection .dot {
    color: #7d8da6;
}

#careerArticlesSection .career-article-card h3 {
    margin: 0 0 14px;
    color: #0a1930;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
}

#careerArticlesSection .career-article-card p {
    margin: 0;
    color: #7b8aa2;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    min-height: 85px;
}

#careerArticlesSection .career-article-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 33, 71, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

#careerArticlesSection .article-date {
    color: #95a3b8;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
}

#careerArticlesSection .article-author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0a1930;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

#careerArticlesSection .article-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Large screens */
@media (max-width: 1399.98px) {
    #careerArticlesSection .career-articles-heading h2 {
        font-size: 36px;
    }
}

/* Tablet */
@media (max-width: 1199.98px) {
    #careerArticlesSection {
        padding: 50px 0;
    }

    #careerArticlesSection .container {
        max-width: 100%;
    }

    #careerArticlesSection .career-articles-heading h2 {
        font-size: 38px;
    }

    #careerArticlesSection .career-articles-row {
        --bs-gutter-x: 24px;
        --bs-gutter-y: 24px;
    }

    #careerArticlesSection .career-article-card h3 {
        font-size: 21px;
        min-height: auto;
    }

    #careerArticlesSection .career-article-card p {
        min-height: auto;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    #careerArticlesSection {
        padding: 38px 0 56px;
    }

    #careerArticlesSection .career-articles-heading {
        margin-bottom: 22px;
    }

    #careerArticlesSection .career-articles-heading h2 {
        font-size: 30px;
        line-height: 1.4;
    }

    #careerArticlesSection .career-articles-row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 20px;
    }

    #careerArticlesSection .career-article-image {
        height: 210px;
    }

    #careerArticlesSection .career-article-body {
        padding: 18px 18px 16px;
    }

    #careerArticlesSection .career-article-meta {
        margin-bottom: 12px;
        font-size: 12px;
    }

    #careerArticlesSection .career-article-card h3 {
        font-size: 20px;
        line-height: 1.5;
        margin-bottom: 12px;
        min-height: auto;
    }

    #careerArticlesSection .career-article-card p {
        font-size: 15px;
        line-height: 1.75;
        min-height: auto;
    }

    #careerArticlesSection .career-article-footer {
        margin-top: 18px;
        padding-top: 14px;
    }

    #careerArticlesSection .article-date,
    #careerArticlesSection .article-author {
        white-space: normal;
    }
}


/* =========================
   Work Samples Section
========================= */
#workSamplesSection {
    padding: 54px 0 78px;
}

#workSamplesSection .container {
    max-width: 1235px;
}

#workSamplesSection .work-samples-row {
    --bs-gutter-x: 28px;
    --bs-gutter-y: 34px;
}

#workSamplesSection .work-sample-card {
    background: #ffffff;
    border: 1px solid rgba(0, 33, 71, 0.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 33, 71, 0.05);
    height: 100%;
}

#workSamplesSection .work-sample-image {
    position: relative;
    height: 238px;
    overflow: hidden;
    background: #dfe6ea;
}

#workSamplesSection .work-sample-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#workSamplesSection .premium-badge {
    position: absolute;
    top: 14px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    background: #1fd3eb;
    color: #002147;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    z-index: 3;
}

#workSamplesSection .premium-badge i {
    font-size: 11px;
    line-height: 1;
}

#workSamplesSection .sample-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: #ffffff;
    color: #1fd3eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(0, 33, 71, 0.08);
    font-size: 18px;
    z-index: 3;
}

#workSamplesSection .sample-overlay-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 2;
}

#workSamplesSection .sample-overlay-icon {
    color: rgba(255, 255, 255, 0.82);
    font-size: 82px;
    line-height: 1;
}

#workSamplesSection .sample-overlay-content span {
    color: rgba(255, 255, 255, 0.85);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 2px;
    line-height: 1;
}

#workSamplesSection .work-sample-body {
    padding: 20px 24px 18px;
}

#workSamplesSection .work-sample-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

#workSamplesSection .sample-category {
    color: #1fd3eb;
    background-color: #E7FBFD;
    padding: 2px 5px;
    border-radius: 7px;
}

#workSamplesSection .sample-size,
#workSamplesSection .dot {
    color: #7d8da6;
}

#workSamplesSection .work-sample-card h3 {
    margin: 0 0 14px;
    color: #0a1930;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
}

#workSamplesSection .work-sample-card p {
    margin: 0;
    color: #7b8aa2;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    min-height: 86px;
}

#workSamplesSection .work-sample-footer {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 33, 71, 0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

#workSamplesSection .download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
    padding: 0 12px;
    border-radius: 999px;
    background: #18b9a9;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: 0.3s ease;
}

#workSamplesSection .download-btn:hover {
    background: #0ea395;
    color: #ffffff;
}

#workSamplesSection .sample-author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #0a1930;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}

#workSamplesSection .sample-author img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1399.98px) {
    #workSamplesHero .work-samples-hero-content h1 {
        font-size: 58px;
    }
}

@media (max-width: 1199.98px) {
    #workSamplesHero {
        padding: 38px 0 30px;
    }

    #workSamplesHero .work-samples-hero-content h1 {
        font-size: 50px;
    }

    #workSamplesSection {
        padding: 46px 0 70px;
    }

    #workSamplesSection .container {
        max-width: 100%;
    }

    #workSamplesSection .work-samples-row {
        --bs-gutter-x: 24px;
        --bs-gutter-y: 24px;
    }

    #workSamplesSection .work-sample-card h3,
    #workSamplesSection .work-sample-card p {
        min-height: auto;
    }
}

@media (max-width: 767.98px) {
    #workSamplesHero {
        padding: 28px 0 24px;
    }

    #workSamplesHero .work-samples-hero-content h1 {
        font-size: 34px;
    }

    #workSamplesSection {
        padding: 32px 0 54px;
    }

    #workSamplesSection .work-samples-row {
        --bs-gutter-x: 0;
        --bs-gutter-y: 20px;
    }

    #workSamplesSection .work-sample-image {
        height: 215px;
    }

    #workSamplesSection .sample-overlay-icon {
        font-size: 70px;
    }

    #workSamplesSection .sample-overlay-content span {
        font-size: 15px;
        letter-spacing: 1.5px;
    }

    #workSamplesSection .work-sample-body {
        padding: 18px 18px 16px;
    }

    #workSamplesSection .work-sample-meta {
        font-size: 12px;
        margin-bottom: 12px;
    }

    #workSamplesSection .work-sample-card h3 {
        font-size: 20px;
        line-height: 1.45;
        margin-bottom: 12px;
    }

    #workSamplesSection .work-sample-card p {
        font-size: 15px;
        line-height: 1.75;
    }

    #workSamplesSection .work-sample-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    #workSamplesSection .sample-author {
        white-space: normal;
    }
}

/* =========================
   Audit Stages Timeline
========================= */
#auditStagesTimeline {
    padding: 74px 0 86px;
}

#auditStagesTimeline .container {
    max-width: 1230px;
}

#auditStagesTimeline .audit-stages-heading {
    margin-bottom: 54px;
}

#auditStagesTimeline .audit-stages-heading h2 {
    margin: 0 0 16px;
    color: #0a2a5e;
    font-size: 64px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0;
}

#auditStagesTimeline .audit-stages-heading p {
    margin: 0;
    color: #6f84a4;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.7;
}

#auditStagesTimeline .audit-stages-flow {
    position: relative;
}

#auditStagesTimeline .audit-flow-line {
    position: absolute;
    top: 147px;
    left: 16.666%;
    right: 16.666%;
    height: 1px;
    background: rgba(16, 170, 160, 0.35);
    z-index: 0;
}

#auditStagesTimeline .row {
    position: relative;
    z-index: 1;
}

#auditStagesTimeline .audit-stage-card {
    background: #ffffff;
    border-radius: 28px;
    min-height: 278px;
    padding: 32px 38px 34px;
    text-align: center;
    box-shadow: 0 8px 20px rgba(0, 33, 71, 0.08);
    border: 1px solid rgba(0, 33, 71, 0.04);
}

#auditStagesTimeline .stage-number {
    width: 66px;
    height: 66px;
    margin: 0 auto 28px;
    border-radius: 50%;
    border: 5px solid #10aaa0;
    background: #ffffff;
    color: #10aaa0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
    font-weight: 500;
    line-height: 1;
}

#auditStagesTimeline .audit-stage-card h3 {
    margin: 0 0 24px;
    color: #0a2a5e;
    font-size: 25px;
    font-weight: 800;
    line-height: 1.5;
}

#auditStagesTimeline .audit-stage-card h3 span {
    font-weight: 800;
    color: #0a2a5e;
}

#auditStagesTimeline .audit-stage-card p {
    margin: 0;
    color: #8b99ae;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.9;
}

/* Large */
@media (max-width: 1399.98px) {
    #auditStagesTimeline .audit-stages-heading h2 {
        font-size: 36px;
    }

    #auditStagesTimeline .audit-stages-heading p {
        font-size: 20px;
    }
}

/* Tablet */
@media (max-width: 1199.98px) {
    #auditStagesTimeline {
        padding: 62px 0 76px;
    }

    #auditStagesTimeline .container {
        max-width: 100%;
    }

    #auditStagesTimeline .audit-stages-heading {
        margin-bottom: 42px;
    }

    #auditStagesTimeline .audit-stages-heading h2 {
        font-size: 48px;
    }

    #auditStagesTimeline .audit-stages-heading p {
        font-size: 21px;
    }

    #auditStagesTimeline .audit-flow-line {
        display: none;
    }

    #auditStagesTimeline .audit-stage-card {
        min-height: 255px;
        padding: 28px 30px 30px;
    }

    #auditStagesTimeline .stage-number {
        margin-bottom: 24px;
    }

    #auditStagesTimeline .audit-stage-card h3 {
        font-size: 22px;
        margin-bottom: 18px;
    }

    #auditStagesTimeline .audit-stage-card p {
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    #auditStagesTimeline {
        padding: 42px 0 56px;
    }

    #auditStagesTimeline .audit-stages-heading {
        margin-bottom: 28px;
    }

    #auditStagesTimeline .audit-stages-heading h2 {
        font-size: 34px;
        line-height: 1.35;
    }

    #auditStagesTimeline .audit-stages-heading p {
        font-size: 18px;
        line-height: 1.8;
    }

    #auditStagesTimeline .audit-stage-card {
        min-height: auto;
        border-radius: 22px;
        padding: 24px 22px;
    }

    #auditStagesTimeline .stage-number {
        width: 58px;
        height: 58px;
        margin: 0 auto 20px;
        border-width: 4px;
        font-size: 24px;
    }

    #auditStagesTimeline .audit-stage-card h3 {
        font-size: 20px;
        line-height: 1.6;
        margin-bottom: 14px;
    }

    #auditStagesTimeline .audit-stage-card p {
        font-size: 15px;
        line-height: 1.9;
    }
}


/* =========================
   Podcast Details Page
========================= */
#podcastDetailsPage {
    padding: 22px 0 0;
}

/* Featured */
#podcastFeaturedSection {
    padding: 18px 0 34px;
}

#podcastFeaturedSection .container,
#podcastIntroSection .container,
#podcastEpisodesSection .container {
    max-width: 1230px;
}

#podcastFeaturedSection .podcast-featured-card {
    background: #ffffff;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 33, 71, 0.05);
}

#podcastFeaturedSection .podcast-featured-image {
    height: 500px;
    overflow: hidden;
    background: #d9e0e6;
}

#podcastFeaturedSection .podcast-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#podcastFeaturedSection .podcast-featured-content {
    padding: 46px 48px 42px;
    text-align: right;
}

#podcastFeaturedSection .podcast-featured-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

#podcastFeaturedSection .podcast-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 29px;
    padding: 0 14px;
    border-radius: 999px;
    background: #dff6f4;
    color: #18b9a9;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

#podcastFeaturedSection .podcast-duration {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #99a7ba;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

#podcastFeaturedSection .podcast-duration i {
    font-size: 13px;
}

#podcastFeaturedSection h1 {
    margin: 0 0 14px;
    color: #162a51;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.45;
}

#podcastFeaturedSection p {
    margin: 0 0 26px;
    color: #7b8ca5;
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
}

#podcastFeaturedSection .podcast-play-btn {
    min-width: 145px;
    height: 50px;
    padding: 0 22px;
    border-radius: 15px;
    border: none;
    background: #18b9a9;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 8px 16px rgba(24, 185, 169, 0.18);
    transition: 0.3s ease;
}

#podcastFeaturedSection .podcast-play-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

#podcastFeaturedSection .podcast-play-btn:hover {
    background: #10a899;
    color: #ffffff;
}

#podcastFeaturedSection .podcast-play-btn i {
    font-size: 17px;
}

/* Intro */
#podcastIntroSection {
    padding: 4px 0 22px;
}

#podcastIntroSection .podcast-intro-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

#podcastIntroSection .podcast-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    background: #dff6f4;
    color: #18b9a9;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

#podcastIntroSection .podcast-intro-top p {
    margin: 0;
    color: #8b99ad;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

#podcastIntroSection .podcast-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

#podcastIntroSection .title-line {
    width: 5px;
    height: 30px;
    border-radius: 99px;
    background: #18b9a9;
    flex-shrink: 0;
}

#podcastIntroSection .podcast-section-title h2 {
    margin: 0;
    color: #162a51;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
}

/* Episodes */
#podcastEpisodesSection {
    padding: 0 0 86px;
}

#podcastEpisodesSection .podcast-episode-card {
    background: #ffffff;
    border: 1px solid rgba(0, 33, 71, 0.05);
    border-radius: 26px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 2px 10px rgba(0, 33, 71, 0.03);
}

#podcastEpisodesSection .podcast-episode-card + .podcast-episode-card {
    margin-top: 20px;
}

#podcastEpisodesSection .podcast-episode-thumb {
    width: 120px;
    height: 120px;
    border-radius: 18px;
    overflow: hidden;
    flex-shrink: 0;
    background: #dbe2e8;
}

#podcastEpisodesSection .podcast-episode-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#podcastEpisodesSection .podcast-episode-content {
    flex: 1;
    min-width: 0;
    text-align: right;
}

#podcastEpisodesSection .episode-label {
    display: inline-block;
    margin-bottom: 6px;
    color: #18b9a9;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

#podcastEpisodesSection .podcast-episode-content h3 {
    margin: 0 0 10px;
    color: #162a51;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
}

#podcastEpisodesSection .podcast-episode-content p {
    margin: 0 0 10px;
    color: #8a98ab;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
}

#podcastEpisodesSection .podcast-episode-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

#podcastEpisodesSection .podcast-episode-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #98a6b9;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

#podcastEpisodesSection .podcast-episode-meta i {
    font-size: 12px;
    color: #98a6b9;
}

#podcastEpisodesSection .podcast-episode-play {
    width: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#podcastEpisodesSection .podcast-episode-play a,
#podcastEpisodesSection .podcast-episode-play .podcast-episode-play__btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f7f8fa;
    border: 1px solid rgba(0, 33, 71, 0.04);
    color: #f0a1a1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 18px;
    transition: 0.3s ease;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

#podcastEpisodesSection .podcast-episode-play a:hover,
#podcastEpisodesSection .podcast-episode-play .podcast-episode-play__btn:hover:not(:disabled) {
    background: #eef6f6;
}

#podcastEpisodesSection .podcast-episode-play .podcast-episode-play__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

#podcastEpisodesSection .podcast-episode-play i {
    transform: translateX(-1px);
}

/* Tablet */
@media (max-width: 1199.98px) {
    #podcastFeaturedSection .container,
    #podcastIntroSection .container,
    #podcastEpisodesSection .container {
        max-width: 100%;
    }

    #podcastFeaturedSection .podcast-featured-image {
        height: 400px;
    }

    #podcastFeaturedSection .podcast-featured-content {
        padding: 34px 28px;
    }

    #podcastFeaturedSection h1 {
        font-size: 28px;
    }

    #podcastFeaturedSection p {
        font-size: 15px;
        line-height: 1.9;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    #podcastDetailsPage {
        padding-top: 14px;
    }

    #podcastFeaturedSection {
        padding: 14px 0 24px;
    }

    #podcastFeaturedSection .podcast-featured-card {
        border-radius: 22px;
    }

    #podcastFeaturedSection .podcast-featured-image {
        height: 250px;
    }

    #podcastFeaturedSection .podcast-featured-content {
        padding: 22px 18px 24px;
    }

    #podcastFeaturedSection .podcast-featured-meta {
        gap: 10px;
        margin-bottom: 12px;
    }

    #podcastFeaturedSection h1 {
        font-size: 26px;
        line-height: 1.5;
    }

    #podcastFeaturedSection p {
        font-size: 15px;
        line-height: 1.9;
        margin-bottom: 18px;
    }

    #podcastFeaturedSection .podcast-play-btn {
        min-width: 132px;
        height: 46px;
        font-size: 16px;
        border-radius: 13px;
    }

    #podcastIntroSection {
        padding-bottom: 18px;
    }

    #podcastIntroSection .podcast-intro-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
    }

    #podcastIntroSection .podcast-section-title h2 {
        font-size: 22px;
    }

    #podcastEpisodesSection {
        padding-bottom: 56px;
    }

    #podcastEpisodesSection .podcast-episode-card {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
        border-radius: 20px;
    }

    #podcastEpisodesSection .podcast-episode-thumb {
        width: 100%;
        height: 220px;
    }

    #podcastEpisodesSection .podcast-episode-play {
        width: 100%;
        justify-content: flex-start;
    }
}

/* =========================
   Global sticky podcast audio player (uses :root --primary / --primary-hover / --primary-bright)
========================= */

body.has-podcast-sticky-player {
    padding-bottom: 132px;
}

.podcast-sticky-player {
    --pp-text: #f9fafb;
    --pp-sub: var(--white-soft-2);

    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 9999;
    padding: 0 16px 18px;
    color: var(--pp-text);
}

.podcast-sticky-player.is-hidden {
    display: none !important;
}

.podcast-sticky-player__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
}

.podcast-sticky-player__card {
    position: relative;
    border-radius: 28px;
    padding: 18px 22px 16px;
    background: linear-gradient(180deg, #243a38 0%, #1a2e2c 38%, #0f2120 100%);
    border: 1px solid rgba(0, 169, 157, 0.22);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.08),
        0 18px 48px rgba(0, 0, 0, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 40px rgba(0, 169, 157, 0.04);
}

.podcast-sticky-player__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 20px;
}

.podcast-sticky-player__left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 200px;
    min-width: 0;
}

.podcast-sticky-player__art-wrap {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.podcast-sticky-player__art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.podcast-sticky-player__meta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.podcast-sticky-player__title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff;
}

.podcast-sticky-player__subtitle {
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--pp-sub);
}

.podcast-sticky-player__transport {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1 1 auto;
}

.podcast-sticky-player__seek-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    cursor: pointer;
    gap: 0;
    transition: color 0.15s ease, transform 0.15s ease;
}

.podcast-sticky-player__seek-chip:hover {
    color: var(--primary-bright);
    transform: scale(1.06);
}

.podcast-sticky-player__seek-ico {
    font-size: 15px;
    line-height: 1;
}

.podcast-sticky-player__seek-num {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    margin-top: 1px;
    line-height: 1;
}

.podcast-sticky-player__tbtn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, transform 0.15s ease;
}

.podcast-sticky-player__tbtn:hover:not(:disabled) {
    color: var(--primary-bright);
    transform: scale(1.08);
}

.podcast-sticky-player__tbtn:disabled,
.podcast-sticky-player__tbtn.is-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.podcast-sticky-player__play {
    width: 58px;
    height: 58px;
    margin: 0 4px;
    border: none;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--primary-bright) 0%, var(--primary) 45%, var(--primary-hover) 100%);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    cursor: pointer;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.22) inset,
        0 8px 28px rgba(0, 169, 157, 0.5),
        0 4px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.2s ease;
}

.podcast-sticky-player__play:hover {
    filter: brightness(1.06);
    transform: scale(1.06);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.28) inset,
        0 12px 36px rgba(0, 169, 157, 0.6),
        0 6px 18px rgba(0, 0, 0, 0.4);
}

.podcast-sticky-player__play:focus-visible,
.podcast-sticky-player__seek-chip:focus-visible,
.podcast-sticky-player__tbtn:focus-visible,
.podcast-sticky-player__close:focus-visible,
.podcast-sticky-player__vol-btn:focus-visible {
    outline: 2px solid var(--primary-bright);
    outline-offset: 2px;
}

.podcast-sticky-player__play-icon {
    line-height: 1;
    margin-left: 2px;
}

.podcast-sticky-player__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.podcast-sticky-player__speed {
    height: 34px;
    min-width: 3.75rem;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid var(--primary-divider);
    background: rgba(0, 0, 0, 0.2);
    color: var(--white-soft-3);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.podcast-sticky-player__speed:hover {
    background: rgba(0, 169, 157, 0.12);
    border-color: rgba(0, 169, 157, 0.4);
}

.podcast-sticky-player__volume-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.podcast-sticky-player__vol-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font-size: 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
}

.podcast-sticky-player__vol-btn:hover {
    color: var(--primary-bright);
    background: rgba(0, 169, 157, 0.12);
}

.podcast-sticky-player__volume {
    width: 72px;
    max-width: 20vw;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    accent-color: var(--primary);
}

.podcast-sticky-player__volume::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.2);
}

.podcast-sticky-player__volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    border: 2px solid rgba(255, 255, 255, 0.35);
}

.podcast-sticky-player__volume::-moz-range-track {
    height: 4px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.2);
}

.podcast-sticky-player__volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: var(--primary);
}

.podcast-sticky-player__close {
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    font-size: 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background 0.15s ease;
}

.podcast-sticky-player__close:hover {
    color: #fff;
    background: rgba(0, 0, 0, 0.18);
}

.podcast-sticky-player__bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding-top: 4px;
}

.podcast-sticky-player__time {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--pp-sub);
    flex-shrink: 0;
    min-width: 2.5rem;
}

.podcast-sticky-player__time--current {
    text-align: left;
}

.podcast-sticky-player__time--total {
    text-align: right;
}

.podcast-sticky-player__progress-shell {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 22px;
    display: flex;
    align-items: center;
}

.podcast-sticky-player__progress-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 5px;
    border-radius: 99px;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.podcast-sticky-player__progress-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 6px;
    width: 0%;
    max-width: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary-hover) 0%, var(--primary) 45%, var(--primary-bright) 100%);
    box-shadow: 0 0 14px rgba(0, 169, 157, 0.45);
    pointer-events: none;
    transition: width 0.08s linear;
}

.podcast-sticky-player__progress-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 22px;
    margin: 0;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.podcast-sticky-player__progress-input::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 99px;
    background: transparent;
}

.podcast-sticky-player__progress-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
    border: 2px solid var(--primary);
}

.podcast-sticky-player__progress-input::-moz-range-track {
    height: 5px;
    border-radius: 99px;
    background: transparent;
}

.podcast-sticky-player__progress-input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid var(--primary);
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

@media (max-width: 767.98px) {
    body.has-podcast-sticky-player {
        padding-bottom: 148px;
    }

    .podcast-sticky-player {
        padding: 0 10px 12px;
    }

    .podcast-sticky-player__card {
        border-radius: 22px;
        padding: 14px 14px 12px;
    }

    .podcast-sticky-player__top {
        flex-direction: column;
        align-items: stretch;
    }

    .podcast-sticky-player__transport {
        order: 3;
        flex-wrap: wrap;
    }

    .podcast-sticky-player__right {
        justify-content: space-between;
        width: 100%;
    }

    .podcast-sticky-player__volume {
        flex: 1;
        max-width: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .podcast-sticky-player__play,
    .podcast-sticky-player__seek-chip,
    .podcast-sticky-player__tbtn {
        transition: none;
    }

    .podcast-sticky-player__progress-fill {
        transition: none;
    }
}

/* =========================
   Podcasts Listing Page
========================= */
#podcastsPage {
    padding: 22px 0 0;
}

/* Hero */
#podcastsHeroSection {
    padding: 18px 0 110px;
}

#podcastsHeroSection .container,
#podcastsToolbarSection .container,
#podcastsListHeadingSection .container,
#podcastsListSection .container,
#podcastsPaginationSection .container {
    max-width: 1230px;
}

#podcastsHeroSection .podcasts-hero-card {
    background: #ffffff;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 33, 71, 0.05);
}

#podcastsHeroSection .podcasts-hero-image {
    height: 500px;
    overflow: hidden;
    background: #e8e6e2;
}

#podcastsHeroSection .podcasts-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#podcastsHeroSection .podcasts-hero-content {
    padding: 44px 48px 42px;
    text-align: right;
}

#podcastsHeroSection .podcasts-hero-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

#podcastsHeroSection .podcast-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 29px;
    padding: 0 14px;
    border-radius: 999px;
    background: #dff6f4;
    color: #18b9a9;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

#podcastsHeroSection .podcast-duration {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #99a7ba;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

#podcastsHeroSection .podcast-duration i {
    font-size: 13px;
}

#podcastsHeroSection h1 {
    margin: 0 0 14px;
    color: #162a51;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.45;
}

#podcastsHeroSection p {
    margin: 0 0 26px;
    color: #7b8ca5;
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    max-width: 92%;
}

#podcastsHeroSection .podcasts-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

#podcastsHeroSection .play-now-btn,
#podcastsHeroSection .save-later-btn {
    height: 50px;
    padding: 0 22px;
    border-radius: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    transition: 0.3s ease;
}

#podcastsHeroSection .play-now-btn {
    min-width: 145px;
    background: #18b9a9;
    color: #ffffff;
    box-shadow: 0 8px 16px rgba(24, 185, 169, 0.18);
}

#podcastsHeroSection .play-now-btn:hover {
    background: #10a899;
    color: #ffffff;
}

#podcastsHeroSection .save-later-btn {
    min-width: 138px;
    background: #f8fafc;
    color: #1b2b4f;
    border: 1px solid #e2e8f0;
}

#podcastsHeroSection .save-later-btn:hover {
    background: #f1f5f9;
    color: #1b2b4f;
}

/* Toolbar */
#podcastsToolbarSection {
    padding: 0 0 24px;
}

#podcastsToolbarSection .podcasts-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

#podcastsToolbarSection .podcasts-sort-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

#podcastsToolbarSection .podcasts-sort-wrap label {
    color: #8a99ae;
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

#podcastsToolbarSection .podcast-sort-select {
    height: 42px;
    min-width: 122px;
    border-radius: 12px;
    border: 1px solid #dbe3ec;
    background: #ffffff;
    color: #1c2d4f;
    font-size: 14px;
    font-weight: 600;
    padding: 0 14px;
    outline: none;
    box-shadow: none;
}

#podcastsToolbarSection .podcasts-categories {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#podcastsToolbarSection .podcasts-categories {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#podcastsToolbarSection .podcast-filter-chip {
    height: 42px;
    padding: 0 22px;
    border-radius: 999px;
    border: 1px solid #dbe3ec;
    background: #ffffff;
    color: #65748b;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s ease;
    cursor: pointer;
    font-family: inherit;
}

#podcastsToolbarSection .podcast-filter-chip.active,
#podcastsToolbarSection .podcast-filter-chip[aria-selected="true"] {
    background: #18b9a9;
    border-color: #18b9a9;
    color: #ffffff;
}

/* Heading */
#podcastsListHeadingSection {
    padding: 0 0 18px;
}

#podcastsListHeadingSection .podcast-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid #dbe3ec;
}

#podcastsListHeadingSection .title-line {
    width: 5px;
    height: 30px;
    border-radius: 99px;
    background: #18b9a9;
    flex-shrink: 0;
}

#podcastsListHeadingSection .podcast-section-title h2 {
    margin: 0;
    color: #162a51;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
}

/* List */
#podcastsListSection {
    padding: 0 0 38px;
}

#podcastsListSection .podcast-list-card {
    background: #ffffff;
    border: 1px solid rgba(0, 33, 71, 0.05);
    border-radius: 26px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 2px 10px rgba(0, 33, 71, 0.03);
}

#podcastsListSection .podcast-list-card + .podcast-list-card {
    margin-top: 20px;
}

#podcastsListSection .podcast-list-thumb {
    width: 120px;
    height: 120px;
    border-radius: 18px;
    overflow: hidden;
    flex-shrink: 0;
    background: #dbe2e8;
}

#podcastsListSection .podcast-list-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#podcastsListSection .podcast-list-content {
    flex: 1;
    min-width: 0;
    text-align: right;
}

#podcastsListSection .podcast-item-category {
    display: inline-block;
    margin-bottom: 6px;
    color: #18b9a9;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
}

#podcastsListSection .podcast-list-content h3 {
    margin: 0 0 10px;
    color: #162a51;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
}

#podcastsListSection .podcast-list-content p {
    margin: 0 0 10px;
    color: #8a98ab;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.9;
}

#podcastsListSection .podcast-list-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

#podcastsListSection .podcast-list-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #98a6b9;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

#podcastsListSection .podcast-list-meta i {
    font-size: 12px;
    color: #98a6b9;
}

#podcastsListSection .podcast-list-action {
    width: 110px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#podcastsListSection .listen-link {
    color: #ef8f8f;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

/* Pagination */
#podcastsPaginationSection {
    padding: 0 0 56px;
}

#podcastsPaginationSection .podcasts-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#podcastsPaginationSection .page-number,
#podcastsPaginationSection .page-arrow {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid #dbe3ec;
    background: #ffffff;
    color: #7b8aa0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: 0.3s ease;
}

#podcastsPaginationSection .page-number.active {
    background: #18b9a9;
    border-color: #18b9a9;
    color: #ffffff;
}

/* Tablet */
@media (max-width: 1199.98px) {
    #podcastsHeroSection .container,
    #podcastsToolbarSection .container,
    #podcastsListHeadingSection .container,
    #podcastsListSection .container,
    #podcastsPaginationSection .container {
        max-width: 100%;
    }

    #podcastsHeroSection {
        padding-bottom: 70px;
    }

    #podcastsHeroSection .podcasts-hero-image {
        height: 400px;
    }

    #podcastsHeroSection .podcasts-hero-content {
        padding: 34px 28px;
    }

    #podcastsHeroSection h1 {
        font-size: 28px;
    }

    #podcastsHeroSection p {
        font-size: 15px;
        max-width: 100%;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    #podcastsPage {
        padding-top: 14px;
    }

    #podcastsHeroSection {
        padding: 14px 0 40px;
    }

    #podcastsHeroSection .podcasts-hero-card {
        border-radius: 22px;
    }

    #podcastsHeroSection .podcasts-hero-image {
        height: 250px;
    }

    #podcastsHeroSection .podcasts-hero-content {
        padding: 22px 18px 24px;
    }

    #podcastsHeroSection .podcasts-hero-meta {
        gap: 10px;
        margin-bottom: 12px;
    }

    #podcastsHeroSection h1 {
        font-size: 26px;
        line-height: 1.5;
    }

    #podcastsHeroSection p {
        font-size: 15px;
        line-height: 1.9;
        margin-bottom: 18px;
    }

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

    #podcastsHeroSection .play-now-btn,
    #podcastsHeroSection .save-later-btn {
        width: 100%;
        min-width: 100%;
        font-size: 16px;
        height: 46px;
        border-radius: 13px;
    }

    #podcastsToolbarSection .podcasts-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    #podcastsToolbarSection .podcasts-sort-wrap {
        justify-content: space-between;
    }

    #podcastsListHeadingSection .podcast-section-title h2 {
        font-size: 22px;
    }

    #podcastsListSection .podcast-list-card {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
        border-radius: 20px;
    }

    #podcastsListSection .podcast-list-thumb {
        width: 100%;
        height: 220px;
    }

    #podcastsListSection .podcast-list-action {
        width: 100%;
        justify-content: flex-start;
    }

    #podcastsPaginationSection {
        padding-bottom: 40px;
    }
}

/* ===== Library Page ===== */

#libraryPage {
    padding-bottom: 100px;
}

.library-hero-section {
    padding: 12px 0 32px;
}

.library-hero-card {
    background: #fbfcfd;
    border: 1px solid rgba(10, 46, 103, 0.08);
    border-radius: 28px;
    padding: 38px 40px;
    box-shadow: 0 10px 30px rgba(0, 33, 71, 0.03);
}

.library-hero-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.library-hero-text {
    flex: 1;
    text-align: right;
}

.library-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    margin-bottom: 24px;
    border-radius: 999px;
    background: #eafbf9;
    color: #20ddd1;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

.library-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #20ddd1;
}

.library-hero-text h1 {
    margin: 0 0 14px;
    color: #0d2341;
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
}

.library-hero-text p {
    margin: 0;
    max-width: 760px;
    color: #667085;
    font-size: 19px;
    line-height: 1.9;
}

.library-hero-stats {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.library-stat-box {
    min-width: 100px;
    padding: 24px 16px;
    text-align: center;
    background: #f3f6f8;
    border: 1px solid rgba(10, 46, 103, 0.06);
    border-radius: 18px;
}

.library-stat-box strong {
    display: block;
    margin-bottom: 8px;
    color: #0d2341;
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.library-stat-box span {
    display: block;
    color: #98a2b3;
    font-size: 14px;
    font-weight: 500;
}

.library-search-wrap {
    padding-top: 34px;
}

.library-search-form {
    display: flex;
    align-items: center;
    gap: 14px;
}

.library-search-field {
    position: relative;
    flex: 1;
}

.library-search-field input {
    width: 100%;
    height: 68px;
    padding: 0 22px 0 56px;
    border: 1px solid rgba(10, 46, 103, 0.08);
    border-radius: 18px;
    background: #fff;
    color: #0d2341;
    font-size: 18px;
    outline: none;
    box-shadow: 0 8px 24px rgba(0, 33, 71, 0.03);
}

.library-search-field input::placeholder {
    color: #98a2b3;
}

.library-search-field i {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 18px;
    pointer-events: none;
}

.library-search-btn {
    min-width: 92px;
    height: 68px;
    border: 0;
    border-radius: 18px;
    background: #0d2341;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.library-search-tags {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 15px;
}

.library-search-tags .label {
    color: #98a2b3;
}

.library-search-tags a {
    color: #667085;
    text-decoration: none;
}

.library-search-tags a .library-search-count {
    color: #98a2b3;
    font-size: 0.92em;
}

.library-search-tags-empty {
    color: #98a2b3;
    font-size: 14px;
}

.library-content-section {
    padding-top: 22px;
}

.library-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(10, 46, 103, 0.08);
}

.library-toolbar h2 {
    margin: 0;
    color: #0d2341;
    font-size: 34px;
    font-weight: 700;
}

.library-sort {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #667085;
    font-size: 15px;
}

.library-sort select {
    min-width: 145px;
    height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(10, 46, 103, 0.08);
    border-radius: 14px;
    background: #fff;
    color: #0d2341;
    outline: none;
}

.library-card {
    height: 100%;
    background: #fff;
    border: 1px solid rgba(10, 46, 103, 0.08);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 33, 71, 0.04);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.library-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 33, 71, 0.07);
}

.library-card-media {
    position: relative;
    height: 240px;
    overflow: hidden;
    background: #eef2f6;
}

.library-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.library-premium {
    position: absolute;
    top: 14px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #20ddd1;
    color: #0d2341;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.library-type-icon {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #fff;
    color: #20ddd1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 8px 18px rgba(0, 33, 71, 0.08);
}

.library-card-body {
    padding: 22px;
    text-align: right;
}

.library-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    color: #98a2b3;
    font-size: 14px;
}

.library-card-meta a {
    color: #20ddd1;
    background-color: #E7FBFD;
    padding: 2px 5px;
    border-radius: 7px;
}

.library-card-meta .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c0c7d1;
}

.library-card h3 {
    margin: 0 0 12px;
}

.library-card h3 a {
    color: #0d2341;
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}

.library-card p {
    margin: 0 0 18px;
    color: #667085;
    font-size: 15px;
    line-height: 1.9;
}

.library-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #98a2b3;
    font-size: 14px;
}

.library-author {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.library-author strong {
    color: #0d2341;
    font-size: 14px;
    font-weight: 600;
}

.library-author img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

.library-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 48px;
}

.library-pagination a,
.library-pagination span {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(10, 46, 103, 0.08);
    background: #fff;
    color: #667085;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 700;
}

.library-pagination a.active {
    background: #20ddd1;
    color: #0d2341;
    border-color: #20ddd1;
    box-shadow: 0 8px 18px rgba(32, 221, 209, 0.35);
}

.library-pagination .page-dots {
    width: auto;
    border: 0;
    background: transparent;
}

.library-pagination .page-arrow[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .library-hero-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .library-hero-stats {
        width: 100%;
        flex-wrap: wrap;
    }

    .library-search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .library-search-btn {
        width: 100%;
    }

    .library-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767.98px) {
    #libraryPage {
        padding-bottom: 70px;
    }

    .library-hero-card {
        padding: 24px 18px;
    }

    .library-hero-text h1 {
        font-size: 30px;
    }

    .library-hero-text p {
        font-size: 15px;
    }

    .library-stat-box {
        flex: 1;
        min-width: calc(50% - 8px);
    }

    .library-card-media {
        height: 210px;
    }

    .library-card h3 a {
        font-size: 21px;
    }
}

/* ===== Experts Page Fixed ===== */

#expertsPage {
    padding-bottom: 50px;
}

#expertsPage .section-head {
    margin-bottom: 22px;
}

#expertsPage .section-head h2 {
    margin: 0;
    color: #0d2341;
    font-size: 30px;
    font-weight: 700;
}

#expertsPage .section-head-centered {
    text-align: center;
}

#expertsPage .section-head-centered p {
    margin: 8px 0 0;
    color: #7b8798;
    font-size: 16px;
}

.experts-hero-section {
    padding: 18px 0 50px;
}

.experts-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 44px;
}

.experts-hero-content {
    text-align: right;
}

.experts-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 12px;
    border-radius: 999px;
    background: #ecebff;
    color: #5f6fe9;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 18px;
}

.experts-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-left: 7px;
    border-radius: 50%;
    background: #5f6fe9;
}

.experts-hero-content h1 {
    margin: 0 0 14px;
    color: #0d2341;
    font-size: 50px;
    font-weight: 800;
    line-height: 1.2;
}

.experts-hero-content p {
    margin: 0;
    color: #667085;
    font-size: 18px;
    line-height: 1.7;
    max-width: 520px;
}

.experts-hero-media {
    position: relative;
}

.experts-hero-image-wrap {
    border-radius: 24px;
    overflow: hidden;
    border: 12px solid #cfd5e2;
    box-shadow: 0 14px 28px rgba(13, 35, 65, 0.05);
}

.experts-hero-image-wrap img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}

.experts-floating-stat {
    position: absolute;
    left: 72%;
    bottom: -18px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(13, 35, 65, 0.12);
}

.experts-floating-stat-text strong {
    display: block;
    color: #0d2341;
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.experts-floating-stat-text span {
    color: #98a2b3;
    font-size: 11px;
    font-weight: 600;
}

.experts-floating-stat i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ddf7e6;
    color: #34a853;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.featured-experts-articles {
    padding: 10px 0 70px;
}

.expert-article-card {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: #fff;
    border: 1px solid rgba(13, 35, 65, 0.08);
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(13, 35, 65, 0.03);
}

.expert-article-thumb {
    width: 180px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
}

.expert-article-thumb img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.expert-article-body {
    flex: 1;
    text-align: right;
}

.expert-article-body h3 {
    margin: 0 0 10px;
    color: #0d2341;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
}

.expert-article-body p {
    margin: 0 0 10px;
    color: #7b8798;
    font-size: 13px;
    line-height: 1.85;
}

.expert-article-meta {
    margin-bottom: 14px;
    color: #6b59ff;
    font-size: 13px;
    font-weight: 600;
}

.expert-article-meta i {
    margin-left: 5px;
}

.expert-read-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: #f3f5f8;
    color: #0d2341;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.experts-list-section {
    padding: 10px 0 70px;
}

.expert-profile-card {
    height: 100%;
    text-align: center;
    padding: 22px 18px 24px;
    background: #fff;
    border: 1px solid rgba(13, 35, 65, 0.07);
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(13, 35, 65, 0.03);
}

.expert-profile-avatar {
    width: 74px;
    height: 74px;
    margin: 0 auto 14px;
    padding: 4px;
    border-radius: 50%;
    border: 2px solid #dde3ee;
    overflow: hidden;
}

.expert-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.expert-profile-card h3 {
    margin: 0 0 6px;
    color: #0d2341;
    font-size: 18px;
    font-weight: 700;
}

.expert-role {
    display: block;
    margin-bottom: 10px;
    color: #4c5cff;
    font-size: 12px;
    font-weight: 700;
}

.expert-profile-card p {
    margin: 0;
    color: #7b8798;
    font-size: 12px;
    line-height: 1.8;
}

.experts-quote-section {
    padding: 10px 0 70px;
}

.experts-quote-box {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.experts-quote-icon {
    color: #cfd3ff;
    font-size: 54px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}

.experts-quote-box blockquote {
    margin: 0 0 18px;
    color: #0d2341;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.5;
}

.experts-quote-author {
    color: #4c5cff;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
}

.experts-quote-role {
    color: #98a2b3;
    font-size: 13px;
}

.experts-cta-section {
    padding: 0 0 30px;
}

.experts-cta-box {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 70px 20px;
    border-radius: 30px;
    background: linear-gradient(135deg, #2b35d4 0%, #3b44e7 100%);
}

.experts-cta-box::before,
.experts-cta-box::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
}

.experts-cta-box::before {
    width: 380px;
    height: 380px;
    right: -100px;
    bottom: -240px;
}

.experts-cta-box::after {
    width: 380px;
    height: 380px;
    left: -100px;
    bottom: -250px;
}

.experts-cta-box h2,
.experts-cta-box p,
.experts-cta-actions {
    position: relative;
    z-index: 2;
}

.experts-cta-box h2 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.3;
}

.experts-cta-box p {
    margin: 0 auto 22px;
    max-width: 640px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    line-height: 1.9;
}

.experts-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.experts-btn {
    min-width: 150px;
    height: 50px;
    padding: 0 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
}

.experts-btn-primary {
    background: #fff;
    color: #2b35d4;
}

.experts-btn-outline {
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    background: transparent;
}

@media (max-width: 991.98px) {
    .experts-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

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

    .experts-hero-content p {
        font-size: 14px;
        max-width: 100%;
    }

    .experts-hero-image-wrap img {
        height: 260px;
    }

    .experts-floating-stat {
        left: auto;
        right: 18px;
        bottom: -14px;
    }

    .expert-article-card {
        flex-direction: column;
        align-items: stretch;
    }

    .expert-article-thumb {
        width: 100%;
    }

    .expert-article-thumb img {
        width: 100%;
        height: 190px;
    }

    .experts-quote-box blockquote {
        font-size: 22px;
    }

    .experts-cta-box h2 {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {
    #expertsPage {
        padding-bottom: 60px;
    }

    .experts-hero-section {
        padding: 10px 0 40px;
    }

    #expertsPage .section-head h2 {
        font-size: 22px;
    }

    .experts-badge {
        font-size: 10px;
    }

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

    .experts-hero-content p {
        font-size: 13px;
    }

    .experts-hero-image-wrap {
        border-width: 9px;
    }

    .experts-hero-image-wrap img {
        height: 220px;
    }

    .experts-floating-stat {
        padding: 12px 14px;
    }

    .experts-floating-stat-text strong {
        font-size: 24px;
    }

    .expert-article-card {
        padding: 16px;
    }

    .expert-article-body h3 {
        font-size: 18px;
    }

    .expert-profile-card h3 {
        font-size: 16px;
    }

    .experts-quote-box blockquote {
        font-size: 18px;
    }

    .experts-cta-box {
        padding: 36px 18px;
    }

    .experts-cta-box h2 {
        font-size: 24px;
    }

    .experts-cta-box p {
        font-size: 13px;
    }

    .experts-btn {
        width: 100%;
        min-width: 100%;
    }
}

/* ===== Reporting Stage Page ===== */

#reportingStagePage {
    padding-bottom: 80px;
}

.reporting-hero-section {
    padding: 18px 0 34px;
}

.reporting-hero-card {
    padding: 42px 46px;
    border: 1px solid rgba(13, 35, 65, 0.1);
    border-radius: 28px;
    background: #f8f9fc;
}

.reporting-hero-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: center;
}

.reporting-hero-media img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    border-radius: 22px;
    box-shadow: 0 18px 38px rgba(13, 35, 65, 0.08);
}

.reporting-hero-content {
    text-align: right;
}

.reporting-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: #ecebff;
    color: #5f6fe9;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.reporting-hero-content h1 {
    margin: 0 0 14px;
    color: #0d2341;
    font-size: 42px;
    font-weight: 800;
    line-height: 1.2;
}

.reporting-hero-content h2 {
    margin: 0 0 24px;
    color: #44546a;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.7;
}

.reporting-hero-content p {
    margin: 0;
    color: #7b8798;
    font-size: 16px;
    line-height: 2;
}

.reporting-importance-section {
    padding: 10px 0 42px;
}

.reporting-importance-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 28px;
    align-items: center;
}

.reporting-importance-text {
    text-align: right;
}

.reporting-importance-text h2 {
    margin: 0 0 10px;
    color: #0d2341;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.3;
}

.reporting-importance-text .title-line {
    display: inline-block;
    width: 92px;
    height: 6px;
    border-radius: 999px;
    background: #4058ff;
}

.reporting-importance-card {
    padding: 34px 38px;
    border: 1px solid rgba(13, 35, 65, 0.1);
    border-radius: 24px;
    background: #ffffff;
}

.reporting-importance-card p {
    margin: 0;
    color: #56657c;
    font-size: 16px;
    line-height: 2.1;
    text-align: right;
}

.reporting-steps-section {
    padding: 8px 0 42px;
}

.reporting-steps-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 28px;
    gap: 16px;
}

.reporting-steps-head span {
    color: #4058ff;
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.reporting-steps-head h2 {
    margin: 0;
    color: #0d2341;
    font-size: 28px;
    font-weight: 800;
    text-align: right;
}

.reporting-step-card {
    height: 100%;
    padding: 28px 22px;
    border: 1px solid rgba(13, 35, 65, 0.1);
    border-radius: 22px;
    background: #ffffff;
    text-align: right;
}

.reporting-step-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #eef0ff;
    color: #4058ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.reporting-step-card h3 {
    margin: 0 0 12px;
    color: #0d2341;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
}

.reporting-step-card p {
    margin: 0;
    color: #7b8798;
    font-size: 14px;
    line-height: 1.9;
}

.reporting-practices-section {
    padding: 8px 0 0;
}

.reporting-practices-box {
    min-height: 390px;
    padding: 42px 46px;
    border-radius: 28px;
    background: #f1f3fd;
}

.reporting-practices-content h2 {
    margin: 0 0 26px;
    color: #0d2341;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-start;
}

.reporting-practices-content h2 i {
    color: #4058ff;
    font-size: 24px;
}

.reporting-practices-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.reporting-practices-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.reporting-practices-list li + li {
    margin-top: 18px;
}

.reporting-practices-list .num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #4058ff;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
}

.reporting-practices-list h3 {
    margin: 0 0 6px;
    color: #0d2341;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
}

.reporting-practices-list p {
    margin: 0;
    color: #65758a;
    font-size: 14px;
    line-height: 1.9;
}

@media (max-width: 1199.98px) {
    .reporting-hero-card {
        padding: 32px;
    }

    .reporting-hero-grid {
        gap: 32px;
    }

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

    .reporting-hero-content h2 {
        font-size: 18px;
    }

    .reporting-importance-grid {
        grid-template-columns: 240px 1fr;
    }

    .reporting-step-card h3 {
        font-size: 20px;
    }

    .reporting-practices-content h2 {
        font-size: 28px;
    }
}

@media (max-width: 991.98px) {
    .reporting-hero-grid,
    .reporting-importance-grid {
        grid-template-columns: 1fr;
    }

    .reporting-hero-media img {
        height: 260px;
    }

    .reporting-steps-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .reporting-practices-box {
        padding: 30px 24px;
        min-height: auto;
    }

    .reporting-practices-content {
        max-width: 100%;
        margin-right: 0;
    }
}

@media (max-width: 767.98px) {
    #reportingStagePage {
        padding-bottom: 60px;
    }

    .reporting-hero-card,
    .reporting-importance-card,
    .reporting-practices-box {
        padding: 22px 18px;
    }

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

    .reporting-hero-content h2 {
        font-size: 16px;
        margin-bottom: 16px;
    }

    .reporting-hero-content p,
    .reporting-importance-card p {
        font-size: 14px;
    }

    .reporting-importance-text h2,
    .reporting-steps-head h2,
    .reporting-practices-content h2 {
        font-size: 24px;
    }

    .reporting-step-card {
        padding: 22px 18px;
    }

    .reporting-step-card h3,
    .reporting-practices-list h3 {
        font-size: 18px;
    }
}

/* ===== Planning Stage Page ===== */

#planningStagePage {
    padding-bottom: 80px;
}

.planning-hero-section {
    padding: 18px 0 34px;
}

.planning-hero-grid {
    display: grid;
    grid-template-columns: 1.08fr 1fr;
    gap: 56px;
    align-items: center;
}

.planning-hero-media img {
    width: 100%;
    height: 430px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    box-shadow: 0 18px 36px rgba(13, 35, 65, 0.08);
}

.planning-hero-content {
    text-align: right;
}

.planning-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: #ecebff;
    color: #5f6fe9;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.planning-hero-content h1 {
    margin: 0 0 14px;
    color: #0d2341;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.22;
}

.planning-hero-content h2 {
    margin: 0 0 18px;
    color: #44546a;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.8;
}

.planning-hero-content p {
    margin: 0;
    color: #7b8798;
    font-size: 16px;
    line-height: 2;
    max-width: 540px;
}

.planning-importance-section {
    padding: 16px 0 44px;
}

.planning-importance-card {
    position: relative;
    padding: 34px 42px 34px 34px;
    border: 1px solid rgba(13, 35, 65, 0.08);
    border-radius: 20px;
    background: #ffffff;
    text-align: right;
    overflow: hidden;
}

.planning-importance-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: #4058ff;
    border-radius: 8px 0 0 8px;
}

.planning-importance-icon {
    margin-bottom: 12px;
    color: #4058ff;
    font-size: 26px;
}

.planning-importance-content h2 {
    margin: 0 0 10px;
    color: #0d2341;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.4;
}

.planning-importance-content p {
    margin: 0;
    color: #5f6f85;
    font-size: 16px;
    line-height: 2;
}

.planning-steps-section {
    padding: 12px 0 44px;
}

.planning-section-title {
    text-align: center;
    margin-bottom: 34px;
}

.planning-section-title h2 {
    margin: 0 0 10px;
    color: #0d2341;
    font-size: 30px;
    font-weight: 800;
}

.planning-section-title .title-line {
    display: inline-block;
    width: 74px;
    height: 5px;
    border-radius: 999px;
    background: #4058ff;
}

.planning-step-card {
    height: 100%;
    padding: 30px 22px;
    border: 1px solid rgba(13, 35, 65, 0.08);
    border-radius: 18px;
    background: #ffffff;
    text-align: center;
}

.planning-step-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 18px;
    border-radius: 14px;
    background: #eef0ff;
    color: #4058ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.planning-step-card h3 {
    margin: 0 0 12px;
    color: #0d2341;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
}

.planning-step-card p {
    margin: 0;
    color: #7b8798;
    font-size: 14px;
    line-height: 1.9;
}

.planning-bottom-section {
    padding: 10px 0 0;
}

.planning-info-box,
.planning-tools-box {
    height: 100%;
    padding: 30px 28px;
    border: 1px solid rgba(13, 35, 65, 0.08);
    border-radius: 18px;
    background: #f8f9fc;
    text-align: right;
}

.planning-info-box h2,
.planning-tools-box h2 {
    margin: 0 0 24px;
    color: #0d2341;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 10px;
}

.planning-info-box h2 i,
.planning-tools-box h2 i {
    color: #4058ff;
    font-size: 22px;
}

.planning-number-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.planning-number-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.planning-number-list li + li {
    margin-top: 18px;
}

.planning-number-list .num {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #4058ff;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
}

.planning-number-list h3 {
    margin: 0 0 6px;
    color: #0d2341;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
}

.planning-number-list p {
    margin: 0;
    color: #66778d;
    font-size: 14px;
    line-height: 1.9;
}

.planning-tools-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.planning-tool-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(13, 35, 65, 0.06);
}

.planning-tool-item .tool-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eef0ff;
    color: #4058ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.planning-tool-item .tool-text {
    color: #0d2341;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8;
}

@media (max-width: 1199.98px) {
    .planning-hero-grid {
        gap: 34px;
    }

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

    .planning-hero-content h2 {
        font-size: 18px;
    }

    .planning-importance-content h2,
    .planning-section-title h2,
    .planning-info-box h2,
    .planning-tools-box h2 {
        font-size: 25px;
    }
}

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

    .planning-hero-media img {
        height: 280px;
    }

    .planning-info-box,
    .planning-tools-box {
        padding: 24px 20px;
    }
}

@media (max-width: 767.98px) {
    #planningStagePage {
        padding-bottom: 60px;
    }

    .planning-hero-section {
        padding: 10px 0 28px;
    }

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

    .planning-hero-content h2 {
        font-size: 16px;
        margin-bottom: 14px;
    }

    .planning-hero-content p,
    .planning-importance-content p,
    .planning-number-list p,
    .planning-tool-item .tool-text {
        font-size: 14px;
    }

    .planning-importance-card,
    .planning-info-box,
    .planning-tools-box {
        padding: 22px 18px;
    }

    .planning-importance-content h2,
    .planning-section-title h2,
    .planning-info-box h2,
    .planning-tools-box h2 {
        font-size: 22px;
    }

    .planning-step-card {
        padding: 24px 18px;
    }

    .planning-step-card h3,
    .planning-number-list h3 {
        font-size: 18px;
    }
}

/* ===== Execution Stage Page ===== */

#executionStagePage {
    padding-bottom: 80px;
}

.execution-hero-section {
    padding: 18px 0 42px;
}

.execution-hero-grid {
    display: grid;
    grid-template-columns: 1.06fr 1fr;
    gap: 56px;
    align-items: center;
}

.execution-hero-media img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    border-radius: 18px;
    box-shadow: 0 18px 36px rgba(13, 35, 65, 0.08);
}

.execution-hero-content {
    text-align: right;
}

.execution-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: #ecebff;
    color: #5f6fe9;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.execution-hero-content h1 {
    margin: 0 0 18px;
    color: #0d2341;
    font-size: 44px;
    font-weight: 800;
    line-height: 1.2;
}

.execution-hero-content p {
    margin: 0;
    max-width: 520px;
    color: #66778d;
    font-size: 19px;
    line-height: 1.95;
}

.execution-about-section {
    padding: 16px 0 44px;
}

.execution-about-card {
    padding: 38px 42px;
    border: 1px solid rgba(13, 35, 65, 0.08);
    border-radius: 24px;
    background: #ffffff;
}

.execution-about-content {
    text-align: right;
}

.execution-about-content h2 {
    margin: 0 0 16px;
    color: #0d2341;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.3;
}

.execution-about-content p {
    margin: 0;
    color: #5f6f85;
    font-size: 17px;
    line-height: 2;
}

.execution-about-tags {
    display: flex;
    align-items: center;
    gap: 34px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.execution-about-tags span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4b5d73;
    font-size: 14px;
    font-weight: 600;
}

.execution-about-tags i {
    color: #4058ff;
    font-size: 18px;
}

.execution-steps-section {
    padding: 8px 0 46px;
}

.execution-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.execution-section-head h2 {
    margin: 0;
    color: #0d2341;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
}

.execution-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4058ff;
    flex-shrink: 0;
}

.execution-step-card {
    height: 100%;
    padding: 30px 22px;
    border: 1px solid rgba(13, 35, 65, 0.08);
    border-radius: 18px;
    background: #ffffff;
}

.execution-step-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: #f3f5ff;
    color: #4058ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.execution-step-card h3 {
    margin: 0 0 12px;
    color: #0d2341;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.45;
}

.execution-step-card p {
    margin: 0;
    color: #7b8798;
    font-size: 14px;
    line-height: 1.9;
}

.execution-bottom-section {
    padding: 8px 0 0;
}

.execution-practices-box {
    height: 100%;
    padding: 30px 28px;
    border-radius: 24px;
    background: linear-gradient(180deg, #0f1a49 0%, #081633 100%);
    color: #ffffff;
    text-align: right;
}

.execution-practices-box h2 {
    margin: 0 0 22px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 10px;
}

.execution-practices-box h2 i {
    color: #ffd84d;
    font-size: 22px;
}

.execution-practices-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.execution-practices-list li {
    position: relative;
    padding-right: 18px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 2;
}

.execution-practices-list li::before {
    content: "←";
    position: absolute;
    right: 0;
    top: 0;
    color: #7f8cff;
    font-size: 14px;
}

.execution-practices-list li + li {
    margin-top: 14px;
}

.execution-tools-wrap {
    height: 100%;
    text-align: right;
}

.execution-tools-wrap h2 {
    margin: 0 0 22px;
    color: #0d2341;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.3;
}

.execution-tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.execution-tool-item {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 16px 18px;
    border: 1px solid rgba(13, 35, 65, 0.08);
    border-radius: 16px;
    background: #f7f8fd;
}

.execution-tool-item .tool-text {
    color: #0d2341;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.7;
    text-align: right;
}

.execution-tool-item .tool-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #eef0ff;
    color: #4058ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

@media (max-width: 1199.98px) {
    .execution-hero-grid {
        gap: 34px;
    }

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

    .execution-hero-content p {
        font-size: 17px;
    }

    .execution-about-content h2,
    .execution-section-head h2,
    .execution-tools-wrap h2,
    .execution-practices-box h2 {
        font-size: 28px;
    }

    .execution-step-card h3 {
        font-size: 20px;
    }
}

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

    .execution-hero-media img {
        height: 270px;
    }

    .execution-about-card,
    .execution-practices-box {
        padding: 26px 22px;
    }

    .execution-tools-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    #executionStagePage {
        padding-bottom: 60px;
    }

    .execution-hero-section {
        padding: 10px 0 30px;
    }

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

    .execution-hero-content p,
    .execution-about-content p {
        font-size: 14px;
    }

    .execution-about-content h2,
    .execution-section-head h2,
    .execution-tools-wrap h2,
    .execution-practices-box h2 {
        font-size: 22px;
    }

    .execution-about-tags {
        justify-content: flex-start;
        gap: 16px;
    }

    .execution-step-card {
        padding: 24px 18px;
    }

    .execution-step-card h3 {
        font-size: 18px;
    }

    .execution-tool-item .tool-text,
    .execution-practices-list li {
        font-size: 14px;
    }
}

/* ===== Article Details Page ===== */

#articleDetailsPage {
    padding-bottom: 90px;
}

.article-details-section {
    padding: 26px 0 40px;
}

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 46px;
    align-items: start;
}

.article-main,
.article-sidebar {
    min-width: 0;
}

/* Sidebar */
.related-articles-box {
    text-align: right;
}

.related-articles-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.related-articles-head .line {
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: #20ddd1;
    flex-shrink: 0;
}

.related-articles-head h3 {
    margin: 0;
    color: #0d2341;
    font-size: 22px;
    font-weight: 800;
}

.related-articles-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.related-article-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 16px;
    border: 1px solid rgba(13, 35, 65, 0.08);
    border-radius: 18px;
    background: #fff;
}

.related-article-content {
    flex: 1;
    text-align: right;
}

.related-article-content h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

.related-article-content h4 a {
    color: #0d2341;
    text-decoration: none;
}

.related-article-content span {
    color: #97a3b6;
    font-size: 13px;
    font-weight: 500;
}

.related-article-thumb {
    width: 86px;
    height: 86px;
    border-radius: 14px;
    overflow: hidden;
    flex-shrink: 0;
    background: #eef2f6;
}

.related-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-articles-more {
    margin-top: 22px;
    min-height: 54px;
    padding: 0 18px;
    border: 1px solid #d8efec;
    border-radius: 16px;
    background: #f3fcfb;
    color: #1faea3;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Main */
.article-topbar {
    padding-bottom: 26px;
    border-bottom: 1px solid rgba(13, 35, 65, 0.08);
    text-align: right;
}

.article-badges {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.article-category {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: 7px;
    background: #dff8f6;
    color: #14a7a0;
    font-size: 13px;
    font-weight: 700;
}

.article-premium {
    color: #98a2b3;
    font-size: 14px;
    font-weight: 500;
}

.article-topbar h1 {
    margin: 0;
    color: #0d2341;
    font-size: 58px;
    font-weight: 800;
    line-height: 1.2;
}

.article-meta-bar {
    padding: 22px 0;
    border-bottom: 1px solid rgba(13, 35, 65, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.article-author {
    display: flex;
    align-items: center;
    gap: 14px;
}

.article-author-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #eef2f6;
    border: 2px solid #e7eaf0;
}

.article-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-author-info {
    text-align: right;
}

.article-author-info strong {
    display: block;
    color: #0d2341;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 4px;
}

.article-author-info span {
    display: block;
    color: #8f9cb0;
    font-size: 14px;
    font-weight: 500;
}

.article-meta-items {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    color: #7d8ba0;
    font-size: 15px;
    font-weight: 500;
}

.article-meta-items span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.article-meta-items i {
    color: #20ddd1;
    font-size: 16px;
}

/* Cover slider */
.article-cover-box {
    margin: 34px 0 36px;
}

.article-cover-slider {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    background: #0b1325;
}

.article-cover-track {
    position: relative;
}

.article-slide {
    display: none;
}

.article-slide.active {
    display: block;
}

.article-slide img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.article-slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #20ddd1;
    font-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    cursor: pointer;
    transition: 0.2s ease;
    backdrop-filter: blur(4px);
}

.article-slider-btn:hover {
    background: rgba(4, 30, 63, 0.8);
    color: #ffffff;
}

.article-slider-next {
    right: 18px;
}

.article-slider-prev {
    left: 18px;
}

.article-image-caption {
    position: absolute;
    right: 20px;
    bottom: 18px;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(4, 30, 63, 0.92);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    z-index: 2;
}

/* Body */
.article-body {
    text-align: right;
}

.article-body p {
    margin: 0 0 26px;
    color: #4e5f76;
    font-size: 18px;
    line-height: 2.1;
}

.article-body .article-lead {
    color: #4d5d74;
    font-size: 19px;
}

.article-body h2 {
    margin: 34px 0 18px;
    color: #0d2341;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.4;
}

.article-numbered-list {
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
}

.article-numbered-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.article-numbered-list li + li {
    margin-top: 14px;
}

.article-numbered-list .num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #dff8f6;
    color: #14a7a0;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 6px;
}

.article-numbered-list p {
    margin: 0;
    color: #4e5f76;
    font-size: 17px;
    line-height: 2;
}

.article-download {
    display: flex;
    justify-content: flex-start;
    margin-top: 32px;
}

.article-download-btn {
    min-width: 140px;
    height: 52px;
    border: 2px solid #18345b;
    border-radius: 12px;
    color: #18345b;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 4px;
    background: transparent;
}

/* Responsive */
@media (max-width: 1399.98px) {
    .article-topbar h1 {
        font-size: 48px;
    }

    .article-slide img {
        height: 430px;
    }

    .article-body h2 {
        font-size: 30px;
    }
}

@media (max-width: 1199.98px) {
    .article-layout {
        grid-template-columns: minmax(0, 1fr) 260px;
        gap: 32px;
    }

    .article-topbar h1 {
        font-size: 40px;
    }

    .article-body p,
    .article-numbered-list p {
        font-size: 16px;
    }

    .article-body h2 {
        font-size: 28px;
    }

    .article-slide img {
        height: 380px;
    }
}

@media (max-width: 991.98px) {
    .article-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .article-meta-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-slide img {
        height: 320px;
    }
}

@media (max-width: 767.98px) {
    #articleDetailsPage {
        padding-bottom: 60px;
    }

    .article-details-section {
        padding: 16px 0 30px;
    }

    .article-topbar h1 {
        font-size: 30px;
    }

    .article-badges {
        gap: 10px;
    }

    .article-premium,
    .article-meta-items,
    .article-author-info span,
    .related-article-content span {
        font-size: 13px;
    }

    .article-author-avatar {
        width: 48px;
        height: 48px;
    }

    .article-author-info strong {
        font-size: 15px;
    }

    .article-cover-box {
        margin: 24px 0 28px;
    }

    .article-cover-slider {
        border-radius: 18px;
    }

    .article-slide img {
        height: 220px;
    }

    .article-slider-btn {
        width: 40px;
        height: 40px;
        font-size: 22px;
    }

    .article-image-caption {
        right: 12px;
        left: 12px;
        bottom: 12px;
        font-size: 12px;
        padding: 10px 12px;
    }

    .article-body p,
    .article-body .article-lead,
    .article-numbered-list p {
        font-size: 14px;
    }

    .article-body h2 {
        font-size: 22px;
        margin: 24px 0 14px;
    }

    .related-articles-head h3 {
        font-size: 20px;
    }

    .related-article-card {
        padding: 14px;
    }

    .related-article-thumb {
        width: 72px;
        height: 72px;
    }
}

/* Subscription Page */
#subscriptionPage {
    padding: 18px 0 90px;
    direction: rtl;
}

#subscriptionPage .subscription-hero {
    margin-bottom: 34px;
}

#subscriptionPage .subscription-hero h1 {
    margin: 0 0 8px;
    font-size: 30px;
    line-height: 1.4;
    font-weight: 800;
    color: #0F172A;
}

#subscriptionPage .subscription-hero p {
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: #8A94A6;
}

#subscriptionPage .subscription-alert {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid #E7CB7A;
    background: #FFF8E8;
    border-radius: 18px;
    padding: 18px 22px;
    margin-bottom: 34px;
}

#subscriptionPage .subscription-alert-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(231, 203, 122, 0.22);
    color: #D68A13;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

#subscriptionPage .subscription-alert-content {
    flex: 1;
    text-align: center;
    color: #9A561A;
    font-size: 15px;
    font-weight: 700;
}

#subscriptionPage .subscription-alert-link {
    color: #E06B1E;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    text-decoration: none;
}

#subscriptionPage .subscription-grid {
    display: grid;
    grid-template-columns: 700px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

#subscriptionPage .subscription-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#subscriptionPage .subscription-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#subscriptionPage .benefits-card,
#subscriptionPage .support-card,
#subscriptionPage .plan-card,
#subscriptionPage .payments-card {
    background: #fff;
    border: 1px solid #E5EAF2;
    border-radius: 22px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

/* benefits card */
#subscriptionPage .benefits-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #071739 0%, #08142E 100%);
    border: none;
    padding: 28px 26px;
    color: #fff;
    min-height: 258px;
}

#subscriptionPage .benefits-card::before,
#subscriptionPage .benefits-card::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.04);
    transform: rotate(28deg);
    border-radius: 20px;
    pointer-events: none;
}

#subscriptionPage .benefits-card::before {
    width: 120px;
    height: 120px;
    right: -38px;
    bottom: 18px;
}

#subscriptionPage .benefits-card::after {
    width: 110px;
    height: 110px;
    right: 20px;
    bottom: -52px;
}

#subscriptionPage .benefits-mini-title {
    display: block;
    margin-bottom: 10px;
    color: #22D3EE;
    font-size: 14px;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

#subscriptionPage .benefits-card h2 {
    margin: 0 0 22px;
    font-size: 22px;
    line-height: 1.5;
    font-weight: 800;
    color: #fff;
    position: relative;
    z-index: 1;
}

#subscriptionPage .benefits-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
    position: relative;
    z-index: 1;
}

#subscriptionPage .benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    line-height: 1.9;
}

#subscriptionPage .benefits-list i {
    color: #22D3EE;
    font-size: 18px;
    margin-top: 3px;
    flex-shrink: 0;
}

/* support card */
#subscriptionPage .support-card {
    padding: 34px 22px 22px;
    text-align: center;
    min-height: 286px;
}

#subscriptionPage .support-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #EEF4FF;
    color: #2454C6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

#subscriptionPage .support-card h3 {
    margin: 0 0 12px;
    font-size: 19px;
    line-height: 1.7;
    font-weight: 800;
    color: #0F172A;
}

#subscriptionPage .support-card p {
    margin: 0 0 22px;
    color: #8A94A6;
    font-size: 14px;
    line-height: 1.9;
}

#subscriptionPage .support-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 14px;
    background: #F1F5F9;
    color: #0F172A;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

#subscriptionPage .support-btn:hover {
    background: #E8EEF5;
    color: #0F172A;
}

/* plan card */
#subscriptionPage .plan-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid #E5EAF2;
    border-radius: 22px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

#subscriptionPage .plan-card-body {
    padding: 30px 28px 24px;
}

#subscriptionPage .plan-top {
    display: grid;
    grid-template-columns: 510px minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

#subscriptionPage .plan-price-box {
    min-width: 0;
}

#subscriptionPage .meta-label {
    display: block;
    margin-bottom: 10px;
    color: #8A94A6;
    font-size: 14px;
    font-weight: 700;
}

#subscriptionPage .meta-value {
    display: block;
    color: #2454C6;
    font-size: 22px;
    line-height: 1.4;
    font-weight: 800;
}

#subscriptionPage .plan-info-box {
    min-width: 0;
}

#subscriptionPage .plan-head-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 26px;
}

#subscriptionPage .plan-icon-wrap {
    flex-shrink: 0;
    order: -1;
}

#subscriptionPage .plan-icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: #EEF4FF;
    color: #2454C6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

#subscriptionPage .plan-title-wrap {
    flex: 1;
    min-width: 0;
}

#subscriptionPage .plan-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

#subscriptionPage .plan-title-row h2 {
    margin: 0;
    font-size: 21px;
    line-height: 1.6;
    font-weight: 800;
    color: #0F172A;
}

#subscriptionPage .plan-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    background: #DDF4E7;
    color: #2A9D63;
    font-size: 12px;
    font-weight: 700;
}

#subscriptionPage .plan-date {
    display: block;
    color: #8A94A6;
    font-size: 13px;
    line-height: 1.8;
}

#subscriptionPage .plan-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

#subscriptionPage .plan-progress-title {
    color: #475569;
    font-size: 14px;
    font-weight: 700;
}

#subscriptionPage .plan-remaining {
    color: #2454C6;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

#subscriptionPage .plan-progress {
    height: 12px;
    border-radius: 999px;
    background: #E8EDF6;
    overflow: hidden;
}

#subscriptionPage .plan-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: #2454C6;
}

#subscriptionPage .plan-progress-dates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    color: #94A3B8;
    font-size: 12px;
    direction: ltr;
}

#subscriptionPage .plan-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 24px 22px 22px;
    border-top: 1px solid #EEF2F7;
    background: #fff;
}

#subscriptionPage .plan-btn {
    min-height: 48px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 800;
}

#subscriptionPage .plan-btn-primary {
    background: #2454C6;
    color: #fff;
    box-shadow: 0 6px 16px rgba(36, 84, 198, 0.14);
}

#subscriptionPage .plan-btn-primary:hover {
    background: #1E49AE;
    color: #fff;
}

#subscriptionPage .plan-btn-secondary {
    background: #fff;
    color: #0F172A;
    border: 1px solid #D8E0EC;
}

#subscriptionPage .plan-btn-secondary:hover {
    background: #F8FAFC;
    color: #0F172A;
}

/* payments card */
#subscriptionPage .payments-card {
    overflow: hidden;
}

#subscriptionPage .payments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 22px 30px;
    border-bottom: 1px solid #EEF2F7;
}

#subscriptionPage .payments-head h3 {
    margin: 0;
    font-size: 18px;
    line-height: 1.6;
    font-weight: 800;
    color: #0F172A;
}

#subscriptionPage .payments-head a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #64748B;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

#subscriptionPage .payments-table {
    width: 100%;
    border-collapse: collapse;
}

#subscriptionPage .payments-table th,
#subscriptionPage .payments-table td {
    text-align: right;
    vertical-align: middle;
    padding: 15px 20px;
    border-bottom: 1px solid #EEF2F7;
}

#subscriptionPage .payments-table th {
    background: #FBFCFE;
    color: #8A94A6;
    font-size: 13px;
    font-weight: 700;
}

#subscriptionPage .payments-table td {
    color: #0F172A;
    font-size: 14px;
    font-weight: bold;
}

#subscriptionPage .payment-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

#subscriptionPage .payment-status.success {
    background: #DDF4E7;
    color: #2A9D63;
}

#subscriptionPage .payment-status.failed {
    background: #FDE2E2;
    color: #D14B4B;
}

#subscriptionPage .invoice-link,
#subscriptionPage .invoice-disabled {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 17px;
}

#subscriptionPage .invoice-link {
    color: #94A3B8;
    text-decoration: none;
}

#subscriptionPage .invoice-link:hover {
    background: #F1F5F9;
    color: #2454C6;
}

#subscriptionPage .invoice-disabled {
    color: #CBD5E1;
}

#subscriptionPage .payments-footer {
    text-align: center;
    padding: 18px 16px 22px;
}

#subscriptionPage .payments-footer a {
    color: #2454C6;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
}

/* responsive */
@media (max-width: 1199.98px) {
    #subscriptionPage .subscription-grid {
        grid-template-columns: 1fr;
        display: block;
    }

    #subscriptionPage .subscription-side {
        order: 2;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

@media (max-width: 991.98px) {
    #subscriptionPage {
        padding: 10px 0 70px;
    }

    #subscriptionPage .subscription-side {
        grid-template-columns: 1fr;
    }

    #subscriptionPage .plan-top {
        grid-template-columns: 1fr;
        gap: 0;
    }

    #subscriptionPage .plan-actions {
        grid-template-columns: 1fr;
    }

    #subscriptionPage .subscription-alert {
        flex-wrap: wrap;
    }

    #subscriptionPage .subscription-alert-content {
        text-align: right;
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    #subscriptionPage .subscription-hero h1 {
        font-size: 24px;
    }

    #subscriptionPage .subscription-hero p {
        font-size: 14px;
    }

    #subscriptionPage .subscription-alert {
        padding: 16px;
        border-radius: 16px;
        margin-bottom: 24px;
    }

    #subscriptionPage .subscription-alert-content,
    #subscriptionPage .subscription-alert-link {
        font-size: 14px;
    }

    #subscriptionPage .benefits-card,
    #subscriptionPage .support-card,
    #subscriptionPage .payments-head {
        padding-right: 18px;
        padding-left: 18px;
    }

    #subscriptionPage .plan-card-body {
        padding: 20px 18px 18px;
    }

    #subscriptionPage .benefits-card h2,
    #subscriptionPage .support-card h3,
    #subscriptionPage .plan-title-row h2,
    #subscriptionPage .payments-head h3 {
        font-size: 18px;
    }

    #subscriptionPage .plan-head-main {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    #subscriptionPage .plan-icon-wrap {
        order: 0;
    }

    #subscriptionPage .meta-value {
        font-size: 20px;
    }

    #subscriptionPage .plan-progress-header {
        flex-direction: column;
        align-items: flex-start;
    }

    #subscriptionPage .plan-actions {
        padding: 18px;
    }

    #subscriptionPage .payments-table {
        min-width: 680px;
    }

    #subscriptionPage .payments-table th,
    #subscriptionPage .payments-table td {
        padding: 16px 18px;
    }
}

/* Account Settings Page */
#accountSettingsPage {
    padding: 18px 0 90px;
    direction: rtl;
}

#accountSettingsPage .account-layout {
    display: grid;
    grid-template-columns: 234px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

#accountSettingsPage .account-sidebar {
    height: 100%;
}

#accountSettingsPage .account-sidebar-inner {
    background: #fff;
    border: 1px solid #E5EAF2;
    border-radius: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: 20px 14px;
}

#accountSettingsPage .account-side-link {
    min-height: 54px;
    border-radius: 12px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #334155;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 10px;
}

#accountSettingsPage .account-side-link i {
    font-size: 18px;
}

#accountSettingsPage .account-side-link.active {
    background: #EEF4FF;
    color: #2563EB;
}

#accountSettingsPage .account-side-link:hover {
    background: #F8FAFC;
    color: #2563EB;
}

#accountSettingsPage .account-side-logout-wrap {
    margin-top: auto;
    padding-top: 18px;
}

#accountSettingsPage .account-side-logout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #EF4444;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 6px;
}

#accountSettingsPage .account-side-logout i {
    font-size: 18px;
}

#accountSettingsPage .account-main {
    min-width: 0;
}

#accountSettingsPage .account-hero {
    margin-bottom: 30px;
}

#accountSettingsPage .account-hero h1 {
    margin: 0 0 8px;
    color: #0F172A;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.5;
}

#accountSettingsPage .account-hero p {
    margin: 0;
    color: #64748B;
    font-size: 15px;
    line-height: 1.9;
}

#accountSettingsPage .profile-summary-card,
#accountSettingsPage .account-form-card {
    background: #fff;
    border: 1px solid #E5EAF2;
    border-radius: 18px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.03);
}

#accountSettingsPage .profile-summary-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px;
    margin-bottom: 30px;
}

#accountSettingsPage .change-photo-btn {
    min-width: 108px;
    height: 38px;
    border: 0;
    border-radius: 10px;
    background: #F1F5F9;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

#accountSettingsPage .profile-summary-content {
    display: flex;
    align-items: center;
    gap: 18px;
}

#accountSettingsPage .profile-summary-info {
    text-align: right;
}

#accountSettingsPage .profile-summary-info h2 {
    margin: 0 0 4px;
    color: #0F172A;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.5;
}

#accountSettingsPage .profile-summary-info p {
    margin: 0 0 8px;
    color: #64748B;
    font-size: 13px;
    line-height: 1.8;
}

#accountSettingsPage .profile-plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    background: #E7F8F3;
    border: 1px solid #A7E5D3;
    color: #0F9F78;
    font-size: 12px;
    font-weight: 700;
}

#accountSettingsPage .profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

#accountSettingsPage .profile-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    overflow: hidden;
    background: #F8FAFC;
    border: 6px solid #F8FAFC;
    box-shadow: 0 0 0 1px #E5EAF2 inset;
}

#accountSettingsPage .profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#accountSettingsPage .profile-avatar-edit {
    position: absolute;
    left: -2px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: #2563EB;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 6px 14px rgba(37, 99, 235, 0.28);
}

#accountSettingsPage .account-form-head {
    padding: 22px 28px;
    border-bottom: 1px solid #EAEFF5;
}

#accountSettingsPage .account-form-head h3 {
    margin: 0;
    color: #0F172A;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.6;
}

#accountSettingsPage .account-form-body {
    padding: 28px;
}

#accountSettingsPage .account-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 20px;
}

#accountSettingsPage .form-group label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

#accountSettingsPage .form-group input {
    width: 100%;
    height: 46px;
    border: 1px solid #D8E0EC;
    border-radius: 10px;
    background: #fff;
    padding: 0 16px;
    color: #0F172A;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    direction: rtl;
}

#accountSettingsPage .form-group input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

#accountSettingsPage .account-form-actions {
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid #EAEFF5;
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-end;
}

#accountSettingsPage .save-btn {
    min-width: 132px;
    height: 42px;
    border: 0;
    border-radius: 10px;
    background: #2563EB;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.24);
}

#accountSettingsPage .cancel-btn {
    border: 0;
    background: transparent;
    color: #64748B;
    font-size: 14px;
    font-weight: 700;
}

#accountSettingsPage .profile-summary-upload {
    flex-shrink: 0;
}

#accountSettingsPage .change-photo-btn,
#accountSettingsPage .profile-avatar-edit,
#accountSettingsPage .save-btn,
#accountSettingsPage .cancel-btn {
    cursor: pointer;
}

@media (max-width: 1199.98px) {
    #accountSettingsPage .account-layout {
        grid-template-columns: 1fr;
    }

    #accountSettingsPage .account-sidebar-inner {
        min-height: auto;
        border-radius: 18px;
    }
}

@media (max-width: 767.98px) {
    #accountSettingsPage {
        padding: 12px 0 70px;
    }

    #accountSettingsPage .account-hero h1 {
        font-size: 24px;
    }

    #accountSettingsPage .account-hero p {
        font-size: 14px;
    }

    #accountSettingsPage .profile-summary-card {
        flex-direction: column;
        align-items: stretch;
    }

    #accountSettingsPage .profile-summary-content {
        justify-content: space-between;
    }

    #accountSettingsPage .account-form-body,
    #accountSettingsPage .account-form-head {
        padding-right: 18px;
        padding-left: 18px;
    }

    #accountSettingsPage .account-form-grid {
        grid-template-columns: 1fr;
    }

    #accountSettingsPage .account-form-actions {
        flex-wrap: wrap;
    }
}

/* Register Page */
#registerPage {
    min-height: 100vh;
    direction: rtl;
    background: #F5F7FB;
}

#registerPage .register-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#registerPage .register-side {
    position: relative;
}

#registerPage .register-side-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    background: #F5F7FB;
}

#registerPage .register-form-wrap {
    width: 100%;
    max-width: 448px;
}

#registerPage .register-form-head {
    text-align: center;
    margin-bottom: 28px;
}

#registerPage .register-form-head h2 {
    margin: 0 0 8px;
    color: #111827;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.5;
}

#registerPage .register-form-head p {
    margin: 0;
    color: #64748B;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.9;
}

#registerPage .register-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#registerPage .register-field label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

#registerPage .field-input-wrap {
    position: relative;
}

#registerPage .field-input-wrap input {
    width: 100%;
    height: 52px;
    border: 1px solid #D9E1EC;
    border-radius: 14px;
    background: #FFFFFF;
    padding: 0 18px 0 48px;
    color: #0F172A;
    font-size: 15px;
    font-weight: 600;
    outline: none;
    transition: 0.2s ease;
}

#registerPage .field-input-wrap input::placeholder {
    color: #94A3B8;
    font-weight: 500;
}

#registerPage .field-input-wrap input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

#registerPage .field-input-wrap i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 18px;
    pointer-events: none;
}

#registerPage .register-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    cursor: pointer;
    user-select: none;
}

#registerPage .register-check input {
    display: none;
}

#registerPage .register-check .checkmark {
    width: 18px;
    height: 18px;
    border: 1.5px solid #CBD5E1;
    border-radius: 4px;
    background: #fff;
    position: relative;
    flex-shrink: 0;
}

#registerPage .register-check input:checked + .checkmark {
    background: #0D9488;
    border-color: #0D9488;
}

#registerPage .register-check input:checked + .checkmark::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    top: 1px;
    left: 5px;
    transform: rotate(45deg);
}

#registerPage .register-check .check-text {
    color: #64748B;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 600;
}

#registerPage .register-check .check-text a {
    color: #0F988F;
    text-decoration: none;
    font-weight: 700;
}

#registerPage .register-submit {
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 14px;
    background: #149C92;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(20, 156, 146, 0.22);
    transition: 0.2s ease;
}

#registerPage .register-submit:hover {
    background: #118880;
}

#registerPage .register-login-link {
    text-align: center;
    margin-top: 10px;
    color: #64748B;
    font-size: 15px;
    font-weight: 600;
}

#registerPage .register-login-link a {
    color: #2563EB;
    text-decoration: none;
    font-weight: 800;
}

#registerPage .register-side-visual {
    overflow: hidden;
    background:
            radial-gradient(circle at 30% 20%, rgba(0, 167, 255, 0.22), transparent 28%),
            radial-gradient(circle at 70% 75%, rgba(37, 99, 235, 0.18), transparent 22%),
            linear-gradient(180deg, #08111F 0%, #041224 100%);
    padding: 48px 46px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#registerPage .register-brand {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#registerPage .register-brand img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

#registerPage .register-visual-content {
    max-width: 470px;
    margin: auto 0;
    align-self: center;
    text-align: right;
}

#registerPage .register-visual-content h1 {
    margin: 0 0 22px;
    color: #FFFFFF;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.45;
}

#registerPage .register-visual-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    line-height: 2;
    font-weight: 500;
}

#registerPage .register-users-box {
    width: 100%;
    max-width: 540px;
    min-height: 92px;
    margin-top: 40px;
    padding: 18px 26px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    align-self: flex-end;
}

#registerPage .register-users-text {
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    font-weight: 500;
}

#registerPage .register-users-avatars {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

#registerPage .register-users-avatars .avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #0F172A;
    background: #C8D5CC;
    color: #64736D;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    margin-left: -10px;
}

#registerPage .register-users-avatars .avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991.98px) {
    #registerPage .register-layout {
        grid-template-columns: 1fr;
    }

    #registerPage .register-side-visual {
        min-height: 420px;
        padding: 32px 24px;
    }

    #registerPage .register-side-form {
        padding: 40px 20px 50px;
    }

    #registerPage .register-form-wrap {
        max-width: 100%;
    }

    #registerPage .register-visual-content {
        max-width: 100%;
    }

    #registerPage .register-visual-content h1 {
        font-size: 28px;
    }

    #registerPage .register-users-box {
        max-width: 100%;
        align-self: stretch;
    }
}

@media (max-width: 767.98px) {
    #registerPage .register-side-visual {
        min-height: 360px;
    }

    #registerPage .register-form-head h2 {
        font-size: 26px;
    }

    #registerPage .register-visual-content h1 {
        font-size: 24px;
    }

    #registerPage .register-visual-content p,
    #registerPage .register-form-head p,
    #registerPage .register-login-link,
    #registerPage .register-users-text {
        font-size: 14px;
    }

    #registerPage .register-users-box {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Login Page */
#loginPage {
    min-height: 100vh;
    direction: rtl;
    background: #F5F7FB;
}

#loginPage .login-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#loginPage .login-side {
    position: relative;
}

#loginPage .login-side-form {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 32px;
    background: #F5F7FB;
}

#loginPage .login-form-wrap {
    width: 100%;
    max-width: 448px;
}

#loginPage .login-logo {
    text-align: center;
    margin-bottom: 26px;
}

#loginPage .login-logo img {
    max-width: 190px;
    height: auto;
}

#loginPage .login-head {
    text-align: center;
    margin-bottom: 28px;
}

#loginPage .login-head p {
    margin: 0;
    color: #64748B;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.9;
}

#loginPage .login-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#loginPage .login-field label {
    display: block;
    margin-bottom: 8px;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

#loginPage .login-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

#loginPage .login-label-row label {
    margin-bottom: 0;
}

#loginPage .forgot-password {
    color: #0F988F;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

#loginPage .login-input-wrap {
    position: relative;
}

#loginPage .login-input-wrap input {
    width: 100%;
    height: 52px;
    border: 1px solid #D9E1EC;
    border-radius: 14px;
    background: #FFFFFF;
    padding: 0 18px 0 48px;
    color: #0F172A;
    font-size: 15px;
    font-weight: 600;
    outline: none;
    transition: 0.2s ease;
}

#loginPage .login-input-wrap input::placeholder {
    color: #94A3B8;
    font-weight: 500;
}

#loginPage .login-input-wrap input:focus {
    border-color: #2563EB;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

#loginPage .login-input-wrap i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 18px;
    pointer-events: none;
}

#loginPage .login-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
    cursor: pointer;
    user-select: none;
}

#loginPage .login-check input {
    display: none;
}

#loginPage .login-check .checkmark {
    width: 18px;
    height: 18px;
    border: 1.5px solid #CBD5E1;
    border-radius: 4px;
    background: #fff;
    position: relative;
    flex-shrink: 0;
}

#loginPage .login-check input:checked + .checkmark {
    background: #0D9488;
    border-color: #0D9488;
}

#loginPage .login-check input:checked + .checkmark::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    top: 1px;
    left: 5px;
    transform: rotate(45deg);
}

#loginPage .login-check .check-text {
    color: #475569;
    font-size: 14px;
    line-height: 1.8;
    font-weight: 600;
}

#loginPage .login-submit {
    width: 100%;
    height: 56px;
    border: 0;
    border-radius: 14px;
    background: #149C92;
    color: #fff;
    font-size: 17px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(20, 156, 146, 0.22);
    transition: 0.2s ease;
}

#loginPage .login-submit:hover {
    background: #118880;
}

#loginPage .login-register-link {
    text-align: center;
    margin-top: 14px;
    color: #64748B;
    font-size: 15px;
    font-weight: 600;
}

#loginPage .login-register-link a {
    color: #0F988F;
    text-decoration: none;
    font-weight: 800;
}

#loginPage .login-side-visual {
    overflow: hidden;
    background:
            linear-gradient(rgba(5, 14, 29, 0.68), rgba(5, 14, 29, 0.86)),
            url("../img/login-cover.webp") center center / cover no-repeat;
    min-height: 100vh;
}

#loginPage .login-visual-overlay {
    position: absolute;
    inset: 0;
    background:
            radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.08), transparent 22%),
            radial-gradient(circle at 70% 74%, rgba(37, 99, 235, 0.18), transparent 24%);
    pointer-events: none;
}

#loginPage .login-visual-inner {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 48px 46px;
    display: flex;
    flex-direction: column;
}

#loginPage .login-brand-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    align-self: flex-end;
}

#loginPage .login-brand-icon img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

#loginPage .login-visual-content {
    max-width: 470px;
    margin: auto 0;
    align-self: center;
    text-align: right;
}

#loginPage .login-visual-content h1 {
    margin: 0 0 18px;
    color: #FFFFFF;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.45;
}

#loginPage .login-visual-content h1 span {
    color: #08B4A7;
}

#loginPage .login-visual-content p {
    margin: 0 0 26px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    line-height: 2;
    font-weight: 500;
}

#loginPage .login-members {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-start;
}

#loginPage .login-members-text {
    color: rgba(255, 255, 255, 0.88);
    font-size: 15px;
    font-weight: 500;
}

#loginPage .login-members-text strong {
    color: #FFFFFF;
    font-weight: 800;
}

#loginPage .login-members-avatars {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
}

#loginPage .member-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #0F172A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: -10px;
    font-size: 16px;
}

#loginPage .member-avatar.avatar-teal {
    background: #69C6B8;
    color: #FFFFFF;
}

#loginPage .member-avatar.avatar-light {
    background: #F4F1E8;
    color: #B3AA8F;
}

#loginPage .member-avatar.avatar-gold {
    background: #D8C684;
    color: #FFFFFF;
}

#loginPage .login-security-note {
    margin-top: auto;
    align-self: flex-end;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 13px;
    font-weight: 500;
}

#loginPage .login-security-note i {
    font-size: 14px;
}

@media (max-width: 991.98px) {
    #loginPage .login-layout {
        grid-template-columns: 1fr;
    }

    #loginPage .login-side-visual {
        min-height: 420px;
    }

    #loginPage .login-visual-inner {
        min-height: 420px;
        padding: 32px 24px;
    }

    #loginPage .login-side-form {
        padding: 40px 20px 50px;
    }

    #loginPage .login-form-wrap {
        max-width: 100%;
    }

    #loginPage .login-visual-content {
        max-width: 100%;
    }

    #loginPage .login-visual-content h1 {
        font-size: 28px;
    }
}

@media (max-width: 767.98px) {
    #loginPage .login-side-visual {
        min-height: 360px;
    }

    #loginPage .login-visual-inner {
        min-height: 360px;
    }

    #loginPage .login-visual-content h1 {
        font-size: 24px;
    }

    #loginPage .login-visual-content p,
    #loginPage .login-head p,
    #loginPage .login-register-link,
    #loginPage .login-members-text,
    #loginPage .login-check .check-text {
        font-size: 14px;
    }

    #loginPage .login-members {
        flex-direction: column;
        align-items: flex-start;
    }
}