/* ============================================
   CILPIN - Responsive Stylesheet
   ============================================ */

/* ============================================
   Extra Large Devices (1400px and up)
   ============================================ */
@media screen and (min-width: 1400px) {
    :root {
        --container-max: 1320px;
    }
    
    .hero__title {
        font-size: 4.5rem;
    }
    
    .hero__subtitle {
        font-size: 1.35rem;
    }
    
    .benefits__grid {
        gap: 2rem;
    }
    
    .sectors__grid {
        gap: 2rem;
    }
    
    .plans__grid {
        gap: 2.5rem;
    }
    
    .insights__grid {
        gap: 2.5rem;
    }
}

/* ============================================
   Large Devices (1200px to 1399px)
   ============================================ */
@media screen and (min-width: 1200px) and (max-width: 1399px) {
    :root {
        --container-max: 1140px;
    }
    
    .section__title {
        font-size: 2.25rem;
    }
    
    .hero__title {
        font-size: 3.5rem;
    }
    
    .about__img {
        height: 500px;
    }
}

/* ============================================
   Desktop (1025px to 1199px)
   ============================================ */
@media screen and (min-width: 1025px) and (max-width: 1199px) {
    :root {
        --container-max: 960px;
    }
    
    .section__title {
        font-size: 2rem;
    }
    
    .hero__title {
        font-size: 3rem;
    }
    
    .hero__subtitle {
        font-size: 1.1rem;
    }
    
    .hero__content {
        max-width: 650px;
    }
    
    .benefits__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .sectors__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .plans__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }
    
    .plan-card--popular {
        transform: scale(1.02);
    }
    
    .plan-card--popular:hover {
        transform: scale(1.02) translateY(-8px);
    }
    
    .plan-card__amount {
        font-size: 2.5rem;
    }
    
    .insights__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .footer__grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.25fr;
        gap: 1.5rem;
    }
    
    .about__img {
        height: 450px;
    }
    
    .stats-grid {
        gap: 1rem;
    }
    
    .stat-item__number {
        font-size: 1.75rem;
    }
    
    /* Article */
    .article-content__grid {
        max-width: 760px;
    }
}

/* ============================================
   Tablet Landscape (769px to 1024px)
   ============================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    :root {
        --container-max: 720px;
        --container-padding: 1.25rem;
        --spacing-4xl: 5rem;
        --spacing-3xl: 3rem;
    }
    
    /* Header */
    .navbar__list {
        gap: 0;
    }
    
    .navbar__link {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
    
    .navbar__cta {
        gap: 0.5rem;
    }
    
    .navbar__cta .btn {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
    
    /* Hero */
    .hero__title {
        font-size: 2.75rem;
    }
    
    .hero__subtitle {
        font-size: 1.05rem;
        max-width: 550px;
    }
    
    .hero__content {
        max-width: 600px;
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .hero__stats {
        padding: 1.5rem 0;
    }
    
    /* Section Titles */
    .section__title {
        font-size: 1.875rem;
    }
    
    .section__header {
        max-width: 550px;
        margin-bottom: var(--spacing-2xl);
    }
    
    /* About */
    .about__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-2xl);
    }
    
    .about__image {
        order: 1;
    }
    
    .about__content {
        order: 2;
    }
    
    .about__img {
        height: 400px;
    }
    
    .about__image-badge {
        right: 1rem;
        bottom: 1rem;
    }
    
    /* About Story */
    .about-story__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .about-story__image img {
        height: 400px;
    }
    
    /* Mission & Vision */
    .mission-vision__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    /* Leadership */
    .leadership__grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
    
    .leader-card__image {
        height: 280px;
    }
    
    /* Why Choose */
    .why-choose__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Benefits */
    .benefits__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    
    .benefit-card {
        padding: 1.75rem;
    }
    
    /* Sectors */
    .sectors__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .sector-card {
        padding: 2rem 1.5rem;
    }
    
    .sector-card__icon {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }
    
    /* How It Works */
    .steps {
        max-width: 650px;
    }
    
    .step {
        gap: 1.5rem;
    }
    
    .step__number {
        width: 60px;
        font-size: 1.25rem;
    }
    
    .step__content {
        padding: 1.5rem;
    }
    
    .steps__connector {
        left: 29px;
    }
    
    /* Plans */
    .plans__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .plan-card--popular {
        transform: scale(1.01);
    }
    
    .plan-card--popular:hover {
        transform: scale(1.01) translateY(-8px);
    }
    
    .plan-card__header {
        padding: 2rem 1.5rem 1.5rem;
    }
    
    .plan-card__features {
        padding: 1.5rem;
    }
    
    .plan-card .btn {
        margin: 0 1.5rem 1.5rem;
    }
    
    .plan-card__amount {
        font-size: 2.25rem;
    }
    
    .plan-card__name {
        font-size: 1.25rem;
    }
    
    /* Insights */
    .insights__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .blog-card__image {
        height: 200px;
    }
    
    /* CTA */
    .cta__title {
        font-size: 2rem;
    }
    
    .cta__content {
        max-width: 550px;
    }
    
    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
    
    .footer__col--about {
        grid-column: 1 / -1;
    }
    
    .footer__bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer__legal {
        justify-content: center;
    }
    
    /* Article */
    .article-content__grid {
        grid-template-columns: 1fr;
        max-width: 700px;
    }
    
    .article-share-sidebar {
        display: none;
    }
    
    /* Blog */
    .blog-page__grid {
        grid-template-columns: 1fr 280px;
        gap: 2rem;
    }
    
    .blog-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   Tablet Portrait (601px to 768px)
   ============================================ */
@media screen and (min-width: 601px) and (max-width: 768px) {
    :root {
        --container-max: 540px;
        --container-padding: 1rem;
        --spacing-4xl: 4rem;
        --spacing-3xl: 2.5rem;
    }
    
    /* Mobile Menu */
    .navbar__toggle {
        display: flex;
    }
    
    .navbar__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: var(--color-white);
        flex-direction: column;
        padding: 6rem 2rem 2rem;
        box-shadow: var(--shadow-2xl);
        transition: right var(--transition-base);
        z-index: 1000;
    }
    
    .navbar__menu.active {
        right: 0;
    }
    
    .navbar__list {
        flex-direction: column;
        width: 100%;
        gap: 0.5rem;
    }
    
    .navbar__link {
        display: block;
        padding: 0.75rem 1rem;
        color: var(--color-gray-700) !important;
        font-size: 1rem;
        border-radius: var(--radius-md);
    }
    
    .navbar__link:hover {
        background: var(--color-primary-lighter);
        color: var(--color-primary) !important;
    }
    
    .navbar__link--active {
        background: var(--color-primary-lighter);
        color: var(--color-primary) !important;
    }
    
    .navbar__cta {
        flex-direction: column;
        width: 100%;
        margin-top: var(--spacing-lg);
        gap: 0.75rem;
    }
    
    .navbar__cta .btn {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }
    
    .header.scrolled .navbar {
        padding: 0.75rem 0;
    }
    
    /* Body overlay when menu is open */
    .menu-open {
        overflow: hidden;
    }
    
    .menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    /* Hero */
    .hero {
        min-height: 90vh;
    }
    
    .hero__title {
        font-size: 2.25rem;
    }
    
    .hero__subtitle {
        font-size: 1rem;
        max-width: 450px;
    }
    
    .hero__content {
        max-width: 500px;
        padding: var(--spacing-3xl) 0 var(--spacing-xl);
    }
    
    .hero__badge {
        font-size: 0.75rem;
        padding: 0.375rem 1rem;
    }
    
    .hero__actions {
        flex-direction: column;
        align-items: center;
    }
    
    .hero__actions .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    
    .hero__stats {
        padding: 1.25rem 0;
    }
    
    .stat-item__number {
        font-size: 1.5rem;
    }
    
    .stat-item__label {
        font-size: 0.8125rem;
    }
    
    /* Section Titles */
    .section__title {
        font-size: 1.75rem;
    }
    
    .section__description {
        font-size: 1rem;
    }
    
    .section__header {
        max-width: 450px;
        margin-bottom: var(--spacing-xl);
    }
    
    .section__label {
        font-size: 0.75rem;
        padding: 0.3rem 0.875rem;
    }
    
    /* About */
    .about__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    .about__image {
        order: 1;
    }
    
    .about__content {
        order: 2;
    }
    
    .about__img {
        height: 350px;
    }
    
    .about__image-badge {
        right: 1rem;
        bottom: 1rem;
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
    
    .about__description {
        font-size: 1rem;
    }
    
    /* About Story */
    .about-story__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .about-story__image img {
        height: 300px;
    }
    
    /* Mission & Vision */
    .mission-vision__grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Leadership */
    .leadership__grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .leader-card__image {
        height: 280px;
    }
    
    /* Why Choose */
    .why-choose__grid {
        grid-template-columns: 1fr 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
    
    /* Benefits */
    .benefits__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .benefit-card {
        padding: 1.5rem;
    }
    
    .benefit-card__icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    .benefit-card__title {
        font-size: 1rem;
    }
    
    .benefit-card__description {
        font-size: 0.875rem;
    }
    
    /* Sectors */
    .sectors__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .sector-card {
        padding: 1.75rem 1.25rem;
    }
    
    .sector-card__icon {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
    
    .sector-card__title {
        font-size: 1.125rem;
    }
    
    /* How It Works */
    .steps {
        max-width: 100%;
    }
    
    .step {
        gap: 1.25rem;
    }
    
    .step__number {
        width: 50px;
        font-size: 1.125rem;
    }
    
    .step__content {
        padding: 1.25rem;
    }
    
    .step__title {
        font-size: 1.125rem;
    }
    
    .step__description {
        font-size: 0.875rem;
    }
    
    .steps__connector {
        left: 24px;
    }
    
    /* Plans */
    .plans__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 450px;
        margin: 0 auto;
    }
    
    .plan-card--popular {
        transform: none;
    }
    
    .plan-card--popular:hover {
        transform: translateY(-8px);
    }
    
    .plan-card__amount {
        font-size: 2.5rem;
    }
    
    /* Insights */
    .insights__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 500px;
        margin: 0 auto;
    }
    
    .blog-card__image {
        height: 220px;
    }
    
    /* CTA */
    .cta__title {
        font-size: 1.75rem;
    }
    
    .cta__description {
        font-size: 1rem;
    }
    
    .cta__actions {
        flex-direction: column;
        align-items: center;
    }
    
    .cta__actions .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    /* Footer */
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .footer__bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .footer__legal {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .back-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }
    
    /* Article */
    .article-hero {
        padding: 7rem 0 3rem;
    }
    
    .article-hero__meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .article-hero__info {
        flex-wrap: wrap;
        gap: 0.75rem 1.25rem;
    }
    
    .article-content__grid {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
    
    .article-share-sidebar {
        display: none;
    }
    
    .article-body__text {
        font-size: 1rem;
    }
    
    .article-body__text h2 {
        font-size: 1.5rem;
    }
    
    .author-bio {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    /* Blog */
    .blog-page__grid {
        grid-template-columns: 1fr;
    }
    
    .blog-posts-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .blog-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .sidebar-widget {
        margin-bottom: 0;
    }
    
    .blog-categories {
        gap: 0.375rem;
    }
    
    .blog-category-btn {
        padding: 0.4rem 0.75rem;
        font-size: 0.75rem;
    }
    
    /* Legal Content */
    .legal-content__body h2 {
        font-size: 1.5rem;
    }
    
    .legal-content__body h3 {
        font-size: 1.125rem;
    }
    
    .cookie-table {
        font-size: 0.8125rem;
        min-width: 400px;
    }
    
    .cookie-table th,
    .cookie-table td {
        padding: 0.625rem 0.875rem;
    }
    
    /* Contact */
    .contact-section__grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .contact-form-wrapper {
        padding: 2rem;
    }
    
    /* Auth */
    .auth-section {
        padding: 6rem 0 var(--spacing-3xl);
    }
    
    .auth-wrapper {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .auth-info__card {
        padding: 2rem;
    }
    
    .auth-card__header {
        padding: 2rem 1.5rem 1.25rem;
    }
    
    .auth-card__body {
        padding: 1.5rem;
    }
    
    .auth-card__footer {
        padding: 1.25rem 1.5rem;
    }
}

/* ============================================
   Mobile Large (481px to 600px)
   ============================================ */
@media screen and (min-width: 481px) and (max-width: 600px) {
    :root {
        --container-max: 100%;
        --container-padding: 1rem;
        --spacing-4xl: 3.5rem;
        --spacing-3xl: 2.25rem;
        --spacing-2xl: 1.75rem;
        --spacing-xl: 1.25rem;
    }
    
    /* Mobile Menu */
    .navbar__toggle {
        display: flex;
    }
    
    .navbar__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--color-white);
        flex-direction: column;
        padding: 5rem 1.5rem 1.5rem;
        box-shadow: var(--shadow-2xl);
        transition: right var(--transition-base);
        z-index: 1000;
        overflow-y: auto;
    }
    
    .navbar__menu.active {
        right: 0;
    }
    
    .navbar__list {
        flex-direction: column;
        width: 100%;
        gap: 0.25rem;
    }
    
    .navbar__link {
        display: block;
        padding: 0.875rem 1rem;
        color: var(--color-gray-700) !important;
        font-size: 1.0625rem;
        border-radius: var(--radius-md);
    }
    
    .navbar__link:hover {
        background: var(--color-primary-lighter);
        color: var(--color-primary) !important;
    }
    
    .navbar__link--active {
        background: var(--color-primary-lighter);
        color: var(--color-primary) !important;
    }
    
    .navbar__cta {
        flex-direction: column;
        width: 100%;
        margin-top: var(--spacing-lg);
        gap: 0.75rem;
        padding-top: var(--spacing-lg);
        border-top: 1px solid var(--color-gray-200);
    }
    
    .navbar__cta .btn {
        width: 100%;
        justify-content: center;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    .navbar {
        padding: 1rem 0;
    }
    
    .header.scrolled .navbar {
        padding: 0.625rem 0;
    }
    
    /* Body overlay */
    .menu-open {
        overflow: hidden;
    }
    
    .menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    /* Hero */
    .hero {
        min-height: 85vh;
    }
    
    .hero__title {
        font-size: 2rem;
    }
    
    .hero__subtitle {
        font-size: 0.9375rem;
        max-width: 100%;
    }
    
    .hero__content {
        max-width: 100%;
        padding: var(--spacing-3xl) 0 var(--spacing-lg);
    }
    
    .hero__badge {
        font-size: 0.6875rem;
        padding: 0.35rem 0.875rem;
    }
    
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .hero__actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .hero__stats {
        padding: 1rem 0;
    }
    
    .stat-item__number {
        font-size: 1.35rem;
    }
    
    .stat-item__plus {
        font-size: 1.1rem;
    }
    
    .stat-item__label {
        font-size: 0.75rem;
    }
    
    /* Section Titles */
    .section__title {
        font-size: 1.625rem;
    }
    
    .section__description {
        font-size: 0.9375rem;
    }
    
    .section__header {
        max-width: 100%;
        margin-bottom: var(--spacing-xl);
    }
    
    .section__label {
        font-size: 0.71875rem;
        padding: 0.275rem 0.75rem;
    }
    
    /* About */
    .about__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .about__image {
        order: 1;
    }
    
    .about__content {
        order: 2;
    }
    
    .about__img {
        height: 300px;
    }
    
    .about__image-badge {
        right: 0.75rem;
        bottom: 0.75rem;
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }
    
    .about__description {
        font-size: 0.9375rem;
    }
    
    .about__feature h4 {
        font-size: 0.9375rem;
    }
    
    .about__feature p {
        font-size: 0.875rem;
    }
    
    /* About Story */
    .about-story__image img {
        height: 250px;
    }
    
    /* Mission & Vision */
    .mission-vision__grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Leadership */
    .leadership__grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .leader-card__content {
        padding: 1.5rem;
    }
    
    .leader-card__name {
        font-size: 1.25rem;
    }
    
    /* Why Choose */
    .why-choose__grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    
    /* Benefits */
    .benefits__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .benefit-card {
        padding: 1.5rem;
    }
    
    .benefit-card__icon {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .benefit-card__title {
        font-size: 1.0625rem;
    }
    
    .benefit-card__description {
        font-size: 0.875rem;
    }
    
    /* Sectors */
    .sectors__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.875rem;
    }
    
    .sector-card {
        padding: 1.5rem 1rem;
    }
    
    .sector-card__icon {
        width: 50px;
        height: 50px;
        font-size: 1.375rem;
        margin-bottom: 0.875rem;
    }
    
    .sector-card__title {
        font-size: 1rem;
    }
    
    .sector-card__opportunities {
        font-size: 0.8125rem;
    }
    
    /* How It Works */
    .steps {
        max-width: 100%;
    }
    
    .step {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: var(--spacing-xl);
    }
    
    .step__number {
        width: auto;
        text-align: left;
        font-size: 1rem;
        background: rgba(255, 255, 255, 0.1);
        padding: 0.375rem 0.875rem;
        border-radius: var(--radius-full);
        display: inline-block;
        width: fit-content;
    }
    
    .step__content {
        padding: 1.25rem;
    }
    
    .step__title {
        font-size: 1.0625rem;
    }
    
    .step__description {
        font-size: 0.875rem;
    }
    
    .steps__connector {
        display: none;
    }
    
    /* Plans */
    .plans__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        max-width: 400px;
        margin: 0 auto;
    }
    
    .plan-card--popular {
        transform: none;
    }
    
    .plan-card--popular:hover {
        transform: translateY(-6px);
    }
    
    .plan-card__header {
        padding: 1.75rem 1.5rem 1.5rem;
    }
    
    .plan-card__features {
        padding: 1.5rem;
    }
    
    .plan-card .btn {
        margin: 0 1.5rem 1.5rem;
    }
    
    .plan-card__amount {
        font-size: 2.25rem;
    }
    
    .plan-card__name {
        font-size: 1.25rem;
    }
    
    /* Insights */
    .insights__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
        max-width: 450px;
        margin: 0 auto;
    }
    
    .blog-card__image {
        height: 200px;
    }
    
    .blog-card__body {
        padding: 1.25rem;
    }
    
    .blog-card__title {
        font-size: 1.0625rem;
    }
    
    /* CTA */
    .cta {
        padding: var(--spacing-3xl) 0;
    }
    
    .cta__title {
        font-size: 1.5rem;
    }
    
    .cta__description {
        font-size: 0.9375rem;
    }
    
    .cta__actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .cta__actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Footer */
    .footer {
        padding: var(--spacing-2xl) 0 0;
    }
    
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    
    .footer__description {
        font-size: 0.875rem;
    }
    
    .footer__heading {
        font-size: 1rem;
        margin-bottom: 0.875rem;
    }
    
    .footer__links a,
    .footer__contact li {
        font-size: 0.875rem;
    }
    
    .footer__bottom {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
        font-size: 0.8125rem;
    }
    
    .footer__legal {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .footer__social {
        gap: 0.5rem;
    }
    
    .footer__social-link {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }
    
    /* Back to Top */
    .back-to-top {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 40px;
        height: 40px;
        font-size: 0.9375rem;
    }
    
    /* Buttons */
    .btn--lg {
        padding: 0.875rem 2rem;
        font-size: 1rem;
    }
    
    /* Article */
    .article-hero__title {
        font-size: 1.75rem;
    }
    
    .article-hero__info {
        font-size: 0.875rem;
    }
    
    .article-body__image {
        border-radius: var(--radius-lg);
    }
    
    .article-dropcap::first-letter {
        font-size: 3rem;
    }
    
    .article-share-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .author-bio {
        padding: 1.5rem;
    }
    
    .author-bio__avatar {
        width: 56px;
        height: 56px;
        min-width: 56px;
        font-size: 1.5rem;
    }
    
    /* Blog */
    .blog-sidebar {
        grid-template-columns: 1fr;
    }
    
    .sidebar-widget {
        margin-bottom: 1rem;
    }
    
    /* Legal */
    .legal-content__body {
        font-size: 0.9375rem;
    }
    
    .legal-content__body ul {
        padding-left: 1rem;
    }
    
    .legal-content__body .legal-contact {
        padding: 1.25rem;
    }
    
    .cookie-table {
        font-size: 0.71875rem;
        min-width: 320px;
    }
    
    .cookie-table th,
    .cookie-table td {
        padding: 0.5rem 0.625rem;
    }
    
    /* 404 */
    .error-content__code {
        font-size: 5rem;
    }
    
    .error-content__title {
        font-size: 2rem;
    }
    
    .error-content__actions {
        flex-direction: column;
    }
    
    .error-content__actions .btn {
        width: 100%;
        max-width: 300px;
        justify-content: center;
    }
    
    /* Contact */
    .contact-form-wrapper {
        padding: 1.5rem;
    }
    
    .contact-info-card {
        padding: 1.5rem;
    }
    
    .office-hours-card__header,
    .office-hours-card__body {
        padding: 1.25rem 1.5rem;
    }
}

/* ============================================
   Mobile Small (320px to 480px)
   ============================================ */
@media screen and (max-width: 480px) {
    :root {
        --container-max: 100%;
        --container-padding: 0.875rem;
        --spacing-4xl: 3rem;
        --spacing-3xl: 2rem;
        --spacing-2xl: 1.5rem;
        --spacing-xl: 1rem;
        --spacing-lg: 1rem;
    }
    
    /* Mobile Menu */
    .navbar__toggle {
        display: flex;
    }
    
    .navbar__menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: var(--color-white);
        flex-direction: column;
        padding: 4.5rem 1.25rem 1.25rem;
        box-shadow: var(--shadow-2xl);
        transition: right var(--transition-base);
        z-index: 1000;
        overflow-y: auto;
    }
    
    .navbar__menu.active {
        right: 0;
    }
    
    .navbar__list {
        flex-direction: column;
        width: 100%;
        gap: 0.125rem;
    }
    
    .navbar__link {
        display: block;
        padding: 0.75rem 0.875rem;
        color: var(--color-gray-700) !important;
        font-size: 1rem;
        border-radius: var(--radius-md);
    }
    
    .navbar__link:hover {
        background: var(--color-primary-lighter);
        color: var(--color-primary) !important;
    }
    
    .navbar__link--active {
        background: var(--color-primary-lighter);
        color: var(--color-primary) !important;
    }
    
    .navbar__link::after {
        display: none;
    }
    
    .navbar__cta {
        flex-direction: column;
        width: 100%;
        margin-top: var(--spacing-md);
        gap: 0.625rem;
        padding-top: var(--spacing-md);
        border-top: 1px solid var(--color-gray-200);
    }
    
    .navbar__cta .btn {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1.25rem;
        font-size: 0.9375rem;
    }
    
    .navbar {
        padding: 0.875rem 0;
    }
    
    .navbar__logo-icon {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }
    
    .navbar__logo-text {
        font-size: 1.25rem;
    }
    
    .header.scrolled .navbar {
        padding: 0.5rem 0;
    }
    
    /* Body overlay */
    .menu-open {
        overflow: hidden;
    }
    
    .menu-open::after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    
    /* Hero */
    .hero {
        min-height: 80vh;
        min-height: 80dvh;
    }
    
    .hero__title {
        font-size: 1.75rem;
    }
    
    .hero__subtitle {
        font-size: 0.875rem;
        max-width: 100%;
        line-height: 1.7;
    }
    
    .hero__content {
        max-width: 100%;
        padding: var(--spacing-2xl) 0 var(--spacing-md);
    }
    
    .hero__badge {
        font-size: 0.65625rem;
        padding: 0.3rem 0.75rem;
        margin-bottom: 1rem;
    }
    
    .hero__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .hero__actions .btn {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }
    
    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .hero__stats {
        padding: 0.875rem 0;
    }
    
    .stat-item__number {
        font-size: 1.25rem;
    }
    
    .stat-item__plus {
        font-size: 1rem;
    }
    
    .stat-item__label {
        font-size: 0.6875rem;
        margin-top: 0.125rem;
    }
    
    /* Section Titles */
    .section__title {
        font-size: 1.5rem;
    }
    
    .section__description {
        font-size: 0.875rem;
        line-height: 1.65;
    }
    
    .section__header {
        max-width: 100%;
        margin-bottom: var(--spacing-lg);
    }
    
    .section__label {
        font-size: 0.6875rem;
        padding: 0.25rem 0.75rem;
        margin-bottom: 0.75rem;
    }
    
    /* About */
    .about__grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
    
    .about__image {
        order: 1;
    }
    
    .about__content {
        order: 2;
    }
    
    .about__img {
        height: 250px;
    }
    
    .about__image-badge {
        right: 0.5rem;
        bottom: 0.5rem;
        padding: 0.5rem 0.875rem;
        font-size: 0.75rem;
        gap: 0.5rem;
    }
    
    .about__image-badge i {
        font-size: 1rem;
    }
    
    .about__description {
        font-size: 0.875rem;
        line-height: 1.7;
    }
    
    .about__feature {
        gap: 0.75rem;
        padding: 0.5rem 0;
    }
    
    .about__feature i {
        font-size: 1.125rem;
    }
    
    .about__feature h4 {
        font-size: 0.9375rem;
    }
    
    .about__feature p {
        font-size: 0.8125rem;
    }
    
    /* About Story */
    .about-story__text {
        font-size: 0.9375rem;
    }
    
    .about-story__image img {
        height: 200px;
    }
    
    /* Mission & Vision */
    .mission-vision__grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .mission-card {
        padding: 1.5rem;
    }
    
    /* Leadership */
    .leadership__grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .leader-card__image {
        height: 250px;
    }
    
    .leader-card__content {
        padding: 1.25rem;
    }
    
    .leader-card__name {
        font-size: 1.125rem;
    }
    
    .leader-card__bio {
        font-size: 0.875rem;
    }
    
    /* Why Choose */
    .why-choose__grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
    
    .why-choose__item {
        padding: 1.25rem;
    }
    
    /* Benefits */
    .benefits__grid {
        grid-template-columns: 1fr;
        gap: 0.875rem;
    }
    
    .benefit-card {
        padding: 1.25rem;
    }
    
    .benefit-card__icon {
        width: 44px;
        height: 44px;
        font-size: 1.125rem;
        margin-bottom: 0.875rem;
        border-radius: var(--radius-md);
    }
    
    .benefit-card__title {
        font-size: 1rem;
        margin-bottom: 0.375rem;
    }
    
    .benefit-card__description {
        font-size: 0.84375rem;
        line-height: 1.55;
    }
    
    /* Sectors */
    .sectors__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .sector-card {
        padding: 1.25rem 0.875rem;
        border-radius: var(--radius-lg);
    }
    
    .sector-card__icon {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
        margin-bottom: 0.75rem;
        border-radius: var(--radius-lg);
    }
    
    .sector-card__title {
        font-size: 0.9375rem;
        margin-bottom: 0.25rem;
    }
    
    .sector-card__opportunities {
        font-size: 0.75rem;
    }
    
    /* How It Works */
    .steps {
        max-width: 100%;
    }
    
    .step {
        flex-direction: column;
        gap: 0.375rem;
        margin-bottom: var(--spacing-lg);
    }
    
    .step:last-child {
        margin-bottom: 0;
    }
    
    .step__number {
        width: auto;
        text-align: left;
        font-size: 0.875rem;
        background: rgba(255, 255, 255, 0.1);
        padding: 0.3rem 0.75rem;
        border-radius: var(--radius-full);
        display: inline-block;
        width: fit-content;
    }
    
    .step__content {
        padding: 1.125rem;
        border-radius: var(--radius-lg);
    }
    
    .step__icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
        margin-bottom: 0.75rem;
        border-radius: var(--radius-md);
    }
    
    .step__title {
        font-size: 1rem;
        margin-bottom: 0.375rem;
    }
    
    .step__description {
        font-size: 0.84375rem;
        line-height: 1.55;
    }
    
    .steps__connector {
        display: none;
    }
    
    /* Plans */
    .plans__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 100%;
    }
    
    .plan-card--popular {
        transform: none;
    }
    
    .plan-card--popular:hover {
        transform: translateY(-4px);
    }
    
    .plan-card__badge {
        top: 0.75rem;
        right: 0.75rem;
        font-size: 0.65625rem;
        padding: 0.3rem 0.75rem;
    }
    
    .plan-card__header {
        padding: 1.5rem 1.25rem 1.25rem;
    }
    
    .plan-card__name {
        font-size: 1.125rem;
        margin-bottom: 0.625rem;
    }
    
    .plan-card__amount {
        font-size: 2rem;
    }
    
    .plan-card__currency {
        font-size: 1.125rem;
    }
    
    .plan-card__period {
        font-size: 0.8125rem;
    }
    
    .plan-card__description {
        font-size: 0.8125rem;
    }
    
    .plan-card__features {
        padding: 1.25rem;
        gap: 0.75rem;
    }
    
    .plan-card__features li {
        font-size: 0.84375rem;
        gap: 0.625rem;
    }
    
    .plan-card .btn {
        margin: 0 1.25rem 1.25rem;
        font-size: 0.9375rem;
        padding: 0.75rem;
    }
    
    /* Insights */
    .insights__grid {
        grid-template-columns: 1fr;
        gap: 1rem;
        max-width: 100%;
    }
    
    .blog-card__image {
        height: 190px;
    }
    
    .blog-card__category {
        top: 0.75rem;
        left: 0.75rem;
        font-size: 0.65625rem;
        padding: 0.3rem 0.75rem;
    }
    
    .blog-card__body {
        padding: 1.125rem;
    }
    
    .blog-card__meta {
        font-size: 0.75rem;
        gap: 0.75rem;
        margin-bottom: 0.625rem;
    }
    
    .blog-card__title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .blog-card__excerpt {
        font-size: 0.84375rem;
        margin-bottom: 0.75rem;
    }
    
    .blog-card__link {
        font-size: 0.875rem;
    }
    
    .insights__cta {
        margin-top: var(--spacing-xl);
    }
    
    /* CTA */
    .cta {
        padding: var(--spacing-2xl) 0;
    }
    
    .cta__title {
        font-size: 1.375rem;
        margin-bottom: 0.875rem;
    }
    
    .cta__description {
        font-size: 0.875rem;
        line-height: 1.65;
        margin-bottom: var(--spacing-xl);
    }
    
    .cta__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .cta__actions .btn {
        width: 100%;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
    }
    
    /* Footer */
    .footer {
        padding: var(--spacing-xl) 0 0;
    }
    
    .footer__grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-bottom: var(--spacing-xl);
    }
    
    .footer__logo {
        margin-bottom: 0.75rem;
    }
    
    .footer__logo-icon {
        width: 34px;
        height: 34px;
        font-size: 0.9375rem;
    }
    
    .footer__logo-text {
        font-size: 1.25rem;
    }
    
    .footer__description {
        font-size: 0.84375rem;
        line-height: 1.6;
        margin-bottom: 0.875rem;
    }
    
    .footer__social-link {
        width: 34px;
        height: 34px;
        font-size: 0.8125rem;
    }
    
    .footer__heading {
        font-size: 0.9375rem;
        margin-bottom: 0.75rem;
    }
    
    .footer__links {
        gap: 0.5rem;
    }
    
    .footer__links a,
    .footer__contact li {
        font-size: 0.84375rem;
    }
    
    .footer__contact {
        gap: 0.75rem;
    }
    
    .footer__contact i {
        width: 16px;
        font-size: 0.8125rem;
    }
    
    .footer__bottom {
        flex-direction: column;
        gap: 0.625rem;
        text-align: center;
        font-size: 0.75rem;
        padding: var(--spacing-md) 0;
    }
    
    .footer__legal {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.875rem;
    }
    
    /* Back to Top */
    .back-to-top {
        bottom: 1rem;
        right: 1rem;
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }
    
    /* Buttons */
    .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9375rem;
        border-radius: var(--radius-md);
    }
    
    .btn--lg {
        padding: 0.8125rem 1.75rem;
        font-size: 0.9375rem;
    }
    
    .btn--sm {
        padding: 0.5rem 1rem;
        font-size: 0.8125rem;
    }
    
    /* Form Elements */
    .form-input,
    .form-textarea,
    .form-select {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
        border-radius: var(--radius-md);
    }
    
    /* Modal */
    .modal {
        width: 95%;
        max-width: none;
        border-radius: var(--radius-xl);
    }
    
    .modal__header {
        padding: 1.25rem 1.5rem;
    }
    
    .modal__body {
        padding: 1.5rem;
    }
    
    .modal__footer {
        padding: 1.25rem 1.5rem;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .modal__footer .btn {
        width: 100%;
    }
    
    /* Card */
    .card__header {
        padding: 1.25rem 1.5rem;
    }
    
    .card__body {
        padding: 1.5rem;
    }
    
    .card__footer {
        padding: 1.25rem 1.5rem;
    }
    
    /* Article */
    .article-hero {
        padding: 6rem 0 2.5rem;
    }
    
    .article-hero__title {
        font-size: 1.5rem;
    }
    
    .article-hero__info {
        font-size: 0.8125rem;
    }
    
    .article-content__grid {
        max-width: 100%;
    }
    
    .article-body__text h2 {
        font-size: 1.25rem;
    }
    
    .article-body__text ul {
        margin-left: 1rem;
    }
    
    .article-blockquote {
        padding: 1rem 1.25rem;
    }
    
    .article-blockquote p {
        font-size: 0.9375rem;
    }
    
    .article-tags {
        gap: 0.375rem;
    }
    
    .article-tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.625rem;
    }
    
    .author-bio {
        padding: 1.25rem;
    }
    
    /* 404 */
    .error-content__code {
        font-size: 4rem;
    }
    
    .error-content__icon {
        font-size: 3rem;
    }
    
    .error-content__title {
        font-size: 1.625rem;
    }
    
    .error-content__description {
        font-size: 1rem;
    }
    
    .error-content__quick-links {
        gap: 1rem;
        font-size: 0.875rem;
    }
    
    .error-content__quick-links span {
        display: block;
        width: 100%;
    }
    
    /* Contact */
    .contact-form-wrapper__title,
    .contact-info-card__title {
        font-size: 1.375rem;
    }
    
    .contact-info-item {
        flex-direction: column;
        gap: 0.75rem;
        text-align: center;
    }
    
    .contact-info-item__icon {
        margin: 0 auto;
    }
    
    .btn--block-mobile {
        width: 100%;
    }
    
    .office-hours-item {
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
    }
    
    .map-placeholder {
        min-height: 220px;
    }
    
    /* Auth */
    .auth-card__header h1 {
        font-size: 1.375rem;
    }
    
    .auth-info__card h2 {
        font-size: 1.25rem;
    }
    
    .auth-info__feature {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
    
    .auth-help {
        flex-direction: column;
        text-align: center;
    }
    
    .auth-help i {
        margin: 0 auto;
    }
    
    /* Legal */
    .legal-content__meta {
        padding: 1rem 1.25rem;
    }
    
    .legal-content__body h2 {
        font-size: 1.25rem;
    }
    
    .legal-content__body .legal-contact {
        padding: 1rem 1.25rem;
    }
    
    /* Wizard / Signup */
    .wizard-step__header h2 {
        font-size: 1.375rem;
    }
    
    .plan-radio__card {
        padding: 1.25rem;
    }
    
    .plan-radio__price {
        font-size: 1.25rem;
    }
    
    .file-upload__box {
        padding: 1.25rem;
    }
}

/* ============================================
   Extra Small Mobile (below 360px)
   ============================================ */
@media screen and (max-width: 359px) {
    :root {
        --container-padding: 0.75rem;
        --spacing-4xl: 2.5rem;
        --spacing-3xl: 1.75rem;
        --spacing-2xl: 1.25rem;
    }
    
    .navbar__logo-text {
        font-size: 1.125rem;
    }
    
    .navbar__logo-icon {
        width: 30px;
        height: 30px;
        font-size: 0.875rem;
    }
    
    .hero__title {
        font-size: 1.5rem;
    }
    
    .hero__subtitle {
        font-size: 0.8125rem;
    }
    
    .section__title {
        font-size: 1.375rem;
    }
    
    .section__description {
        font-size: 0.84375rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .stat-item__number {
        font-size: 1.125rem;
    }
    
    .sectors__grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .sector-card {
        padding: 1rem 0.75rem;
    }
    
    .sector-card__icon {
        width: 38px;
        height: 38px;
        font-size: 1.125rem;
    }
    
    .sector-card__title {
        font-size: 0.8125rem;
    }
    
    .benefit-card {
        padding: 1rem;
    }
    
    .plan-card__amount {
        font-size: 1.75rem;
    }
    
    .blog-card__image {
        height: 170px;
    }
    
    .footer__legal {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .article-hero__title {
        font-size: 1.25rem;
    }
    
    .error-content__code {
        font-size: 3rem;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .header,
    .navbar,
    .navbar__toggle,
    .back-to-top,
    .cta,
    .footer,
    .hero__stats {
        display: none !important;
    }
    
    .hero {
        min-height: auto;
        padding: 2rem 0;
        background: none !important;
    }
    
    .hero__overlay {
        display: none;
    }
    
    .hero__title,
    .hero__subtitle,
    .hero__badge {
        color: var(--color-secondary) !important;
    }
    
    .hero__title .text-highlight {
        color: var(--color-primary) !important;
    }
    
    section {
        padding: 1.5rem 0;
        page-break-inside: avoid;
    }
    
    body {
        font-size: 14px;
        color: #000;
    }
    
    a {
        text-decoration: underline;
    }
    
    .btn {
        border: 1px solid #000;
        color: #000 !important;
        background: none !important;
    }
    
    .article-share-sidebar,
    .article-share-bottom {
        display: none !important;
    }
}

/* ============================================
   Reduced Motion Preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   High Contrast Mode
   ============================================ */
@media (prefers-contrast: high) {
    :root {
        --color-primary: #0033cc;
        --color-primary-dark: #002299;
        --color-accent: #cc6600;
        --color-gray-200: #999;
        --color-gray-300: #666;
        --color-gray-400: #333;
        --color-gray-500: #222;
    }
    
    .btn {
        border: 2px solid currentColor;
    }
}

/* ============================================
   Dark Mode Support (Optional Future)
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* 
       Dark mode styles can be added here in the future.
       Currently, the site is designed for light mode.
       
       Example starter:
       :root {
           --color-white: #1a1a1a;
           --color-off-white: #222;
           --color-gray-50: #2a2a2a;
           --color-gray-100: #333;
           ...
       }
    */
}